<?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>Pharmacy 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">
    
    <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; } }

        .dashboard-header { background: #0284c7; color: #fff; padding: 20px 30px; border-radius: 16px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; box-shadow: 0 10px 25px rgba(2, 132, 199, 0.2);}
        .dashboard-header h4 { margin: 0; font-weight: 800; font-size: 22px; letter-spacing: -0.5px;}

        .kpi-filter-bar { background: #fff; padding: 20px 25px; border-radius: 16px; margin-bottom: 25px; display: flex; gap: 15px; align-items: center; 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; width: 100%;}
        .input-control:focus { border-color: #0284c7; box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15); background:#fff;}

        .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px;}
        .kpi-card { background: #fff; border-radius: 16px; padding: 25px; border: 1px solid #e2e8f0; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: 0.3s;}
        .kpi-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
        .kpi-card h2 { font-size: 34px; font-weight: 900; color: #0f172a; margin: 0 0 5px 0;}
        .kpi-card p { font-size: 13px; font-weight: 700; color: #64748b; margin: 0;}
        .kpi-icon { position: absolute; right: 25px; top: 30px; font-size: 30px; color: #e2e8f0; transition: 0.3s;}
        .kpi-card:hover .kpi-icon { color: #0284c7; transform: scale(1.1);}

        .menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 35px;}
        .menu-btn { background: #fff; color: #0f172a; border-radius: 12px; padding: 25px 15px; text-align: center; cursor: pointer; transition: 0.3s; border: 1px solid #e2e8f0; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.02);}
        .menu-btn:hover { background: #0284c7; border-color: #0284c7; transform: translateY(-4px); box-shadow: 0 12px 25px rgba(2, 132, 199, 0.2); color: #fff;}
        .menu-btn i { font-size: 28px; color: #0ea5e9; transition: 0.3s;}
        .menu-btn:hover i { color: #fff; }
        .menu-btn span { font-weight: 800; font-size: 13px; }

        .report-section { background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
        .report-link { display: flex; align-items: center; gap: 15px; padding: 15px 20px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; text-decoration: none; color: #334155; transition: 0.2s; font-weight: 700; margin-bottom: 10px;}
        .report-link:hover { background: #e0f2fe; color: #0284c7; border-color: #bae6fd;}
        .report-link i { font-size: 20px; color: #0ea5e9; }
    </style>
</head>
<body>

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

<div class="main-content-wrapper">
    <div class="dashboard-header">
        <h4><i class="fa-solid fa-pills me-2 opacity-75"></i> Pharmacy & Dispensary Dashboard</h4>
        <div><i class="fa-solid fa-user-circle fs-4 me-3"></i> <i class="fa-solid fa-right-from-bracket fs-4"></i></div>
    </div>

    <!-- DUAL DATE & LOCATION FILTERS -->
    <div class="kpi-filter-bar row g-3 m-0">
        <div class="col-md-4 p-0">
            <label class="small fw-bold text-muted mb-1 text-uppercase">Dispensary Location</label>
            <select id="dispensary_filter" class="input-control text-primary w-100"></select>
        </div>
        <div class="col-md-3 p-0 ms-3">
            <label class="small fw-bold text-muted mb-1 text-uppercase">Date From</label>
            <input type="date" id="flt_start" class="input-control w-100">
        </div>
        <div class="col-md-3 p-0 ms-3">
            <label class="small fw-bold text-muted mb-1 text-uppercase">Date To</label>
            <input type="date" id="flt_end" class="input-control w-100">
        </div>
        <div class="col-md-1 p-0 ms-3 d-flex align-items-end">
            <button class="btn btn-primary fw-bold w-100" style="height:46px; border-radius:10px;" onclick="fetchKPIs()"><i class="fa-solid fa-filter"></i></button>
        </div>
    </div>

    <!-- KPI GRID -->
    <div class="kpi-grid">
        <div class="kpi-card" style="border-top: 4px solid #10b981;">
            <h2 id="kpi_dispensed_count">0</h2>
            <p>Total Drugs Dispensed</p>
            <i class="fa-solid fa-prescription-bottle-medical kpi-icon"></i>
        </div>
        <div class="kpi-card" style="border-top: 4px solid #0ea5e9;">
            <h2 id="kpi_pending_rx">0</h2>
            <p>Pending Clinical Requests</p>
            <i class="fa-solid fa-clipboard-list kpi-icon"></i>
        </div>
        <div class="kpi-card" style="border-top: 4px solid #ef4444;">
            <h2 id="kpi_low_stock">0</h2>
            <p>Low Stock Items</p>
            <i class="fa-solid fa-boxes-stacked kpi-icon text-danger"></i>
        </div>
        <div class="kpi-card" style="border-top: 4px solid #f59e0b;">
            <h2 id="kpi_returns_today">0</h2>
            <p>Returns Processed</p>
            <i class="fa-solid fa-rotate-left kpi-icon"></i>
        </div>
    </div>

    <!-- MENU GRID -->
    <div class="menu-grid">
        <a href="pendingDrugDispense.php" class="menu-btn"><i class="fa-solid fa-pills"></i><span>Clinical Prescriptions</span></a>
        <a href="directCashDrugDispense.php" class="menu-btn"><i class="fa-solid fa-capsules"></i><span>Issue Drug (Direct)</span></a>
        <a href="dispensaryRequisition.php" class="menu-btn"><i class="fa-solid fa-truck-ramp-box"></i><span>Request Store Restock</span></a>
        <a href="dispensedHistory.php" class="menu-btn"><i class="fa-solid fa-file-invoice"></i><span>Dispensed History</span></a>
    </div>

    <!-- REPORTS SECTION -->
    <div class="report-section">
        <h5 class="fw-bold text-dark mb-4"><i class="fa-solid fa-chart-pie text-primary me-2"></i> Pharmacy Analytics & Reports</h5>
        <div class="row g-3">
            <div class="col-md-4"><a href="#" class="report-link"><i class="fa-solid fa-chart-bar"></i> Dispensed Drug Count Report</a></div>
            <div class="col-md-4"><a href="#" class="report-link"><i class="fa-solid fa-sack-dollar"></i> Pharmacy Revenue Report</a></div>
            <div class="col-md-4"><a href="#" class="report-link"><i class="fa-solid fa-bed"></i> Dispensed - Ward vs OPD Report</a></div>
            <div class="col-md-4"><a href="#" class="report-link"><i class="fa-solid fa-triangle-exclamation text-danger"></i> Emergency Prescription Listing</a></div>
            <div class="col-md-4"><a href="#" class="report-link"><i class="fa-solid fa-calendar-check"></i> Monthly Medicine Report</a></div>
            <div class="col-md-4"><a href="#" class="report-link"><i class="fa-solid fa-boxes-stacked text-warning"></i> Undischarged Patient Medicines</a></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="/rimax/application/assets/js/drugDispensary.js"></script>

</body>
</html>