@include('mr.layout.header')

<div class="container-fluid">
    <div class="main_title">
        <h3>Doctor Details</h3>
    </div>
    <!--  Row 1 -->
    <div class="border_rs">
        <div class="row">
            <div class="col-lg-4 col-md-6">
                <div class="white_bx">
                    <div class="left">
                        <div class="green_bg icon_mx">
                            <img src="{{ asset('assets/images/icon4.png') }}">
                        </div>
                    </div>
                    <div class="middal">
                        <span>Total Doctor</span>
                        <h4 id="totalDoctors"></h4>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="white_bx">
                    <div class="left">
                        <div class="green_bg icon_mx">
                            <img src="{{ asset('assets/images/icon1.png') }}">
                        </div>
                    </div>
                    <div class="middal">
                        <span>Total Scan</span>
                        <h4 id="totalQrScan"></h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-end mb-4">
            <div class="col-lg-auto  col-md-auto 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>
                        <input type="hidden" name="dtFrom" id="dtFrom">
                        <input type="hidden" name="dtTo" id="dtTo">
                    </div>
                    <a href="javascript:void(0);" id="applyButton" class="btn btn-primary ms-2"><i
                            class="fa fa-search"></i></a>
                    <a href="javascript:void(0);" id="clearButton" class="btn btn-danger ms-2"><i
                            class="fa fa-times"></i></a>
                </div>
            </div>
            <div class="col-lg-auto  col-md-auto col-sm-auto mt-auto">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add_doctor"><i
                        class="fa-solid fa-plus me-2"></i>Add New Doctor</button>
            </div>
            <div class="col-lg-auto  col-md-auto col-sm-auto mt-auto">
                <button type="button" href="javascript:void(0);" id="exportButton" class="btn btn-success"><i
                        class="fa-solid fa-download me-2"></i>Export</button>
            </div>
        </div>

    </div>

    <div class="row">
        <div class="col-12">
            <div class="white_table">
                <table id="doctorTable" class="table table-striped datatable" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Doctor Name</th>
                            <th>Speciality</th>
                            <th>SC code</th>
                            <th>Clinic Name & Address</th>
                            <th>QR Code</th>
                            <th>Scanned QR </th>
                            <th>Action</th>
                            <th>Date And Time</th>
                        </tr>
                    </thead>
                    <tbody>

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

<div class="modal fade" id="add_doctor" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title fs-5" id="exampleModalLabel">Add 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>
            <div class="modal-body">
                <form id="enrollDoctorForm">
                    @csrf
                    <input type="hidden" id="id" name="id">
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="" class="form-label">Doctor Name</label>
                                <select class="form-select js-example-basic-single only_br" id="doctor_name"
                                    name="doctor_name">
                                    <option value="">Select Doctor</option>
                                </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="" class="form-label">Speciality</label>
                                <input type="text" class="form-control br_from" id="speciality" name="speciality"
                                    placeholder="Speciality" disabled>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="" class="form-label">SC Code</label>
                                <input type="text" class="form-control br_from" id="sc_code" name="sc_code"
                                    placeholder="Enter SC Code" disabled>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="mb-3">
                                <label for="" class="form-label">Clinic Name & Address</label>
                                <input type="text" class="form-control br_from" id="address" name="address"
                                    placeholder="Enter Clinic Name & Address">
                            </div>
                        </div>

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


<!-- qr_code -->
<div class="modal fade" id="qr_code" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">QR Code</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                    id="closeModalButton"><i class="fa-solid fa-xmark"></i></button>
            </div>
            <div class="modal-body">
                <div class="qr_code_detiles">
                    <from>
                        <div class="mb-3">
                            <h3 class="text-center" id="doctorName"></h3>
                        </div>
                        <div class="mb-3">
                            <div class="grey_border">
                                <img src="" id="qrCodeImage" alt="QR Code">
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="link_copy">
                                <div class="link_rs">
                                    <span id="qrLink"></span>
                                </div>
                                <div class="copy_rs" onclick="copyQrLink()">
                                    <i class="fa-regular fa-copy"></i>
                                </div>
                            </div>
                        </div>

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


@include('mr.layout.footer')


<script>
    function fetchDoctors(selectedDoctorName = '') {
        var doctorId = $('#id').val();

        var url = doctorId ? "{{ route('doctors.listedit') }}?doctor_id=" + doctorId : "{{ route('doctors.list') }}";

        $.ajax({
            url: url,
            type: "GET",
            success: function(response) {
                var select = $('#doctor_name');
                select.empty();
                select.append('<option value="">Select Doctor</option>');

                $.each(response.doctors, function(index, doctor) {
                    select.append(
                        '<option value="' + doctor.doctor_name +
                        '" data-speciality="' + doctor.speciality +
                        '" data-sc_code="' + doctor.sc_code + '">' + doctor.doctor_name +
                        '</option>'
                    );
                });

                if (selectedDoctorName) {
                    select.val(selectedDoctorName).trigger('change');
                }
            },
            error: function(xhr) {
                console.error('Error fetching doctors:', xhr.responseText);
            }
        });
    }

    function DoctorDataSet(id, doctor_name, sc_code, speciality, clinic_address) {
        $("#exampleModalLabel").text("Edit Doctor");
        $("#doctor_name").attr('disabled', true);
        $("#id").val(id);
        $("#doctor_name").val(doctor_name);
        $("#sc_code").val(sc_code);
        $("#speciality").val(speciality);
        $("#address").val(clinic_address);

        fetchDoctors(doctor_name);
    }

    $('#edit').on('click', function() {
        const id = $(this).data('id');
        const doctor_name = $(this).data('doctor-name');
        const sc_code = $(this).data('sc-code');
        const speciality = $(this).data('speciality');
        const clinic_address = $(this).data('clinic-address');

        DoctorDataSet(id, doctor_name, sc_code, speciality, clinic_address);
    });

    fetchDoctors();
</script>



<script>
    $(document).ready(function() {
        $('#closeModalButton').on('click', function() {
            $('#qr_code').modal('hide');
            setTimeout(function() {
                $('.modal-backdrop').remove();
            }, 300);
            $('body').css('overflow', 'auto');
        });

        $('#qr_code').on('hidden.bs.modal', function() {
            $('body').css('overflow', 'auto');
        });
    });

    $('#add_doctor').on('hidden.bs.modal', function() {
        $("#doctor_name").attr('disabled', false);
        var form = $(this).find('#enrollDoctorForm');

        if (form.length && form.data('validator')) {
            form.validate().resetForm();
            form.find('.is-invalid').removeClass('is-invalid');
            // form.find('.error').remove(); // Removes error messages and classes
        }
        $('span.error').remove();
        // // form.find('.error').removeClass('error');
        //  form.find('.error').remove();
        // $('.error').remove();

        form[0].reset();
        $('.select2').val('').trigger('change');
        $('#doctor_name').val('').trigger('change');

        $("#exampleModalLabel").text("Add New Doctor");
        $("#speciality").attr('disabled', true);
        $("#id").val('');
        $("#doctor_name").val('');
        $("#sc_code").val('');
        $("#speciality").val('');
        $("#address").val('');

        fetchDoctors();
    });

    function showQrCodeModal(qrImage, doctorName, fullQrLink) {
        document.getElementById('qrCodeImage').src = qrImage;
        document.getElementById('doctorName').innerText = doctorName + "'s QR";
        document.getElementById('qrLink').innerText = fullQrLink;

        var qrCodeModal = new bootstrap.Modal(document.getElementById('qr_code'));
        qrCodeModal.show();
    }

    function showQrCodeError(errorMessage) {
        toastr.error(errorMessage);
    }
</script>


<script>
    $(document).ready(function() {
        getCount();


        function getCount() {
            let custom_study_filter = $("#custom_study_filter option:selected").val();
            $.ajax({
                url: "{{ route('UserDoctorDashboardCount') }}",
                type: 'GET',
                data: {
                    '_token': '{{ csrf_token() }}',
                    'division_id': $('#custom_division_filter option:selected').val(),

                    'custom_study_filter': custom_study_filter,
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status === 1) {
                        $("#totalDoctors").html(response.data.totalDoctors);
                        $("#totalQrScan").html(response.data.totalQrScan);
                    } else {
                        $.notify(response.message, "error");
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }
    });
</script>


<script>
    $(document).ready(function() {




        $('#doctor_name').on('change', function() {
            var selectedDoctor = $(this).find('option:selected');

            var speciality = selectedDoctor.data('speciality');
            var sc_code = selectedDoctor.data('sc_code');

            $('#speciality').val(speciality);
            $('#sc_code').val(sc_code);
        });

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

        $('#enrollDoctorForm').validate({
            rules: {
                doctor_name: {
                    required: true,
                    noSpaces: true
                },
                address: {
                    required: true,
                    noSpaces: true
                },
            },
            messages: {
                doctor_name: "Please select a Doctor Name",
                address: "Please enter a valid Clinic Name & Address",
            },
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            },
        });



        $('#submitDoctorForm').on('click', function(e) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            let form = $('#enrollDoctorForm');
            if (form.valid()) {
                let formData = form.serialize();
                $("#submitDoctorForm").attr('disabled', true);
                $.ajax({
                    url: "{{ route('doctors.store') }}",
                    type: "POST",
                    data: formData,
                    success: function(response) {
                        // toastr.success('Doctor added successfully!');

                        if (response.success) {
                            toastr.success(response.message);
                            form[0].reset();
                            $('.select2').val('').trigger('change');
                            $('#doctor_name').val('').trigger('change');
                            $('#add_doctor').modal('hide');
                            $("#submitDoctorForm").attr('disabled', false);
                            $('.modal-backdrop').remove();

                            $('#doctorTable').DataTable().ajax.reload();
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr) {
                        $("#submitDoctorForm").attr('disabled', false);
                        toastr.error('Failed to add doctor.');
                        console.error(xhr.responseText);
                    }
                });
            }
        });

    });
</script>

<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });


        $('#reportrange span').html('');
        $("#dtFrom").val('');
        $("#dtTo").val('');

        if ($.fn.DataTable.isDataTable('#doctorTable')) {
            $('#doctorTable').DataTable().destroy();
        }
        if (!$.fn.dataTable.isDataTable('#doctorTable')) {
            let table = $('#doctorTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('doctor.management.paginate') }}",
                    data: function(d) {
                        d.dtFrom = $("#dtFrom").val();
                        d.dtTo = $("#dtTo").val();
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'doctor_name',
                        name: 'doctor_name',
                    },
                    {
                        data: 'speciality',
                        name: 'doctors.speciality',
                    },
                    {
                        data: 'sc_code',
                        name: 'doctors.sc_code',
                    },
                    {
                        data: 'clinic_address',
                        name: 'doctors.clinic_address',
                        render: function(data, type, row) {
                            return data ? data : '-';
                        }
                    },
                    {
                        data: 'qr_code_image',
                        name: 'qr_code_image',
                    },
                    {
                        data: 'qr_scan_count',
                        name: 'qr_scan_count',
                        render: function(data, type, row) {
                            return '<span class="badge text-bg-success">' + data + '</span>';
                        }
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'date_and_time',
                        name: 'doctors.created_at',
                    }
                ],
                initComplete: function() {
                    $('#doctorTable_filter input').attr('placeholder', 'Search');
                }
            });

            $("#applyButton").click(function() {
                table.ajax.reload();

            });

            $("#clearButton").click(function() {
                $('#reportrange span').html('');
                $("#userfilter").val('').change();
                $("#dtFrom").val('');
                $("#dtTo").val('');
                table.ajax.reload();
            });

            $('#exportButton').click(function() {
                let dtFrom = $('#dtFrom').val();
                let dtTo = $('#dtTo').val();
                let url = "{{ route('doctor_export') }}?dtFrom=" + dtFrom + "&dtTo=" + dtTo;
                window.location.href = url;
            });

            $(function() {
                $('#reportrange span').html('');
                $("#reportrange").daterangepicker({
                    autoUpdateInput: false,
                    ranges: {
                        Today: [moment().startOf('day'), moment().endOf('day')],
                        Yesterday: [moment().subtract(1, "days").startOf('day'), moment()
                            .subtract(1, "days").endOf('day')
                        ],
                        "Last 7 Days": [moment().subtract(6, "days").startOf('day'), moment()
                            .endOf('day')
                        ],
                        "Last 30 Days": [moment().subtract(29, "days").startOf('day'), moment()
                            .endOf('day')
                        ],
                        "This Month": [moment().startOf("month"), moment().endOf("month")],
                        "Last Month": [moment().subtract(1, "month").startOf("month"), moment()
                            .subtract(1, "month").endOf("month")
                        ],
                        "This Year": [moment().startOf('year'), moment().endOf('year')],
                    },
                });

                $("#reportrange").on("apply.daterangepicker", function(ev, picker) {
                    $(this).find("span").html(
                        picker.startDate.format("MMMM D, YYYY") + " - " + picker.endDate
                        .format("MMMM D, YYYY")
                    );

                    $("#dtFrom").val(picker.startDate.format("YYYY-MM-DD") + " 00:00:00");
                    $("#dtTo").val(picker.endDate.format("YYYY-MM-DD") + " 23:59:59");

                    // table.ajax.reload();
                });

            });

        }


    });


    function copyQrLink() {
        var qrLinkElement = document.getElementById("qrLink");
        var qrLinkText = qrLinkElement.textContent;

        if (qrLinkText) {
            navigator.clipboard.writeText(qrLinkText).then(function() {
                toastr.success('Link copied to clipboard!', 'Success');
            }).catch(function(err) {
                toastr.error('Failed to copy the link: ' + err, 'Error');
            });
        } else {
            toastr.error('No link available to copy.', 'Error');
        }
    }
</script>