@extends('User/layout/app')
@section('content')
    <div class="container-fluid">
        <!--  Row 1 -->
        <div class="row justify-content-end mb-4">
            @if (Auth::user()->user_role == 'Admin')
                <div class="col-lg-auto  col-md-6 col-sm-6">
                    <select class="form-select js-example-basic-single" aria-label="Default select example" id="selectUser"
                        name="selectUser" onchange="getdOCDAtaAdmin()">
                        <option value="" selected Default>Select User</option>
                        @foreach ($users as $user)
                            <option value="{{ $user->id }}">{{ $user->employee_name }}</option>
                        @endforeach
                    </select>
                </div>
            @elseif (Auth::user()->user_role == 'TLM')
                <div class="col-lg-auto  col-md-6 col-sm-6">
                    <select class="form-select js-example-basic-single" aria-label="Default select example" id="selectSLM"
                        name="selectSLM" onchange="getFLMDAta();">
                        <option value="" selected Default>Select SLM</option>
                        @foreach ($slmList as $SLM)
                            <option value="{{ $SLM->position_code }}">{{ $SLM->employee_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-auto  col-md-6 col-sm-6">
                    <select class="form-select js-example-basic-single" aria-label="Default select example" id="selectFLM"
                        name="selectFLM" onchange="getdOCDAta();">
                        <option value="" selected Default>Select PS</option>
                    </select>
                </div>

                {{-- <div class="col-lg-auto  col-md-6 col-sm-6">
                    <select class="form-select js-example-basic-single" aria-label="Default select example" id="selectSO"
                        name="selectSO" onchange="getdOCDAta()">
                        <option value="" selected Default>Select SO</option>
                    </select>
                </div> --}}
            @elseif (Auth::user()->user_role == 'SLM')
                <div class="col-lg-auto  col-md-6 col-sm-6">
                    <select class="form-select js-example-basic-single" aria-label="Default select example" id="selectFLM"
                        name="selectFLM" onchange="getdOCDAta();">
                        <option value="" selected Default>Select PS</option>
                        @foreach ($flmList as $FLM)
                            <option value="{{ $FLM->position_code }}">{{ $FLM->employee_name }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- <div class="col-lg-auto  col-md-6 col-sm-6">
                    <select class="form-select js-example-basic-single" aria-label="Default select example" id="selectSO"
                        name="selectSO" onchange="getdOCDAta()">
                        <option value="" selected Default>Select SO</option>
                    </select>
                </div> --}}
            @elseif (Auth::user()->user_role == 'FLM')
                {{--  <div class="col-lg-auto  col-md-6 col-sm-6">
                    <select class="form-select js-example-basic-single" aria-label="Default select example" id="selectSO"
                        name="selectSO" onchange="getdOCDAta()">
                        <option value="" selected Default>Select SO</option>
                        @foreach ($soList as $SO)
                            <option value="{{ $SO->position_code }}">{{ $SO->employee_name }}</option>
                        @endforeach
                    </select>
                </div> --}}
            @endif

            <div class="col-lg-auto  col-md-6 col-sm-6">
                <select class="form-select js-example-basic-single" aria-label="Default select example" id="selectDoctor"
                    name="selectDoctor">
                    <option value="" selected Default>Select Doctor</option>
                    @if (Auth::user()->user_role == 'FLM')
                        @foreach ($doctorDash as $doctor)
                            <option value="{{ $doctor->id }}">{{ $doctor->doctor_name }}</option>
                        @endforeach
                    @endif
                </select>
            </div>
            <div class="col-lg-auto  col-md-6 col-sm-6">
                <select class="form-select js-example-basic-single" aria-label="Default select example" id="selectStatus"
                    name="selectStatus">
                    <option value="" selected Default>Select Status</option>
                    <option value="Ongoing">Ongoing</option>
                    <option value="Completed">Completed</option>
                    <option value="DroppedOut">Dropped Out</option>
                </select>
            </div>

            <div class="col-lg-auto  col-md-8 col-sm-12">
                <div class="d-flex align-items-center">
                    <div id="reportrange" class="daterange">
                        <i class="fa fa-calendar"></i>&nbsp;
                        <span></span> <i class="fa fa-caret-down"></i>
                    </div>
                    <input type="hidden" name="datefilter" id="datefilter">

                    <button type="submit" id="applyfilter"><a href="javascript:void(0)" class="btn btn-primary ms-2"><i
                                class="fa fa-search"></i></a></button>
                    <button type="submit" id="clearfilter"><a href="javascript:void(0)" class="btn btn-danger ms-2"><i
                                class="fa fa-times"></i></a></button>
                </div>
            </div>
            @if (Auth::user()->user_role == 'FLM')
                <div class="col-lg-auto  col-md-auto col-sm-auto my-auto">
                    <button type="button" class="btn btn-primary" onclick="openAddPatient()"><i
                            class="fa-solid fa-plus me-2"></i>Add New Patient</button>
                </div>
            @endif

            <div class="col-lg-auto  col-md-auto col-sm-auto my-auto">
                <button type="button" class="btn btn-success" onclick="PatientExport()"><i
                        class="fa-solid fa-download me-2"></i>Export</button>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="white_table">
                    <table id="tabs" class="table table-striped datatable" style="width:100%">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                @if (Auth::user()->user_role == 'Admin')
                                    <th>User Name</th>
                                @endif
                                <th>Patient Name</th>
                                <th>Doctor Name</th>
                                <th>SC Code</th>
                                <th>Therapy Duration</th>
                                <th>Therapy Status</th>
                                <th>Last Purchase Date</th>
                                <th>Next Purchase Date</th>
                                <th>Total Cartridges</th>
                                <th>No. Of Purchase</th>
                                {{-- <th>Time Taken Per Delivery</th> --}}
                                @if (Auth::user()->user_role == 'Admin')
                                    {{-- <th>Time Entered By SO</th>
                                    <th>Time (RF Google Map)</th> --}}
                                @endif
                                <th>Delivery Status</th>
                                <th>Date And Time</th>
                            </tr>
                        </thead>
                        <tbody>


                        </tbody>
                    </table>
                </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">Update Therapy Duration </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' => 'updateTherapyDurationForm', 'id' => 'updateTherapyDurationForm', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}

                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-5 col-sm-8 col-12 pb-0">
                            <div class="mb-3">
                                <label for="therapy_duration_of_therapy" class="form-label">Duration Of Therapy <span
                                        class="red_star">*</span></label>
                                <input type="text" class="form-control br_from SliderValue"
                                    id="therapy_duration_of_therapy" name="therapy_duration_of_therapy"
                                    placeholder="Months" min="1" max="24" step="1"
                                    oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                            </div>
                        </div>
                        <div class="col-lg-5 col-sm-8 col-12 pb-5 mt-0">
                            <div class="mb-3">
                                <label for="therapy_duration_of_therapy" class="form-label">Total Cartridges</label>
                                <input type="text" class="form-control" id="therapy_cartridges"
                                    name="therapy_cartridges" readonly>
                            </div>
                        </div>
                        <div class="w-100 col-12 pt-4"></div>
                        <div class="col-12 pt-4">
                            <div class="mb-3">
                                <div class="rangeslider-wrap">
                                    <input id="therapy_sliderid" type="range" min="1" max="24"
                                        step="1"
                                        labels="1, , , , 5, , , ,  9, , , , 13, , , , 17, , , 20, , , , 24 ">
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="therapy_patient_id" name="therapy_patient_id">
                        <!-- <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 class="col-lg-12 text-center">
                            <div class="mb-3">
                                <button type="submit" id="updateTherapyDurationSubmit"
                                    class=" btn btn-primary mt-4">Update</button>
                            </div>
                        </div>

                    </div>

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

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

    <div class="modal fade" id="therapy_status" 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">Therapy Status </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">
                        {{ Form::open(['url' => '#', 'name' => 'updateTherapyStatusForm', 'id' => 'updateTherapyStatusForm', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}

                        <div class="col-lg-12 col-sm-12 col-12">
                            <div class="mb-3 pb-5">
                                <label for="updateTherapyPatient" class="form-label">Duration Of Therapy <span
                                        class="red_star">*</span></label>
                                <ul class="list-unstyled dropdown_sr" id="therapyStatusDropdown">
                                    <li class="init">Select</li>
                                    {{-- <li data-value="Ongoing"><i class="fa-regular fa-clock me-2"
                                            style="color: #F49B06;"></i>
                                        Ongoing </li> --}}
                                    <li data-value="DroppedOut"><i class="fa-solid fa-outdent me-2"
                                            style="color: #84740a;"></i>Dropped out </li>
                                    {{-- <li data-value="Completed"><i class="fa-regular fa-circle-check me-2"
                                            style="color: green;"></i>Therapy completed</li> --}}
                                </ul>
                            </div>
                            <input type="hidden" id="selectedTherapyStatus" name="selectedTherapyStatus">

                            <input type="hidden" id="updateTherapyPatientId" name="updateTherapyPatientId">
                        </div>
                        <div class="col-lg-12 text-center">
                            <div class="mb-3">
                                <button type="submit" id="updateTherapyPatientSubmit"
                                    class=" btn btn-primary mt-4">Update</button>
                            </div>
                        </div>
                        {{ Form::close() }}



                    </div>

                </div>
            </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' => 'AddCartridgesForm', 'id' => 'AddCartridgesForm', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}
                <div class="modal-body">
                    <div class="row">
                        <input type="hidden" id="patient_id" name="patient_id">
                        <input type="hidden" id="cartridge_limit">
                        <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="date_of_purchase"
                                    name="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="next_purchase_date"
                                    name="next_purchase_date" placeholder="Enter Date">
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-6 col-12">
                            <div class="mb-3">
                                <label for="total_cartridges" class="form-label">Total Cartridges Purchase <span
                                        class="red_star">*</span></label>
                                <input type="number" class="form-control br_from" id="total_cartridges"
                                    oninput="updateCartridgeLimit()" name="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="train_demo"
                                    name="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="train_demo-error" class="error" for="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="delivery_type"
                                    name="delivery_type" aria-label="Default select example">
                                    <option value="" selected Default>Select Delivery Type</option>
                                    <option value="self"> Self</option>
                                    <option value="colleague_name">Colleague</option>
                                    <option value="stockist_name">Stockist</option>
                                </select>
                                <label id="delivery_type-error" class="error" for="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" style="display: none">
                            <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="delivery_user_id"
                                    name="delivery_user_id" aria-label="Default select example">
                                    <option value="" selected Default>Select Colleague</option>
                                    @foreach ($ColleagueList as $list)
                                        <option value="{{ $list->id }}">{{ $list->employee_name }}</option>
                                    @endforeach
                                </select>
                                <label id="delivery_user_id-error" class="error" for="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-3">
                                <div class="mb-3">
                                    <label for="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="duration_of_therapy" name="duration_of_therapy" placeholder="Months"
                                        min="1" max="24" step="1"
                                        oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                </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>
                    </div>
                    <div class="col-lg-12 text-center">
                        <div class="mb-3">
                            <button type="submit" id="AddCartridgesSubmit" class=" btn btn-primary mt-4">Submit</button>
                        </div>
                    </div>

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


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


@section('js')
    <script>
        function PatientExport() {
            let params = {
                datefilter: $('#datefilter').val(),
                selectUser: $('#selectUser option:selected').val(),
                selectDoctor: $('#selectDoctor option:selected').val(),
                selectStatus: $('#selectStatus option:selected').val(),
                selectSLM: $('#selectSLM option:selected').val(),
                selectFLM: $('#selectFLM option:selected').val(),
                selectSO: $('#selectSO option:selected').val()
            };

            let query = $.param(params);
            let url = "{{ route('PatientExport') }}?" + query;
            window.location.href = url;
        }


        function getFLMDAta() {
            $.ajax({
                url: "{{ url('/get-parent-data') }}",
                type: "POST",
                data: {
                    ParentPossionCode: $('#selectSLM option:selected').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#selectFLM').html('<option value="">Select PS</option>');
                    $.each(result.parent, function(key, value) {
                        $("#selectFLM").append('<option value="' + value.position_code + '">' + value
                            .employee_name + '</option>');
                    });
                    $('#selectSO').html('<option value="">Select SO</option>');
                }
            })
        }

        function getSODAta() {
            $.ajax({
                url: "{{ url('/get-parent-data') }}",
                type: "POST",
                data: {
                    ParentPossionCode: $('#selectFLM option:selected').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#selectSO').html('<option value="">Select SO</option>');
                    $.each(result.parent, function(key, value) {
                        $("#selectSO").append('<option value="' + value.position_code + '">' + value
                            .employee_name + '</option>');
                    });
                }
            })
        }

        function getdOCDAta() {
            $.ajax({
                url: "{{ url('/get-DOC-data') }}",
                type: "POST",
                data: {
                    ParentPossionCode: $('#selectFLM option:selected').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#selectDoctor').html('<option value="">Select Doctor</option>');
                    $.each(result.parent, function(key, value) {
                        $("#selectDoctor").append('<option value="' + value.id + '">' + value
                            .doctor_name + '</option>');
                    });
                }
            })
        }

        function getdOCDAtaAdmin() {
            $.ajax({
                url: "{{ url('/get-DOC-data-admin') }}",
                type: "POST",
                data: {
                    ParentPossionCode: $('#selectUser option:selected').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#selectDoctor').html('<option value="">Select Doctor</option>');
                    $.each(result.parent, function(key, value) {
                        $("#selectDoctor").append('<option value="' + value.id + '">' + value
                            .doctor_name + '</option>');
                    });
                }
            })
        }

        function openAddPatient() {
            window.location.href = "{{ route('addPatientData') }}";

        }


        function updateTherapyStatus(patientId, therapyStatus) {
            $('#therapy_status').modal('show');
            $('#updateTherapyPatientId').val(patientId)


            // $.ajax({
            //     url: "{{ route('updateCartridgesData') }}",
            //     type: 'POST',
            //     data: {
            //         'id': patientId,
            //         '_token': "{{ csrf_token() }}"
            //     },
            //     dataType: "json",
            //     success: function(response, textStatus, xhr) {
            //         if (response.status == 1) {
            //             console.log(response.data);
            //             $('#cartridge_limit').val(response.data.total_cartridges);
            //             $('#therapy_limit').val(response.data.duration_of_therapy);
            //             $('#duration_of_therapy').val(response.data.duration_of_therapy);
            //         } else {
            //             $.notify(response.msg, "error");
            //         }
            //     },
            //     error: function(jqXHR, textStatus, errorThrown) {
            //         $.notify(jqXHR.responseJSON.message, "error");
            //     }
            // });
        }


        function updateTherapyDuration(patientId, duration, cartridges) {
            $('#therapy_dtails').modal('show');
            var newSliderValue = duration;
            $('#therapy_duration_of_therapy').val(newSliderValue);
            $('#therapy_sliderid').val(newSliderValue).change();
            $('#therapy_patient_id').val(patientId);
            $('#therapy_cartridges').val(cartridges);
        }



        function updateCartridges(patientId) {
            $('#add_cartridges').modal('show');
            $.ajax({
                url: "{{ route('updateCartridgesData') }}",
                type: 'POST',
                data: {
                    'id': patientId,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        $('#cartridge_limit').val(response.data.total_cartridges);
                        $('#cartridge_limit_final').val(response.data.total_cartridges);
                        $('#therapy_limit').val(response.data.duration_of_therapy);
                        var newSliderValue = response.data.duration_of_therapy;
                        $('#duration_of_therapy').val(newSliderValue);
                        $('#sliderid').val(newSliderValue).change();
                        $('#patient_id').val(response.data.id);
                    } else {
                        $.notify(response.msg, "error");
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }

        function status(id) {
            $.ajax({
                url: "{{ route('ChangeEnrolledDoctorStatus') }}",
                type: 'POST',
                data: {
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        $.notify(response.msg, "success");
                    } else
                        $.notify(response.msg, "error");
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }

        $('#therapyStatusDropdown li').click(function() {
            var selectedValue = $(this).data('value');
            $('#selectedTherapyStatus').val(selectedValue);
        });



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

                },
                therapy_patient_id: {
                    required: true,
                },
                therapy_cartridges: {
                    required: true,
                },
            },
            messages: {

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

                var formData = new FormData($("#updateTherapyDurationForm")[0]);
                $.ajax({
                    url: "{{ route('updateTherapyDurationData') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {
                        // console.log(response);
                        if (response.status == 1) {
                            // Success message
                            $("#updateTherapyDurationSubmit").attr('disabled', false);
                            $.notify(response.msg, "success");
                            $('#therapy_dtails').modal('hide');
                            refreshDataTable();
                        } else {
                            // Error message
                            $("#updateTherapyDurationSubmit").attr('disabled', false);
                            $.notify(response.msg, "error");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        // Error in request
                        $("#updateTherapyDurationSubmit").attr('disabled', false);
                        $.notify("An error occurred", "error");
                    }
                })
            }

        });

        $('#updateTherapyStatusForm').validate({
            ignore: ".ignore",
            rules: {
                updateTherapyPatientId: {
                    required: true,

                },
                selectedTherapyStatus: {
                    required: true,
                },
            },
            messages: {

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

                var formData = new FormData($("#updateTherapyStatusForm")[0]);
                $.ajax({
                    url: "{{ route('updateTherapyStatus') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {
                        // console.log(response);
                        if (response.status == 1) {
                            // Success message
                            $("#updateTherapyStatusSubmit").attr('disabled', false);
                            $.notify(response.msg, "success");
                            $('#therapy_status').modal('hide');
                            refreshDataTable();
                        } else {
                            // Error message
                            $("#updateTherapyStatusSubmit").attr('disabled', false);
                            $.notify(response.msg, "error");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        // Error in request
                        $("#updateTherapyStatusSubmit").attr('disabled', false);
                        $.notify("An error occurred", "error");
                    }
                })
            }

        });


        function updateCartridgeLimit() {
            var totalCartridgesInput = document.getElementById('total_cartridges');
            var cartridgeLimitInput = document.getElementById('cartridge_limit');
            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() {
            $('#date_of_purchase').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                minYear: 2020,
                /*                 maxYear: parseInt(moment().format('YYYY'), 10),
                 */
                locale: {
                    format: 'DD/MM/YYYY'
                }
            }, function(start, end, label) {
                var selectedDate = start;

                var nextPurchaseDate = selectedDate.clone().add(7, 'days');

                $('#next_purchase_date').val(nextPurchaseDate.format('DD/MM/YYYY'));

                $('#next_purchase_date').daterangepicker({
                    singleDatePicker: true,
                    showDropdowns: true,
                    minYear: 2020,
                    /*                     maxYear: parseInt(moment().format('YYYY'), 10),
                     */
                    startDate: nextPurchaseDate,
                    minDate: selectedDate.clone().add(1,
                        'days'),
                    autoApply: false,
                    locale: {
                        format: 'DD/MM/YYYY'
                    }
                });
            });
        }


        $('#date_of_purchase').on('apply.daterangepicker', function(ev, picker) {
            initializeDatePickers();
        });



        $(document).ready(function() {

            $('.birthday').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                autoUpdateInput: false,
                minYear: 2020,
                /*                 maxYear: parseInt(moment().format('YYYY'), 10),
                 */
                locale: {
                    format: 'DD/MM/YYYY'
                }
            }, function(start) {
                $(this.element).val(start.format('DD/MM/YYYY'));
            });


            initializeDatePickers();


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

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

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

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

                $('#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'); // Months are 0-indexed
                var year = currentDate.getFullYear();

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

                $('#date_of_purchase').val(formattedDate);
                $('#next_purchase_date').val(formattedDate);




            });


            checkDeliveryType();

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

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

                // Check the value and show/hide delivery_user_id div accordingly
                if (selectedDeliveryType === 'colleague_name') {
                    $('#delivery_user_id').closest('.col-sm-12').show();
                } else if (selectedDeliveryType != 'colleague_name') {
                    $('#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();
            });

            filterData();

            $('#applyfilter').click(function() {
                filterData();
            });

            $('#clearfilter').click(function() {
                window.location.reload();
            });

            function filterData() {
                var i = 1;
                var table = $('#tabs').DataTable({
                    scrollX: true,
                    destroy: true,
                    processing: true,
                    serverSide: true,
                    responsive: true,
                    autoWidth: false,
                    language: {
                        searchPlaceholder: "Search"
                    },
                    ajax: {
                        url: "{{ route('enrolledPatientPaginate') }}",
                        data: function(d) {
                            d.datefilter = $('#datefilter').val();
                            d.selectUser = $('#selectUser option:selected').val();
                            d.selectDoctor = $('#selectDoctor option:selected').val();
                            d.selectStatus = $('#selectStatus option:selected').val();
                            d.selectSLM = $('#selectSLM option:selected').val();
                            d.selectFLM = $('#selectFLM option:selected').val();
                            d.selectSO = $('#selectSO option:selected').val();
                            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
                        },
                        @if (Auth::user()->user_role == 'Admin')
                            {
                                data: 'employee_name',
                                orderable: false,
                                searchable: true
                            },
                        @endif {
                            data: 'patient_name',
                            orderable: false,
                            searchable: true
                        },
                        {
                            data: 'doctor_name',
                            orderable: false,
                            searchable: true
                        },
                        {
                            data: 'sc_code',
                            orderable: false,
                            searchable: true
                        },
                        {
                            data: 'duration_of_therapy',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'therapy_status',
                            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: 'total_cartridge_logs',
                            orderable: false,
                            searchable: true
                        },
                        // {
                        //     data: 'delivery_time_taken',
                        //     orderable: false,
                        //     searchable: false
                        // },
                        @if (Auth::user()->user_role == 'Admin')
                            // {
                            //     data: 'user_duration',
                            //     orderable: false,
                            //     searchable: true
                            // }, {
                            //     data: 'google_duration',
                            //     orderable: false,
                            //     searchable: true
                            // },
                        @endif {
                            data: 'delivery_status',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'created_at',
                            orderable: false,
                            searchable: false

                        },

                    ],
                    columnDefs: [{
                        @if (Auth::user()->user_role == 'Admin')
                            "aTargets": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
                                11,
                            ], // Column to target
                        @else
                            "aTargets": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], // Column to target
                        @endif

                        "mRender": function(data, type, full) {
                            if (data != null) {
                                return data;
                            } else {
                                return '-';
                            }
                        },
                    }, ],

                });

            }

            $('#AddCartridgesForm').validate({
                ignore: ".ignore",
                rules: {
                    patient_id: {
                        required: true,
                    },
                    duration_of_therapy: {
                        required: true,
                        number: true,
                        min: 1,
                        max: 24,
                        checkDurationTherapyInactive: true,
                        checkDurationTherapyActive: "#modifyTherapyOption:checked"
                    },
                    therapy_limit: {
                        required: true,
                        checkTherapyLimit: true,
                        checkTherapyLimitWithModifyOption: "#modifyTherapyOption:checked"
                    },
                    date_of_purchase: {
                        required: true,
                    },
                    next_purchase_date: {
                        required: true,
                        greaterThanDateOfPurchase: true

                    },
                    total_cartridges: {
                        required: true,
                        checkTotalCartridgesLimit: true,
                        wholeNumber: true,
                    },
                    cartridge_limit_final: {
                        checkTotalCartridges: true,
                    },
                    train_demo: {
                        required: true,
                    },
                    delivery_type: {
                        required: true,
                    },
                    distance_travelled: {
                        required: true,
                        maxlength: 3,
                        minlength: 1,
                    },
                    indication: {
                        required: false,
                    },
                    indication_other: {
                        required: {
                            depends: function(element) {
                                return $('#indication').val() === "Others";
                            }
                        }
                    },
                    delivery_user_id: {
                        required: {
                            depends: function(element) {
                                return $("#delivery_type").val() === "colleague_name";
                            }
                        },
                        // checkDeliveryType: true,
                    }
                },
                messages: {

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

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

            });

            $.validator.addMethod("greaterThanDateOfPurchase", function(value, element, params) {
                var dateOfPurchase = $('#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("checkTotalCartridges", function(value, element) {
                var durationOfTherapy = $('#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("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.");





            $.validator.addMethod("checkDurationTherapyInactive", function(value, element, param) {
                if ($(param).length && !$(param).is(":checked")) {
                    var totalCartridges = $('#cartridge_limit').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 = $('#cartridge_limit').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("checkDurationTherapyUpdate", function(value, element) {
                var total_cartridges = $('#therapy_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 greater than the total cartridges.");

            $('input[type="range"]').rangeslider({
                polyfill: false,
                rangeClass: 'rangeslider',
                disabledClass: 'rangeslider--disabled',
                horizontalClass: 'rangeslider--horizontal',
                fillClass: 'rangeslider__fill',
                handleClass: 'rangeslider__handle',
                onInit: function() {
                    $rangeEl = this.$range;
                    var $handle = $rangeEl.find('.rangeslider__handle');
                    var handleValue = '<div class="rangeslider__handle__value">' + this
                        .value + '</div>';
                    $handle.append(handleValue);

                    var rangeLabels = this.$element.attr('labels');
                    rangeLabels = rangeLabels.split(', ');

                    $rangeEl.append('<div class="rangeslider__labels"></div>');
                    $(rangeLabels).each(function(index, value) {
                        $rangeEl.find('.rangeslider__labels').append(
                            '<span class="rangeslider__labels__label">' +
                            value + '</span>'
                        );
                    });
                },
                onSlide: function(position, value) {
                    var $handle = this.$range.find('.rangeslider__handle__value');
                    $handle.text(this.value);
                },
                onSlideEnd: function(position, value) {
                    // This is the new part: add an input event listener
                    console.log('Value changed:', value);
                }
            });


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

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

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

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

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






            $(".toggle").click(function() {
                $(".other_txt").toggleClass("main");
                $(".other_txt_2").toggleClass("main");

            });


        });



        function refreshDataTable() {
            $('.table').DataTable().ajax.reload();
        }
    </script>
@endsection