{% extends '@patient/layouts/commonmaster.html.twig' %}

{% block stylesheets %}
{{ parent() }}

<!-- Selectize  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css" integrity="sha512-pTaEn+6gF1IeWv3W1+7X7eM60TFu/agjgoHmYhAfLEU8Phuf6JKiiE8YmsNC0aCgQv4192s4Vai8YZ6VNM6vyQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<!-- toastr js  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" integrity="sha512-vKMx8UnXk60zUwyUnUPM3HbQo8QfmNx7+ltw8Pm5zLusl1XIfwcxo8DbWCqMGKaWeNxWA8yrx5v3SaVpMvR3CA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
.form-control, .btn {
    box-shadow: none !important;
    outline: none !important;
}
</style>

{% endblock %}

{% block content %}

<div class="col-md-12 my-5">
    <div class="card shadow rounded-3 col-md-12">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0">📋 Patient Queue</h5>
            <small class="text-light">Last updated: <span id="lastUpdated">Just now</span></small>
        </div>

        <div class="card-body p-3">
            <div class="table-responsive">
                <table id="patient_queue_table" class="easyui-datagrid"> </table>
            </div>
        </div>

        <div class="card-footer text-muted text-end">
            Showing real-time queue data
        </div>
    </div>
</div>


{% endblock %}

{% block javascripts %}
{{ parent() }}

<script>
$(document).ready(function() {
    $('#patient_queue_table').datagrid({
        fitColumns: true,
        // remoteSort:false,
        singleSelect:true,
        rownumbers: true,
        pageSize: 20,
        // nowrap:false,
        fitColumns:true,
        url:'{{ path("app_fetch_patient_queue") }}',
        columns: [[
            {
                field: 'p.name', title: 'Patient Name', width: 50,
                formatter: (v, r) => r.name
            },
            {
                field: 'p.username', title: 'Patient Username', width: 30,
                formatter: (v, r) => r.username
            },
            {
                field: 'p.phonenumber', title: 'Phone Number', width: 30,
                formatter: (v, r) => r.phonenumber
            },
            {
                field: 'c.gender', title: 'Gender', width: 30,
                formatter: (v, r) => r.gender
            },
            {
                field: 'c.age', title: 'Age', width: 30,
                formatter: (v, r) => r.age
            },
            {
                field: 'c.status', title: 'Status', width: 30,
                formatter: (v, r) => r.status
            },
            {
                field: 'p.registered_at', title: 'Date Registered', width: 30,
                formatter: (v, r) => r.registered_at
            },
        ]],
        view: detailview,
        detailFormatter: function(rowIndex, rowData){
            return ` <table style="border: none; width: 100%;"> <tr> <td rowspan="4" style="border:0; width: 80px;"> <img src="https://picsum.photos/200/300?${rowIndex}" style="height: 60px; width: 60px; border-radius: 4px;"> </td> <td style="border:0; padding-left: 10px;"> <strong>Full Name:</strong> ${rowData.person_name}<br> <strong>Phone:</strong> ${rowData.phonenumber}<br> <strong>Email:</strong> ${rowData.email ?? 'N/A'}<br> <strong>National ID:</strong> ${rowData.nationalid ?? 'N/A'}<br> <strong>Patient Status:</strong> ${rowData.status}<br> <strong>Gender:</strong> ${rowData.gender ?? 'N/A'}<br> <strong>Age:</strong> ${rowData.age ?? 'N/A'} </td> </tr> <tr> <td style="border:0; padding-left: 10px;"> <strong>Next of Kin:</strong> ${rowData.next_of_kin ?? 'Not Provided'}<br> <strong>Relationship:</strong> ${rowData.next_of_kin_relation ?? 'N/A'}<br> <strong>Next of Kin Phone:</strong> ${rowData.next_of_kin_phone ?? 'N/A'} </td> </tr> </table> `;
        }
    });
});
</script>

{% endblock %}