@extends('front.inner-layout.app')
@section('content')
<style>
    .select2-container--open .select2-dropdown--below{
        padding: 0 !important;
        overflow: hidden;
    }
    .select2-container .select2-results__option{
        padding:6px 10px !important;
    }
    .select2-container .select2-results__option:hover{
       background-color: #68afb5 !important;
        color: white !important;
    }
</style>



<link href="{{ asset('assets/css/colorPick.css') }}" rel='stylesheet' />
<link href="{{ asset('assets/css/colorPick.dark.theme.css') }}" rel='stylesheet' />

<div class="page-content dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-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> Services
            </h1>
        </div>
        @include('front.inner-layout.header')
    </div>
    <div class="brdr-bttm"></div>

    <div class="service-table-top">
        <div class="row">
            <div class="col-5">
                <!-- <ul class="list-inline icons-listing">
                    <li class="list-inline-item"><a class="" href="#" data-toggle="modal" data-target=".EditServiceModal" ><img src='{{asset("assets/images/edit-icon-green.png")}}' alt="" class="img-fluid"></a></li>
                    <li class="list-inline-item"><a href="#"><img src='{{asset("assets/images/trash-icon-green.svg")}}' alt="" class="img-fluid"></a></li>
                    <li class="list-inline-item"><a href="#"><img src='' alt="" class="img-fluid"></a></li>
                    

                </ul> -->
            </div>
            <div class="col-7 text-right">
                <a href="#AddServiceModal" class="btn btn-fill mb-3" data-toggle="modal"><i class="fa fa-plus" aria-hidden="true"></i> Add Service</a>
            </div>
        </div>
    </div>

    <div class="service-new-table for-service-table" id="service-new-table" >
        <div class="table-responsive" style="    ">
            <table class="table table-striped">
                <thead class="head-brdr">
                    <tr>
                        <th style="width:5%"></th>
                        <th class="align-middle">Appointment type</th>
                        <th class="align-middle">Cost</th>
                        {{-- <th class="align-middle">GST </th> --}}
                        {{-- <th class="align-middle">Code</th> --}}
                        <th class="align-middle">Duration</th>
                         @php $serviceProviderCount = $user->serviceProvider()->get(); @endphp

                        @if($serviceProviderDisplayCount!=0)
                        <th class="align-middle">Service Provider</th>
                        @endif

                        @if(count($serviceLocation)>=2)
                        <th class="align-middle">Location</th>
                        @endif
                       
                 

                        <th class="align-middle tooltip-new" >Booking online
                            <span class="tooltip-info-icon">
                                    
                                <img src="{{ asset('assets/images/information-icon-new.svg') }}" alt="" class="img-fluid info-icon mCS_img_loaded ">
                          </span>
                          <div class="tooltiptext" wfd-invisible="true">
                                <div class="media">
                                   <img src="{{ asset('assets/images/information-icon-new.svg') }}" alt="" class="img-fluid info-icon mr-2 mCS_img_loaded">
                                   <div class="media-body">Clients can book their appointments online via the My Appointments platform and/or your website.</div>
                                </div>
                          </div>

                        </th>

                        <th class="align-middle">SMS reminders</th>

                        <th class="align-middle text-center">Colour code</th>
                            <div class="tooltip-new d-none">Overdue

                                <!-- <span class="send-client-btn-geo overdue_btn_service cursor-pointer">
                                                <img src='{{asset("assets/images/information-icon-new.svg")}}' alt="" class="img-fluid info-icon">
                                             </span> -->
                                <span class="tooltip-info-icon send-client-btn-geo overdue_btn_service cursor-pointer">
                                    <img src='{{asset("assets/images/information-icon-new.svg")}}' alt="" class="img-fluid info-icon">
                                </span>
                                <div class="tooltiptext">
                                    <div class="media">
                                        <img src='{{asset("assets/images/information-icon-new.svg")}}' alt="" class="img-fluid info-icon mr-2">
                                        <div class="media-body">Adds clients to your 'overdue appointments' list when
                                            they have not visited for an appointment in the specified time.</div>
                                    </div>
                                </div>
                            </div>
                        </th>
                        <th class="d-none"></th>
                    </tr>
                </thead>
                <tbody id="tablecontents">
                    @foreach($appointmentTypes as $val)
                    <tr class="row1" data-id="{{ $val->id }}">
                        <!-- <td class="checkbox-col">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="customCheck1">
                                <label class="custom-control-label" for="customCheck1"></label>
                            </div>
                        </td> -->
                        <td class="tooltip-new portlet-header">
                            <div class="text-muted-drageable tooltip-info-icon "></div>

                                 <div class="tooltiptext" wfd-invisible="true"  style="left:60px;min-width: 138px;">
                                       <div class="media">
                                          <div class="media-body">Drag to re-order </div>
                                       </div>
                                 </div>
                                 
                        </td>
                        <td>
                        {{--  @if($val->appt_type !="") 
                          @if($val->appt_type =="Telehealth" || $val->appt_type =="Mobile") 
                            {{ $val->appt_type.' - ' }} 
                          @endif
                        @endif   --}}
                        {{$val->appointment_type}}</td>
                        <td>${{$val->fee}}</td>
                        {{-- <td>@if($val->is_gst == 'on') Yes @else No @endif</td> --}}
                        {{-- <td>{{$val->code}}</td> --}}
                        <td>{{$val->duration_time}}</td>

                        @if($serviceProviderDisplayCount!=0)
                        <td>
                            <div class="dropdown service-dropdown">
                                @foreach($val->provider_array as $key=>$provider)
                                @if($key == 0)
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{$provider}} @if(count($val->provider_array) > 1) + {{count($val->provider_array) - 1 }} @endif</a>
                                @endif
                                @endforeach
                                @if(count($val->provider_array) > 1)
                                <div class="dropdown-menu">
                                    @foreach($val->provider_array as $key1=>$provider)
                                    @if($key1 >=1)
                                    <a class="dropdown-item" href="#">{{$provider}}</a>
                                    @endif
                                    @endforeach
                                </div>
                                @endif
                            </div>
                        </td>
                        @endif


                         @if(count($serviceLocation)>=2)
                        <td>
                            <div class="dropdown service-dropdown">
                                @foreach($val->location_array as $key=>$location)
                                @if($key == 0)
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{getLocationAddress($location)}} @if(count($val->location_array) > 1) + {{count($val->location_array) - 1 }} @endif</a>
                                @endif
                                @endforeach
                                @if(count($val->location_array) > 1)
                                <div class="dropdown-menu">
                                    @foreach($val->location_array as $key1=>$location)
                                    @if($key1 >= 1)
                                    <a class="dropdown-item" href="#">{{getLocationAddress($location)}}</a>
                                    @endif
                                    @endforeach
                                </div>
                                @endif
                            </div>
                        </td>
                        @endif

                        <td>
                            {{ $val->booking_online ==0 ? 'No':'Yes' }}
                        </td>

                        <td>
                            {{ $val->sms_reminders ==0 ? 'No':'Yes' }}
                        </td>

                        <!-- <td> @foreach($val->location_array as $key=>$location)
                                @if($key == 0)
                                {{$location}}  @if(count($val->location_array) > 1) + {{count($val->location_array) - 1 }} @endif
                                @endif</td>
                            @endforeach -->
                        <td class="custom-colordrop ">
                            <div class="color-code-circle" style="background-color: {{$val->color_code}} ; border : 1px solid {{$val->color_code}}">

                            </div>
                            <!-- <div class="color_picker" data-value=""></div>
                             <input class="append_color" type="hidden" value="" > -->
                        </td>
                        <td class="d-none">3 Months</td>
                        <!-- <td class="d-none">1</td> -->
                        <td class="align-middle ">
                            <div class="dropdown three-dot-dropdown">
                                <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a>
                                <div class="dropdown-menu">
                                    <a data-id="{{$val->id}}" class="dropdown-item cursor-pointer editService">Edit</a>
                                    <a data-id="{{$val->id}}" class="dropdown-item cursor-pointer remove-service" href="#">Delete</a>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @endforeach


                </tbody>
            </table>
        </div>
    </div>
    <br>
    <div class="row text-right position-relative">
        @if($serviceStep == 0 && count($appointmentTypes) >=1)
            <button id="redirectToSetupWizard" class="btn btn-unfill mb-3">Next step</button>  
        @endif
    </div>

    <!-- AddServiceModal Modal Start --->
    <div class="client-follow-popup login-modal videoconsultationmodal customscroll remindersModal calenderinterval-modal customscroll clientabpopup businessdetails" id="myclienthide">
        <div class="modal fade" id="AddServiceModal" tabindex="-1" role="dialog">
            <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">Add Service</h5>
                            <button type="button" class="close refresh" 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>
                        <form id="addService" action="{{route('practitioner.settings.addUpdte')}}" method="POST">
                            <div class="modal-body p-0">
                                <div class="mCustomScrollbar mCSBcrollbar  ">
                                    <div class="boxwhite mt-30">
                                        <div class="test-results-area labeltop mt-3">
                                            <div class="label-input">
                                                <div class="row">
                                                    <div class="col-lg-5 col-md-6">
                                                        <label>Appointment type</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6">
                                                        <div class="form-group brdrfull">

                                                            <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" style="width:100%"  name="appt_type" id="appt_type">
                                                                   <option value="In-person">In-person</option>
                                                                   <option value="Telehealth">Telehealth</option>
                                                                   <option value="Mobile">Phone consultation</option>

                                                                   <option value="Mobile">Mobile Visit</option>
                                                                </select>
                                                             </div>
                                    
                                                            
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            {{--  <div class="label-input">
                                                <div class="row">
                                                    <div class="col-lg-5 col-md-6">
                                                        <label>Service name</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6">
                                                        <div class="form-group brdrfull">
                                                            <input type="hidden" class="form-control" name="id" placeholder="Type">
                                                          
                                                            <input type="text" required class="form-control appointment_type_service" name="appointment_type" placeholder="E.g Initial Consultation">
                                               
                                                        </div>
                           
                                                    </div>
                                                </div>
                                            </div>  --}}

                                            <div class="label-input">
                                                <div class="row">
                                                    <div class="col-lg-5 col-md-6">
                                                        <label>Service name</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6">
                                                        <div class="form-group brdrfull">
                                                            <input type="hidden" class="form-control" name="id" placeholder="Type"/>
                                                            <span class="dollar-icon service-name-pre" style="left:7px !important;font-size:13px;margin-top: 3px;">In-person -</span>
                                                            <input type="text" required class="form-control w-100 appointment_type" name="appointment_type" style="padding-left: 85px !important" placeholder="E.g Initial Consultation">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="label-input">
                                                <div class="row">
                                                    <div class="col-lg-5 col-md-6">
                                                        <label>Fee</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6">
                                                        <div class="form-group brdrfull">
                                                            <span class="dollar-icon" style="left:7px !important">$</span>
                                                            <input type="text" style="padding-left: 18px !important" required class="numeric-dot-only form-control w-100" name="fee" placeholder="Enter service fee including GST if applicable">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="label-input">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <label>GST Inc</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="form-group brdrfull">
                                                            <div class="row">
                                                                <div class="col-auto pr-0">
                                                                    <div class="age-title">
                                                                        <input type="radio" name="is_gst" value="off">
                                                                        <input type="radio" checked="true" id="addgst-yes" name="is_gst" value="on">
                                                                        <label for="addgst-yes">Yes</label>
                                                                    </div>
                                                                </div>
                                                                <div class="col-auto">
                                                                    <div class="age-title">
                                                                        <input type="radio" id="addgst-no" value="off" name="is_gst">
                                                                        <label for="addgst-no">No</label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="label-input">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <label>Code</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="form-group brdrfull">
                                                            <input type="text" class="form-control" name="code" placeholder="HICAPS code (if applicable)">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="label-input">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <label>Duration</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="row" id="timeError">
                                                            <div class="col-md-6">
                                                                <div class="row">
                                                                    <div class="col-auto pr-0">
                                                                        <div class="form-group brdrfull selectdrop-textbox">
                                                                            <input type="text" maxlength="2" required name="hours" id="hours" value="00" class="form-control select-80 select-text-center numeric-only" placeholder="00">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-auto pl-lg-2">
                                                                        <span class="hrs-label">Hours</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="row">
                                                                    <div class="col-auto pr-0">
                                                                        <div class="form-group brdrfull selectdrop-textbox">
                                                                            <input type="text" id="minutes" name="minutes" value="00"  maxlength="2" class="form-control select-80 select-text-center numeric-only" placeholder="00">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-auto pl-lg-2">
                                                                        <span class="hrs-label">Mins</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <span style="font-size: 100%;" class="invalid-feedback d-block"></span>

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

                                            {{--  @if($serviceProvider!=0)  --}}
                                            <div class="label-input {{$serviceProviderDisplayCount!=0 ? '':'hide'}}">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <label>Service Provider</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="form-group brdrfull no-bttm-full select2-multiple-autoselect">
                                                            <select required class="form-control text-capitalize" id="service-popup-service-provider" name="service_provider[]" multiple="multiple">
                                                                @php $serviceProvider = $user->serviceProvider()->get(); @endphp
                                                                <option {{$serviceProviderDisplayCount!=0 ? '':'selected'}}  value="{{$user->id}}"> {{$user->full_name}}
                                                                    @foreach($serviceProvider as $provider)
                                                                <option value="{{$provider->id}}"> {{$provider->full_name}}
                                                                </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            {{--  @endif  --}}

                                            {{--  @if(count($serviceLocation)>1)  --}}
           
                                            <div class="label-input {{count($serviceLocation)>=2 ? '':'hide'}}">
                                                <div class="row">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <label>Location </label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="form-group brdrfull no-bttm-full select2-multiple-autoselect">
                                                            <select required class="form-control text-capitalize" id="service-popup-location" name="location[]" multiple="multiple">
                                                                @foreach ($practitionerLocation as $location)
                                                                <option  {{count($serviceLocation)>=2 ? '':'selected'}} value="{{$location->id}}"> {{$location->address}}
                                                                </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            {{--  @endif  --}}

                                            <div class="label-input">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <label class="tooltip-new">Allow clients to book online 
                                                            <span class="tooltip-info-icon">
                                                               
                                                                  <img src="{{ asset('assets/images/information-icon-new.svg') }}" alt="" class="img-fluid info-icon mCS_img_loaded mt-1">
                                                            </span>
                                                            <div class="tooltiptext" wfd-invisible="true" style="top: -88px !important;left: 68px !important;">
                                                                  <div class="media">
                                                                     <img src="{{ asset('assets/images/information-icon-new.svg') }}" alt="" class="img-fluid info-icon mr-2 mCS_img_loaded ">
                                                                     <div class="media-body">Allow clients to book their appointments online via the My Appointments platform and/or your website.</div>
                                                                  </div>
                                                            </div>
                                                       </label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="form-group brdrfull">
                                                            <div class="row">
                                                                <div class="col-auto pr-0">
                                                                    <div class="age-title">
                                                                        <input type="radio" name="booking_online" value="0">
                                                                        <input type="radio" checked="true" id="booking-online-yes" name="booking_online" value="1">
                                                                        <label for="booking-online-yes">Yes</label>
                                                                    </div>
                                                                </div>
                                                                <div class="col-auto">
                                                                    <div class="age-title">
                                                                        <input type="radio" id="booking-online-no" value="0" name="booking_online">
                                                                        <label for="booking-online-no">No</label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="label-input">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <label class="tooltip-new">Send appt reminders
                                                            <span class="tooltip-info-icon">
                                                               
                                                                  <img src="{{ asset('assets/images/information-icon-new.svg') }}" alt="" class="img-fluid info-icon mCS_img_loaded ">
                                                            </span>
                                                            <div class="tooltiptext" wfd-invisible="true" style="top: -88px !important;left: 68px !important;">
                                                                  <div class="media">
                                                                     <img src="{{ asset('assets/images/information-icon-new.svg') }}" alt="" class="img-fluid info-icon mr-2 mCS_img_loaded ">
                                                                     <div class="media-body">Reminders can be sent via SMS and/or email and can be customised via your settings</div>
                                                                  </div>
                                                            </div>
                                                       </label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="form-group brdrfull">
                                                            <div class="row">
                                                                <div class="col-auto pr-0">
                                                                    <div class="age-title">
                                                                        <input type="radio" name="sms_reminders" value="0">
                                                                        <input type="radio" checked="true" id="sms-reminders-yes" name="sms_reminders" value="1">
                                                                        <label for="sms-reminders-yes">Yes</label>
                                                                    </div>
                                                                </div>
                                                                <div class="col-auto">
                                                                    <div class="age-title">
                                                                        <input type="radio" id="sms-reminders-no" value="0" name="sms_reminders">
                                                                        <label for="sms-reminders-no">No</label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="label-input">
                                                <div class="row justify-content-center">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <label>Colour Code</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="form-group brdrfull custom-colordrop">
                                                            <div class="color_picker" data-value="#f8de74" style="background-color:#f8de74 !important; border: 1px solid #cab45d;">
                                                            </div>
                                                            <input class="append_color" type="hidden" name="color_code">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- <div class="label-input">
                                                <div class="row">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <div class="tooltip-new">
                                                            <label>Overdue</label>
                                                            <span class="tooltip-info-icon">
                                                                <img src='{{asset("assets/images/information-icon-new.svg")}}' alt="" class="img-fluid info-icon">
                                                            </span>
                                                            <div class="tooltiptext">
                                                                <div class="media">
                                                                    <img src='{{asset("assets/images/information-icon-new.svg")}}' alt="" class="img-fluid info-icon mr-2">
                                                                    <div class="media-body">Adds clients to your 'overdue appointments' list when
                                                                        they have not visited for an appointment in the specified time.</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="row">
                                                            <div class="col-auto">
                                                                <div class="form-group brdrfull selectdrop-textbox">
                                                                    <select class="form-control small-select" name="reminder">
                                                                        @foreach($optionList as $option)
                                                                        <option value="{{$option}}"> {{$option}}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-auto pl-0">
                                                                <div class="form-group brdrfull selectdrop-textbox">
                                                                    <select class="form-control month-text select-80" name="reminder_in">
                                                                        <option value="month" selected=""> months</option>
                                                                        <option value="week"> weeks</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div> -->
                                            <div class="label-input" style="display: none;">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <div class="tooltip-new">
                                                            <label>Max clients</label>
                                                            <span class="tooltip-info-icon">
                                                                <img src='{{asset("assets/images/information-icon-new.svg")}}' alt="" class="img-fluid info-icon">
                                                            </span>
                                                            <div class="tooltiptext">
                                                                <div class="media">
                                                                    <img src='{{asset("assets/images/information-icon-new.svg")}}' alt="" class="img-fluid info-icon mr-2">
                                                                    <div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="form-group brdrfull selectdrop-textbox">
                                                            <select class="form-control small-select">
                                                                <option value="1" selected=""> 1</option>
                                                                <option value="2"> 2</option>
                                                                <option value="3"> 3</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <div class="text-center">
                                    <button type="submit" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Update and
                                        Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- AddServiceModal Modal End -->


    <!-- EditServiceModal Modal Start --->

    <div class=" client-follow-popup login-modal videoconsultationmodal  customscroll remindersModal calenderinterval-modal customscroll clientabpopup businessdetails" id="myclienthide">
        <div class="modal fade EditServiceModal" id="EditServiceModal" tabindex="-1" role="dialog">
            <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">Edit Service</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>
                        <form>
                            <div class="modal-body p-0">
                                <div class="mCustomScrollbar">
                                    <div class="boxwhite mt-30">
                                        <div class="test-results-area labeltop mt-3">
                                            <div class="label-input">
                                                <div class="row">
                                                    <div class="col-lg-5 col-md-6">
                                                        <label>Appointment type</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6">
                                                        <div class="form-group brdrfull">
                                                            <input type="text" class="form-control" placeholder="Description">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="label-input">
                                                <div class="row">
                                                    <div class="col-lg-5 col-md-6">
                                                        <label>Fee</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6">
                                                        <div class="form-group brdrfull">
                                                            <span class="dollar-icon">$</span>
                                                            <input type="text" class="form-control" placeholder="00.00">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="label-input">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <label>Code</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="form-group brdrfull">
                                                            <input type="text" class="form-control" placeholder="Enter code">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="label-input">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <label>Duration</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="row">
                                                                    <div class="col-auto pr-0">
                                                                        <div class="form-group brdrfull selectdrop-textbox">

                                                                            <input type="text" class="form-control select-80 select-text-center" placeholder=" 0 ">


                                                                        </div>
                                                                    </div>
                                                                    <div class="col-auto pl-lg-2">
                                                                        <span class="hrs-label">Hours</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="row">
                                                                    <div class="col-auto pr-0">
                                                                        <div class="form-group brdrfull selectdrop-textbox">

                                                                            <input type="text" class="form-control select-80 select-text-center" placeholder=" 0 ">

                                                                        </div>
                                                                    </div>
                                                                    <div class="col-auto pl-lg-2">
                                                                        <span class="hrs-label">Mins</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="label-input">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <label>Service Provider</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="form-group brdrfull no-bttm-full">
                                                            <div class="form-group select_custom select2-multiple-autoselect">
                                                                <select class="form-control text-capitalize" id="Edit-Service-selecter" name="states[]" multiple="multiple">
                                                                    <option value="Lenny Bronx">Lenny Bronx</option>
                                                                    <option value="Danielle Sawyer">Danielle Sawyer</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="label-input">
                                                <div class="row">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <label>Location</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="form-group brdrfull no-bttm-full">
                                                            <div class="form-group select_custom select2-multiple-autoselect">
                                                                <select class="form-control text-capitalize" id="service-popup-location2" name="states[]" multiple="multiple">
                                                                    <option value="location1">location1</option>
                                                                    <option value="location2">location2</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="label-input">
                                                <div class="row justify-content-center">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <label>Colour Code</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="form-group brdrfull custom-colordrop">
                                                            <div class="color_picker" data-value="#f8de74" style="background-color:#f8de74 !important; border: 1px solid #cab45d;">


                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="label-input">
                                                <div class="row">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <div class="tooltip-new">
                                                            <label>Overdue</label>
                                                            <span class="tooltip-info-icon">
                                                                <img src='{{asset("assets/images/information-icon-new.svg")}}' alt="" class="img-fluid info-icon">
                                                            </span>
                                                            <div class="tooltiptext">
                                                                <div class="media">
                                                                    <img src='{{asset("assets/images/information-icon-new.svg")}}' alt="" class="img-fluid info-icon mr-2">
                                                                    <div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="row ">
                                                            <div class="col-auto">
                                                                <div class="form-group brdrfull selectdrop-textbox">
                                                                    <select class="form-control small-select">
                                                                        @foreach($optionList as $option)
                                                                        <option value="{{$option}}"> {{$option}}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-auto pl-0">
                                                                <div class="form-group brdrfull selectdrop-textbox">
                                                                    <select class="form-control month-text select-80">
                                                                        <option value="months" selected=""> Months</option>
                                                                        <option value="week"> Weeks</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="label-input">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <div class="tooltip-new">
                                                            <label>Max clients</label>
                                                            <span class="tooltip-info-icon">
                                                                <img src='{{asset("assets/images/information-icon-new.svg")}}' alt="" class="img-fluid info-icon">
                                                            </span>
                                                            <div class="tooltiptext">
                                                                <div class="media">
                                                                    <img src='{{asset("assets/images/information-icon-new.svg")}}' alt="" class="img-fluid info-icon mr-2">
                                                                    <div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="form-group brdrfull selectdrop-textbox">
                                                            <select class="form-control small-select">
                                                                <option value="1" selected=""> 1</option>
                                                                <option value="2"> 2</option>
                                                                <option value="3"> 3</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="label-input">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                                        <label>Add GST</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="form-group brdrfull">
                                                            <div class="row">
                                                                <div class="col-auto pr-0">
                                                                    <div class="age-title">
                                                                        <input checked="true" type="radio" id="addgst-yes" name="addgst">
                                                                        <label for="addgst-yes">Yes</label>
                                                                    </div>
                                                                </div>
                                                                <div class="col-auto">
                                                                    <div class="age-title">
                                                                        <input type="radio" id="addgst-no" name="addgst">
                                                                        <label for="addgst-no">No</label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <div class="text-center">
                                    <button type="submit" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Update and
                                        Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- EditServiceModal Modal End -->

</div>




@endsection

@section('css')

<style>
    .color_picker {
        border-radius: 100px;
        width: 28px;
        height: 28px;
        cursor: pointer;
        -webkit-transition: all linear .2s;
        -moz-transition: all linear .2s;
        -ms-transition: all linear .2s;
        -o-transition: all linear .2s;
        transition: all linear .2s;
        border: thin solid #eee;
    }
    #redirectToSetupWizard{
        right: 1%;
    }
    /* .service-new-table .table td, .service-new-table .table th{
       white-space: nowrap;
   } */
</style>
@endsection



@section('jsnew')
{{--  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  --}}
{{--  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>  --}}

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src='{{ asset("assets/js/colorPick.js")}}'></script>
<script src='{{ asset("assets/js/touch-punch.js")}}'></script>

<script>

  $(document).ready(function() {


    $(document).on('change', '#appt_type', function() {

        $('.service-name-pre').text(this.value+' -');
 

    });


    $("#appt_type").select2({minimumResultsForSearch: -1});

  $( "#tablecontents" ).sortable({
            items: "tr",
            cursor: 'move',
            opacity: 1,
            handle: ".portlet-header",
            update: function() {
                sendOrderToServer();
            }
          });

    $( "#tablecontents").disableSelection();
       

          function sendOrderToServer() {
            var order = [];
         
            $('tr.row1').each(function(index,element) {
              order.push({
                id: $(this).attr('data-id'),
                position: index+1
              });
            });
  
            $.ajax({
              type: "POST", 
              dataType: "json", 
              url: "{{ route('practitioner.service.orderapt') }}",
                  data: {
                  order: order,
                 _token:  "{{ csrf_token() }}"
              },
              success: function(response) {
                  if (response.status == "success") {
                    console.log(response);
                  } else {
                    console.log(response);
                  }
              }
            });
          }
  });

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

      
        var color = @json($colors);
        $(".color_picker").each(function() {
            $(this).colorPick({
                'initialColor': '#eda745',
                'palette': color,
                'onColorSelected': function() {

                }
            });
        });

        $('#service-popup-service-provider').select2({
            placeholder: "Service providers who offer this service",
            tokenSeparators: [",", " "],
        });

        $('#service-popup-location').select2({
            placeholder: "Locations where this service is offered",
            tokenSeparators: [",", " "],
        });
    });
    $(document).ready(function() {
        $('#Edit-Service-selecter').select2({
            placeholder: "Service providers who offer this service",
            tokenSeparators: [",", " "],
        });

        $('#service-popup-location2').select2({
            placeholder: "Locations where this service is offered",
            tokenSeparators: [",", " "],
        });
    });


    $(document).on('click', '.editService', function() {
        var id = $(this).data('id');
        $.ajax({
            url: "{{ route('practitioner.get.service')}}",
            method: 'POST',
            data: {
                id: id
            },
            success: function(response) {
                if (response.data) {

                    $("input[name='id']").val(response.data.id);
                    $("input[name='appointment_type']").val(response.data.appointment_type);
                    $("input[name='fee']").val(response.data.fee);
                    $("input[name='code']").val(response.data.code);
                    $("input[name='hours']").val(response.data.hours);
                    $("input[name='minutes']").val(response.data.minutes);
                    $("input[name='color_code']").val(response.data.color_code);

                    // $("input[name='color_code']").val(response.data.color_code);
                    $(".color_picker").css({
                        "background-color": response.data.colors.hex_code,
                        "border": "1px solid" + response.data.colors.hex_code
                    });

                    $("select[name='reminder']").val(response.data.reminder);
                    $("select[name='reminder_in']").val(response.data.reminder_in);

                    $('#service-popup-service-provider').val(response.data.provider_array).select2();
                    $('#service-popup-location').val(response.data.location_array).select2();

                    if(response.data.appt_type!=null){
                        $('#appt_type').val(response.data.appt_type).trigger('change');
                        $("#appt_type").select2({minimumResultsForSearch: -1});
                         $('.service-name-pre').text(response.data.appt_type+' -');
                    }else{
                        $('#appt_type').trigger('change');
                        $("#appt_type").select2({minimumResultsForSearch: -1});
                    }

                   



                    if (response.data.is_gst == 'on') {
                        $('#addgst-yes').prop('checked', true);
                        $('#addgst-no').prop('checked', false);
                    } else {
                        $('#addgst-no').prop('checked', true);
                        $('#addgst-yes').prop('checked', false);
                    }

                    if (response.data.booking_online == '1') {
                        $('#booking-online-yes').prop('checked', true);
                        $('#booking-online-no').prop('checked', false);
                    } else {
                        $('#booking-online-no').prop('checked', true);
                        $('#booking-online-yes').prop('checked', false);
                    }

                    if (response.data.sms_reminders == '1') {
                        $('#sms-reminders-yes').prop('checked', true);
                        $('#sms-reminders-no').prop('checked', false);
                    } else {
                        $('#sms-reminders-no').prop('checked', true);
                        $('#sms-reminders-yes').prop('checked', false);
                    }


                    $("#AddServiceModal").modal('show');
                    $("#AddServiceModal").find('.modal-title').text('Edit Service');
                }
            }
        });
    });
</script>


<script>
    $(document).ready(function() {
        var color = @json($colors);
        $(".color_picker").each(function() {
            $(this).colorPick({
                'initialColor': '#eda745',
                'palette': color,
                'onColorSelected': function() {}
            });
        });

        /** Add more service operation */

        $(".add-more-service").unbind().click(function() {

            var date = new Date();
            var uniqueId = date.getTime();
            var uniqueId1 = Math.round(date.getTime() + (Math.random() * 100))

            var row = $(this).closest('.toppadd').clone();
            row.find('.add-more-service').addClass('remove-service').removeClass('add-more-service').children('img').prop('src', '../../assets/images/trash-icon-green.svg').prop('class', 'img-fluid max-34 t-brdr mCS_img_loaded');
            row.find(".switch-input").prop('id', uniqueId);
            row.find(".switch-input1").prop('id', uniqueId1);

            row.find(".switch-input-label").prop('for', uniqueId);
            row.find(".switch-input-label1").prop('for', uniqueId1);

            row.find(":input").prop('value', "");
            row.find(":checkbox").prop('checked', true).val('on');
            row.find(".hidden-switch-input").val('on');



            var color = @json($colors);
            row.find(".color_picker").each(function() {
                $(this).colorPick({
                    'initialColor': '#eda745',
                    'palette': color,
                    'onColorSelected': function() {}
                });
            });

            $(this).parents('tbody').find('.toppadd').first().before(row);
        });

        /** Remove service  */
        $(document).on('click', '.refresh', function(event) {
             location.reload();
        });

        $(document).on('click', '.remove-service', function(event) {
            $(this).closest('tr').remove();
            var ids = $(this).data("id");
            if (ids) {
                $.ajax({
                    url: "{{ route('practitioner.settings.deleteService')}}",
                    data: {
                        id: ids
                    },
                    type: 'POST',
                }).done(function(response) {
                    if (response.status == "success") {

                        if(response.data == 0){
                           $("#redirectToSetupWizard").css('display','none'); 
                        } else{
                            $("#redirectToSetupWizard").css('display','block');
                        }

                        Swal.fire({
                            icon: response.status,
                            title: response.msg,
                            showClass: {
                                popup: 'animate__animated animate__fadeInDown'
                            },
                            hideClass: {
                                popup: 'animate__animated animate__fadeOutUp'
                            }
                        });
                    }
                });
            }
        });


        $(".overdue_btn_service").hover(function() {
            $(".overdue_box_service").toggle();
        });

    });

    $('#hours').on('input', function(e) {
        if ($(this).val() > 24) {
            $(this).val('24');
        }
    });

    $('#minutes').on('input', function(e) {
        if ($(this).val() > 59) {
            $(this).val('00');
        }

        if ($('#hours').val() == '24') {
            $(this).val('00');
        }

        if ($('#hours').val() == '24' && $(this).val() > 0) {
            $('#hours').val('23');
        }
    });

    $('#AddServiceModal').on('hidden.bs.modal', function() {
        $("#AddServiceModal").find('.modal-title').text('Add Service');
        $('#service-popup-service-provider').val('').select2();
        $('#service-popup-location').val('').select2();
    });

    $("#addService").submit(function(e) {


        e.preventDefault();

        if(($('input[name="hours"]').val() == '0' || $('input[name="hours"]').val() =='00') && ($('input[name="minutes"]').val() == '0' || $('input[name="minutes"]').val() =='00' || $('input[name="minutes"]').val() ==''))
        {
            $('#timeError').next('.invalid-feedback').text('This field is required');
            return false;
        }

        $(".profile-form-error").hide();
      
            var modal = $("#AddServiceModal");
            $.ajax({
                url: $(this).attr("action"),
                data: $(this).serialize(),
                type: 'POST',
            }).done(function(response) {
                if (response.status == "success") {
                    Swal.fire({
                        icon: response.status,
                        title: 'Settings updated',
                        //text: response.msg,
                        showClass: {
                            popup: 'animate__animated animate__fadeInDown'
                        },
                        hideClass: {
                            popup: 'animate__animated animate__fadeOutUp'
                        }
                    });
                    modal.modal("hide");
                    location.reload();
                } else {
                    $.each(response.errors, function(key, value, i) {
                        var input = $('input[name=' + key + ']');
                        var parent = input.parent().next('.invalid-feedback').text(value[0]);
                        input.addClass('is-invalid');
                    });
                }
            });
    
    });

    $('#redirectToSetupWizard').on('click', function() {
      window.location.href = "{{route('practitioner.mysetupwizard')}}";
    });

    
</script>

@endsection