@include('admin.layout.header')

<div class="container-fluid">
    <div class="main_title">
        <h3>Doctor Details</h3>
    </div>
    <!--  Row 1 -->
    <div class="border_rs">

        <div class="row justify-content-end mb-4">
            <div class="col-lg-auto  col-md-6 col-sm-6">
                <select class="form-select js-example-basic-single" aria-label="Default select example" name="userfilter"
                    id="userfilter">
                    <option value="" selected>Select MR</option>
                    @foreach ($users as $user)
                        <option value="{{ $user->id }}">{{ $user->emp_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"
                    name="specialityfilter" id="specialityfilter">
                    <option value="" selected>Select Speciality</option>
                    @foreach ($specialitys as $speciality)
                        <option value="{{ $speciality->speciality }}">{{ $speciality->speciality }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-lg-auto  col-md-6 col-sm-6">
                <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">
                <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="AdmindoctorTable" 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>MR Name</th>
                            <th>MR EMP Code</th>
                            <th>QR Code</th>
                            <th>Scanned QR</th>
                            <th>Date And Time</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </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('admin.layout.footer')


<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');
        });
    });
</script>


<script>
    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() {

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

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

        if ($.fn.DataTable.isDataTable('#AdmindoctorTable')) {
            $('#AdmindoctorTable').DataTable().destroy();
        }
        if (!$.fn.dataTable.isDataTable('#AdmindoctorTable')) {
            let table = $('#AdmindoctorTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.doctor.paginate') }}",
                    data: function(d) {
                        d.dtFrom = $("#dtFrom").val();
                        d.dtTo = $("#dtTo").val();
                        d.user_id = $("#userfilter").val();
                        d.speciality = $("#specialityfilter").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: 'emp_name',
                        name: 'users.emp_name',
                    },
                    {
                        data: 'emp_code',
                        name: 'users.emp_code',
                    },
                    {
                        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: 'date_and_time',
                        name: 'doctors.created_at',
                    }
                ],
                initComplete: function() {
                    $('#AdmindoctorTable_filter input').attr('placeholder', 'Search');
                }

            });

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

            });

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

            $('#exportButton').click(function() {
                let userfilter = $('#userfilter').val();
                let specialityfilter = $('#specialityfilter').val();
                let dtFrom = $('#dtFrom').val();
                let dtTo = $('#dtTo').val();

                let url = "{{ route('adminDoctorExport') }}?dtFrom=" + dtFrom + "&dtTo=" + dtTo +
                    "&userfilter=" + userfilter + "&specialityfilter=" + specialityfilter;
                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();
                });

            });

        }


    });
</script>
<script>
    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>