@extends('front.layout.app')
  <!-- header -->
        <div class="top-header top-navbar">
            @include('front.layout.header')
            <div class="header-down header-new-dropdown">
                <div class="container-fluid">
                    <form action="{{route('patient.search.result')}}"  method="GET">
                        <div class="row textbox-dropdown-area align-items-center">
                            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 header-downarea">
                                <div class="input-group box-shadow">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-transparent border-right-0" id="basic-addon1">
                                            <img src="{{asset('assets/images/search-img.png')}}" alt=""></span>
                                    </div>
                                    <input type="text" name="profession" id="profession" value="{{$old['profession'] ?? ""}}" class="form-control border-left-0" placeholder="Naturopath" > 
                                </div>
                            </div>
                            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 header-downarea">
                                <div class="input-group box-shadow">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-transparent  border-right-0" id="basic-addon2">
                                            <img src="{{asset('assets/images/marker.png')}}" alt=""></span>
                                    </div>
                                <input type="text" id="address" name="address" value="{{ $old['address'] ?? ""}}" class="form-control border-left-0" placeholder="Brighton" >
                                    <input type="hidden" id="latitude" name="latitude"  value="{{ $old['latitude'] ?? ""}}">
                                    <input type="hidden" id="longitude" name="longitude"  value="{{ $old['longitude'] ?? ""}}">
                                    <div class="km-dropdown select-dropdown">
                                        <select name="distance" id="distance" 
                                            class="form-control custom-select border-0 box-shadow-none day-datepicker selectboxli">
                                            <option value="10" @if(isset($input['distance']) && $input['distance'] == "10") selected @endif>+ 10km</option>
                                            <option value="20" @if(isset($input['distance']) && $input['distance'] == "20") selected @endif>+ 20km</option>
                                            <option value="30" @if(isset($input['distance']) && $input['distance'] == "30") selected @endif>+ 30km</option>
                                            <option value="40" @if(isset($input['distance']) && $input['distance'] == "40") selected @endif>+ 40km</option>
                                            <option value="50" @if(isset($input['distance']) && $input['distance'] == "50") selected @endif>+ 50km</option>
                                            <option value="60" @if(isset($input['distance']) && $input['distance'] == "60") selected @endif>60 km +</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 header-downarea">
                                <ul class="sort-filter-area">
                                    <li>
                                        <div class="form-group calender-area date-area">
                                            <span class="input-group-addon"><img src="{{asset('assets/images/calender-new.png')}}" alt=""></span>
                                            <div id="datepicker-group" class="input-group date filter-dropdown-three"
                                                data-date-format="mm-dd-yyyy">
                                                <input class="form-control border-0 box-shadow-none day-datepicker pt-0 pb-0"
                                                    name="date" id="date" type="text" placeholder="Any Day" />
                                                <span class="input-group-addon right-arrow drop-img "></span>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="time-picker"><input type="text" name="time" id="timepicker" /><img src="{{asset('assets/images/clock-img.png')}}"
                                            alt="" class="img-fluid"></li>
                                    <li><a data-toggle="modal" class="filter-modal filter-dropdown-three"
                                            data-target="#exampleModalLong">Filters</a></li>
                                    <li class="sort-dropdown custom-sort-dropdown"> <div class="form-group marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                                    <select name="sort" id="sort" class="form-control selectboxli">
                                       <option hidden>Sort </option>
                                       <option>Chiropractor (7)</option>
                                       <option>Naturopath (3) </option>
                                       <option>Homeopath </option>
                                       <option>Reviews </option>
                                       <option>Price: Lowest first </option>
                                       <option>Price: Highest first </option>
                                       <option>Distance: Nearest First </option>
                                    </select>
                                    </div>
                                </li>
                                    <li class="brdr-none">
                                        {{-- <a href="#" class="appoint-btn eagle-font">Find
                                            <span class="arca-font">My</span> Appointment</a> --}}
                                        <button type="submit" class="appoint-btn eagle-font find-my-appt">Find <span class="arca-font">My</span> Appointment</button>
                                        {{-- <button type="submit" class="appoint-btn eagle-font">My Appointment</button> --}}
                                    </li>        
                                </ul>
                            </div>
                        </div>
                    </form>           
                </div>
            </div>
        </div>
    <!-- end header -->
@section('content')
@php $markers =  array(); @endphp
    <div class="space30">
        <section class="grey-box-googlearea grey-box-change-area">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-7">
                        @foreach ($practitioners as $practitioner)
                        @php
                            if(isset($practitioner->businessProfile->address)){
                            $markers[] = array(
                                        str_replace(","," | ",$practitioner->businessProfile->address),
                                            $practitioner->businessProfile->latitude,
                                            $practitioner->businessProfile->longitude
                                        );
                            }           
                        @endphp
                        <div class="box-area">
                            
                            <div class="bg-curve">
                                <span class="featured-listing-txt">Featured Listing</span>
                            </div>
                            <div class="profile-img-area">
                                <div class="row align-items-center">
                                    <div class="col-xl-3 col-sm-4 col-md-4 col-lg-6">
                                        <div class="profile-img">
                                            <figure class="effect-jazz">
                                                <img src="{{ !empty($practitioner->personalProfile->profile_picture) ? asset('storage/practitioner_picture/'.$practitioner->personalProfile->profile_picture) :  asset('assets/images/user-img4.png') }}" alt="" class="w-100">
                                                <figcaption></figcaption>
                                            </figure>
                                            <a href="javascript:;" class="fav-btn"><span class="heart-icon">
                                                </span></a>

                                        </div>
                                    </div>
                                    <div class="col-xl-4 col-sm-8 col-md-6 col-lg-6 pl-xl-0 mr-30">
                                        <div class="profile-title-area">
                                            <div class="profile-title img-left">
                                                <h1 class="htext">
                                                <a href="practioner-profile.html" target="_blank" class="text-blue blue-h d-block font-bold">
                                                    {{$practitioner->full_name ?? ""}}
                                                </a>
                                                <span>
                                                    {{-- {{$practitioner->personalProfile->profession ?? ""}} --}}
                                                    {{ ProfessionsGet($practitioner->personalProfile->profession ?? "")}}
                                                    {{-- <span class="d-block">Osteopath, Chiropractor</span> --}}
                                                </span>
                                                </h1>
                                            </div>
                                            <ul class="rating-li">
                                                <li><a href="#"><img src="{{asset('assets/images/yellow-star.png')}}" alt=""
                                                            class="img-fluid"></a></li>
                                                <li><a href="#"><img src="{{asset('assets/images/yellow-star.png')}}" alt=""
                                                            class="img-fluid"></a></li>
                                                <li><a href="#"><img src="{{asset('assets/images/yellow-star.png')}}" alt=""
                                                            class="img-fluid"></a></li>
                                                <li><a href="#"><img src="{{asset('assets/images/yellow-star.png')}}" alt=""
                                                            class="img-fluid"></a></li>
                                                <li><a href="#"><img src="{{asset('assets/images/yellow-star-grey.png')}}" alt=""
                                                            class="img-fluid"></a>
                                                </li>
                                                <li class="number-text">47</li>
                                            </ul>
                                            <div class="health-first-area">
                                                <h2> {{$practitioner->businessProfile->name ?? ""}}</h2>
                                                <h3 class="h2-title">
                                                    {{$practitioner->businessProfile->address ?? ""}}
                                                </h3>
                                            </div>
                                            <div class="price-distance-area">
                                                <h5>1.6 km Away</h5>
                                            </div>
                                            @if($practitioner->availability_status == "online") 
                                            <div class="">
                                                <a 
                                                    class="white-onlie-btn cursor-pointer"><img
                                                        src="{{asset('assets/images/green-bullet.png')}}" alt="" class="img-fluid">
                                                    <i>Online consults available</i></a>
                                                {{-- <a data-toggle="modal" data-target="#onlinerequest"
                                                    class="white-onlie-btn cursor-pointer"><img
                                                        src="{{asset('assets/images/green-bullet.png')}}" alt="" class="img-fluid">
                                                    <i>Online consults available</i></a> --}}
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-xl-5 col-md-12 col-lg-12 pr-xl-0">

                                       @if($practitioner->availability_status == "online") 
                                            <div
                                                class="availability-box-area cavailability-box-area fma-search-result book-white-card">
                                                <h2 class="h3-title heart-img available-txt">Book now </h2>
                                                <ul class="age-title p-0 radiocustom-li">
                                                    @if($practitioner->tradingDays())
                                                        @php
                                                            $timestamp = strtotime('today');
                                                            $day = "";
                                                            for ($i = 0; $i < 3; $i++){
                                                                $dayDateTime = new Carbon\Carbon($timestamp);
                                                                //$day = strftime('%A', $timestamp);
                                                                $day = $dayDateTime->isoFormat('dddd');                                                             
                                                                $date = $dayDateTime->isoFormat('ddd DD MMM');                                                     
                                                                $timestamp = strtotime('+1 day', $timestamp); 
                                                                $availableSlots = $practitioner->tradingDays()
                                                                                        ->where('status','open')
                                                                                        ->where('day',$dayDateTime->isoFormat('dddd'))
                                                                                        ->where('start_time','!=','00:00:00')
                                                                                        ->where('end_time','!=','00:00:00')
                                                                                        ->first();
                                                                if(!empty($availableSlots)){  
                                                                    $start  = new Carbon\Carbon($availableSlots->start_time);
                                                                    $end    = new Carbon\Carbon($availableSlots->end_time);
                                                                    $workingHours = $start->diff($end)->format('%h');
                                                                    $slots = ($workingHours  * 60) / 15;
                                                        @endphp                
                                                                    @for($j=0; $j < 3 ; $j++)
                                                                        @php
                                                                            $isExist = App\Models\PractitionerAppoitment::where('time',$start->format('H:i:00'))->where('date',$dayDateTime->format('Y-m-d'))->where('practitioner_id',$practitioner->id)->count();
                                                                            if( $isExist > 0){
                                                                                $start->addMinutes(15)->format('g:i A');
                                                                                continue;
                                                                            }
                                                                        @endphp
                                                                        <li>
                                                                            <input type="radio" id="{{$uniqueId = uniqid()}}" class="slot-booking-btn" name="daydate" value="" 
                                                                                data-data="{{$dayDateTime->isoFormat('DD MMMM, YYYY')}};{{$start->format('g:i A')}};{{$practitioner->id}};{{$practitioner->full_name}};{{$practitioner->businessProfile->address}};" data-date="08-08-2020" data-time="11:00"   data-toggle="modal"
                                                                                data-target="#booknowModal" data-dismiss="modal"/>
                                                                            <label for="{{$uniqueId}}">{{$date}}<span class="d-block">{{$start->format('g:i A')}}</span></label>
                                                                        </li>
                                                                        @php  $start->addMinutes(15)->format('g:i A');   @endphp
                                                                    @endfor
                                                        @php                    
                                                                    }
                                                                }   
                                                        @endphp
                                                    @endif
                                                  



                                                 </ul>
                                                <div class="text-center max-width295 arrow-btn">
                                                    <a data-toggle="modal"  data-target="#calenderModal" class="yellow-btn btn-green cursor-pointer" data-data="{{$practitioner->id}};">See more</a>
                                                </div>
                                            </div>
                                        @else
                                            <div class="unavailable-opening-area text-center book-white-card current-box">
                                                <h2 class="h3-title">Currently unavailable for <span class="d-block">online
                                                        bookings</span></h2>
                                                <div class="text-center">
                                                    <a data-toggle="modal" data-target="#request-Modal"
                                                        class="btn-green yellow-btn cursor-pointer" data-data="{{$practitioner->id}};">Request Booking</a>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach 
                        @php  $locationmarkers = json_encode($markers); @endphp
                    </div>

                    <div class="col-lg-5">
                        <div id="map" style="width: 600px; height: 600px;" class="location-area about-me-text google-map-right">
                        </div>
                    </div>

                    
                </div>
            </div>

        </section>
    </div>


    <!---- Modal Star --->

    <div class="popup-more-filter">
        <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalLongTitle" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <form action="{{route('patient.search.result')}}"  method="GET">
                        <div class="modal-header justify-content-center bottom-border">
                            <h5 class="modal-title popup-heading" id="exampleModalLongTitle">Filters</h5>
                            <button type="button" class="close close-popup" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true"><img src="{{asset('assets/images/close-img.png')}}" alt="" class="img-fluid"></span>
                            </button>
                        </div>
                        <div class="popup-content mCustomScrollbar">
                            <div class="popup-padding bottom-border">
                                <h5 class="popup-title">Condition</h5>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            {{-- <input type="text" class="form-control popup-text"
                                                placeholder="Eg: Endometriosis, Autism, Sciatica"> --}}
                                            <div class="form-group select_custom">
                                                <select id="disease" name="disease[]" class="form-control selectboxli" multiple = "true">
                                                    @foreach($disease as $dise)
                                                        <option value="{{$dise->id}}" @if(isset($input['disease']) && in_array($dise->id, $input['disease'])) selected @endif>{{ucfirst(strtolower($dise->name))}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-body popup-label no-checkbox">
                                <div class="popup-padding bottom-border">
                                    <h5 class="popup-title">Services</h5>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                {{-- <input type="text" class="form-control popup-text"
                                                    placeholder="Eg: Live blood analysis, GAPS, Vega testing"> --}}
                                            <div class="form-group select_custom">
                                                    <select id="services" name="services[]" class="form-control selectboxli" multiple = "true">
                                                        @foreach($services as $service)
                                                            <option value="{{$service->id}}" @if(isset($input['services']) && in_array($service->id, $input['services'])) selected @endif>{{$service->name}}</option>
                                                        @endforeach
                                                    </select>
                                            </div> 
                                            </div>
                                        </div>
                                    </div>
                                </div>
                               
                                <div class="popup-padding days-list bottom-border popup-label-right">
                                    <h5 class="popup-title">Consult type</h5>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" name="consult_type[]" id="clinic" value="clinic" @if(isset($input['consult_type']) &&  in_array("clinic", $input['consult_type'])) checked @endif>
                                        <label class="custom-control-label" for="clinic">Clinic</label>
                                    </div>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" name="consult_type[]" id="online" value="online" @if(isset($input['consult_type']) &&  in_array("online", $input['consult_type'])) checked @endif>
                                        <label class="custom-control-label" for="online">Online</label>
                                    </div>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" name="consult_type[]" id="mobile" value="mobile" @if(isset($input['consult_type']) &&  in_array("mobile", $input['consult_type'])) checked @endif>
                                        <label class="custom-control-label" for="mobile">Mobile</label>
                                    </div>
                                </div>
                                <div class="popup-padding bottom-border facility-checkboxarea">
                                    <h5 class="popup-title">Gender</h5>
                                    <div class="row">
                                        <div class="col">
                                            <div class="custom-control custom-checkbox">
                                                <input type="radio" class="custom-control-input" name="gender" id="female" value="female" @if(isset($input['gender']) && $input['gender'] == "female") checked @endif>
                                                <label class="custom-control-label" for="female">Female</label>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="custom-control custom-checkbox">
                                                <input type="radio" class="custom-control-input" name="gender" id="male" value="male" @if(isset($input['gender']) && $input['gender'] == "male") checked @endif>
                                                <label class="custom-control-label" for="male">Male</label>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="custom-control custom-checkbox">
                                                <input type="radio" class="custom-control-input" name="gender" id="Other" value="Other" @if(isset($input['gender']) && $input['gender'] == "Other") checked @endif>
                                                <label class="custom-control-label" for="Other">Other</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="popup-padding days-list bottom-border popup-label-right">
                                    <h5 class="popup-title">Trading days</h5>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" name="trading_days[]" id="monday" value="monday" @if(isset($input['trading_days']) &&  in_array("monday", $input['trading_days'])) checked @endif>
                                        <label class="custom-control-label" for="monday">Monday</label>
                                    </div>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" name="trading_days[]" id="tuesday" value="tuesday" @if(isset($input['trading_days']) &&  in_array("tuesday", $input['trading_days'])) checked @endif>
                                        <label class="custom-control-label" for="tuesday">Tuesday</label>
                                    </div>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" name="trading_days[]" id="wednesday" value="wednesday" @if(isset($input['trading_days']) &&  in_array("wednesday", $input['trading_days'])) checked @endif>
                                        <label class="custom-control-label" for="wednesday">Wednesday</label>
                                    </div>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" name="trading_days[]" id="thursday" value="thursday" @if(isset($input['trading_days']) &&  in_array("thursday", $input['trading_days'])) checked @endif>
                                        <label class="custom-control-label" for="thursday">Thursday</label>
                                    </div>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" name="trading_days[]" id="friday" value="friday" @if(isset($input['trading_days']) &&  in_array("friday", $input['trading_days'])) checked @endif>
                                        <label class="custom-control-label" for="friday">Friday</label>
                                    </div>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" name="trading_days[]" id="saturday" value="saturday" @if(isset($input['trading_days']) &&  in_array("saturday", $input['trading_days'])) checked @endif>
                                        <label class="custom-control-label" for="saturday">Saturday</label>
                                    </div>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" name="trading_days[]" id="sunday" value="sunday" @if(isset($input['trading_days']) &&  in_array("sunday", $input['trading_days'])) checked @endif>
                                        <label class="custom-control-label" for="sunday">Sunday</label>
                                    </div>
                                </div>
                                <div class="popup-padding bottom-border">
                                    <h5 class="popup-title">Language</h5>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                {{-- <input type="text" class="form-control popup-text"
                                                    placeholder="Eg: Italian"> --}}
                                                <div class="form-group select_custom">
                                                    <select id="languages_known" name="languages_known[]" class="form-control selectboxli" multiple = "true">
                                                        @foreach($languages as $language)
                                                         <option value="{{$language->id}}" @if(isset($input['languages_known']) &&  in_array($language->id, $input['languages_known'])) selected @endif>{{ucfirst(strtolower($language->name))}}</option>
                                                        @endforeach
                                                    </select>
                                                </div> 
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="popup-padding bottom-border bttm-brdr-none facility-checkboxarea">
                                    <h5 class="popup-title">Facilities</h5>
                                    <div class="row">
                                        @foreach ($facilities as $facility)
                                        <div class="col-md-6">
                                            <div class="custom-control custom-checkbox">
                                            <input type="checkbox" name="facilities[]" class="custom-control-input" id="{{"facility_".$facility->id}}" value="{{$facility->id}}" @if(isset($input['facilities']) &&  in_array($facility->id, $input['facilities'])) checked @endif>
                                                <label class="custom-control-label" for="{{"facility_".$facility->id}}">{{ucfirst(strtolower($facility->name))}}</label>
                                            </div>
                                        </div> 
                                        @endforeach
                                        {{-- <div class="col">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="facility1">
                                                <label class="custom-control-label" for="facility1">On site parking</label>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="facility2">
                                                <label class="custom-control-label" for="facility2">Disability
                                                    access</label>
                                            </div>
                                        </div> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer bottom-top">
                            <div class="row">
                                <div class="col-md-5">
                                    <div class="blue-text float-left">77 Results</div>
                                </div>
                                <div class="col-md-7">
                                    <button type="submit"
                                        class="btn btn-primary appointment-btn green-lg-btn float-right eagle-font">Find
                                        <span class="arca-font">My</span> Appointment</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
   
    <!---book Popup--->
    <div class="login-modal">
        <div class="modal fade overflow" id="booknowModal" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content input-box-area">

                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel"><span class="spaceright"><img
                                    src="{{asset('assets/images/tickbg.png')}}" alt="" class="img-fluid"></span> Booking confirmation</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true"><img src="{{asset('assets/images/close-img.png')}}" alt=""></span>
                        </button>
                    </div>

                    <div class="modal-body booking-info-area">

                        <p class="text-center">You are about to book the following
                            <span class="d-block">appointment.</span></p>
                        <div class="row">
                            <div class="col-md-12">
                                 <input type="hidden" name="practitioner_id"  value="" disabled>
                                 <input type="hidden" name="slot_id"  value="" disabled>
                                <div class="row align-items-center">
                                    <div class="col-md-5">
                                        <label>Date</label>
                                    </div>
                                    <div class="col-md-7">
                                        <div class="form-group">
                                            <input type="text" class="form-control small-input"
                                                placeholder="Friday 11th Feb" name="date"  value="" disabled>
                                        </div>
                                        <span class="invalid-feedback d-block"></span>
                                    </div>
                                </div>
                                <div class="row align-items-center">
                                    <div class="col-md-5">
                                        <label>Time</label>
                                    </div>
                                    <div class="col-md-7">
                                        <div class="form-group">
                                            <input type="text" class="form-control small-input" placeholder="12.15PM" name="time"  value="" disabled>
                                        </div>
                                         <span class="invalid-feedback d-block"></span>
                                    </div>
                                </div>
                                <div class="row align-items-center">
                                    <div class="col-md-5">
                                        <label>Name</label>
                                    </div>
                                    <div class="col-md-7">
                                        <div class="form-group">
                                            <input type="text" class="form-control small-input"
                                                placeholder="Danielle Sawyer" name="name"  value="" disabled>
                                        </div>
                                        <span class="invalid-feedback d-block"></span>
                                    </div>
                                </div>
                                <div class="row align-items-center">
                                    <div class="col-md-5">
                                        <label>Type</label>
                                    </div>
                                    <div class="col-md-7">
                                        <div class="online-dropdown select-dropdown avalable-drop no-shadow-box mb-3">
                                            <select id="appointment_type_id" name="appointment_type_id" class="form-control selectboxli"></select>
                                        </div>
                                        <span class="invalid-feedback d-block"></span>
                                    </div>
                                </div>
                                <div class="row align-items-center">
                                    <div class="col-md-5">
                                        <label>Address</label>
                                    </div>
                                    <div class="col-md-7">
                                         <div class="online-dropdown select-dropdown avalable-drop no-shadow-box mb-3">
                                            <select id="location" name="location" class="form-control selectboxli"></select>
                                        </div>
                                        <span class="invalid-feedback d-block"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer booking-info-area">
                        <div class="row align-items-center">

                            <div class="col-md-6 col-6 text-left">
                                <a class="cursor-pointer text-black" data-toggle="modal" data-target="#calenderModal"
                                    data-dismiss="modal" class="continue-txt"><img src="{{asset('assets/images/back-img.png')}}" alt=""
                                        class="img-fluid ml-0 mr-1"> Back </a>
                            </div>
                            <div class="col-md-6 col-6 text-sm-right mt-sm-0">
                                <a id="appointment_confirm_btn"
                                    class="cursor-pointer continue-txt appointment-btn green-lg-btn mb-0 float-right">Confirm</a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- book popup --->
    <!-- booked popup --->
    <!-- Calender popup -->
    <div class="login-modal calender-modal">
        <div class="modal fade" id="calenderModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><img src="{{asset('assets/images/close-img.png')}}" alt=""></span>
                    </button>
                    <div class="modal-body">
                        <div class="mCustomScrollbar">
                            <div class="row">
                                <div class="col-xl-3 col-lg-4 col-md-5 rgt-brdr">
                                    <div class="app">
                                        <div class="app__main">
                                            <div class="calendar">
                                                {{-- <div id="calendar"></div> --}}
                                                <div id="appointment-calendar"></div>
                                            </div>
                                        </div>
                                        <div class="mt-10">
                                            <a href="#"><span class="green-text">Clear all</span></a>
                                        </div>
                                        <div class="white-box-list">
                                            <div class="media">
                                                <div class="img-width">
                                                    <img src="{{asset('assets/images/feature-img-5.png')}}"
                                                        class="align-self-center img-fluid" alt="...">
                                                </div>
                                                <div class="media-body">
                                                    <h5 class="mt-0">Health First Clinic <span class="d-block">All
                                                            Appointments</span></h5>
                                                </div>
                                            </div>
                                            <div class="media">
                                                <div class="img-width">
                                                    <img src="{{asset('assets/images/feature-img-4.png')}}"
                                                        class="align-self-center img-fluid" alt="...">
                                                </div>
                                                <div class="media-body">
                                                    <h5 class="mt-0">Danielle Sawyer <span class="d-block">Homeopath,
                                                            Naturopath</span></h5>
                                                </div>
                                            </div>
                                            <div class="media">
                                                <div class="img-width">
                                                    <img src="{{asset('assets/images/feature-img-2.png')}}"
                                                        class="align-self-center img-fluid" alt="...">
                                                </div>
                                                <div class="media-body">
                                                    <h5 class="mt-0">Lenny Bronx <span
                                                            class="d-block">Kinesiologist</span></h5>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="my-appoint-footer d-none d-lg-block">
                                            <p class="mb-0 txt-blue">Powered by</p>
                                            <div class="myappoint-logo">
                                                <a href="#"><img src="{{asset('assets/images/my-appointment-logo.png')}}" alt=""
                                                        class="img-fluid"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-9 col-lg-8 col-md-7 left-brdr">

                                    <div class="row">
                                        <input type="hidden" name="practitioner_id" id="practitioner_id" value="" />
                                        <input type="hidden" name="date" id="appointment_date" value="" />
                                        {{-- <div class="col-md-6">
                                            <div
                                                class="form-group marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                                                <label>Appointment type</label>
                                                <select id="appointment_type_id" name="appointment_type_id" class="form-control">
                                                    <option hidden value="">Select Appointment type</option>
                                                    <option >Initial consult</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div
                                                class="form-group marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                                                <label>Location</label>
                                                <select id="location" name="location" class="form-control">
                                                    <option hidden >Select Location</option>
                                                </select>
                                            </div>
                                        </div> --}}
                                    </div>
                                    <div class="brdr-bttm"></div>
                                    <div class="next-week-available-text appoint-date-box">
                                        <label id="nextWeekAvaliableSlotsText">Next available</label>
                                        <div class="space-bttm-box">
                                            <div class="row  next-week-available-appointment-slots">
                                                
                                            </div>
                                        </div>
                                    </div>

                                    <div class="brdr-bttm"></div>
                                    <div class="next-available-text appoint-date-box">
                                        <div class="space-bttm-box">
                                            <label id="currentAvaliableSlotsText"></label>
                                            <div class="row available-appointment-slots">
                                               <!-- Appointment slots added on ajax -->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="brdr-bttm"></div>
                                    <div class="next-available-text appoint-date-box">
                                        <label id="nextDayAvaliableSlotsText"></label>
                                        <div class="space-bttm-box">
                                            <div class="row  next-day-available-appointment-slots">
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="my-appoint-footer d-block d-lg-none">
                                    <p class="mb-0 txt-blue">Powered by</p>
                                    <div class="myappoint-logo">
                                        <a href="#"><img src="{{asset('assets/images/my-appointment-logo.png')}}" alt=""
                                                class="img-fluid"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Calender popup --->
    <div class="login-modal booked-modal">
        <div class="modal fade" id="bookedModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content input-box-area">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><img src="{{asset('assets/images/close-img.png')}}" alt=""></span>
                    </button>
                    <div class="modal-body booking-info-area">
                        <div class="row">
                            <div class="col-md-6 col-sm-6 order-last order-sm-first order-lg-first">
                                <div class="img-iphone">
                                    <img src="{{asset('assets/images/img-iphone.png')}}" alt="" class="img-fluid">
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6 order-first order-sm-last order-lg-last">
                                <div class="booked-area">
                                    <h2>Booked!</h2>
                                    <p>Thanks Anita, we have emailed you a copy of your booking confirmation. </p>
                                </div>
                                <div class="booked-area">
                                    <h2>Get mobile</h2>
                                    <p>Download the free My Appointments app and search and manage your wellness
                                        appointments anywhere, anytime.</p>
                                    <div class="row mb-3 btn-width">
                                        <div class="col-md-6 col-sm-6 pr-xl-0 col-6">
                                            <div class="store-top mt-10">
                                                <a href="javascript:"><img src="{{asset('assets/images/app-store.png')}}"
                                                        class="img-fluid" alt=""></a>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-6 pr-xl-0 col-6">
                                            <div class="store-top mt-10">
                                                <a href="javascript:"><img src="{{asset('assets/images/play-store.png')}}"
                                                        class="img-fluid" alt=""></a>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>


                    </div>

                    <div class="modal-footer">
                        <!-- <div class="d-md-none d-none">
                            <div class="download-link">
                                <a href="#" class="appointment-btn green-lg-btn mb-0 mt-0">Send download link to
                                    my phone</a>
                            </div>
                        </div> -->
                        <!-- <div class="row justify-content-end boxpadd">
                            <div class="col-md-6 d-md-block d-none pl-xl-0">
                                <div class="row justify-content-end">
                                    <div class="col-md-6 col-sm-6 pr-xl-0">
                                        <div class="store-top mt-10">
                                            <a href="javascript:"><img src="{{asset('assets/images/app-store.png')}}" class="img-fluid"
                                                    alt=""></a>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-6 pr-xl-0">
                                        <div class="store-top mt-10">
                                            <a href="javascript:"><img src="{{asset('assets/images/play-store.png')}}" class="img-fluid"
                                                    alt=""></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <div class="row justify-content-end inlineflex">
                            <div class="col-md-7">
                                <div class="download-link mb-0 mob-download">
                                    <a href="#" class="appointment-btn green-lg-btn mb-0 mt-0">Send download
                                        link to
                                        my phone</a>
                                </div>

                            </div>

                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- booked popup --->
    <!-- request booking --->
    <div class="login-modal calender-modal request-modal">
        <div class="modal fade" id="request-Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><img src="{{asset('assets/images/close-img.png')}}" alt=""></span>
                    </button>
                    <div class="modal-body">
                        <div class="bookign-request-title d-block d-lg-none">
                            <h2>Booking request</h2>
                            <div class="brdr-bttm"></div>
                        </div>
                        <div class="mCustomScrollbar">
                            <div class="row">
                                <div class="col-xl-6 col-lg-5 col-md-5 rgt-brdr">
                                    <div class="white-box-list">
                                        <div class="media">
                                            <div class="img-width">
                                                <img src="{{asset('assets/images/feature-img-5.png')}}" class="align-self-center img-fluid"
                                                    alt="...">
                                            </div>
                                            <div class="media-body">
                                                <h5 class="mt-0">Health First Clinic <span class="d-block">All
                                                        Appointments</span></h5>
                                            </div>
                                        </div>
                                        <div class="media">
                                            <div class="img-width">
                                                <img src="{{asset('assets/images/feature-img-4.png')}}" class="align-self-center img-fluid"
                                                    alt="...">
                                            </div>
                                            <div class="media-body">
                                                <h5 class="mt-0">Danielle Sawyer <span class="d-block">Homeopath,
                                                        Naturopath</span></h5>
                                            </div>
                                        </div>
                                        <div class="media">
                                            <div class="img-width">
                                                <img src="{{asset('assets/images/feature-img-2.png')}}" class="align-self-center img-fluid"
                                                    alt="...">
                                            </div>
                                            <div class="media-body">
                                                <h5 class="mt-0">Lenny Bronx <span class="d-block">Kinesiologist</span>
                                                </h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-7 col-md-7 left-brdr brdr-request">
                                    <div class="bookign-request-title d-none d-lg-block">
                                        <h2>Booking request</h2>
                                        <div class="brdr-bttm"></div>
                                    </div>
                                    <div class="appoint-locat-type">
                                        <div class="row">
                                            <input type="hidden" id="practitioner_id" name="practitioner_id" />
                                            <div class="col-md-12">
                                                <div
                                                    class="form-group mb-0  online-dropdown select-dropdown avalable-drop ">
                                                    <label>Appointment type</label>
                                                    <select id="request_appointment_type_id" name="appointment_type_id" class="form-control selectboxli">
                                                     <!-- Option dynamically added here -->
                                                    </select>
                                                </div>
                                                <span class="invalid-feedback d-block"></span>
                                            </div>
                                        </div>
                                        <div class="row">    
                                            <div class="col-md-12">
                                                <div
                                                    class="form-group mb-0 online-dropdown select-dropdown avalable-drop ">
                                                    <label>Location</label>
                                                    <select id="request_location" name="location_id" class="form-control selectboxli">
                                                    <!-- Option dynamically added here -->  
                                                    </select>
                                                </div>
                                                <span class="invalid-feedback d-block"></span>
                                            </div>
                                        </div>
                                        <div class="brdr-bttm"></div>
                                    </div>
                                    {{-- <div class="next-available-text">
                                        <label>Available times</label>
                                        <div class="date-cancel-txt">
                                            <p>Weds 10 Feb 1 - 5PM <a href="#"><img src="{{asset('assets/images/close-img.png')}}" alt=""
                                                        class="img-fluid"></a></p>
                                            <p>Thurs 11 Feb - Sat 13 Feb 10AM - 5PM <a href="#"><img
                                                        src="{{asset('assets/images/close-img.png')}}" alt="" class="img-fluid"></a></p>
                                        </div>

                                        <ul class="date-from-area p-0">
                                            <li>Date</li>
                                            <li><input type="text" placeholder="From" class="placeholder-txt"></li>
                                            <li><input type="text" placeholder="To" class="placeholder-txt"></li>
                                        </ul>
                                        <ul class="date-from-area p-0">
                                            <li>Time</li>
                                            <li><input type="text" placeholder="From" class="placeholder-txt"></li>
                                            <li><input type="text" placeholder="To" class="placeholder-txt"></li>
                                        </ul>
                                    </div>
                                    <div class="brdr-bttm"></div> --}}
                                    <div class="reason-additional-area">
                                        <div class="popup-padding text-left p-0">
                                            <h5 class="popup-title font-15 text-left">Reason for consult</h5>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group mb-0">
                                                        <input id="reason_for_consult" name="reason_for_consult" type="text"
                                                            class="form-control popup-text placeholder-txt"
                                                            placeholder="Eg: Child has a fever">
                                                    </div>
                                                    <span class="invalid-feedback d-block"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="brdr-bttm"></div>
                                        <div class="popup-padding text-left p-0">
                                            <h5 class="popup-title font-15 text-left">Additional notes</h5>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group mb-0">
                                                        <textarea id="notes" name="notes" class="form-control popup-text placeholder-txt"
                                                            placeholder="Add any additional notes to your service provider here"></textarea>
                                                        <!--                                    <input type="text" class="form-control popup-text placeholder-txt" placeholder="Eg: Child has a fever">-->
                                                    </div>
                                                    <span class="invalid-feedback d-block"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="row justify-content-end">
                            <div class="col-md-6 col-6 text-sm-right mt-sm-0">
                                <a href="javascript:void(0)" id="booking-request-confirm"
                                    class="continue-txt text-white appointment-btn green-lg-btn mb-0" >Confirm</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Request Booking -->

    <!-- online request Modal -->
    <div class="client-follow-popup customscroll online-request">
        <div class="modal fade" id="onlinerequest" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="popup-marg">
                        <div class="modal-header">
                            <h5 class="modal-title text-center" id="exampleModalLabel">Online consult request</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true"><img src="{{asset('assets/images/close-img.png')}}" alt=""
                                        class="img-fluid" /></span>
                            </button>
                        </div>
                        <div class="modal-body p-0">
                            <div class="mCustomScrollbar">
                                <div class="comm-marg calender-modal">

                                    <div class="media whitecard marg30 mb-0">
                                        <div class="img-width">
                                            <img src="{{asset('assets/images/client-follow-icon7.png')}}"
                                                class="align-self-center img-fluid" alt="...">
                                        </div>
                                        <div class="media-body">
                                            <h4 class="mt-0">You are about to request an online consultation. Please
                                                select your preferred time below. </h4>
                                        </div>
                                    </div>
                                    <div class="brdr-bttm"></div>
                                    <h3 class="font-bold">Time</h3>
                                    <div class="text-center mb-20">
                                        <a href="#"
                                            class="yellow-btn mt-0 save-btn save-btn-bg d-block nowclick w-100">Now</a>
                                    </div>
                                    <div class="clear"></div>
                                    <div class="appoint-locat-type contentshow">
                                        <div
                                            class="form-group marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                                            <h5 class="popup-title font-15 text-left mb-15">Appointment type</h5>
                                            <select id="mounth1" class="form-control selectboxli">
                                                <option hidden>Initial consult</option>
                                                <option>Lorem Ipsum</option>
                                                <option>Lorem Ipsum</option>
                                            </select>
                                        </div>

                                        <div class="reason-additional-area">
                                            <div class="popup-padding text-left p-0">
                                                <h5 class="popup-title font-15 text-left mb-15">Reason for consult</h5>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group mb-0">
                                                            <input type="text"
                                                                class="form-control popup-text placeholder-txt"
                                                                placeholder="Eg: Child has a fever">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="brdr-bttm"></div>
                                            <div class="popup-padding text-left p-0">
                                                <h5 class="popup-title font-15 text-left mb-15">Additional notes</h5>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-group mb-0">
                                                            <textarea class="form-control popup-text placeholder-txt"
                                                                placeholder="Add any additional notes to your service provider here"></textarea>
                                                            <!--                                    <input type="text" class="form-control popup-text placeholder-txt" placeholder="Eg: Child has a fever">-->
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="clear"></div>
                                    <div class="text-or text-center">
                                        Or
                                    </div>
                                    <div
                                        class="availability-box-area cavailability-box-area fma-search-result book-white-card">
                                        <h2 class="h3-title heart-img available-txt">Book alternate time</h2>
                                        <ul class="days-time-li">
                                            <li class="width-li text title">

                                                <ul>
                                                    <li class="cursor-pointer" data-toggle="modal"
                                                        data-target="#booknowModal" data-dismiss="modal">Weds 10
                                                        Feb<span class="d-block"> 9:00am</span></li>

                                                </ul>
                                            </li>
                                            <li class="width-li text title">

                                                <ul>
                                                    <li>Weds 10 Feb<span class="d-block"> 12:00pm</span></li>

                                                </ul>
                                            </li>
                                            <li class="width-li text title">

                                                <ul>
                                                    <li>Weds 10 Feb<span class="d-block"> 01:00pm</span></li>

                                                </ul>
                                            </li>

                                        </ul>
                                    </div>

                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                        <div class="modal-footer d-block">
                            <div class="text-center">
                                <a href="#" class="yellow-btn mt-0 save-btn d-block w-100">See more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- online request Modal -->


@endsection

<!-- PAGE JS & CSS -->
@section('bodyClass','fma-result-area fma-result-area-header home-header search-result-header')

@section('css')
 <style>
        .datepicker-days .clear {
            top: 3px !important;
            left: auto !important;
            right: 3px !important;
        }

        .datepicker-years .clear,
        .datepicker-months .clear,
        .datepicker-days .clear {
            background: url(./assets/images/close-blue-img.png) no-repeat center center;
            width: 30px;
            height: 30px;
            position: absolute;
            top: auto;
            right: 0;
            bottom: 0;
            z-index: 1;
            border-radius: 100%;
            min-width: auto;
            min-height: auto;
            padding: 0;
            text-align: center;
            line-height: 30px;
            text-indent: 999px;
            left: 0;
            margin: 0 auto;
            margin-bottom: 10px;
        }

        .datepicker-months .datepicker-switch {
            position: relative;
            left: -10px;
        }

        .datepicker thead tr:first-child th:hover,
        .datepicker tfoot tr th:hover {
            background: none !important;
        }

        .datepicker-years .clear:hover,
        .datepicker-months .clear:hover,
        .datepicker-days .clear:hover {
            background: url(./assets/images/close-blue-img.png) no-repeat center center !important;
            width: 30px;
            height: 30px;
        }
        .datepicker-days tfoot {
            display: none;
        }
    </style>
    
@endsection



@section('js')
    <script>
        $(document).ready(function () {
            $('#timepicker').mdtimepicker({ theme: 'blue' });
           
            $("#datepicker-group").datepicker({
                format: "dd/mm/yyyy",
                weekStart: 1,
                todayHighlight: true,
                autoclose: true,
                clearBtn: true,
                saveBtn: true,
                startDate: '-',

            });

            $(".nowclick").click(function () {
                $(".contentshow").slideToggle();
            });

            $(document).ready(function () {
                $(".yellow-arrow").click(function () {
                    $(".add-li").show();
                });

                $("#phone-txt").click(function () {
                    $("#phone-txt span").toggle();
                });

                $(".fav-btn").click(function () {
                    $(this).toggleClass('fill');
                });

            });
      
            $('#services').select2({
                placeholder:"Eg: Live blood analysis, GAPS, Vega testing",
               // tags: true,
                tokenSeparators: [",", " "],
            });

            $('#languages_known').select2({
                placeholder:"Eg: Italian",
                //tags: true,
                tokenSeparators: [",", " "],
            });

            $('#disease').select2({
                placeholder:"Eg: Endometriosis, Autism, Sciatica",
                //tags: true,
                tokenSeparators: [",", " "],
            });

        });
    </script>

    <script>
        $(function (event) {
            //Pre Modal for booking confirmation 
            $('#booknowModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var modal = $(this);
                var bookingData = button.data('data');
                clearPreviousErrors(modal);
                $(".invalid-feedback").text('');
                if(bookingData) {
                    var bookingData = bookingData.split(";");
                    modal.find('.modal-body input[name="date"]').val(bookingData[0]);
                    modal.find('.modal-body input[name="time"]').val(bookingData[1]);
                    modal.find('.modal-body input[name="practitioner_id"]').val(bookingData[2]);
                    modal.find('.modal-body input[name="name"]').val(bookingData[3]);
                    modal.find('.modal-body input[name="location"]').val(bookingData[4]);
                    modal.find('.modal-body input[name="slot_id"]').val(button.prop('id'));
                    var formData = new FormData();
                    formData.append('practitioner_id',bookingData[2]);    
                    $.ajax({
                        url: '{{route("patient.appointment.types.get")}}',
                        data: formData,
                        dataType:'JSON',
                        type: 'POST',
                        contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
                        processData: false, // NEEDED, DON'T OMIT THIS
                        // ... Other options like success and etc
                            
                    }).done(function(response) {
                        var appointment_type_id = modal.find('select[name="appointment_type_id"]');
                        var location = modal.find('select[name="location"]');

                        appointment_type_id.empty();
                        appointment_type_id.siblings('.select-styled1').remove();
                        appointment_type_id.siblings('ul').remove();
                        appointment_type_id.parent('.select').prop('class','');
                        
                        location.empty();
                        location.siblings('.select-styled1').remove();
                        location.siblings('ul').remove();
                        location.parent('.select').prop('class','');
                        
                        // appointment_type_id.append($("<option></option>")
                        //                     .attr("hidden", "")
                        //                     .text("Select type")); 
                        
                        // location.append($("<option></option>")
                        //                     .attr("hidden", "")
                        //                     .text("Select location")); 

                        $.each(response.data.appointmentTypes, function(key, value) {
                            appointment_type_id.append($("<option></option>")
                                            .attr("value", value.id)
                                            .text(value.appointment_type)); 
                                            
                        });
                        $.each(response.data.locations, function(key, value) {
                            location.append($("<option></option>")
                                            .attr("value", value.id)
                                            .text(value.name)); 
                        });
                        //regenerateSelect();
                        regenerateSelect(appointment_type_id);
                        regenerateSelect(location);
                    });


                }
            });

            //Modal for appointment based on time
            $("#calenderModal").on('show.bs.modal', function (event) {
                $(".available-appointment-slots").empty();
                $(".next-day-available-appointment-slots").empty();
                $(".next-week-available-appointment-slots").empty();
                $("#currentAvaliableSlotsText").empty();
                $("#nextDayAvaliableSlotsText").empty();
                $(".invalid-feedback").text('');
                var button = $(event.relatedTarget);
                var modal = $(this);
                var bookingData = button.data('data');
                clearPreviousErrors(modal);
                if(bookingData) {
                    var bookingData = bookingData.split(";");
                    modal.find('.modal-body input[name="practitioner_id"]').val(bookingData[0]);
                    var formData = new FormData();
                    formData.append('practitioner_id',bookingData[0]);
                    $.ajax({
                        url: '{{route("patient.appointment.types.get")}}',
                        data: formData,
                        dataType:'JSON',
                        type: 'POST',
                        contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
                        processData: false, // NEEDED, DON'T OMIT THIS
                        // ... Other options like success and etc
                            
                    }).done(function(response) {
                        //after response
                    });
                }   
            });

            //Pre Modal for showing appointment slots based on date
            $("#request-Modal").on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var modal = $(this);
                var bookingData = button.data('data');
                clearPreviousErrors(modal);
                $(".invalid-feedback").text('');
                if(bookingData) {
                    var bookingData = bookingData.split(";");
                    var formData = new FormData();
                    formData.append('practitioner_id',bookingData[0]);
                    modal.find('.modal-body input[name="practitioner_id"]').val(bookingData[0]);
                    $.ajax({
                        url: '{{route("patient.appointment.types.get")}}',
                        data: formData,
                        dataType:'JSON',
                        type: 'POST',
                        contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
                        processData: false, // NEEDED, DON'T OMIT THIS
                        // ... Other options like success and etc
                            
                    }).done(function(response) {
                        var appointment_type_id = modal.find('select[name="appointment_type_id"]');
                        var location = modal.find('select[name="location_id"]');
                       
                        appointment_type_id.empty();
                        appointment_type_id.siblings('.select-styled1').remove();
                        appointment_type_id.siblings('ul').remove();
                        appointment_type_id.parent('.select').prop('class','');
                        
                        location.empty();
                        location.siblings('.select-styled1').remove();
                        location.siblings('ul').remove();
                        location.parent('.select').prop('class','');
                        
                        // appointment_type_id.append($("<option></option>")
                        //                     .attr("hidden", "")
                        //                     .text("Select Appointment type")); 
                        
                        // location.append($("<option></option>")
                        //                     .attr("hidden", "")
                        //                     .text("Select Location")); 

                        $.each(response.data.appointmentTypes, function(key, value) {
                            appointment_type_id.append($("<option></option>")
                                            .attr("value", value.id)
                                            .text(value.appointment_type)); 
                                            
                        });
                        $.each(response.data.locations, function(key, value) {
                            location.append($("<option></option>")
                                            .attr("value", value.id)
                                            .text(value.name)); 
                        });
                       
                        regenerateSelect(appointment_type_id);
                        regenerateSelect(location);
                    });
                }   
            });
            //Modal for showing appointment slots based on date
            $("#appointment-calendar").datepicker({
                todayHighlight: true,
                weekStart: 1,
                startDate: '-',
            }).on({
                'changeDate': function(e) {
                    if(typeof(e.date) == "undefined") return false;
                    var date = e.date;
                    $("#currentAvaliableSlotsText").text(date.toLocaleString('default', { weekday: 'short' })+' '+date.toLocaleString('default', { day: '2-digit' })+' '+date.toLocaleString('default', { month: 'short' }));
                    
                    var modal = $("#calenderModal");
                    var appointment_date =e.date.getFullYear()+'-'+(e.date.getMonth()+1)+'-'+e.date.getDate();
                    $("#appointment_date").val(appointment_date);

                    var nextDate = e.date;
                    nextDate.setDate(date.getDate() + 1);
                    $("#nextDayAvaliableSlotsText").text(nextDate.toLocaleString('default', { weekday: 'short' })+' '+nextDate.toLocaleString('default', { day: '2-digit' })+' '+nextDate.toLocaleString('default', { month: 'short' }));

                    var formData = new FormData();
                    formData.append('practitioner_id',modal.find('.modal-body input[name="practitioner_id"]').val());
                    formData.append('appointment_date',appointment_date);
                    formData.append('appointment_type_id',appointment_type_id);
                    formData.append('location',location);
                    $.ajax({
                        url: '{{route("patient.appointment.available.get")}}',
                        data: formData,
                        dataType:'JSON',
                        type: 'POST',
                        contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
                        processData: false, // NEEDED, DON'T OMIT THIS
                        // ... Other options like success and etc
                            
                    }).done(function(response) {
                        $(".available-appointment-slots").empty();
                        $(".available-appointment-slots").html(response.data.appointments_render);
                        
                        $(".next-day-available-appointment-slots").empty();
                        $(".next-day-available-appointment-slots").html(response.data.nextDayAvalilableSlotsHtml);
                       
                        $(".next-week-available-appointment-slots").empty();
                        $(".next-week-available-appointment-slots").html(response.data.nextWeekAvalilableSlotsHtml);


                    });

                }

            });

            //Booking confirmation button
            $(document).on('click',"#appointment_confirm_btn",function(event){
                //event.preventDefault();
                var modal = $('#booknowModal');
                var formData = new FormData();
                clearPreviousErrors(modal);
                formData.append('date', modal.find('.modal-body input[name="date"]').val());
                formData.append('time', modal.find('.modal-body input[name="time"]').val());
                formData.append('practitioner_id', modal.find('.modal-body input[name="practitioner_id"]').val());
                formData.append('name', modal.find('.modal-body input[name="name"]').val());
                formData.append('slot_id', modal.find('.modal-body input[name="slot_id"]').val());
                if(modal.find('.modal-body select[name="appointment_type_id"]').val() != null){
                    formData.append('appointment_type_id',modal.find('.modal-body select[name="appointment_type_id"]').val());
                }
                if(modal.find('.modal-body select[name="location"]').val() != null){
                    formData.append('location', modal.find('.modal-body select[name="location"]').val());
                }
                $.ajax({
                    url: '{{route("patient.appointment.book")}}',
                    data: formData,
                    dataType:'JSON',
                    type: 'POST',
                    contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
                    processData: false, // NEEDED, DON'T OMIT THIS
                    // ... Other options like success and etc
                }).done(function(response) {
                   if(response.status == "success"){
                    $("#"+response.data.slot_id).closest('li').remove();
                    modal.modal('hide');
                    $('#bookedModal').modal('show');
                   }else{
                        $.each(response.errors, function(key, value) {
                            var input = $('select[name=' + key + ']');
                            var parent = input.closest('.row').find('.invalid-feedback').text(value[0]);
                            input.addClass('is-invalid');
                            var input = $('input[name=' + key + ']');
                            var parent = input.closest('.row').find('.invalid-feedback').text(value[0]);
                            input.addClass('is-invalid');
                            
                        });  
                   }
                   
                });
            });

            //Booking request confirmation button
             $(document).on('click',"#booking-request-confirm",function(event){
                //event.preventDefault();
                var modal = $('#request-Modal');
                var formData = new FormData();
                clearPreviousErrors(modal);
                formData.append('practitioner_id', modal.find('.modal-body input[name="practitioner_id"]').val());
                formData.append('appointment_type_id', modal.find('.modal-body select[name="appointment_type_id"]').val());
                formData.append('location_id', modal.find('.modal-body select[name="location_id"]').val());
                formData.append('reason_for_consult', modal.find('.modal-body input[name="reason_for_consult"]').val());
                formData.append('notes', modal.find('.modal-body textarea[name="notes"]').val());

                if(modal.find('.modal-body select[name="appointment_type_id"]').val() != null){
                    formData.append('appointment_type_id',modal.find('.modal-body select[name="appointment_type_id"]').val());
                }
                if(modal.find('.modal-body select[name="location_id"]').val() != null){
                    formData.append('location_id', modal.find('.modal-body select[name="location_id"]').val());
                }
                
                $.ajax({
                    url: '{{route("patient.appointment.request.book")}}',
                    data: formData,
                    dataType:'JSON',
                    type: 'POST',
                    contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
                    processData: false, // NEEDED, DON'T OMIT THIS
                    // ... Other options like success and etc
                }).done(function(response) {
                   if(response.status == "success"){
                     Swal.fire({
                            icon: response.status,   
                            title: response.msg,
                            showClass: {
                                    popup: 'animate__animated animate__fadeInDown'
                            },
                            hideClass: {
                                    popup: 'animate__animated animate__fadeOutUp'
                            }
                        });
                    modal.modal('hide');
                   }else{
                        $.each(response.errors, function(key, value) {
                            var input = $('select[name=' + key + ']');
                            var parent = input.closest('.row').find('.invalid-feedback').text(value[0]);
                            input.addClass('is-invalid');
                            var input = $('input[name=' + key + ']');
                            var parent = input.closest('.row').find('.invalid-feedback').text(value[0]);
                            input.addClass('is-invalid');
                            
                            var input = $('textarea[name=' + key + ']');
                            var parent = input.closest('.row').find('.invalid-feedback').text(value[0]);
                            input.addClass('is-invalid');
                            
                        });  
                   }
                   
                });
            });

        });
    </script>    

    <!-- Google Maps -->
    {{-- <script src="https://maps.google.com/maps/api/js?key=AIzaSyCjtdxXehCp88pH_w-aQ84QFn-LfRX-3Pg&sensor=false&amp;libraries=places" type="text/javascript"></script> --}}
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCthc-S3bNXYCC2J6mun-z1qQ2maA_yV-E&amp;libraries=places"></script>
    <script type="text/javascript">
        var locations = JSON.parse(`@php echo($locationmarkers); @endphp`);

        //console.log(locations1);
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng(22.3142301,73.17520539999998),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
            })(marker, i));

            google.maps.event.addListener(marker, 'click', function(evt) {
                  map.setZoom(20);
            });
           
            var infowindow = new google.maps.InfoWindow();


            function moveMarker(placeName, latlng) {
                marker.setIcon(image);
                marker.setPosition(latlng);
                infowindow.setContent(placeName);
            }

        }
    </script>

    <!-- Google Address search -->
    {{-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCjtdxXehCp88pH_w-aQ84QFn-LfRX-3Pg&amp;libraries=places"></script> --}}
    {{-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCthc-S3bNXYCC2J6mun-z1qQ2maA_yV-E&amp;libraries=places"></script> --}}
    <script type="text/javascript">
        /*auto google address*/
        var input = document.getElementById('address');
        var options = {
            types: ['geocode']
        //    componentRestrictions: { country: 'uk' } //Turkey only
        };
        var autocomplete = new google.maps.places.Autocomplete(input);
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            $("#latitude").val(place.geometry.location.lat());
            $("#longitude").val(place.geometry.location.lng());

        });
        /*end google address*/
    </script>

   
@endsection