@include('admin.layout.header')
<link rel="stylesheet" href="{{ asset('assets/modules/select2/dist/css/select2.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/datatables.min.css') }}" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

{{-- List Doctor Modal --}}
<div class="modal fade" id="doctorListModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">View Doctor Record</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row user_details_view_odd">
                    <div class="col-lg-4 col-4 col-md-4">
                        Employee Name
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="user_name">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Employee Code
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="emp_code">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Doctor Name
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="doctorName">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        MSL No
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="mslNo">

                    </div>
                </div>

                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Mobile No
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="mobileNo">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Speciality
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="Speciality">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Hospital Name
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="hospitalName">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Gender
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="Gender">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Designation
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="Designation">

                    </div>
                </div>
                <div class="row user_details_view_even mt-2">
                    <div class="col-lg-4 col-4 col-md-4">
                        Status
                    </div>
                    <div class="col-lg-8 col-8 col-md-8" style="font-weight:bold !important" id="doctorStatus">

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="doctorModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            {!! Form::open([
                'url' => '#',
                'name' => 'doctorForm',
                'id' => 'doctorForm',
                'enctype' => 'multipart/form-data',
            ]) !!}
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Edit Doctor</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="row">
                            <input type="hidden" name="doctor_id" id="doctor_id">
                            {{-- <div class="col-lg-6 col-md-6">
                                    <div class="form-group">
                                        <label for="text">User Name</label>
                                        <input type="text" class="form-control" name="">
                                    </div>
                                </div> --}}
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="text">Doctor Name</label>
                                    <input type="text" class="form-control" name="doctor_name" id="doctor_name">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="text">MSL No.</label>
                                    <input type="text" class="form-control" name="msl_no" id="msl_no">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="text">Mobile No.</label>
                                    <input type="text" class="form-control" name="mobile_no" id="mobile_no">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="text">Speciality</label>
                                    <input type="text" class="form-control" name="specialty" id="specialty">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="text">Hospital Name</label>
                                    <input type="text" class="form-control" name="hospital_name"
                                        id="hospital_name">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="text">Gender</label>
                                    <div class="male_check">
                                        <label>
                                            <input type="radio" name="gender" id="Male" value="Male">
                                            <span>Male</span>
                                        </label>
                                        <br>
                                        <label>
                                            <input type="radio" name="gender" id="Female" value="Female">
                                            <span>Female</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" id="doctorFormSubmit">Submit</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

<div class="main-content">
    <section class="section">
        <div class="section-header">
            <div class="row w-100">
                <div class="col-lg-6 my-auto col-md-6">
                    <h1>Manage Doctor</h1>
                </div>
                <div class="col-lg-2 ml-auto col-md-6">
                    <div class="form-group mb-0">
                        <select class="select2 form-select w-100" name="BEFilter" id="BEFilter">
                            <option value="" default selected disabled>Select User</option>
                            @foreach ($beUsers as $user)
                                <option value="{{ $user->position_code }}">{{ $user->emp_name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-lg-auto my-2 my-lg-0 my-md-2 col-md-6">
                    <button id="applyButton" class="btn btn-primary mr-2">Apply</button>
                    <button id="clearButton" class="btn btn-danger mr-2">Clear</button>
                </div>
            </div>
        </div>
        <div class="row mb-5">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="">
                            <table class="w-100 table table-striped table-hover datatable text-center" id="datatable"
                                name="datatable">
                                <thead class="w-100">
                                    <tr>
                                        <th>Sr. No.</th>
                                        <th>Action</th>
                                        <th>Employee Name</th>
                                        <th>Employee Code</th>
                                        <th>Doctor Name</th>
                                        <th>MSL No.</th>
                                        <th>Mobile No.</th>
                                        <th>Speciality</th>
                                        <th>Hospital Name</th>
                                        <th>Gender</th>
                                        <th>Designation</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@include('admin.layout.footer')
<script src="{{ asset('assets/modules/select2/dist/js/select2.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="{{ asset('assets/js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/js/additional-methods.min.js') }}"></script>
<script src="{{ asset('assets/notify.js') }}"></script>

<script>
    function editDoctorSet(doctor_id, doctor_name, msl_no, mobile_no, specialty, designation, hospital_name, gender) {
        $("#doctor_id").val(doctor_id);
        $("#doctor_name").val(doctor_name);
        $("#msl_no").val(msl_no);
        $("#mobile_no").val(mobile_no);
        $("#specialty").val(specialty);
        $("#hospital_name").val(hospital_name);
        // $("#designation").val(designation);

        $('input[name="gender"][value="' + gender + '"]').prop('checked', true);
    }

    function listDoctorSet(emp_name, emp_code, doctor_name, msl_no, mobile_no, specialty, hospital_name, designation,
        gender, Status) {
        $("#user_name").text(emp_name);
        $("#emp_code").text(emp_code);
        $("#doctorName").text(doctor_name);
        $("#mslNo").text(msl_no);
        $("#mobileNo").text(mobile_no);
        $("#Speciality").text(specialty);
        $("#hospitalName").text(hospital_name);
        $("#Gender").text(gender);
        $("#Designation").text(designation);
        // Check Status and set the appropriate text
        if (Status === 'Y') {
            $("#doctorStatus").text('Active');
        } else {
            $("#doctorStatus").text('Deactive');
        }
    }

    var DoctorDataTable;

    function doctorStatusChange(doctorId, status) {
        // Initialize the swalConfig object with common properties
        let swalConfig = {
            title: "Are you sure?",
            showCloseButton: true,
            focusConfirm: false,
            cancelButtonText: `No`
        };

        // Add conditional properties based on the status
        if (status == 'D') {
            swalConfig.icon = 'warning';
            swalConfig.showDenyButton = true;
            swalConfig.html = `You won't be able to revert this!`;
            swalConfig.confirmButtonText= `Yes, Delete it!`;
        } else {
            swalConfig.icon = 'info';
            swalConfig.showCancelButton = true;
            swalConfig.html = `You want to change doctor status`;
            swalConfig.confirmButtonText= `Yes`;
        }
        // Show Swal alert with the configured object
        Swal.fire(swalConfig).then((result) => {
            if (result.isConfirmed) {
                // This block runs if the user clicks 'Yes'
                $.ajax({
                    url: "{{ route('updateDoctorStatus') }}",
                    type: 'POST',
                    data: {
                        'doctor_id': doctorId,
                        'status': status,
                        '_token': "{{ csrf_token() }}"
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 1) {
                            if(status=='D'){
                                Swal.fire({
                                    title: "Deleted!",
                                    text: "Doctor has been deleted.",
                                    icon: "success"
                                });
                                $.notify('Doctor deleted successfully!', "success");
                            }else{
                                $.notify(response.msg, "success");
                            }
                            // $('#datatable').DataTable().ajax.reload();
                            DoctorDataTable.draw();
                        } else {
                            $.notify(response.msg, "error");
                        }
                    },
                    error: function(jqXHR) {
                        $.notify(jqXHR.responseJSON.msg, "error");
                    }
                });
            } else {
                $.notify("The status remains unchanged.", "info");
                if(status!='D'){
                    // setTimeout(function() {
                    //     // window.location.reload();
                    // }, 1000);
                    DoctorDataTable.draw();
                }
            }
        });
    }

    $(document).ready(function() {
        $('#doctorModal').on('hidden.bs.modal', function() {
            // Reset form fields
            $(this).find('form')[0].reset();

            // Reset hidden input specifically
            $('#doctor_id').val('');

            // Reset select boxes to their default value (usually the first option)
            $(this).find('select').val('').trigger('change');

            // Clear validation error messages and reset the form's validation state
            var form = $(this).find('form');
            form.validate().resetForm(); // Clears error messages
            form.find('.is-invalid').removeClass('is-invalid'); // Remove error class from input fields
        });

        $.validator.addMethod("notOnlySpaces", function(value, element) {
            return $.trim(value).length > 0;
        }, "This field cannot contain only spaces.");

        $('#doctorForm').validate({
            ignore: ".ignore",
            rules: {
                doctor_name: {
                    required: true,
                    minlength: 1,
                    maxlength: 150,
                    notOnlySpaces: true,
                },
                msl_no: {
                    required: true,
                    number: true,
                    minlength: 1,
                    maxlength: 10,
                    notOnlySpaces: true,
                },
                // only for indian mobile_no
                mobile_no: {
                    required: true,
                    pattern: /^[6-9]\d{9}$/, // Starts with 6-9, followed by 9 more digits
                    minlength: 10,
                    maxlength: 10,
                    notOnlySpaces: true,
                },
                specialty: {
                    required: true,
                    minlength: 1,
                    maxlength: 200,
                    notOnlySpaces: true,
                },
                hospital_name: {
                    required: true,
                    minlength: 1,
                    maxlength: 200,
                    notOnlySpaces: true,
                },
                gender: {
                    required: true,
                }
            },
            messages: {
                doctor_name: {
                    required: "Doctor Name is required.",
                    pattern: "Doctor Name can only contain letters and spaces.",
                    minlength: "Doctor Name must be at least 1 character long.",
                    maxlength: "Doctor Name must not exceed 150 characters.",
                },
                mobile_no: {
                    required: "Mobile No is required.",
                    pattern: "Please enter a valid 10-digit mobile number starting with 6, 7, 8, or 9.",
                    minlength: "Mobile number must be exactly 10 digits long.",
                    maxlength: "Mobile number must not exceed 10 digits."
                },
            },
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                $("#doctorFormSubmit").attr('disabled', true);
                var formData = new FormData($("#doctorForm")[0]);

                $.ajax({
                    url: '{{ route('updateDoctor') }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 1) {
                            $('#doctorModal').modal('hide');
                            $.notify(response.msg, "success");
                        } else if (response.status == 0) {
                            $.notify(response.error, "error");
                        }
                        DoctorDataTable.draw();
                        $("#doctorFormSubmit").attr('disabled', false);
                    },
                    error: function(xhr, status, error) {
                        console.error('An error occurred:', error);
                        $("#doctorFormSubmit").attr('disabled', false);
                    }
                });
            }
        });

        $(function() {
            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false,
                    orderable: false,
                },
                {
                    data: 'action',
                    name: 'action',
                    searchable: false,
                    orderable: false,
                },
                {
                    data: 'be_name',
                    name: 'be_name'
                },
                {
                    data: 'be_code',
                    name: 'be_code'
                },
                {
                    data: 'doctor_name',
                    name: 'doctor_name'
                },
                {
                    data: 'msl_no',
                    name: 'msl_no'
                },
                {
                    data: 'mobile_no',
                    name: 'mobile_no'
                },
                {
                    data: 'specialty',
                    name: 'specialty'
                },
                {
                    data: 'hospital_name',
                    name: 'hospital_name'
                },
                {
                    data: 'gender',
                    name: 'gender'
                },
                {
                    data: 'designation',
                    name: 'designation'
                },
                {
                    data: 'status',
                    name: 'status',
                    searchable: false,
                    orderable: false,
                }
            ];
            var columnDefs = [{
                "width": "150",
                "targets": [5]
            }];
            getdatatable("{{ route('manageDoctorPaginate') }}", columns, columnDefs);

            $('#applyButton').click(function() {
                getdatatable("{{ route('manageDoctorPaginate') }}", columns, columnDefs);
            });

            $('#clearButton').click(function() {
                $("#BEFilter").val('').change();
                getdatatable("{{ route('manageDoctorPaginate') }}", columns, columnDefs);
            });
        });

        function getdatatable(url, columns, columnDefs) {
            if ($.fn.DataTable.isDataTable('#datatable')) {
                $('#datatable').DataTable().destroy();
            }
            DoctorDataTable = $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                "bDestroy": true,
                order: [],
                "scrollX": true,
                columns: columns,
                columnDefs: columnDefs,
                ajax: {
                    method: 'post',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}",
                        d.position_code = $('#BEFilter option:selected').val();
                    }
                },
                // drawCallback: function(settings) {
                //     Reinitialize Venobox
                //     new VenoBox({
                //         selector: '.my-video-links',
                //     });
                // }
            });
        }
    });
</script>