Styles is not loading in my laravel program - php

Question

I have a view which I'm returning in my AdminController which goes in this syntax.
public function create_booking(){
$set_admin = SettingAdmin::orderBy('id')->first();
return view('layouts\quickbookingmodal')->with('set_admin', $set_admin);
}
In HTML this is what im returning, this basically is a pop menu, where the admin user can fill a booking.
<div class="modal fade" id="myModal">
<div class=row>
<div class="col-sm-10 offset-sm-1">
<div class="modal-dialog modal-lg">
<form action="" method="POST">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Quick Booking</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
{{ csrf_field() }}
#isset($error_msg)
#foreach ($error_msg as $error)
<li class="text-danger">{{ $error }}</li>
#endforeach
#endisset
<div class="form-group row">
<label for="placeid" class="col-md-4 col-form-label text-md-right">{{ __('Place ID') }}: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="place_id" required>
</div>
</div>
<div class="form-group row">
<label for="placeid" class="col-md-4 col-form-label text-md-right">{{ __('Arrival day') }}: </label>
<div class="col-md-6">
<div class="container11">
<div class="t-datepicker">
<span id="tdatepik" class="t-check-in"></span>
<input id="searchdate_numberofdays" type="number" name="no_of_day" placeholder="{{ __('Number of days') }}: 1">
#isset($maparray['err_msg'])
<span id="errormsg_txt" style="color:red;"> {{ __('You can book maximum') }} {{ $maparray["set_admin"]->max_no_days }} {{ __('days') }}.</span><br>
#endisset
<span id="errormsg_txt" style="color:red;display:none;"> {{ __('Arrival day is not selected') }}. </span><br>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="fullname" class="col-md-4 col-form-label text-md-right">{{ __('Full Name') }}: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="user_fullname" required>
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('Email address') }}: </label>
<div class="col-md-6">
<input type="email" class="form-control" name="user_email" required>
</div>
</div>
<div class="form-group row">
<label for="phone" class="col-md-4 col-form-label text-md-right">{{ __('Phone') }}: </label>
<div class="col-md-6">
<input type="tel" class="form-control" name="user_phone" required>
</div>
</div>
<div class="form-group row">
<label for="geust" class="col-md-4 col-form-label text-md-right">{{ __('Number of adults') }}[1-4]: </label>
<div class="col-md-6">
<select class="form-control booking_inp_textbox_style" id="numberofguest" name="numberofguest" onchange="addFieldsadmin(this.value);">
<option value="0" active>1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="babies" class="col-md-4 col-form-label text-md-right">{{ __('Number of babies') }}[1-3]: </label>
<div class="col-md-6">
<select class="form-control booking_inp_textbox_style" id="numberofbabies" name="numberofbabies" onchange="addFieldsadmin2(this.value);">
<option value="0" active>0</option>
<option id="hidden_op_style1" value="1">1</option>
<option id="hidden_op_style2" value="2">2</option>
<option id="hidden_op_style3" value="3">3</option>
</select>
</div>
</div>
<div class="containerinput">
{{-- dynamic input surname using javascript --}}
</div>
<div class="containerinput2">
{{-- dynamic input surname using javascript --}}
</div>
<div class="form-group row">
<label for="promo" class="col-md-4 col-form-label text-md-right">{{ __('Promo Code') }}: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="user_promo">
</div>
</div>
<div class="form-group row">
<label for="book" class="col-md-4 col-form-label text-md-right">{{ __('Booked By') }}: </label>
<div class="col-md-6">
<label>{{ Auth::user()->name }}</label>
</div>
</div>
#if (Auth::user()->role == 'admin')
<div class="form-group row">
<label for="Amount" class="col-md-4 col-form-label text-md-right">{{ __('Payment Type') }}: </label>
<div class="col-md-6">
<input type="radio" name="user_payment_type" value="Entrance">
<label for="Entrance" class="booking_payment_type_style">{{ __('Entrance (Cash)') }}</label>
<input type="radio" name="user_payment_type" value="Admin" checked>
<label for="Entrance" class="booking_payment_type_style">{{ __('Admin (Free)') }}</label><br>
</div>
</div>
#else
<div class="form-group row">
<label for="promo" class="col-md-4 col-form-label text-md-right">{{ __('Payment Type') }}: </label>
<div class="col-md-6">
<input type="radio" name="user_payment_type" value="Entrance" checked>
<label for="Entrance" class="booking_payment_type_style">{{ __('Entrance (Cash)') }}</label>
</div>
</div>
#endif
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">{{ __('Save') }}</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
var today = new Date();
tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 60);
var date = tomorrow.getFullYear()+'-'+(tomorrow.getMonth()+1)+'-'+tomorrow.getDate();
$(document).ready(function(){
// Call global the function
$('.t-datepicker').tDatePicker({
// options here
titleDateRange :'{{ __('day') }}',
titleDateRanges:'{{ __('days') }}',
titleToday :'{{ __('Today') }}',
limitDateRanges :'{{ $set_admin->max_no_days+1 }}',
titleCheckIn :'{{ __('Check In') }}',
titleCheckOut :'{{ __('Check Out') }}',
numCalendar : 1,
endDate: date,
nextDayHighlighted :false,
toDayHighlighted :true,
toDayShowTitle :true,
autoClose: true,
dateRangesHover: false,
});
});
// $('.t-datepicker').tDatePicker('setEndDate','2020-07-28');
</script>
<script type="text/javascript">
#isset($error_msg)
#if (count($error_msg) > 0)
$('#myModal').modal('show');
#endif
#endisset
</script>
But anytime i load the page, it does not load it as a popup just static HTML. However i have the same popup in this page called dashboard, which when clicked shows the popup perfectly with all the styles. I'm not sure why this is happening.
#extends('layouts.adminmaster')
#section('section')
<div class="container paddingTop20">
<h1>Negombo Admin Panel</h1>
<hr>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-header bg-primary">
<span class="dashboardcardstyle">{{ __('Quick Booking') }}</span>
</div>
<div class="card-body">
<center><button type="button" class="btn btn-success dashboardcardbodystyle2" data-toggle="modal" data-target="#myModal">{{ __('Book Now') }}</button></center>
#include('layouts.quickbookingmodal')
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-header bg-primary">
<span class="dashboardcardstyle">Total Places</span>
</div>
<div class="card-body">
<center><span class="dashboardcardbodystyle">{{ $numberofplace }}</span></center>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-header bg-primary">
<span class="dashboardcardstyle">Total Bookings</span>
</div>
<div class="card-body">
<center><span class="dashboardcardbodystyle">{{ $numberofbookings }}</span></center>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
#include('layouts.recentactivaty')
</div>
<div class="col-sm-2">
</div>
</div>
{{-- second row of dashboard --}}
<div class="row paddingTop20">
<div class="col-sm-4">
#if (Auth::user()->role== "admin")
<div class="card">
<div class="card-header bg-primary">
<span class="dashboardcardstyle">Total Earnings</span>
</div>
<div class="card-body">
<table style="width:100%" align="center" class="table-hover">
<tr>
<td><strong>From Entrance: </strong></td>
<td>{{ $earningEntrance }} <i class="fa fa-eur" aria-hidden="true"></i></td>
</tr>
<tr>
<td><strong>From {{ __('Agreements') }}: </strong></td>
<td>{{ $earningAgr }} <i class="fa fa-eur" aria-hidden="true"></i></td>
</tr>
<tr>
<td><strong>From Paypal: </strong></td>
<td>{{ $earningPaypal }} <i class="fa fa-eur" aria-hidden="true"></i></td>
</tr>
<tr>
<td><strong>From Stripe: </strong></td>
<td> {{ $earningStripe }} <i class="fa fa-eur" aria-hidden="true"></i></td>
</tr>
<tr>
<td><strong>From Credit Card: </strong></td>
<td>{{ $earningcard }} <i class="fa fa-eur" aria-hidden="true"></i></td>
</tr>
</table>
{{-- <center><span class="dashboardcardbodystyle">{{ $numberofbookings }}</span></center> --}}
</div>
</div>
#else
<div class="card">
<div class="card-header bg-primary">
<span class="dashboardcardstyle">Server Time</span>
</div>
<div class="card-body">
<center><span>{{ date("d M, Y") }}</span></center>
<center><span class="dashboardcardbodystyle">{{ date("h:i:s A") }}</span></center>
</div>
</div>
#endif
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-header bg-primary">
<span class="dashboardcardstyle">{{ __('Total') }} {{ __('Agreements') }}</span>
</div>
<div class="card-body">
<center><span class="dashboardcardbodystyle">{{ $numberofAggr }}</span></center>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-header bg-primary">
<span class="dashboardcardstyle">Total Entrance</span>
</div>
<div class="card-body">
<center><span class="dashboardcardbodystyle">{{ $numberofEntrance }}</span></center>
</div>
</div>
</div>
</div>
{{-- second row of dashboard --}}
</div>
#endsection
This is how the popup is supposed to look like.
But this is how it looks
This is what i get when i add the #extends('layouts.adminmaster') and #section('section')