
<?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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IPD Command Dashboard | 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">
    
    <!-- DIRECT OFFLINE ASSETS -->
    <link href="/rimax/application/rimaxassets/css/bootstrap.min.css" rel="stylesheet">
    <link href="/rimax/application/rimaxassets/css/all.min.css" rel="stylesheet">
    <link href="/rimax/application/rimaxassets/css/css2.css" rel="stylesheet">
    <link href="/rimax/application/rimaxassets/css/dataTables.bootstrap5.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;}
        
        /* CSS GRID FOR KPI CARDS */
        .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-bottom: 30px; }
        
        .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%; transition: 0.3s;}
        .stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.06); }
        .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.primary { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
        .stat-icon.success { background: linear-gradient(135deg, #10b981, #059669); }
        .stat-icon.warning { background: linear-gradient(135deg, #fbbf24, #d97706); }
        .stat-icon.danger { background: linear-gradient(135deg, #ef4444, #b91c1c); }
        .stat-icon.purple { background: linear-gradient(135deg, #a78bfa, #7c3aed); }

        .stat-body h3 { font-size: 32px; font-weight: 800; margin: 0; color: #0f172a;}
        .stat-body p { font-size: 11px; font-weight: 800; color: #64748b; margin: 6px 0 0 0; text-transform: uppercase; letter-spacing: 0.5px; }

        /* QUICK ACCESS MODULES GRID */
        .module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
        .module-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 15px; text-align: center; text-decoration: none; color: #0f172a; transition: 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.02); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;}
        .module-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(14, 165, 233, 0.15); border-color: #bae6fd; color: #0284c7; background: #f0f9ff;}
        .module-card i { font-size: 30px; color: #64748b; transition: 0.2s;}
        .module-card:hover i { color: #0284c7; }
        .module-card span { font-size: 13.5px; font-weight: 800; }

        /* Panels & Tables */
        .panel-container { background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.03); padding: 25px; margin-bottom: 30px;}
        .panel-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #f1f5f9; padding-bottom: 15px; margin-bottom: 20px; }
        .panel-header h6 { font-size: 14px; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: 0.5px; margin: 0;}

        table.custom-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
        table.custom-table thead th { background: #f8fafc; color: #475569; padding: 14px 20px; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #e2e8f0;}
        table.custom-table tbody td { padding: 16px 20px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
        table.custom-table tbody tr:hover { background: #f8fafc; }

        .chart-wrapper { position: relative; height: 320px; width: 100%; }
    </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-hospital-user text-primary me-2"></i> In-Patient Department (IPD) Overview
        </h3>
        <button class="btn btn-primary fw-bold px-4 shadow-sm" onclick="fetchDashboardData()"><i class="fa-solid fa-rotate me-2"></i> Refresh Data</button>
    </div>

    <!-- QUICK ACCESS MODULES GRID -->
    <h6 class="fw-bold text-muted small text-uppercase mb-3"><i class="fa-solid fa-grid-2 me-2"></i> Clinical Modules & Workflows</h6>
    <div class="module-grid">
        <a href="admissionManager.php" class="module-card">
            <i class="fa-solid fa-bed-pulse"></i>
            <span>Admission Manager</span>
        </a>
        <a href="dischargeManager.php" class="module-card">
            <i class="fa-solid fa-person-walking-arrow-right"></i>
            <span>Discharge Manager</span>
        </a>
        <a href="theatreManager.php" class="module-card">
            <i class="fa-solid fa-scalpel-line-dashed"></i>
            <span>Operating Theatre</span>
        </a>
        <a href="#" class="module-card">
            <i class="fa-solid fa-right-left"></i>
            <span>Ward Transfers</span>
        </a>
        <a href="#" class="module-card">
            <i class="fa-solid fa-user-nurse"></i>
            <span>Nursing Station</span>
        </a>
        <a href="wardTransferManager.php" class="module-card">
            <i class="fa-solid fa-clipboard-list"></i>
            <span>Ward Transfers</span>
        </a>
    </div>

    <!-- MAIN KPI STATS ROW (GRID) -->
    <div class="kpi-grid">
        <div class="stat-card">
            <div class="stat-icon primary"><i class="fa-solid fa-users-medical"></i></div>
            <div class="stat-body">
                <h3 id="kpi_active">0</h3>
                <p>Active Admitted Patients</p>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon success"><i class="fa-solid fa-bed"></i></div>
            <div class="stat-body">
                <h3 id="kpi_available">0 <span class="fs-6 text-muted fw-normal">/ <span id="kpi_total">0</span></span></h3>
                <p>Total Available Beds</p>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon warning"><i class="fa-solid fa-door-open"></i></div>
            <div class="stat-body">
                <h3 id="kpi_pending">0</h3>
                <p>Pending Discharges</p>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon purple"><i class="fa-solid fa-broom"></i></div>
            <div class="stat-body">
                <h3 id="kpi_housekeeping">0</h3>
                <p>Beds Awaiting Cleaning</p>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- WARD OCCUPANCY CHART -->
        <div class="col-xl-7">
            <div class="panel-container h-100">
                <div class="panel-header">
                    <h6><i class="fa-solid fa-chart-column text-primary me-2"></i> Ward Occupancy Analytics</h6>
                </div>
                <div class="chart-wrapper">
                    <canvas id="wardOccupancyChart"></canvas>
                </div>
            </div>
        </div>

        <!-- DAILY ACTIVITY METRICS -->
        <div class="col-xl-5">
            <div class="panel-container h-100" style="background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);">
                <div class="panel-header">
                    <h6><i class="fa-solid fa-calendar-day text-info me-2"></i> Today's Flow</h6>
                </div>
                <div class="d-flex flex-column gap-4 mt-4">
                    <div class="d-flex align-items-center justify-content-between p-4 bg-white border rounded-4 shadow-sm">
                        <div class="d-flex align-items-center gap-3">
                            <div class="p-3 bg-primary bg-opacity-10 text-primary rounded-circle"><i class="fa-solid fa-arrow-right-to-bracket fa-2x"></i></div>
                            <div>
                                <h4 class="fw-bold text-dark m-0" id="kpi_admitted_today">0</h4>
                                <span class="small fw-bold text-muted text-uppercase">Admitted Today</span>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between p-4 bg-white border rounded-4 shadow-sm">
                        <div class="d-flex align-items-center gap-3">
                            <div class="p-3 bg-success bg-opacity-10 text-success rounded-circle"><i class="fa-solid fa-arrow-right-from-bracket fa-2x"></i></div>
                            <div>
                                <h4 class="fw-bold text-dark m-0" id="kpi_discharged_today">0</h4>
                                <span class="small fw-bold text-muted text-uppercase">Discharged Today</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- RECENT ADMISSIONS TABLE -->
        <div class="col-12">
            <div class="panel-container">
                <div class="panel-header">
                    <h6><i class="fa-solid fa-clock-rotate-left text-secondary me-2"></i> Most Recent Admissions (Last 10)</h6>
                    <a href="admissionManager.php" class="btn btn-sm btn-light border fw-bold text-primary shadow-sm">View All IPD Records</a>
                </div>
                <div class="table-responsive">
                    <table class="custom-table" id="tblRecentAdmissions">
                        <thead>
                            <tr>
                                <th>Admission Date</th>
                                <th>Patient Identity</th>
                                <th>Ward / Bed Location</th>
                                <th>Attending Doctor</th>
                                <th>Status</th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr><td colspan="6" class="text-center text-muted py-4"><i class="fa fa-spinner fa-spin me-2"></i> Loading recent admissions...</td></tr>
                        </tbody>
                    </table>
                </div>
            </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.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="/rimax/application/assets/js/ipdDashboard.js"></script>

</body>
</html>