@extends('front.inner-layout.app')
@section('content')
<style>
.select2-container .select2-selection--single {
    min-height: 32px;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    color: white !important;
    height: 0px;
}

.select2-selection__arrow:after {
    right: 7px !important;
}
.health-integration-data .h6-title p {
    margin-bottom: 15px;
}
@media (max-width: 575px) {
    /* .dashboard-top-area{
         display: none;
      } */
}
</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>
                @if(Route::current()->getName() == 'practitioner.settings.index')
                Settings
                @else
                Set Up Wizard
                @endif
            </h1>
        </div>
        @include('front.inner-layout.header')
    </div>
    <div class="brdr-bttm"></div>

    @if(Route::current()->getName() == 'practitioner.settings.index')
        <div class="setting-box-area">
            <div class="row">
                <div class="col-xl-4 col-lg-6 col-md-6">
                    <div class="settingbox">
                        <img src='{{asset("assets/images/setting-img-1.svg")}}' alt="" class="maxw-56">
                        <h3>General settings</h3>
                        <ul class="p-0">
                            <li>
                                <a href="{{ route('practitioner.setup_wizard') }}" class="cursor-pointer">Guided Setup</a>
                            </li>
                            @if( $practitioner->parent_id == '' )
                                <li>
                                    <a class="cursor-pointer" style="display: none;" id="mySetupWizard" href="{{route('practitioner.mysetupwizard')}}">Set up wizard</a>
                                </li>
                            @endif
                            @if( $practitioner->role != 'instructor' )
                            <li>
                                <a href="{{route('practitioner.business.my_details')}}" class="cursor-pointer">My details</a>
                            </li>
                            @endif

                            @if( $practitioner->parent_id == '' )
                            <li>
                                <a href="{{route('practitioner.credit.purchase')}}" class="cursor-pointer">My credits</a>
                            </li>
                            @endif

                            @if( $practitioner->parent_id == '' )
                            <li>
                                <a href="{{route('practitioner.myplan')}}" class="cursor-pointer">My plan</a>
                            </li>
                            @endif

                            <li>
                                <a href="{{route('practitioner.invoice.setting.newpage')}}" class="cursor-pointer Invoices-link">Invoices</a>
                            </li>
                            {{--
                            <li>
                                <a data-toggle="modal" data-target-modal="#invoicesModal" data-url="{{route('get.practitionerInvoice.modal')}}" class="cursor-pointer call-modal Invoices-link">Invoices</a>
                            </li>
                            --}}

                            {{-- 04-Nov-2022 Commented this condition for Waitlist & Integrations Settings --}}
                            {{-- @if( $practitioner->parent_id == '' ) --}}
                                {{-- <li>
                                    <a data-toggle="modal" class="call-modal cursor-pointer" data-target-modal="#integrationMedipassModel" data-url="{{route('get.integrationmedipass.model')}}"><img src='{{asset("assets/images/Premium_plan.svg")}}' alt="" width="20px" class="img-fluid">Tyro Health integration</a>
                                </li> --}}
                                 <li>
                                    <a class="cursor-pointer" href="{{ route('practitioner.mailchimp') }}"><img src='{{asset("assets/images/Premium_plan.svg")}}' alt="" width="20px" class="img-fluid">Integrations</a>
                                </li>
                                {{-- <li>
                                    <a data-toggle="modal" class="call-modal cursor-pointer" data-target-modal="#integrationMedipassModel" data-url="{{route('get.integrationmedipass.model')}}">Tyro Health integration</a>
                                </li> --}}
                            {{-- @endif --}}
                            <li>
                                <a href="{{ route('practitioner.settings.importPage') }}" class="cursor-pointer">Import</a>
                            </li>
                            
                            @if($practitioner->parent_id == '')
                            <li>
                                <a data-toggle="modal" data-target="#two_factor_authentication" class="cursor-pointer">Two-factor authentication</a>
                            </li>
                            @endif                          

                            {{--
                            <li>
                                <a data-toggle="modal" data-target="#paymentgatewayModal" class="cursor-pointer">Payment Gateway</a>
                            </li>
                            --}}
                        </ul>
                    </div>
                </div>

                
                <div class="col-xl-4 col-lg-6 col-md-6">
                    <div class="settingbox">
                        <img src='{{asset("assets/images/setting-img-2.svg")}}' alt="" class="maxw-56">
                        <h3>Calendar</h3>
                        <ul class="p-0">
                            <li>
                                <a data-toggle="modal" data-target-modal="#calenderintervalModal" class="cursor-pointer call-modal" data-url="{{route('get.calenderinterval.modal')}}">Calendar intervals</a>
                            </li>
                            {{-- <li>
                                <a class="cursor-pointer" href="{{route('practitioner.settings.blockout_time')}}">Blockout time</a>
                            </li> --}}
                            {{-- 04-Nov-2022 Commented this condition for Waitlist & Integrations Settings --}}
                            {{-- @if( $practitioner->parent_id == '' ) --}}
                                <li>
                                    {{-- <a data-toggle="modal" data-target="#activeInactiveWaitlistModal" class="cursor-pointer">Waitlist</a> --}}
                                    <a id="settings_btn" data-allowToSellPackage="{{$allowToSellPackage}}" class="cursor-pointer"><img src='{{asset("assets/images/Premium_plan.svg")}}' alt="" width="20px" class="img-fluid">Waitlist</a>
                                </li>
                            {{-- @endif --}}
                            {{-- <li>
                                <a href="{{route('practitioner.openCalendar')}}" class="cursor-pointer">One way calendar sync</a>
                            </li> --}}
                            <li>
                                <a href="{{route('practitioner.one_way_calendar')}}" class="cursor-pointer"><img src='{{asset("assets/images/Premium_plan.svg")}}' alt="" width="20px" class="img-fluid">Calendar sync</a>
                            </li>
                            {{-- <li>
                                <a href="{{route('practitioner.one_way_calendar')}}" class="cursor-pointer">Calendar sync</a>
                            </li> --}}
                            {{-- <li>
                                <a  id="calenda_sync" class="cursor-pointer">Google Icalendar sync</a>
                            </li> --}}
                        </ul>
                    </div>
                </div>

                <div class="col-xl-4 col-lg-6 col-md-6">
                    <div class="settingbox">
                        <img src='{{asset("assets/images/setting-img-3.svg")}}' alt="" class="maxw-56">
                        <h3 class="cursor-pointer text-blue">Booking online</h3>
                        <ul class="p-0">
                            {{--
                            <li><a data-url="{{route('get.onlineBookings.modal')}}" data-toggle="modal" data-target-modal="#onlinebookingmodal" class="cursor-pointer text-blue call-modal">Settings</a></li>
                            --}}
                            <li><a href="{{ route('practitioner.online-booking.setting') }}" class="cursor-pointer text-blue ">Settings</a></li>
                            <li><a href="{{ route('practitioner.customOnlineAvailability.index') }}" class="cursor-pointer text-blue ">Custom availability</a></li>
                            <li><a href="{{ route('practitioner.onetimeavailability') }}" class="cursor-pointer text-blue ">One time availability</a></li>
                            <li><a data-toggle="modal" data-url="{{route('get.practitionerEmbedCalender.modal')}}" data-target-modal="#embedCalenderModal" class="cursor-pointer call-modal">Booking links</a></li>
                        </ul>
                    </div>
                </div>

                <div class="col-xl-4 col-lg-6 col-md-6">
                    <div class="settingbox">
                        <img src='{{asset("assets/images/setting-img-4.svg")}}' alt="" class="maxw-56">
                        <h3>Services and Products</h3>
                        <ul class="p-0">
                            <li>
                                <a href="{{route('practitioner.service.newpage')}}" class="cursor-pointer">Services</a>
                            </li>
                            {{--
                            <li>
                                <a data-toggle="modal" data-url="{{route('get.practitionerVideo.modal')}}" data-target-modal="#videoconsultationmodal" class="cursor-pointer text-blue call-modal">Video consultations</a>
                            </li>
                            --}}
                           
                            <li>
                                <a href="{{route('practitioner.product.newpage')}}" class="cursor-pointer ">Products</a>
                            </li>
                            <li style="display:block;">
                                <a href="{{route('practitioner.invoice.newpage')}}" class="cursor-pointer " style="display:none;">Invoices new page</a>
                            </li>
                            <li style="display:none;" class="product-redirect">
                                <a data-url="{{route('get.practitionerProducts.modal')}}" data-toggle="modal" id="openProductModal" data-target-modal="#productssmodal" class="cursor-pointer call-modal">Products</a>
                            </li>
                                                        <li>
                                <a data-toggle="modal" data-target="#classeseventsModal" class="cursor-pointer">Classes and events</a>
                            </li>
                            <li>
                                <a href="{{route('practitioner.settings.my.gift.vouchers')}}" class="cursor-pointer"><img src='{{asset("assets/images/Premium_plan.svg")}}' alt="" width="20px" class="img-fluid">Gift Vouchers</a>
                            </li>                           
                            <li>
                                <a href="{{route('practitioner.my.packages')}}" class="cursor-pointer">Packages</a>
                            </li>
                            <li>
                                <a id="payment_plan_btn" data-planId="{{ isset($practitioner_plan) && $practitioner_plan->plan_id ? $practitioner_plan->plan_id : 1 }}" data-allowToSellPackage="{{$allowToSellPackage}}" class="cursor-pointer"><img src='{{asset("assets/images/Premium_plan.svg")}}' alt="" width="20px" class="img-fluid">Payment plans</a>
                            </li>
                            <li>
                                  <a id="courses_settings_btn" data-allowToSellPackage="{{$allowToSellPackage}}" data-isCourse="{{$practitioner->is_course}}" class="cursor-pointer"><img src='{{asset("assets/images/Premium_plan.svg")}}' alt="" width="20px" class="img-fluid">Online courses</a>
                                {{-- <a href="{{route('practitioner.my.courses')}}" class="cursor-pointer"><img src='{{asset("assets/images/Premium_plan.svg")}}' alt="" width="20px" class="img-fluid">Online courses</a> --}}
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="col-xl-4 col-lg-6 col-md-6">
                    <div class="settingbox">
                        <img src='{{asset("assets/images/setting-img-5.svg")}}' alt="" class="maxw-56">
                        <h3>Clients</h3>
                        <ul class="p-0">
                            <!-- <li>
                                <a class="cursor-pointer openIntakeForm">Intake forms</a>
                            </li> -->
                            <li>
                                <a class="cursor-pointer" href="{{route('practitioner.intake_form.index')}}">Intake forms</a>
                            </li>
                            <li>
                                <a href="{{ route('practitioner.settings.reminders') }}" class="cursor-pointer">Reminders</a>
                            </li>
                            <li>
                                <a href="{{ route('practitioner.settings.myBookingConfirmation') }}" class="cursor-pointer">Booking confirmation</a>
                            </li>
                            <li>
                                <a href="{{ route('practitioner.settings.myWelcomeEmail') }}" class="cursor-pointer">Welcome message</a>
                            </li>
                            <li>
                                <a href="{{route('practitioner.settings.videoConsultations')}}" class="cursor-pointer text-blue">Telehealth instructions</a>
                            </li>
                            <li>
                                <a href="{{ route('practitioner.treatment.index') }}" class="cursor-pointer">Treatment note templates</a>
                            </li>
                            <li>
                                <a id="coupon_btn" data-planId="{{ isset($practitioner_plan) && $practitioner_plan->plan_id ? $practitioner_plan->plan_id : 1 }}" class="cursor-pointer"><img src='{{asset("assets/images/Premium_plan.svg")}}' alt="" width="20px" class="img-fluid">Discount codes</a>
                            </li>
                            <li>
                                <a href="{{ route('practitioner.tags.index') }}" class="cursor-pointer">Tags</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="col-xl-4 col-lg-6 col-md-6">
                    <div class="settingbox">
                        <img src='{{asset("assets/images/setting-img-6.svg")}}' alt="" class="maxw-56">
                        <h3>Documents</h3>
                        <ul class="p-0">
                            <li class="coming-txt">Coming soon</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @if(Route::current()->getName() == 'practitioner.mysetupwizard')
    <div class="container-fluid">
        <div class="row">
            <div class="mysetupwizard-menu w-100">
                <nav class="navbar navbar-light bg-light invoice-page-menu w-100">
                    {{-- {{ route('practitioner.plans') }} --}}
                    <a class=" p-0" href="{{ URL::previous() }}">
                        
                        <img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude" style="min-width: 40px">
                    </a>
                    <a class="navbar-brand p-0 m-0" href="{{ URL::previous() }}">
                        <img src="{{asset('assets/images/MA Icon Colour.svg')}}" alt="" class="img-flude" style="min-width: 43px">
                    </a>
                    <h1 style="z-index: unset !important;" class="page-title eagle-font font-400"><span class="arca-font">My</span> Setup Wizard</h1>
                    <ul class="list-inline icons-listing mr-auto my-auto"></ul>
                    <a href="{{Common::getLogoutLink()}}" class="btn  text-center">Logout</a>
                </nav>
                <div class="brdr-bttm w-100"></div>
            </div>
        </div>
    </div>

    <div class="mysetupwizard-wrapper customscroll mysetwizard">
        <div class="">

            <div class="whitecard">
                {{--<p class="mysetupwizardtext">
            In order to customise your account, we need just a few more details from you. For any skipped sections, you can return to adjust these anytime via the My Settings tab.
            </p>--}}
                <!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#invoicefilterpopModal">
               Launch demo modal
            </button> -->
                <div class="step-titletext">
                    <h2>Step 1. My details</h2>
                    <p class="mb-30">Let's start by entering your business details including your availability so we can
                        customise your calendar.
                        <!-- business details including your trading hours so we can customize your calender. -->
                    </p>
                    <!-- <button id="step_1" data-toggle="modal" data-target="#businessdetailsModal" class="cursor-pointer btn-fill step-titletext-gray-setup-button">Let's go</button> -->
                    <button id="step_1" disabled="true"
                        class="cursor-pointer btn-fill step-titletext-gray-setup-button redirectToOther">Let's
                        go</button>
                </div>

                <!-- <div class="step-titletext step-titletext-gray">
               <h2>Step 2. My availability</h2>
               <p class="mb-30">Next up we need to add your availability so we can customise your calender.</p>
               <button id="step_2" disabled="true" class="cursor-pointer btn-fill step-titletext-gray-setup-button redirectToOther">Set up my availability</button>
            </div> -->

                <div class="step-titletext step-titletext-gray">
                    <h2>Step 2. Services</h2>
                    <p class="mb-30">Now let’s set up your services. Here you can customise the services you offer, set
                        their duration, colour code them for easy recognition and more.</p>
                    <!-- <button id="step_3" disabled="true" data-url="{{route('get.practitionerService.modal')}}" data-toggle="modal" data-target-modal="#servicessmodal" class="cursor-pointer btn-fill step-titletext-gray-setup-button call-modal">Set up my services</button> -->
                    <button id="step_2" disabled="true"
                        class="cursor-pointer btn-fill step-titletext-gray-setup-button redirectToOther">Set up my
                        services</button>
                </div>
                <!-- <div class="step-titletext step-titletext-gray">
               <h2>Step 3. Products</h2>
               <p class="mb-30">Do you sell products? Add them here to get notifications when stock levels are low and specify if clients can re-order prescribed products (must be signed up to payment gateway).</p>
               <button id="step_3" disabled="true" href="{{route('practitioner.product.newpage')}}" class="cursor-pointer btn-fill step-titletext-gray-setup-button redirectToOther">Set up my products</button>
               <button data-step="3" disabled="true" class="btn-fill step-gray-btn skip_step">Skip</button>
            </div> -->
                <div class="step-titletext step-titletext-gray">
                    <h2>Step 3. Reminder messages</h2>
                    <p class="mb-30">Customise the wording and timing of your clients appointment reminders.</p>
                    <!-- <button id="step_3" disabled="true" data-toggle="modal" data-target="#remindersModal"
                        class="cursor-pointer btn-fill step-titletext-gray-setup-button">Customise</button> -->
                        <button id="step_3" disabled="true" class="redirectToOther cursor-pointer btn-fill step-titletext-gray-setup-button">Customise</button>
                    <button data-step="3" disabled="true" class="btn-fill step-gray-btn skip_step">Skip</button>
                </div>
                <div class="step-titletext step-titletext-gray">
                    <h2>Step 4. Booking Confirmations</h2>
                    <p class="mb-30">If you'd like your clients to receive an email and/or an SMS confirming their booked
                        appointment, adjust your settings here.</p>
                    <button id="step_4" disabled="true"
                        class="cursor-pointer btn-fill step-titletext-gray-setup-button redirectToOther">Customise</button>
                    <button data-step="4" disabled="true" class="btn-fill step-gray-btn skip_step">Skip</button>
                </div>
                <div class="step-titletext step-titletext-gray">
                    <h2>Step 5. Welcome email</h2>
                    <p class="mb-30">Welcome emails are a great opportunity to let your clients know important details
                        about their first appointment and what to expect. Customise your wording here.</p>
                    <button id="step_5" disabled="true"
                        class="cursor-pointer btn-fill step-titletext-gray-setup-button redirectToOther">Customise</button>
                    <button data-step="5" disabled="true" class="btn-fill step-gray-btn skip_step">Skip</button>
                </div>

                <div class="step-titletext step-titletext-gray">
                    <h2>Step 6.
                        <!-- Online bookings-->Bookings Online
                    </h2>
                    <p class="mb-30">Would you like your clients to be able to book their own appointments online?
                        Adjust your settings here. </p>
                    <button id="step_6" disabled="true"
                        class="cursor-pointer btn-fill step-titletext-gray-setup-button redirectToOther">Customise</button>
                    <button data-step="6" disabled="true" class="btn-fill step-gray-btn skip_step">Skip</button>
                </div>
                <div class="step-titletext step-titletext-gray">
                    <h2>Step 7. Telehealth</h2>
                    <p class="mb-30">Do you offer Telehealth consultations? Set up automated emails or send an SMS to
                        your clients with instructions on how to join their appointment. </p>
                    <!-- <button id="step_5" data-url="{{route('get.practitionerVideo.modal')}}" disabled="true" data-toggle="modal" data-target-modal="#videoconsultationmodal" class="cursor-pointer btn-fill step-titletext-gray-setup-button call-modal">Customise</button> -->
                    <button id="step_7" disabled="true"
                        class="cursor-pointer btn-fill step-titletext-gray-setup-button redirectToOther">Customise</button>
                    <button data-step="7" disabled="true" class="btn-fill step-gray-btn skip_step">Skip</button>
                </div>
               
            <div class="step-titletext text-center">
                <p class="mb-30" style="text-align: justify;">Whilst we'd love to step you through all of My Appointments time and money saving features, we know you are keen to get in and take a look around. So please visit your settings tab if you need to customise your invoices, add your Medipass API for on the spot health fund rebates, create custom treatment note templates and intake forms, set up two-factor authentication, add custom online availability and more.</p>
                <button class="btn-fill w-100" id="doneButtonDiv" style="background: grey; border:grey" data-toggle="modal" disabled="true" data-target="#invoicefilterpopModal">Complete Setup Wizard</button>
            </div>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

@section('modals')

<div id="load-modal"></div>




<!---Integrated Payment Gateway Start -->
<div class="client-follow-popup login-modal customscroll paymentgateway-modal customscroll clientabpopup businessdetails"
    id="myclienthide">
    <div class="modal fade" id="paymentgatewayModal" 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 eagle-font" id="exampleModalLabel13">Integrated Payment
                            Gateway
                        </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="boxwhite mt-30">
                                <div class="payment-gateway-icon text-center">
                                    <img src='{{asset("assets/images/payment-gateway.svg")}}' alt="" class="maxw-87">
                                </div>
                                <div class="text-center ptext">
                                    <h6 class="font-15 text-bold text-blue">1.4% plus 10c per transaction* </h6>
                                    <p>Save time and money with our integrated online payment gateway. With the click of
                                        a
                                        button, you can securely process Visa, MasterCard & debit cards instantly. No
                                        terminal
                                        required, no monthly fees or mininmum spend, cancel anytime. Transact more than
                                        $500,000 per annum? Contact us for custom pricing.</p>
                                </div>
                                <!-- <div class="label-input">
                           <div class="row">
                              <div class="col-lg-7 col-md-6">
                                 <label>Pass transaction fees on to client</label>
                              </div>
                              <div class="col-lg-5 col-md-6">
                                 <ul class="age-title p-0 listingli mb-0 mr-li">
                                    <li><input type="radio" id="pass1" name="animal" value="">
                                       <label for="pass1">Yes</label></li>
                                    <li><input type="radio" id="pass2" name="animal" value="">
                                       <label for="pass2">No</label></li>
                                 </ul>
                              </div>
                           </div>
                        </div> -->

                                <div class="text-center ptextsize">
                                    <p>*Subject to approval. Please allow up to 48 hours for your merchant account to be
                                        activated. We will notify you when your application has been processed.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="text-center">
                            <a href="#" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Apply
                                Now</a>
                            <!-- id="storeMerchantId" -->
                        </div>
                        <!-- PractitionerCardAddModal -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Integrated Payment Gateway End-->
<!---practitioner card add popup Start -->
<!-- <div class="client-follow-popup login-modal customscroll paymentgateway-modal customscroll clientabpopup businessdetails" id="myclienthide">
   <div class="modal fade" id="PractitionerCardAddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel13" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
            <form action="{{route('practitioner.settings.practitionercardadd')}}" method="POST" id="card_add_practitioner">
               @csrf
               <div class="popup-marg">
                  <div class="modal-header">
                     <h5 class="modal-title text-center eagle-font" id="exampleModalLabel13">Save Card
                     </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="boxwhite mt-30">
                           <div class="row">
                              <div class="col-lg-10 col-md-10 col-10">
                                 <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Card Holder name" name="card_holder">
                                    <span class="invalid-feedback d-block"></span>
                                 </div>
                              </div>
                              <div class="col-lg-10 col-md-10 col-10">
                                 <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Card Number" name="card_number">
                                    <span class="invalid-feedback d-block"></span>
                                 </div>
                              </div>
                              <div class="col-lg-10 col-md-10 col-10">
                                 <div class="form-group">
                                    <input type="text" class="form-control" placeholder="CVV" name="cvv">
                                    <span class="invalid-feedback d-block"></span>
                                 </div>
                              </div>
                              <div class="col-lg-10 col-md-10 col-10">
                                 <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Expiry e.g MM/yyyy" name="card_expiry">
                                    <span class="invalid-feedback d-block"></span>
                                 </div>
                              </div>
                           </div>
                           <div>
                              <input type="hidden" name="errmsg">
                           </div>
                           <span style="font-size: 30px !important;" class="invalid-feedback d-block"></span>

                        </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">Save</button>
                     </div>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>
</div> -->

<div class="client-follow-popup customscroll openclickmodal quickaddModal addpaymentmethod">
    <div class="modal fade show" id="PractitionerCardAddModal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel2">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form action="{{route('practitioner.settings.practitionercardadd')}}" method="POST"
                    id="card_add_practitioner">
                    @csrf
                    <div class="popup-marg">
                        <div class="modal-header">
                            <h5 class="modal-title text-center eagle-font" id="exampleModalLabel13">Add Payment Method
                            </h5>
                            <button type="button" style="position: relative;" 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-header">
                     <h5 class="modal-title eagle-font font-bold text-left" id="exampleModalLabel2">Add Payment Method</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>
                                        <div class="form-group usericon">
                                            <label>Name on card</label>
                                            <input type="text" name="card_holder" class="form-control"
                                                placeholder="Name">
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                        <div class="form-group usercardicon">
                                            <label>Card Number</label>
                                            <input type="text" name="card_number" class="form-control"
                                                placeholder="0000 0000 0000 0000">
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6 col-md-6">
                                                <div class="form-group expiryicon" id="open_from_date">
                                                    <label>Expiry</label>
                                                    <input type="text" class="form-control" placeholder="MM/YYYY"
                                                        name="card_expiry">
                                                    <span class="invalid-feedback d-block"></span>
                                                    <!-- <div id="datepicker-group" class="input-group date filter-dropdown-three" data-date-format="mm-dd-yyyy">
                                          <input class="form-control border-0 box-shadow-none day-datepicker pt-0 pb-0" name="data" type="text" placeholder="MM/YY" name="card_expiry" />

                                          <span class="input-group-addon right-arrow drop-img"></span>
                                       </div> -->
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-md-6">
                                                <div class="form-group expiryicon">
                                                    <label>CCV</label>
                                                    <input type="number" length="3" name="cvv" class="form-control"
                                                        placeholder="000">
                                                    <span class="invalid-feedback d-block"></span>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div>
                                    <input type="hidden" name="errmsg">
                                </div>
                                <span style="font-size: 13px !important;" class="invalid-feedback d-block"></span>
                                <br>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <!-- <a data-toggle="modal" data-target="#processpayModal" data-dismiss="modal" class="yellow-btn mt-0 text-white save-btn-bg cursor-pointer">Add Card</a> -->
                            <div class="text-center">
                                <button type="submit" style="width:100% !important"
                                    class="yellow-btn mt-0 text-white save-btn-bg cursor-pointer">Add Card</button>
                            </div>

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

<!-- practitioner card add popup End-->
<!---practitioner card list popup Start -->
<div class="client-follow-popup customscroll waitlist-modal">
    <div class="modal fade" id="PractitionerCardListModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="popup-marg">
                    <div class="modal-header">
                        <h5 class="modal-title text-center">Card List</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="waitlist-drop-box">
                            <div class="row mt-3 align-items-center">
                                <div class="col-lg-6">
                                    <ul class="waitlist-btn">
                                        <li class="add-filter-dropdown">
                                            <a data-toggle="modal" data-dismiss="Modal"
                                                data-target="#PractitionerCardAddModal"
                                                class="yellow-btn mt-0 save-btn d-block text-green cursor-pointer toggleopenclickModal">+
                                                Add</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="mt-10 mb-30">

                            <div class="mCustomScrollbar">
                                <div class="comm-marg allcardofpractitioner">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- practitioner card list popup End-->





<!---Holidays Multiple start -->
<div class="reply-modal close-h-img holidaymul-modal">
    <div class="modal fade" id="hmultipleModal" tabindex="-1" role="dialog" 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>
                </div>
                <div class="modal-body">
                    <div class="media">
                        <div class="img-width">
                            <img src='{{asset("assets/images/feature-img-2.png")}}' class="align-self-center img-fluid"
                                alt="...">
                        </div>
                        <div class="media-body">
                            <h4 class="mt-0 font-bold">Lenny Bronx</h4>
                            <h6>Kinesiologist</h6>
                        </div>
                    </div>
                    <div class="media">
                        <div class="img-width">
                            <img src='{{asset("assets/images/feature-img-3.png")}}' class="align-self-center img-fluid"
                                alt="...">
                        </div>
                        <div class="media-body">
                            <h4 class="mt-0 font-bold">Alison Friend</h4>
                            <h6>Homeopath, Nutritionist</h6>
                        </div>
                    </div>
                    <div class="media">
                        <div class="img-width">
                            <img src='{{asset("assets/images/feature-img-1.png")}}' class="align-self-center img-fluid"
                                alt="...">
                        </div>
                        <div class="media-body">
                            <h4 class="mt-0 font-bold">Eliza French</h4>
                            <h6>Naturopath</h6>
                        </div>
                    </div>
                    <div class="media">
                        <div class="img-width">
                            <img src='{{asset("assets/images/feature-img-4.png")}}' class="align-self-center img-fluid"
                                alt="...">
                        </div>
                        <div class="media-body">
                            <h4 class="mt-0 font-bold">Danielle Sawyer</h4>
                            <h6>Homeopath, Naturopath</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!---Holidays Multiple start -->

<!---Import Export start -->
<div class="client-follow-popup login-modal customscroll calenderinterval-modal customscroll clientabpopup businessdetails"
    id="myclienthide">
    <div class="modal fade" id="importexportmodal" 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 eagle-font" id="exampleModalLabel13">Import</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="boxwhite mt-30">
                                <div class="test-results-area labeltop">
                                    <h3 class="font-15 mb-0">Need to import your client list, appointments or invoices?
                                    </h3>
                                    <div class="importp-text">
                                        <p>To ensure a seamless import, please read our help desk article <a
                                                target="_blank" class="" href="">here</a>. Files can only be accepted in
                                            CSV format and a name as well as unique mobile or email address are the
                                            minimum fields required. Once uploaded, you will be able to match the fields
                                            you'd like to import.
                                    </div>
                                    <div class="label-input">
                                                                                    <form method="POST" id="importCsvFile" class="form-horizontal"
                                                enctype="multipart/form-data"
                                                action="{{ route('practitioner.settings.Import_csv_file') }}">
                                                @csrf
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col-lg-4 col-md-6 col-sm-6">
                                                        <label>Add file</label>
                                                    </div>
                                                    <div class="col-lg-7 col-md-6 col-sm-6">
                                                        <div class="customdroppdown gray-brdr line-dropdown">
                                                            <div
                                                                class="form-group marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child brdrbttm-0 custome-sel">
                                                                                                                                    <select style="width: 100% !important"
                                                                        name="csv_file_name" id="csv_file_name"
                                                                        class="form-control">

                                                                        <!-- <option hidden>Clients </option> -->
                                                                        <option value="client">Clients</option>
                                                                        <option value="appointments">Appointments
                                                                        </option>
                                                                        <option value="invoices">Invoices </option>
                                                                        <!--   <option value="payments">Payments</option>
                                             <option value="products">Products</option> -->
                                                                    </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="uploadOuter">
                                                    <!--  <img src='{{asset("assets/images/upload-icon-g.png")}}' alt="" class="img-fluid browsebox"> -->
                                                    <span class="dragBox d-block">
                                                        <img src='{{asset("assets/images/upload-icon-g.png")}}' alt=""
                                                            class="img-fluid browsebox">
                                                        <div class="drag-drop-text">
                                                            <p class="mb-0">Drag and drop files here </p>
                                                        </div>
                                                        <div class="text-or">
                                                            - or -
                                                        </div>
                                                        <div id="previewnew"></div>
                                                                                                                <input type="file" id="fileLoader" name="csv_file"
                                                            title="Load File" onchange="dragNdropnew(event)"
                                                            style="display: block !important" autocomplete="off">
                                                        <input type="button" id="btnOpenFileDialog" class="btn-unfill"
                                                            value="Browse files" onclick="openfileDialog();"
                                                            autocomplete="off">
                                                    </span>

                                                    <!-- <span class="d-block textor">- or -</span>
                              <label for="uploadFile" class="yellow-btn mt-0 save-btn cursor-pointer font-400">Browse
                                 files</label> -->
                                                </div>

                                                <!-- <div id="previewnew"></div> -->
                                                <!--  <a href="#" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Import/export
                        file</a> -->

                                                <div class="button-area">
                                                    <button type="submit"
                                                        class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Import</button>

                                                </div>
                                            </form>
                                            <!-- <div id="preview"></div> -->
                                    </div>
                                    <div id="preview"></div>
                                                                    </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div class="text-center">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!---Import Export End -->

<!---Import Step Two Modal start -->
<div class="client-follow-popup clientabpopup businessdetails customscroll" id="myimportvalues">
    <div class="modal fade" id="importsteptwomodal" 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 eagle-font" id="exampleModalLabel13">Import</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 mCustomScrollbar">
                        <div class="">
                            <div class="boxwhite mt-10">
                                <div class="test-results-area labeltop">
                                    <div id="preview">
                                        <div class="health-space-table" style="margin-top:0;">
                                            <div class="table-responsive">
                                                <div class="table">
                                                    <form method="POST" id="importDatastore" class="form-horizontal"
                                                        enctype="multipart/form-data"
                                                        action="{{ route('practitioner.settings.Import_data') }}">
                                                        @csrf
                                                        <input type="hidden" name="file_name" id="file_name">
                                                        <input type="hidden" name="file" id="file_path">
                                                        <table class="table mb-0">
                                                            <thead>
                                                                <tr>
                                                                    <th class="text-left font-12">Your Fields</th>
                                                                    <th class="text-left font-12">Import Into</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody id="import-into-tbody">
                                                            </tbody>
                                                        </table>
                                                        <div class="button-area">
                                                            <button type="submit"
                                                                class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Import</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div class="text-center">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!---Import Step Two Modal End -->



<!-- setting waitlist end Start --->
<div class="client-follow-popup login-modal settingwaitlist customscroll calenderinterval-modal customscroll clientabpopup businessdetails"
    id="myclienthide">
    <div class="modal fade" id="activeInactiveWaitlistModal" 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 eagle-font" id="exampleModalLabel13">Wait list</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 method="POST" action="{{route('practitioner.settings.activeInactiveWaitlist')}}"
                        id="activeInactiveWaitlist">
                        @csrf
                        <div class="modal-body p-0">
                            <div class="mCustomScrollbar">
                                <div class="boxwhite mt-30">
                                    <div class="test-results-area labeltop">
                                        <h3 class="font-15 mb-3 ml-0 font-400">Displays your wait list above your
                                            calendar on
                                            your My Appointments tab.</h3>
                                        <div class="row mb-3">
                                            <div class="col-lg-6 col-md-6 col-6">
                                                <ul class="age-title p-0 listingli mb-0">
                                                    <li><input class="waitList" type="radio" id="on1" value="1"
                                                            name="status"
                                                            @if(isset($practitionerIntervals->waiting_list_status) &&
                                                        $practitionerIntervals->waiting_list_status == 1) checked
                                                        @endif >
                                                        <label for="on1">On</label>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-6 col-md-6 col-6">
                                                <ul class="age-title p-0 listingli mb-0">
                                                    <li><input class="waitList" type="radio" id="off1" name="status"
                                                            value="0"
                                                            @if(isset($practitionerIntervals->waiting_list_status) &&
                                                        $practitionerIntervals->waiting_list_status == 0) checked
                                                        @endif>
                                                        <label for="off1">Off</label>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div class="text-center">
                                <button type="submit" id="activeInactiveWaitlist"
                                    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>
<!-- setting waitlist end -->

<!-- two-factor authentication  Start --->
<div class="client-follow-popup login-modal settingwaitlist customscroll calenderinterval-modal customscroll clientabpopup businessdetails"
    id="myclienthide">
    <div class="modal fade" id="two_factor_authentication" 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 eagle-font" id="exampleModalLabel13">Two-factor Authentication</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 action="{{route('practitioner.settings.two_factor_authentication')}}"
                        id="two_factor_authentication_2fa">
                        @csrf
                        <div class="modal-body p-0">
                            <div class="mCustomScrollbar">
                                <div class="boxwhite mt-30">
                                    <div class="test-results-area labeltop">
                                        <h3 class="font-15 mb-3 ml-0 font-400">For added security, we recommend turning on two-factor authentication</h3>
                                        <div class="row mb-3">
                                            <div class="col-lg-6 col-md-6 col-6">
                                                <ul class="age-title p-0 listingli mb-0">
                                                    <li><input class="waitList" type="radio" id="2fa_on" value="1"
                                                            name="2fa"
                                                            @if(isset($two_factor_authentication->authentication) &&
                                                        $two_factor_authentication->authentication == 1) checked
                                                        @endif >
                                                        <label for="2fa_on">On</label>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="col-lg-6 col-md-6 col-6">
                                                <ul class="age-title p-0 listingli mb-0">
                                                    <li><input class="waitList" type="radio" id="2fa_off" name="2fa"
                                                            value="0"
                                                            @if(isset($two_factor_authentication->authentication) &&
                                                        $two_factor_authentication->authentication == 0) checked
                                                        @endif>
                                                        <label for="2fa_off">Off</label>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div class="text-center">
                                <button type="submit" id="two_factor_authentication_2fa"
                                    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>
<!-- two-factor authentication End -->

<!-- videoconsultantmulti Start -->
<div class="reply-modal close-h-img holidaymul-modal daymodal consult-videotext">
    <div class="modal fade" id="videoconsultdays" tabindex="-1" role="dialog" 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>
                </div>
                <div class="modal-body">
                    <div class="health-history-checkbox mb-0">
                        <div class="multi-pract">
                            <div class="small-bullet">
                                <div class="delete-check-icon checkedbox">
                                    <ul class="mb-0">
                                        <li>
                                            <div class="rdio rdio-primary radio-inline">
                                                <input id="radio170" type="checkbox" checked="">
                                                <label for="radio170">Initial consultation</label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="multi-pract">
                            <div class="small-bullet">
                                <div class="delete-check-icon checkedbox">
                                    <ul class="mb-0">
                                        <li>
                                            <div class="rdio rdio-primary radio-inline">
                                                <input id="radio171" type="checkbox">
                                                <label for="radio171">Short consulation</label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="multi-pract">
                            <div class="small-bullet">
                                <div class="delete-check-icon checkedbox">
                                    <ul class="mb-0">
                                        <li>
                                            <div class="rdio rdio-primary radio-inline">
                                                <input id="radio172" type="checkbox">
                                                <label for="radio172">None</label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="multi-pract">
                            <div class="small-bullet">
                                <div class="delete-check-icon checkedbox">
                                    <ul class="mb-0">
                                        <li>
                                            <div class="rdio rdio-primary radio-inline">
                                                <input id="radio173" type="checkbox">
                                                <label for="radio173">All services</label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn-green custom-seemore mb-0 cursor-pointer">Select</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- videoconsultant end -->


<!-- productssmodal Start --->

<!-- Classes & Events Start --->
<div class="client-follow-popup login-modal settingwaitlist customscroll classeseventsModal customscroll clientabpopup businessdetails"
    id="myclienthide">
    <div class="modal fade" id="classeseventsModal" 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 eagle-font" id="exampleModalLabel13">Classes &amp; events
                        </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="boxwhite mt-30">
                            <div class="class-eventsimg">
                                <img src='{{asset("assets/images/class-events.jpg")}}' alt="" class="img-fluid">
                            </div>
                            <div class="h6-title">
                                <h6 class="coming-txt-space">COMING SOON</h6>
                                <p>Manage all your classes, events and group bookings from your My Appointments
                                    calendar.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Classes & Events Start end -->
<!-- Sure modal Start-->
<div class="todo-list-modal clientabpopup sentmodal">
    <div class="modal fade" id="sentmodal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content mdashboard-client-followuparea">
                <div class="modal-header">
                    <button type="button" class="close bttn-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><img src='{{asset("assets/images/close-img.png")}}' alt=""
                                class="img-fluid"></span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <h3 class="font-bold font-15 text-blue mb-20">Are you sure?</h3>
                    <p class="font-13 text-blue">You are about to delete your custom field. This cannot be undone. </p>
                    <div class="text-center mt-40">
                        <a href="#" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0">Delete</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Sure modal Modal End-->


<!-- Sure modal Start-->
<div class="todo-list-modal clientabpopup sentmodal">
    <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content mdashboard-client-followuparea">
                <div class="modal-header">
                    <button type="button" class="close bttn-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><img src="{{asset('assets/images/close-img.png')}}" alt=""
                                class="img-fluid"></span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <input type="hidden" name="item_id">
                    <input type="hidden" name="itemName">
                    <input type="hidden" name="flag">
                    <h3 class="font-bold font-15 text-blue mb-20">Are you sure?</h3>
                    <p class="font-13 text-blue">You are about to delete your custom field. This cannot be undone. </p>
                    <div class="text-center mt-40">
                        <a href="#" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 deleteItem">Delete</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Sure modal Modal End-->


<!-- Add credits Start --->
<div class="client-follow-popup login-modal videoconsultationmodal addcreditsmodal customscroll calenderinterval-modal customscroll clientabpopup businessdetails"
    id="myclienthide">
    <div class="modal fade" id="addcreditsmodal" 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 eagle-font" id="exampleModalLabel13">Add credits</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="boxwhite mt-30">
                                <div class="sms-video-box">
                                    <img src='{{asset("assets/images/credit-box.png")}}' alt="" class="img-fluid">
                                    <h6>SMS/Video Credits</h6>
                                    <p>Use credits to send SMS messages and/or host video consultations. 15c each for
                                        purchases under $100 or 11c for purchases above. Custom pricing for orders over
                                        $1000.</p>
                                </div>
                                <div class="brdr-bttm mt-30"></div>
                                <div class="twoway-videochat">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="credit-sms-text">
                                                <h6>2 way SMS <span class="send-client-btn-geo cursor-pointer"><img
                                                            src='{{asset("assets/images/info-icon.png")}}' alt=""
                                                            class="img-fluid info-icon "></span></h6>
                                                <div class="send-client-box-geo">
                                                    <div class="media">
                                                        <img src='{{asset("assets/images/round-n-icon.png")}}'
                                                            class="align-self-start mr-2" alt="...">
                                                        <div class="media-body">
                                                            <h5 class="mt-0 text-left">2 way SMS allows patients to
                                                                respond to sent messages. There is no charge to receive
                                                                an inbound SMS</h5>
                                                        </div>
                                                    </div>
                                                </div>
                                                <p>1 credit </p>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="credit-sms-text">
                                                <h6>Video consult</h6>
                                                <p>2 credits per 15 mins</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="brdr-bttm mt-30"></div>
                                <div class="label-input">
                                    <div class="row align-items-center justify-content-center">
                                        <div class="col-lg-7 col-md-6 col-sm-6">
                                            <label>Coupon code
                                            </label>
                                        </div>
                                        <div class="col-lg-5 col-md-6 col-sm-6">
                                            <div class="form-group brdrfull">
                                                <input type="text" name="coupon_code" class="form-control text-left"
                                                    placeholder="Enter Code">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="brdr-bttm mt-30"></div>
                                <div class="label-input">
                                    <div class="row align-items-center justify-content-center">
                                        <div class="col-lg-7 col-md-6 col-sm-6">
                                            <label>Current credit balance
                                            </label>
                                        </div>
                                        <div class="col-lg-5 col-md-6 col-sm-6">
                                            <div class="form-group brdrfull">
                                                <input type="text" name="current_credit_balance"
                                                    value="{{$practitioner->credit_balance}}"
                                                    class="form-control text-left" placeholder="000">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="label-input">
                                    <div class="row align-items-center justify-content-center">
                                        <div class="col-lg-7 col-md-6 col-sm-6">
                                            <label>Purchase amount
                                            </label>
                                        </div>
                                        <div class="col-lg-5 col-md-6 col-sm-6">
                                            <div class="form-group brdrfull">
                                                <input type="number" id="puchase_amount" name="puchase_amount"
                                                    class="form-control text-left float_number_validation"
                                                    placeholder="$00.00">
                                            </div>
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="label-input">
                                    <div class="row align-items-center justify-content-center">
                                        <div class="col-lg-7 col-md-6 col-sm-6">
                                            <label>Number of credits
                                            </label>
                                        </div>
                                        <div class="col-lg-5 col-md-6 col-sm-6">
                                            <div class="form-group brdrfull">
                                                <input readonly type="text" id="no_of_credits" name="no_of_credits"
                                                    class="form-control text-left" placeholder="000">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="test-results-area labeltop mt-3">
                                    <!-- <div class="label-input">
                              <div class="row align-items-center">
                                 <div class="col-lg-7 col-md-6">
                                    <label>Auto top up</label>
                                 </div>
                                 <div class="col-lg-5 col-md-6">
                                    <div class="row">
                                       <div class="col-lg-6 col-md-6">
                                          <ul class="age-title p-0 listingli mb-0">
                                             <li><input type="radio" id="top1" name="auto_top_up" value="1">
                                                <label for="top1">Yes</label></li>
                                          </ul>
                                       </div>
                                       <div class="col-lg-6 col-md-6">
                                          <ul class="age-title p-0 listingli mb-0">
                                             <li><input type="radio" id="top2" name="auto_top_up" value="0">
                                                <label for="top2">No</label></li>
                                          </ul>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div> -->

                                    <!-- <div class="label-input">
                              <div class="row align-items-center justify-content-center">
                                 <div class="col-lg-7 col-md-6 col-sm-6">
                                    <label>Top up amount </label>
                                 </div>
                                 <div class="col-lg-5 col-md-6 col-sm-6">
                                    <div class="customdroppdown gray-brdr line-dropdown">
                                       <div class="form-group marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child brdr-btttm">
                                          <select id="top_up_amount" name="top_up_amount" class="form-control top_up_amount">
                                             <option value="$20.00">$20.00 </option>
                                             <option value="$50.00">$50.00</option>
                                             <option value="$100.00">$100.00 </option>
                                             <option value="$200.00">$200.00 </option>
                                             <option value="$500.00">$500.00 </option>
                                             <option value="$1000.00">$1000.00 </option>
                                             <option value="other">Other</option>
                                          </select>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div> -->

                                    <!-- <div class="label-input custom_amount hide">
                              <div class="row align-items-center justify-content-center">
                                 <div class="col-lg-7 col-md-6 col-sm-6">
                                    <label>Custom amount </label>
                                 </div>
                                 <div class="col-lg-5 col-md-6 col-sm-6">
                                    <div class="form-group brdrfull">
                                       <input type="number" id="custom_amount" name="custom_amount" class="form-control text-left" placeholder="000">
                                    </div>
                                 </div>
                              </div>
                           </div> -->

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="text-center">
                            <a href="#"
                                class="cardDetailsModal cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Select
                                Card</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- Add credits End  remindersModal-->

<!--- none-consultModal Modal Start --->
<div class="daymodal noneconsultModal">
    <div class="modal fade" id="none-consultModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close bttn-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="health-history-checkbox mb-0">
                        <div class="multi-pract">
                            <div class="small-bullet">
                                <div class="delete-check-icon checkedbox">
                                    <ul class="mb-0">
                                        <li>
                                            <div class="rdio rdio-primary radio-inline">
                                                <input id="radio701" type="checkbox" checked="">
                                                <label for="radio701">Initial Consultation</label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="multi-pract">
                            <div class="small-bullet">
                                <div class="delete-check-icon checkedbox">
                                    <ul class="mb-0">
                                        <li>
                                            <div class="rdio rdio-primary radio-inline">
                                                <input id="radio712" type="checkbox" checked="">
                                                <label for="radio712">Short Consultation</label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="multi-pract">
                            <div class="small-bullet">
                                <div class="delete-check-icon checkedbox">
                                    <ul class="mb-0">
                                        <li>
                                            <div class="rdio rdio-primary radio-inline">
                                                <input id="radio713" type="checkbox">
                                                <label for="radio713">None</label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="multi-pract">
                            <div class="small-bullet">
                                <div class="delete-check-icon checkedbox">
                                    <ul class="mb-0">
                                        <li>
                                            <div class="rdio rdio-primary radio-inline">
                                                <input id="radio714" type="checkbox">
                                                <label for="radio714">All</label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn-green custom-seemore mb-0 cursor-pointer">Select</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--- none-consultModal Modal End --->

<!--- sms-consultModal Modal Start --->
<div class="daymodal noneconsultModal">
    <div class="modal fade" id="sms-consultModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close bttn-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="health-history-checkbox mb-0">
                        <div class="multi-pract">
                            <div class="small-bullet">
                                <div class="delete-check-icon checkedbox">
                                    <ul class="mb-0">
                                        <li>
                                            <div class="rdio rdio-primary radio-inline">
                                                <input id="radio723" type="checkbox" checked="">
                                                <label for="radio723">SMS</label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="multi-pract">
                            <div class="small-bullet">
                                <div class="delete-check-icon checkedbox">
                                    <ul class="mb-0">
                                        <li>
                                            <div class="rdio rdio-primary radio-inline">
                                                <input id="radio722" type="checkbox">
                                                <label for="radio722">Email</label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="multi-pract">
                            <div class="small-bullet">
                                <div class="delete-check-icon checkedbox">
                                    <ul class="mb-0">
                                        <li>
                                            <div class="rdio rdio-primary radio-inline">
                                                <input id="radio721" type="checkbox">
                                                <label for="radio721">SMS & Email</label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="multi-pract">
                            <div class="small-bullet">
                                <div class="delete-check-icon checkedbox">
                                    <ul class="mb-0">
                                        <li>
                                            <div class="rdio rdio-primary radio-inline">
                                                <input id="radio720" type="checkbox">
                                                <label for="radio720">None</label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn-green custom-seemore mb-0 cursor-pointer">Select</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- contest yes modal -->
<div class="todo-list-modal clientabpopup sentmodal">
    <div class="modal fade" id="contestyesmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content mdashboard-client-followuparea">
                <div class="modal-header">
                    <button type="button" class="close bttn-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><img src='{{asset("assets/images/close-img.png")}}' alt=""
                                class="img-fluid"></span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <h3 class="font-bold font-15 text-blue mb-20">Sending to
                        {{isset($practitioner->first_name) ? ucfirst($practitioner->first_name) : ''}}
                        {{isset($practitioner->last_name) ? ucfirst($practitioner->last_name) : ''}}</h3>
                    <p class="font-13 text-blue">Thanks for taking the time to provide your information.</p>
                    <div class="text-center mt-40">
                        <a href="#" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0">Send</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- contest yes Modal -->

<!-- contest no modal -->
<div class="todo-list-modal clientabpopup sentmodal">
    <div class="modal fade" id="contestnomodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content mdashboard-client-followuparea">
                <div class="modal-header">
                    <button type="button" class="close bttn-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><img src='{{asset("assets/images/close-img.png")}}' alt=""
                                class="img-fluid"></span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <h3 class="font-bold font-15 text-blue mb-20">Please provide consent</h3>
                    <p class="font-13 text-blue">
                        {{isset($practitioner->first_name) ? ucfirst($practitioner->first_name) : ''}}
                        {{isset($practitioner->last_name) ? ucfirst($practitioner->last_name) : ''}} is unable to accept
                        your booking without a complete
                        intake form.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- contest no Modal -->

<div class="client-follow-popup login-modal settingwaitlist customscroll Health_integration customscroll clientabpopup businessdetails"
   id="myclienthide">
   <div class="modal fade health-integration-modal" id="waitlist_integration" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel13"
   aria-hidden="true" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
            <div class="popup-marg">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <img src='{{asset("assets/images/close-img.png")}}' alt=""
                           class="img-fluid">
               </button>
               <div class="modal-body">
                  <div class="health-integration-data">
                     <div class="class-eventsimg">
                        <img src='{{asset("assets/images/Premium_plan.svg")}}' alt="" class="img-fluid">
                     </div>
                     <div class="h6-title">
                        <h6 class="coming-txt-space">Premium Feature</h6>
                        <p>Easily manage client demand with the waitlist feature. Clients can add themselves via your booking link, or you can add them manually. Effortlessly track and contact them when a spot opens up. Available on the Premium Plan.
                        </p>
                     </div>
                     <div class="premium-btn">
                        <a href="{{route('practitioner.myplan')}}">
                           <button class="btn btn-fill">Upgrade to Premium</button>
                        </a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<!--- sms-consultModal Modal End --->


<!--- payment plan Primium Modal Start --->
<div class="client-follow-popup login-modal settingwaitlist customscroll Health_integration customscroll clientabpopup businessdetails"
   id="myclienthide">
   <div class="modal fade health-integration-modal" id="payment_plan_integration" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel13"
   aria-hidden="true" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
            <div class="popup-marg">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <img src='{{asset("assets/images/close-img.png")}}' alt=""
                           class="img-fluid">
               </button>
               <div class="modal-body">
                  <div class="health-integration-data">
                     <div class="class-eventsimg">
                        <img src='{{asset("assets/images/Premium_plan.svg")}}' alt="" class="img-fluid">
                     </div>
                     <div class="h6-title">
                        <h6 class="coming-txt-space">Premium Feature</h6>
                        <p>Offer flexible payment plans to make your services more accessible and affordable for clients. Available exclusively on the Premium Plan.
                        </p>
                     </div>
                     <div class="premium-btn">
                        <a href="{{route('practitioner.myplan')}}">
                           <button class="btn btn-fill">Upgrade to Premium</button>
                        </a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<!--- payment plan Primium Modal End --->


<!--- course Primium Modal Start --->
<div class="client-follow-popup login-modal settingwaitlist customscroll Health_integration customscroll clientabpopup businessdetails"
   id="myclienthide">
   <div class="modal fade health-integration-modal" id="course_premium_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel13"
   aria-hidden="true" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
            <div class="popup-marg">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <img src='{{asset("assets/images/close-img.png")}}' alt=""
                           class="img-fluid">
               </button>
               <div class="modal-body">
                  <div class="health-integration-data">
                     <div class="class-eventsimg">
                        <img src='{{asset("assets/images/Premium_plan.svg")}}' alt="" class="img-fluid">
                     </div>
                     <div class="h6-title">

                        {{-- <h6 class="coming-txt-space">Premium Feature</h6>
                        <p>Sell your expertise beyond one-on-one appointments. The Online Courses module helps you create and deliver digital courses, so you can grow your income and support more clients without increasing your hours. Available on the Premium Plan.
                        </p> --}}
                        
                        <h6 class="coming-txt-space">Online courses now in Beta testing</h6>
                        <p>Our new Courses feature will soon be available in a new $79 Premium Plan launching soon.</p>
                        <p>For a limited time, Growth Plan users ($39 per month or annual plan) can gain access to the Courses module by making a heavily discounted one-time payment. This payment will give you access to the Courses feature for as long as you remain on the Growth Plan and ensures you will never be charged the full $79 monthly price.</p>
                        <p>This offer also includes bonus resources to help you launch your course with confidence and make more sales.</p>
                        <p>If you want early access and to secure this offer, please contact support@myappointments.app. Only 15 spots are available.</p>
                     </div>
                     
                     {{-- <div class="premium-btn">
                        <a href="{{route('practitioner.myplan')}}">
                           <button class="btn btn-fill">Upgrade to Premium</button>
                        </a>
                     </div> --}}

                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<!--- course Primium Modal End --->

<!--- coupon Primium Modal Start --->
<div class="client-follow-popup login-modal settingwaitlist customscroll Health_integration customscroll clientabpopup businessdetails"
   id="myclienthide">
   <div class="modal fade health-integration-modal" id="coupon_premiumplan_integration" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel13"
   aria-hidden="true" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
            <div class="popup-marg">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <img src='{{asset("assets/images/close-img.png")}}' alt=""
                           class="img-fluid">
               </button>
               <div class="modal-body">
                  <div class="health-integration-data">
                     <div class="class-eventsimg">
                        <img src='{{asset("assets/images/Premium_plan.svg")}}' alt="" class="img-fluid">
                     </div>
                     <div class="h6-title">
                        <h6 class="coming-txt-space">Premium Feature</h6>
                        <p>Create and manage discount codes with ease. Run special promotions for new or returning clients and track their usage. Available on the Growth Plan.
                        </p>
                     </div>
                     <div class="premium-btn">
                        <a href="{{route('practitioner.myplan')}}">
                           <button class="btn btn-fill">Upgrade now</button>
                        </a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<!--- coupon Primium Modal End --->


@endsection

@section('css')
<style>
.customswitch-area .custom-control {
    float: right;
    right: 20px;
    top: 5px;
}

.custom-colordrop select::-ms-expand {
    display: none;
}

.custom-colordrop select {
    -webkit-appearance: none;
    appearance: none;
}

.custom-colordrop select option {
    border-radius: 100px;
}

.custom-colordrop select {
    position: relative;
    left: 10px;
}

.custom-colordrop .select-hidden {
    visibility: inherit !important;
}

.hide {
    display: none !important;
}

.selectedInput {
    background: none;
    color: red !important;
}

.productAdd .select2-container {
    width: 100px !important;
}

.pac-container {
    z-index: 10000 !important;
}

/* hidden updown arrow if type number */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/*end hidden updown arrow if type number */

#colorPick {
    background: #fff !important;
    border-radius: 0;
    top: 26px !important;
}

#colorPick::after {
    content: none;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 18px solid #fff;
    position: absolute;
    top: -18px;
}

.color_picker {
    border-radius: 100px;
    width: 28px;
    height: 28px;
    margin: auto;
    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;
}

/* ul.typeahead.dropdown-menu {
    max-height: 220px;
    overflow: auto;
   } */
@media (max-width: 425px) {
    .page-content {
        padding: 45px 15px 45px 15px;
    }
}

.invoicetemplatemodal {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    display: block !important;
    opacity: 1 !important;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    outline: 0;
    background-color: rgb(0 0 0 / 50%);
    transition: opacity .5s linear;
    transition-delay: 2s;
}
</style>

@endsection

@section('js')


<script src='{{ asset("assets/js/colorPick.js")}}'></script>
<script type="text/javascript">
// var pathname = window.location.pathname;
//         console.log(pathname);

// var pathname = window.location.pathname;
// alert(pathname)
//         console.log(pathname);
// Setup complete! modal jQuery 01-11-2021
$(document).on('click', '.last_skip_step', function() {

    $('.setup-complete').addClass('invoicetemplatemodal');

});

var businessId = @json($user->businessProfile->id);
var baseUrl = "{{route('home')}}";
var url = baseUrl + "/get-embeded-code?" + 'business_id=' + btoa(businessId);

$("#embed_code_div").html(
    '<a class="btn-fill" style="background:#68afb5; color:#fff; border-radius:100px; padding:12px 25px; text-decoration:none; font-weight:bold;" href="' +
    url + '">Book Now</a>');


var my_product_model = "{{ Session::has('myorder-redirect') }}";

if (my_product_model != "") {
    $(window).on('load', function() {
        $(".product-redirect").closest("li").find(".call-modal").trigger("click");
        my_product_model++;
    });
}


$('input').attr('autocomplete', 'off');
$(document).on('keyup', '.float_number_validation', function() {
    this.value = this.value
        .replace(/[^\d.]/g, '') // numbers and decimals only
        .replace(/(^[\d]{10})[\d]/g, '$1') // not more than 2 digits at the beginning
        .replace(/(\..*)\./g, '$1') // decimal can't exist more than once
        .replace(/(\.[\d]{2})./g, '$1'); // not more than 4 digits after decimal

});


$(document).ready(function() {
    $(".js-example-basic-single").select2({
        minimumResultsForSearch: -1
    });
});


$(".single-select2").select2({
    placeholder: function() {
        $(this).data('placeholder');
    },
    closeOnSelect: true,
    dropdownPosition: 'below',
});



//timepicker
// $('.timepicker').mdtimepicker({
//    theme: 'blue',
//    useCurrent: false,
// });

$(".toggleopenclickModal").click(function() {
    $('#PractitionerCardListModal').modal('toggle');
});
$(".timepicker").each(function() {
    $(this).mdtimepicker({
        theme: 'blue',
        useCurrent: false
    });
});

$(".openModelPopup").click(function() {
    //$("#openclickModal").hide();
    $('#paymentgatewayModal').modal('toggle');
});

$(document).on('change', '.switch-on-off', function(event) {
    if ($(this).prop('checked')) {
        $(this).next('.hidden-switch-input').val("on");
    } else {
        $(this).next('.hidden-switch-input').val("off");
    }
});
/** Change color on change */
$(document).on('change', '.color-picker-dropdown', function(event) {
    var color = $(this).find(':selected').data('color');
    $(this).css('background-color', color);
});


$('#card_add_practitioner').parsley();
$("#card_add_practitioner").submit(function(e) {
    e.preventDefault();
    $(".profile-form-error").hide();
    if ($(this).parsley().isValid()) {
        var modal = $("#PractitionerCardAddModal")
        $.ajax({
            url: $(this).attr("action"),
            data: $(this).serialize(),
            type: 'POST',
        }).done(function(response) {
            console.log();
            if (response.status == "success") {
                Swal.fire({
                    icon: response.status,
                    title: response.message,
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    }
                });
                modal.modal("hide");
                $("#card_add_practitioner")[0].reset();
            } else {
                $.each(response.errors, function(key, value) {
                    var input = $('input[name=' + key + ']');
                    var parent = input.parent().next('.invalid-feedback').text(value[0]);
                    input.addClass('is-invalid');
                    var input = $('input[name=' + key + ']');
                    var parent = input.next('.invalid-feedback').text(value[0]);
                    input.addClass('is-invalid');
                });

                setTimeout(function() {
                    $('.invalid-feedback').text('');
                }, 3000);
            }
        });
    }
});

$(document).find('.modal').on('hidden.bs.modal', function() {
    $("#PractitionerCardAddModal").find('form').trigger('reset');
    $("#PractitionerCardAddModal").find(".invalid-feedback").text("");
    var html =
        ' <div class="customise-title-box customdroppdown gray-brdr question_to_client_child_div"> <div class="row align-items-center"> <div class="col-lg-5 col-md-5"> <div class="form-group white-bg align-middle"> <textarea name="client_question[]" class="w-100 small-input autosizetextaria" placeholder="Enter question" ></textarea> <span class="invalid-feedback d-block"></span> </div> </div> <div class="col-lg-3 col-md-4 line-dropdown"> <div class="form-group marg-bttm online-dropdown align-middle select-dropdown avalable-drop hide-first-child"> <select id="mounth833" name="question_type[]" class="form-control myselection" style="margin-top: -7px;"> <option value="button">Yes/No</option> <option value="text">Written answer</option> </select> </div> </div> <div class="col-lg-3 col-md-3"> <div class="media mb-md-4 mb-0 add-list-text cursor-pointer" id="question_to_client"> <img src="{{asset("assets/images/green-white-plus.svg")}}" class="plus-icon-new mCS_img_loaded" alt="..."> <div class="media-body"> <h5 class="mt-0"><a>Add question</a></h5> </div> </div> </div> </div> <br> </div>';
    $('.question_to_client_div').empty();
    $('.question_to_client_div').append(html);
    getSectionQuestion('form');

    $('textarea[name="header"').val('');
    $('textarea[name="introductory_text"').val('');
    $('textarea[name="client_question[]"').val('');
    $('input[name="section_question_id[]"').val('');
    $('input[name="section_id"').val('');
    $(".invalid-feedback").text('');
});




//Start Reminders Module
// $('#addReminder').parsley();
$("#addReminder").submit(function(e) {
    e.preventDefault();
    $(".profile-form-error").hide();
    if ($(this).parsley().isValid()) {
        var modal = $("#remindersModal");
        $.ajax({
            url: $(this).attr("action"),
            data: $(this).serialize(),
            type: 'POST',
        }).done(function(response) {
            if (response.status == "success") {
                getSetupWizardStatus();
                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");
                setTimeout(function() {
                    location.reload();
                }, 2000);

            } else {
                $.each(response.errors, function(key, value, i) {
                    var input = $('input[name=' + key + ']');
                    var parent = input.parent().next('.invalid-feedback').text(value[0]);
                    var textarea = $('textarea[name=' + key + ']');
                    var parent = textarea.parent().next('.invalid-feedback').text(value[0]);
                    input.addClass('is-invalid');
                });
            }
        });
    }
});

// $('#addBookingConfirmation').parsley();
$("#addBookingConfirmation").submit(function(e) {
    e.preventDefault();
    $(".profile-form-error").hide();
    if ($(this).parsley().isValid()) {
        var modal = $("#booking-confirmation");
        $.ajax({
            url: $(this).attr("action"),
            data: $(this).serialize(),
            type: 'POST',
        }).done(function(response) {
            if (response.status == "success") {
                // getSetupWizardStatus();
                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");
                setTimeout(function() {
                    location.reload();
                }, 2000);

            } else {
                $.each(response.errors, function(key, value, i) {
                    var input = $('input[name=' + key + ']');
                    var parent = input.parent().next('.invalid-feedback').text(value[0]);
                    var textarea = $('textarea[name=' + key + ']');
                    var parent = textarea.parent().next('.invalid-feedback').text(value[0]);
                    input.addClass('is-invalid');
                });
            }
        });
    }
});

//Start calendar interval


//Start activeInactive waiting list
$('#activeInactiveWaitlist').parsley();
$("#activeInactiveWaitlist").submit(function(e) {
    e.preventDefault();
    $(".profile-form-error").hide();
    if ($(this).parsley().isValid()) {
        var modal = $("#activeInactiveWaitlistModal");
        $.ajax({
            url: $(this).attr("action"),
            data: $(this).serialize(),
            type: 'POST',
        }).done(function(response) {
            console.log(response.status);
            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();
                // $(".waitList[value='" + response.data.waiting_list_status + "']").prop('checked', true);
            }
        });
    }
});
$('#two_factor_authentication_2fa').parsley();
$("#two_factor_authentication_2fa").submit(function(e) {
    e.preventDefault();
    $(".profile-form-error").hide();
    if ($(this).parsley().isValid()) {
        var modal = $("#two_factor_authentication");
        $.ajax({
            url: $(this).attr("action"),
            data: $(this).serialize(),
            type: 'POST',
        }).done(function(response) {
            console.log(response.status);
            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();
                // $(".waitList[value='" + response.data.waiting_list_status + "']").prop('checked', true);
            }
        });
    }
});


//Add holiday
// $(document).on('click','.add-more-holiday',function(){
//    var  row = $(this).closest('.addingHolidays').clone();
//    row.find('.holidayTitle').addClass('hide');
//    row.find('.holidayId').val('');
//    row.find('.add-more-holiday').addClass('remove-holiday').removeClass('add-more-holiday').children('img').prop('src','../../assets/images/trash-icon-green.svg').prop('class','img-fluid max-34 t-brdr mCS_img_loaded');
//    $('.addingHolidays').last().after(row);
// });

// $(document).on('click', '#getpractitionercardlist', function() {
//    $("#paymentgatewayModal").modal('hide');
//    $(".loading").show();
//    $.ajax({
//       url: "{{ route('practitioner.settings.practitionercardlist')}}",
//       type: 'GET',
//    }).done(function(response) {
//       //console.log(response.data);
//       $(".loading").hide();
//       if (response.status == "success") {
//          if (response.data) {
//             var value = response.data;
//             var html = '';
//             for (var i = 0; i < value.length; i++) {
//                //    alert(value[i].card_number);
//                html += '<div class="titl-cancel-btn"><div class="form-group form-check mb-0"><img class="img-fluid mob-w-30 mr-3" src="' + value[i].card_logo + '"><label class="form-check-label text-blue font-15" for="exampleCheck1">' + value[i].card_number + '</label></div></div>';
//             }
//             $(".allcardofpractitioner").html(html);
//             $("#PractitionerCardListModal").modal('show');
//          } else {
//             var hhtml = ''
//             hhtml += '<div class="titl-cancel-btn"><div class="form-group form-check mb-0"><span style="padding-right: 10px;"></span><label class="form-check-label text-blue font-15" for="exampleCheck1">' + response.message + '</label></div></div>';
//             $(".allcardofpractitioner").html(hhtml);
//             $("#PractitionerCardListModal").modal('show');
//          }
//       }
//       /*<div class="titl-cancel-btn"><div class="form-group form-check mb-0"><input type="checkbox" class="form-check-input" id="exampleCheck1"><label class="form-check-label text-blue font-15" for="exampleCheck1">'+value[i].card_number+'</label></div></div>*/
//    });
// });

$(document).on('click', '.storeMerchantId', function() {
    $.ajax({
        url: "{{ route('practitioner.settings.storeMerchantId')}}",
        data: {
            merchant_id: $('input[name="merchantId"]').val()
        },
        type: 'POST',
    }).done(function(response) {
        if (response.status == "success") {
            Swal.fire({
                icon: response.status,
                title: 'Success!',
                text: response.msg,
                showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                }
            });
            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');
            });
        }
    });
});




// display hide div through selection
showHideReminderInput($("select.send_first_reminder_via").val(), 'first');
showHideReminderInput($("select.send_second_reminder_via").val(), 'second');


$(".selprepo").change(function() {

    var val = $(this).val();
    console.log("val: " + val);
    if (val != "" && val != null) {
        var id = $(this).closest(".main-div").find('.append-text').attr("id");
        console.log(id);
        insertAtCaret(id, val);
    }


});


function insertAtCaret(areaId, text) {
    var txtarea = document.getElementById(areaId);
    if (!txtarea) {
        return;
    }

    var scrollPos = txtarea.scrollTop;
    var strPos = 0;
    var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
        "ff" : (document.selection ? "ie" : false));
    if (br == "ie") {
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart('character', -txtarea.value.length);
        strPos = range.text.length;
    } else if (br == "ff") {
        strPos = txtarea.selectionStart;
    }

    var front = (txtarea.value).substring(0, strPos);
    var back = (txtarea.value).substring(strPos, txtarea.value.length);
    txtarea.value = front + text + back;
    strPos = strPos + text.length;
    if (br == "ie") {
        txtarea.focus();
        var ieRange = document.selection.createRange();
        ieRange.moveStart('character', -txtarea.value.length);
        ieRange.moveStart('character', strPos);
        ieRange.moveEnd('character', 0);
        ieRange.select();
    } else if (br == "ff") {
        txtarea.selectionStart = strPos;
        txtarea.selectionEnd = strPos;
        txtarea.focus();
    }

    txtarea.scrollTop = scrollPos;
    $('.selprepo').val('').trigger('change');
}

$("select.send_first_reminder_via").change(function() {
    showHideReminderInput($(this).children("option:selected").val(), 'first');
});

$("select.send_second_reminder_via").change(function() {
    showHideReminderInput($(this).children("option:selected").val(), 'second');
});

function showHideReminderInput(value, flag) {
    if (value == 3) {
        $(".send_" + flag + "_email_subject").removeClass('hide');
        $(".send_" + flag + "_email_reminder_text").removeClass('hide');
        $(".send_" + flag + "_sms_reminder_text").removeClass('hide');
        $("#send_" + flag + "_email_subject").attr('required', true);
        $("#send_" + flag + "_email_reminder_text").attr('required', true);
        $("#send_" + flag + "_sms_reminder_text").attr('required', true);
    }
    if (value == 2) {
        //email
        $(".send_" + flag + "_email_subject").removeClass('hide');
        $(".send_" + flag + "_email_reminder_text").removeClass('hide');
        $(".send_" + flag + "_sms_reminder_text").addClass('hide');
        //$("#send_" + flag + "_sms_reminder_text").val('');
        $("#send_" + flag + "_email_subject").attr('required', true);
        $("#send_" + flag + "_email_reminder_text").attr('required', true);
        $("#send_" + flag + "_sms_reminder_text").attr('required', false);
    }
    if (value == 1) {
        //text
        $(".send_" + flag + "_email_subject").addClass('hide');
        $(".send_" + flag + "_email_reminder_text").addClass('hide');
        $(".send_" + flag + "_sms_reminder_text").removeClass('hide');
        //$("#send_" + flag + "_email_subject").val('');
        // $("#send_" + flag + "_email_reminder_text").val('');
        $("#send_" + flag + "_sms_reminder_text").attr('required', true);
        $("#send_" + flag + "_email_subject").attr('required', false);
        $("#send_" + flag + "_email_reminder_text").attr('required', false);
    }
    if (value == 0) {
        //none
        $(".send_" + flag + "_email_subject").addClass('hide');
        $(".send_" + flag + "_email_reminder_text").addClass('hide');
        $(".send_" + flag + "_sms_reminder_text").addClass('hide');
        // $("#send_" + flag + "_email_subject").val('');
        // $("#send_" + flag + "_email_reminder_text").val('');
        // $("#send_" + flag + "_sms_reminder_text").val('');
        $("#send_" + flag + "_email_subject").attr('required', false);
        $("#send_" + flag + "_email_reminder_text").attr('required', false);
        $("#send_" + flag + "_sms_reminder_text").attr('required', false);
    }
}



if ($("select.send_second_reminder_time").children("option:selected").val() == 'None') {
    $(".second_send_via").addClass('hide');
    $(".send_second_email_subject").addClass('hide');
    $(".send_second_email_reminder_text").addClass('hide');
    $(".send_second_sms_reminder_text").addClass('hide');
    $("#send_second_email_subject").attr('required', false);
    $("#send_second_email_reminder_text").attr('required', false);
    $("#send_second_sms_reminder_text").attr('required', false);
}

$("select.send_second_reminder_time").change(function() {
    if ($(this).children("option:selected").val() == 'None') {
        $(".second_send_via").addClass('hide');
        $(".send_second_email_subject").addClass('hide');
        $(".send_second_email_reminder_text").addClass('hide');
        $(".send_second_sms_reminder_text").addClass('hide');
        $("#send_second_email_subject").attr('required', false);
        $("#send_second_email_reminder_text").attr('required', false);
        $("#send_second_sms_reminder_text").attr('required', false);
    } else {
        $(".second_send_via").removeClass('hide');
        $(".send_second_email_subject").addClass('hide');
        $(".send_second_email_reminder_text").addClass('hide');
        $(".send_second_sms_reminder_text").removeClass('hide');
        $("#send_second_email_subject").attr('required', false);
        $("#send_second_email_reminder_text").attr('required', false);
        $("#send_second_sms_reminder_text").attr('required', true);
    }
});

// change text color
// $("#send_first_sms_reminder_text").css('color', '#24303f');
$("#send_first_email_subject").css('color', '#24303f');
$("#send_first_email_reminder_text").css('color', '#24303f');
$("#send_second_sms_reminder_text").css('color', '#24303f');
$("#send_second_email_subject").css('color', '#24303f');
$("#send_second_email_reminder_text").css('color', '#24303f');
$(".holidayTitle").css('color', '#24303f');

//end



//Start count string

/*$(".sms_first_text").text((countString($('#send_first_sms_reminder_text').val().length)));
$('#send_first_sms_reminder_text').on('input', function() {
    $(".sms_first_text").text(countString($(this).val().length));
});*/

/*$(".sms_second_text").text((countString($('#send_second_sms_reminder_text').val().length)));
$('#send_second_sms_reminder_text').on('input', function() {
    $(".sms_second_text").text(countString($(this).val().length));
});*/

/*$(".sms_booking_text").text((countString($('#sms_reminder_text').val().length)));
$('#sms_reminder_text').on('input', function() {
    $(".sms_booking_text").text(countString($(this).val().length));
});*/
</script>
<script type="text/javascript">
$(".cancellationbtn").hover(function() {
    $(".cancellationmsg").toggle();
});

$(".innerNotify").hover(function() {
    $(".inner-notify-box").toggle();
});

$(".innerOrder").hover(function() {
    $(".inner-order-box").toggle();
});

$(".notify_credit_btn").hover(function() {
    $(".notify_credit_toggle").toggle();
});

$(".notify_credit_btn2").hover(function() {
    $(".notify_credit_toggle2").toggle();
});

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

$(".allow_2_way_sms_btn").hover(function() {
    $(".allow_2_way_sms_box").toggle();
});


$('#send_reminder_for_practitioner').select2({
    placeholder: "Select appointment",
    tokenSeparators: [",", " "],
});

///////////


$('#importCsvFile').parsley();
$("#importCsvFile").on('submit', function(e) {
    e.preventDefault();

    var _this = $(this);
    if ($(this).parsley().isValid()) {
        var modal = $("#importexportmodal");
        $.ajax({
            url: $(this).attr("action"),
            data: new FormData($(this)[0]),
            type: 'POST',
            processData: false,
            contentType: false,
            dataType: "JSON",
            beforeSend: function(msg) {
                $(".loading").addClass("d-block");
            },
        }).done(function(response) {
            $(".loading").removeClass("d-block");

            console.log(response);

            if (response.status == 'error') {

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

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

            if (response.status == "success") {

                modal.modal("hide");
                var table_fields = response.table_fields;
                var csv_headers = response.csv_headers;
                var file_name = response.file_name;
                var file_path = response.file_path;

                $("#file_name").val(file_name);
                $("#file_path").val(file_path);

                var html_data = '';

                for (var i = 0; i < table_fields.length; i++) {
                    html_data += '<tr>';
                    html_data += '<td class="text-left font-12">' + table_fields[i].value + '</td>';

                    html_data += '<td class="text-left font-12">';
                    html_data += '<select name="field_value[' + table_fields[i].key +
                        ']" id="field_id_' + i + '">';
                    html_data += '<option selected value="" >- Do not import -</option>';

                    for (var j = 0; j < csv_headers.length; j++) {
                        html_data += '<option value="' + j + '">' + csv_headers[j] + '</option>';
                    }

                    html_data += '</select>';
                    html_data += '</td>';

                }

                $("#import-into-tbody").html(html_data);

                $("#importsteptwomodal").modal("show");

            } else {
                $.each(response.errors, function(key, value, i) {
                    var [before, after] = key.split(".");
                    var input = _this.find('input[name="' + before + '[]"]');
                    var span = _this.find('input[name="' + before + '[]"]').parent().next();
                    var da = span[after];
                    da.append(value[0].replace(key, before));
                });
                setTimeout(function() {
                    $('.invalid-feedback').text('');
                }, 3000);
            }
        }).fail(function(error) {
            $(".loading").removeClass("d-block");
        });;
    }
});

// OLD CODE TO IMPORT FILES
$('#importDatastore').parsley();
$("#importDatastore").on('submit', function(e) {
    e.preventDefault();
    var selectedDays = new Array();;
    $(".be-select").each(function() {
        var arr = new Array();;
        $(this).find("input").each(function(index) {
            if ($(this).is(":checked")) {
                arr.push(1);
            } else {
                arr.push(0);
            }
        });
        selectedDays.push(arr);
    });

    var datas = new FormData($(this)[0]);
    /*var selectedDays = JSON.stringify(selectedDays);
    datas.append('selectedDays', selectedDays);*/

    var _this = $(this);
    if ($(this).parsley().isValid()) {
        var modal = $("#importsteptwomodal");
        $.ajax({
            url: $(this).attr("action"),
            data: datas,
            type: 'POST',
            processData: false,
            contentType: false,
            beforeSend: function(msg) {
                $(".loading").addClass("d-block");
            },
        }).done(function(response) {
            $(".loading").removeClass("d-block");
            if (response.status == 'error') {

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

            if (response.status == 'warning') {

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

            if (response.status == "success") {
                Swal.fire({
                    icon: response.status,
                    title: response.msg,
                    // 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 [before, after] = key.split(".");
                    var input = _this.find('input[name="' + before + '[]"]');
                    var span = _this.find('input[name="' + before + '[]"]').parent().next();
                    var da = span[after];
                    da.append(value[0].replace(key, before));
                });
                setTimeout(function() {
                    $('.invalid-feedback').text('');
                }, 3000);
            }
        }).fail(function(error) {
            $(".loading").removeClass("d-block");
        });;
    }
});




//////////////////////////
//Store business details

$('#businessDetailsAdd').parsley();
$("#businessDetailsAdd").on('submit', function(e) {
    e.preventDefault();
    var selectedDays = new Array();;
    $(".be-select").each(function() {
        var arr = new Array();;
        $(this).find("input").each(function(index) {
            if ($(this).is(":checked")) {
                arr.push(1);
            } else {
                arr.push(0);
            }
        });
        selectedDays.push(arr);
    });

    var datas = new FormData($(this)[0]);
    var selectedDays = JSON.stringify(selectedDays);
    datas.append('selectedDays', selectedDays);

    var _this = $(this);
    if ($(this).parsley().isValid()) {
        var modal = $("#businessdetailsModal");
        $.ajax({
            url: $(this).attr("action"),
            data: datas,
            type: 'POST',
            processData: false,
            contentType: false,

        }).done(function(response) {

            // if (response.status == 'error') {

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

            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 {
                $(".invalid-feedback").text('');
                $.each(response.errors, function(key, value, i) {
                    var [before, after] = key.split(".");
                    var input = modal.find('input[name="' + before + '[]"]');
                    var span = modal.find('input[name="' + before + '[]"]').parent().next();
                    var da = span[after];
                    da.append(value[0].replace(key, before));
                });
                // setTimeout(function() {
                //    $('.invalid-feedback').text('');
                // }, 3000);
            }

        });
    }
});
//end

/*Business details */

//Remove additional location
$('.removeLocationDiv').click(function() {
    var row = $(this).parent().parent().parent().parent().parent().parent().next('.businessDetails');
    row.remove();
    //console.log(row.find('.businessDetails'));
});


//Add more business details
$(document).on('click', '.addAdditionalLocation', function(event) {
    var row = $('#businessDetails').clone();
    row.find('input[type=checkbox]').prop('checked', false);
    row.find('input[name="id[]"]').prop('value', '');
    // row.find('input[name="name[]"]').prop('value', '');
    row.find('input[name="phone_number[]"]').prop('value', '');
    row.find('input[name="address[]"]').prop('value', '');
    // row.find('input[name="email[]"]').prop('value', '');
    // row.find('input[name="abn[]"]').prop('value', '');
    // row.find('input[name="website[]"]').prop('value', '');
    row.find('input[type=checkbox]').prop('checked', false);
    // row.find("input[name*='_time']").each(function(element) {
    //    $(this).parent().parent().parent().parent().parent().parent().parent().css('display', 'none')
    //    return $(this).val('12:00 AM');
    // });

    row.find('.timepicker').each(function(element) {
        $(this).mdtimepicker({
            theme: 'blue',
            useCurrent: false
        });
    });

    var uniqueId = Math.random();
    row.find('.indemnity_yes').prop('id', uniqueId);
    row.find('.indemnity_yes').next().prop('for', uniqueId);

    var uniqueId = Math.random();
    row.find('.indemnity_no').prop('id', uniqueId);
    row.find('.indemnity_no').next().prop('for', uniqueId);

    generateUniqueField(row, '.mondays');
    generateUniqueField(row, '.tuesdays');
    generateUniqueField(row, '.wednesdays');
    generateUniqueField(row, '.thursdays');
    generateUniqueField(row, '.fridays');
    generateUniqueField(row, '.saturdays');
    generateUniqueField(row, '.sundays');

    /* example   generateUniqueField
       // var uniqueId = Math.random();
       // row.find('input[name=tuesday]').prop('id', uniqueId);
       // row.find('input[name=tuesday]').next().prop('for', uniqueId);
    */
    row += '<span>bahadursf</span>';
    $('.appendBusinessDetails').last().after(row);
});

function generateUniqueField(row, day) {
    var uniqueId = Math.random();
    row.find(day).prop('id', uniqueId);
    row.find(day).next().prop('for', uniqueId);
    row.find(day.slice(0, -1)).css('display', 'none');
    //return row;
}
//end

//Checked-Unchecked Days
$(document).on('click', '.be-select', function(event) {
    if (event.target.value == 'monday') {
        var monday = $(this).closest('div').parent().parent().parent().next();
        resetValue(monday, 'monday_');
    }
    if (event.target.value == 'tuesday') {
        var tuesday = $(this).closest('div').parent().parent().parent().next().next();
        resetValue(tuesday, 'tuesday_');
    }
    if (event.target.value == 'wednesday') {
        var wednesday = $(this).closest('div').parent().parent().parent().next().next().next();
        resetValue(wednesday, 'wednesday_');
    }
    if (event.target.value == 'thursday') {
        var thursday = $(this).closest('div').parent().parent().parent().next().next().next().next();
        resetValue(thursday, 'thursday_');
    }
    if (event.target.value == 'friday') {
        var friday = $(this).closest('div').parent().parent().parent().next().next().next().next().next();
        resetValue(friday, 'friday_');
    }
    if (event.target.value == 'saturday') {
        var saturday = $(this).closest('div').parent().parent().parent().next().next().next().next().next()
            .next();
        resetValue(saturday, 'saturday_');
    }
    if (event.target.value == 'sunday') {
        var sunday = $(this).closest('div').parent().parent().parent().next().next().next().next().next().next()
            .next();
        resetValue(sunday, 'sunday_');
    }
});

function resetValue(day, flag) {
    day.toggle("show");
    day.find("input[name*=" + flag + "start_time]").val('9:00 AM');
    day.find("input[name*=" + flag + "end_time]").val('5:00 PM');
    day.find("input[name*=" + flag + "break_start_time]").val('12:00 PM');
    day.find("input[name*=" + flag + "break_end_time]").val('1:00 PM');
    // day.find("input[name*=" + flag + "]").each(function(element) {
    //    return $(this).val('12:00 AM');
    // });
}
//end

/* Indemnity insurance */
$(document).on('click', '.indemnity_insurance_yes', function(event) {
    $(this).parent().next().val(1);
    var row = $(this).next();
    row.find('.indemnity_no').prop('checked', false);
});

$(document).on('click', '.indemnity_insurance_no', function(event) {
    $(this).parent().next().val(0);
    var row = $(this).prev();
    row.find('.indemnity_yes').prop('checked', false);
});
/*End*/

/*auto google address*/
$("body").on('input', '.google_address1', function() {
    var input = $(this);
    var options = {
        types: ['geocode']
        //    componentRestrictions: { country: 'uk' } //Turkey only
    };
    var autocomplete = new google.maps.places.Autocomplete(input[0]);
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();
        // $("#latitude").val(place.geometry.location.lat());
        // $("#longitude").val(place.geometry.location.lng());
    });
});
/*end google address*/
/*Business details End*/


$("#storeShippingDetails").submit(function(e) {
    e.preventDefault();
    $(".profile-form-error").hide();
    if ($(this).parsley().isValid()) {
        var modal = $("#shippingmodal");
        $.ajax({
            url: $(this).attr("action"),
            data: $(this).serialize(),
            type: 'POST',
        }).done(function(response) {
            if (response.status == "success") {
                Swal.fire({
                    icon: response.status,
                    title: response.msg,
                    //text: '',
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    }
                });
                modal.modal("hide");
                setTimeout(function() {
                    location.reload();
                }, 2000);
            } else {
                Swal.fire({
                    icon: 'error',
                    title: response.msg,
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    }
                });

                $(".invalid-feedback").text('');
                $.each(response.errors, function(key, value, i) {
                    var [before, after] = key.split(".");
                    var input = modal.find('input[name="' + before + '[]"]');
                    var span = modal.find('input[name="' + before + '[]"]').parent().next();
                    var da = span[after];
                    da.append(value[0].replace(key, before));
                });
            }
        });
    }
});
</script>


<!-- intake form -->
<script>
$(document)
    .one('focus.autoExpand2', 'textarea.autoExpand2', function() {
        var savedValue = this.value;
        this.value = '';
        this.baseScrollHeight = this.scrollHeight;
        this.value = savedValue;
    })
    .on('input.autoExpand2', 'textarea.autoExpand2', function() {

        var minRows = this.getAttribute('data-min-rows') | 0,
            rows;
        this.rows = minRows;
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 25);
        this.rows = minRows + rows;
    });

$("#picker1").colorPick({
    'initialColor': '#8e44ad',
    'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad",
        "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1"
    ],
    'onColorSelected': function() {
        console.log("The user has selected the color: " + this.color)
        this.element.css({
            'backgroundColor': this.color,
            'color': this.color
        });
    }
});

function dragNdrop(event) {
    var fileName = URL.createObjectURL(event.target.files[0]);
    var preview = document.getElementById("preview");
    var previewImg = document.createElement("img");
    previewImg.setAttribute("src", fileName);
    preview.innerHTML = "";
    preview.appendChild(previewImg);

}

function dragNdropnew(event) {
    var fileName = URL.createObjectURL(event.target.files[0]);
    var preview = document.getElementById("previewnew");
    var previewImg = document.createElement("img");



    previewImg.setAttribute("src", '{{asset("assets/images/setting-img-6.svg")}}');
    previewImg.setAttribute("class", "maxw-56");
    preview.innerHTML = "";
    preview.appendChild(previewImg);

    /* if(fileName){

     $('#previewnew').prepend('<img id="theImg" src="theImg.png" />');

     }*/

    //alert(fileName);

}

function drag() {
    document.getElementById('uploadFile').parentNode.className = 'draging dragBox';
}

function drop() {
    document.getElementById('uploadFile').parentNode.className = 'dragBox';
}

$(document).ready(function() {

    // function storeSetupWizard(step, status) {
    //    $.ajax({

    //       type: 'POST',
    //       data: {
    //          "step": step,
    //          "status": status
    //       },
    //    }).done(function(response) {
    //       if (response.status == "success") {

    //       }
    //    });
    // }

    $('#fromCalendar').datepicker({
        //format: "yyyy-mm-dd",
        format: "dd/mm/yy",
        weekStart: 1,
        todayHighlight: true,
        autoclose: true,
        clearBtn: false,
        startDate: '-',
        saveBtn: true,
    });

    $("#fromCalendar").datepicker().datepicker("setDate", new Date());
    $('#toCalendar').datepicker({
        //format: "yyyy-mm-dd",
        format: "dd/mm/yy",
        weekStart: 1,
        todayHighlight: true,
        autoclose: true,
        clearBtn: false,
        startDate: '-',
    });

    $("#toCalendar").datepicker().datepicker("setDate", new Date());
    var startDate = new Date('01/01/2012');
    var FromEndDate = new Date();
    var ToEndDate = new Date();
    ToEndDate.setDate(ToEndDate.getDate() + 365);
    // $('#fromCalendar').datepicker({
    //       weekStart: 1,
    //       startDate: '01/01/2012',
    //       endDate: FromEndDate,
    //       autoclose: true
    //    })
    //    .on('changeDate', function(selected) {
    //       startDate = new Date(selected.date.valueOf());
    //       startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
    //       $('#toCalendar').datepicker('setStartDate', startDate);
    //       $("#toCalendar").datepicker().datepicker("setDate", startDate);
    //    });

    $('#toCalendar')
        .datepicker({
            weekStart: 1,
            startDate: startDate,
            endDate: ToEndDate,
            autoclose: true
        })
        .on('changeDate', function(selected) {
            FromEndDate = new Date(selected.date.valueOf());
            FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
            //$('#from-calendar').datepicker('setEndDate', FromEndDate);
        });

    $(".send-client-btn-geo").hover(function() {
        $(".send-client-box-geo").toggle();
    });

    $(".send-client-btn-geo-cancel").hover(function() {
        $(".send-client-box-geo-cancel").toggle();
    });


    $(".sms-reminder-btn-geo").hover(function() {
        $(".sms-reminder-box-geo").toggle();
    });

    $(".booking-leadtime").hover(function() {
        $(".booking-leadtime-geo").toggle();
    });

    $("#daymodalpop").click(function() {
        $("#myclienthide").hide();
    });

    $("#invoicetemphide").click(function() {
        $("#clientintakehide").hide();
    });

    $("#holidaymult-modal").click(function() {
        $("#holidaysModal").hide();
    });

    $("#videoconsultantmulti").click(function() {
        $("#holidaysModal").hide();
    });

    $("#vimult-modal").click(function() {
        $("#videoconsultationmodal").hide();
    });

    // $(".sure-modal").click(function() {
    //    $(".settingintakeModal").hide();
    // });

    // $(".view-intakeform").click(function() {
    //    $(".settingintakeModal").hide();
    // });

    $('.g-p-box').click(function() {
        var html = '';
        html +=
            '<div class="title-health-box customize_health_history_div"> <div class="media"> <h4 class="font-15 font-bold "><input type="text" placeholder="Header" class="form-control" name="health_history_header[]" style="color:#24303f;    font-weight: 600;font-size: 15px;"><span class="title-health-toogle"><a href="#" class="toogle-x remove_g_p_box"><img src="{{asset("assets/images/x-img.png")}}" alt=""></a></span></h4> <div class="form-group"> <input type="text" name="descriptive_text[]" class="form-control" placeholder="Descriptive text." style="font-weight:500"> </div> </div> </div>';
        $(this).parent().before(html);
        $('.g-p-box-open').css('margin-top', '30px');

        $('.remove_g_p_box').click(function() {
            $(this).parent().parent().parent().parent().remove();
        });
    });

    $('#nonconsult').click(function() {
        $('.remindersModal').hide()
    });

    $('#smsconsultModal').click(function() {
        $('.remindersModal').hide()
    });

    $("#abc8").click(function() {
        $(".boxyes-show").toggle();
    });

    var highestBox = 0;
    $('.setting-box-area .settingbox').each(function() {
        if ($(this).height() > highestBox) {
            highestBox = $(this).height();
        }
    });
    $('.setting-box-area .settingbox').height(highestBox);
    $(".submit").click(function() {
        return false;
    })

    $(".cbox-open").click(function() {
        $(".nobox-none").show();
        $("#hh-title").prop('checked', true);
    });

    $(".cbox-hide").click(function() {
        $(".nobox-none").hide();
        $("#hh-title").prop('checked', false);
    });

    $(".cque-open").click(function() {
        $(".cnobox-none").show();
    });

    $(".cque-hide").click(function() {
        $(".cnobox-none").hide();
    });

    var current_complaint = $("input[name='current_complaint']:checked").val();
    if (current_complaint == 0) {
        $(".cnobox-none").hide();
    } else {
        $(".cnobox-none").show();
    }

    var health_history = $("input[name='health_history']:checked").val();
    if (health_history == 1) {
        $(".nobox-none").show();
    } else {
        $(".nobox-none").hide();
    }
});


$('#intakeForm').parsley();
$("#intakeForm").submit(function(e) {
    e.preventDefault();
    $(".profile-form-error").hide();
    if ($(this).parsley().isValid()) {
        $(".loading").show();
        var modal = $("#openIntakeFormModal");
        $.ajax({
            url: $(this).attr("action"),
            data: $(this).serialize(),
            type: 'POST',
        }).done(function(response) {
            $(".loading").hide();
            if (response.status == "success") {
                modal.modal("hide");
                if (response.setupWizard == 0) {
                    $("#invoicefilterpopModal").modal("show");
                    // $('.setup-complete').addClass('invoicetemplatemodal');

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

                    setTimeout(function() {
                        window.location.reload();
                    }, 3000);
                }
            } 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');
                });
            }
        });
    }
});


//$(".").click(function() {
$(document).on('click', ".remove_item", function() {
    if ($(this).data('id') == 0) {
        //console.log($(this).parent().parent());
        $(this).parent().parent().parent().remove();
        return false;
    }
    $("input[name='item_id']").val($(this).data('id'));
    $("input[name='flag']").val($(this).data('flag'));
    $("input[name='itemName']").val($(this).data('name'));
    $('#confirmModal').modal("show");
});

$(document).on('click', ".edit_item", function() {
    $("input[name='editQuestionId']").val($(this).data('id'));
    $("input[name='editQuestion']").val($(this).data('name'));
    // $("input[name='itemName']").val($(this).data('name'));
    $('#EditQuestionModal').modal("show");
});

$(document).on('click', ".edit_section", function() {
    // $("input[name='editSectionId']").val($(this).data('id'));
    // $("input[name='title']").val($(this).data('title'));
    // $("textarea[name='introductory_text']").val($(this).data('text'));
    // $('#EditSectionModal').modal("show");

    $.ajax({
        url: "{{route('practitioner.settings.get_section')}}",
        type: 'POST',
        data: {
            sectionId: $(this).data('id')
        },
    }).done(function(response) {

        var position = $("#customise-your-section").position();
        console.log('1234', position);
        $('#mCSB_51_container').css({
            "top": -position.top + "px",
            "left": "0px",
            "position": "relative"
        });
        //$('#mCSB_51_container').css('top','-3102px');
        if (response.status == "success") {
            console.log(response.data.header);
            console.log(response.data.introductory_text);
            $("textarea[name='header']").val(response.data.header);
            $("textarea[name='introductory_text']").val(response.data.introductory_text);
            $("input[name='section_id']").val(response.data.section.section);
            var html = '';
            $.each(response.data.section_question, function(key, val) {
                html += '<div class="row align-items-center section_question_' + val.id +
                    '""> <div class="col-lg-5 col-md-5"> <div class="form-group white-bg mb-xl-0"><input type="hidden" name="section_question_id[]" value="' +
                    val.id +
                    '"> <textarea    name="client_question[]" class="w-100 small-input autosizetextaria" placeholder="Enter question">' +
                    val.question +
                    '</textarea> </div> <span class="invalid-feedback d-block"></span> </div> <div class="col-lg-3 col-md-4 line-dropdown"> <div class="form-group marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child"> <select id="mounth833" name="question_type[]" class="form-control myselection"> <option ' +
                    (val.type == 'button' ? 'selected' : "") +
                    '  value="button">Yes/No</option> <option ' + (val.type == 'text' ?
                        'selected' : "") +
                    ' value="text">Written answer</option> </select> </div> </div> <div class="col-lg-3 col-md-3"> <div class="media mb-md-4 mb-0 add-list-text cursor-pointer"> <a href="#" class="toogle-x remove_item" data-flag="section_question" data-name="' +
                    val.question + '" data-id="' + val.id +
                    '"><img src="{{asset("assets/images/x-img.png")}}" alt=""></a></div> </div> </div> </div>';
            });
            var html2 = '';
            html2 +=
                '<div class="row align-items-center"> <div class="col-lg-3 col-md-3"> <div class="media mb-md-4 mb-0 add-list-text cursor-pointer" id="question_to_client"> <img src="{{asset("assets/images/green-white-plus.svg")}}" class="plus-icon-new mCS_img_loaded" alt="..."> <div class="media-body"> <h5 class="mt-0"><a>Add question</a></h5> </div> </div> </div> </div>';

            total = html + html2;
            $('.question_to_client_child_div').empty();
            $('.question_to_client_div .question_to_client_child_div').append(total);
            // getSectionQuestion('form');
        }


        $('.autosizetextaria').each(function() {
            this.setAttribute('style', 'height:' + (this.scrollHeight) +
                'px;overflow-y:hidden;');
        }).on('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px ';
        });
    });
});

$("#editSection").click(function() {
    $.ajax({
        url: "{{route('practitioner.settings.edit_section')}}",
        type: 'POST',
        data: {
            sectionId: $('input[name="editSectionId"]').val(),
            title: $('input[name="title"]').val(),
            introductory_text: $('textarea[name="introductory_text"]').val(),
        },
    }).done(function(response) {
        if (response.status == "success") {
            Swal.fire({
                icon: response.status,
                title: 'Section updated',
                // text: response.msg,
                showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                }
            });
            $('input[name="editSectionId"').val('');
            $('input[name="title"').val('');
            $('textarea[name="introductory_text"').val('');
            $('#EditSectionModal').modal("hide");
            getSectionQuestion('form');
        } 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');

                var input = $('textarea[name=' + key + ']');
                var parent = input.parent().next('.invalid-feedback').text(value[0]);
                input.addClass('is-invalid');
            });
        }
    });
});

$(".deleteItem").click(function() {
    var id = $("input[name='item_id']").val();
    var flag = $("input[name='flag']").val();
    var name = $("input[name='itemName']").val();
    $.ajax({
        url: "{{route('practitioner.settings.delete_item')}}",
        data: {
            'id': id,
            'name': name,
            'flag': flag
        },
        type: 'POST'
    }).done(function(response) {
        if (response.status == "success") {
            $('.' + flag + '_' + id).remove();
            $('#confirmModal').modal("hide");
            Swal.fire({
                icon: response.status,
                //title: response.msg,
                title: 'Deleted',
                //text: response.msg,
                showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                }
            });
        }
    });
});

$("#previewIntakeForm").click(function() {
    $(".selectedDisease").find("li").each(function(index) {
        if ($(this).find('input').is(":checked")) {
            var selectedValue = $(this).find('input').val();
            $(".previewSelectedDisease").find("li").each(function() {
                var selectedPreviewValue = $(this).find('input').val();
                if (selectedValue == selectedPreviewValue) {
                    $(this).find('input').attr('checked', 'checked');
                }
            });
        }
    });

    getSectionQuestion('preview');
    // $("form#intakeForm :input:checked").each(function(key, ele) {
    //    if (ele.name != 'disease[]') {
    //       if ($("input[name=" + ele.name + "]:checked")) {
    //          if ($("input[name=" + ele.name + "]:checked").val() == 1) {
    //             $('#' + 'intake_' + ele.name).attr("style", "display: inline !important");
    //          } else {
    //             $('#' + 'intake_' + ele.name).attr("style", "display: none !important");
    //          }
    //       }
    //    }
    // });

    $("form#intakeForm :input:checkbox:not(:checked)").each(function(key, ele) {
        if (ele.name != 'disease[]') {
            $('#' + 'intake_' + ele.name).attr("style", "display: none !important");
        }
    });

    console.log($("input[name='private_health_fund']:checked").val());
    if ($("input[name='private_health_fund']:checked").val() == 0) {
        $(".paymentDiv").hide();
    } else {
        $(".paymentDiv").show();
    }

    if ($("input[name='health_history']:checked").val() == 0) {
        $(".healthHistoryDiv").hide();
    } else {
        $(".healthHistoryDiv").show();
    }

    if ($("input[name='current_complaint']:checked").val() == 0) {
        $(".currentComplaintDiv").hide();
    } else {
        $(".currentComplaintDiv").show();
    }

    if ($('textarea#consent_treatment').val() == '') {
        var text =
            "I have to the best of my knowledge, provided all relevant information about my health and medical history and I give my full consent to treatment. I intend this consent to apply to all future treatments and understand that I must update my service provider with any changes that may occur in my medical history. I understand that a 50% cancellation fee may apply if I do not provide at least 24 hours notice."
        $("#consentTreatment").text(text);
    } else {
        $("#consentTreatment").text($('textarea#consent_treatment').val());
    }

    const element = document.querySelector('#consent_treatment');
    var height = element.style.height;
    $("#consentTreatment").css({
        "height": element.style.height,
        "overflow-y": 'hidden'
    });
    $('.appendCustomizeHealthHistoryQuestion').empty();
    var _row = $('.customize_health_history_div').clone();
    _row.find('input[name="health_history_header[]"]').each(function() {
        $(this).addClass('increaseTextHeight');
    });
    _row.find("input").removeAttr("name").attr('readonly', true);
    _row.find('.remove_item').remove();
    _row.find('.remove_g_p_box').remove();
    $('.appendCustomizeHealthHistoryQuestion').append(_row);

});

//Add New disease
$("#addNewDisease").click(function() {
    var name = $("input[name='newDisease']").val();

    if (name != '') {
        var date = new Date();
        var uniqueId = date.getTime();
        var html = '';
        var htmlForPreview = '';
        // html += '<div class="col-xl-4 col-lg-4 col-md-4 small-bullet diseaseDiv disease_' + uniqueId + '"> <div class="row"> <div class="col-lg-10 col-md-10 col-10"> <div class="delete-check-icon checkedbox"> <ul class="mb-0 selectedDisease"> <li> <input type="hidden" name="disease_name[]" value="' + name + '"> <div class="rdio rdio-primary radio-inline"><input id="disease_' + uniqueId + '" name="disease[]" value="' + name + '" type="checkbox"> <label for="disease_' + uniqueId + '">' + name + ' </label> </div> </li> </ul> </div> </div> <div class="col-lg-2 col-md-2 col-2"> <a href="#" class="toogle-x remove_item" data-flag="disease" data-name="' + name + '" data-id="' + uniqueId + '"><img src="{{asset("assets/images/x-img.png")}}" alt=""></a> </div> </div> </div>';

        html += '<div class="col-xl-4 col-lg-4 col-md-4 small-bullet diseaseDiv disease_' + uniqueId +
            '"> <div class="intake-list-box"> <div class="row"> <div class="col-lg-2 col-md-2 col-2"> <a href="#" class="toogle-x remove_item" data-flag="disease" data-name="' +
            name + '" data-id="' + uniqueId +
            '"><img src="{{asset("assets/images/x-img.png")}}" alt=""></a> </div> <div class="col-lg-10 col-md-10 col-10 pl-0"> <div class="delete-check-icon checkedbox float-left"> <ul class="mb-0 selectedDisease"> <li class="mb-0"> <input type="hidden" name="disease_name[]" value="' +
            name + '"> <div><input id="disease_' + uniqueId + '" name="disease[]" value="' + name +
            '" type="hidden"> <label class="text-blue" for="disease_' + uniqueId + '">' + name +
            ' </label> </div> </li> </ul> </div> </div> </div> </div> </div>';

        // htmlForPreview += '<div class="col-xl-4 col-lg-6 small-bullet disease_' + uniqueId + ' diseaseDivPreview"><div class="row"><div class="delete-check-icon checkedbox"><ul class="mb-0 previewSelectedDisease"><li><div><input id="diseases_' + uniqueId + '" value="' + name + '" type="hidden"> - <label for="diseases_' + uniqueId + '">' + name + ' </label></div></li></ul></div></div></div>';

        htmlForPreview += '<div class="col-lg-4 col-sm-6 small-bullet disease_' + uniqueId +
            ' diseaseDivPreview"><div class="row"><div class="delete-check-icon checkedbox"><ul class="mb-0 previewSelectedDisease"><li><div class="rdio rdio-primary radio-inline"><input id="diseases_' +
            uniqueId + '" value="' + name + '" type="checkbox"><label class="font-13" for="diseases_' +
            uniqueId + '">' + name + ' </label></div></li></ul></div></div></div>';

        $('#appendDiseaseDiv div.diseaseDiv:last').after(html);
        $('#appendDiseaseDivPreview div.diseaseDivPreview:last').after(htmlForPreview);
        $('#AddDiseaseModal').modal("hide");
        $("input[name='newDisease']").val('');
    }
});

$("#addNewQuestion").click(function() {
    var name = $("input[name='newQuestion']").val();
    if (name != '') {
        var date = new Date();
        var uniqueId = date.getTime();
        var html = '';
        var htmlForPreview = '';
        html += '<div class="label-input questionDiv question_' + uniqueId +
            '"> <div class="row align-items-center"> <div class="col-lg-5"> <input type="hidden" name="questions[]" value="' +
            name + '"> <label class="textgray">' + name +
            '</label> </div> <div class="col-lg-6"> <div class="form-group"> <input type="text" class="form-control"> </div> </div> <div class="col-lg-1"> <a href="#" class="toogle-x remove_item" data-flag="question" data-name="' +
            name + '" data-id="' + uniqueId +
            '"><img src="{{asset("assets/images/x-img.png")}}" alt=""></a> </div> </div> </div>';

        htmlForPreview += '<div class="label-input questionDivPreview question_' + uniqueId +
            '"> <div class="row align-items-center"> <div class="col-lg-5"> <label>' + name +
            '</label> </div> <div class="col-lg-6"> <div class="form-group"> <input type="text" class="form-control"> </div> </div> </div> </div>';

        $('#appendQuestionDiv div.questionDiv:last').after(html);
        $('#appendQuestionDivPreview div.questionDivPreview:last').after(htmlForPreview);
        $('#AddQuestionModal').modal("hide");
        $("input[name='newQuestion']").val('');
    }
});
//Add New Question


//  show hide div intake form
if ($("input[name='send_intake_form_trough_sms']").is(':checked') == false) {
    $(".intake_sms_div").hide();
}

if ($("input[name='send_intake_form_trough_email']").is(':checked') == false) {
    $(".intake_email_div").hide();
}
$("#send_intake_form_trough_sms").click(function() {
    $(".intake_sms_div").toggle();
});

$("#send_intake_form_trough_email").click(function() {
    $(".intake_email_div").toggle();
});

$('#send_intake_form_trough_email').change(function() {
    if (this.checked) {
        $('.autosizeta').each(function() {
            this.setAttribute('style', 'height:' + (this.scrollHeight) +
                'px !important;overflow-y:hidden;');
        }).on('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px !important';
        });
    }
});
//end

//count intake form sms length
$(".intake_sms_reminder_text_count").text((countString($('#intake_sms_reminder_text').val().length)));
$('#intake_sms_reminder_text').on('input', function() {
    $(".intake_sms_reminder_text_count").text(countString($(this).val().length));
});
// count intake from sms length end

// $("#question_to_client").click(function() {
$(document).on("click", "#question_to_client", function(e) {
    console.log("hiiii");
    var html = '';
    html +=
        '<div class="row align-items-center"> <div class="col-lg-5 col-md-5"> <div class="form-group white-bg "><input type="hidden" name="section_question_id[]"> <textarea name="client_question[]" class="w-100 small-input autosizetextaria" placeholder="Enter question" style=""></textarea> </div> <span class="invalid-feedback d-block"></span> </div> <div class="col-lg-3 col-md-4 col-10 line-dropdown"> <div class="form-group marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child"> <select id="mounth833" name="question_type[]" class="form-control myselection"> <option  value="button">Yes/No</option> <option value="text">Written answer</option> </select> </div> </div> <div class="col-lg-3 col-md-3 col-1"> <div class="media mb-md-4 mb-0 add-list-text cursor-pointer"> <a href="#" class="toogle-x remove_item" data-flag="section_question" data-id="0"><img src="{{asset("assets/images/x-img.png")}}" alt=""></a></div> </div> </div> </div>';
    //$('.question_to_client_div').after(html);
    //$(".question_to_client_div:last-child").after(html);
    //console.log($("div .question_to_client_div:last-child"));
    $('.question_to_client_div .question_to_client_child_div:last-child').append(html);

    $('.autosizetextaria').each(function() {
        this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
    }).on('input', function() {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';

    });
});

$('#questionToClient').parsley();
$("#questionToClient").click(function(e) {
    console.log("hiiiiiii");
    console.log($("input[name='section_id']").val());
    var questions = [];
    var types = [];
    var id = [];
    $("textarea[name='client_question[]']").each(function() {
        questions.push($(this).val());
    });
    $(".myselection option:selected").each(function() {
        types.push($(this).val());
    });

    $("input[name='section_question_id[]']").each(function() {
        id.push($(this).val());
    });

    if ($("textarea[name='header']").val() == '') {
        $('textarea[name="header"]').parent().next().text('This field is required');
        return false;
    }
    if ($("textarea[name='introductory_text']").val() == '') {
        $('textarea[name="introductory_text"]').parent().next().text('This field is required');
        return false;
    }

    e.preventDefault();
    $(".profile-form-error").hide();
    if ($(this).parsley().isValid()) {
        $.ajax({
            url: "{{route('practitioner.settings.save_section')}}",
            data: {
                'section_id': $("input[name='section_id']").val(),
                'header': $("textarea[name='header']").val(),
                'introductory_text': $("textarea[name='introductory_text']").val(),
                'client_question': questions,
                'types': types,
                'id': id
            },
            type: 'POST',
        }).done(function(response) {
            if (response.status == "success") {
                Swal.fire({
                    icon: response.status,
                    title: 'Section updated',
                    // text: response.msg,
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    }
                });
                $('.question_section_remove').remove();
                $('textarea[name="header"').val('');
                $('textarea[name="introductory_text"').val('');
                $('textarea[name="client_question[]"').val('');
                $('input[name="section_question_id[]"').val('');
                $('input[name="section_id"').val('');
                $(".invalid-feedback").text('');

                var html =
                    ' <div class="customise-title-box customdroppdown gray-brdr question_to_client_child_div"> <div class="row align-items-center"> <div class="col-lg-5 col-md-5"> <div class="form-group white-bg align-middle"> <textarea name="client_question[]" class="w-100 small-input autosizetextaria" placeholder="Enter question" ></textarea> <span class="invalid-feedback d-block"></span> </div> </div> <div class="col-lg-3 col-md-4 line-dropdown"> <div class="form-group marg-bttm online-dropdown align-middle select-dropdown avalable-drop hide-first-child"> <select id="mounth833" name="question_type[]" class="form-control myselection" style="margin-top: -7px;"> <option value="button">Yes/No</option> <option value="text">Written answer</option> </select> </div> </div> <div class="col-lg-3 col-md-3"> <div class="media mb-md-4 mb-0 add-list-text cursor-pointer" id="question_to_client"> <img src="{{asset("assets/images/green-white-plus.svg")}}" class="plus-icon-new mCS_img_loaded" alt="..."> <div class="media-body"> <h5 class="mt-0"><a>Add question</a></h5> </div> </div> </div> </div> <br> </div>';
                $('.question_to_client_div').empty();
                $('.question_to_client_div').append(html);
                getSectionQuestion('form');
            } else {
                $(".invalid-feedback").text('');
                $.each(response.errors, function(key, value, i) {
                    var [before, after] = key.split(".");
                    var input = $('input[name="' + before + '[]"]');
                    console.log(input);
                    var span = $('input[name="' + before + '[]"]').parent().next();
                    var da = span[after];
                    da.append(value[0].replace(key, before));
                });
            }
        });
    }
});

$(document).on("click", "#customise-message", function(e) {
    $('.autosizetextaria').each(function() {
        this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px ;overflow-y:hidden;');
    }).on('input', function() {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px ';
    });
});

$(".openIntakeForm").click(function() {
    $('.autosizetextaria').each(function() {
        this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
    }).on('input', function() {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
    });
    $('#openIntakeFormModal').modal("show");
    getSectionQuestion('form');
});

function getSectionQuestion(flag) {
    var styleTag = '';
    if (flag == 'preview') {
        styleTag = 'style="display:none"';
    }
    $.ajax({
        url: "{{route('practitioner.settings.get_section_question')}}",
        type: 'GET'
    }).done(function(response) {

        if (response.status == "success") {
            $(".sectionWiseQuestion").remove();
            $.each(response.data, function(key, value) {
                var html1 = '';
                var html3 = '';
                var total = '';

                html1 +=
                    '<div class="boxwhite clients-area mt-30 immune-system current-complaint-customise innerpadd-20 sectionWiseQuestion section_' +
                    value.section + '"><div> <h3 class="ml-0 textgray text-break">' + value.header +
                    ' <div class="dropdown three-dot-dropdown" style="float:right"><a href="#"  class="dropdown-toggle three-dot-menu" ' +
                    styleTag +
                    ' data-toggle="dropdown" aria-expanded="false"><span/></a><div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(-29px, 19px, 0px); top: 0px; left: 0px; will-change: transform;"><a  ' +
                    styleTag +
                    ' class="toogle-x edit_section dropdown-item cursor-pointer" data-flag="section" data-title="' +
                    value.header + '" data-text="' + value.introductory_text + '" data-id="' + value
                    .section + '">Edit</a><a ' + styleTag +
                    ' class="toogle-x remove_item cursor-pointer dropdown-item " data-flag="section" data-name="' +
                    value.section + '" data-id="' + value.section +
                    '">Delete</a></div></div> </h3> <h5 class="text-left font-15 mb-30 mt-10 font-400 textgray text-break">' +
                    value.introductory_text +
                    '</h5> <div class="mt-30"> <div class="test-results-area">';

                // <a href="#customise-your-section" >button</a>
                var questions = [];

                $.each(value.section_question, function(key, val) {
                    var question = '';

                    if (val.type == 'text') {
                        question += '<div class="label-input section_question_' + val.id +
                            '"> <div class="row align-items-center"> <div class="col-lg-5"> <label class="textgray text-break">' +
                            val.question +
                            '</label> </div> <div class="col-lg-6"> <div class="form-group"> <input type="text" class="form-control pl-0" value=""> </div> </div>  </div> </div>';
                    }

                    // <div class="col-lg-1"> <a ' + styleTag + ' href="#" class="toogle-x remove_item" data-flag="section_question" data-name="' + val.question + '" data-id="' + val.id + '"><img src="{{asset("assets/images/x-img.png")}}" alt=""></a> <a href="#" ' + styleTag + ' class="toogle-x edit_item" data-flag="section_question"  data-name="' + val.question + '" data-id="' + val.id + '"><i class="fa fa-pencil-square-o iconeditt" aria-hidden="true"></i></a> </div>

                    if (val.type == 'button') {
                        question +=
                            '<div class="label-input textbox-radio mt-3 section_question_' + val
                            .id +
                            '"> <div class="row align-items-center"> <div class="col-lg-5"> <label class="textgray text-break">' +
                            val.question +
                            '</label> </div> <div class="col-lg-6 single-tittle m-0"> <ul class="age-title p-0 mb-0"> <li><input type="radio" id="catd" name="animal" value=""> <label for="catd">Yes</label></li> <li><input type="radio" id="dogd" name="animal" value=""> <label for="dogd">No</label></li> </ul> </div> </div>';
                    }

                    //</div> <div class="col-lg-1"> <a href="#" ' + styleTag + ' class="toogle-x remove_item" data-flag="section_question" data-name="' + val.question + '" data-id="' + val.id + '"><img src="{{asset("assets/images/x-img.png")}}" alt=""></a> <a href="#" ' + styleTag + ' class="toogle-x edit_item" data-flag="section_question" data-name="' + val.question + '" data-id="' + val.id + '"><i class="fa fa-pencil-square-o iconeditt" aria-hidden="true"></i></a> </div>

                    questions.push(question);
                });

                html3 += '</div></div></div></div>';
                total = html1 + questions.join('') + html3;
                $('#immuneSystem').after(total);
                $('#immuneSystemPreview').append(total);
                if (flag == 'preview') {
                    $('.sectionWiseQuestion').find('.textgray').removeClass('textgray');
                }
            });
        }
    });
}

$("#editNewQuestion").click(function() {
    $.ajax({
        url: "{{route('practitioner.settings.edit_section_question')}}",
        type: 'POST',
        data: {
            question_id: $('input[name="editQuestionId"]').val(),
            question: $('input[name="editQuestion"]').val(),
        },
    }).done(function(response) {
        if (response.status == "success") {
            Swal.fire({
                icon: response.status,
                title: 'Question updated',
                // text: response.msg,
                showClass: {
                    popup: 'animate__animated animate__fadeInDown'
                },
                hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                }
            });
            $('input[name="editQuestionId"').val('');
            $('input[name="editQuestion"').val('');
            $('#EditQuestionModal').modal("hide");
            getSectionQuestion('form');
        } else {
            var input = $('input[name="editQuestion"').val('');
            var parent = input.parent().next('.invalid-feedback').text('This field is required');
            input.addClass('is-invalid');
        }
    });
});

// Add toggleClass for bottom padding
$("#remindersModal .select-styled1").click(function() {
    $("#remindersModal .boxwhite").toggleClass("pb-5");
});
// Add toggleClass for bottom padding
// $(function() {
//     var $selected = @json($cancellationPolicy ?? "");
//     var $select = $("#charge_after_less_than");
//     var select = null;
//     for (i = 1; i <= 24; i++) {
//         select = ($selected != null && i == $selected.charge_after_less_than) ? "selected" : null;
//         $select.append($('<option></option>').val(i).html(i).attr('selected', select));
//     }
// });

// $("#step_1").click(function() {
//    window.location.href = baseUrl+"/practitioner/my_details/show?"+'flag=setupWizard';
// });

$(".redirectToOther").click(function() {


    if ($(this).attr('id') == 'step_1') {

        $.ajax({
            url: "{{route('practitioner.settings.getSetupWizardStatus')}}",
            type: 'GET'
        }).done(function(response) {
            if (response.status == "success") {
                //|| response.businessHoursCount != 0
                if (response.data.length >= 1) {
                    window.location.href = "{{route('practitioner.business.my_details')}}";
                } else {
                    window.location.href = "{{route('practitioner.setupWizard.my_details')}}";
                }
            }
        });

    }
    if ($(this).attr('id') == 'step_2') {
        window.location.href = "{{route('practitioner.service.newpage')}}";
    }
    if ($(this).attr('id') == 'step_3') {
        window.location.href = "{{route('practitioner.settings.reminders')}}";
    }
    if ($(this).attr('id') == 'step_4') {
        window.location.href = "{{route('practitioner.settings.myBookingConfirmation')}}";
    }
    if ($(this).attr('id') == 'step_5') {
        window.location.href = "{{route('practitioner.settings.myWelcomeEmail')}}";
    }
    if ($(this).attr('id') == 'step_6') {
        window.location.href = "{{route('practitioner.online-booking.setting')}}";
    }
    if ($(this).attr('id') == 'step_7') {
        window.location.href = "{{route('practitioner.settings.videoConsultations')}}";
    }
    if ($(this).attr('id') == 'step_8') {
        window.location.href = "{{route('practitioner.intake_form.create')}}";
    }
});

$('input[type=radio][name=free_shipping]').change(function() {
    if (this.value == '1') {
        $("#order_total_more_than").prop('readonly', false);
    } else if (this.value == '0') {
        $("#order_total_more_than").prop('readonly', true);
        $("#order_total_more_than").val('');
    }
});
</script>
<!-- end intake form -->


<script>
//$(window).resize(function() {
if (window.matchMedia('(max-width: 425px)').matches) {
    $(document).ready(function() {
        if (window.location.href.split("/")) {
            if (window.location.href.split("/")[6] && window.location.href.split("/")[6] == 'mysetupwizard') {
                // window.onload = function() {
                // document.getElementById('customdroptoparea').className = 'd-none';
                // };
                $(function() {
                    $('#customdroptoparea').addClass('d-none');
                });
            }
        }
    });
}
//});


// // media query event handler
// if (matchMedia) {
// const mq = window.matchMedia("(max-width: 425px)");
// mq.addListener(WidthChange);
// WidthChange(mq);
// }

// // media query change
// function WidthChange(mq) {
// if (mq.matches) {
// // window width is at least 500px
// } else {
// // window width is less than 500px
// }

// }
</script>

<!-- <script>
      var link = document.queryClass(".customdroptoparea");
      var mediaRule = "(max-width: 425px)";
      document.styleSheets[0].cssRules[0].media.mediaText = mediaRule;
      console.log(document.styleSheets[0].cssRules[0].media.mediaText);
    </script>
    <style>

    </style>

    <script>
    function checkMediaQuery() {
  if (window.innerWidth > 576) {
    console.log('Larger than Small Media Query Matched!');
  }

  if (window.innerWidth > 768) {
    console.log('Larger than Medium Media Query Matched!');
  }

  if (window.innerWidth > 990) {
    console.log('Large Media Query Matched!');
  }
}

// Initial check
checkMediaQuery();

// Add a listener for when the window resizes
window.addEventListener('resize', checkMediaQuery);
    </script> -->

<script src="{{asset('assets/js/practitioner/my-settings.js')}}" type="text/javascript"></script>

<script>
// $('#btn-top-1').click(function() {
//     $('html,body').animate({
//         scrollTop: $("#customise-your-section").offset().top},
// 'slow');
// $("#btn-top-1").click(function() {
//     $('html,body').animate({
//         scrollTop: $("#customise-your-section").offset().top},
//         'slow');
// });
$("#btn-top-1").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#customise-your-section").offset().top
    }, 2000);
});


// window.smoothScroll = function(target) {
//     var scrollContainer = target;
//     do { //find scroll container
//         scrollContainer = scrollContainer.parentNode;
//         if (!scrollContainer) return;
//         scrollContainer.scrollTop += 1;
//     } while (scrollContainer.scrollTop == 0);

//     var targetY = 0;
//     do { //find the top of target relatively to the container
//         if (target == scrollContainer) break;
//         targetY += target.offsetTop;
//     } while (target = target.offsetParent);

//     scroll = function(c, a, b, i) {
//         i++; if (i > 30) return;
//         c.scrollTop = a + (b - a) / 30 * i;
//         setTimeout(function(){ scroll(c, a, b, i); }, 20);
//     }
//     // start scrolling
//     scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
// }
$('.autosizetextaria').each(function() {
    this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function() {
    this.style.height = 'auto';
    this.style.height = (this.scrollHeight) + 'px ';

});
$(document).on('click', '.Invoices-link', function() {
    //alert("view Invoice");
    $('.autosizetextaria').each(function() {
        this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;  overflow: hidden; ');
    }).on('textarea', function() {
        alert("Invoice");
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px ';
    });
});

// $('.openIntakeForm').click( function(){ // on change of state
// //   alert("Hello!");
//    // if(this.checked) // if changed state is "CHECKED"
//    //  {
//         $('.autosizetextaria').each(function () {
//       this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
// //   alert("Hello!");
//    }).on('input', function () {
//       this.style.height = 'auto';
//       this.style.height = (this.scrollHeight) + 'px';

//    });
//    //  }
// })

$('.monday-btn').on('click', function() {
    $('.monday-break-time').removeClass('d-none').addClass('d-block');
});
$('.tuesday-btn').on('click', function() {
    $('.tuesday-break-time').removeClass('d-none').addClass('d-block');
});
$('.wednesday-btn').on('click', function() {
    $('.wednesday-break-time').removeClass('d-none').addClass('d-block');
});
$('.thursday-btn').on('click', function() {
    $('.thursday-break-time').removeClass('d-none').addClass('d-block');
});
$('.friday-btn').on('click', function() {
    $('.friday-break-time').removeClass('d-none').addClass('d-block');
});
$('.saturday-btn').on('click', function() {
    $('.saturday-break-time').removeClass('d-none').addClass('d-block');
});
$('.sunday-btn').on('click', function() {
    $('.sunday-break-time').removeClass('d-none').addClass('d-block');
});


$(document).ready(function() {
    $("#previewIntakeForm").click(function(e) {

        // $('.autosizetextaria').each(function () {
        // this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
        // }).load('textarea', function () {
        //    this.style.height = 'auto';
        //    this.style.height = (this.scrollHeight) + 'px ';
        // });


    });
    $("#customise-intake-form").click(function(e) {

        $('.autosizetextaria').each(function() {
            this.setAttribute('style', 'height:' + (this.scrollHeight) +
                'px;overflow-y:hidden;');
        }).load('textarea', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px ';
        });

    });
    $(document).on('click','#calenda_sync',function(){
        $(".loading").show();
        $.ajax({
            url: "{{route('practitioner.calenda_sync')}}",
            type: 'POST'
        }).done(function(response) {
            if (response.status == "success") {
                $(".loading").hide();
            }else{
                $(".loading").hide();
                
            }
        });
    });

    $(document).on('click', '#settings_btn', function() {
        var flag = $('#settings_btn').attr('data-allowToSellPackage');
        if(flag == 0)
        {
        $('#waitlist_integration').modal('show'); 
        }else{
        window.location.href = "{{route('practitioner.waitlist.setting')}}?flag=settings";
        }
    });

    $(document).on('click', '#payment_plan_btn', function() {
        var flag = $('#payment_plan_btn').attr('data-allowToSellPackage');
        var planCheck = $('#payment_plan_btn').attr('data-planId');

        if(planCheck == 1)
        {
        $('#payment_plan_integration').modal('show'); 
        }else{
        window.location.href = "{{route('practitioner.payment.plans')}}";
        }
    });

    $(document).on('click', '#courses_settings_btn', function () {
        var allowToSell = $(this).attr('data-allowToSellPackage'); 
        var isCourse = $(this).attr('data-isCourse');              

        //if (allowToSell == 0 && isCourse == 'no') {
        if (isCourse == 'no') {
            
            $('#course_premium_modal').modal('show');
        } else {
            
            window.location.href = "{{ route('practitioner.my.courses') }}";
        }
    });

    $(document).on('click', '#coupon_btn', function () {
        var planId = $(this).attr('data-planid');   
        console.log(planId);           
        if (planId == 1) {
            $('#coupon_premiumplan_integration').modal('show');
        } else {
            window.location.href = "{{ route('practitioner.settings.get.coupon') }}";
        }
    });

});
   
</script>



@endsection