<?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 id, 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>Ward Admission Manager | 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">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
    
    <style>
        body { background-color: #f8fafc; margin: 0; overflow-x: hidden; font-family: 'Inter', sans-serif;}
        .main-content-wrapper { margin-left: 260px !important; padding: 2.5rem; width: calc(100% - 260px); min-height: 100vh; box-sizing: border-box; }
        @media (max-width: 992px) { .main-content-wrapper { margin-left: 0 !important; width: 100% !important; padding: 1.5rem; } }

        .dashboard-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; margin-bottom: 25px;}
        
        .view-toggle-group { display: flex; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.02);}
        .view-toggle-btn { background: transparent; border: none; padding: 10px 20px; font-size: 13.5px; font-weight: 700; color: #64748b; cursor: pointer; transition: 0.2s; }
        .view-toggle-btn.active { background: #e0f2fe; color: #0284c7; }
        .view-toggle-btn:hover:not(.active) { background: #f1f5f9; }

        .stat-card { background: #fff; border-radius: 16px; padding: 25px; border: 1px solid #e2e8f0; display: flex; align-items: center; gap: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); height: 100%;}
        .stat-icon { width: 65px; height: 65px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; color:#fff; flex-shrink: 0;}
        .stat-icon.blue { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
        .stat-icon.orange { background: linear-gradient(135deg, #fbbf24, #d97706); }
        .stat-icon.purple { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
        .stat-body h3 { font-size: 32px; font-weight: 800; margin: 0; color: #0f172a; display:flex; align-items:center; gap:15px;}
        .stat-body p { font-size: 12px; font-weight: 800; color: #64748b; margin: 6px 0 0 0; text-transform: uppercase; letter-spacing: 0.5px; }

        .filter-bar { background: #fff; padding: 25px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); margin-bottom: 30px; border: 1px solid #e2e8f0; }
        .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; align-items: end; }
        .filter-group { display: flex; flex-direction: column; gap: 8px; }
        .filter-group label { font-size: 11.5px; font-weight: 800; color: #475569; text-transform: uppercase; letter-spacing: 0.5px;}
        
        .input-control { padding: 12px 16px; border-radius: 10px; border: 1px solid #cbd5e1; outline: none; font-size:14px; font-weight: 600; background: #f8fafc; transition: 0.2s; width: 100%;}
        .input-control:focus { border-color: #0ea5e9; box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15); background:#fff;}
        .btn-filter { background: #10b981; color: #fff; border: none; border-radius: 10px; padding: 12px 20px; font-weight: 800; font-size: 14px; cursor: pointer; transition: 0.2s; height: 46px; display:flex; align-items:center; justify-content:center; gap:8px;}
        .btn-filter:hover { background: #059669; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(16, 185, 129, 0.3); color:#fff;}

        .list-table-container { background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.03); overflow:hidden;}
        table.main-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
        table.main-table th { background: #f1f5f9; color: #475569; padding: 18px 24px; font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.5px;}
        table.main-table td { padding: 20px 24px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
        .list-row { transition: 0.2s; background: #fff;}
        .list-row:hover { background: #f8fafc; }
        
        .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 30px; }
        .tile-card { background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 6px 20px rgba(0,0,0,0.03); display: flex; flex-direction: column; position: relative; overflow:hidden; transition: 0.3s;}
        .tile-card:hover { transform: translateY(-4px); box-shadow: 0 12px 25px rgba(0,0,0,0.06); }
        .tile-card.status-active { border-top: 5px solid #0284c7; }
        .tile-card.status-pending { border-top: 5px solid #f59e0b; background: #fffbeb; }
        .tile-card.status-theatre { border-top: 5px solid #dc2626; background: #fef2f2; }
        .tile-card.status-closed { border-top: 5px solid #10b981; }
        
        .patient-avatar { width: 55px; height: 55px; border-radius: 50%; background: #e0f2fe; color: #0284c7; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; flex-shrink:0;}
        
        .tile-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; padding: 25px 25px 0 25px;}
        .tile-info { margin-bottom: 25px; flex: 1; padding: 0 25px; }
        .tile-info p { margin: 0 0 10px 0; font-size: 13.5px; font-weight: 600; color: #475569; display: flex; align-items: center; gap: 10px;}
        .tile-info p i { width: 16px; text-align: center; color: #94a3b8; font-size: 14px;}

        .tile-actions { background: #f8fafc; padding: 15px 25px; border-top: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;}
        .quick-btn { background: #fff; color: #0f172a; border: 1px solid #cbd5e1; border-radius: 8px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.02);}
        .quick-btn:hover { background: #0284c7; border-color: #0284c7; }
        .quick-btn:hover i { color: #fff !important; }
        
        .full-chart-btn { background: #0f172a; color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-weight: 700; font-size: 13px; text-decoration: none; transition: 0.2s;}
        .full-chart-btn:hover { background: #1e293b; color: #fff; }
        .badge-outcome { font-size: 12px; padding: 8px 12px; font-weight: 800; letter-spacing: 0.5px; border-radius: 6px;}

        .select2-container { width: 100% !important; z-index: 1055; text-align: left; }
        .note-editor { background: #fff; border-radius: 8px; border: 1px solid #cbd5e1 !important; }
    </style>
</head>
<body>

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

<div class="main-content-wrapper">
    
    <div class="dashboard-header">
        <h3 class="fw-bold text-dark m-0" style="letter-spacing: -0.5px;">
            <i class="fa-solid fa-users-medical text-primary me-2"></i> Ward Admission Manager
        </h3>
        <div class="d-flex gap-3 align-items-center">
            <div class="view-toggle-group">
                <button class="view-toggle-btn active" onclick="toggleView('tile')" id="btnViewTile"><i class="fa-solid fa-grip me-1"></i> Tile View</button>
                <button class="view-toggle-btn" onclick="toggleView('list')" id="btnViewList"><i class="fa-solid fa-list me-1"></i> List View</button>
            </div>
        </div>
    </div>

    <!-- STATS ROW -->
    <div class="row g-4 mb-3">
        <div class="col-md-4">
            <div class="stat-card">
                <div class="stat-icon blue"><i class="fa-solid fa-bed-pulse"></i></div>
                <div class="stat-body">
                    <h3 id="stat_active">0</h3>
                    <p>Total Active Beds (Incl. Pending)</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="stat-card">
                <div class="stat-icon orange"><i class="fa-solid fa-person-walking-arrow-right"></i></div>
                <div class="stat-body">
                    <h3 id="stat_discharged">0</h3>
                    <p>Discharged (Selected Period) <br><span class="text-muted text-capitalize fw-normal" style="font-size:10px;" id="stat_disc_demo">(M: 0, F: 0)</span></p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="stat-card w-100 h-100">
                <div class="stat-icon purple"><i class="fa-solid fa-venus-mars"></i></div>
                <div class="stat-body" style="width:100%;">
                    <h3>
                        <span style="color:#2563eb;" title="Male"><i class="fa-solid fa-mars"></i> <span id="stat_male">0</span></span>
                        <span style="color:#db2777; margin-left:15px;" title="Female"><i class="fa-solid fa-venus"></i> <span id="stat_female">0</span></span>
                        <span style="color:#059669; margin-left:25px;" title="Adult (>=12)"><i class="fa-solid fa-user"></i> <span id="stat_adult">0</span></span>
                        <span style="color:#f59e0b; margin-left:15px;" title="Child (<12)"><i class="fa-solid fa-child"></i> <span id="stat_child">0</span></span>
                    </h3>
                    <p>Active Demographics</p>
                </div>
            </div>
        </div>
    </div>

    <!-- FILTER BAR -->
    <div class="filter-bar">
        <div class="filter-grid">
            <div class="filter-group">
                <label>Date From</label>
                <input type="date" id="flt_start" class="input-control">
            </div>
            <div class="filter-group">
                <label>Date To</label>
                <input type="date" id="flt_end" class="input-control">
            </div>
            <div class="filter-group">
                <label>Ward / Unit Filter</label>
                <select id="flt_ward" class="input-control">
                    <option value="ALL">All Wards / Units</option>
                </select>
            </div>
            <div class="filter-group">
                <label>Attending Doctor</label>
                <select id="flt_doctor" class="input-control">
                    <option value="ALL">All Providers</option>
                </select>
            </div>
            <div class="filter-group">
                <label>Admission Status</label>
                <select id="flt_status" class="input-control">
                    <option value="Active" selected>Actively Admitted (In Bed / Theatre)</option>
                    <option value="Closed">Discharged / Closed</option>
                    <option value="ALL">All Records</option>
                </select>
            </div>
            <div class="filter-group">
                <button class="btn-filter w-100" onclick="loadAdmissions()"><i class="fa-solid fa-filter"></i> Apply</button>
            </div>
        </div>
    </div>

    <!-- DATA CONTAINERS -->
    <div id="loading_state" class="text-center py-5">
        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;"></div>
        <h5 class="fw-bold mt-3 text-muted">Retrieving Clinical Data...</h5>
    </div>

    <div id="empty_state" class="text-center py-5" style="display:none; background:#fff; border-radius:16px; border:1px dashed #cbd5e1;">
        <i class="fa-solid fa-bed-empty fa-4x mb-3" style="color:#cbd5e1;"></i><br>
        <span class="fw-bold fs-4 text-dark">No Admissions Found</span>
        <p class="text-muted mt-2">Adjust your filters or date range to view records.</p>
    </div>

    <div id="tile_view" class="tile-grid" style="display:none;"></div>

    <div id="list_view" class="list-table-container" style="display:none;">
        <table class="main-table">
            <thead>
                <tr>
                    <th>Patient Identity</th>
                    <th>Ward / Bed Location</th>
                    <th>Admission Date</th>
                    <th>Attending Doctor</th>
                    <th>Clinical Status</th>
                    <th class="text-end">Action</th>
                </tr>
            </thead>
            <tbody id="list_view_body"></tbody>
        </table>
    </div>

</div>

<!-- ========================================== -->
<!-- THE NEW UNIVERSAL ACTION MODAL WITH HISTORY -->
<!-- ========================================== -->
<div class="modal fade" id="universalActionModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-primary text-white border-0 p-3">
                <h6 class="modal-title fw-bold m-0" id="uModalTitle"></h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4 bg-light">
                
                <!-- The Form Engine Container -->
                <div id="uModalBody"></div>
                
                <!-- The Contextual History Container -->
                <div class="mt-4 pt-4 border-top border-2 border-secondary border-opacity-25">
                    <h6 class="fw-bold text-dark text-uppercase mb-3"><i class="fa-solid fa-clock-rotate-left text-secondary me-2"></i> Recent Form History & Existing Records</h6>
                    <div id="uModalHistory" style="max-height: 400px; overflow-y: auto; overflow-x: hidden; padding-right:10px;"></div>
                </div>

            </div>
            <div class="modal-footer bg-white border-0 p-3">
                <button type="button" class="btn btn-primary px-5 fw-bold w-100 shadow-sm" id="uModalBtn" onclick="submitUniversalAction()"><i class="fa-solid fa-check-double me-2"></i> Save Record & Process Request</button>
            </div>
        </div>
    </div>
</div>

<!-- SUCCESS & ERROR APP MODALS -->
<div class="modal fade" id="appResponseModal" tabindex="-1" style="z-index: 1060;">
    <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 p-4 text-center">
                <i id="appResIcon" class="fa-solid fa-circle-check text-success fa-4x mb-3"></i>
                <h5 class="fw-bold text-dark" id="appResTitle">Success</h5>
                <p class="text-muted small" id="appResMsg"></p>
                <button type="button" id="appResBtn" class="btn btn-success fw-bold px-4 mt-2" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </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 src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<!-- Summernote Rich Text Editor Core -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
<script src="/rimax/application/assets/js/admissionManager.js"></script>

</body>
</html>