@extends('layouts.master')
@section('content')
<input type="hidden" id="a_u_a_b_t" value="{!! $a_user_api_bearer_token !!}">
<script type="text/javascript">
localStorage.setItem('a_u_a_b_t', $('#a_u_a_b_t').val());
</script>
<input type="hidden" id="user_latitude" value="{{Auth::user()->address_latitude}}">
<input type="hidden" id="user_longitude" value="{{Auth::user()->address_longitude}}">
<input type="hidden" id="savedAddress" value="{{Auth::user()->address1}}">
<input type="hidden" id="gettingthelatlon" value="" />
<input type="hidden" id="professional-cityId" value="" />
<input type="hidden" id="professionalUsername" value="{{$category}}" />


<div class="container-fluid">
   <div class="container rounded bg-white booking-card">
      <div class="row">
         <div class="col-md-6">
            <div class="ml-2">
               <h4 class="text-muted">Professional Details</h4>
               <span class="professional-image"></span>
               <h3 class="professional-name"></h3>
               <h4 class="professional-profession text-success"></h4>
               <h5 class="professional-rating text-warning"></h5>
               <h6 class="professional-experience"></h6>
               <address class="professional-address"></address>
               <p class="professional-about"></p>
            </div>
         </div>
         <div class="col-md-6">
            <form id="book-professional-form" method="post" enctype="multipart/form-data">
               @csrf
               <h4 class="text-muted">Booking Details</h4>
               <div class="row mt-5">
                  <div class="col-md-6">
                     <label for="" class="text-muted">Select Date</label>
                     <br>
                     <input type="text" class="browser-default custom-select mb-4 datepicker" id="date"
                        name="booking_date" placeholder="Select Date" data-date-format="yyyy-mm-dd" />
                  </div>
                  <div class="col-md-6">
                     <label for="" class="text-muted">Select Time</label>
                     <br>
                     <input type="text" id="timepicker" name="booking_time" placeholder="Select Time"
                        class="form-control browser-default custom-select mb-4">
                  </div>
                 
                  <div class="col-md-12">
                     <h4 for="" class="text-muted">Select Service Location</h4>
                     <br>
                     <div class="col-md-12 mb-3">
                     <select name="" id="selectedAddress" class="form-control">
                        <option value="" selected="selected">Select Address</option>
                        @foreach(\App\Http\Controllers\Address\AddressController::index() as $address)
                           <option value="{{$address->cityId}}">{{$address->address}}</option>     
                        @endforeach
                        <option value="addNewAddressButton" id="addNewAddressId">Add new address</option>
                     </select>
                     <input type="hidden" id="selectedUserAddress" name="user_address" value="">
                     </div>
                  </div>
               </div>
               <!--Third Row-->
               <div class="row">
                  <div class="col-sm-12">
                     <label for="">Instructions</label>
                     <textarea class="form-control" type="text" name="instruction" rows="2" maxlength="500"
                        required></textarea>
                  </div>
               </div>
               <input type="hidden" value="" id="professional_name" name="professional_name">
               <input type="hidden" value="" id="professional_email" name="professional_email">
               <input type="hidden" value="" id="professional_avatar" name="professional_avatar">
               <input type="hidden" value="" id="professional_profession" name="professional_profession">
               <input type="hidden" value="" id="professional_charges" name="professional_charges">
               <input type="hidden" value="" id="professional_amount" name="professional_amount">
               <input type="hidden" value="" id="professional_phone" name="professional_phone">
               <input type="hidden" value="" id="professional_id" name="professional_id">
               <input type="hidden" value="" id="professionalfcmtoken" name="professionalfcmtoken">
               <input type="hidden" value="{{Auth::user()->email}}" id="" name="user_email">
               <input type="hidden" value="{{Auth::user()->name}}" name="user_name">
               <input type="hidden" value="{{Auth::user()->phone_number}}" name="user_phone">
               <input type="hidden" value="{{Auth::user()->avatar}}" name="user_avatar">
               <input type="hidden" id="userid" value="{{Auth::user()->id}}" name="user_id">
               <input type="hidden" value="{{Auth::user()->fcmToken}}" name="userfcmtoken">
               <input type="hidden" value="" id="booking-latitude" name="user_latitude">
               <input type="hidden" value="" id="booking-longitude" name="user_longitude">
               <input type="hidden" value="" id="bookingcount">
               <hr>
               <button type="submit" class="btn btn-primary processing float-right">Book Appoinment</button>
            </form>
            <div id="snackbar" class="snackbar-message"></div>
         </div>
      </div>
   </div>
</div>
<div class="modal fade" id="AddNewAddress" tabindex="-1" role="dialog" aria-labelledby="AddNewAddressLabel"
   aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="AddNewAddressLabel">New address</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body">
            <form action="{{route('address.store')}}" id="addressStoreForm">
               @csrf
               <div class="form-group">
                  <label for="recipient-name" class="col-form-label">Location:</label>
                  <div class="row">
                     <div class="col-md-6">
                        <select class="form-control" name="stateId" id="state">

                        </select>
                     </div>
                     <div class="col-md-6">
                        <select class="form-control" name="cityId" id="city">

                        </select>
                     </div>
                  </div>
               </div>
               <div class="form-group">
                  <label for="message-text" class="col-form-label">Full Address:</label>
                  <textarea class="form-control" name="address1" id="message-text"
                     placeholder="Flat,Builing,Aread,Quarter"></textarea>
               </div>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
           <a href="{{route('address')}}"> <button type="button" class="btn btn-primary btn-sm">Manage Address</button></a>
            <button type="submit" class="btn btn-primary btn-sm">Save address</button>
         </div>
         </form>
      </div>
   </div>
</div>


@if(count(\App\Http\Controllers\Address\AddressController::index()) == 5)
                           <input type="hidden" id="addressLimit" value="full">
                        @endif
<!-- ========================Loading Model ===================== -->
<div class="modal fade bd-example-modal-sm" id="loading" data-backdrop="static" data-keyboard="false" tabindex="-1"
   role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-sm">
      <div class="modal-content text-center">
         <img src="{{asset('assets/images/bookloading.gif')}}" id="spinner" alt="Loading" height="200" width="200">
      </div>
   </div>
</div>
<!-- ==============================End Loading Model========================= -->
<!-- <script
   src="https://maps.googleapis.com/maps/api/js?key={{ Config::get('app.GOOGLE_MAPS_API_KEY') }}&callback=initMap&libraries=&v=weekly"
   defer></script> -->
<script src="{{asset('js/professional/bookingArea.js')}}"></script>
@endsection