@include('admin.header')

<div class="container-fluid">
    <!--  Row 1 -->
    <div class="row py-3">
        <div class="col-lg-4 my-auto col-md-4 col-sm-4">
            <h2>Manage Patients</h2>
        </div>
        <div class="col-lg-8 text-end col-md-8 col-sm-8">
            <div class="row justify-content-end">
                <div class="col-lg-auto col-md-6 col-sm-6">
                    <select id="status" name="status" class="form-select js-example-basic-single"
                        aria-label="Default select example">
                        <option value="" selected Default>Select Status</option>
                        <option value="Active">Active</option>
                        <option value="Inactive">Inactive</option>
                        {{-- <option value="3">Three</option> --}}
                    </select>
                </div>
                <div class="col-lg-auto col-md-5 col-sm-6">
                    <button type="button" onclick="downloadPatientData()" class="btn btn-primary"><i
                            class="fa-solid fa-file-excel me-2"></i>Download
                        Report</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="white_table">
                <table id="dataTable" class="table table-striped datatable" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Patient Name</th>
                            <th>Mobile Number</th>
                            <th>Pending Request</th>
                            <th>Fulfilled Request</th>
                            <th>Linked MR</th>
                            <th>Status</th>
                            <th>Kit Details</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{-- <tr>
                            <td>01</td>
                            <td>
                                Ajoy Choudhary
                            </td>
                            <td>9858586985</td>
                            <td>01</td>
                            <td>02</td>
                            <td>Abhishek Singh</td>
                            <td>
                                <div class="toggle">
                                    <input type="checkbox" />
                                    <label></label>
                                </div>
                            </td>
                            <td>
                                <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal"
                                    data-bs-target="#show_dtails">Show Details</button>
                            </td>
                        </tr> --}}

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


<div class="modal fade" id="show_dtails" 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">Patient Details</h4>
                <button type="button" onclick="clearPatientRequestData()" class="btn-close"><i
                        class="fa-solid fa-xmark"></i></button>
            </div>
            <div class="modal-body">
                <div class="user_detiles">
                    <h4>Personal Details</h4>
                    <div class="left">
                        <ul>
                            <li><img src="{{ asset('front-assets/images/blus_user.png') }}" class="me-2">
                                <h6 id="patientName"></h6>
                            </li>
                            <li><img src="{{ asset('front-assets/images/call-simple.png') }}" class="me-2"><span
                                    id="patientMobile"></span></li>
                            <li><img src="{{ asset('front-assets/images/mail.png') }}" class="me-2"><span
                                    id="patientEmail"></span></li>
                            <li><img src="{{ asset('front-assets/images/location.png') }}" class="me-2"><span
                                    id="patientAddress">
                                </span></li>
                        </ul>
                    </div>

                </div>
                <div id="showCompletedPatientRequest">

                </div>
            </div>

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


<!-- view_vx two-->
<div class="modal fade view_vx" id="view_vx" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2"
    tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header p-0">
                <div class="modal-content">

                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-solid fa-xmark"></i></button>
                    <div id="rxImageDiv" class="medisin_bill">
                        <img id="rxImage">
                        <img id="rxImageView2" style="display: none">
                        <img id="rxImageView3" style="display: none">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@include('admin.footer')

<script>
    $(document).ready(function() {
        $(function() {
            var i = 1;
            var table = $('#dataTable').DataTable({
                scrollX: true,
                destroy: true,
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: true,
                ajax: {
                    url: "{{ route('managePatientAnalytic') }}",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}",
                            d.status = $('#status option:selected').val()
                    },
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false,
                    },
                    {
                        data: 'patientName',
                        searchable: true,
                        orderable: false,
                    },
                    {
                        data: 'mobile',
                        searchable: true,
                        orderable: false,
                    },
                    {
                        data: 'pendingRequest',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'fullfilledRequest',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'userName',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'status',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'kitView',
                        searchable: true,
                        orderable: false
                    }

                ],
                columnDefs: [{
                    "aTargets": [1, 2, 3, 4, 5, 6, 7], // Column to target
                    "mRender": function(data, type, full) {
                        if (data != null) {
                            return data;
                        } else {
                            return '-';
                        }
                    }
                }, ],

            });

            $("#status").on('change', function() {
                table.draw();
            });

        });
    });
</script>


<script>
    function status(id) {
        $.ajax({
            url: "{{ route('patientStatus') }}",
            type: 'POST',
            data: {
                'id': id,
                '_token': "{{ csrf_token() }}"
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                if (response.status == 1) {
                    $.notify(response.message, "success");
                } else
                    $.notify(response.message, "error");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $.notify(jqXHR.responseJSON.message, "error");
            }
        });
    }

    function showPatientRequest(id) {
        $.ajax({
            url: "{{ route('showPatientRequest') }}",
            type: 'POST',
            data: {
                'id': id,
                '_token': "{{ csrf_token() }}"
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                if (response.status == 1) {
                    $("#showCompletedPatientRequest").html('');
                    $("#patientName").html(response.patientData.patientName);
                    $("#patientMobile").html(response.patientData.mobile);
                    $("#patientEmail").html(response.patientData.email ? response.patientData.email : '-');
                    var addressParts = [
                        response.patientData.address1,
                        response.patientData.address2, // Only add if it exists
                        response.patientData.city,
                        response.patientData.state,
                        response.patientData.pinCode
                    ];

                    var patientAddress = addressParts.filter(function(part) {
                        return part !== null && part !== undefined && part !== '';
                    }).join(', ');
                    $("#patientAddress").html(patientAddress);
                    // $("#patientAddress").html(response.patientData.address1 + ', ' + response.patientData
                    //     .address2 + ', ' + response.patientData.city + ', ' + response.patientData
                    //     .state + ' ' + response.patientData.pinCode);
                    if (response.patientRequestData != null) {
                        var count = 1;
                        $.each(response.patientRequestData, function(key, value) {
                            var rxBtn = '';
                            if (value.rxImage || value.rxImage2 || value.rxImage3) {
                                rxBtn = `
                                    <button class="btn btn-secondary" onclick="showRxImage(${value.requestID})" id="rxImage">
                                        <img src="{{ asset('front-assets/images/blue-gallery.png') }}"> View RX
                                    </button>`;
                            } else {
                                rxBtn = `<h5 style="font-size: 0.83em;">No RX Image uploaded.</h5>`;
                            }
                            if (value.isApprove == 'Completed') {
                                var userName = value.user ? value.user.userName : 'N/A';
                                $("#showCompletedPatientRequest").append(
                                    ` <div class="kit modal-kit">
                                            <div class="left mb-auto">
                                                <img src="{{ asset('front-assets/images/kit.png') }}">
                                            </div>
                                            <div class="middle">
                                                <h6>Torleva Kit ${count}</h6>
                                                <div class="row">
                                                    <div class="col-lg-6">
                                                        <p><b>Requested Date :</b> <span>${value.requestDate}</span></p>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <p><b>Fulfil date :</b> <span>${value.date}</span></p>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <p><b>Fulfilled By :</b> <span>${userName}</span></p>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <p><b>Dr Name :</b> <span>${value.doctorName}</span></p>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <p><b>Unique code :</b> <span>${value.uniqueCode}</span></p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="right">
                                                <span class="completed"> <i class="fa-regular fa-circle-check me-2"></i> Completed</span>
                                                <div class="view_rx">
                                                    ${rxBtn}
                                                </div>
                                            </div>
                                        </div>`
                                );
                            } else {
                                var userName = value.user ? value.user.userName : 'N/A';
                                $("#showCompletedPatientRequest").append(
                                    ` <div class="kit modal-kit">
                                        <div class="left mb-auto">
                                            <img src="{{ asset('front-assets/images/kit.png') }}">
                                        </div>
                                        <div class="middle">
                                            <h6>Torleva Kit ${count}</h6>
                                            <p><b>Requested Date :</b> <span>${value.requestDate}</span></p>
                                            <p><b>MR :</b> <span>${userName}</span></p>
                                        </div>

                                        <div class="right">
                                            <span class=""><i class="fa-regular fa-circle-check me-2"></i>Requested</span>
                                            <div class="view_rx">
                                                ${rxBtn}
                                            </div>
                                        </div>
                                    </div>`
                                );
                            }
                            count++;
                        });
                    } else {
                        $("#showCompletedPatientRequest").append(`<h6>NO Previous Request Found</h6>`);
                    }
                    $("#show_dtails").modal('show');
                    // $.notify(response.message, "success");
                } else {
                    $.notify(response.message, "error");
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $.notify(jqXHR.responseJSON.message, "error");
            }
        });
    }

    function showRxImage(requestID) {
        $.ajax({
            url: "{{ route('adminGetRxImageUser') }}",
            type: 'POST',
            data: {
                'requestID': requestID,
                '_token': "{{ csrf_token() }}"
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                if (response.status == 1) {
                    $("#rxImage").attr('src', "{{ asset('storage/RxImage/') }}/" +
                        response.data.rxImage);
                    if (response.data.rxImage2 != null && response.data.rxImage3 != null) {
                        $("#rxImageView2").attr('src', "{{ asset('storage/RxImage/') }}/" +
                            response.data.rxImage2);
                        $("#rxImageView2").css('display', 'block');
                        $("#rxImageView3").attr('src', "{{ asset('storage/RxImage/') }}/" +
                            response.data.rxImage3);
                        $("#rxImageView3").css('display', 'block');
                        $("#rxImageDiv").addClass('multi_img');
                    } else {
                        $("#rxImageDiv").removeClass('multi_img');
                        $("#rxImageView2").css('display', 'none');
                        $("#rxImageView3").css('display', 'none');
                    }
                    $("#view_vx").modal('show');
                } else
                    $.notify(response.message, "error");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $.notify(jqXHR.responseJSON.message, "error");
            }
        }); //ajax
    }

    function clearPatientRequestData() {
        $("#patientName").html('');
        $("#patientMobile").html('');
        $("#patientEmail").html('');
        $("#patientAddress").html('');
        $("#showCompletedPatientRequest").html('');
        $("#show_dtails").modal('hide');
    }

    function downloadPatientData() {
        patientStatus = $('#status option:selected').val();

        window.location.replace("{{ route('downloadpatients') }}?patientStatus=" + patientStatus);
    }
</script>