@include('mr.layout.header')

<div class="container-fluid">
    <!--  Row 1 -->
    <div class="main_title">
        <h3>Patient Details</h3>
    </div>
    <div class="border_rs">
        <div class="row">
            <div class="col-lg-4 col-md-6">
                <div class="white_bx">
                    <div class="left">
                        <div class="grey_bg icon_mx">
                            <img src="../assets/images/icon5.png">
                        </div>
                    </div>
                    <div class="middal">
                        <span>Total Patient</span>
                        <h4 id="totalPatients"></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 Patient</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="patientTable" 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>Mo. No</th>
                            <th>State</th>
                            <th>City</th>
                            <th>Pin code</th>
                            <th>Morning dosage</th>
                            <th>Afternoon dosage</th>
                            <th>Night dosage</th>
                            <th>Samarth Kit</th>
                            <th>Date And Time</th>
                        </tr>
                    </thead>
                    <tbody>

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


@include('mr.layout.footer')


<script>
    // $(document).ready(function() {
    //     // $.ajaxSetup({
    //     //     headers: {
    //     //         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    //     //     }
    //     // });
    //     $(document).on('change', '.toggleCheck', function() {
    //         var checkbox = $(this);
    //         var patientId = checkbox.data('patient-id');
    //         var newStatus = checkbox.data('status');

    //         toggleStatusUI(checkbox, newStatus);

    //         $.ajax({
    //             url: "{{ route('patientSamarthKitApproveStatus') }}",
    //             method: 'POST',
    //             data: {
    //                 _token: "{{ csrf_token() }}",
    //                 patientId: patientId,
    //                 status: newStatus
    //             },
    //             success: function(response) {
    //                 if (response.success) {
    //                     toastr.success('Samarth kit status updated successfully');
    //                     $('#patientTable').DataTable().ajax.reload(null, false);
    //                 } else {
    //                     toastr.error('Failed to update Samarth kit status');
    //                 }
    //             },
    //             error: function() {
    //                 toastr.error('An error occurred');
    //             }
    //         });
    //     });


    //     function toggleStatusUI(checkbox, status) {
    //         var parentDiv = checkbox.closest('.approve');
    //         if (status === 'Y') {
    //             parentDiv.find('.pen').hide();
    //             parentDiv.find('.app').show();
    //         } else {
    //             parentDiv.find('.pen').show();
    //             parentDiv.find('.app').hide();
    //         }

    //         checkbox.data('status', status === 'Y' ? 'N' : 'Y');
    //     }
    // });
</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) {
                        $("#totalPatients").html(response.data.totalPatients);
                    } else {
                        $.notify(response.message, "error");
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }
    });
</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('#patientTable')) {
            $('#patientTable').DataTable().destroy();
        }
        if (!$.fn.dataTable.isDataTable('#patientTable')) {
            let table = $('#patientTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('patientManagementPaginate') }}",
                    data: function(d) {
                        d.dtFrom = $("#dtFrom").val();
                        d.dtTo = $("#dtTo").val();
                        // d.search = d.search.value;
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                        // data: 'id', name: 'patients.id'
                    },
                    {
                        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: 'state_name',
                        name: 'states.state_name',
                    },
                    {
                        data: 'city_name',
                        name: 'citys.city_name',
                    },
                    {
                        data: 'pincode',
                        name: 'pincode',
                    },
                    {
                        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: 'samarth_kit_approve_status',
                        name: 'patients.samarth_kit_approve_status',
                    },
                    {
                        data: 'date_and_time',
                        name: 'patients.created_at',
                    }
                ],
                initComplete: function() {
                $('#patientTable_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('patient_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();
                });

            });


            $(document).on('change', '.toggleCheck', function() {
                var checkbox = $(this);
                var patientId = checkbox.data('patient-id');
                var newStatus = checkbox.data('status');

                toggleStatusUI(checkbox, newStatus);

                $.ajax({
                    url: "{{ route('patientSamarthKitApproveStatus') }}",
                    method: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        patientId: patientId,
                        status: newStatus
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success('Samarth kit status updated successfully');
                            table.ajax.reload();
                        } else {
                            toastr.error('Failed to update Samarth kit status');
                        }
                    },
                    error: function() {
                        toastr.error('An error occurred');
                    }
                });
            });


            function toggleStatusUI(checkbox, status) {
                var parentDiv = checkbox.closest('.approve');
                if (status === 'Y') {
                    parentDiv.find('.pen').hide();
                    parentDiv.find('.app').show();
                } else {
                    parentDiv.find('.pen').show();
                    parentDiv.find('.app').hide();
                }

                checkbox.data('status', status === 'Y' ? 'N' : 'Y');
            }
        }
    });
</script>