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

<style type="text/css">
  .pdfname-contain {padding-bottom: 10px !important;}
  #addinvoice {position: relative;width: auto;left: 0;top: 0;}
  .producthover-box .productbox-cartarea {background: #fff;border: 1px solid #cccccc;padding: 15px;border-radius: 6px;box-shadow: 0px 10px 10px rgba(0,0,0,0.2);}
  .pt-0, .py-0 {padding-top: 0!important;}
  @media screen and (min-width: 0px) and (max-width: 991px) {
    .location_mobile_div{display:block;}
  }
  @media screen and (min-width: 992px) and (max-width: 3000px) {
    .location_mobile_div {display:none;}
  }
  .location_mobile_div .select2-container--default .select2-selection--single .select2-selection__rendered {background-color: #F7F7F7 !important;color: #45747a !important;text-align: center !important;}
  .location_mobile_div .select2-container--default .select2-selection--single {border: 1px solid #45747a !important;border-radius: 4px !important;background-color: #F7F7F7 !important;overflow: hidden;}
  .location_mobile_div .select2-container--default .select2-results>.select2-results__options {background-color: #F7F7F7;}
  .location_mobile_div .select2-container--open .select2-dropdown--below {background-color: #F7F7F7;}
  #teamCalendar .fc-nonbusiness {background: #efecec !important;}

  .fc-right .fc-button-group .dropdown:nth-of-type(1) {
    margin-left: 1rem !important;
    margin-right: 0rem !important;
  }

</style>

@section('content')
<link rel="stylesheet" href="{{asset('assets/patient/css/jcarousel.responsive.css')}}">
<input type="hidden" name="appointment_inv_id" class="appointment_inv_id" value="">
<input type="hidden" id="current_selected_location_id" value="{{$locationId}}" >
<input type="hidden" name="client_inv_id" class="client_inv_id" value="">

<div class="page-content dashboard-wrapper mdashboard-wrapper dayview-m">
  <div class="row align-items-center dayview-space hide">
    <div class="col-lg-5 col-md-4 col-sm-4">
      <h1 class="page-title eagle-font font-400 d-inline"><span class="arca-font">My</span> Appointments</h1>
      @if( isset( $show_gateway_btn ) && $show_gateway_btn == 1 && $user->parent_id == '')
        <a href="{{ route('practitioner.paymentpage') }}" class="btn-fill ml-xl-3 nowrap d-inline-block mt-2">Activate payment gateway</a>
      @endif
    </div>

    @include('front.inner-layout.header')
  </div>
  <div class="brdr-bttm"></div>

  <div id="popover-content" class="calenderbox-click" style="display: none;">
    <div class="user-appointment">
      <div class="media align-items-center">
        <div class="img-width mr-2">
          <img src="{{asset('assets/images/d-user-icon.png')}}" class="hover_image_path" alt="..." style="width: 44px; height: 44px;">
        </div>
        <div class="media-body">
          <h4 class="font-bold font-15 text-blue hover_client_name"></h4>
        </div>
      </div>

      <div class="card user-service align-items-center hover_services"></div>

      <div class="list-menu hover_sticky_none_link_div">
        <a href="#" class="hover_sticky_none_link">
          <div class="media align-items-center">
            <div class="">
              <img src="{{asset('assets/images/edit-icon-grey.svg')}}" alt="" class="img-fluid">
            </div>
            <div class="media-body">
              <p class=" font-15 text-blue m-0" >Sticky note on file</p>
            </div>
          </div>
        </a>
        <a href="#"class="hover_arrived_div d-none">
          <div class="media align-items-center">
            <div class="">
              <img src="{{asset('assets/images/location-icon-grey.svg')}}" alt="" class="img-fluid">
            </div>
            <div class="media-body">
              <p class=" font-15 text-blue m-0 hover_arrived"></p>
            </div>
          </div>
        </a>
        <a href="#" class="hover_confirmed_name_div d-none">
          <div class="media align-items-center">
            <div class="">
              <img src="{{asset('assets/images/Confirmed-icon-grey.svg')}}" alt="" class="img-fluid">
            </div>
            <div class="media-body">
              <p class=" font-15 text-blue m-0 hover_confirmed_name"></p>
              <span class="hover_confirmed_date_time"></span>
            </div>
          </div>
        </a>
        <a href="#">
          <div class="media align-items-center">
            <div class="">
              <img src="{{asset('assets/images/calendar-icon-grey.svg')}}" alt="" class="img-fluid">
            </div>
            <div class="media-body">
              <p class=" font-15 text-blue m-0 hover_booked_name"></p>
              <span class="hover_booked_date_time"></span>
            </div>
          </div>
        </a>
        <a href="#" class="hover_cancelled_name_div d-none">
          <div class="media align-items-center">
            <div class="">
              <img src="{{asset('assets/images/Hover_cancelled_icon_grey.svg')}}" alt="" class="img-fluid">
            </div>
            <div class="media-body">
              <p class=" font-15 text-blue m-0 hover_cancelled_name"></p>
              <span class="hover_cancelled_date_time"></span>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>

  <ul class="appointment-mobile-area ">
    <li class="addiconm">
      <button type="button" id="fc-datepickericon-button-m" class="fc-datepickericon-button-m fc-button fc-button-primary"></button>
      <h3>Date</h3>
    </li>
    <li class="addiconm">
      <div class="dropdown calender-drpdown">
        <button type="button" class="fc-myCustomButton3-button34 fc-button fc-button-primary dropdown-toggle" id="dropdownMenuButton56" data-toggle="dropdown">
          <span class="d-block">
            <a href="#"><img src="{{asset('assets/images/add-icon.svg')}}" alt="" class="img-fluid"></a>
          </span>
        </button>
        <h3>Add</h3>
      </div>
    </li>
    <li class="viewdrop">
      <div class="dropdown calender-drpdown">
        <button type="button" class="fc-myCustomButton1-button1 fc-button fc-button-primary dropdown-toggle" id="dropdownMenuButton1" data-toggle="dropdown">
          <span class="d-block"><a href="#"><img src="{{asset('assets/images/view-icon.svg')}}" alt="" class="img-fluid"></a></span>
        </button>
        <h3>View</h3>
      </div>
    </li>
    <li class="viewdrop">
      <div class="dropdown calender-drpdown">
        <button type="button" class="fc-myCustomButton3-button3 fc-button  fc-button-primary dropdown-toggle" id="dropdownMenuButton55" data-toggle="dropdown">
          <span class="d-block"><a href="#"><img src="{{asset('assets/images/waitlist-icon.svg')}}" alt="" class="img-fluid"></a></span>
        </button>
        <h3>Waitlist</h3>
      </div>
    </li>
  </ul>

  <div class="location_mobile_div">
    <div class="row">
      @if(count($practitioner->serviceProvider) && count($practitioner->serviceProvider)!=1)
          <div class="col-6">
            <div class="form-group brdrfull marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child select-arrow-none">
                <select class="form-control  js-example-basic-single font-13 text-center prac_mobile_view" style="width:100%" id="prac_mobile_view"  name="deposit_amount_type" >
                  
                  <option class="dropdown-item" data-type="all">
                    <a class="dropdown-item removeselecet" href='{{ route("practitioner.team.appointments.index") }}'>View all practitioners</a>
                  </option>    
                  
                  {{-- @if($practitioner->role != 'admin' )
                      <option class="dropdown-item"
                      @if(Request::get('practitionersearch'))
                        @if(base64_decode(Request::get('practitionersearch')) == $practitioner->id)
                        {{ "selected" }}
                        @endif
                      @endif
                      data-type="self"
                      value="{{$practitioner->id}}"
                      >{{$practitioner->first_name.' '.$practitioner->last_name}}</option>
                  @endif --}}
                  
                  @foreach($practitioner->serviceProvider as $list)
 
                  @if( isset( $list->calendar_removed ) && $list->calendar_removed == 1 )
                  @php continue; @endphp
                  @endif

                  @if( isset( $list->role ) && $list->role == 'admin' && $list->parent_id != '' )
                      @php continue; @endphp
                  @endif

                  {{-- @if( isset( $list->invitation_accepted ) && $list->invitation_accepted == 0 && $list->parent_id != '' )
                      @php continue; @endphp
                  @endif --}}

                  @if(isset(explode('?',URL::full())[1]) && explode('=',explode('?',URL::full())[1])[0] == 'practitionersearch' && isset( $list->id ) && $list->id == $practitioner->id )
                      @php continue; @endphp
                  @endif

                  @if( isset( $list->is_deleted ) && $list->is_deleted =='1')
                      @php continue; @endphp
                  @endif
    
                  @if( isset( $list->calender_status ) && $list->calender_status != 'active' )
                      @php continue; @endphp
                  @endif     

                  @if($list->role !='admin')
                  <option class="dropdown-item"
                      @if(Request::get('practitionersearch'))
                        @if(base64_decode(Request::get('practitionersearch')) ==$list->id)
                        {{ "selected" }}
                        @endif
                      @endif

                      @if(Auth::guard('practitioner')->user()->id ==$list->id)
                      data-type="self"
                      @else
                      data-type=""
                      @endif

                      value="{{$list->id}}"
                      >{{$list->full_name ?? ""}}</option>
                      @endif
                  @endforeach              
                </select>
            </div>
          </div>
      @endif

      <div class="col-6">
          @if(count($LocationsPract) && count($LocationsPract)!=1)
              <div class="form-group brdrfull marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child select-arrow-none">
                <select class="form-control  js-example-basic-single font-13 text-center location_mobile_view" style="width:100%"  name="deposit_amount_type" id="">
                  @foreach($LocationsPract as $location)
                    <option
                    @if(Request::get('location'))
                      @if(base64_decode(Request::get('location')) ==$location->id){{ "selected" }}@endif
                    @endif
                    value="{{$location->id}}">{{getLocationAddress($location->address) ?? '-'}}</option>
                  @endforeach
                </select>
              </div>         
          @endif      
      </div>
    </div>
  </div>

  <!-- <div class="productbox-scroll customprduct-scroll calender-slider">
      <div class="caresoul-slider-area">
        <div class="jcarousel-wrapper">
            <div class="jcarousel">
              <ul>
                  <li class="user-head"> <a href="#">Anil Mustafa (Demo1)</a></li>
                  <li class="user-head"> <a href="#">Dg ert</a></li>
                  <li class="user-head"> <a href="#">New member</a></li>
                  <li class="user-head"> <a href="#">New Guy</a></li>
                  <li class="user-head"> <a href="#">New girl s</a></li>
                  <li class="user-head"> <a href="#">Fgfg hello</a></li>
                  <li class="user-head"> <a href="#">Practitioner Test2</a></li>
                  <li class="user-head"> <a href="#">Jkjk jljl</a></li>
                  <li class="user-head"> <a href="#">Thursday 22Sep</a></li>
                  <li class="user-head"> <a href="#">Service admn</a></li>
                  <li class="user-head"> <a href="#">Service Provider</a></li>
                  <li class="user-head"> <a href="#">Ronak Amin</a></li>
                  <li class="user-head"> <a href="#">Jay patel</a></li>
                  <li class="user-head"> <a href="#">Vim kim</a></li>
                  <li class="user-head"> <a href="#">Akshay khanna</a></li>
                  <li class="user-head"> <a href="#">Test000 test000</a></li>
                  <li class="user-head"> <a href="#">Mrunmayi Serviceprovider</a></li>
                  <li class="user-head"> <a href="#">Shreya service provider</a></li>
                  <li class="user-head"> <a href="#">Dhaval patel</a></li>
                  <li class="user-head"> <a href="#">Ravindra Serviceprovider</a></li>
                  <li class="user-head"> <a href="#">Happy guy</a></li>
                  <li class="user-head"> <a href="#">Tirth patel</a></li>
                  <li class="user-head"> <a href="#">Checking Hours</a></li>
                  <li class="user-head"> <a href="#">Vivek patel</a></li>
                  <li class="user-head"> <a href="#">Dhanji patel</a></li>
                  <li class="user-head"> <a href="#">Daya gada</a></li>
                  <li class="user-head"> <a href="#">Taruna Fmauser</a></li>
                  <li class="user-head"> <a href="#">Poonam Serviceprovider</a></li>
                  <li class="user-head"> <a href="#">Hi diho</a></li>
                  <li class="user-head"> <a href="#">20fev sp</a></li>
                  <li class="user-head"> <a href="#">Kismis Serviceprovider</a></li>
                  <li class="user-head"> <a href="#">Just checkingsp</a></li>
                  <li class="user-head"> <a href="#">Shyambhavi Servicepovider</a></li>
                  <li class="user-head"> <a href="#">Palash Serviceprovider</a></li>
                  <li class="user-head"> <a href="#">Checkforlastrow serviceprovider</a></li>
                  <li class="user-head"> <a href="#">Minesh patel</a></li>
                  <li class="user-head"> <a href="#">SBahadur M</a></li>
                  <li class="user-head"> <a href="#">Tumtum sp</a></li>
                  <li class="user-head"> <a href="#">Pumpum sp</a></li>
                  <li class="user-head"> <a href="#">Dumdum sp</a></li>
                  <li class="user-head"> <a href="#">Kumkum sp</a></li>
                  <li class="user-head"> <a href="#">Test1 test2</a></li>
                  <li class="user-head"> <a href="#">Shalvi sp</a></li>
                  <li class="user-head"> <a href="#">Bill Clark</a></li>
                  <li class="user-head"> <a href="#">Jsutcheck unassigned</a></li>
                  <li class="user-head"> <a href="#">06april sp</a></li>
                  <li class="user-head"> <a href="#">07april sp</a></li>
                  <li class="user-head"> <a href="#">07april downgradeplansp</a></li>
                  <li class="user-head"> <a href="#">Replyto sp</a></li>
              </ul>
            </div>
            <a href="#" class="jcarousel-control-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
            <a href="#" class="jcarousel-control-next"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
        </div>
      </div>
  </div> -->
  
  <div id='teamCalendar' class=""></div>
  <input type="hidden" id="eventsDataForSync" value="{{json_encode($appointments)}}">
</div>

<!-- Taking m s --->
<div class="client-follow-popup customscroll openclickmodal quickaddModal applylgModal">
  <div class="modal fade" id="applylgModal" 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">
            <div class="client-top-area">
              <ul class="filtertop-li 20img">
                <li><a data-dismiss="modal" data-toggle="modal" data-target="#dateserviceModal" class="txt-filter greentext cursor-pointer">Filter</a></li>
                <li><a href="#"><img src="{{asset('assets/images/message-icon-green.svg')}}" alt="" class="img-fluid"></a></li>
                <li><a href="#" id="downloadtestresult"><img src="{{asset('assets/images/download-icon-green.svg')}}" alt="" class="img-fluid"></a></li>
                <li><a href="#" class="client-print" data-content="print-test-result-table" data-header="Date Report"><img src="{{asset('assets/images/print-icon-green.svg')}}" alt="" ></a></li>
              </ul>
            </div>

            <h5 class="modal-title text-center eagle-font" id="exampleModalLabel1">Thurs 11th Feb - Friday 12th Feb</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" id="print-test-result-table">
            <div class="mCustomScrollbar1">
              <div class="boxshadowarea">
                <div class="table-responsive">
                  <table class="table dataappend">
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Taking m E --->

<div class="todo-list-modal clientabpopup sentmodal">
  <div class="modal fade" id="invoiceViewModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content mdashboard-client-followuparea">
        <div class="modal-header">
          <button type="button" class="close bttn-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 text-center">
          <h3 class="font-bold  text-blue mb-20">Invoice Paid</h3>
          <input readonly="" class="form-control text-center" id="invoice_paid_details">
          <div class="row text-center mt-30">
            <div class="col-sm-6">
              <a id="view_invoice_btn" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 text-white my-3">View invoice</a>
            </div>
            <div class="col-sm-6">
              <a id="new_invoice_btn" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 text-white my-3" >New invoice</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="client-follow-popup customscroll waitlist-modal showpop dateserviceModal">
  <div class="modal fade" id="dateserviceModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="popup-marg">
          <div class="modal-body p-0">
            <div class="borderbtttm">
              <form class="storePractitoner_filter" method="POST" action="{{route('practitioner.reports.getreport_filterdata')}}">
                <div class="cdropdown-menu">
                  <div class="">
                    <h5>Date</h5>
                    <ul class="date-textli" id="open_from_date">
                      <li>From</li>
                      <li>
                        <div class="form-group" >
                          <input class="form-control" id="date" name="start_date" placeholder="DD-MM-YYYY" type="text"/>
                        </div>
                      </li>
                      <li>To</li>
                      <li>
                        <div class="form-group">
                          <input type="text" name="end_date" id="end_date" class="form-control" placeholder="DD-MM-YYYY">
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>

                <div class="borderbtttm">
                  <h3 class="ml-0">Service Provider</h3>
                  <div class="form-group">
                    <select class="form-control" name="practitioner_id">
                      <option value="">Select</option>
                                          </select>
                  </div>
                </div>

                <div class="borderbtttm">
                  <h3 class="ml-0">Location</h3>
                  <div class="form-group">
                    <select class="form-control" name="location">
                      <option value="">Select</option>
                                          </select>
                  </div>
                </div>

                <div class="borderbtttm">
                  <h3 class="ml-0">Payment Method</h3>
                  <div class="customdroppdown gray-brdr line-dropdown">
                    <div class="form-group marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                      <select class="form-control" name="paytype">
                        <option value="">Select</option>
                                              </select>
                    </div>
                  </div>
                </div>

                <div class="borderbtttm">
                  <h3 class="ml-0">Item</h3>
                  <div class="customdroppdown gray-brdr line-dropdown">
                    <div class="form-group marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                      <select class="form-control" name="Item_type">
                        <option value="all">All</option>
                        <option value="products">Products</option>
                        <option value="services">Services</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="modal-footer mb-0">
                  <button type="submit" class="yellow-btn mt-3 save-btn save-btn-bg w-100 font-15">Apply</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Date Service Modal E -->

<div id="waitlisttop">

  {{--@if($user->serviceProvider)--}}
  @if($practitioner->serviceProvider)
     <input type="hidden" id="pracId" name="pracId" value="{{$practitioner->id}}" />
     <div class="dropdown-menu" aria-labelledby="waitlistbtntop">

        {{--@foreach($user->serviceProvider as $provider)--}}
        @foreach($practitioner->serviceProvider as $provider)
            @if( isset( $provider->calendar_removed ) && $provider->calendar_removed == 1 )
                @php continue; @endphp
            @endif

            @if( isset( $provider->role ) && $provider->role == 'admin' && $provider->parent_id != '' )
                @php continue; @endphp
            @endif

            {{-- @if( isset( $provider->invitation_accepted ) && $provider->invitation_accepted == 0 && $provider->parent_id != '' )
                @php continue; @endphp
            @endif --}}

            @if(isset(explode('?',URL::full())[1]) && explode('=',explode('?',URL::full())[1])[0] == 'practitionersearch' && isset( $provider->id ) && $provider->id == $practitioner->id )
                @php continue; @endphp
            @endif

            @if( isset( $provider->is_deleted ) && $provider->is_deleted =='1')
                @php continue; @endphp
            @endif

            @if( isset( $provider->calender_status ) && $provider->calender_status != 'active' )
                @php continue; @endphp
            @endif     

           <a class="dropdown-item removeselecet" id="practitionersearch" href="javascript:void(0)" data-id="{{$provider->id}}">
              <div class="media">
                 <div class="img-width">
                    @if(isset($provider->personalProfile) && $provider->personalProfile->profile_picture != '')
                       <img src="{{asset('storage/practitioner_picture/'.$provider->personalProfile->profile_picture)}}" class="align-self-center img-fluid" style="border-radius: 100% !important; height: 37px; width: 37px;" alt="...">
                    @else
                       <img src="{{asset('assets/images/d-user-icon.png')}}" class="align-self-center img-fluid" alt="...">
                    @endif
                 </div>
                 <div class="media-body">
                    <h4 class="mt-0 font-bold" data-id="{{$provider->id}}">{{$provider->first_name}} {{$provider->last_name}}</h4>
                    <h6 class="d-block">{{getProfessionHelper($provider->id)}}</h6>
                 </div>
              </div>
           </a>
        @endforeach

        @if(isset(explode('?',URL::full())[1]) && explode('=',explode('?',URL::full())[1])[0] == 'practitionersearch' && $user->role != 'admin' )
           <a class="dropdown-item removeselecet" id="practitionersearch" href="javascript:void(0)" data-id="self">
              <div class="media">
                 <div class="img-width">
                    @if($user->personalProfile->profile_picture != null )
                       <img src="{{asset('storage/practitioner_picture/'.$user->personalProfile->profile_picture)}}" class="align-self-center round-img img-fluid" alt="..." style="border-radius: 100% !important; width:37px; height: 37px;">
                    @else
                       <img src="{{asset('assets/images/d-user-icon.png')}}" class="align-self-center img-fluid" alt="...">
                    @endif
                 </div>
                 <div class="media-body">
                    <h4 class="mt-0 font-bold" data-id="self">{{$practitioner->first_name.' '.$practitioner->last_name}}</h4>
                    <h6 class="d-block">{{getProfessionHelper($user->id)}}</h6>
                 </div>
              </div>
           </a>
        @endif

        @if(isset(explode('?',URL::full())[1]) && explode('=',explode('?',URL::full())[1])[0] == 'practitionersearch' && $user->role == 'admin' )
           <a class="dropdown-item removeselecet" id="practitionersearch" href="javascript:void(0)" data-id="{{$parentData->id}}">
           <div class="media">
              <div class="img-width">
                 @if($parentData->personalProfile->profile_picture != null )

                       <img src="{{asset('storage/practitioner_picture/'.$parentData->personalProfile->profile_picture)}}" class="align-self-center round-img img-fluid"
                          alt="..." style="border-radius: 100% !important; width:37px; height: 37px;">
                       @else
                          <img src="{{asset('assets/images/d-user-icon.png')}}" class="align-self-center img-fluid"
                          alt="...">
                       @endif
              </div>
              <div class="media-body">
                 <h4 class="mt-0 font-bold" data-id="self">{{$parentData->first_name.' '.$parentData->last_name}}</h4>
                 <h6 class="d-block">{{getProfessionHelper($parentData->id)}}</h6>
              </div>
           </div>
        </a>
        @endif

     </div>
  @endif
</div>

<div class="modal fade hidewaitadd showpop" id="addModal" role="dialog" aria-labelledby="exampleModalLabel26" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form action="{{route('practitioner.appointments.addWaitList')}}" method="POST" id="appointmentsaddWaitList">
        @csrf
        <input type="hidden" id="flaginside" value="" />
        <div class="popup-marg">
          <div class="modal-header brdr-bttm-0">
            <h5 class="modal-title top-title text-center fs-title"></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="add-filter-dropdown autoSuggestBox">
              <div class="detail-form">
                <div class="form-group">
                  <input type="text" class="typeahead form-control small-input" placeholder="Enter client name" autocomplete="off" name="clientidd_wait" id="clientidd_wait">
                  <input type="hidden" class="form-control small-input" value="" id="client_id_wait_add" name="clientidd">
                </div>
                <span class="tt-dataset text-danger"></span>
                <span class="invalid-feedback d-block"></span>
                <div class="form-group">
                  <input type="text" class="form-control small-input" placeholder="Phone number" id="waitaddphone" readonly>
                </div>
                <div class="form-group">
                  <input type="text" class="form-control small-input" placeholder="Email address" id="waitaddemail" readonly>
                </div>
                <div class="form-group marg-bttm online-dropdown select-dropdown avalable-drop">
                  <select name="consultant_type" id="consultant_type" class="form-control single-select2" data-placeholder="Appointment type">
                    <option></option>
                    @foreach($practitionerAppointmentTypes as $type)
                      <option value="{{$type->id}}">{{$type->appointment_type}}</option>
                    @endforeach
                  </select>
                </div>
                <span class="invalid-feedback d-block"></span>

                <div class="form-group">
                  <input type="text" name="availability" id="availability" class="form-control small-input" placeholder="Availability">
                </div>
                <span class="invalid-feedback d-block"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="alert alert-danger profile-form-error" role="alert-dangerrt"></div>
        <div class="modal-footer text-center">
          <button type="submit" class="yellow-btn mt-0 save-btn light-bg w-100 next" >Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Open Click Card Modal -->
<div class="client-follow-popup customscroll openclickmodal ffdesignclickopen showpop">
  <div class="modal fade" id="openclickModal" 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 class="modal-title text-center eagle-font notes_date_time_name" id="exampleModalLabel1">Monday 1st February 2020, 9.15am</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="media whitecard marg30 mediabox">
                  <div class="img-width">
                    <img src="{{asset('assets/images/d-user-icon.png')}}" class="align-self-center img-fluid clientimage round-img" alt="..." style="border-radius: 100% !important; width: 60px;height:61px">
                  </div>
                  <div class="media-body text-right">
                    <h5 class="mt-0 mb-2 font-15 font-bold text-blue openClientCard cursor-pointer clientname">Monica Leveque</h5>
                    <p class="apptype">Massage with oil</p>
                    <p id="duration_popup">2.5 hours</p>
                    <p>Cost <span class="fee"> $125.00</span></p>
                    <p>Account balance: <span class="red-text account_balance">-$125.00</span></p>
                    <ul class="mb-0 openchat-icon">
                      <li>
                        <a href="#" title="SMS" class="smsidclient" ><img src="{{asset('assets/images/msg.svg')}}" alt="" class="img-fluid"></a>
                      </li>
                      <li>
                        <a href="#" class="client_tel" title="Call"><img src="{{asset('assets/images/phone.svg')}}" alt="" class="img-fluid"></a>
                      </li>
                      <li class="reschappModalClass">
                        <a href="#" data-toggle="modal" data-target="#reschappModal" data-dismiss="Modal" class="openModelPopup " title="Reschedule"><img src="{{asset('assets/images/rescheduled.svg')}}" alt="" class="img-fluid cursor-pointer"></a>
                      </li>
                      <li>
                        <a class="cursor-pointer appointment_url_calander_missed" title="Missed appointment"><img src="{{asset('assets/images/missed-img.svg')}}" alt="" class="img-fluid  mCS_img_loaded"></a>
                      </li>
                      <li class="getcancelhours_section">
                        <a class="appointment_url_calander_cancel" title="Cancelled appointment">
                          <img src="{{asset('assets/images/cancelled-img.svg')}}" alt="" class="img-fluid cursor-pointer">
                        </a>
                      </li>
                      <li class="editAppointmentModalClass">
                        <a class="openModelPopup" data-toggle="modal" data-target="#editAppointmentModal" title="">
                          <img src="{{asset('assets/images/edit-icon-blue.svg')}}" alt="" class="img-fluid cursor-pointer">
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="text-center multi-btn">
                  <a class="yellow-btn text-white mt-0 save-btn save-btn-bg w-100 cursor-pointer openModelPopup invoice_create_link invoice_create_link_data" >Invoice</a>
                  <a href="#" class="yellow-btn mt-0 save-btn w-100 Start_Video_Consult  d-none appointment_id" data-practitioner-id="{{$practitioner->id}}" data-available-credit="{{$practitioner->credit_balance}}">Start Video Consult</a>
                  <a href="#" class="yellow-btn mt-0 save-btn w-100 openModelPopup " data-toggle="modal" data-target="#bookappModal" data-dismiss="Modal">Book appointment</a>
                  <a href="" class="yellow-btn greentext mt-0 save-btn w-100 cursor-pointer appointment_notes">Appointment notes</a>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <a href="#" id="deleteappointment" class="yellow-btn mt-0 save-btn no-brdr  appointment_id "  value="">Delete appointment</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--- apptcancelmodal Start -->
  <div class="todo-list-modal clientabpopup sentmodal missapptmodal">
    <div class="modal fade" id="cancelModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content mdashboard-client-followuparea">
          <div class="modal-header">
            <button type="button" class="close bttn-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 text-center">
            <div class="mb-20">
              <img src="{{asset('assets/images/cancelled-img.svg')}}" alt="" class="img-fluid w40">
            </div>
            <h3 class="font-bold font-15 text-blue mb-20">Cancelled Appointment</h3>
            <p class="font-13 text-blue">Would you like to mark this appointment as cancelled?</p>
            <div class="text-center mt-30">
              <a data-toggle="modal" data-target="#CancelChargeModal" data-dismiss="modal" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 text-white StatusAppt" data-charge="cancelled" >Yes</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--- apptcancelmodal End -->

  <!--- missapptmodal Start -->
  <div class="todo-list-modal clientabpopup sentmodal missapptmodal cancelapptmodal">
    <div class="modal fade" id="cancelapptmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content mdashboard-client-followuparea">
          <div class="modal-header">
            <button type="button" class="close bttn-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 text-center">
            <div class="mb-20">
              <img src="{{asset('assets/images/dollar.svg')}}" alt="" class="img-fluid w40">
            </div>
            <h3 class="font-bold font-15 text-blue mb-20">Cancellation fee</h3>
            <p class="font-13 text-blue">Would you like to charge a cancellation fee?</p>
            <div class="text-center mt-30">
              <a href="#" data-charge="missed" class="cancel_invoice cursor-pointer save-btn save-btn-bg confirm-bttn mt-0">Invoice</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--- missapptmodal End -->

  <!--- apptcancelmodal fee appt Start -->
  <div class="todo-list-modal clientabpopup sentmodal missapptmodal cancelapptmodal">
    <div class="modal fade" id="CancelChargeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content mdashboard-client-followuparea">
          <div class="modal-header">
            <button type="button" class="close bttn-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 text-center">
            <div class="mb-20">
              <img src="{{asset('assets/images/dollar.svg')}}" alt="" class="w40 img-fluid">
            </div>
            <h3 class="font-bold font-15 text-blue mb-20">Cancellation fee</h3>
            <p class="font-13 text-blue">Would you like to charge a cancellation fee?</p>
            <div class="text-center mt-30">
              <a href="#" data-charge="cancelled" class="cancel_invoice cursor-pointer save-btn save-btn-bg confirm-bttn mt-0">Invoice</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--- Cancellation Fee End -->

  <!--- missapptmodal Start -->
  <div class="todo-list-modal clientabpopup sentmodal missapptmodal">
    <div class="modal fade" id="missapptmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content mdashboard-client-followuparea">
          <div class="modal-header">
            <button type="button" class="close bttn-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 text-center">
            <div class="mb-20">
              <img src="{{asset('assets/images/missed-img.svg')}}" alt="" class="img-fluid w40">
            </div>
            <h3 class="font-bold font-15 text-blue mb-20">Missed Appointment</h3>
            <p class="font-13 text-blue">Would you like to mark this appointment as missed?</p>
            <div class="text-center mt-30">
              <a data-toggle="modal" data-target="#cancelapptmodal" data-dismiss="modal" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 text-white StatusAppt" data-charge="missed">Yes</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--- missapptmodal End -->
</div>
<!-- Open Click Card Modal -->

<div class="client-follow-popup customscroll openclickmodal rightbox appointrightbox">
  <div class="popup-marg">
    <div class="modal-header" style="padding: 7px 7px;">
      <h5 class="modal-title text-left h5-first start_end_time 1" id="startendtime">11.30am - 11.45am
      </h5>
      <button type="button" class="close js-close-modal" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true"><img src="{{asset('assets/images/close-img.svg')}}" alt="" class="img-fluid closeimg closetop" ></span>
      </button>
    </div>
    <div class="p-0">
      <div class="">
        <div class="comm-marg">
          <div class="media whitecard marg30 mediabox widthmimg">
            <div class="img-width">
              <img src="{{asset('assets/images/d-user-icon.png')}}" class="round-img align-self-center img-fluid clientimage" alt="..." style="border-radius: 100% !important; width:60px; height:60px;" >
            </div>
            <div class="media-body">
              <div class="row">
                <div class="col-md-10">
                  <h5 class="mt-0 mb-2 cursor-pointer openClientCard font-15 font-bold text-blue clientname" >Lina Lopez</h5>
                </div>
              </div>

              <p class="apptype">Live blood analysis</p>
              <p>Cost <span class="fee">$125.00</span></p>
              <p>Account balance: <span class="red-text account_balance" >$125.00</span></p>

              <ul class="mb-0 openchat-icon">
                <li>
                  <a href="#" style="top:0px; margin-right:0px" class="rescheduledayview" data-dismiss="Modal" title="Reschedule"><img src="{{asset('assets/images/rescheduled.svg')}}" alt="" class="img-fluid"></a>
                </li>
                <li>
                  <a class="cursor-pointer appointment_url_calander_missed" title="Missed appointment"><img src="{{asset('assets/images/missed-img.svg')}}" alt="" class="img-fluid missapptimg mCS_img_loaded"></a>
                </li>
                <li>
                  <a class="appointment_url_calander_cancel" title="Cancelled appointment" ><img src="{{asset('assets/images/cancelled-img.svg')}}" alt="" class="img-fluid cursor-pointer"></a>
                </li>
              </ul>
            </div>
          </div>
          <div class="text-center multi-btn">
            <a class="yellow-btn text-white mt-0 save-btn save-btn-bg w-100 cursor-pointer invoice_create_link invoice_create_link invoice_create_link_data" >Invoice</a>
            <span class="Start_Video_Consult_span d-none"><a class="yellow-btn mt-0 save-btn w-100  Start_Video_Consult  appointment_id" data-practitioner-id="{{$practitioner->id}}" data-available-credit="{{$practitioner->credit_balance}}" href="#">Start Video Consult</a></span>

            <a href="#" class="yellow-btn mt-0 save-btn w-100 bookappointmentUrl" >Book appointment</a>

            <a id="appointmentNotes" class="yellow-btn greentext mt-0 save-btn w-100 cursor-pointer appointment_notes">Appointment notes</a>
          </div>
          <div class="waitlist-modal pos-rel ">
            <div class="delete-check-icon checkedbox">
              <ul class="mb-0">
                <li>
                  <div class="rdio rdio-primary radio-inline">
                    <input id="radio100" type="checkbox"  name="app_status" class="status_appointment day_status" value="arrived">
                    <label for="radio100"><span class="labelcheck">Arrived</span></label>
                  </div>
                </li>
              </ul>
            </div>
            <div class="delete-check-icon checkedbox">
              <ul class="mb-0">
                <li>
                  <div class="rdio rdio-primary confirm radio-inline "> <input id="radio101" type="checkbox"  name="status_app" class="status_appointment day_status"  value="confirmed">
                    <label for="radio101"><span class="labelcheck">Confirmed</span></label>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <a href="#" id="delete_appointment" class=" yellow-btn mt-0 save-btn appointment_id " >Delete appointment</a>
    </div>
  </div>

  <form id="editappointment" action="{{route('practitioner.appointments.editappointment')}}" method="POST">
    <input type="hidden" name="appointment_id" class="appointment_id" value="" id="AppointmentID">
    <div class="linalopez-box">
      <div class="linlopeztitle">
        <div class="kembikemstar-box">
          <h3 class="clientname">Lina Lopez </h3><span><img src="{{asset('assets/images/close-img.svg')}}" class="img-fluid closeimg"></span>
        </div>
      </div>

      <div class="comm-marg">
        <div class="label-form">
          <div class="row align-items-center">
            <div class="col-md-4 pr-xl-0">
              <label>Date</label>
            </div>
            <div class="col-md-8">
              <div class="form-group mb-0" id="invoiveappointmentdatedayparent">
                <input type="text" class="form-control invoiveappointmentdate bg-gray" placeholder="select date" name="date" id="invoiveappointmentdateday" autocomplete="off" readonly>
              </div>
              <span class="invalid-feedback d-block"></span>
            </div>
          </div>
        </div>

        <div class="label-form">
          <div class="row align-items-center">
            <div class="col-md-4 pr-xl-0">
              <label>Service Provider</label>
            </div>
            <div class="col-md-8">
              <div class="form-group mb-0  bggray" id="day_parent_edit_service_provider">
                @if($practitioner->serviceProvider)
                  <select id="day_edit_service_provider" name="service_provider" class="form-control single-select2 edit_service_provider" data-placeholder="select service provider">
                    <option value="self">{{$user->full_name}}</option>
                    @foreach($practitioner->serviceProvider as $provider)
                      <option value="{{$provider->id}}">{{$provider->full_name}}</option>
                    @endforeach
                  </select>
                @else
                  <input type="text" class="form-control editserviceprovidername" name="" autocomplete="off">
                @endif
              </div>
              <span class="invalid-feedback d-block"></span>
            </div>
          </div>
        </div>

        <div class="label-form">
          <div class="row align-items-center">
            <div class="col-md-4 pr-xl-0">
              <label>Time</label>
            </div>
            <div class="col-md-8">
              <div class="form-group mb-0">
                <input type="text" class="form-control editapptTime bg-white" placeholder="select time" name="time"  autocomplete="off" readonly="">
              </div>
              <span class="invalid-feedback d-block"></span>
              <div><input type="hidden" name="msg"></div>
              <span class="invalid-feedback d-block"></span>
            </div>
          </div>
        </div>

        <div class="label-form">
          <div class="row align-items-center">
            <div class="col-md-4 pr-xl-0">
              <label>Name</label>
            </div>
            <div class="col-md-8 select_custom">
              <div class="form-group mb-0 ">
                <input placeholder="Name" class="clientname form-control bg-white" name=""  autocomplete="off" type="text" readonly="">
              </div>
              <span class="invalid-feedback d-block"></span>
            </div>
          </div>
        </div>

        <div class="label-form">
          <div class="row align-items-center">
            <div class="col-md-4 pr-xl-0">
              <label>Appt type</label>
            </div>
            <div class="col-md-8 gray-brdr">
              <div class="form-group mb-0 marg-bttm  online-dropdown select-dropdown avalable-drop dropdwonSetApptAdd editappttype bggray">
                <select  name="appointment_type_id" class="form-control editappointment_type_id single-select2">
                  <option hidden value=""> Appointmnet Type</option>
                  @foreach($practitionerAppointmentTypes as $type)
                  <option value="{{$type->id}}" data-cost = "{{$type->fee}}" data-location="{{$type->location}}" data-duration="{{$type->duration}}">{{$type->appointment_type}}</option>
                  @endforeach
                </select>
              </div>
              <span class="invalid-feedback d-block"></span>
            </div>
            <div class="col-md-1 pl-xl-0">
              <div class="plus-bullet-img"></div>
            </div>
          </div>
        </div>

        <div class="label-form">
          <div class="row align-items-center">
            <div class="col-md-4 pr-xl-0">
              <label>Duration</label>
            </div>
            <div class="col-md-8">
              <div class="form-group mb-0 dropdwonSetApptAdd editapptduration select-arrow-none duration">
                <select name="duration" class="form-control single-select2 editduration1" disabled>
                  <option hidden value="">Select Duration</option>
                  @foreach($durations as $duration)
                    <option value="{{$duration->id}}" >{{convertMinutesToHumanReadable($duration->duration)}}</option>
                  @endforeach
                </select>
                <input type="hidden" name="duration" value="" class="editduration">
              </div>
              <span class="invalid-feedback d-block"></span>
            </div>
          </div>
        </div>

        <div class="label-form mb-50">
          <div class="row align-items-center">
            <div class="col-md-4 pr-xl-0">
              <label>Location</label>
            </div>
            <div class="col-md-8 gray-brdr">
              <div class="form-group bggray mb-0 marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child  dropdwonSetApptAdd editapptlocation">
                <select  name="" class="form-control single-select2 editlocation1">
                  <option hidden value="">Select Location</option>
                  @foreach($LocationsPract as $location)
                    <option value="{{$location->id}}">{{getLocationAddress($location->address) ?? '-'}}</option>
                  @endforeach
                </select>
                <input type="hidden" name="location" value="" class="editlocation1">
              </div>
              <span class="invalid-feedback d-block"></span>
            </div>
          </div>
        </div>
      </div>

      <div class="linalopez-cbtn">
        <button class="btn-fill w-100" type="submit">Confirm</button>
      </div>
    </div>
  </form>
</div>

<!-- Book Appointment Start-->
<div class="client-follow-popup customscroll openclickmodal bookappModal">
  <div class="modal fade" id="bookappModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <input type="hidden" name="client_id_res" id="client_id_rs" value="" class="clientid">
      <div class="modal-content">
        <div class="popup-marg">
          <div class="modal-header">
            <h5 class="modal-title text-center eagle-font" id="exampleModalLabel1">Book Appointment</h5>
            <button type="button" class="close bttn-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="media marg30 mediabox">
                  <div class="app__main w-100">
                    <div class="calendar">
                      <div id="bs-calendar">
                        <input type="hidden" name="bs_calendar" class = "bs-calendar" value="">
                      </div>
                      <span class="invalid-feedback d-block"></span>
                    </div>
                  </div>
                </div>
                <div class="mt-10">
                  <a id="reset-bs-calender-input"><span class="green-text">Clear all</span></a>
                </div>
                <div class="text-center multi-btn">
                  <ul class="box-li">
                    <li>Skip ahead</li>
                    <li>
                      <div class="gray-brdr">
                        <div class="form-group mb-0 marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                          <select id="mounth11" class="form-control">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                          </select>
                        </div>
                      </div>
                    </li>
                    <li>
                      <div class="gray-brdr">
                        <div class="form-group mb-0 marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                          <select id="mounth12" class="form-control">
                            <option value="months">Months</option>
                            <option value="weeks">Weeks</option>
                          </select>
                        </div>
                      </div>
                    </li>
                    <li>
                      <div class="gray-brdr">
                        <div class="form-group mb-0 marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                          <button id="applybscal" >Apply</button>
                        </div>
                      </div>
                    </li>
                  </ul>
                  <a href="#" class="yellow-btn text-white mt-0 save-btn save-btn-bg w-100" id="book_continue" data-click="">Continue</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Book Appointment End-->

<!-- Reschedule Start-->
<div class="client-follow-popup customscroll openclickmodal bookappModal">
  <div class="modal fade" id="reschappModal" 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 class="modal-title text-center eagle-font" id="exampleModalLabel1">Reschedule</h5>
            <button type="button" class="close bttn-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="media marg30 mediabox">
                  <div class="app__main">
                    <div class="calendar">
                      <div id="rs-calendar">
                        <input type="hidden" name="rs_calendar" class="rs-calendar" value="">
                        <input type="hidden" name="app_id" value="">
                      </div>
                      <span class="invalid-feedback d-block"></span>
                    </div>
                  </div>
                </div>
                <div class="mt-10">
                  <a id="reset-rs-calender-input"><span class="green-text">Clear all</span></a>
                </div>
                <div class="text-center multi-btn">
                  <ul class="box-li">
                    <li>Skip ahead</li>
                    <li>
                      <div class="gray-brdr">
                        <div class="form-group mb-0 marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child mounth15">
                          <select id="mounth15" class="form-control">
                            <option hidden>1</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                          </select>
                        </div>
                      </div>
                    </li>
                    <li>
                      <div class="gray-brdr">
                        <div class="form-group mb-0 marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                          <select id="mounth16" class="form-control">
                            <option value="months">Months</option>
                            <option value="weeks">Weeks</option>
                          </select>
                        </div>
                      </div>
                    </li>
                    <li>
                      <div class="gray-brdr">
                        <div class="form-group mb-0 marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                          <button id="applyrscal" >Apply</button>
                        </div>
                      </div>
                    </li>
                  </ul>

                  <input type="hidden" name="bookTimeOverAppointment_Resc" id="bookTimeOverAppointment_Resc">
                  <a href="#" class="yellow-btn text-white mt-0 save-btn save-btn-bg w-100" id="reschedule_continue" data-click="">Continue</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Reschedule End-->

<!--- Send SMS Message -->
<div class="client-follow-popup login-modal settingwaitlist customscroll clientabpopup businessdetails angelaforst-modal send-sms-message">
  <div class="modal fade " id="sendsmsmessage" role="dialog" aria-labelledby="exampleModalLabel13">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content modal-senddetails">
        <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="mt-30 customformcontrol-form searchApptClient"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--- Send SMS Message -->

<!-- Multiple Location 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>
<!-- Multiple Location Modal-->

<div class="client-follow-popup customscroll openclickmodal quickaddModal applylgModal">
  <div class="modal fade" id="applylgModaldata" 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">
            <div class="client-top-area">
              <ul class="filtertop-li 20img">
                <li><a data-dismiss="modal" class="txt-filter greentext cursor-pointer dateserviceModalopen">Filter</a></li>
                <li><a href="#"><img src="{{asset('assets/images/message-icon-green.svg')}}" alt="" class="img-fluid"></a></li>
                <li><a href="#" id="downloadtestresult_filter"><img src="{{asset('assets/images/download-icon-green.svg')}}" alt="" class="img-fluid"></a></li>
                <li><a href="#" class="client-print" data-content="print-test-result-table" data-header="Date Report"><img src="{{asset('assets/images/print-icon-green.svg')}}" alt="" class="img-fluid"></a></li>
              </ul>
            </div>
            <h5 class="modal-title text-center eagle-font" id="exampleModalLabel1">Thurs 11th Feb - Friday 12th Feb</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="mCustomScrollbar1">
              <div class="boxshadowarea">
                <div class="table-responsive">
                  <table class="table dataappend"></table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@include('front.practitioner.appointments.edit_appointment')
@include('front.practitioner.appointments.notesmodal')

<div id="load-modal"></div>
<input type="hidden" id="appt_type_calander" class="appt_type_calander"/>
<input type="hidden" id="appt_type_calander_client_id" class="appt_type_calander_client_id"/>
@endsection

@section('css')
  <style>
    #invoiceViewModal .sentmodal .modal-content{width: 450px;}
    #editappointment .duration .select2-container .selection .select2-selection--single,
    .select2-container--default.select2-container--disabled .select2-selection--single{background-color:white !important;}
    .client-follow-popup.send-sms-message #sendsmsmessage .media>p{white-space: inherit !important;}
  </style>
@endsection

@section('jss')
  @php
    $isvideo=0;
    if(Request::get('from')=="video"){
      $isvideo=1;
    }

    $url=route("join",":roomName");
    $url_replaced = preg_replace( '#^http://#','https://', $url );
  @endphp

  <script>
    var dateFromUrl= "{{ Request::get('date') }}";
    var clientIdFromUrl= "{{ Request::get('client_id') }}";
    var appointmentIdFromUrl= "{{ Request::get('appointment_id') }}";
    var typeFromUrl= "{{ Request::get('type') }}";
    var appointmentCalenderUrl= "{{ url('practitioner/appointments/show') }}";
    var calanderUrl="{{ route('practitioner.appointments.index') }}"

    var isvideoFrom='{{ $isvideo }}';
    if(isvideoFrom==1){
     // $('#addcreditsmodal').modal('show');
     window.location.href ="{{url('practitioner/credit_purchase')}}";
    }

    var config = {
      routes: {
        invoice_create_base_link: "{{ url('practitioner/appointments/create-invoice') }}",
      }
    };
  </script>

  <script type="text/javascript">
    $(".recommendationFileBtn").hover(function () {
      $(".recommendationFileBox").toggle();
    });

    $(document).ready(function() {
      $(".prod_q").on("keyup", function() {
        var val = parseInt(this.value);

        if(val < 1) {
          Swal.fire({
            icon: 'error',
            title: 'Quantity can not zero allow.',
            showClass: {
              popup: 'animate__animated animate__fadeInDown'
            },
            hideClass: {
              popup: 'animate__animated animate__fadeOutUp'
            }
          });
          this.value = '1';
        }
      });

      var date_input=$('input[name="start_date"]'); //our date input has the name "date"
      var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
      var options={
        format: 'dd-mm-yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
        container: '#open_from_date'
      };
      date_input.datepicker(options);
    });

    $(document).ready(function() {
      var date_input=$('input[name="end_date"]');
      var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
      var options={
        format: 'dd-mm-yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
        container: '#open_from_date'
      };
      date_input.datepicker(options);
    });

    $("#note-invoice-popup").on("show.bs.modal",function(event) {
      var gst = '{{$settings->gst}}';
      var button = $(event.relatedTarget);
      var thiss = $(this);
      var invoicetotal = thiss.find("#this_invoice").val();

      $.ajax({
        url: "{{ route('practitioner.appointments.getPrescribedProduct')}}",
        type: 'POST',
        data: {
          appointment_id: $('.appointment_id').val(),
          client_id: $('.clientid').val(),
          flag:button.data('flag')
        },
      }).done(function(response) {
        if(response.status == 'success') {
          if(response.data.invoice.length > 0) {
            var total = 0;
            thiss.find(".productappentable").find(".productappentab-box").css('display','none');

            $.each(response.data.invoice, function(key, value) {
              total = total + parseInt(value.total);
              var html = '';
              var yes = '';
              var finalprice = value.price;
              var finaltotal = value.total;

              if( value.is_gst == 'on' ) {
                yes = '* ';
              }

              html+='<div class="productappentab-box ff"><div class="row"><div class="col-lg-1 col-md-2"><label>Item</label></div><div class="col-lg-11 col-md-10"><div class="form-group"><input type="text" class="typeahead form-control small-input product__id graytxt" placeholder="Enter product name" autocomplete="off" name="product__id" data-price1="'+finalprice+'" value="'+ yes + value.product_name+'"><input type="hidden" name="product_id[]" class="form-control product_id" id="product_id" value="'+value.id+'"></div><span class="invalid-feedback d-block tt-dataset"></span></div></div></div><div class="productappentab-box ff" ><div class="row"><div class="col-lg-6 col-md-6"><div class="row"><div class="col-lg-6 col-md-6"><div class="row"><div class="col-lg-4 col-md-4"><label class="mb-0">Qty</label></div><div class="col-lg-8 col-md-8"><div class="form-group"><input type="text" class="form-control small-input deduct_quantity" placeholder="0" name="deduct_quantity[]" id="deduct_quantity" value="'+value.quantity+'" data-price="'+finalprice+'"><input type="hidden" name="productmsg"></div><span class="invalid-feedback d-block"></span></div></div></div><div class="col-lg-6 col-md-6"><div class="row"><div class="col-lg-4 col-md-4"><label class="mb-0">Cost</label></div><div class="col-lg-8 col-md-8"><div class="form-group dollar"><input type="text" class="form-control small-input product_cost float_number_validation" placeholder="00.00" name="product_cost[]" id="product_cost" value="'+finalprice+'"></div></div></div></div></div></div><div class="col-lg-6 col-md-6"><div class="row align-items-center justify-content-end"><div class="col-lg-2 col-md-2"><label class="mb-0">Total</label></div><div class="col-lg-6 col-md-6"><div class="form-group dollar"><input type="text" class="form-control small-input total_cost" placeholder="00.00" name="total_cost" id="total_cost" value="'+finaltotal+'" readonly=""><input type="hidden" name="payment_type_data"></div></div></div></div></div></div>';

              thiss.find(".productappentable").find("h3").after(html);
            });

            thiss.find("#this_invoice").val(parseInt(invoicetotal)+total);
          } else {
            thiss.find(".productappentable").find(".productappentab-box").css('display','block');
            thiss.find(".productappentable").find(".ff").remove();
          }
        }
      });
    });

    var g = '{{ $user->practitionerIntervals->calendar_interval ?? "00:15"}}';
    var f = @json($practitioner->serviceProvider);
    var eventsData =  @json($appointments);
    var calSyncUrl =  '{{route('practitioner.appointments.calendarsync')}}';
    var holiday = @json($holidays);
    var location1 = @json($LocationsPract);
    var loc = @json($loc);
    var jump_todate = @json($jump_todate);
    var lname = '-';
    var selectedLocationId = @json($locationId);
    var is_member_calendar = @json($is_member_calendar);
    var member_id = @json($searchid);
    var teamResources = @json($teamResources);
    console.log("teamResources",teamResources);

    $(document).ready( function() {
      if( is_member_calendar == 1 ) {
        var servUrl = "{{ route('practitioner.appointments.getServiceByLocationId') }}?selectedLocationId="+selectedLocationId+"&member_id="+member_id;

        $.ajax({
          type: "GET",
          url: servUrl,
          success: function( response ) {
            var service_data = response.data;
            $("#appointment_type_id").empty();

            if( service_data.length > 0 ) {
              $("#appointment_type_id").append("<option></option>");
              $("#appointment_type_id").trigger('change');

              for( var i = 0; i < service_data.length; i++ ) {
                $("#appointment_type_id").append("<option value='"+service_data[i].id+"' data-cost='"+service_data[i].fee+"' data-location='"+service_data[i].location+"' data-duration='"+service_data[i].duration+"' >"+service_data[i].appointment_type+"</option>");
                $("#appointment_type_id").trigger('change');
              }
            }
          }
        });
      }
    });

    if(Object.keys(loc).length > 1) {
      lname = "@php echo getLocationAddress($loc->address ?? "") @endphp";
    }

    var businessHours = @json($businesshours);
    var calendtime = @json($maxendtime);
    var calstarttime = @json($minstarttime);
    var minstartTimeOfCalender = @json($minstartTimeOfCalender);
    var app_id = @json($app_id);
    var date = @json($date);
    var segmenturl = '';
    var href = window.location.href.split("?");

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

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

    if( segmenturl.length > 0 ) {
      var practitionerImage = '<div class="media">@if(isset($searchpersonalprofile->profile_picture) && $searchpersonalprofile->profile_picture != null) <div class="img-width"><img src="{{asset("storage/practitioner_picture/".$searchpersonalprofile->profile_picture)}}" class="align-self-center img-fluid round-img" alt="..."></div>@else<div class="img-width"><img src="{{asset("assets/images/d-user-icon.png")}}" class="align-self-center img-fluid" alt="..."></div>@endif<div class="media-body text-left"><h5 class="mt-0 text-blue">@if($searchpractitioner){{$searchpractitioner->first_name.' '.$searchpractitioner->last_name ?? "Not specified"}}@else {{"Not specified"}}@endif <span class="d-block">@if($searchpersonalprofile){{ getProfessionHelper($searchpersonalprofile->id) }}@else{{"Not specified"}}@endif</span></h5></div></div>';
    } else {
      // var practitionerImage = '<div class="media">@if(isset($practitioner->personalProfile) && $practitioner->personalProfile->profile_picture != null) <div class="img-width"><img src="{{asset("storage/practitioner_picture/".$practitioner->personalProfile->profile_picture)}}" class="align-self-center img-fluid round-img" alt="..."></div>@else<div class="img-width"><img src="{{asset("assets/images/d-user-icon.png")}}" class="align-self-center img-fluid" alt="..."></div>@endif<div class="media-body text-left"><h5 class="mt-0 text-blue">{{$practitioner->first_name.' '.$practitioner->last_name}} <span class="d-block">{{getProfessionHelper($practitioner->id)}} </span></h5></div></div>';
      var practitionerImage = '<div class="media">@if(isset($businessProfile->logo) && $businessProfile->logo != null) <div class="img-width"><img src="{{asset("business_images/".$businessProfile->logo)}}" class="align-self-center img-fluid round-img" alt="..."></div>@else<div class="img-width"><img src="{{asset("assets/images/d-user-icon.png")}}" class="align-self-center img-fluid" alt="..."></div>@endif<div class="media-body text-left"><h5 class="mt-0 text-blue">View all practitioners <span class="d-block"></span></h5></div></div>';
    }

    // ADD NEW CODE FOR TEAM MEMBER - START
    if( is_member_calendar == 1 ) {
      var locationdropdown =
      "@if(sizeof($LocationsPract)>1)@foreach($LocationsPract as $location) <a data-member='1' class='dropdown-item' data-index='{{$location->id}}' href='#'>