@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="getdOCDAta()">
                        <option value="" selected Default>Select User</option>
                        @foreach ($users as $user)
                            <option value="{{ $user->position_code }}">{{ $user->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="selectDoctor" name="selectDoctor">
                        <option value="" selected Default>Select Doctor</option>
                        {{-- @foreach ($doctorDash as $doctor)
                            <option value="{{ $doctor->id }}">{{ $doctor->doctor_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">
                        <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">
                        <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">
                        <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">
                        <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">
                        <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="selectSpeciality" name="selectSpeciality">
                    <option value="" selected Default>Select Speciality</option>
                    @foreach ($specialitiesDash as $specialitiesD)
                        <option value="{{ $specialitiesD->id }}">{{ $specialitiesD->speciality_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="selectState"
                    name="selectState">
                    <option value="" selected Default>Select State</option>
                    @foreach ($states as $state)
                        <option value="{{ $state->id }}">{{ $state->state_name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-lg-auto  col-md-6 col-sm-auto">
                <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="OpenDocModel()"><i
                            class="fa-solid fa-plus me-2"></i>Add New
                        Doctor</button>
                </div>
            @endif

            <div class="col-lg-auto  col-md-auto col-sm-auto my-auto">
                <button type="button" class="btn btn-success" onclick="DoctorExport()"><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>Doctor Name</th>
                                <th>SC Code</th>
                                <th>Speciality</th>
                                <th>State</th>
                                <th>Patient Count</th>
                                <th>Total Purchased <br>Cartridges</th>
                                <th>Date And Time</th>
                                <th>Status</th>
                                @if (Auth::user()->user_role == 'Admin' || Auth::user()->user_role == 'FLM')
                                    <th>Action</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="enrollDoctorModel" 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="enrollDoctorModelLabel">Add New Doctor</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' => 'enrolledDoctorForm', 'id' => 'enrolledDoctorForm', 'enctype' => 'multipart/form-data', 'class' => 'pt-0']) }}

                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12" id="DoctorSelectHide">
                            <div class="mb-3">
                                <label for="doctor_name" class="form-label">Select Doctor <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>
                                    {{-- @foreach ($doctors as $value)
                                        <option value="{{ $value->id }}">{{ $value->doctor_name }}</option>
                                    @endforeach --}}

                                </select>
                                <label id="doctor_name-error" class="error" for="doctor_name"></label>

                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 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-6 col-md-6 col-sm-12 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-6 col-md-6 col-sm-12 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>

                        <input type="hidden" id="edit_doctor_id" name="edit_doctor_id" readonly>
                        <input type="hidden" id="doctor_id" name="doctor_id" readonly>
                        <input type="hidden" id="speciality_id" name="speciality_id" readonly>
                        <input type="hidden" id="state_id" name="state_id" readonly>
                        <input type="hidden" id="city_id" name="city_id" readonly>



                        <div class="col-lg-6 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="col-lg-6 col-md-6 col-sm-12 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-6 col-md-6 col-sm-12 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-6 col-md-6 col-sm-12 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-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="hospital_name" class="form-label">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-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="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="gender" name="gender">
                                    <option value="" selected Default>Select Gender</option>
                                    <option value="male">Male</option>
                                    <option value="female">Female</option>
                                </select>
                                <label id="gender-error" class="error" for="gender"></label>

                            </div>
                        </div>
                        <div class="col-lg-12 text-center">
                            <div class="mb-3">
                                <button type="submit" id="enrolledDoctorSubmit"
                                    class=" btn btn-primary mt-4">Submit</button>
                            </div>
                        </div>


                    </div>

                </div>

                {{ Form::close() }}

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


@section('js')
    <script>
        function DoctorExport() {
            let params = {
                datefilter: $('#datefilter').val(),
                selectUser: $('#selectUser').val(),
                selectDoctor: $('#selectDoctor').val(),
                selectSpeciality: $('#selectSpeciality').val(),
                selectState: $('#selectState').val(),
                selectSLM: $('#selectSLM').val(),
                selectFLM: $('#selectFLM').val()
            };

            let query = $.param(params);

            let url = "{{ route('DoctorExport') }}?" + query;
            window.location.href = url;
        }


        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();
            }, 3000);
        }

        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: $('#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 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) {
                        refreshDataTable()
                        $.notify(response.msg, "success");
                    } else
                        $.notify(response.msg, "error");
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }

        function editDoctor(id) {
            $.ajax({
                url: "{{ route('getDoctor') }}",
                type: 'POST',
                data: {
                    'doctor_id_encrypt': id,
                    '_token': "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        $('#loader').show();
                        $('#enrollDoctorModelLabel').html('Edit Doctor');
                        var doctorData = response.data.doctor;
                        $("#state").val(doctorData.state).trigger('change');

                        $("#doctor_name").append(
                            '<option value="removeData" selected Default value="">' + doctorData
                            .doctor_name +
                            '</option>'
                        );

                        $("#doctor_name").prop('disabled', 'readonly');
                        $("#DoctorSelectHide").hide();



                        $("#doctor").prop('readonly', false);

                        $("#sc_code").prop('readonly', true);

                        $("#doctor").val(doctorData.doctor_name);
                        $("#sc_code").val(doctorData.sc_code);
                        $("#mobile_number").val(doctorData
                            .doctor_mobile_no);
                        $("#speciality_name").val(doctorData.speciality_id)
                            .trigger(
                                'change');
                        $("#speciality_name").prop('disabled', false);

                        // var citiesData = @json($cities);

                        // $('#city').html('<option value="">Select City</option>');
                        // $.each(citiesData, function(index, city) {
                        //     $("#city").append('<option value="' + city
                        //         .id + '">' +
                        //         city.city_name + '</option>');
                        // });



                        $("#pincode").val(doctorData.pincode);
                        $("#hospital_name").val(doctorData.address);

                        $("#edit_doctor_id").val(doctorData.id);
                        $("#doctor").addClass("br_from");
                        $("#gender").val(doctorData.gender)
                            .trigger(
                                'change');


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


                    } else
                        $.notify(response.msg, "error");
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }
        $('#city').select2();
        $('#state').select2();
        $('#doctor_name').select2();


        $(document).ready(function() {

            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('enrolledDoctorPaginate') }}",
                        data: function(d) {
                            _token: "{{ csrf_token() }}";
                            d.datefilter = $('#datefilter').val();
                            d.selectUser = $('#selectUser option:selected').val();
                            d.selectDoctor = $('#selectDoctor option:selected').val();
                            d.selectSpeciality = $('#selectSpeciality option:selected').val();
                            d.selectState = $('#selectState option:selected').val();
                            d.selectSLM = $('#selectSLM option:selected').val();
                            d.selectFLM = $('#selectFLM option:selected').val();
                        },
                    },
                    "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: 'user_name',
                                orderable: false,
                                searchable: true
                            },
                        @endif {
                            data: 'doctor_name',
                            orderable: false,
                            searchable: true
                        },
                        {
                            data: 'sc_code',
                            orderable: false,
                            searchable: true
                        },
                        {
                            data: 'speciality_name',
                            orderable: false,
                            searchable: true
                        },
                        {
                            data: 'state_name',
                            orderable: false,
                            searchable: true
                        },
                        {
                            data: 'total_patients',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'total_cartridges',
                            orderable: false,
                            searchable: true
                        },

                        {
                            data: 'created_at',
                            orderable: false,
                            searchable: false

                        },
                        @if (Auth::user()->user_role == 'Admin' || Auth::user()->user_role == 'FLM')

                            {
                                data: 'doctor_status',
                                orderable: false,
                                searchable: false

                            }, {
                                data: 'action',
                                orderable: false,
                                searchable: false
                            },
                        @else
                            {
                                data: 'doctor_status_two',
                                orderable: false,
                                searchable: false

                            },
                        @endif

                    ],
                    columnDefs: [{
                        @if (Auth::user()->user_role == 'Admin')
                            "aTargets": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                        @elseif (Auth::user()->user_role == 'FLM')
                            "aTargets": [1, 2, 3, 4, 5, 6, 7, 8, 9],
                        @else
                            "aTargets": [1, 2, 3, 4, 5, 6, 7, 8],
                        @endif
                        "mRender": function(data, type, full) {
                            if (data != null) {
                                return data;
                            } else {
                                return '-';
                            }
                        },
                    }, ],

                });

            }


            $('#enrollDoctorModel').on('hidden.bs.modal', function() {
                $("#DoctorSelectHide").show();

                $('#enrolledDoctorForm')[0].reset();
                var validator = $('#enrolledDoctorForm').validate();
                validator.resetForm();
                $("#state").val('').trigger('change');
                // $("#state").select2({
                //     placeholder: "Select State"
                // });
                $("#speciality_name").val('').trigger('change');
                // $("#speciality_name").select2({
                //     placeholder: "Select Speciality"
                // });
                $("#gender").val('').trigger('change');
                $("#doctor_name").prop('disabled', false).select2();
                $("#doctor").addClass("br_from");
                $("#doctor").prop('readonly', false);
                $("#speciality_name").prop("disabled", false).trigger("change");
                $("#state").prop("disabled", false).trigger("change");
                $("#city").prop("disabled", false).trigger("change");
                $("#sc_code").prop('readonly', false);
                $("#pincode").prop('readonly', false);
                $("#mobile_number").prop('readonly', false);
                $("#hospital_name").prop('readonly', false);
            });




            $("#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');
                    $("#gender").val('').trigger('change');

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

                    $("#state").prop("disabled", false).trigger("change");
                    $("#city").prop("disabled", false).trigger("change");
                    $("#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);
                    $("#mobile_number").prop('readonly', false);
                    $("#hospital_name").prop('readonly', false);
                    var validator = $('#enrolledDoctorForm').validate();
                    validator.resetForm();
                } else if (selectedValue != 'NewDoctor' && selectedValue != '') {
                    $("#doctor").removeClass("br_from");
                    $("#speciality_name").prop("disabled", true).trigger("change");
                    $("#state").prop("disabled", false).trigger("change");
                    $("#city").prop("disabled", false).trigger("change");
                    $("#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);
                    $("#mobile_number").prop('readonly', false);

                    $("#hospital_name").prop('readonly', false);
                    // $("#state").select2({
                    //     placeholder: "Select State"
                    // });
                    var validator = $('#enrolledDoctorForm').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);
                                $("#mobile_number").val(doctorData
                                    .doctor_mobile_no);
                                $("#speciality_name").val(doctorData.speciality_id)
                                    .trigger(
                                        'change');
                                $("#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");
                    }
                });
            });
        });

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

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

        $('#enrolledDoctorForm').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,
                },
                mobile_number: {
                    required: true,
                    maxlength: 10,
                    minlength: 10
                },
                pincode: {
                    required: true,
                    maxlength: 6,
                    minlength: 6,
                },
                state: {
                    required: true,
                },
                city: {
                    required: true,
                },
                gender: {
                    required: true,
                },
                hospital_name: {
                    required: true,
                    lettersWithDotsAndSpaces: true

                },

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

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

        });
    </script>
@endsection