@extends('User/layout/app')
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="white_shadow_detiles">
                    <div class="br_white_shadow">
                        <div class="user_edit">
                            <div class="left_rs">
                                <div class="profile">
                                    @php
                                        function generateInitials($name)
                                        {
                                            // Use a regular expression to split the string into words
                                            $words = preg_split('/\s+/', $name, -1, PREG_SPLIT_NO_EMPTY);

                                            $initials = '';

                                            foreach ($words as $word) {
                                                $initials .= strtoupper($word[0]);
                                            }

                                            return $initials;
                                        }

                                        $name = $patient->patient_name;
                                        $initials = generateInitials($name);
                                    @endphp

                                    <span>{{ $initials }}</span>
                                </div>
                                <div class="user_detiles">
                                    <ul>
                                        <li>
                                            <h4>{{ $patient->patient_name }}</h4>
                                        </li>
                                        <li>{{ $patient->gender }}</li>
                                        <li>{{ $patient->age }} Years</li>
                                    </ul>
                                </div>
                                <div class="dr_detils">
                                    <ul>
                                        <li><i class="fa-solid fa-user-doctor me-2"></i>Dr. {{ $patient->doctor_name }}</li>
                                        <li><i
                                                class="fa-solid fa-mobile-screen-button me-2"></i>{{ $patient->doctor_mobile_no }}
                                        </li>
                                        <li><i class="fa-solid fa-code me-2"></i>SC Code : {{ $patient->sc_code }}</li>
                                    </ul>
                                </div>
                                @if (Auth::user()->user_role == 'FLM')
                                    <div class="edit_bt">
                                        <button type="button" class="btn bg_btn"
                                            onclick="EditProfile('{{ $id }}')">
                                            <img src="{{ asset('images/edit_color.png') }}">
                                        </button>
                                    </div>
                                @endif

                            </div>
                            <div class="right_rs">
                                <div class="profile_detiles">
                                    <ul>
                                        <li><b>Therapy Details:</b><span></span></li>
                                        <li>Duration of Therapy : <span>{{ $patient->duration_of_therapy }} Months</span>
                                        </li>
                                        <li>Cartridges Purchase : <span>{{ $patient->total_cartridges }}</span></li>
                                        <li>Therapy Status : <span>{{ $patient->therapy_status }}</span></li>
                                        <li>Next Purchase Date:
                                            <span>{{ $patient->next_purchase_date ? \Carbon\Carbon::parse($patient->next_purchase_date)->format('d-m-Y') : 'NA' }}</span>
                                        </li>
                                        <li>Last Purchase Date:
                                            <span>{{ $patient->date_of_purchase ? \Carbon\Carbon::parse($patient->date_of_purchase)->format('d-m-Y') : '' }}</span>
                                        </li>

                                        <li>Indication : <span>{{ $patient->indication ?? '-' }}</span></li>
                                        <li>Distance Travelled : <span>{{ $patient->distance_travelled ?? '-' }}</span>
                                        <li>Delivery Done : <span>{{ $patient->delivery_done ?? '-' }}</span>
                                        <li>
                                            Demo :
                                            <span>
                                                @if ($patient->train_demo === 'no')
                                                    No @if (!empty($patient->no_train_demo))
                                                        [ {{ $patient->no_train_demo }} ]
                                                    @endif
                                                @elseif($patient->train_demo === 'yes')
                                                    Yes
                                                @else
                                                    -
                                                @endif
                                            </span>
                                        </li>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="br_white_shadow">
                        <div class="therapy_details">
                            <div class="row">

                                <div class="col-lg-8 col-sm-12 col-md-6">
                                    <div class="row">
                                        <div class="col-lg-4 col-md-4 col-12 pb-5">
                                            <div class="mb-3 pb-3">
                                                <label for="duration_of_therapy" class="form-label">Duration Of
                                                    Therapy</label>
                                                <input type="text" readonly class="form-control br_from"
                                                    id="duration_of_therapy" name="duration_of_therapy"
                                                    value="{{ $patient->duration_of_therapy }}" placeholder="Months">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="rangeslider-wrap">
                                            <input value="{{ $patient->duration_of_therapy }}" type="range"
                                                min="0" max="24" step="1"
                                                labels="1, , , , 5, , , ,  9, , , , 13, , , , 17, , , 20, , , , 24 "
                                                disabled>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 mb-2">
                                    <div class="mb-0 text-end">
                                        <button type="button" onclick="trackTherapyDetails('{{ $id }}')"
                                            class=" btn btn-primary mt-0"> <img src="{{ asset('images/routing.png') }}"
                                                width="18px"> Track Therapy
                                            details</button>
                                    </div>
                                </div>
                            </div>
                            @if (Auth::user()->user_role == 'FLM')
                                <div class="edit_bt">
                                    <button type="button" class="btn bg_btn"
                                        {{ $patient->therapy_status === 'DroppedOut' || ($patient->delivery_status !== 'Delivered' && ($patient->delivery_status === 'Pending' || $patient->delivery_status === 'Ongoing')) ? 'disabled' : '' }}
                                        onclick="editTherapyDuration('{{ $id }}')">
                                        <img src="{{ asset('images/edit_color.png') }}">
                                    </button>
                                </div>
                            @endif
                            <div class="fixed_title">
                                <h4>Therapy Details</h4>
                            </div>
                        </div>
                    </div>
                    <div class="br_white_shadow">
                        <div class="therapy_details">
                            @if (Auth::user()->user_role == 'FLM')
                                <div class="col-12 text-end mb-2">
                                    <button type="button"
                                        {{ $patient->therapy_status === 'DroppedOut' || ($patient->delivery_status !== 'Delivered' && ($patient->delivery_status === 'Pending' || $patient->delivery_status === 'Ongoing')) ? 'disabled' : '' }}
                                        onclick="editCartrides('{{ $id }}')" class="btn btn-primary mt-0">
                                        <i class="fa-solid fa-plus me-2"></i> Add Cartridges
                                    </button>
                                </div>
                            @endif
                            <div class="patient_detiles_data">
                                <table class="table datatable_current w-100">
                                    <thead>
                                        <tr>
                                            <th>Sr No</th>
                                            <th>Date Of Purchase</th>
                                            <th>Next Purchase Date</th>
                                            <th>Cartridges Purchase</th>
                                            <th>Delivery By</th>
                                            <th>Colleague</th>
                                            {{-- <th>Time Taken Per Delivery</th> --}}
                                            <th>Delivery Status</th>
                                            <th>Date And Time</th>
                                        </tr>
                                    </thead>
                                    <tbody>


                                    </tbody>
                                </table>
                            </div>
                            <div class="fixed_title">
                                <h4>Cartridges Details</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="modal fade" id="edit_profile" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title fs-5" id="exampleModalLabel">Edit {{ $patient->patient_name }}'s Details</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-solid fa-xmark"></i></button>
                </div>
                {{ Form::open(['url' => '#', 'name' => 'UpdateProfileForm', 'id' => 'UpdateProfileForm', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}

                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="updateAge" class="form-label">Age <span class="red_star">*</span></label>
                                <input type="number" class="form-control br_from" id="updateAge" name="updateAge"
                                    placeholder="Enter Age">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="updatePatientName" class="form-label">Patient Name <span
                                        class="red_star">*</span></label>
                                <input type="text" class="form-control br_from" id="updatePatientName"
                                    name="updatePatientName" placeholder="" value="Enter Name">
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-6 col-12">
                            <div class="mb-3">
                                <label for="updateGender" class="form-label">Gender <span
                                        class="red_star">*</span></label>
                                <div class="gender_select">
                                    <div class="sr_code">
                                        <label>
                                            <input type="radio" id="Male" name="updateGender" value="Male">
                                            <span for="Male">Male</span>
                                        </label>
                                    </div>
                                    <div class="sr_code">
                                        <label>
                                            <input type="radio" id="Female" name="updateGender" value="Female">
                                            <span for="Female">Female</span>
                                        </label>
                                    </div>
                                    <div class="sr_code">
                                        <label>
                                            <input type="radio" id="Other" name="updateGender" value="Other">
                                            <span for="Other">Other</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="updateMobileNumber" class="form-label">Mobile Number <span
                                        class="red_star">*</span></label>
                                <div class="flag_icon">
                                    <select class="form-select js-example-basic-single only_br"
                                        aria-label="Default select example">
                                        <option selected Default>+ 91</option>
                                        <!-- <option value="1">+ 91</option>
                                                                                                                                                                                                                          <option value="2">+ 92</option>
                                                                                                                                                                                                                          <option value="3">+ 93</option> -->
                                    </select>
                                    <input type="number" class="form-control br_from" id="updateMobileNumber"
                                        name="updateMobileNumber" placeholder="Enter Mobile Number">
                                </div>
                                <label id="updateMobileNumber-error" class="error" for="updateMobileNumber"></label>

                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="updateDoctorName" class="form-label">Doctor Name <span
                                        class="red_star">*</span></label>
                                <input type="text" class="form-control" id="updateDoctorName" name="updateDoctorName"
                                    placeholder="Enter Doctor Name" readonly>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="updateSCCode" class="form-label">SC Code <span
                                        class="red_star">*</span></label>
                                <input type="text" class="form-control" id="updateSCCode" name="updateSCCode"
                                    placeholder="Enter Sc Code" readonly>
                            </div>
                        </div>
                        <div class="col-lg-12 text-center">
                            <div class="mb-3">
                                <button type="submit" id="UpdateProfileSubmit"
                                    class=" btn btn-primary mt-4">Update</button>
                            </div>
                        </div>

                    </div>

                </div>
                {{ Form::close() }}

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

    <div class="modal fade" id="track_therapy" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title fs-5" id="exampleModalLabel">Track {{ $patient->patient_name }}'s Therapy
                        Details:</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-solid fa-xmark"></i></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="track_houre track_therapy" id="trackTherapyDetails">


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

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

    <div class="modal fade" id="therapy_dtails" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title fs-5" id="exampleModalLabel">Edit Therapy Details</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-solid fa-xmark"></i></button>
                </div>
                {{ Form::open(['url' => '#', 'name' => 'editTherapyDurationForm', 'id' => 'editTherapyDurationForm', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}

                <div class="modal-body">
                    <div class="row">
                        <input type="hidden" name="editTherapyId" id="editTherapyId" value="{{ $id }}">

                        <div class="col-lg-5 col-sm-8 col-12 pb-5">
                            <div class="mb-3">
                                <label for="editTherapyDurationVal" class="form-label">Duration Of Therapy <span
                                        class="red_star">*</span></label>
                                <input type="text" class="form-control br_from SliderValue"
                                    id="editTherapyDurationVal" name="editTherapyDurationVal" placeholder="Months"
                                    value="{{ $patient->duration_of_therapy }}">
                            </div>
                        </div>
                        <div class="col-lg-5 col-sm-8 col-12 pb-5 mt-0">
                            <div class="mb-3">
                                <label for="editCartridges" class="form-label">Total Cartridges</label>
                                <input type="text" class="form-control" id="editCartridges" name="editCartridges"
                                    readonly value="{{ $patient->total_cartridges }}">
                            </div>
                        </div>

                        <div class="w-100"></div>
                        <div class="col-12">
                            <div class="mb-3">
                                <div class="rangeslider-wrap">
                                    <input id="editTherapySlider" type="range" min="0" max="24"
                                        step="1" value="{{ $patient->duration_of_therapy }}"
                                        labels="1, , , , 5, , , ,  9, , , , 13, , , , 17, , , 20, , , , 24 ">
                                </div>
                            </div>
                        </div>
                        <!-- <div class="col-lg-5 col-sm-6 col-12">
                                                                                                                                                                                                                    <div class="mb-3 pb-5">
                                                                                                                                                                                                                      <label for="exampleFormControlInput1" class="form-label">Therapy Status <span class="red_star">*</span></label>
                                                                                                                                                                                                                      <ul class="list-unstyled dropdown_sr">
                                                                                                                                                                                                                        <li class="init">Select</li>
                                                                                                                                                                                                                        <li data-value="value 1"><i class="fa-regular fa-clock me-2" style="color: #F49B06;"></i> Ongoing </li>
                                                                                                                                                                                                                        <li data-value="value 2"><i class="fa-solid fa-outdent me-2" style="color: #84740a;"></i>Dropped out
                                                                                                                                                                                                                        </li>
                                                                                                                                                                                                                        <li data-value="value 3"><i class="fa-regular fa-circle-check me-2" style="color: green;"></i>Therapy
                                                                                                                                                                                                                          completed</li>
                                                                                                                                                                                                                      </ul>
                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                  </div> -->
                        <div class="col-lg-12 text-center">
                            <div class="mb-3">
                                <button type="submit" id="editTherapyDurationSubmit"
                                    class=" btn btn-primary mt-4">Update</button>
                            </div>
                        </div>

                    </div>

                </div>
                {{ Form::close() }}

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

    <div class="modal fade" id="add_cartridges" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title fs-5" id="exampleModalLabel">Add Cartridges</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-solid fa-xmark"></i></button>
                </div>
                {{ Form::open(['url' => '#', 'name' => 'add_cartridges_Form', 'id' => 'add_cartridges_Form', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}

                <div class="modal-body">

                    <input type="hidden" id="editCartridgesID" name="editCartridgesID" value="{{ $id }}">

                    <input type="hidden" id="editCartridesLimit" name="editCartridesLimit">






                    <div class="row">
                        <div class="col-lg-6 col-sm-6 col-12">
                            <div class="mb-3 birthday_icon">
                                <label for="date_of_purchase" class="form-label">Date Of Purchase <span
                                        class="red_star">*</span></label>
                                <input type="text" class="birthday form-control br_from" id="AC_date_of_purchase"
                                    name="AC_date_of_purchase" placeholder="Enter Date">
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-6 col-12">
                            <div class="mb-3 birthday_icon">
                                <label for="next_purchase_date" class="form-label">Next Purchase Date <span
                                        class="red_star">*</span></label>
                                <input type="text" class="birthday form-control br_from" id="AC_next_purchase_date"
                                    name="AC_next_purchase_date" placeholder="Enter Date">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="total_cartridges" class="form-label">Total Cartridges Purchase <span
                                        class="red_star">*</span></label>
                                <input type="text" class="form-control br_from" id="AC_total_cartridges"
                                    oninput="updateCartridgeLimit()" name="AC_total_cartridges"
                                    placeholder="Enter Cartridges Purchase">
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-6 col-12 mt-0">
                            <div class="mb-3">
                                <label for="cartridge_limit_final" class="form-label">Total Cartridges</label>
                                <input type="text" class="form-control" id="cartridge_limit_final"
                                    name="cartridge_limit_final" readonly>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="train_demo" class="form-label">Train Demo <span
                                        class="red_star">*</span></label>
                                <select class="form-select js-example-basic-single only_br" id="AC_train_demo"
                                    name="AC_train_demo" aria-label="Default select example">
                                    <option value="" selected Default>Select Demo</option>
                                    <option value="yes">Yes</option>
                                    <option value="no">No</option>
                                </select>
                                <label id="AC_train_demo-error" class="error" for="AC_train_demo"
                                    style=""></label>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="delivery_type" class="form-label">Delivery By <span
                                        class="red_star">*</span></label>
                                <select class="form-select js-example-basic-single only_br" id="AC_delivery_type"
                                    name="AC_delivery_type" aria-label="Default select example">
                                    <option value="" selected Default>Select Self</option>
                                    <option value="self"> Self</option>
                                    <option value="colleague_name">Colleague</option>
                                    <option value="stockist_name">Stockist</option>
                                </select>
                                <label id="AC_delivery_type-error" class="error" for="AC_delivery_type"
                                    style=""></label>
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-6 col-12 pb-1 mt-0 other_txt_2">
                            <div class="mb-3">
                                <label for="therapy_limit" class="form-label">Duration Of Therapy</label>
                                <input type="text" class="form-control SliderValue" id="therapy_limit"
                                    name="therapy_limit" readonly>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="delivery_user_id" class="form-label">Colleague Selection <span
                                        class="red_star">*</span></label>
                                <select class="form-select js-example-basic-single only_br" id="AC_delivery_user_id"
                                    name="AC_delivery_user_id" aria-label="Default select example">
                                    <option value="" selected Default>Select Colleague</option>
                                    <option value="1">Colleague 1</option>
                                    <option value="2">Colleague 2</option>
                                    <option value="3">Colleague 3</option>
                                </select>
                                <label id="AC_delivery_user_id-error" class="error" for="AC_delivery_user_id"
                                    style=""></label>
                            </div>
                        </div>

                        <div class="col-lg-4 col-sm-6 col-12">
                            <div class="mb-3">
                                <label for="distance_travelled" class="form-label">Distance Travelled( In Kms)<span
                                        class="red_star">*</span></label>
                                <input type="number" class="form-control br_from" id="distance_travelled"
                                    name="distance_travelled" placeholder="Enter Distance Travelled (Km)">
                            </div>
                        </div>
                        {{--  <div class="col-lg-4 col-sm-6 col-12">
                            <div class="mb-3">
                                <label for="indication" class="form-label">Indication<span
                                        class="red_star">*</span></label>
                                <select class="form-select js-example-basic-single only_br" id="indication"
                                    name="indication" aria-label="Default select example">
                                    <option value="" selected>Select Indication</option>
                                    <option value="Osteoporosis">Osteoporosis</option>
                                    <option value="Osteoporotic Fracture">Osteoporotic fracture</option>
                                    <option value="Trauma Fracture">Trauma fracture</option>
                                    <option value="Others">Others</option>
                                </select>
                                <label id="indication-error" class="error" for="indication"></label>
                            </div>
                        </div>

                        <div class="col-lg-4 col-sm-6 col-12" id="otherIndicationDiv" style="display: none;">
                            <div class="mb-3">
                                <label for="indication_other" class="form-label">Other<span
                                        class="red_star">*</span></label>
                                <input type="text" class="form-control br_from" id="indication_other"
                                    name="indication_other" placeholder="">
                            </div>
                        </div> --}}

                        <div class="col-lg-12 col-sm-12 col-12">
                            <div class="mb-3">
                                <div class="toggle checkmark justify-content-start" id="">
                                    <input type="checkbox" id="modifyTherapyOption">
                                    <label>&nbsp;&nbsp;&nbsp;Would You Like To Modify The Therapy Information?</label>
                                </div>
                            </div>
                        </div>


                        <div class="row other_txt">
                            <div class="col-lg-5 col-sm-8 col-12 pb-2">
                                <div class="mb-3">
                                    <label for="AC_duration_of_therapy" class="form-label">Duration Of Therapy <span
                                            class="red_star">*</span></label>
                                    <input type="number" class="form-control br_from SliderValue"
                                        id="AC_duration_of_therapy" name="AC_duration_of_therapy" placeholder="Months"
                                        readonly>
                                </div>
                            </div>

                            <br><br><br>
                            <div class="w-100"></div>
                            <div class="col-12">
                                <div class="mb-3">
                                    <div class="rangeslider-wrap">
                                        <input id="sliderid" type="range" min="1" max="24"
                                            step="1"
                                            labels="1, , , , 5, , , ,  9, , , , 13, , , , 17, , , 20, , , , 24 ">
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="col-lg-5 col-sm-6 col-12">
                                                                                                                                                                                                                                                                                                        <div class="mb-3 pb-5">
                                                                                                                                                                                                                                                                                                          <label for="exampleFormControlInput1" class="form-label">Duration Of Therapy <span
                                                                                                                                                                                                                                                                                                              class="red_star">*</span></label>
                                                                                                                                                                                                                                                                                                          <ul class="list-unstyled dropdown_sr">
                                                                                                                                                                                                                                                                                                            <li class="init">Select</li>
                                                                                                                                                                                                                                                                                                            <li data-value="value 1"><i class="fa-regular fa-clock me-2" style="color: #F49B06;"></i> Ongoing
                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                            <li data-value="value 2"><i class="fa-solid fa-outdent me-2" style="color: #84740a;"></i>Dropped out
                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                            <li data-value="value 3"><i class="fa-regular fa-circle-check me-2" style="color: green;"></i>Therapy
                                                                                                                                                                                                                                                                                                              completed</li>
                                                                                                                                                                                                                                                                                                          </ul>
                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                      </div> -->
                        </div>
                        <div class="col-lg-12 text-center">
                            <div class="mb-3">
                                <button type="submit" id="add_cartridges_Submit"
                                    class=" btn btn-primary mt-4">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
                {{ Form::close() }}

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


@section('js')
    <script>
        function updateCartridgeLimit() {
            var totalCartridgesInput = document.getElementById('AC_total_cartridges');
            var cartridgeLimitInput = document.getElementById('editCartridesLimit');
            var totalCartridgesValue = totalCartridgesInput.value ? parseInt(totalCartridgesInput.value, 10) : 0;
            var cartridgeLimitValue = cartridgeLimitInput.value ? parseInt(cartridgeLimitInput.value, 10) : 0;
            document.getElementById('cartridge_limit_final').value = totalCartridgesValue + cartridgeLimitValue;
        }

        function initializeDatePickers() {
            $('#AC_date_of_purchase').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                minYear: 2020,
                /*                 maxYear: parseInt(moment().format('YYYY'), 10),
                 */
                locale: {
                    format: 'DD/MM/YYYY'
                }
            }, function(start) {
                const selectedDate = start; // chosen date
                const nextPurchase = selectedDate.clone().add(7, 'days');

                $('#AC_next_purchase_date').val(nextPurchase.format('DD/MM/YYYY'));

                $('#AC_next_purchase_date').daterangepicker({
                    singleDatePicker: true,
                    showDropdowns: true,
                    minYear: 2020,
                    /*                     maxYear: parseInt(moment().format('YYYY'), 10),
                     */
                    startDate: nextPurchase,
                    minDate: selectedDate.clone().add(1, 'days'), // block dates ≤ purchase date
                    autoApply: false, // force user to click Apply
                    locale: {
                        format: 'DD/MM/YYYY'
                    }
                });
            });
        }

        // Attach an event listener to the "Date of Purchase" input for immediate updates
        $('#date_of_purchase').on('apply.daterangepicker', function(ev, picker) {
            initializeDatePickers(); // Call the function when "Date of Purchase" is changed
        });


        $(document).ready(function() {
            $('.birthday').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                autoUpdateInput: false, // Prevents auto-formatting, lets you set it manually
                minYear: 2020,
                /*                 maxYear: parseInt(moment().format('YYYY'), 10),
                 */
                locale: {
                    format: 'DD/MM/YYYY'
                }
            }, function(start) {
                $(this.element).val(start.format('DD/MM/YYYY'));
            });


            initializeDatePickers();



            $('#edit_profile').on('hidden.bs.modal', function() {
                // Reset the form
                $('#UpdateProfileForm')[0].reset();

                // Reset the form validation and clear error messages
                var validator = $('#UpdateProfileForm').validate();
                validator.resetForm();



            });


            $('#add_cartridges').on('hidden.bs.modal', function() {
                // Reset the form
                $('#add_cartridges_Form')[0].reset();

                // Reset the form validation and clear error messages
                var validator = $('#add_cartridges_Form').validate();
                validator.resetForm();

                var trainDemoSelect = $('#AC_train_demo');
                trainDemoSelect.val('').trigger('change');

                var deliveryTypeSelect = $('#AC_delivery_type');
                deliveryTypeSelect.val('').trigger('change');

                $('#AC_delivery_user_id').parent().hide();

                $(".other_txt").removeClass("main");
                $(".other_txt_2").removeClass("main");

                var currentDate = new Date();

                var day = String(currentDate.getDate()).padStart(2, '0');
                var month = String(currentDate.getMonth() + 1).padStart(2, '0');
                var year = currentDate.getFullYear();

                var formattedDate = day + '/' + month + '/' + year;

                $('#AC_date_of_purchase').val(formattedDate);
                $('#AC_next_purchase_date').val(formattedDate);


            });


            checkDeliveryType();

            // Add onchange event handler to delivery_type select
            $('#AC_delivery_type').change(function() {
                checkDeliveryType();
            });

            function checkDeliveryType() {
                // Get the selected value of delivery_type
                var selectedDeliveryType = $('#AC_delivery_type').val();

                // Check the value and show/hide delivery_user_id div accordingly
                if (selectedDeliveryType === 'colleague_name') {
                    $('#AC_delivery_user_id').closest('.col-sm-12').show();
                } else if (selectedDeliveryType != 'colleague_name') {
                    $('#AC_delivery_user_id').closest('.col-sm-12').hide();
                }
            }
            $('#therapy_dtails').on('hidden.bs.modal', function() {
                // Reset the form
                $('#updateTherapyDurationForm')[0].reset();
                var validator = $('#updateTherapyDurationForm').validate();
                validator.resetForm();
            });
        });


        $.validator.addMethod("checkDurationTherapy", function(value, element) {
            var total_cartridges = $('#AC_total_cartridges')
                .val(); // Assuming the ID of the duration_of_therapy field
            return parseInt(value) >= parseInt(total_cartridges);
        }, "Duration of therapy should be equal to or less than the total cartridges.");

        $.validator.addMethod("checkDurationTherapyUpdate", function(value, element) {
            var total_cartridges = $('#editCartridges')
                .val(); // Assuming the ID of the duration_of_therapy field
            return parseInt(value) > parseInt(total_cartridges);
        }, "Duration of therapy should be greater than the total cartridges.");

        $.validator.addMethod("checkTotalCartridges", function(value, element) {
            var durationOfTherapy = $('#AC_duration_of_therapy')
                .val();
            var total_cartridges = $('#cartridge_limit_final')
                .val();
            return parseInt(total_cartridges) <= parseInt(durationOfTherapy);
        }, "Total cartridges should be equal to or less than the duration of therapy.");

        $.validator.addMethod("greaterThanDateOfPurchase", function(value, element, params) {
            var dateOfPurchase = $('#AC_date_of_purchase').val();

            var startDate = moment(dateOfPurchase, 'DD/MM/YYYY');
            var endDate = moment(value, 'DD/MM/YYYY');

            return endDate.isAfter(startDate);
        }, "Next Purchase Date must be greater than Date of Purchase");








        $.validator.addMethod("checkDurationTherapyInactive", function(value, element, param) {
            if ($(param).length && !$(param).is(":checked")) {
                var totalCartridges = $('#editCartridesLimit').val();
                return parseInt(value) >= parseInt(totalCartridges);
            }
            return true;
        }, "Duration of therapy should be equal to or greater than the total cartridges.");

        $.validator.addMethod("checkDurationTherapyActive", function(value, element, param) {
            if ($(param).length && $(param).is(":checked")) {
                var totalCartridgesFinal = $('#cartridge_limit_final').val();
                return parseInt(value) >= parseInt(totalCartridgesFinal);
            }
            return true;
        }, "Duration of therapy should be equal to or greater than the total cartridges.");

        $.validator.addMethod("checkTherapyLimit", function(value, element, param) {
            if ($(param).length && !$(param).is(":checked")) {
                var totalCartridges = $('#editCartridesLimit').val();
                return parseInt(value) >= parseInt(totalCartridges);
            }
            return true;
        }, "Duration of therapy should be equal to or greater than the total cartridges.");

        $.validator.addMethod("checkTherapyLimitWithModifyOption", function(value, element, param) {
                if ($(param).length && $(param).is(":checked")) {
                    var totalCartridgesFinal = $('#cartridge_limit_final').val();
                    return parseInt(value) >= parseInt(totalCartridgesFinal);
                }
                return true;
            },
            "Duration of therapy should be equal to or greater than the total cartridges."
        );

        $.validator.addMethod("wholeNumber", function(value, element) {
            // Check if the value is a whole number
            return /^\d+$/.test(value);
        }, "Please enter a whole number.");

        $.validator.addMethod("checkTotalCartridgesLimit", function(value, element) {
            // Check if the value is not greater than 24
            return parseInt(value) <= 24;
        }, "Total cartridges should not be greater than 24.");



        $('#add_cartridges_Form').validate({
            ignore: ".ignore",
            rules: {
                editCartridgesID: {
                    required: true,
                },
                AC_duration_of_therapy: {
                    required: true,
                    checkDurationTherapyInactive: true,
                    checkDurationTherapyActive: "#modifyTherapyOption:checked"
                },
                therapy_limit: {
                    required: true,
                    checkTherapyLimit: true,
                    checkTherapyLimitWithModifyOption: "#modifyTherapyOption:checked"
                },
                AC_date_of_purchase: {
                    required: true,
                },
                AC_next_purchase_date: {
                    required: true,
                    greaterThanDateOfPurchase: true
                },
                AC_total_cartridges: {
                    required: true,
                    checkTotalCartridgesLimit: true,
                    wholeNumber: true,

                },
                cartridge_limit_final: {
                    checkTotalCartridges: true,
                },
                AC_train_demo: {
                    required: true,
                },
                AC_delivery_type: {
                    required: true,
                },
                indication: {
                    required: false,
                },
                indication_other: {
                    required: {
                        depends: function(element) {
                            return $('#indication').val() === "Others";
                        }
                    }
                },
            },
            messages: {

            },
            submitHandler: function(form) {
                $("#add_cartridges_Submit").attr('disabled', true);

                var formData = new FormData($("#add_cartridges_Form")[0]);
                $.ajax({
                    url: "{{ route('editCartridgesData', ['id' => $id]) }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {
                        // console.log(response);
                        if (response.status == 1) {
                            // Success message
                            $("#add_cartridges_Submit").attr('disabled', false);
                            $.notify(response.msg, "success");
                            $('#add_cartridges').modal('hide');
                            refreshDataTable();
                            $('#AC_duration_of_therapy').val(response.therapy);
                            $('#sliderid').val(response.therapy).change();
                        } else {
                            // Error message
                            $("#add_cartridges_Submit").attr('disabled', false);
                            $.notify(response.msg, "error");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        // Error in request
                        $("#add_cartridges_Submit").attr('disabled', false);
                        $.notify("An error occurred", "error");
                    }
                })
            }

        });

        function refreshDataTable() {
            $('.table').DataTable().ajax.reload();
        }

        $('#editTherapyDurationForm').validate({
            ignore: ".ignore",
            rules: {
                editTherapyDurationVal: {
                    required: true,
                    number: true,
                    min: 1,
                    max: 24,
                    checkDurationTherapyUpdate: true,

                },
            },
            messages: {

            },
            submitHandler: function(form) {
                $("#editTherapyDurationSubmit").attr('disabled', true);

                var formData = new FormData($("#editTherapyDurationForm")[0]);
                $.ajax({
                    url: "{{ route('editTherapyDurationData', ['id' => $id]) }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {
                        // console.log(response);
                        if (response.status == 1) {
                            // Success message
                            $("#editTherapyDurationSubmit").attr('disabled', false);
                            $.notify(response.msg, "success");
                            setTimeout(function() {
                                location.reload();
                            }, 2000);

                        } else {
                            // Error message
                            $("#editTherapyDurationSubmit").attr('disabled', false);
                            $.notify(response.msg, "error");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        // Error in request
                        $("#editTherapyDurationSubmit").attr('disabled', false);
                        $.notify("An error occurred", "error");
                    }
                })
            }

        });
        $('input[type="range"]').on('input', function() {
            $('.SliderValue').val($(this).val());
        });

        $('#editTherapyDurationVal').on('input', function() {
            let val = $(this).val();

            if (/^\d+$/.test(val)) {
                let num = parseInt(val, 10);
                if (num >= 1 && num <= 24) {
                    const $range = $('#editTherapySlider');
                    $range.val(num).change();
                    $range.rangeslider('update', true);
                }
            }
        });


        function editCartrides(id) {
            var id = id;
            $.ajax({
                url: "{{ route('editCartridesProfile', ['id' => $id]) }}",
                type: 'POST',
                data: {
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        $('#add_cartridges').modal('show');
                        $('#editCartridesLimit').val(response.data.total_cartridges);
                        $('#cartridge_limit_final').val(response.data.total_cartridges);
                        $('#therapy_limit').val(response.data.duration_of_therapy);
                        $('#AC_duration_of_therapy').val(response.data.duration_of_therapy);
                        $('#sliderid').val(response.data.duration_of_therapy).change();
                    } else
                        $.notify(response.msg, "error");
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }

        function editTherapyDuration(id) {

            var id = id;
            $.ajax({
                url: "{{ route('editTherapyDuration', ['id' => $id]) }}",
                type: 'POST',
                data: {
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        $('#therapy_dtails').modal('show');
                        $('#editTherapyDurationVal').val(response.data.duration_of_therapy);
                        $('#editTherapySlider').val(response.data.duration_of_therapy).change();
                    } else
                        $.notify(response.msg, "error");
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }

        function trackTherapyDetails(id) {
            var id = id;
            $.ajax({
                url: "{{ route('trackTherapyDetails', ['id' => $id]) }}",
                type: 'POST',
                data: {
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        $('#track_therapy').modal('show');
                        var trackTherapyDetails = $('#trackTherapyDetails');

                        // Clear existing content in case you're updating the content
                        trackTherapyDetails.empty();

                        // Loop through the data and append HTML content
                        response.data.forEach(function(log) {
                            var therapyDate = log.therapy_date;
                            var therapyTime = log.therapy_time;
                            var duration = log.duration_of_therapy;
                            var status = log.therapy_status;

                            // Create a div element for each therapy log
                            var logDiv = $('<div class="track_detiles"></div>');

                            // Add the left content
                            var leftContent = $('<div class="left"></div>');
                            leftContent.append(
                                '<p><img src="{{ asset('images/clock.png') }}" class="me-2"> Duration of Therapy : <span>' +
                                duration + ' Months</span></p>');
                            leftContent.append(
                                '<p><img src="{{ asset('images/heart.png') }}" class="me-2"> Therapy Status : <span>' +
                                status + '</span></p>');

                            // Add the right content
                            var rightContent = $('<div class="right"></div>');
                            rightContent.append('<p><b>' + therapyDate + '</b></p>');
                            rightContent.append('<p>' + therapyTime + '</p>');

                            // Append left and right content to the logDiv
                            logDiv.append(leftContent);
                            logDiv.append(rightContent);

                            // Append the logDiv to the trackTherapyDetails element
                            trackTherapyDetails.append(logDiv);
                        });

                    } else
                        $.notify(response.msg, "error");
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }

        $('#UpdateProfileForm').validate({
            ignore: ".ignore",
            rules: {
                updateAge: {
                    required: true,
                },
                updatePatientName: {
                    required: true,
                },
                updateGender: {
                    required: true,
                },
                updateMobileNumber: {
                    required: true,
                    minlength: 10, // Allow at least 1 character
                    maxlength: 10, // Set a maximum length if needed
                },
            },
            messages: {

            },
            submitHandler: function(form) {
                $("#UpdateProfileSubmit").attr('disabled', true);

                var formData = new FormData($("#UpdateProfileForm")[0]);
                $.ajax({
                    url: "{{ route('UpdateProfileData', ['id' => $id]) }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {
                        // console.log(response);
                        if (response.status == 1) {
                            // Success message
                            $("#UpdateProfileSubmit").attr('disabled', false);
                            $.notify(response.msg, "success");
                            setTimeout(function() {
                                location.reload();
                            }, 2000);

                        } else {
                            // Error message
                            $("#UpdateProfileSubmit").attr('disabled', false);
                            $.notify(response.msg, "error");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        // Error in request
                        $("#UpdateProfileSubmit").attr('disabled', false);
                        $.notify("An error occurred", "error");
                    }
                })
            }

        });

        function EditProfile(id) {
            var id = id;
            $.ajax({
                url: "{{ route('UpdateProfile', ['id' => $id]) }}",
                type: 'POST',
                data: {
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        $('#edit_profile').modal('show');
                        $('#updateAge').val(response.data.age);
                        $('#updatePatientName').val(response.data.patient_name);
                        var genderValue = response.data.gender;
                        $('input[name="updateGender"][value="' + genderValue + '"]').prop('checked', true);
                        $('#updateMobileNumber').val(response.data.patient_mobile_no);
                        $('#updateDoctorName').val(response.data.doctor_name);
                        $('#updateSCCode').val(response.data.sc_code);


                    } else
                        $.notify(response.msg, "error");
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }
        $(function() {
            var i = 1;
            var table = $('.table').DataTable({
                scrollX: true,
                destroy: true,
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: false,
                language: {
                    searchPlaceholder: "Search"
                },
                ajax: {
                    url: "{{ route('PatientInfoPaginate', ['id' => $id]) }}",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}"
                    },
                },
                "drawCallback": function(settings) {
                    new VenoBox({
                        selector: ".venobox_img",
                        numeration: true,
                        infinigall: true,
                        share: true,
                        spinner: 'plane'
                    });
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'date_of_purchase',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'next_purchase_date',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'total_cartridges',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'delivery_type',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'employee_name',
                        orderable: false,
                        searchable: true
                    },

                    // {
                    //     data: 'delivery_time_taken',
                    //     orderable: false,
                    //     searchable: true
                    // },
                    {
                        data: 'delivery_status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        orderable: false,
                        searchable: false

                    },

                ],
                columnDefs: [{
                    "aTargets": [1, 2, 3, 4, 5, 6, 7], // Column to target
                    "mRender": function(data, type, full) {
                        if (data != null) {
                            return data;
                        } else {
                            return '-';
                        }
                    },
                }, ],

            });
        });
        $(".toggle").click(function() {
            $(".other_txt").toggleClass("main");
            $(".other_txt_2").toggleClass("main");
        });
    </script>
@endsection