@extends('front.inner-layout.app')
@section('content')


<input type="hidden" name="practitioner_id" id="practitioner_id" value={{ $practitioner->id }} />
<input type="hidden" name="practitionersearch" id="practitionersearch" value="" />
<input type="hidden" name="practitionerlocation" id="practitionerlocation" value="" />
<input type="hidden" name="location_id" id="location_id" value="" />

<!-- Search client Modal -->
<div class="client-follow-popup customscroll multilocation-modal">
   <div class="modal fade" id="multilocation-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" 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 title="View Details" class="modal-title text-center eagle-font cursor-pointer openClientCard clientapptname">Angela Frost</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true"><img src="{{asset('assets/images/close-img.svg')}}" alt="" class="img-fluid closeimg"></span>
         </button>
      </div>
      <div class="modal-body p-0">
         <div class="mCustomScrollbar">
            <div class="comm-marg">
               <div class="mt-20 searchApptClient1">

               </div>
            </div>
         </div>
      </div>
   </div>
   </div>
   </div>
   </div>
   </div>
   <!-- Search client Modal-->

<div class="page-content dashboard-wrapper mdashboard-wrapper clientd-wrapper">
   {{-- <div class="row align-items-center">
      <div class="col-lg-4 col-md-4 col-sm-4">
         <h1 class="page-title eagle-font font-400"><span class="arca-font">My</span> Appointment List</h1>
      </div>
     @include('front.inner-layout.header')
   </div>
   <div class="brdr-bttm mb-0"></div> --}}

   <div class="appointment-header">
      <div class="left">
         <button class="prev nav-btn" id="prevBtn"><span class="fc-icon fc-icon-chevron-left"></span></button>
         <button class="next nav-btn" id="nextBtn"><span class="fc-icon fc-icon-chevron-right"></span></button>
         <div class="date" id="date"></div>
      </div>
      <div class="middle">
         <ul>
            <li>
               <button class="cal-btn" id="cal-btn">
                  <img src="{{asset('assets/images/calendar-icon-green.svg')}}" width="16" class="img-fluid">
               </button>
            </li>
            <li>
               <button id="today-btn" class="text-btn">
                  Today
               </button>
            </li>
            <li>

               <button id="" class="view_calendar text-btn">
                  Calendar View
               </button>


               {{-- <div class="dropdown">
                  <button type="button" class="dropdown-toggle text-btn" data-toggle="dropdown" id="" aria-expanded="false">
                     View
                  </button>
                  <div class="dropdown-menu view-dropdown" aria-labelledby="dropdownMenuButton" x-placement="bottom-start">
                     <a class="dropdown-item" id="dayChange" href="#">Day</a>
                     <a class="dropdown-item" href="#" id="weekChange">Week</a>
                     <a class="dropdown-item" href="#" id="monthChange">Month</a>
                  </div>


               </div> --}}
            </li>
            <li>
               <div class="dropdown">
                  <button type="button" class="dropdown-toggle" data-toggle="dropdown" id="allLocations" aria-expanded="false">All locations</button>
                  <div class="dropdown-menu view-dropdown" id="locationsDropdown" aria-labelledby="dropdownMenuButton1">
                  </div>
				   </div>
            </li>
            <li>
               <div class="dropdown">
                     <button type="button" class="dropdown-toggle" data-toggle="dropdown" id="allProviders" aria-expanded="false">All providers</button>
                     <div class="dropdown-menu view-dropdown" id="providersDropdown" aria-labelledby="dropdownMenuButton1">
                     </div>
               </div>
            </li>

            <li>
               <div class="dropdown search-dropdown">
                  <button type="button" class="dropdown-toggle cal-btn fc-searchicon-button12" data-toggle="dropdown" id="dropdownMenuButton6" aria-expanded="false">
                     <img src="{{asset('assets/images/search-icon-green.svg')}}" width="16" class="img-fluid">
                  </button>
                 <div class=""></div>
                  {{-- <div class="dropdownserch-area dropdown-menu ">
                        <input type="text" class="form-control typeahead" placeholder="Enter client name" name="client__id" id="client__id" value="" autocomplete="off">
                        <input id="searchidclient" name="search_id_client" value="" type="hidden">
                        <span class="tt-dataset text-danger"></span>
                        <button id="search_id_client" class="cursor-pointer save-btn save-btn-bg w-100">Search</button>
                  </div> --}}
               </div>
            </li>
         </ul>
      </div>
      <div class="right">
      <ul class="dashboard-top-area customdroptoparea" id="customdroptoparea">
         {{-- <li>
            <button class="text-btn">
               Wait List
            </button>
         </li> --}}
         <li class="calender-drpdown tran-plus">
            <div class="dropdown sms-whitecard  dropdownchat">
               <button class="btn btn-secondary dropdown-toggle smsClick" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <img src='{{asset("assets/images/sms-img.svg")}}' alt="" class="img-fluid notifictop wsms" />
                  <span class="notification-txt smsCount" style="display: none;"></span>
               </button>
               <div class="dropdown-menu view-dropdown customscroll px-0" id="hidesmssec" aria-labelledby="dropdownMenuButton">
                  {{-- <a class="cursor-pointer float-left" href="{{route('practitioner.get.notifications')}}" class="dropdown-item " data-id="0" data-flag="viewAll" style="color:#45747a !important;">View all</a> --}}
                  <a class="cursor-pointer float-right changeSmsStatus font-15  mt-2 mr-3" class="dropdown-item " data-communication_id="0" data-reply_id="0" data-flag="markAllRead" style="color:#45747a !important;">Mark all as read</a>
                  <br>
                  <hr class="mb-0" />
                  <div class="mCustomScrollbar">
                     <div class="appendSMSNotification">
                     </div>
                  </div>

                  <hr class="mt-0" />
                  <div class="text-center px-3 ">
                     <a href="#" data-toggle="modal" data-target="#sendSmsMessageGlobal" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100 mb-3">Send new message</a>
                  </div>
               </div>
            </div>
         </li>

      <li class="calender-drpdown tran-plus">
         <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <img src="{{asset('assets/images/transp-pluss.svg')}}" alt="" class="img-fluid transplus" />
            </button>
            <div class="dropdown-menu view-dropdown" aria-labelledby="dropdownMenuButton">
               {{-- chane 07-02-2022  --}}
               {{-- <a class="dropdown-item cursor-pointer" data-toggle="modal" data-target="#quickaddModal">+ Appointment</a>  --}}
               <a class="dropdown-item cursor-pointer" href="{{route('practitioner.appointment.newpage')}}">+ Appointment</a>
               <!-- <a class="dropdown-item cursor-pointer" data-toggle="modal" data-target="#addquickModal">+ Client</a> -->
               <a id="openAddNewClientModal" href="javacscript:void(0)" class="dropdown-item cursor-pointer">+ Client</a>
               <!-- <a class="dropdown-item cursor-pointer openLatpay" data-first_name="John" data-last_name="Doe" data-email="john@gmail.com" data-amount="10">+ LatPay</a> -->
            </div>
         </div>
      </li>


      <li class="calender-drpdown tran-plus notification recommenddrop no-bulletdrop udetailsdrop">
         <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle notificationClick" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <img src='{{asset("assets/images/notification-img.svg")}}' alt="" class="img-fluid transplus" />
               <span class="notification-txt notificationCount" style="display: none;"></span>
            </button>
            <div class="dropdown-menu view-dropdown" id="hidenotifsec" aria-labelledby="dropdownMenuButton">
               <form>
                  <a class="cursor-pointer float-left" href="{{route('practitioner.get.notifications')}}" class="dropdown-item " data-id="0" data-flag="viewAll" style="color:#45747a !important;">View all</a>
                  <a class="cursor-pointer float-right changeNotificationStatus " class="dropdown-item " data-id="0" data-flag="markAllRead" style="color:#45747a !important;">Mark all as read</a>

                  <br>
                  <hr>

                  <!-- // New notification changes // bahadur -->
                  <!-- <div class="notification">
                  <div class="appendPractitonerNotification">
                  </div>
                  <a class="dropdown-item cursor-pointer float-right mb-3 " id="see-all-notification"  data-id="0" data-flag="markAllRead" style="color:#45747a !important;">Show more</a>
                  <div class="more-notification d-none">
                  </div>
               </div> -->
                  <!-- //end -->


                  <div class="appendPractitonerNotification">
                  </div>

                  <div class="appendRecheduleNotification">
                  </div>

                  <div class="appendCancelledNotification">
                  </div>

                  <div class="appendArrivedNotification">
                  </div>

                  <div class="appendPaidNotification">
                  </div>

                  <div class="appendPaidinvoiceNotification">
                  </div>

                  <div class="appendIntakeFormNotification">
                  </div>

                  <div class="appendNewOrderNotification">
                  </div>

                  <div class="appendReferralNotification">
                  </div>

                  <div class="appendTestResultNotification">
                  </div>

                  <div class="appenddocumentsNotification">
                  </div>

               </form>
            </div>

         </div>
      </li>
   </ul>
      </div>
   </div>

   <div class="appointment-list-main">

      

      

    {{-- <div class="appointment-list-block">
      <div class="row">
        <div class="col-sm-12 col-md-3">
          <div class="appo-time">
            <span>10.00am - 11.00am</span>
            <span>Claudia Fran</span>
          </div>
        </div>
        <div class="col-sm-12 col-md-9">
          <div class="appo-right-data">
              <span>Initial consultation</span>
              <h6>Lenny Bronx</h6>
              <h6>Belmore Rd</h6>
          </div>
        </div>
      </div>

      <div class="dropdown three-dot-dropdown">
         <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a>
         <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Reschedule</a>
            <a href="#" class="dropdown-item">Edit appointment</a>
            <a href="#" class="dropdown-item">Delete</a>
         </div>
      </div>

      <div class="appointment-hover">
         <ul>
            <li>
               <button class="btn paid">
                  <img src="{{asset('assets/images/paid-icon.svg')}}" width="57" alt="paid" class="img-fluid">
               </button>
            </li>
            <li>
               <button class="btn confirm-btn">
                  <img src="{{asset('assets/images/confirmed.svg')}}" width="30" alt="paid" class="img-fluid">
               </button>
            </li>
            <li>
               <button class="btn tick-btn">
                  <img src="{{asset('assets/images/tick-icon.svg')}}" width="30" alt="paid" class="img-fluid">
               </button>
            </li>
         </ul>
      </div>
    </div>

    <div class="appointment-list-block appointment-deleted-block">
      <div class="row">
        <div class="col-sm-12 col-md-3">
          <div class="appo-time">
            <span>10.00am - 11.00am</span>
            <span>Claudia Fran</span>
          </div>
        </div>
        <div class="col-sm-12 col-md-9">
          <div class="appo-right-data">
              <span>Initial consultation</span>
              <h6>Lenny Bronx</h6>
              <h6>Belmore Rd</h6>
          </div>
        </div>
      </div>

      <div class="dropdown three-dot-dropdown">
         <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a>
         <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Reschedule</a>
            <a href="#" class="dropdown-item">Edit appointment</a>
            <a href="#" class="dropdown-item">Delete</a>
         </div>
      </div>

      <div class="appointment-hover">
         <ul>
            <li>
               <button class="btn delete-btn">
                  <img src="{{asset('assets/images/close-black-img-appointment.svg')}}" width="30" alt="paid" class="img-fluid">
               </button>
            </li>
         </ul>
      </div>
    </div>

    <div class="appointment-list-block blockout-added">
      <div class="row">
        <div class="col-sm-12 col-md-3">
          <div class="appo-time">
            <span>10.00am - 11.00am</span>
            <span>Claudia Fran</span>
          </div>
        </div>
        <div class="col-sm-12 col-md-9">
          <div class="appo-right-data">
              <span>Initial consultation</span>
              <h6>Lenny Bronx</h6>
              <h6>Belmore Rd</h6>
          </div>
        </div>
      </div>

      <div class="dropdown three-dot-dropdown">
         <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a>
         <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Edit</a>
            <a href="#" class="dropdown-item">Delete</a>
         </div>
      </div>
    </div>

    <div class="appointment-list-block cancel">
      <div class="row">
        <div class="col-sm-12 col-md-3">
          <div class="appo-time">
            <span>10.00am - 11.00am</span>
            <span>Claudia Fran</span>
          </div>
        </div>
        <div class="col-sm-12 col-md-9">
          <div class="appo-right-data">
              <span>Initial consultation</span>
              <h6>Lenny Bronx</h6>
              <h6>Belmore Rd</h6>
          </div>
        </div>
      </div>

      <div class="dropdown three-dot-dropdown">
         <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a>
         <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Reschedule</a>
            <a href="#" class="dropdown-item">Edit appointment</a>
            <a href="#" class="dropdown-item">Delete</a>
         </div>
      </div>

      <div class="appointment-hover">
         <ul>
            <li>
               <button class="btn paid">
                  <img src="{{asset('assets/images/paid-icon.svg')}}" width="57" alt="paid" class="img-fluid">
               </button>
            </li>
            <li>
               <button class="btn confirm-btn">
                  <img src="{{asset('assets/images/confirmed.svg')}}" width="30" alt="paid" class="img-fluid">
               </button>
            </li>
            <li>
               <button class="btn tick-btn">
                  <img src="{{asset('assets/images/tick-icon.svg')}}" width="30" alt="paid" class="img-fluid">
               </button>
            </li>
         </ul>
      </div>
    </div> --}}

    {{-- <div class="appointment-list-block warning">
      <div class="row">
        <div class="col-sm-12 col-md-3">
          <div class="appo-time">
            <span>10.00am - 11.00am</span>
            <span>Claudia Fran</span>
          </div>
        </div>
        <div class="col-sm-12 col-md-9">
          <div class="appo-right-data">
              <span>Initial consultation</span>
              <h6>Lenny Bronx</h6>
              <h6>Belmore Rd</h6>
          </div>
        </div>
      </div>

      <div class="dropdown three-dot-dropdown">
         <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a>
         <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Reschedule</a>
            <a href="#" class="dropdown-item">Edit appointment</a>
            <a href="#" class="dropdown-item">Delete</a>
         </div>
      </div>

      <div class="appointment-hover">
         <ul>
            <li>
               <button class="btn paid">
                  <img src="{{asset('assets/images/paid-icon.svg')}}" width="57" alt="paid" class="img-fluid">
               </button>
            </li>
            <li>
               <button class="btn confirm-btn">
                  <img src="{{asset('assets/images/confirmed.svg')}}" width="30" alt="paid" class="img-fluid">
               </button>
            </li>
            <li>
               <button class="btn tick-btn">
                  <img src="{{asset('assets/images/tick-icon.svg')}}" width="30" alt="paid" class="img-fluid">
               </button>
            </li>
         </ul>
      </div>
    </div> --}}

    {{-- <div class="appointment-list-block">
      <div class="row">
        <div class="col-sm-12 col-md-3">
          <div class="appo-time">
            <span>10.00am - 11.00am</span>
            <span>Claudia Fran</span>
          </div>
        </div>
        <div class="col-sm-12 col-md-9">
          <div class="appo-right-data">
              <span>Initial consultation</span>
              <h6>Lenny Bronx</h6>
              <h6>Belmore Rd</h6>
          </div>
        </div>
      </div>

      <div class="dropdown three-dot-dropdown">
         <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a>
         <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Reschedule</a>
            <a href="#" class="dropdown-item">Edit appointment</a>
            <a href="#" class="dropdown-item">Delete</a>
         </div>
      </div>

      <div class="appointment-hover">
         <ul>
            <li>
               <button class="btn paid">
                  <img src="{{asset('assets/images/paid-icon.svg')}}" width="57" alt="paid" class="img-fluid">
               </button>
            </li>
            <li>
               <button class="btn confirm-btn">
                  <img src="{{asset('assets/images/confirmed.svg')}}" width="30" alt="paid" class="img-fluid">
               </button>
            </li>
            <li>
               <button class="btn tick-btn">
                  <img src="{{asset('assets/images/tick-icon.svg')}}" width="30" alt="paid" class="img-fluid">
               </button>
            </li>
         </ul>
      </div>
    </div>

    <div class="appointment-list-block">
      <div class="row">
        <div class="col-sm-12 col-md-3">
          <div class="appo-time">
            <span>10.00am - 11.00am</span>
            <span>Claudia Fran</span>
          </div>
        </div>
        <div class="col-sm-12 col-md-9">
          <div class="appo-right-data">
              <span>Initial consultation</span>
              <h6>Lenny Bronx</h6>
              <h6>Belmore Rd</h6>
          </div>
        </div>
      </div>

      <div class="dropdown three-dot-dropdown">
         <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a>
         <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Reschedule</a>
            <a href="#" class="dropdown-item">Edit appointment</a>
            <a href="#" class="dropdown-item">Delete</a>
         </div>
      </div>

      <div class="appointment-hover">
         <ul>
            <li>
               <button class="btn paid">
                  <img src="{{asset('assets/images/paid-icon.svg')}}" width="57" alt="paid" class="img-fluid">
               </button>
            </li>
            <li>
               <button class="btn confirm-btn">
                  <img src="{{asset('assets/images/confirmed.svg')}}" width="30" alt="paid" class="img-fluid">
               </button>
            </li>
            <li>
               <button class="btn tick-btn">
                  <img src="{{asset('assets/images/tick-icon.svg')}}" width="30" alt="paid" class="img-fluid">
               </button>
            </li>
         </ul>
      </div>
    </div>

    <div class="appointment-list-block">
      <div class="row">
        <div class="col-sm-12 col-md-3">
          <div class="appo-time">
            <span>10.00am - 11.00am</span>
            <span>Claudia Fran</span>
          </div>
        </div>
        <div class="col-sm-12 col-md-9">
          <div class="appo-right-data">
              <span>Initial consultation</span>
              <h6>Lenny Bronx</h6>
              <h6>Belmore Rd</h6>
          </div>
        </div>
      </div>

      <div class="dropdown three-dot-dropdown">
         <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a>
         <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Reschedule</a>
            <a href="#" class="dropdown-item">Edit appointment</a>
            <a href="#" class="dropdown-item">Delete</a>
         </div>
      </div>

      <div class="appointment-hover">
         <ul>
            <li>
               <button class="btn paid">
                  <img src="{{asset('assets/images/paid-icon.svg')}}" width="57" alt="paid" class="img-fluid">
               </button>
            </li>
            <li>
               <button class="btn confirm-btn">
                  <img src="{{asset('assets/images/confirmed.svg')}}" width="30" alt="paid" class="img-fluid">
               </button>
            </li>
            <li>
               <button class="btn tick-btn">
                  <img src="{{asset('assets/images/tick-icon.svg')}}" width="30" alt="paid" class="img-fluid">
               </button>
            </li>
         </ul>
      </div>
    </div>

    <div class="appointment-list-block">
      <div class="row">
        <div class="col-sm-12 col-md-3">
          <div class="appo-time">
            <span>10.00am - 11.00am</span>
            <span>Claudia Fran</span>
          </div>
        </div>
        <div class="col-sm-12 col-md-9">
          <div class="appo-right-data">
              <span>Initial consultation</span>
              <h6>Lenny Bronx</h6>
              <h6>Belmore Rd</h6>
          </div>
        </div>
      </div>

      <div class="dropdown three-dot-dropdown">
         <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a>
         <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Reschedule</a>
            <a href="#" class="dropdown-item">Edit appointment</a>
            <a href="#" class="dropdown-item">Delete</a>
         </div>
      </div>

      <div class="appointment-hover">
         <ul>
            <li>
               <button class="btn paid">
                  <img src="{{asset('assets/images/paid-icon.svg')}}" width="57" alt="paid" class="img-fluid">
               </button>
            </li>
            <li>
               <button class="btn confirm-btn">
                  <img src="{{asset('assets/images/confirmed.svg')}}" width="30" alt="paid" class="img-fluid">
               </button>
            </li>
            <li>
               <button class="btn tick-btn">
                  <img src="{{asset('assets/images/tick-icon.svg')}}" width="30" alt="paid" class="img-fluid">
               </button>
            </li>
         </ul>
      </div>
    </div>

    <div class="appointment-list-block">
      <div class="row">
        <div class="col-sm-12 col-md-3">
          <div class="appo-time">
            <span>10.00am - 11.00am</span>
            <span>Claudia Fran</span>
          </div>
        </div>
        <div class="col-sm-12 col-md-9">
          <div class="appo-right-data">
              <span>Initial consultation</span>
              <h6>Lenny Bronx</h6>
              <h6>Belmore Rd</h6>
          </div>
        </div>
      </div>

      <div class="dropdown three-dot-dropdown">
         <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a>
         <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Reschedule</a>
            <a href="#" class="dropdown-item">Edit appointment</a>
            <a href="#" class="dropdown-item">Delete</a>
         </div>
      </div>

      <div class="appointment-hover">
         <ul>
            <li>
               <button class="btn paid">
                  <img src="{{asset('assets/images/paid-icon.svg')}}" width="57" alt="paid" class="img-fluid">
               </button>
            </li>
            <li>
               <button class="btn confirm-btn">
                  <img src="{{asset('assets/images/confirmed.svg')}}" width="30" alt="paid" class="img-fluid">
               </button>
            </li>
            <li>
               <button class="btn tick-btn">
                  <img src="{{asset('assets/images/tick-icon.svg')}}" width="30" alt="paid" class="img-fluid">
               </button>
            </li>
         </ul>
      </div>
    </div> --}}
  </div>
</div>
@endsection
@section('css')
   <style>
      .cursor-pointer {
         cursor: pointer;
         color: #000000;
      }
      .cursor-pointer:hover {
         color: #000000;
      }
   </style>
@endsection
@section('js')
<script type="text/javascript">
   var appointments = "";
   var practitioner = "";
   $(document).ready(function() {
      const date = new Date();  
      getDisplayDateFormat(date, true);
      getAppointmentsList();
      //$('#hide_service_provider').hide();
   })

   $(document).on('click', '.view_calendar', function(e) {

     // $(".loading").hide();
      var url = '{{ route("practitioner.appointments.index") }}';
      window.location.href = url;

   });


   function getAppointmentsList() {
      let practitioner_id = $('#practitioner_id').val().toString();
      let practitionersearch = $('#practitionersearch').val();
      practitionersearch = btoa(practitionersearch);
      if(practitionersearch == ''){
         practitionersearch = btoa('all');
      }
      let location = $('#location_id').val();
      location = btoa(location);
      if(location == ''){
         location = btoa('all');
      }
      let practitionerlocation = $('#practitionerlocation').val();
      practitionerlocation = btoa(practitionerlocation);

      let app_id = "";
      let date = new Date($('#date').text());
      $('.appointment-list-main').empty('');

      // let client_id = $("#searchidclient").val();
      // if(client_id){
      //    client_id = client_id;
      // }else{
      //    client_id = '';
      // }

      $.ajax({
         type: "POST",
         url: "{{ route('practitioner.calender.list') }}",
         data: { practitioner_id, practitionersearch, location, practitionerlocation, app_id, date },
         beforeSend: function() {
            $(".loading").addClass("d-block");
            $(".loading").css("display", 'block');
         },
         success: function (response) {
            console.log('response', response);
            if(response.getPracLists.length > 0) {
               allProvidersList(response.getPracLists);
            }

            if(response.LocationsPract.length > 0) {
               allLocations(response.LocationsPract);
               
            }

            appointments = response.appointments;
            practitioner = response.practitioner;
            console.log(appointments,practitioner);
            allAppointments(appointments, practitioner);

            setTimeout(() => {
               $(".loading").removeClass("d-block");
               $(".loading").css("display", 'none');
            }, 500)
         },
         error: function(error) {
            console.log('error', error);
            $(".loading").removeClass("d-block");
            $(".loading").css("display", 'none');
         }
      });
   }

   $(document).on('click', '.deleteAppointment', function(e) {

      var deleteAppt = "{{ route('practitioner.appointments.deleteappointment') }}";
      let appointmentId = $(this).attr('data-id'); 
      let blockoutId = $(this).attr('data-blockout-id');
   
      if(blockoutId !== 'null' ){
         var title = 'Delete blockout time?';
         var delete_title = 'Block out deleted';
         var text = '';
      }else{
         var title = 'Delete appointment?';
         var delete_title = 'Appointment deleted';
         var text = 'Any notes or invoices associated with this appointment will also be deleted. Would you like to proceed?';
        
      }

      Swal.fire({
          title: title,
          text: text,
          icon: 'warning',
          showCancelButton: true,
          confirmButtonText: 'Yes',
          cancelButtonText: 'No'
      }).then((result) => {
         if (result.value) {
           $.ajax({
               url: deleteAppt,
               data: {
                   id: appointmentId
               },
               method: 'POST',
               success: function(data) {
                  Swal.fire({
                     icon: 'success',
                     title: delete_title,
                     showClass: {
                     popup: 'animate__animated animate__fadeInDown'
                     },
                     hideClass: {
                     popup: 'animate__animated animate__fadeOutUp'
                     }
                  });
                  getAppointmentsList();
                  // setTimeout(() => {
                  //     window.reload();
                  // }, 1000);
               }
           });
         }
      });
   });

   $(document).on('click', '.service_provider_list', function(e)  {
      $('#practitionersearch').val($(this).attr('data-index'));
      $('#allProviders').text($(this).attr('data-member'));
      getAppointmentsList();
   })

   $(document).on('click', '.location_list', function(e)  {
      $('#location_id').val($(this).attr('data-index'));
      $('#allLocations').text($(this).attr('data-member'));
      getAppointmentsList();
   })

   $(document).on('click', '#today-btn', function(e) {
      const date = new Date();
      getDisplayDateFormat(date);
      getAppointmentsList();
   });

   function getFlagsButton(imageName, buttonName, imageWidth, imageAlt) {
      let button = '<li class="">';
      button += `<button class="btn ${buttonName}">`;
      button += `<img src='{{asset('assets/images/${imageName}.svg')}}' width='${imageWidth}' alt='${imageAlt}' class='img-fluid'>`;
      button += '</button>';
      button += '</li>';

      return button;
   }

   function getUrl(appId, url, paramterName, flag) {
      let id = appId.toString();
      var encodedId = btoa(id);
      if(flag) {
         encodedId = appId;
      }
      url = url.replace(paramterName, encodedId);
      return url;
   }

   function allAppointments(appointments, practitioner) {
      let date = new Date($('#date').text());
      //let utcTime = date ? date : new Date();
      $('.appointment-list-main').html('');
      var html = "";

      let count = 0;
      if(appointments.length > 0) {
         appointments.forEach(element => {

            const targetTimeZone = practitioner.timezone ? practitioner.timezone : 'Australia/Melbourne';

            // Define the start date in the target timezone
            const startTime = new Date(element.start);

            const utcTime = new Date(element.utctime);


            const localDateInTargetTimeZone = getLocalDateInTimeZone(utcTime, targetTimeZone);
            const startTimeDateInTargetTimeZone = getLocalDateInTimeZone(startTime, targetTimeZone);

            // Compare the two date strings
            if (localDateInTargetTimeZone === startTimeDateInTargetTimeZone) {
              count = 1;
              if(element.blockout_time_id) {
                  html += '<div class="appointment-list-block blockout-added">';
              } else {
                 if(element.status === "cancelled") {
                     html += `<div class="appointment-list-block appointment-deleted-block"> <div style="background:${element.appcolor}" class="appointment-color"></div>`;
                 } else {
                     html += `<div class="appointment-list-block"> <div style="background:${element.appcolor}" class="appointment-color"></div>`;
                 }
              }
              html += '<div class="row"><div class="col-sm-12 col-md-3">';

              html += '<div class="appo-time">';
              html += '<span>'+ element.calanderDisplayDate +'</span>';

              if(!element.blockout_time_id) {
               //   var clientId = btoa(element?.client_id?.toString());
                 // var clientCardURL = '{{ url("practitioner/clientcard") }}?client_id={{ base64_encode('+clientId+') }}';
                 html += `<span>${element.client_name}</span>`;
              }

              html += '</div></div>';
              html += '<div class="col-sm-12 col-md-9">';
              html += '<div class="appo-right-data">';

              if(element.blockout_time_id) {
                 html += '<span>Time Blocked Out</span>';
              } else {
                 var url = '{{ route("practitioner.appointments.details", ":appointment")}}';
                 url = getUrl(element.appointment_id, url, ':appointment', true);
                 html += `<span><a class="cursor-pointer" href="${url}">${element.apptitle}</a></span>`;
              }

              // appointments += '<h6>' + element.p_first_name +' '+ element.p_last_name +'</h6>';
              html += '<h6>'+ element.practitioner_name + '</h6>';
              html += '<h6>'+ element.locationname +'</h6>';
              html += '</div></div></div>';
              html += '<div class="dropdown three-dot-dropdown">';
              html += '<a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span><span></span><span></span></a>';
              html += '<div class="dropdown-menu">';

              if(!element.blockout_time_id) {
                 var url1 = '{{ route("practitioner.recheduleappointment.newpage", ":appointment") }}';
                 var url2 = '{{ route("practitioner.editappointment.newpage", ":appointment_id") }}';
                 url1 = getUrl(element.appointment_id, url1, ':appointment');
                 url2 = getUrl(element.appointment_id, url2, ':appointment_id');
                 html += `<a href="${url1}" class="dropdown-item">Reschedule</a>`;
                 html += `<a href="${url2}" class="dropdown-item">Edit appointment</a>`;
              } else {
                 html += '<a href="#" class="dropdown-item">Edit</a>';
              }

              html += `<a data-id=${element.appointment_id} data-blockout-id=${element.blockout_time_id} class="dropdown-item deleteAppointment cursor-pointer" >Delete</a>`;
              html += '</div></div>';

              if(!element.blockout_time_id) {
                 html += '<div class="appointment-hover">';
                 html += '<ul>';
                 if(element.pay_status === "paid") {
                  html += getFlagsButton('paid-icon', 'paid', '57', 'paid');
                 }
                 if(element.status === "confirmed") {
                  html += getFlagsButton('confirmed', 'confirm-btn', '30', 'confirmed');
                 }
                 if(element.status === "cancelled") {
                  html += getFlagsButton('cancelled', 'cancel-btn', '30', 'cancelled');
                 }
                 if(element.clientstatus === "arrived") {
                  html += getFlagsButton('tick-icon', 'tick-btn', '30', 'arrived');
                 }
                 html += '</ul>';
                 html += '</div>';
              }

              html += '</div>';

              $('.appointment-list-main').html(html);
            }
         });

         if(count === 0) {
            $('.appointment-list-main').empty('');
            html = getZeroAppointmentsHtml();
            $('.appointment-list-main').html(html);
         }
      } else {
         $('.appointment-list-main').empty('');
         html = getZeroAppointmentsHtml();
         $('.appointment-list-main').html(html);
      }
   }

   function allProvidersList(providers) {
      
      var html = "";
      if(providers.length > 1) {
        // $('#hide_service_provider').removeClass('d-none');
         html += '<a data-member="'+'All providers'+'" class="dropdown-item service_provider_list" data-index="'+'all'+'" href="#">'+ 'All providers'   +'</a>';
      }
      
      providers.forEach((practitioner) => {
         if(practitioner.role === 'service_provider') {
            html += '<a data-member="'+ practitioner.first_name +' '+ practitioner.last_name +'" class="dropdown-item service_provider_list" data-index="'+practitioner.id+'" href="#">'+ practitioner.first_name +' '+ practitioner.last_name +'</a>'
         }
      })
      $('#providersDropdown').html(html);
   }

   function allLocations(locations) {
      var html = '';
      if(locations.length > 1) {
         html += '<a data-member="'+'All locations'+'" class="dropdown-item location_list" data-index="'+'all'+'" href="#">'+ 'All locations'   +'</a>';
      }
      locations.forEach(loc => {
         html += '<a data-member="'+loc.address+'" class="dropdown-item location_list" data-index="'+loc.id+'" href="#">'+ loc.address   +'</a>';
      })

      $('#locationsDropdown').html(html);
   }

   function getLocalDateInTimeZone(date, timeZone) {
      const options = {
        timeZone,
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
      };
      return date.toLocaleDateString('en-US', options);
   }

   // Initialize datepicker
    $("#cal-btn").datepicker({
       format: "dd/mm/yyyy",
       weekStart: 1,
       todayHighlight: true,
       autoclose: true,
       clearBtn: false,
    }).on('changeDate', function(selected) {
       const date = new Date(selected.date.valueOf());
       const options = { year: 'numeric', month: 'long', day: 'numeric' };
       const formattedDate = date.toLocaleDateString(undefined, options);
       $('#date').text(formattedDate);
       getAppointmentsList();
    });

    // Show datepicker on button click
    document.getElementById("cal-btn").addEventListener("click", function (e) {
       $("#cal-btn").datepicker("show");
    });

    //    document
    //    .getElementById("cal-btn")
    //    .addEventListener("click", function (e) {
    //         $("#cal-btn")
    //            .datepicker({
    //                format: "dd/mm/yyyy",
    //                weekStart: 1,
    //                todayHighlight: true,
    //                autoclose: true,
    //                clearBtn: false,
    //             }).on('changeDate', function(selected) {
    //                const date = new Date(selected.date.valueOf());
    //                const options = { year: 'numeric', month: 'long', day: 'numeric' };
    //                const formattedDate = date.toLocaleDateString(undefined, options);
    //                $('#date').text(formattedDate);
    //                // allAppointments(appointments, practitioner);
    //         });
    //        $("#cal-btn").datepicker("show");
    //    });

   $(document).on('click', '#prevBtn', function(e) {
       var currentDate = $('#date').text() ? new Date($('#date').text()) : new Date();
       var previousDate = currentDate;
       previousDate.setDate(currentDate.getDate() - 1);
       var preDate = new Date(previousDate);
       getDisplayDateFormat(preDate);
       getAppointmentsList();
   })

   $(document).on('click', '#nextBtn', function(e) {
      var currentDate = $('#date').text() ? new Date($('#date').text()) : new Date();
      var nextDate = currentDate;
      nextDate.setDate(currentDate.getDate() + 1);
      var nexDate = new Date(nextDate);
      getDisplayDateFormat(nexDate);
      getAppointmentsList();
   });

   function getZeroAppointmentsHtml() {
      let html = "<div class='row'>";
      html += "<h4>There are no appointments.</h4>";
      html += "</div>";
      return html
   }

   function getDisplayDateFormat(date, flag) {
      const options = { year: 'numeric', month: 'long', day: 'numeric' };
      const formattedDate = date.toLocaleDateString(undefined, options);

      $('#date').text(formattedDate);
      if(!flag) {
         allAppointments(appointments, practitioner);
      }
   }


   // var inputValue = "";
   // $("#client__id").on("keypress", function(event) {
   //    var searchClient = "{{ route('practitioner.search.client') }}";
   //    if(event.target.value) {
   //       inputValue += event.target.value;
   //    } else {
   //       var key = event.which;
   //       if ((key >= 65 && key <= 90) || (key >= 97 && key <= 122) || key === 8) {
   //         inputValue += event.key;
   //       }
   //    }

   //    $.ajax({
   //       url: searchClient,
   //       data: { query: inputValue },
   //       method: 'GET',
   //       success: function(data) {
   //          inputValue = "";
   //       }
   //    });
   // });

   var path = "{{ route('practitioner.search.client') }}";

   $("body").on("click", "#dropdownMenuButton6", function () { 
      $('.clientsearchbox').remove();

      $(".fc-searchicon-button12").after(
        '<div class="dropdownserch-area clientsearchbox"><input type="text" class="form-control typeahead" placeholder="Enter name" name="client__id" id="client__id" value="" autocomplete="off"><input id="searchidclient_name" name="search_id_client_name" value="" type="hidden"><input id="searchidclient" name="search_id_client" value="" type="hidden"><span class="tt-dataset text-danger"></span> <button id="search_id_client" class="cursor-pointer save-btn save-btn-bg w-100">Search</button></div>'
    );
    $(".fc-searchicon-button12").wrap("<div class='dropdown'></div>");
   $(".fc-searchicon-button12").addClass("dropdown-toggle");
   $(".fc-searchicon-button12").attr("id", "dropdownMenuButton6");
   $(".fc-searchicon-button12").attr("data-toggle", "popover");

    
	var querySet1 = 0;
	$("input[name^='client__id']").typeahead({
        source: function (query, process) {
            if(querySet1 == 0){
                querySet1 = 1;
                return $.get(path, { query: query }, function (data) {
                    querySet1 = 0;
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].id) {
                            $("#searchidclient").val(data[i].id);
                        }
                    }

                    if (data.length > 0) {
                        $(".tt-dataset").text("");
                        return process(data);
                    } else {
                        $(".tt-dataset").text("No Results Found");
                        // setTimeout(function() {
                        // }, 3000);
                        return process(data);
                    }
                });
            }
        },
        updater: function (selection) {
            $("#searchidclient").val(selection.id);
            $("#searchidclient_name").val(selection.name);
            return selection.name;
        },
    });

	$("input[name^='client__id']").on("keyup", function (e) {
        $(this)
            .parent()
            .find(".dropdown-menu")
            .find(".active .dropdown-item")
            .css({ backgroundColor: "#68afb5", color: "white" });
        if (e.keyCode === 40 || e.keyCode === 38) {
            $(this)
                .parent()
                .find(".dropdown-menu")
                .find(".dropdown-item")
                .css({ backgroundColor: "#fff", color: "#24303f" });
            if ($(this).parent().find(".dropdown-menu")) {
                $(this)
                    .parent()
                    .find(".dropdown-menu")
                    .find(".active .dropdown-item")
                    .css({ backgroundColor: "#68afb5", color: "white" });
            }
        }
    });

   });

   $(document).on("keyup", "#client__id", function (event) {
       if (event.keyCode === 13) {
           event.preventDefault();
           $("#search_id_client").click();
       }
   });

   $(document).mouseup(function (e) {
		var container = $(".clientsearchbox");
		// if the target of the click isn't the container nor a descendant of the container
		if (!container.is(e.target) && container.has(e.target).length === 0) {
			container.hide();
		}
	});

   var searchidclient =  "{{ route('practitioner.appointments.searchidclient') }}";
   var allIMG = '{{asset("assets/images/")}}';
   var segmenturl = '';

   var href = window.location.href.split("?");

   if( href[1] ) {
      var hrefwithloc = href[1].split("&");

      // var href1 = href[1].split("=");
      var href1 = hrefwithloc[0].split("=");

      if( href1[0] == 'practitionersearch' ) {
         segmenturl = href1[1];
      }
   }
//alert(segmenturl)

   
   
   $(document).on("click", "#search_id_client", function () {

    
      let practitioner_id = $('#practitioner_id').val().toString();
     // getAppointmentsList();
      let url = '';
      if (segmenturl) {
          url = atob(unescape(decodeURIComponent(segmenturl)));
      }
	  if($("#searchidclient").val() == ''){
		Swal.fire({
			icon: "error",
			title: "No upcoming appointments found",
			showClass: {
				popup: "animate__animated animate__fadeInDown",
			},
			hideClass: {
				popup: "animate__animated animate__fadeOutUp",
			},
		});
		return false;

	  }
      $.ajax({

          url: "{{ route('practitioner.calender.list') }}",
         //data: { practitioner_id, practitionersearch, location, practitionerlocation, app_id, date, client_id },
         // url: searchidclient,
          data: {
              client_id: $("#searchidclient").val(),
              practitioner_id: practitioner_id,
             // url: url,
          },
          type: "POST",
      }).done(function (response) {
          if (response.status == "success") {
              $(".clientsearchbox").css("display", "none");
              $(".clientapptname").text($("#searchidclient_name").val());
              $(".clientapptname").attr(
                  "data-id",
                  $("#searchidclient").val()
              );
              var html = "";
               var ihtml = "";
                if (response.data.length == 0) {
                    Swal.fire({
                        icon: "error",
                        title: "No upcoming appointments found",
                        showClass: {
                            popup: "animate__animated animate__fadeInDown",
                        },
                        hideClass: {
                            popup: "animate__animated animate__fadeOutUp",
                        },
                    });
                }
                $.each(response.data, function (key, value) {
                    var dateAppt = moment(value.date).format("YYYY-MM-DD");
                    var datetime = dateAppt + "  " + value.time;
                    var date5 = moment(datetime, "YYYY-MM-DD hh:mm:ss").format(
                        "ddd Do MMM YYYY h:mm a"
                    );
                    
                    var name = '</td><td class="fwaitlist widthtable2">' +
                    value.practitioner.first_name+" "+value.practitioner.last_name+'</td>';

                   // if (response.multiple == true) {
                        // console.log(value.locations.name);
                        
                      //  $.each(value.service_provider_name, function (k, val) {
                            // var name = val?.name
                            //     ? '</td><td class="fwaitlist widthtable2"><div class="dropdown-item"><div class="media"><div class="media-body"><h4 class="mt-0 font-400">' +
                            //       val.name
                            //     : "";

                               
                            //alert(val.profile_picture);

                            html +=
                                '<div class="test-result-box td-brdr"><div class="whitecard waitlist-abox"><div class="table-responsive"><table class="table"><tbody><tr><td class="widthtable">' +
                                date5 +
                                '</td><td class="widthtable">' +
                                value.appointment_type.appointment_type +
                                name + '<td class="widthtable">'+value.locations.address+
                                '</td><td><ul class="inline-img mt-15"><li><a class="toggleModelPopup1" href="' +
                                value.recheduleappointmentUrl +
                                '" title="Reschedule Appointment"><img src=' +
                                allIMG +
                                '/rescheduled.svg alt="" class="maxw-30"></a></li><li class="d-none"><a class="toggleModelPopup1 status_appointment_cancel" data-appt_id="' +
                                value.id +
                                '"  data-client_id="' +
                                value.client_id +
                                '" href="' +
                                value.appointment_url_calander +
                                '" title="Cancelled Appointment"><img src=' +
                                allIMG +
                                '/cancelled-img.svg alt="" class="maxw-30"></a></li></ul></td></tr></tbody></table></div></div></div>';
                               // console.log(html);
                            $(".searchApptClient1").html(html);
                            $("#multilocation-modal").modal("show");
                        //});
                   // }
                    // if (response.multiple == false) {
                    //     ihtml +=
                    //         '<div class="test-result-box td-brdr"><div class="whitecard waitlist-abox"><div class="table-responsive"><table class="table"><tbody><tr><td class="widthtable">' +
                    //         date5 +
                    //         '</td></p><p class="mb-0"><td class="widthtable">' +
                    //         value.appointment_type.appointment_type +name + '<td class="widthtable">'+value.locations.address+
                    //             '</td></p><td><div class="media-body"><ul class="inline-img mt-15"><li><a class="toggleModelPopup1" href="' +
                    //         value.recheduleappointmentUrl +
                    //         '" title="Reschedule Appointment" ><img src=' +
                    //         allIMG +
                    //         '/rescheduled.svg alt="" class="cursor-pointer"></a></li><li><a class="toggleModelPopup1 status_appointment_cancel" data-appt_id="' +
                    //         value.id +
                    //         '"  data-client_id="' +
                    //         value.client_id +
                    //         '" href="' +
                    //         value.appointment_url_calander +
                    //         '"  title="Cancelled Appointment"><img src=' +
                    //         allIMG +
                    //         '/cancelled-img.svg alt="" class="cursor-pointer"></a></li></ul></td></tr></tbody></table></div></div></div>';
                    //     $(".searchApptClient").html(ihtml);
                    //     $("#sendsmsmessage").modal("show");
                    // }
                });
          }
      });
   });
</script>
@endsection