@extends('User/layout/app')
@section('content')
    <div class="container-fluid">

        <div class="row">
            {{ Form::open(['url' => '#', 'name' => 'enrolledPatientForm', 'id' => 'enrolledPatientForm', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}

            <div class="col-12">
                <div class="white_table">
                    <div class="padding_from">
                        <div class="row">
                            <div class="col-12">
                                <h4 class="rs__view__title"><i class="fa-solid fa-angles-right"></i> Doctor Details</h4>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="mb-3">
                                    <label for="" class="form-label">Doctor Name <span
                                            class="red_star">*</span></label>
                                    <select class="form-select js-example-basic-single only_br"
                                        aria-label="Default select example" id="doctor_name" name="doctor_name">
                                        <option value="" selected Default>Select Doctor</option>
                                        <option value="NewDoctor">Add Doctor</option>
                                    </select>
                                    <label id="doctor_name-error" class="error" for="doctor_name"></label>

                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="mb-3">
                                    <label for="doctor" class="form-label">Doctor Name <span
                                            class="red_star">*</span></label>
                                    <input type="text" class="form-control br_from" placeholder="Doctor Name"
                                        id="doctor" name="doctor">
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="mb-3">
                                    <label for="sc_code" class="form-label">SC Code <span class="red_star">*</span></label>
                                    <input type="number" class="form-control br_from" placeholder="Enter SC Code"
                                        id="sc_code" name="sc_code">
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="mb-3">
                                    <label for="speciality_name" class="form-label">Speciality <span
                                            class="red_star">*</span></label>
                                    <select class="form-select js-example-basic-single only_br"
                                        aria-label="Default select example" id="speciality_name" name="speciality_name">
                                        <option value="" selected Default>Select Speciality</option>
                                        @foreach ($specialities as $key)
                                            <option value="{{ $key->id }}">{{ $key->speciality_name }}</option>
                                        @endforeach
                                    </select>
                                    <label id="speciality_name-error" class="error" for="speciality_name"></label>

                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="mb-3">
                                    <label for="doc_mobile_number" 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>
                                        </select>
                                        <input type="number" class="form-control br_from" id="doc_mobile_number"
                                            name="doc_mobile_number" placeholder="Enter Mobile Number">

                                    </div>
                                    <label id="doc_mobile_number-error" class="error" for="doc_mobile_number"></label>

                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="mb-3">
                                    <label for="pincode" class="form-label">Pincode <span class="red_star">*</span></label>
                                    <input type="number" class="form-control br_from" id="pincode" name="pincode"
                                        placeholder="Enter Pincode Code">
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="mb-3">
                                    <label for="state" class="form-label">State <span class="red_star">*</span></label>
                                    <select class="form-select js-example-basic-single only_br"
                                        aria-label="Default select example" id="state" name="state">
                                        <option value="" selected Default>Select State</option>
                                        @foreach ($states as $key)
                                            <option value="{{ $key->id }}">{{ $key->state_name }}</option>
                                        @endforeach
                                    </select>
                                    <label id="state-error" class="error" for="state"></label>

                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="mb-3">
                                    <label for="city" class="form-label">City <span class="red_star">*</span></label>
                                    <select class="form-select js-example-basic-single only_br"
                                        aria-label="Default select example" id="city" name="city">
                                        <option value="" selected Default>Select City</option>
                                    </select>
                                    <label id="city-error" class="error" for="city"></label>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="mb-3">
                                    <label for="hospital_name" class="form-label">Address (Hospital Name) <span
                                            class="red_star">*</span></label>
                                    <input type="text" class="form-control br_from" id="hospital_name"
                                        name="hospital_name" placeholder="Enter Hospital Name">
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="mb-3">
                                    <label for="doc_gender" class="form-label">Gender <span
                                            class="red_star">*</span></label>
                                    <select class="form-select js-example-basic-single only_br"
                                        aria-label="Default select example" id="doc_gender" name="doc_gender">
                                        <option value="" selected Default>Select Gender</option>
                                        <option value="male">Male</option>
                                        <option value="female">Female</option>
                                    </select>
                                    <label id="doc_gender-error" class="error" for="doc_gender"></label>

                                </div>
                            </div>
                            <div class="col-12">
                                <h4 class="rs__view__title"><i class="fa-solid fa-angles-right"></i> Patient Details</h4>
                            </div>

                            <input type="hidden" id="doctor_id" name="doctor_id" value="">
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="mb-3">
                                    <label for="patient_name" class="form-label">Patient Name <span
                                            class="red_star">*</span></label>
                                    <input type="text" class="form-control br_from" id="patient_name"
                                        name="patient_name" placeholder="Enter Patient Name">
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="mb-3">
                                    <label for="age" class="form-label">Age <span class="red_star">*</span></label>
                                    <input type="number" class="form-control br_from" id="age" name="age"
                                        placeholder="Enter Age">
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="mb-3">
                                    <label for="gender" 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="gender" value="male">
                                                <span for="male">Male</span>
                                            </label>
                                        </div>
                                        <div class="sr_code">
                                            <label>
                                                <input type="radio" id="female" name="gender" value="female">
                                                <span for="female">Female</span>
                                            </label>
                                        </div>
                                        <div class="sr_code">
                                            <label>
                                                <input type="radio" id="other" name="gender" value="other">
                                                <span for="other">Other</span>
                                            </label>
                                        </div>
                                    </div>
                                    <label id="gender-error" class="error" for="gender"></label>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6 col-sm-12 col-12">
                                <div class="mb-3">
                                    <label for="mobile_number" 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>
                                        </select>
                                        <input type="number" class="form-control br_from" id="mobile_number"
                                            name="mobile_number" placeholder="Enter Mobile Number">
                                    </div>
                                    <label id="mobile_number-error" class="error" for="mobile_number"></label>

                                </div>
                            </div>
                            <div class="w-100"></div>
                            <div class="col-lg-3 col-sm-6 col-12 pb-5">
                                <div class="mb-3 pb-3">
                                    <label for="duration_of_therapy" class="form-label">Duration Of Therapy <span
                                            class="red_star">*</span></label>
                                    <input type="number" class="form-control" id="duration_of_therapy"
                                        name="duration_of_therapy" placeholder="Months" value="1" min="1"
                                        max="24" step="1"
                                        oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                </div>
                            </div>
                            {{-- <div class="w-100"></div> --}}
                            <div class="col-12" style="margin-bottom: 1%">
                                <div class="mb-3">
                                    <div class="rangeslider-wrap">
                                        <input type="range" id="trans" min="1" max="24"
                                            step="1" value="1"
                                            labels="1, , , , 5, , , ,  9, , , , 13, , , , 17, , , 20, , , , 24 ">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 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 Of Purchase">
                                </div>
                            </div>

                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="mb-3">
                                    <label for="gender" class="form-label">Do You have a Next Purchase Date?<span
                                            class="red_star">*</span></label>
                                    <div class="gender_select">
                                        <div class="sr_code">
                                            <label>
                                                <input type="radio" id="do_you_have_next_purchase_date_yes"
                                                    name="do_you_have_next_purchase_date" value="yes">
                                                <span for="do_you_have_next_purchase_date_yes">Yes</span>
                                            </label>
                                        </div>
                                        <div class="sr_code">
                                            <label>
                                                <input type="radio" id="do_you_have_next_purchase_date_no"
                                                    name="do_you_have_next_purchase_date" value="no">
                                                <span for="do_you_have_next_purchase_date_no">No</span>
                                            </label>
                                        </div>
                                    </div>
                                    <label id="do_you_have_next_purchase_date-error" class="error"
                                        for="do_you_have_next_purchase_date"></label>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="mb-3 birthday_icon">
                                    <label for="next_purchase_date" class="form-label">Next Purchase Date</label>
                                    <input type="text" class="birthday form-control br_from" id="next_purchase_date"
                                        name="next_purchase_date" placeholder="Enter Next Purchase Date">
                                </div>
                            </div>

                            <div class="col-lg-4 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"
                                        name="total_cartridges" placeholder="Enter Cartridges Purchase">
                                </div>
                            </div>

                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="mb-3">
                                    <label for="train_demo" class="form-label">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="1">Yes</option>
                                        <option value="2">No</option>
                                    </select>
                                    <label id="train_demo-error" class="error" for="train_demo"></label>
                                </div>
                            </div>

                            <div class="col-lg-4 col-sm-6 col-12" id="noTrainDemoDiv" style="display: none;">
                                <div class="mb-3">
                                    <label for="no_train_demo" class="form-label">If No, please select the below option
                                        <span class="red_star">*</span></label>
                                    <select class="form-select js-example-basic-single only_br" id="no_train_demo"
                                        name="no_train_demo" aria-label="Default select example">
                                        <option value="" selected Default>Select</option>
                                        <option value="Video Call">Video Call</option>
                                        <option value="Other">Other</option>
                                    </select>
                                    <label id="no_train_demo-error" class="error" for="no_train_demo"></label>
                                </div>
                            </div>

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

                            <div class="col-lg-4 col-sm-6 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 Self</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"></label>

                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 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" disable>
                                        <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"></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-4 col-sm-6 col-12">
                                <div class="mb-3">
                                    <label for="delivery_done" class="form-label">Delivery Done<span
                                            class="red_star">*</span></label>
                                    <input type="text" class="form-control br_from" id="delivery_done"
                                        name="delivery_done" placeholder="Enter Delivery Done">
                                </div>
                            </div>

                            <div class="col-lg-12 text-end">
                                <div class="mb-3">
                                    <button type="submit" id="enrolledPatientSubmit"
                                        class=" btn btn-primary mt-4">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{ Form::close() }}

        </div>
    </div>


    <div class="modal fade" id="view_qr" 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">Ajay Kaul's QR Code</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">
                    <h4 class="pb-3 text-center">Scan QR code</h4>
                    <div class="qr_code">
                        {{-- <img src="..///images/qr-code.png"> --}}
                    </div>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="https://abc.com" disabled>
                        <span class="input-group-text" id="basic-addon1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <g id="Group_21235" data-name="Group 21235" transform="translate(-1154 -439)">
                                    <g id="vuesax_linear_copy" data-name="vuesax/linear/copy"
                                        transform="translate(472 57)">
                                        <g id="copy">
                                            <path id="Vector"
                                                d="M14,4.9V9.1c0,3.5-1.4,4.9-4.9,4.9H4.9C1.4,14,0,12.6,0,9.1V4.9C0,1.4,1.4,0,4.9,0H9.1C12.6,0,14,1.4,14,4.9Z"
                                                transform="translate(684 390)" fill="none" stroke="#f15a23"
                                                stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                            <path id="Vector-2" data-name="Vector"
                                                d="M14,4.9V9.1c0,3.5-1.4,4.9-4.9,4.9H8V10.9C8,7.4,6.6,6,3.1,6H0V4.9C0,1.4,1.4,0,4.9,0H9.1C12.6,0,14,1.4,14,4.9Z"
                                                transform="translate(690 384)" fill="none" stroke="#f15a23"
                                                stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                            <path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z"
                                                transform="translate(682 382)" fill="none" opacity="0" />
                                        </g>
                                    </g>
                                </g>
                            </svg>

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

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


@section('js')
    <script>
        function initializeDatePickers() {
            // Initialize the "Date of Purchase" input as a date range picker
            $('#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) {
                // Get the selected date
                var selectedDate = start;

                // Calculate the next purchase date by adding 7 days
                var nextPurchaseDate = selectedDate.clone().add(7, 'days');

                // Set the "Next Purchase Date" input value in DD/MM/YYYY format
                $('#next_purchase_date').val(nextPurchaseDate.format('DD/MM/YYYY'));

                // Initialize the "Next Purchase Date" input as a date range picker with DD/MM/YYYY format
                $('#next_purchase_date').daterangepicker({
                    singleDatePicker: true,
                    showDropdowns: true,
                    minYear: 2020,
                    /*                     maxYear: parseInt(moment().format('YYYY'), 10),
                     */
                    startDate: nextPurchaseDate,
                    minDate: selectedDate.clone().add(1,
                        'days'), // Disable dates prior to "Date of Purchase"
                    autoApply: false, // Make "Apply" button mandatory
                    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() {
            $('#train_demo').change(function() {
                if ($(this).val() === "2") {
                    $('#noTrainDemoDiv').show();
                } else {
                    $('#noTrainDemoDiv').hide();
                    $('#no_train_demo').val('');
                    $('#noOtherTrainDemoDiv').hide();
                    $('#no_other_train_demo').val('');
                }
            });

            $('#no_train_demo').change(function() {
                if ($(this).val() === "Other") {
                    $('#noOtherTrainDemoDiv').show();
                } else {
                    $('#noOtherTrainDemoDiv').hide();
                    $('#no_other_train_demo').val('');
                }
            });

            $('#indication').change(function() {
                if ($(this).val() === "Others") {
                    $('#otherIndicationDiv').show();
                } else {
                    $('#otherIndicationDiv').hide();
                    $('#indication_other').val(''); // Clear the input when hiding
                }
            });

            $('#next_purchase_date').prop('disabled', true);

            $('input[name="do_you_have_next_purchase_date"]').on('change', function() {
                var val = $("input[name='do_you_have_next_purchase_date']:checked").val();

                if (val === "yes") {
                    $('#next_purchase_date').prop('disabled', false);
                    $('#next_purchase_date').rules('add', {
                        required: true,
                        greaterThanDateOfPurchase: true,
                    });
                    $('#next_purchase_date').valid();

                } else {
                    $('#next_purchase_date')
                        .val('')
                        .prop('disabled', true)
                        .rules('remove');

                    $('#next_purchase_date-error').remove();
                    $('#next_purchase_date').removeClass('error');
                }
            });

            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-lg-4').show();
                } else if (selectedDeliveryType != 'colleague_name') {
                    $('#delivery_user_id').closest('.col-lg-4').hide();
                }
            }
            // $('.count').each(function () {
            //     $(this).prop('Counter',0).animate({
            //         Counter: $(this).text()
            //     }, {
            //         duration: 1500,
            //         easing: 'linear',
            //         step: function (now) {
            //             $(this).text(Math.ceil(now));
            //         }
            //     });
            // });

            //datepicker

            $(function() {

                var start = moment().subtract(29, 'days');
                var end = moment();

                function cb(start, end) {
                    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end
                        .format('MMMM D, YYYY'));
                }

                $('#reportrange').daterangepicker({
                    startDate: start,
                    endDate: end,
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1,
                            'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf(
                            'month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'),
                            moment().subtract(1, 'month').endOf('month')
                        ]
                    }
                }, cb);

                cb(start, end);

            });

            $('.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();

            jQuery(function($) {
                var path = window.location
                    .href; // because the 'href' property of the DOM element is the absolute path
                $('.sidebar-nav a').each(function() {
                    if (this.href === path) {
                        $(this).addClass('active');
                        $('.submenu-link.active').parents('li').parent('.submenu')
                            .addClass('active');
                        $('.submenu.active').parents('.has-sub').children(
                            '.sidebar-link').addClass('active');
                    }
                });

            });
            // range slider

            $('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);
                }
            });

            // Alternative way to add input event listener
            $('input[type="range"]').on('input', function() {
                $('#duration_of_therapy').val($(this).val());
            });

            $('#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 = $('input[type="range"]');
                        $range.val(num).change();
                        $range.rangeslider('update', true);
                    }
                }
            });



            //end range
            $('.datatable').DataTable({
                scrollX: true,
                language: {
                    searchPlaceholder: "Search",
                    paginate: {
                        previous: '<i class="fas fa-chevron-left"></i>',
                        next: '<i class="fas fa-chevron-right"></i>'
                    }
                }
                // columnDefs: [
                //   { "width": "150px", "targets": [2,3] }
                // ]
            });

            if ($.fn.DataTable.isDataTable('.datatable_current')) {
                $('.datatable_current').DataTable().destroy();
            }

            $('.datatable_current').DataTable({
                scrollX: true,
                searching: false,
                paging: false,
                info: false,
                language: {
                    searchPlaceholder: "Search",
                    paginate: {
                        previous: '<i class="fas fa-chevron-left"></i>',
                        next: '<i class="fas fa-chevron-right"></i>'
                    }
                }

                // columnDefs: [
                //   { "width": "150px", "targets": [2,3] }
                // ]
            });

            //ul dropdown
            $(".dropdown_sr").on("click", ".init", function() {
                $(this).closest(".dropdown_sr").children('li:not(.init)').toggle();
            });

            var allOptions = $(".dropdown_sr").children('li:not(.init)');
            $(".dropdown_sr").on("click", "li:not(.init)", function() {
                allOptions.removeClass('selected');
                $(this).addClass('selected');
                $(".dropdown_sr").children('.init').html($(this).html());
                allOptions.toggle();
            });


            //select2
            $('.js-example-basic-single').select2();

            $(".js-example-basic-multiple").select2({
                placeholder: "Select MR"
            });
            $('.js-example-basic-single').each(function() {
                $(this).select2({
                    // theme: "bootstrap-5",
                    dropdownParent: $(this)
                        .parent(), // fix select2 search input focus bug
                })
            })
            $(document).on('select2:open', () => {
                document.querySelector('.select2-container--open .select2-search__field')
                    .focus();
            });

            //venobox
            new VenoBox({
                selector: '.view_img',
                numeration: true,
                infinigall: true,
                share: true,
                spinner: 'rotating-plane'
            });


        });

        $(window).bind('load', function() {
            $('#loader').fadeOut();
        });

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

        $.validator.addMethod("lettersWithDotsAndSpaces", function(value, element) {
            return this.optional(element) || /^[a-zA-Z. ]+$/.test(value);
        }, "Please enter only letters, periods, and spaces.");

        $.validator.addMethod("noSpaces", function(value, element) {
            return this.optional(element) || $.trim(value).length > 0;
        }, "Please enter valid text, not just spaces.");

        $('#enrolledPatientForm').validate({
            ignore: ".ignore",
            rules: {
                doctor_name: {
                    required: true,
                },
                doctor: {
                    required: true,
                    maxlength: 55,
                    lettersWithDotsAndSpaces: true
                },
                sc_code: {
                    required: true,
                    maxlength: 12
                },
                speciality_name: {
                    required: true,
                },
                doc_mobile_number: {
                    required: true,
                    maxlength: 10,
                    minlength: 10
                },
                pincode: {
                    required: true,
                    maxlength: 6,
                    minlength: 6,
                },
                state: {
                    required: true,
                },
                city: {
                    required: true,
                },
                doc_gender: {
                    required: true,
                },
                hospital_name: {
                    required: true,
                    lettersWithDotsAndSpaces: true

                },
                // @if (isset($doctor_id))
                //     doctor_id_select: {
                //         required: true,
                //     },
                // @else
                //     doctor_name: {
                //         required: true,
                //         noSpaces: true,
                //     },
                // @endif

                patient_name: {
                    required: true,
                    noSpaces: true,
                    maxlength: 55,
                    lettersWithDotsAndSpaces: true
                },
                age: {
                    required: true,
                    maxlength: 3,
                    minlength: 1,
                },
                distance_travelled: {
                    required: true,
                    maxlength: 3,
                    minlength: 1,
                },
                mobile_number: {
                    required: true,
                    maxlength: 10,
                    minlength: 10

                },
                gender: {
                    required: true,
                },
                indication: {
                    required: true,
                },
                indication_other: {
                    noSpaces: true,
                    maxlength: 250,
                    required: {
                        depends: function(element) {
                            return $('#indication').val() === "Others";
                        }
                    }
                },
                duration_of_therapy: {
                    required: true,
                    number: true,
                    min: 1,
                    max: 24,
                    checkDurationTherapy: true,
                },
                date_of_purchase: {
                    required: true,
                },
                do_you_have_next_purchase_date: {
                    required: true,
                },
                next_purchase_date: {
                    greaterThanDateOfPurchase: {
                        depends: function(element) {
                            return $("input[name='do_you_have_next_purchase_date']:checked").val() ===
                                "yes";
                        }
                    },
                    required: {
                        depends: function(element) {
                            return $("input[name='do_you_have_next_purchase_date']:checked").val() ===
                                "yes";
                        }
                    }

                },
                // next_purchase_date: {
                //     required: true,
                //     greaterThanDateOfPurchase: true
                // },
                total_cartridges: {
                    required: true,
                    checkTotalCartridgesLimit: true,
                    checkTotalCartridges: true,
                    wholeNumber: true,
                },
                train_demo: {
                    required: true,
                },
                no_train_demo: {
                    required: {
                        depends: function(element) {
                            return $("#train_demo").val() === "2"; // Only required if Demo = No
                        }
                    }
                },
                no_other_train_demo: {
                    maxlength: 250,
                    noSpaces: true,
                    required: {
                        depends: function(element) {
                            return (
                                $("#train_demo").val() === "2" &&
                                $("#no_train_demo").val() === "Other"
                            );
                        }
                    }
                },
                delivery_type: {
                    required: true,
                },
                delivery_user_id: {
                    required: {
                        depends: function(element) {
                            return $("#delivery_type").val() === "colleague_name";
                        }
                    },
                    // checkDeliveryType: true,
                },
                delivery_done: {
                    noSpaces: true,
                    required: true,
                    maxlength: 250,
                },
            },
            messages: {
                total_cartridges: {
                    checkTotalCartridges: "Total cartridges should be equal to or less than the duration of therapy."
                }
            },
            submitHandler: function(form) {
                $("#enrolledPatientSubmit").attr('disabled', true);

                var formData = new FormData($("#enrolledPatientForm")[0]);
                $.ajax({
                    url: "{{ route('AddPatient') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {
                        // console.log(response);
                        if (response.status == 1) {
                            // Success message
                            $("#enrolledPatientSubmit").attr('disabled', false);
                            $.notify(response.msg, "success");
                            setTimeout(function() {
                                window.location.href =
                                    '{{ route('EnrolledPatient') }}';
                            }, 2000);
                        } else {
                            // Error message
                            $("#enrolledPatientSubmit").attr('disabled', false);
                            $.notify(response.msg, "error");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        // Error in request
                        $("#enrolledPatientSubmit").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("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("checkDeliveryType", function(value, element) {
            var deliveryType = $("#delivery_type").val();
            return (deliveryType === "colleague_name" && value !== "");
        }, "Please select a colleague for delivery.");

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

        $.validator.addMethod("checkDurationTherapy", function(value, element) {
            var total_cartridges = $('#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 greater than the total cartridges.");
    </script>


    <script>
        $(document).ready(function() {
            function OpenDocModel() {
                $('#loader').show();

                // $('#enrollDoctorModel').modal('show');
                $.ajax({
                    url: "{{ url('/get-doctor-data') }}",
                    type: "POST",
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(result) {

                        $('#enrollDoctorModelLabel').html('Add Doctor');
                        $('#doctor_name').html(
                            '<option value="" selected Default>Select Doctor</option>');
                        $('#doctor_name').html('<option value="NewDoctor">Add Doctor</option>');
                        $.each(result.parent, function(key, value) {
                            $("#doctor_name").append('<option value="' + value.id + '">' + value
                                .doctor_name + '</option>');
                        });



                    }
                })

                setTimeout(function() {
                    $('#loader').hide();
                }, 1000);
            }

            OpenDocModel();


            $("#doctor_name").on('change', function() {
                var selectedValue = $("#doctor_name").val();

                if (selectedValue === 'NewDoctor' || selectedValue == '') {
                    $("#doctor").addClass("br_from");
                    $("#doctor").val('');
                    $("#doctor").prop('readonly', false);
                    $("#speciality_name").prop("disabled", false).trigger("change");
                    $("#speciality_name").val('').trigger('change');
                    $("#doc_gender").val('').trigger('change');

                    // $("#speciality_name").select2({
                    //     placeholder: "Select Speciality"
                    // });

                    $("#state").prop("disabled", false).trigger("change");
                    $("#city").prop("disabled", false).trigger("change");
                    $("#doc_mobile_number").val('');
                    $("#pincode").val('');
                    $("#state").val('').trigger('change');
                    // $("#state").select2({
                    //     placeholder: "Select State"
                    // });
                    $("#hospital_name").val('');
                    $("#sc_code").val('');
                    $("#sc_code").prop('readonly', false);
                    $("#pincode").prop('readonly', false);
                    $("#doc_mobile_number").prop('readonly', false);
                    $("#hospital_name").prop('readonly', false);
                    //  $('#enrolledPatientForm')[0].reset();
                    var validator = $('#enrolledPatientForm').validate();
                    validator.resetForm();
                } else if (selectedValue != 'NewDoctor' && selectedValue != '') {
                    $("#doctor").removeClass("br_from");
                    $("#speciality_name").trigger("change");
                    $("#state").prop("disabled", false).trigger("change");
                    $("#city").prop("disabled", false).trigger("change");
                    $("#doc_mobile_number").val('');
                    $("#pincode").val('');
                    $("#hospital_name").val('');
                    $("#speciality_name").val('');
                    $("#sc_code").val('');
                    $("#doctor").val('');
                    // $("#doctor").prop('readonly', true);
                    $("#sc_code").prop('readonly', true);
                    $("#pincode").prop('readonly', false);
                    $("#doc_mobile_number").prop('readonly', false);

                    $("#hospital_name").prop('readonly', false);
                    // $("#state").select2({
                    //     placeholder: "Select State"
                    // });
                    //  $('#enrolledPatientForm')[0].reset();
                    var validator = $('#enrolledPatientForm').validate();
                    validator.resetForm();

                    $.ajax({
                        url: "{{ route('getDoctor') }}",
                        type: 'POST',
                        data: {
                            'doctor_id': selectedValue,
                            '_token': "{{ csrf_token() }}"
                        },
                        dataType: "json",
                        success: function(response, textStatus, xhr) {
                            if (response.status == 1) {
                                var doctorData = response.data.doctor;
                                $('#loader').show();
                                $("#state").val(doctorData.state).trigger('change');
                                $("#doctor").val(doctorData.doctor_name);
                                $("#sc_code").val(doctorData.sc_code);
                                $("#doc_mobile_number").val(doctorData.doctor_mobile_no);
                                $("#speciality_name").val(doctorData.speciality_id).trigger(
                                    'change');
                                $("#doc_gender").val(doctorData.gender).trigger('change');
                                $("#speciality_id").val(doctorData.speciality_id);
                                $("#state_id").val(doctorData.state);

                                $("#pincode").val(doctorData.pincode);
                                $("#hospital_name").val(doctorData.address);
                                setTimeout(function() {
                                    $("#city").val(doctorData.city).trigger('change');
                                    $('#loader').hide();
                                }, 2500);
                                // $("#city").val(doctorData.city).select2().trigger('change');



                                // $("#city").append(
                                //     '<option value="' + doctorData.city +
                                //     '" selected Default value="">' + doctorData
                                //     .city_name +
                                //     '</option>'
                                // );
                                $("#doctor_id").val(doctorData.id);

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


            });

            $("#state").on('change', function() {

                var selectedValue = $(this).val();

                $.ajax({
                    url: "{{ route('getCity') }}",
                    type: 'POST',
                    data: {
                        'state_id': selectedValue,
                        '_token': "{{ csrf_token() }}"
                    },
                    dataType: "json",
                    success: function(response, textStatus, xhr) {
                        if (response.status == 1) {
                            $('#city').html('<option value="">Select City</option>');
                            $.each(response.data.cities, function(index, city) {
                                $("#city").append('<option value="' + city
                                    .id + '">' +
                                    city.city_name + '</option>');
                            });
                        } else
                            $.notify(response.msg, "error");
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        $.notify(jqXHR.responseJSON.message, "error");
                    }
                });
            });
        });
    </script>
@endsection