<?php
if (session_status() === PHP_SESSION_NONE) { session_start(); }

require_once '../../dripend/includes/db.php';
function fetchDict($conn, $query) {
    $data = [];
    $res = $conn->query($query);
    if ($res) while($row = $res->fetch_assoc()) $data[] = $row;
    return $data;
}
$wards = fetchDict($conn, "SELECT ward_name FROM ipd_wards WHERE is_active=1");
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admit Patient | IPD Management</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://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        body { background-color: #f1f5f9; margin: 0; overflow-x: hidden; font-family: 'Inter', sans-serif;}
        
        /* STRICT SIDEBAR SPACING */
        .main-content-wrapper { margin-left: 290px !important; padding: 2.5rem; width: calc(100% - 290px); min-height: 100vh; box-sizing: border-box; }
        @media (max-width: 992px) { .main-content-wrapper { margin-left: 0 !important; width: 100% !important; padding: 1.5rem; } }

        /* Modern Colors */
        .text-primary { color: #0284c7 !important; }
        .bg-primary { background-color: #0284c7 !important; }
        .btn-primary { background-color: #0284c7; border-color: #0284c7; color: #fff; box-shadow: 0 4px 6px rgba(2, 132, 199, 0.2); }
        .btn-primary:hover { background-color: #0369a1; border-color: #0369a1; color: #fff; transform: translateY(-1px); }

        /* Filter Bar */
        .filter-bar { background: #fff; padding: 18px 24px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); display: flex; gap: 20px; align-items: center; margin-bottom: 25px; border: 1px solid #e2e8f0; }

        /* Wizard & Cards */
        .card { box-shadow: 0 4px 15px rgba(0,0,0,0.03); border-radius: 16px; border: 1px solid #e2e8f0; }
        .nav-tabs { border-bottom: 2px solid #e2e8f0; background: #fff; border-radius: 16px 16px 0 0; padding: 10px 20px 0 20px;}
        .nav-tabs .nav-link { color: #64748b; font-weight: 700; border-radius: 8px 8px 0 0; border: none; padding: 12px 20px; cursor: pointer; transition: all 0.2s;}
        .nav-tabs .nav-link.active { color: #0284c7; border-bottom: 3px solid #0284c7; background: transparent; }
        .wizard-pane { display: none; }
        .wizard-pane.active { display: block; animation: fadeIn 0.3s; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
        
        .clinical-box { background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #0284c7; padding: 14px 18px; border-radius: 8px; min-height: 44px; font-size: 0.95rem; }
        .patient-info-box { background: #f8fafc; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; }
        
        /* Clinical Profile Tags */
        .vital-tag { display: inline-block; padding: 5px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; margin-right: 6px; margin-bottom: 6px;}
        .tag-blood { background-color: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
        .tag-allergy { background-color: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }
        .tag-condition { background-color: #e0e7ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

        /* Visual Bed Matrix */
        .room-card { cursor: pointer; border-left: 4px solid #94a3b8; transition: all 0.2s; font-size: 0.9rem; border-radius: 8px; margin-bottom: 8px; border: 1px solid #e2e8f0;}
        .room-card:hover { background-color: #f1f5f9; }
        .room-card.selected { border-left-color: #0284c7; background-color: #f0f9ff; font-weight: 700; color: #0284c7; border: 1px solid #bae6fd;}

        .bed-box { width: 75px; height: 75px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; border: 2px solid transparent; }
        .bed-box.vacant { background-color: #dcfce7; color: #166534; border-color: #bbf7d0; }
        .bed-box.vacant:hover { background-color: #bbf7d0; transform: translateY(-2px); }
        .bed-box.occupied { background-color: #fee2e2; color: #991b1b; cursor: not-allowed; opacity: 0.7; border-color: #fecaca; }
        .bed-box.selected { border-color: #0284c7; box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.2); transform: scale(1.05); background: #e0f2fe; color: #0369a1;}
        .bed-box i { font-size: 1.4rem; margin-bottom: 5px; }
        .bed-box span { font-weight: 800; font-size: 0.8rem; }

        /* Buttons */
        .btn-cute { padding: 8px 18px; border-radius: 20px; font-weight: 700; font-size: 13px; transition: 0.2s;}

        /* Spotlight Modal */
        .spotlight-modal .modal-content { border-radius: 16px; overflow: hidden; border: none; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
        .spotlight-input { font-size: 1.2rem; padding: 16px 20px; border: none; box-shadow: none !important; }
        .spotlight-icon { font-size: 1.2rem; color: #0284c7; background: white; border: none; padding-left: 20px;}
    </style>
</head>
<body>

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

<div class="main-content-wrapper">
    
    <!-- HEADER -->
    <div class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom border-secondary border-opacity-25">
        <div>
            <h4 class="fw-bold mb-1" style="color: #0f172a;"><i class="fa-solid fa-hospital-user text-primary me-2"></i> In-Patient Admissions</h4>
            <small class="text-muted fw-bold">Dashboard &raquo; IPD Management &raquo; Admission Portal</small>
        </div>
        <div>
            <button class="btn btn-dark btn-cute shadow-sm" onclick="openDirectAdmissionModal()">
                <i class="fa-solid fa-bolt me-1 text-warning"></i> Direct Admission Search
            </button>
        </div>
    </div>

    <!-- PHASE 1: OPD ADMISSION QUEUE -->
    <div id="queue_view">
        <div class="filter-bar">
            <div style="font-weight: 800; font-size:12px; color:var(--muted);"><i class="fa-solid fa-filter me-1"></i> ADMISSION QUEUE FILTER:</div>
            <div class="d-flex gap-2 align-items-center flex-wrap">
                <select id="filter_ward" class="form-select form-select-sm" style="width: 200px; font-weight:600; border-radius:8px;">
                    <option value="ALL">All Destination Wards</option>
                    <?php foreach($wards as $w): ?>
                        <option value="<?php echo htmlspecialchars($w['ward_name']); ?>"><?php echo htmlspecialchars($w['ward_name']); ?></option>
                    <?php endforeach; ?>
                </select>
                <input type="date" id="filter_start" class="form-control form-control-sm" style="width: 150px; font-weight:600; border-radius:8px;" value="<?php echo date('Y-m-d'); ?>">
                <span style="font-weight:800; font-size:11px; color:#94a3b8;">TO</span>
                <input type="date" id="filter_end" class="form-control form-control-sm" style="width: 150px; font-weight:600; border-radius:8px;" value="<?php echo date('Y-m-d'); ?>">
                <button class="btn btn-primary btn-sm btn-cute ms-2" onclick="loadPendingQueue(true)"><i class="fa-solid fa-search me-1"></i> Retrieve Records</button>
            </div>
        </div>

        <div class="card bg-white">
            <div class="card-header bg-transparent py-3 border-bottom">
                <h6 class="fw-bold m-0" style="color: #0f172a;"><i class="fa-solid fa-list-check text-primary me-2"></i> Pending OPD Recommendations</h6>
            </div>
            <div class="card-body p-0 table-responsive">
                <table class="table table-hover align-middle m-0" id="tbl_pending_requests">
                    <thead class="table-light" style="font-size:12px; font-weight:700;">
                        <tr>
                            <th class="ps-4">Date / Time</th>
                            <th>Patient No.</th>
                            <th>Patient Name</th>
                            <th>Requested Ward</th>
                            <th>Referring Doctor</th>
                            <th class="pe-4 text-end">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- PHASE 2: ADMISSION WIZARD -->
    <div id="wizard_view" class="card bg-white" style="display: none;">
        <div class="card-header bg-transparent p-0 border-bottom">
            <ul class="nav nav-tabs px-3 pt-2" id="admissionTabs">
                <li class="nav-item"><button type="button" class="nav-link active" data-target="tab_clinical" id="nav_clinical"><i class="fa-solid fa-file-medical me-1"></i> 1. Clinical Plan</button></li>
                <li class="nav-item"><button type="button" class="nav-link" data-target="tab_patient" id="nav_patient"><i class="fa-solid fa-address-card me-1"></i> 2. Patient Details</button></li>
                <li class="nav-item"><button type="button" class="nav-link" data-target="tab_ward"><i class="fa-solid fa-bed-pulse me-1"></i> 3. Infrastructure</button></li>
                <li class="nav-item"><button type="button" class="nav-link" data-target="tab_process"><i class="fa-solid fa-clipboard-check me-1"></i> 4. Finalize</button></li>
            </ul>
        </div>
        
        <div class="card-body p-4 p-md-5">
            <form id="frmAdmitPatient">
                <input type="hidden" name="action" value="admit_patient">
                <input type="hidden" name="request_id" id="h_request_id">
                <input type="hidden" name="visit_master_id" id="h_visit_id">
                <input type="hidden" name="patient_no" id="h_patient_no">
                <input type="hidden" name="ward_id" id="h_ward_id" required>
                <input type="hidden" name="room_id" id="h_room_id">
                <input type="hidden" name="bed_id" id="h_bed_id" required>

                <!-- TAB 1: CLINICAL PLAN -->
                <div id="tab_clinical" class="wizard-pane active">
                    <div class="d-flex justify-content-between align-items-center mb-4 pb-2 border-bottom">
                        <h5 class="fw-bold text-dark m-0"><i class="fa-solid fa-user-doctor text-primary me-2"></i> OPD Doctor's Notes & Instructions</h5>
                        <button type="button" class="btn btn-outline-info btn-cute" onclick="viewClinicalHistory()"><i class="fa-solid fa-clock-rotate-left me-1"></i> Check Vitals & Labs</button>
                    </div>
                    
                    <div class="row g-4 mb-4">
                        <div class="col-md-6">
                            <label class="fw-bold text-muted small text-uppercase">Principal Diagnosis</label>
                            <div class="clinical-box" id="lbl_diagnosis" style="font-weight:700; color:#0f172a;">--</div>
                        </div>
                        <div class="col-md-6">
                            <label class="fw-bold text-muted small text-uppercase">Principal Complaint</label>
                            <div class="clinical-box" id="lbl_complaint" style="font-weight:700; color:#0f172a;">--</div>
                        </div>
                        <div class="col-12">
                            <div class="p-4" style="background:#f0f9ff; border:1px solid #bae6fd; border-radius:12px;">
                                <label class="fw-bold small text-uppercase" style="color:#0369a1; letter-spacing:0.5px;"><i class="fa-solid fa-clipboard-list me-1"></i> Ward Admission Instructions & Treatment Plan</label>
                                <div class="mt-2 text-dark" style="white-space: pre-wrap; font-size:15px; font-weight:500;" id="lbl_ward_plan">--</div>
                            </div>
                        </div>
                    </div>

                    <h6 class="fw-bold text-muted text-uppercase mb-3 mt-4 pt-4 border-top" style="font-size:12px; letter-spacing:0.5px;">Detailed Consultation Extracted Fields</h6>
                    <div class="row g-4" id="dynamic_clinical_content">
                        <!-- Dynamic consultation fields injected here -->
                    </div>

                    <div class="d-flex justify-content-end mt-5 pt-3 border-top">
                        <button type="button" class="btn btn-primary btn-cute btn-next" data-next="tab_patient">Proceed to Patient Details <i class="fa-solid fa-arrow-right ms-1"></i></button>
                    </div>
                </div>

                <!-- TAB 2: PATIENT DETAILS & INSURANCE -->
                <div id="tab_patient" class="wizard-pane">
                    <div class="row g-4">
                        <div class="col-lg-7">
                            <h5 class="fw-bold mb-3 text-dark">Patient Demographics</h5>
                            <div class="patient-info-box">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="text-muted small fw-bold">Patient Name</label>
                                        <div class="fw-bold text-dark fs-6" id="disp_name">--</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="text-muted small fw-bold">Patient ID</label>
                                        <div class="text-dark fw-bold" id="disp_no">--</div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="text-muted small fw-bold">Gender / Age</label>
                                        <div class="text-dark small fw-bold" id="disp_gender_age">--</div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="text-muted small fw-bold">Mobile No.</label>
                                        <div class="text-dark small fw-bold" id="disp_mobile">--</div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="text-muted small fw-bold">Ghana Card</label>
                                        <div class="text-dark small fw-bold" id="disp_id">--</div>
                                    </div>
                                    <div class="col-12 border-top pt-3 mt-3">
                                        <label class="text-muted small fw-bold mb-2">Clinical Profile Alerts</label><br>
                                        <span class="vital-tag tag-blood" id="disp_blood"><i class="fa-solid fa-droplet me-1"></i> Blood: --</span>
                                        <span class="vital-tag tag-allergy" id="disp_allergy"><i class="fa-solid fa-triangle-exclamation me-1"></i> Allergies: --</span>
                                        <span class="vital-tag tag-condition" id="disp_conditions"><i class="fa-solid fa-heart-pulse me-1"></i> Conditions: --</span>
                                    </div>
                                    <div class="col-12 border-top pt-3 mt-3">
                                        <label class="text-muted small fw-bold">Emergency Contact</label>
                                        <div class="text-dark small fw-bold"><i class="fa-solid fa-phone text-muted me-2"></i><span id="disp_em_name">--</span> (<span id="disp_em_phone">--</span>)</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-5">
                            <h5 class="fw-bold mb-3 text-dark">Billing & Insurance</h5>
                            <div class="patient-info-box bg-white shadow-sm border-0" style="border-top: 4px solid #0284c7 !important;">
                                <label class="form-label fw-bold small text-primary">Admission Payment Category</label>
                                <select class="form-select mb-3 border-primary fw-bold" name="payment_category" id="sel_payment_cat" style="border-radius:8px;">
                                    <option value="Cash">Cash / Out-of-Pocket</option>
                                    <option value="NHIS">NHIS (National Health Insurance)</option>
                                    <option value="Corporate">Corporate / Private Insurance</option>
                                </select>

                                <!-- NHIS Area -->
                                <div id="area_nhis" style="display:none;" class="p-3 bg-light rounded-3 border border-secondary border-opacity-25">
                                    <div class="mb-3">
                                        <label class="form-label small fw-bold">NHIS Number <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control fw-bold" name="nhis_no" id="inp_nhis_no" style="border-radius:8px;">
                                    </div>
                                    <div class="mb-2">
                                        <label class="form-label small fw-bold">Claim Check Code (CCC)</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control fw-bold" name="ccc_code" id="inp_ccc_code" placeholder="Fetch or enter CCC">
                                            <button class="btn btn-outline-primary fw-bold px-3" type="button" onclick="verifyCCC()">Verify</button>
                                        </div>
                                    </div>
                                    <div id="ccc_status_badge" class="mt-2 text-end"></div>
                                </div>

                                <!-- Corporate Area -->
                                <div id="area_corp" style="display:none;" class="p-3 bg-light rounded-3 border border-secondary border-opacity-25">
                                    <div class="mb-3">
                                        <label class="form-label small fw-bold">Corporate Provider <span class="text-danger">*</span></label>
                                        <select class="form-select fw-bold" name="corp_provider_id" id="sel_corp_provider" style="border-radius:8px;"></select>
                                    </div>
                                    <div class="mb-2">
                                        <label class="form-label small fw-bold">Policy Number</label>
                                        <input type="text" class="form-control fw-bold" name="corp_policy_no" id="inp_corp_no" style="border-radius:8px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between mt-5 pt-3 border-top">
                        <button type="button" class="btn btn-light border text-muted btn-cute btn-prev" data-prev="tab_clinical" id="btn_back_to_clinical"><i class="fa-solid fa-arrow-left me-1"></i> Back</button>
                        <button type="button" class="btn btn-primary btn-cute btn-next" data-next="tab_ward">Assign Infrastructure <i class="fa-solid fa-arrow-right ms-1"></i></button>
                    </div>
                </div>

                <!-- TAB 3: VISUAL WARD / BED ASSIGNMENT -->
                <div id="tab_ward" class="wizard-pane">
                    <h5 class="fw-bold mb-4 text-dark">Infrastructure Assignment Matrix</h5>
                    <div class="row g-4">
                        <div class="col-md-4 border-end border-secondary border-opacity-25 pe-4">
                            <label class="form-label fw-bold small text-primary text-uppercase"><i class="fa-solid fa-1 me-1"></i> Select Ward</label>
                            <select class="form-select border-primary shadow-sm mb-4 fw-bold" id="sel_visual_ward" style="border-radius:8px;">
                                <option value="">-- Loading Wards... --</option>
                            </select>

                            <div id="room_selection_area" style="display:none;">
                                <label class="form-label fw-bold small text-primary text-uppercase mt-2"><i class="fa-solid fa-2 me-1"></i> Select Area / Room</label>
                                <div class="list-group shadow-sm mt-1" id="room_list"></div>
                            </div>
                        </div>

                        <div class="col-md-8 ps-4">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <label class="form-label fw-bold small text-primary text-uppercase mb-0"><i class="fa-solid fa-3 me-1"></i> Select Vacant Bed</label>
                                <span class="badge bg-warning text-dark px-3 py-2 rounded-pill" id="bed_status_badge" style="font-size:12px;">Awaiting Selection</span>
                            </div>
                            <div class="p-4 bg-light border rounded-3 min-vh-25" id="bed_grid_area" style="border: 2px dashed #cbd5e1 !important;">
                                <div class="text-center text-muted py-5"><i class="fa-solid fa-bed fa-3x mb-3" style="color:#e2e8f0;"></i><br><span style="font-weight:600;">Select a Ward and Room to view beds.</span></div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between mt-5 pt-3 border-top">
                        <button type="button" class="btn btn-light border text-muted btn-cute btn-prev" data-prev="tab_patient"><i class="fa-solid fa-arrow-left me-1"></i> Back</button>
                        <button type="button" class="btn btn-primary btn-cute btn-next" data-next="tab_process">Continue to Protocols <i class="fa-solid fa-arrow-right ms-1"></i></button>
                    </div>
                </div>

                <!-- TAB 4: ADMISSION METADATA -->
                <div id="tab_process" class="wizard-pane">
                    <h5 class="fw-bold mb-4 text-dark">Final Admission Protocols</h5>
                    
                    <div class="row g-4 mb-4">
                        <div class="col-md-6">
                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label fw-bold small text-muted text-uppercase">Under Care of Doctor <span class="text-danger">*</span></label>
                                    <select class="form-select border-primary fw-bold" name="primary_doctor" id="sel_doctor" required style="border-radius:8px;"></select>
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label fw-bold small text-muted text-uppercase">Admission Priority <span class="text-danger">*</span></label>
                                    <select class="form-select fw-bold" name="admission_priority" id="sel_priority" required style="border-radius:8px;"></select>
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label fw-bold small text-muted text-uppercase">Admission Source <span class="text-danger">*</span></label>
                                    <select class="form-select fw-bold" name="admission_source" id="sel_source" required style="border-radius:8px;"></select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-bold small text-muted text-uppercase">Primary Reason for Admission <span class="text-danger">*</span></label>
                                    <select class="form-select fw-bold" name="admission_reason" id="sel_reason" required style="border-radius:8px;"></select>
                                </div>
                                <div class="col-12 direct-admit-fields" style="display:none;">
                                    <label class="form-label fw-bold small text-muted text-uppercase">Provisional Diagnosis</label>
                                    <input type="text" class="form-control fw-bold" name="provisional_diagnosis" placeholder="Primary diagnosis code/description" style="border-radius:8px;">
                                </div>
                                <div class="col-12 direct-admit-fields" style="display:none;">
                                    <label class="form-label fw-bold small text-muted text-uppercase">Principal Complaint</label>
                                    <input type="text" class="form-control fw-bold" name="principal_complaint" placeholder="e.g. Severe abdominal pain" style="border-radius:8px;">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="row g-3">
                                <div class="col-12">
                                    <div class="p-3 border rounded-3 bg-light">
                                        <div class="form-check form-switch mb-2">
                                            <input class="form-check-input" type="checkbox" role="switch" name="is_referral" id="chkReferral" style="cursor:pointer;">
                                            <label class="form-check-label fw-bold small text-muted text-uppercase" for="chkReferral" style="cursor:pointer;">Is External Referral?</label>
                                        </div>
                                        <div class="ref_field" style="display:none;">
                                            <label class="form-label small fw-bold mt-2">Referral Facility</label>
                                            <input type="text" class="form-control form-control-sm mb-2 fw-bold" name="referral_facility" placeholder="Name of hospital/clinic" style="border-radius:8px;">
                                            <label class="form-label small fw-bold">Date of Referral</label>
                                            <input type="date" class="form-control form-control-sm fw-bold" name="referral_date" style="border-radius:8px;">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-bold small text-muted text-uppercase">Special Admission Notes / Warnings</label>
                                    <textarea class="form-control fw-bold" name="admission_notes" rows="4" placeholder="e.g., Patient requires wheelchair assistance..." style="border-radius:8px; resize:vertical;"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-3 bg-danger bg-opacity-10 rounded-3 border border-danger shadow-sm">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="chkConfirm" required style="cursor:pointer; transform: scale(1.2); margin-top:0.3rem;">
                            <label class="form-check-label fw-bold text-danger ms-2" for="chkConfirm" style="cursor:pointer;">
                                I confirm that the patient details, clinical instructions, and bed assignments are correct and ready for admission.
                            </label>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mt-5 pt-3 border-top">
                        <button type="button" class="btn btn-light border text-muted btn-cute btn-prev" data-prev="tab_ward"><i class="fa-solid fa-arrow-left me-1"></i> Back</button>
                        <div>
                            <button type="button" class="btn btn-outline-secondary btn-cute me-2" onclick="cancelAdmission()">Cancel</button>
                            <button type="submit" class="btn btn-success btn-cute shadow-sm" id="btnFinalAdmit"><i class="fa-solid fa-check-circle me-1"></i> Finalize Admission</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- ========================================== -->
<!-- MODAL: MODERN SPOTLIGHT DIRECT ADMISSION SEARCH -->
<!-- ========================================== -->
<div class="modal fade spotlight-modal" id="modalDirectAdmission" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0">
            <div class="d-flex align-items-center bg-white border-bottom p-2">
                <span class="spotlight-icon"><i class="fa-solid fa-search"></i></span>
                <input type="text" id="txtPatientSearch" class="form-control spotlight-input" placeholder="Search Patient by Name, ID, or Mobile Number..." autocomplete="off">
                <button type="button" class="btn-close me-3" data-bs-dismiss="modal"></button>
            </div>
            
            <div class="modal-body p-0 bg-light" style="max-height: 400px; overflow-y: auto;">
                <table class="table table-hover align-middle m-0 border-bottom">
                    <thead class="table-light sticky-top">
                        <tr>
                            <th class="ps-4">Patient No.</th>
                            <th>Full Name</th>
                            <th>Gender/Age</th>
                            <th class="pe-4 text-end">Action</th>
                        </tr>
                    </thead>
                    <tbody id="directAdmitResults">
                        <tr><td colspan="4" class="text-center text-muted py-5 small">Type a name or ID and press Enter to search.</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- ========================================== -->
<!-- MODAL: CLINICAL HISTORY -->
<!-- ========================================== -->
<div class="modal fade" id="modalClinicalHistory" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg" style="border-radius:16px;">
            <div class="modal-header" style="background:#0f172a; color:#fff; border:none;">
                <h5 class="modal-title fw-bold fs-6"><i class="fa-solid fa-clock-rotate-left me-2"></i> Recent OPD Vitals & Labs</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4 bg-light">
                <div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-3">
                    <h6 class="fw-bold text-dark m-0 small text-uppercase">Recent Vitals</h6>
                </div>
                <div id="vitals_history_area" class="mb-4">Loading...</div>
                
                <div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-3 mt-4">
                    <h6 class="fw-bold text-dark m-0 small text-uppercase">Recent Labs Requested</h6>
                    <button class="btn btn-primary btn-sm btn-cute shadow-sm" onclick="viewSelectedLabs()"><i class="fa-solid fa-microscope"></i> View Results</button>
                </div>
                <div id="labs_history_area">Loading...</div>
            </div>
        </div>
    </div>
</div>

<!-- ========================================== -->
<!-- MODAL: LAB RESULTS VIEWER -->
<!-- ========================================== -->
<div class="modal fade" id="modalLabResults" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 16px;">
            <div class="modal-header" style="background: var(--accent-dark); color: #fff; border:none;">
                <h5 class="modal-title fw-bold" style="font-size: 16px;"><i class="fa-solid fa-microscope me-2"></i> Clinical Investigation Results</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4" id="labResultsArea" style="background: #f8fafc;">
                <!-- Results loaded via AJAX -->
            </div>
            <div class="modal-footer border-0 bg-white">
                <button type="button" class="btn btn-light btn-cute text-dark border fw-bold" data-bs-dismiss="modal">Close Viewer</button>
            </div>
        </div>
    </div>
</div>

<!-- ========================================== -->
<!-- APP NOTIFICATION MODAL -->
<!-- ========================================== -->
<div class="modal fade" id="appNotificationModal" tabindex="-1" style="z-index: 9999;">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 16px;">
            <div class="modal-body text-center p-4">
                <div id="appNotifIcon" class="mb-3"></div>
                <h6 class="fw-bold text-dark mb-2" id="appNotifTitle">Notification</h6>
                <p class="text-muted mb-4" id="appNotifMsg" style="font-size: 13px; font-weight:500;"></p>
                <button type="button" class="btn btn-primary btn-cute w-100 shadow-sm" data-bs-dismiss="modal" onclick="$('#appNotificationModal').modal('hide');">Got It</button>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

<script src="/rimax/application/assets/js/admitPatientFrontEnd.js"></script>
</body>
</html>