@extends('front.inner-layout.app')
{{-- {{Session::get('message', 'info')}} --}}
@section('content')
<div class="page-content dashboard-wrapper mdashboard-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> Dashboard</h1>
      </div>
      @include('front.inner-layout.header')
   </div>
   <div class="brdr-bttm"></div>
   <div class="earning-box">
      <div class="row">
         <div class="col-xl-2 col-sm-4 padd30">
            <div class="top-single-box">
               <p>YTD takings </p>
               <span class="number">${{number_format($yearlyTotal,2)}}</span>
               <!-- <a href="#" class="down-arrow"><img src='{{asset("assets/images/down-arrow.png")}}' alt=""></a> -->
            </div>
         </div>

         <div class="col-xl-2 col-sm-4 padd30">
         <!-- data-toggle="modal" data-target="#welcomeModal" -->
            <div class="top-single-box cursor-pointer">
               <p>Takings this month</p>
               <span class="number">${{number_format($monthlyTotal,2)}}</span>
               <a href="#" class="down-arrow"><img src='{{asset("assets/images")}}/{{$monthlyStatus}}' alt=""></a>
            </div>
         </div>
         <div class="col-xl-2 col-sm-4 padd30">
            <div class="top-single-box">
               <p>Todays takings</p>
               <span class="number">${{number_format($todayTotal,2)}}</span><a href="#" class="down-arrow"><img src='{{asset("assets/images")}}/{{$todayStatus}}' alt=""/></a>
            </div>
         </div>
         <div class="col-xl-2 col-sm-4 padd30">
         <!-- data-toggle="modal" data-target="#businessprofile-Modal" -->
            <div class="top-single-box double-text cursor-pointer">
               <p>Total <span class="d-md-block">clients</span></p>
               <span class="number">{{$clientCount}}</span>
               <!-- <a href="#" class="up-arrow">
                <img src='{{asset("assets/images/up-arrow.png")}}' alt="">
               </a> -->
            </div>
         </div>
         <div class="col-xl-2 col-sm-4 padd30">
         <!-- data-toggle="modal" data-target="#fourModal" -->
            <div class="top-single-box double-text cursor-pointer">
               <p>Bookings this <span class="d-md-block">month</span></p>
               <span class="number">{{$bookingThisMonth}}</span>
               <a href="#" class="up-arrow"><img src='{{asset("assets/images")}}/{{$appointmentBookingStatus}}' alt=""></a>
            </div>
         </div>
         <div class="col-xl-2 col-sm-4 padd30">
            <div class="top-single-box double-text">
               <p>New clients <span class="d-md-block">this month</span></p>
               <span class="number">{{$newClientCount}}</span>
               <a href="#" class="down-arrow"><img src='{{asset("assets/images/")}}/{{$clientStatus}}' alt=""></a>
            </div>
         </div>

      </div>
   </div>
   <div class="mydashboard-upcoming-area mt-4">
      <div class="row mt-38">
         <div class="col-xl-8">
            <div class="row">
               <div class="col-xl-7 col-md-7 padd30">
                  <!-- Chat popup -->
                  <!--  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#replyModal">Chat popup</button> -->

                  <!-- <div class="reply-modal c-reply-modal chatmodal close-h-img customscroll angelafrost-chatmodal">
                     <div class="modal fade" id="replyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                        aria-hidden="true">

                        <div class="modal-dialog modal-dialog-centered" role="document">
                           <div class="modal-content">
                              <div class="modal-header p-0">
                                 <button type="button" class="close bttn-close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true"><img src="{{asset('assets/images/close-img.png')}}" alt="" class="img-fluid"></span>
                                 </button>
                                 <h5 class="modal-title" id="exampleModalLabel">Angela Frost</h5>
                              </div>

                        <div class="modalcode"></div>

                          </div>
                        </div>
                     </div>
                  </div> -->
                  <!-- End Chat popup -->

                  <h2 class="sub-title mb-3">Upcoming appointments</h2>
                  <div class="appointment-listing">
                     @if(count($upcomingAppointments) > 0)
                     @foreach($upcomingAppointments as $upcomingAppointment)
                     <div style="cursor:pointer;" class="appointment-box">
                        <div class="row align-items-center">
                           <div class="col-2">
                              <img id="app_image_click" data-id="{{$upcomingAppointment->client->id ?? ''}}" style="border-radius: 50%;width: 45px !important;height: 40px!important;" src="{{$upcomingAppointment->profile}}" alt="" class="img-fluid user-img" />
                           </div>
                           <div class="col-xl-6 col-sm-5 col-6">
                              <p class="person-name text-capitalize"><a class="hover-client-name openClientCard cursor-pointer" data-id="{{$upcomingAppointment->client->id ?? ''}}">{{ $upcomingAppointment->modify_name ?? ""  }}</a></p>
                              <p><a class="appointment-date" href="{{ route('practitioner.appointments.details',[$upcomingAppointment->id])}}">{{ Carbon\Carbon::parse($upcomingAppointment->date)->format('d/m') }} {{ Carbon\Carbon::parse($upcomingAppointment->time)->format('h.i A') }} </a></p>
                           </div>
                           <div class="col-xl-4 col-sm-5 col-4  data-right">
                              <ul class="float-right dash-icon">
                                 <!-- <li><a href="#"><img src='{{asset("assets/images/d-user-icon.png")}}' alt=""/></a></li> -->
                                 {{-- @if($user->availability_status == "online")
                                  <li><a target="_blank" href="{{route('practitioner.makecall.patient',[$upcomingAppointment->id])}}"><img src='{{asset("assets/images/phone_appointment.svg")}}' alt=""/></a></li>@endif --}}

                                 <li><a id="clientcall"
                                 data-clientname="{{$upcomingAppointment->modify_name ?? ''}}"
                                 data-clientphone="{{$upcomingAppointment->modify_mobile ?? '-'}}"
                                 data-clientphonework="{{$upcomingAppointment->modify_work ?? '-'}}"
                                 data-clientphonehome="{{$upcomingAppointment->modify_home ?? '-'}}" class="">
                                 <img src='{{asset("assets/images/call.svg")}}' alt=""/></a>
                                 </li>

                                 <li>{{-- <a href="mailto:{{ $upcomingAppointment->email ?? ''}}"><img src='{{asset("assets/images/msg.svg")}}' alt=""/></a> --}}<a href="#" id="sendsmstoclient" data-email="{{$upcomingAppointment->client->email ?? ''}}" data-clientname="{{$upcomingAppointment->client->full_name ?? ''}}" data-clientfname="{{$upcomingAppointment->client->name ?? ''}}" data-data="{{$upcomingAppointment->client_id ?? ''}};"><img src='{{asset("assets/images/email.svg")}}' alt=""/></a></li>
                              </ul>
                           </div>
                        </div>
                     </div>
                     @endforeach
                     @else
                     <div class="appointment-box">
                        <div class="row align-items-center">
                           <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                              <p class="person-name">No Upcoming Appointments</p>
                           </div>
                        </div>
                     </div>
                     @endif

                  </div>
               </div>

               <div class="col-xl-5 col-md-5 padd30">
                  <div class="mdashboard-client-followuparea-content">
                    <h2 class="sub-title mb-3">Client follow ups</h2>
                        <div class="row">
                           <div class="col-sm-6">
                              <a href="{{url('practitioner/dashboard/client-referrals')}}">
                              <!-- <a href="#"> -->
                              <div class="card media cursor-pointer" data-toggle="modal" data-target="#referalModal999">
                                 <div class="img-width-content">
                                    <img src='{{asset("assets/images/client-follow-ups-client-referrals.svg")}}' class="align-self-center img-fluid border-0" alt="..." style="width: 100%;margin: 8px 0;" >
                                    {{--<img src='{{asset("assets/images/recalls-coming-soon.png")}}' class="align-self-center img-fluid border-0" alt="..." style="height: auto;margin: 8px 0;" />--}}
                                    @if($referredClientsList->count() > 0)
                                       <span class="notification-txt">{{ $referredClientsList->count()}}</span>
                                    @endif
                                 </div>
                                 <div class="card-body">
                                    <h5 class="dashboard-section-header">Client Referrals </h5>
                                 </div>
                              </div>
                           </a>
                           </div>

                           <div class="col-sm-6">
                              <a href="{{url('practitioner/dashboard/client/recalls')}}">
                              {{-- <a href="#"> --}}
                                 <div class="media cursor-pointer card" data-toggle="modal" data-target="#overdue-appointment-modal999">
                                    <div class="img-width-content">
                                          <img src='{{asset("assets/images/client-follow-ups-overdue.svg")}}' class="align-self-center img-fluid border-0" alt="..."> 
                                          {{-- <img src='{{asset("assets/images/recalls-coming-soon.png")}}' class="align-self-center img-fluid border-0" alt="..." style="max-width: 100%;max-height: 60px; margin: 8px 0;" /> --}}

                                          @if($clientRecallsCount > 0)
                                             <span class="notification-txt">
                                                {{ $clientRecallsCount >= 100 ? '99+' : $clientRecallsCount }}
                                             </span>
                                          @endif
                                       </div>
                                       <div class="card-body">
                                          <h5 class="dashboard-section-header">Client Recalls </h5>
                                       </div>
                                 </div>
                              </a>
                           </div>

                           <div class="col-sm-6">
                              <a href="{{url('practitioner/dashboard/new-clients')}}">
                              {{--<a href="#">--}}
                                 <div class="card media cursor-pointer" data-toggle="modal" data-target="#newclientModal999">
                                    <div class="img-width-content">
                                       <img src='{{asset("assets/images/client-follow-ups-new-clients.svg")}}' class="align-self-center img-fluid border-0" alt="..." style="width: 100%;margin: 8px 0;">
                                       {{-- <img src='{{asset("assets/images/recalls-coming-soon.png")}}' class="align-self-center img-fluid border-0" alt="..." style="max-width: 100%;height: auto;margin: 8px 0;" /> --}}

                                       @if($newClients->count() > 0)
                                          <span class="notification-txt">{{ $newClients->count()}}</span>
                                       @endif
                                    </div>
                                    <div class="card-body">
                                       <h5 class="dashboard-section-header">New Clients </h5>
                                    </div>
                                 </div>
                              </a>
                           </div>

                           <div class="col-sm-6">
                              <a href="{{url('practitioner/dashboard/missed-appointments')}}">
                                 <div class="card media cursor-pointer" data-toggle="modal" data-target="#missedModal999">
                                    <div class="img-width-content">
                                       <img src='{{asset("assets/images/client-follow-up-missed-appts.svg")}}' class="align-self-center img-fluid border-0" style="width: 100%;margin: 8px 0;" alt="...">
                                       {{--<img src='{{asset("assets/images/recalls-coming-soon.png")}}' class="align-self-center img-fluid border-0" alt="..." style="max-width: 100%;height: auto;margin: 8px 0;" />--}}
                                       @if($missedAppointments->count() > 0)
                                          <span class="notification-txt">{{ $missedAppointments->count()}}</span>
                                       @endif
                                    </div>
                                    <div class="card-body">
                                       <h5 class="dashboard-section-header">Missed Appts</h5>
                                    </div>
                                 </div>
                              </a>
                           </div>

                           <div class="col-sm-6">
                              <a href="{{url('practitioner/dashboard/birthdays')}}">
                                 <div class="card media cursor-pointer" data-toggle="modal" data-target="#birthdayModal999">
                                    <div class="img-width-content">
                                       <img src='{{asset("assets/images/client-follow-ups-birthdays.svg")}}' class="align-self-center img-fluid border-0" alt="..." style="width: 100%;margin: 8px 0;">
                                       @if( $clientUpcomingBirthday->count() > 0 )
                                          <span class="notification-txt">{{ $clientUpcomingBirthday->count()}}</span>
                                       @endif
                                    </div>
                                    <div class="card-body">
                                       <h5 class="dashboard-section-header">Birthdays</h5>
                                    </div>
                                 </div>
                              </a>
                           </div>

                           <div class="col-sm-6">
                              <a href="{{route('practitioner.unpaid.invoice.index')}}">
                                 <div class="card media cursor-pointer">
                                    <div class="img-width-content">
                                       <img src='{{asset("assets/images/unpaid_invoice_icon.svg")}}' class="align-self-center img-fluid border-0" alt="..." style="width: 100%;margin: 8px 0;">
                                       @if( $unpaidInvoicesCount > 0 )
                                          <span class="notification-txt">{{ $unpaidInvoicesCount }}</span>
                                       @endif
                                    </div>
                                    <div class="card-body">
                                       <h5 class="dashboard-section-header">Unpaid Invoices</h5>
                                    </div>
                                 </div>
                              </a>
                           </div>
                           <div class="col-sm-6">
                              <a href="{{route('practitioner.appointment_listing')}}">
                                 <div class="card media cursor-pointer">
                                    <div class="img-width-content">
                                       <img src='{{asset("assets/images/new-Appointment-list.svg")}}' class="align-self-center img-fluid border-0" alt="..." style="width: 100%;margin: 8px 0;">
                                       
                                    </div>
                                    <div class="card-body">
                                       <h5 class="dashboard-section-header">Appointment List</h5>
                                    </div>
                                 </div>
                              </a>
                           </div>
                           <div class="col-sm-6">
                              <a href="{{route('practitioner.smsbulk.index')}}">
                                 <div class="card media cursor-pointer">
                                    <div class="img-width-content">
                                       <img src='{{asset("assets/images/sms.svg")}}' class="align-self-center img-fluid border-0" alt="..." style="width: 100%;margin: 8px 0;">
                                       <!-- @if( $unpaidInvoicesCount > 0 )
                                          <span class="notification-txt">{{ $unpaidInvoicesCount }}</span>
                                       @endif -->
                                    </div>
                                    <div class="card-body">
                                       <h5 class="dashboard-section-header">Broadcasts</h5>
                                    </div>
                                 </div>
                              </a>
                           </div>

                           {{--<div class="col-sm-6">
                              <div class="card media cursor-pointer" data-toggle="modal" data-target="#bulk-popup99">
                                 <div class="img-width-content">
                                       <!-- <img src='{{asset("assets/images/Client follow ups - Bulk messaging.svg")}}' class="align-self-center img-fluid border-0" alt="..."> -->
                                       <img src='{{asset("assets/images/bulk-messaging.png")}}' class="align-self-center img-fluid border-0" alt="..." style="height: auto;margin: 8px 0;" />

                                    </div>
                                    <div class="card-body">
                                       <h5 class="">Bulk messaging</h5>
                                    </div>
                              </div>
                           </div>--}}
                        </div>
                  </div>

               </div>
            </div>
            <!-- <div class="bttm-brdr"></div> -->
            <div class="col-12">
               <!-- <div class="graph-area">
                  <p class="person-name">Client Snapshot</p>
                  <img src='{{asset("assets/images/d-graph-img.jpg")}}' alt="" class="w-100">
               </div> -->
                {{-- <div class="graph-area">
                 <p class="person-name">To do list</p>
                  <img src='{{asset("assets/images/To-do list coming soon.png")}}' alt="" class="w-100">
               </div> --}}

               <!-- <div class=" to-do-list-content">

                  <p class="person-name">To do list</p>
                  <div class="card">
                     <div class="row px-3">
                           <div class="col-md-7 ">
                              <div class="sortdropdown-area">
                                    <div class="input-group">
                                       <input type="text" class="form-control box-shadow-none test_search_name" placeholder="Search test result" name="searchProductName" id="searchProductName" autocomplete="off">
                                       <div class="input-group-append ">
                                          <span class="input-group-text test_search" id="basic-addon2"><i class="fa fa-search"></i></span>
                                       </div>
                                    </div>
                              </div>
                           </div>
                           <div class="col-md-4 offset-md-1">

                              <button type="button" class="saveHelth cursor-pointer save-btn save-btn-bg confirm-bttn mb-20 w-100">Add to list</button>

                           </div>
                     </div>
                     <div class="row">
                        <div class="col-12">
                           <div class="dr-table Todolist-new-table" id="productTable">
                              <div class="table-responsive">
                                 <table class="table table-striped">
                                    <thead>
                                       <tr>
                                          <th>Note</th>
                                          <th class="">Due date </th>
                                          <th class=""></th>
                                          <th class=""></th>
                                       </tr>
                                    </thead>
                                       <tbody id="productAppend">
                                          <tr>

                                             <td class="">BAS due</td>
                                             <td class="">02/12/21</td>
                                             <td class="p-0">
                                                <ul class="px-2">
                                                   <li class="cursor-pointer  nolabelstyle nomarg">
                                                      <div class="delete-check-icon bgcheckbox mb-0">
                                                         <div class="rdio rdio-primary radio-inline">
                                                            <input id="connect_1" class="d-none" type="checkbox" name="check1" value="" checked="">
                                                            <label for="connect_1"></label>
                                                         </div>
                                                      </div>
                                                   </li>
                                                </ul>
                                             </td>
                                             <td class="align-middle float-right">
                                                <div class="dropdown three-dot-dropdown">
                                                   <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown" aria-expanded="false"><span></span></a>
                                                   <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset" wfd-invisible="true" x-placement="bottom-start"> <a class="dropdown-item cursor-pointer" id="editProduct" data-toggle="modal" data-target="#prescribed-products-modal">Edit </a> <a class="dropdown-item cursor-pointer removeProduct">Delete</a> </div>
                                                </div>
                                             </td>
                                          </tr>
                                          <tr>

                                             <td class="">Organise staff meeting </td>
                                             <td class="">---</td>
                                             <td class="p-0">
                                                <ul class="px-2">
                                                   <li class="cursor-pointer  nolabelstyle nomarg">
                                                         <div class="delete-check-icon bgcheckbox mb-0">
                                                            <div class="rdio rdio-primary radio-inline">
                                                               <input id="connect_1" class="d-none" type="checkbox" name="check1" value="" checked="">
                                                               <label for="connect_1"></label>
                                                            </div>
                                                         </div>
                                                   </li>
                                                </ul>
                                             </td>
                                             <td class="align-middle float-right">
                                                   <div class="dropdown three-dot-dropdown">
                                                      <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown" aria-expanded="false"><span></span></a>
                                                      <div class="dropdown-menu" wfd-invisible="true" x-placement="bottom-start"> <a class="dropdown-item cursor-pointer" id="edit" data-toggle="modal" data-target="#prescribed-products-modal">Edit </a> <a class="dropdown-item cursor-pointer removeProduct">Delete</a> </div>
                                                   </div>
                                             </td>
                                          </tr>
                                       </tbody>
                                 </table>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div> -->
            </div>
         </div>
         <div class="col-xl-4 padd30 ">
         <h2 class="sub-title mb-3" style="visibility: hidden;"> slider</h2>
               <div class="patient-dashboard-slider cdashslider">
                  <div id="carouselExampleControls" class="carousel slide d-flex call-action-slider" data-ride="carousel">
                     <ol class="carousel-indicators silderImageWith">
                        @foreach( $sliderMessagesDashbord as $key =>$photo)
                        <li data-target="#carouselExampleControls" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li>
                        @endforeach
                     </ol>
                     <div class="carousel-inner">

                        @foreach( $sliderMessagesDashbord as $photo)
                        <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                           <div class="text-center">
                              <img src='{{ $photo->slider_image }}' alt="" class="img-fluid sliderImage">
                           </div>

                           <div class="call-action text-center customscroll">
                              <div class="readmoreless-area">
                              @php
                              $string = strip_tags($photo->description);
                              $stringCut = substr($string, 0, 300);
                              $endPoint = strrpos($stringCut, ' ');
                              $showstring = $endPoint? substr($stringCut,0, $endPoint) : substr($stringCut, 0);

                              if (strlen(strip_tags($photo->description)) > 300) {
                                  $stringCut1 = substr($string,$endPoint);
                              }
                              @endphp


                              <div class="mCustomScrollbar">
                                 {{--  <p class="show-read-more hide">{{$photo->description}}</p>  --}}
                                 @if (strlen($photo->description) > 300)
                                 <p style="white-space: pre-wrap;" class="mb-0 textarea-para moretextup"> {{ $showstring }}</p>
                                 @else
                                 <p style="white-space: pre-wrap;" class="mb-0 textarea-para"> {{ $stringCut }}</p>
                                 @endif
                                 @if (strlen($photo->description) > 300)
                                     <p style="white-space: pre-wrap;" class="moretext textarea-para">{{ $string  }}</p>
                                     <a class="moreless-button" href="javascript:void(0)">See more</a>
                                 @endif

                              </div>
                              </div>
                           </div>
                        </div>
                        @endforeach
                     </div>
                  </div>
               </div>


         </div>
      </div>
   </div>
</div>
@endsection

@section('modals')




<!-- To Do List Modal -->
<div class="todo-list-modal">
   <div class="modal fade" id="todolist" 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-body">
               <div class="media plusicon-area mt-20">
                  <div class="img-width">
                     <img src='{{asset("assets/images/l-plus-icon.png")}}' class="align-self-center" alt="...">
                  </div>
                  <div class="media-body">
                     <h5 class="mt-0">Add to list</h5>
                  </div>
               </div>
               <div class="media delete-checkbox-area">
                  <div class="img-width">
                     <img src='{{asset("assets/images/feature-img-4.png")}}' class="align-self-center img-fluid" alt="...">
                  </div>
                  <div class="media-body">
                     <h5 class="mt-0">@Ltenny Bronx BAS due Friday <span class="d-block">4/3/19 05:25PM</span></h5>
                  </div>
                  <div class="delete-check-icon">
                     <ul class="mb-0">
                        <li>
                           <div class="rdio rdio-primary radio-inline"> <input id="radio1" type="checkbox" checked>
                              <label for="radio1"></label>
                           </div>
                        </li>
                        <li><a href="#"><img src='{{asset("assets/images/dustbin-img.png")}}' alt="" class="img-fluid"></a></li>
                     </ul>
                  </div>
               </div>
               <div class="media delete-checkbox-area">
                  <div class="img-width">
                     <img src='{{asset("assets/images/feature-img-2.png")}}' class="align-self-center img-fluid" alt="...">
                  </div>
                  <div class="media-body">
                     <h5 class="mt-0">Organise staff meeting for last Friday of the month <span class="d-block">4/3/19 05:25PM</span></h5>
                  </div>
                  <div class="delete-check-icon">
                     <ul class="mb-0">
                        <li>
                           <div class="rdio rdio-primary radio-inline"> <input id="radio2" type="checkbox">
                              <label for="radio2"></label>
                           </div>
                        </li>
                        <li><a href="#"><img src='{{asset("assets/images/dustbin-img.png")}}' alt="" class="img-fluid"></a></li>
                     </ul>
                  </div>
               </div>
               <div class="media delete-checkbox-area">
                  <div class="img-width">
                     <img src='{{asset("assets/images/feature-img-2.png")}}' class="align-self-center img-fluid" alt="...">
                  </div>
                  <div class="media-body">
                     <h5 class="mt-0">@KylaWiggs Buy notepads from Officeworks <span class="d-block">4/3/19 05:25PM</span></h5>
                  </div>
                  <div class="delete-check-icon">
                     <ul class="mb-0">
                        <li>
                           <div class="rdio rdio-primary radio-inline"> <input id="radio3" type="checkbox"><label for="radio3"></label>
                           </div>
                        </li>
                        <li><a href="#"><img src='{{asset("assets/images/dustbin-img.png")}}' alt="" class="img-fluid"></a></li>
                     </ul>
                  </div>
               </div>
               <div class="media delete-checkbox-area">
                  <div class="img-width">
                     <img src='{{asset("assets/images/feature-img-2.png")}}' class="align-self-center img-fluid" alt="...">
                  </div>
                  <div class="media-body">
                     <h5 class="mt-0">Call Real Estate Agent <span class="d-block">4/3/19 05:25PM</span> <span class="d-block">Completed 3/3/19 04.25PM</span></h5>
                  </div>
                  <div class="delete-check-icon">
                     <ul class="mb-0">
                        <li>
                           <div class="rdio rdio-primary radio-inline"> <input id="radio4" type="checkbox">
                              <label for="radio4"></label>
                           </div>
                        </li>
                        <li><a href="#"><img src='{{asset("assets/images/dustbin-img.png")}}' alt="" class="img-fluid"></a></li>
                     </ul>
                  </div>
               </div>
            </div>
            <div class="modal-footer">
               <a href="#" class="btn-green yellow-btn" data-dismiss="modal">Close</a>
            </div>
         </div>
      </div>
   </div>
</div>
<!-- To Do List Modal -->




<!-- Bulk Modal -->
<div class="client-follow-popup bulk-popup customscroll">
   <div class="modal fade" id="bulk-popup" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel13" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">

         <div class="modal-content">
            <div class="popup-marg">
               <div class="modal-header">
                  <h5 class="modal-title text-center" id="exampleModalLabel13">Bulk Messaging</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true"><img src='{{asset("assets/images/close-img.png")}}' alt="" class="img-fluid"></span>
                  </button>
               </div>
               <div class="modal-body p-0">
                  <div class="mCustomScrollbar">
                     <div class="comm-marg">
                        <div class="media whitecard marg30">
                           <div class="img-width">
                              <img src='{{asset("assets/images/client-follow-icon6.png")}}' class="align-self-center img-fluid" alt="...">
                           </div>
                           <div class="media-body">
                              <h4 class="mt-0">Text messages open rates are 78% higher than email so get creative and
                                 keep your clients engaged with your business.</h4>
                           </div>
                        </div>
                        <div class="select-filter-area">
                           <h3>To</h3>
                           <div class="row">
                              <div class="col-md-9 col-sm-9 calender-modal pr-xl-0">
                                 <div class="form-group marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                                    <select id="mounth1" class="form-control selectboxli">
                                       <option hidden>Select</option>
                                       <option>Entire database </option>
                                       <option>Women aged 25-45</option>
                                       <option>Clients who have back pain</option>
                                       <option>Clients who haven't visited in 6+ months</option>
                                       <option>Clients within 25km radius of 3798</option>
                                    </select>
                                 </div>
                              </div>
                              <div class="col-md-3 col-sm-3">
                                 <div class="btn-filter">
                                    <button>Filter</button>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="select-filter-area campaigntext">
                           <h3 style="padding-left: -1px;">Campaign name</h3>
                           <div class="row">
                              <div class="col-md-12">
                                 <div class="form-group">
                                    <input type="text" class="form-control popup-text" placeholder="Campaign name">
                                 </div>
                              </div>
                           </div>
                        </div>

                        <!-- <div class="row">
                           <div class="col-md-6">
                              <input type="text" readonly class="myText form-control cursor-pointer" value="<first name>">
                           </div>
                           <div class="col-md-6">
                              <input type="text" readonly class="myText form-control cursor-pointer" value="<last name>">
                           </div>
                        </div>
                        <br>
                        <div class="row">
                           <div class="col-md-6">
                              <input type="text" readonly class="myText form-control cursor-pointer" value="<your name>">
                           </div>
                           <div class="col-md-6">
                              <input type="text" readonly class="myText form-control cursor-pointer" value="<referred by>">
                           </div>
                        </div> -->
                        <br>

                        <h3>Message</h3>
                        <div class="whitecard">
                           <textarea name="missed_msg" id="missed_msg" class="sms-box" cols="40" rows="4" placeholder="Hi <first name> , it is been a while since we saw you last. Lets keep up with your wellness goals. Follow this link to rebook ma.ly/health-first-clinic Regards, <your name>" required>
Hi &#60;clients name&#62;, a new massage therapist has joined our team and we’re
offering initial consultations for just $60. Follow this link if you’d like to book
&#60;practice booking link&#62; &#60;your name&#62;
                                 </textarea>
                           <span class="greytxt mb-0"><span class="char-count"> {{countString($letters ?? "test")}} </span></span>
                           <span class="right-round-icon"><img src='{{asset("assets/images/information-icon-sms.png")}}' alt="" class="img-fluid info-icon  credit-btn-geo cursor-pointer"></span>
                           <div class="credit-btn-bttm-geo" style="display: none;">
                              <div class="media">
                                 <img src='{{asset("assets/images/round-n-icon.png")}}' class="align-self-start mr-2 mCS_img_loaded" alt="...">
                                 <div class="media-body">
                                    <h5 class="mt-0 text-left">
                                       1 credit = 160 characters. Messages exceeding the character count will be reduced to 153 characters per additional sms sent.
                                    </h5>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <!-- <div class="whitecard">
                           <div class="msg-title">
                              <p class="mb-0">
                                 Hi &#60;clients name&#62;, a new massage therapist has joined our team and we’re
                                 offering initial consultations for just $60. Follow this link if you’d like to book
                                 &#60;practice booking link&#62; &#60;your name&#62;
                              </p>
                           </div>
                           <p class="greytxt mb-0">199/320 = 1 Credits per msg <span class="right-round-icon"><img src='{{asset("assets/images/information-icon-sms.png")}}' alt="" class="img-fluid info-icon"></span></p>
                            <div class="share-img text-center">
                                    <input type="file" id="file3" name="image" accept="image/*" style="display:none" />
                                    <img src='{{asset("assets/images/share-icon.png")}}' id="upfile3" style="cursor:pointer" />
                                 </div>
                            <div class="share-img img-camera text-center d-lg-none d-block">
                                    <input type="file" accept="image/*" capture="camera" />
                                    <img src='{{asset("assets/images/icon-camera.png")}}' style="cursor:pointer" />
                                 </div>
                        </div> -->
                        <div class="text-center send-msg-btn mt-20 mb-20">
                           <a href="#" class="yellow-btn mt-0 save-btn save-btn-bg">Send 122 messages</a>
                        </div>
                        <div class="select-two-dropdown drop-select2 mb-20 marg-t-30">
                           <h3>Marketing suggestions</h3>
                           <div class="row">
                              <div class="col-md-12">
                                 <!-- <select id="multiple" class="js-states form-control" multiple>
                                          <option>New Sevice</option>
                                          <option>Holiday Hours</option>
                                          <option>Survey</option>
                                          <option>Reviews</option>
                                          <option>Special Offers</option>
                                          <option>Event</option>
                                       </select> -->
                                 <div class="whitecard">
                                    <p class="mb-4">Stuck for ideas? We’ve got you. See our text marketing
                                       suggestions here.</p>
                                    <div class="text-center see-more-txt idea-btn">
                                       <a href="#" class="yellow-btn mt-0 save-btn">Give me ideas</a>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <h3>Sent messages</h3>
                        <div class="popup-titlecheckbox sent-msg-card">
                           <div class="whitecard">
                              <div class="row align-items-center">
                                 <div class="col-md-8 col-sm-8 pr-xl-0">
                                    <h5 class="mt-0">10th Birthday Celebration </h5>
                                    <p class="mb-0"><span class="blue-txt">Sent 22/12/19</span></p>
                                 </div>
                                 <div class="col-md-4 col-sm-4 see-more-txt pl-xl-0">
                                    <a href="#" class="yellow-btn mt-0 save-btn">See more</a>
                                 </div>
                              </div>
                           </div>
                           <div class="whitecard">
                              <div class="row align-items-center">
                                 <div class="col-md-8 col-sm-8 pr-xl-0">
                                    <h5 class="mt-0">20% Off Sale</h5>
                                    <p class="mb-0"><span class="blue-txt">Sent 20/11/19</span></p>
                                 </div>
                                 <div class="col-md-4 col-sm-4 see-more-txt pl-xl-0">
                                    <a href="#" class="yellow-btn mt-0 save-btn">See more</a>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="modal-footer">
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<!-- Bulk Modal -->

<!-- Multi  Modal Start -->
<div class="client-follow-popup customscroll mystep-popup width-inherit messg-popup">
   <div class="modal fade" id="congrats-Modal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true"><img src='{{asset("assets/images/close-img.png")}}' alt="" class="img-fluid"></span>
               </button>
            </div>
            <div class="popup-marg">
               <div class="modal-body p-0">
                  <div class="comm-marg">
                     <div class="whitecard marg30 text-center ">
                        <h2 class="mb-2 font-15 text-blue">Congratulations!</h2>
                        <div class="appoin-logo">
                           <img src='{{asset("assets/images/hand-img.png")}}' alt="" class="img-fluid">
                        </div>
                        <p>Your business profile is now complete. We’ll notify you when it’s live. Next, let’s set up
                           your practioner profile.
                           From here, you have the option to show your availability and allow clients to either
                           request an appointment or book directly online.</p>
                        <div class="text-center mt-3">
                           <a href="#" class="green-btn-radius">Let’s go</a>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<!-- Multi Modal End-->

<!-- BProfile  Modal Start -->
<div class="client-follow-popup customscroll mystep-popup width-inherit messg-popup">
   <div class="modal fade" id="Bcongrats-Modal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true"><img src='{{asset("assets/images/close-img.png")}}' alt="" class="img-fluid"></span>
               </button>
            </div>
            <div class="popup-marg">
               <div class="modal-body p-0">
                  <div class="comm-marg">
                     <div class="whitecard marg30 text-center ">
                        <h2 class="mb-2 font-15 text-blue">Congratulations!</h2>
                        <div class="appoin-logo">
                           <img src='{{asset("assets/images/hand-img.png")}}' alt="" class="img-fluid">
                        </div>
                        <p>Your business profile is now complete. We’ll notify you when it’s live.</p>
                        <!-- <div class="text-center mt-3">
                                 <a href="#" class="green-btn-radius">Let’s go</a>
                              </div> -->
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<!-- BProfile Modal End-->

@endsection

@section('css')
<style>
   .show-read-more .more-text {
      display: none;
   }

   .read-more {
      color: #45747A !important;
   }

   .sliderImage {
     width: 95%;
      /* height: 240px; */
      height: 293px;
      object-fit: contain;
      /* width: auto;
       box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
      min-height: 338px;
      max-height: 338px;
      height: 338px;
      object-fit: contain;
      overflow: hidden;
      max-width: 338px;
      width: 338px;
      vertical-align: middle;
      display: table; */
   }

   .silderImageWith {
      bottom: auto !important;
      /* top: 260px; */
      top: 320px;
   }

   .appointment-date {
      color: #000000;
   }
   .appointment-date:hover {
      color: #68afb5;
   }
</style>
@endsection
@section('jss')

<script type="text/javascript">
   /** upcoming appointment send sms */
   function showSmsPopupdashboard(data, clientname, clientfname){
       // $(".sendsmsclientname").css('display', 'none');
       $(".sendsmsclientname").val(clientname);
       if (clientfname) {
           $(".smsclientname").text('SMS ' + clientfname);
       }
       var clientID = data.split(';');
       var client = clientID[0];
       $("#sendsmsclientid").val(client);
       $("#smsalisonmessage").modal('show');
   }
   $(document).on('click', '#sendsmstoclient', function() {
       var clientEmail = $(this).data('email');

       $("#sendclientemail").attr('onClick', 'window.open("mailto:'+ clientEmail +'");');
       $("#emailorsmsalisonmessage").modal('show');

       $("#sendclientsms").attr('onClick', "showSmsPopupdashboard('"+$(this).data('data')+"', '"+$(this).data('clientname')+"', '"+$(this).data('clientfname')+"')");
   });

   /** upcoming appointment make call */
   $(document).on('click', '#clientcall', function() {
      $(".clientcallname").text('Call ' + $(this).data('clientname'));
      $("#clientcallphone").text($(this).data('clientphone'));
      $("#clientcallphonework").text($(this).data('clientphonework'));
      $("#clientcallphonehome").text($(this).data('clientphonehome'));


      $('#telclientcallphone').parent().parent().css('display', 'block');
      $('#telclientcallphonework').parent().parent().css('display', 'block');
      $('#telclientcallphonehome').parent().parent().css('display', 'block');


       if ($(this).data('clientphone') == '-' || $(this).data('clientphone') == '') {
         $('#telclientcallphone').parent().parent().css('display', 'none');
      } else {
         $('#telclientcallphone').attr('href', 'tel:' + $(this).data('clientphone'));
      }
      if ($(this).data('clientphonework') == '-' || $(this).data('clientphonework') == '') {
         $('#telclientcallphonework').parent().parent().css('display', 'none');
      } else {
         $('#telclientcallphonework').attr('href', 'tel:' + $(this).data('clientphonework'));
      }
      if ($(this).data('clientphonehome') == '-' || $(this).data('clientphonehome') == '') {
         $('#telclientcallphonehome').parent().parent().css('display', 'none');
      } else {
         $('#telclientcallphonehome').attr('href', 'tel:' + $(this).data('clientphonehome'));
      }
      //if($(this).data('clientphonehome') != '-' && $(this).data('clientphonework') != '-' && $(this).data('clientphone') != '-'){
      $("#callupcomingapptModal").modal('show');
      //}
   });
   //$(function(event){
   $(function(event) {
      /** clear all form input bs modal */
      $('#overdue-appointment-modal,#referalModal,#birthdayModal,#missedModal,#newclientModal').on('hidden.bs.modal', function(event) {
         $(this)
            .find("input:select")
            .val('')
            .end()
            .find("input[type=checkbox], input[type=radio]")
            .prop("checked", "")
            .end();
      });
      /** Select all checkbox for sms  */
      $(".btn-select-all").on('click', function(event) {
         $(this).parents('form').find(":checkbox").prop('checked', true);
         if ($(this).parents('form')[0].checkValidity()) {
            $(this).parents('form').submit();
         } else {
            $(this).parents('form')[0].reportValidity();
         }
      });

      /**Delete overdue appointment  */
      $(".btn-invisible-overdue-appointment").on('click', function(event) {
         event.preventDefault();
         Swal.fire({
            icon: "error",
            title: 'Are you sure?',
            text: "This cannot be undone.",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
         }).then((result) => {
            if (result.value) {
               var _this = $(this);
               var url = "{{route('practitioner.dashboard.invisible.appointment')}}";
               var type = "POST"
               var appointment_id = $(this).data('appointment-id');
               var formData = new FormData();
               formData.append('id', appointment_id);
               $.ajax({
                  url: url,
                  data: formData,
                  dataType: 'JSON',
                  type: type,
                  contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
                  processData: false, // NEEDED, DON'T OMIT THIS
                  // ... Other options like success and etc
               }).done(function(response) {
                  if (response.status == "success") {
                     _this.parents('.whitecard').remove();
                  }
               });
            } else {
               return false;
            }
         }).catch(swal.noop);
      });


      $(".btn-invisible-overdue-appointment-new").on('click', function(event) {
         event.preventDefault();
         Swal.fire({
            icon: "error",
            title: 'Are you sure?',
            text: "This cannot be undone.",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
         }).then((result) => {
            if (result.value) {
               var _this = $(this);
               var url = "{{route('practitioner.dashboard.invisible.appointmentoverdue')}}";
               var type = "POST"
               var appointment_id = $(this).data('appointment-id');
               var formData = new FormData();
               formData.append('id', appointment_id);
               $.ajax({
                  url: url,
                  data: formData,
                  dataType: 'JSON',
                  type: type,
                  contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
                  processData: false, // NEEDED, DON'T OMIT THIS
                  // ... Other options like success and etc
               }).done(function(response) {
                  if (response.status == "success") {
                     _this.parents('.whitecard').remove();
                  }
               });
            } else {
               return false;
            }
         }).catch(swal.noop);
      });
      /**Delete birthday reminder  */
      $(".btn-invisible-birthday").on('click', function(event) {
         event.preventDefault();
         Swal.fire({
            icon: "error",
            title: 'Are you sure?',
            text: "This cannot be undone.",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
         }).then((result) => {
            if (result.value) {
               var _this = $(this);
               var url = "{{route('practitioner.dashboard.delete.reminder')}}";
               var type = "POST"
               var id = $(this).data('client-id');
               var formData = new FormData();
               formData.append('id', id);
               $.ajax({
                  url: url,
                  data: formData,
                  dataType: 'JSON',
                  type: type,
                  contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
                  processData: false, // NEEDED, DON'T OMIT THIS
                  // ... Other options like success and etc
               }).done(function(response) {
                  if (response.status == "success") {
                     _this.parents('.whitecard').remove();
                  }
               });
            } else {
               return false;
            }
         }).catch(swal.noop);


      });
      /**Delete new client reminder  */
      $(".btn-invisible-new-client").on('click', function(event) {
         event.preventDefault();
         Swal.fire({
            icon: "error",
            title: 'Are you sure?',
            text: "This cannot be undone.",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
         }).then((result) => {
            if (result.value) {
               var _this = $(this);
               var url = "{{route('practitioner.dashboard.delete.client.reminder')}}";
               var type = "POST"
               var id = $(this).data('client-id');
               var formData = new FormData();
               formData.append('id', id);
               $.ajax({
                  url: url,
                  data: formData,
                  dataType: 'JSON',
                  type: type,
                  contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
                  processData: false, // NEEDED, DON'T OMIT THIS
                  // ... Other options like success and etc
               }).done(function(response) {
                  if (response.status == "success") {
                     _this.parents('.whitecard').remove();
                  }
               });
            } else {
               return false;
            }
         }).catch(swal.noop);

      });
      /**Delete referral client reminder */
      $(".btn-invisible-referred-client").on('click', function(event) {
         event.preventDefault();
         Swal.fire({
            icon: "error",
            title: 'Are you sure?',
            text: "This cannot be undone.",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
         }).then((result) => {
            if (result.value) {
               var _this = $(this);
               var url = "{{route('practitioner.dashboard.delete.referral.client.reminder')}}";
               var type = "POST"
               var id = $(this).data('client-id');
               var formData = new FormData();
               formData.append('id', id);
               $.ajax({
                  url: url,
                  data: formData,
                  dataType: 'JSON',
                  type: type,
                  contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
                  processData: false, // NEEDED, DON'T OMIT THIS
                  // ... Other options like success and etc
               }).done(function(response) {
                  if (response.status == "success") {
                     _this.parents('.whitecard').remove();
                  }
               });
            } else {
               return false;
            }
         }).catch(swal.noop);

      });

      /** SMS character count js */
      $('.sms-box').keyup(
         updateCount
      );
      $('.sms-box').keydown(
         updateCount
      );

      function updateCount() {
         var cs = $(this).val().length;
         // var credit =  Math.ceil(cs/ 160);
         // $(this).next('.char-count').text(cs + "/160 = "+ credit +" Credits");
         var credit = countString(cs);
         $(this).next('.greytxt').find('.char-count').text(credit);

      }
   });
</script>
<script>
   $(document).ready(function() {

         /** Show more / Show less */
         $(document).on('click', '.moreless-button', function() {
            $('.moretext').slideToggle();
            if ($(this).text() == "See more") {
               $(this).closest('.readmoreless-area').find('.moretextup').addClass('d-none');
               $(this).text("See less")
            } else {
               $(this).closest('.readmoreless-area').find('.moretextup').removeClass('d-none');
               $(this).text("See more")
            }
         });

         $(document).on('click', '.carousel-indicators', function() {
            $('.moretextup').removeClass('d-none');
            $('.moreless-button').text("See more");
            $('.moretext').slideUp();

         });
   });

   $(".myText").click(function() {
      $(this).select();
   });

   /*====== auto Expand ======*/
   $(document)
      .one('focus.autoExpanda', 'textarea.autoExpanda', function() {
         var savedValue = this.value;
         this.value = '';
         this.baseScrollHeight = this.scrollHeight;
         this.value = savedValue;
      })
      .on('input.autoExpanda', 'textarea.autoExpanda', function() {
         var minRows = this.getAttribute('data-min-rows') | 0,
            rows;
         this.rows = minRows;
         rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
         this.rows = minRows + rows;
      });

      $(document).on('click', '#app_image_click', function(e) {
         const encoder = new TextEncoder();
         const data = encoder.encode(this.getAttribute("data-id"));
         const clientId = btoa(String.fromCharCode.apply(null, data));
         var baseUrl = "{{route('home')}}";
         var routeUrl = baseUrl+"/practitioner/clientcard?client_id="+clientId;
         window.location.href = routeUrl;
      })
</script>
@endsection