<?php
if (session_status() === PHP_SESSION_NONE) { session_start(); }
require_once '../../dripend/includes/db.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pending Clinical Prescriptions | eRHAMS</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body { background-color: #f1f5f9; font-family: 'Inter', sans-serif; overflow-x: hidden; }
        .main-content-wrapper { margin-left: 260px; padding: 2rem; width: calc(100% - 260px); min-height: 100vh; }
        @media (max-width: 992px) { .main-content-wrapper { margin-left: 0; width: 100%; padding: 1.5rem; } }
        .desk-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;}
        .desk-header h4 { font-weight: 800; color: #0f172a; margin: 0; display:flex; align-items:center; letter-spacing: -0.5px;}
        .kpi-filter-bar { background: #fff; padding: 20px; border-radius: 16px; margin-bottom: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); border: 1px solid #e2e8f0; }
        .input-control { padding: 12px 18px; border-radius: 10px; border: 1px solid #cbd5e1; outline: none; font-size:14px; font-weight: 600; background: #f8fafc; color:#0f172a;}
        .input-control:focus { border-color: #0284c7; background:#fff;}
        .content-card { background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.02); overflow:hidden;}
        .table thead th { background: #f8fafc; color: #475569; padding: 18px 25px; font-weight: 800; font-size: 12px; text-transform: uppercase; border-bottom: 1px solid #e2e8f0;}
        .table tbody td { padding: 18px 25px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
        .rx-tile { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; transition: 0.2s; height: 100%; }
        .rx-tile:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.05); transform: translateY(-3px); border-color: #cbd5e1;}
    </style>
</head>
<body>

<?php include '../../dripend/statpages/sidebar.php'; ?>

<div class="main-content-wrapper">
    <div class="desk-header">
        <h4><i class="fa-solid fa-list-check text-primary me-2"></i> Pending Prescriptions Queue</h4>
        <div class="btn-group shadow-sm">
            <button class="btn btn-primary active" id="btnListView" onclick="toggleQueueView('list')"><i class="fa-solid fa-list"></i></button>
            <button class="btn btn-outline-primary" id="btnTileView" onclick="toggleQueueView('tile')"><i class="fa-solid fa-border-all"></i></button>
        </div>
    </div>

    <!-- DUAL DATE & ADVANCED FILTERS -->
    <div class="kpi-filter-bar row g-3 m-0">
        <div class="col-md-2">
            <label class="small fw-bold text-muted mb-1 text-uppercase">Dispensary</label>
            <select id="dispensary_filter" class="input-control text-primary w-100"><option value="ALL">Loading...</option></select>
        </div>
        <div class="col-md-2">
            <label class="small fw-bold text-muted mb-1 text-uppercase">Insurance</label>
            <select id="flt_insurance" class="input-control w-100">
                <option value="ALL">All Patients</option>
                <option value="Cash">Cash</option>
                <option value="NHIS">NHIS</option>
                <option value="Corporate">Corporate</option>
            </select>
        </div>
        <div class="col-md-2">
            <label class="small fw-bold text-muted mb-1 text-uppercase">Type</label>
            <select id="flt_type" class="input-control w-100">
                <option value="ALL">All Types</option>
                <option value="Out-patient">OPD</option>
                <option value="In-patient">IPD</option>
            </select>
        </div>
        <div class="col-md-2">
            <label class="small fw-bold text-muted mb-1 text-uppercase">From Date</label>
            <input type="date" id="flt_start" class="input-control w-100" value="<?php echo date('Y-m-01'); ?>">
        </div>
        <div class="col-md-2">
            <label class="small fw-bold text-muted mb-1 text-uppercase">To Date</label>
            <input type="date" id="flt_end" class="input-control w-100" value="<?php echo date('Y-m-t'); ?>">
        </div>
        <div class="col-md-2 d-flex align-items-end">
            <button class="btn btn-dark fw-bold w-100 shadow-sm" style="height:46px; border-radius:10px;" onclick="applyFilters()"><i class="fa-solid fa-filter me-1"></i> Apply Filter</button>
        </div>
    </div>

    <div class="content-card" id="viewContainer_list">
        <div class="table-responsive">
            <table id="tblPendingRx" class="table table-hover align-middle">
                <thead><tr><th width="5%">#</th><th>Time</th><th>Type</th><th>Patient Identity</th><th>Items</th><th class="text-end">Action</th></tr></thead>
                <tbody><tr><td colspan="6" class="text-center py-5"><i class="fa fa-spinner fa-spin fa-2x text-primary"></i></td></tr></tbody>
            </table>
        </div>
    </div>

    <div class="row g-4 d-none" id="viewContainer_tile"></div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script> const TARGET_VISIT_ID = 0; </script>
<script src="/rimax/application/assets/js/drugDispensary.js?v=<?= time() ?>"></script>
</body>
</html>