@include('admin.layout.header')

<div class="container-fluid">
    <div class="main_title">
        <h3>Patient 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">
                <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" 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="adminPatientTable" class="table table-striped datatable" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Doctor Name</th>
                            <th>SC Code</th>
                            <th>Patient Name</th>
                            <th>Mobile No.</th>
                            <th>Morning dosage</th>
                            <th>Afternoon dosage</th>
                            <th>Night dosage</th>
                            <th>Status</th>
                            <th>Date And Time</th>
                        </tr>
                    </thead>
                    <tbody>

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

@include('admin.layout.footer')

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

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

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

        // function cb(start, end) {
        //     // If "Today" is selected, adjust the end date to the end of the day (23:59:59)
        //     if (start.isSame(end, 'day')) {
        //         end = end.endOf('day');
        //     }
        //     $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        //     $("#dtFrom").val(start.format('YYYY-MM-DD HH:mm:ss'));
        //     $("#dtTo").val(end.format('YYYY-MM-DD HH:mm:ss'));
        // }
        // $(function() {
        //     let start = moment().startOf('year');
        //     let end = moment().endOf('year');

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

        //     cb(start, end);

        // });

        if ($.fn.DataTable.isDataTable('#adminPatientTable')) {
            $('#adminPatientTable').DataTable().destroy();
        }
        if (!$.fn.dataTable.isDataTable('#adminPatientTable')) {
            let table = $('#adminPatientTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.patient.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: 'doctors.doctor_name',
                    },
                    {
                        data: 'sc_code',
                        name: 'doctors.sc_code',
                    },
                    {
                        data: 'patient_name',
                        name: 'patient_name',
                    },
                    {
                        data: 'mobile_number',
                        name: 'mobile_number',
                    },
                    {
                        data: 'morning_time',
                        name: 'morning_time',
                        render: function(data, type, row) {
                            return data ? '<div class="dose morning">' + data + '</div>' :
                                '<div class="dose">' + '-' + '</div>';
                        }
                    },
                    {
                        data: 'afternoon_time',
                        name: 'afternoon_time',
                        render: function(data, type, row) {
                            return data ? '<div class="dose afternoon">' + data + '</div>' :
                                '<div class="dose">' + '-' + '</div>';
                        }
                    },
                    {
                        data: 'night_time',
                        name: 'night_time',
                        render: function(data, type, row) {
                            return data ? '<div class="dose night">' + data + '</div>' :
                                '<div class="dose">' + '-' + '</div>';
                        }
                    },
                    {
                        data: 'patient_status',
                        name: 'patient_status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'date_and_time',
                        name: 'patients.created_at',
                    }
                ],
                initComplete: function() {
                    $('#adminPatientTable_filter input').attr('placeholder', 'Search');
                }

            });

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

            });

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

            $('#exportButton').click(function() {
                let dtFrom = $('#dtFrom').val();
                let dtTo = $('#dtTo').val();
                let url = "{{ route('adminPatientExport') }}?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();
                });

            });
        }

    });
</script>


<script>
    function patientStatusChange(patientId, newStatus) {
        $.ajax({
            url: "{{ route('patient.updateStatus') }}",
            method: 'POST',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                patientId: patientId,
                status: newStatus
            },
            success: function(response) {
                if (response.success) {
                    toastr.success('Patient status updated successfully');
                } else {
                    toastr.error('Failed to update patient status');
                }
            },
            error: function() {
                toastr.error('An error occurred');
            }
        });
    }
</script>