<?php
include 'auth.php';
include "db.php";

/* ===== BALANCE CALCULATIONS ===== */
function getBalance($conn, $condition) {
    $query = "
        SELECT COALESCE(SUM(
            CASE 
                WHEN type='CREDIT' THEN amount 
                ELSE -amount 
            END
        ),0) AS balance
        FROM transactions
        WHERE $condition
    ";
    $result = mysqli_query($conn, $query);
    $row = mysqli_fetch_assoc($result);
    return $row['balance'] ?? 0;
}

$cash     = getBalance($conn, "amount_type='CASH'");
$bank     = getBalance($conn, "amount_type='BANK'");
$customer = getBalance($conn, "reference_type='customer'");
$supplier = getBalance($conn, "reference_type='supplier'");

$total_customers_count = 0;
$cust_count_res = $conn->query("SELECT COUNT(id) as total FROM customers");
if($cust_count_res) { $total_customers_count = $cust_count_res->fetch_assoc()['total']; }

$total_suppliers_count = 0;
$supp_count_res = $conn->query("SELECT COUNT(id) as total FROM suppliers");
if($supp_count_res) { $total_suppliers_count = $supp_count_res->fetch_assoc()['total']; }

/* ===== NEW: DYNAMIC KPI DATA (replaces hardcoded values) ===== */

// Total products count
$total_products_count = 0;
$prod_res = $conn->query("SELECT COUNT(product_id) as total FROM products");
if($prod_res) { $total_products_count = $prod_res->fetch_assoc()['total']; }

// Total inventory stock quantity (sum of stock across all products)
$total_inventory_items = 0;
$inv_res = $conn->query("SELECT COALESCE(SUM(stock_quantity),0) as total FROM products");
if($inv_res) { $total_inventory_items = $inv_res->fetch_assoc()['total']; }

// Total expenses this month
$total_expenses = 0;
$exp_res = $conn->query("SELECT COALESCE(SUM(amount),0) as total FROM expense WHERE MONTH(date)=MONTH(CURDATE()) AND YEAR(date)=YEAR(CURDATE())");
if($exp_res) { $total_expenses = $exp_res->fetch_assoc()['total']; }

// Total transactions amount this month
$total_transactions = 0;
$trans_res = $conn->query("SELECT COALESCE(SUM(amount),0) as total FROM transactions WHERE MONTH(date)=MONTH(CURDATE()) AND YEAR(date)=YEAR(CURDATE())");
if($trans_res) { $total_transactions = $trans_res->fetch_assoc()['total']; }

// Inventory stock status counts (for donut chart) - based on products.stock_quantity
$in_stock = 0; $low_stock = 0; $out_stock = 0;
$stock_res = $conn->query("SELECT stock_quantity FROM products");
if($stock_res) {
    while($p = $stock_res->fetch_assoc()) {
        $q = (int)$p['stock_quantity'];
        if($q <= 0) { $out_stock++; }
        elseif($q <= 10) { $low_stock++; }
        else { $in_stock++; }
    }
}
$stock_total = $in_stock + $low_stock + $out_stock;
$in_stock_pct    = $stock_total > 0 ? round(($in_stock / $stock_total) * 100) : 0;
$low_stock_pct   = $stock_total > 0 ? round(($low_stock / $stock_total) * 100) : 0;
$out_stock_pct   = $stock_total > 0 ? round(($out_stock / $stock_total) * 100) : 0;

// Recent transactions (latest 5 sales, replaces hardcoded table row)
$recent_sales = [];
$rs = $conn->query("
    SELECT s.invoice_no, s.grand_total, s.payment_status, s.sale_date, c.name AS customer_name
    FROM sales s
    LEFT JOIN customers c ON s.customer_id = c.id
    ORDER BY s.sale_date DESC, s.id DESC
    LIMIT 5
");
if($rs) { while($row = $rs->fetch_assoc()) { $recent_sales[] = $row; } }

// Monthly sales totals - last 6 months (replaces hardcoded chart data)
$sales_chart_labels = [];
$sales_chart_data = [];
for ($i = 5; $i >= 0; $i--) {
    $month = date('Y-m', strtotime("-$i months"));
    $sales_chart_labels[] = date('M', strtotime("-$i months"));
    $sum_res = $conn->query("SELECT COALESCE(SUM(grand_total),0) as total FROM sales WHERE DATE_FORMAT(sale_date,'%Y-%m')='$month'");
    $sales_chart_data[] = $sum_res ? round($sum_res->fetch_assoc()['total'], 3) : 0;
}

// Monthly expense totals - last 6 months (replaces hardcoded chart data)
$expense_chart_labels = [];
$expense_chart_data = [];
for ($i = 5; $i >= 0; $i--) {
    $month = date('Y-m', strtotime("-$i months"));
    $expense_chart_labels[] = date('M', strtotime("-$i months"));
    $sum_res = $conn->query("SELECT COALESCE(SUM(amount),0) as total FROM expense WHERE DATE_FORMAT(date,'%Y-%m')='$month'");
    $expense_chart_data[] = $sum_res ? round($sum_res->fetch_assoc()['total'], 3) : 0;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Panel</title>

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #F8FAFC;
    font-family: 'Plus Jakarta Sans', sans-serif;
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
}

/* MAIN APP WRAPPER */
.app-layout-container {
    position: relative;
    width: 100vw;
    display: flex;
}

/* SIDEBAR DESKTOP VIEW */
.app-layout-container > aside, 
.app-layout-container > div:first-child {
    width: 260px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    transition: transform 0.3s ease;
}

/* CONTENT CANVAS */
.main-content {
    margin-left: 260px;
    width: calc(100vw - 260px);
    display: flex;
    flex-direction: column;
    background: #F8FAFC;
    transition: all 0.3s ease;
}

/* TOP HEADER */
.top-header {
    height: 70px;
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 999;
}

.hamburger-menu-trigger {
    display: none;
    font-size: 22px;
    background: transparent;
    border: none;
    color: #334155;
    cursor: pointer;
}

.header-brand-logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-brand-logo-area img {
    height: 40px;
}
.header-brand-logo-area .brand-txt {
    font-size: 14px;
    font-weight: 700;
    color: #0A1931;
    line-height: 1.2;
}

.search-bar {
    display: flex;
    align-items: center;
    background: #F1F5F9;
    padding: 8px 16px;
    border-radius: 8px;
    width: 300px;
}
.search-bar input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    width: 100%;
}

.header-right { display: flex; align-items: center; gap: 20px; }
.notification-bell-badge { position: relative; font-size: 22px; color: #64748B; cursor: pointer; }
.notification-bell-badge .badge-count { position: absolute; top: -2px; right: -4px; background: #FF3B30; color: #FFF; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 10px; }
.user-badge img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

/* CANVAS INTERNAL PADDING */
.inner-canvas {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.welcome-row { display: flex; justify-content: space-between; align-items: flex-start; }
.welcome-text h1 { font-size: 24px; color: #0F172A; font-weight: 700; }
.welcome-text p { font-size: 14px; color: #64748B; margin-top: 4px; }

.date-badge-container {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    padding: 10px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

/* TOP TWO-COLUMN BUTTON GRID */
.quick-action-header-btns { 
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.action-btn-quick {
    padding: 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #FFF;
    transition: all 0.2s;
}
.btn-orange-tint { border: 1px solid #FF6B00; color: #FF6B00; }
.btn-blue-tint { border: 1px solid #0A1931; color: #0A1931; }

/* 6 KPI Cards Layout */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.kpi-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 120px;
}
.kpi-header { display: flex; align-items: flex-start; gap: 12px; }
.kpi-icon-box { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.ki-blue { background: #E0F2FE; color: #0369A1; }
.ki-teal { background: #CCFBF1; color: #0F766E; }
.ki-orange { background: #FEF3C7; color: #D97706; }
.ki-green { background: #DCFCE7; color: #15803D; }
.ki-red { background: #FEE2E2; color: #B91C1C; }
.ki-purple { background: #F3E8FF; color: #7E22CE; }

.kpi-title-labels h3 { font-size: 12px; color: #64748B; font-weight: 500; margin-bottom: 4px; }
.kpi-title-labels p { font-size: 18px; color: #1E293B; font-weight: 700; }
.kpi-footer-metric { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #94A3B8; border-top: 1px solid #F1F5F9; padding-top: 8px; margin-top: 12px;}
.trend-indicator { font-weight: 600; }
.trend-up { color: #16A34A; }
.trend-down { color: #DC2626; }

/* MIDDLE CHARTS ROW - DESKTOP REMAINS SAME AS ASYMMETRIC PARTITIONS */
.graphs-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr;
    gap: 16px;
}
.graph-container-box {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 20px;
    flex-shrink: 0;
}
.gh-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.gh-meta h4 { font-size: 14px; color: #1E293B; font-weight: 600; }

.inventory-container-flex { display: flex; align-items: center; gap: 16px; }
.donut-chart-side { position: relative; width: 130px; height: 130px; flex-shrink: 0; }
.donut-center-numbers { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.donut-center-numbers h2 { font-size: 20px; font-weight: 700; color: #1E293B; }
.donut-center-numbers p { font-size: 11px; color: #64748B; }
.donut-legend-side { display: flex; flex-direction: column; gap: 12px; }
.legend-item-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }

/* BOTTOM DATA ROW - DESKTOP KEEPS BOTH COLUMNS SIDE BY SIDE */
.bottom-split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}
.table-panel, .actions-panel { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; padding: 20px; }
.table-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.table-header-flex h4 { font-size: 15px; font-weight: 700; color: #0F172A; }
.table-header-flex .view-all-link { font-size: 13px; font-weight: 600; color: #FF6B00; text-decoration: none; }

.table-responsive-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 500px; }
th, td { padding: 14px 12px; border-bottom: 1px solid #F1F5F9; text-align: left; }
th { color: #64748B; font-weight: 500; background: #F8FAFC; }
.status-capsule { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.sc-paid { background: #DCFCE7; color: #15803D; }
.sc-unpaid { background: #FEE2E2; color: #B91C1C; }

/* QUICK ACTIONS GRID FLOOR */
.actions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.action-tile-btn {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    gap: 10px;
    text-decoration: none;
}
.action-tile-btn i { font-size: 22px; color: #FF6B00; }
.action-tile-btn span { font-size: 12px; color: #334155; font-weight: 600; }

/* BACKDROP MASK FOR DRAWER */
.sidebar-overlay-backdrop {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1000;
}

/* ========================================================
   ðŸ‘‰ PERFECT MOBILE VIEW CONTROLS (DESKTOP REMAIN UNSCATHED)
   ======================================================== */
@media (max-width: 1024px) {
    .app-layout-container > aside, 
    .app-layout-container > div:first-child {
        transform: translateX(-100%);
    }
    .app-layout-container.sidebar-open > aside,
    .app-layout-container.sidebar-open > div:first-child {
        transform: translateX(0);
    }
    .sidebar-overlay-backdrop { display: block; }

    .main-content {
        margin-left: 0;
        width: 100%;
    }

    .hamburger-menu-trigger {
        display: block;
    }
    .search-bar {
        display: none;
    }

    .inner-canvas {
        padding: 16px;
        gap: 20px;
    }

    /* KPI Grid matching image layout pairs */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* ðŸŒŸ THREE GRAPHS IN ONE LINE ROW ON MOBILE VIEW */
    .graphs-row {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 16px;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    
    .graph-container-box {
        width: 290px !important; /* Forces uniform size inside mobile row line */
        scroll-snap-align: start;
    }

    /* HIDING RECENT TRANSACTIONS ONLY ON MOBILE VIEW */
    .table-panel {
        display: none !important;
    }

    /* COLLAPSING BOTTOM SPLIT TO SINGLE TAB COLUMN FOR ACTIONS */
    .bottom-split {
        grid-template-columns: 1fr !important;
    }

    /* Quick actions mobile container tiles layout grid */
    .actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
</style>
</head>
<body>

<div class="sidebar-overlay-backdrop" id="sidebarOverlayMask" style="display:none;"></div>

<div class="app-layout-container" id="appMainContainer">
    
    <!-- SIDEBAR DYNAMIC HOOK -->
    <?php include 'sidebar'; ?>

    <div class="main-content">
        <!-- TOPBAR ALIGNMENT -->
        <div class="top-header">
            <button class="hamburger-menu-trigger" id="sidebarOpenTrigger">
                <i class="fa-solid fa-bars"></i>
            </button>
            
            <div class="header-brand-logo-area">
                <div class="brand-txt"><b>TAMEER</b><br>AL MADINA</div>
            </div>

            <div class="search-bar"><input type="text" placeholder="Search anything..."></div>
            
            <div class="header-right">
                <div class="notification-bell-badge">
                    <i class="fa-regular fa-bell"></i>
                    <span class="badge-count">3</span>
                </div>
                <div class="user-badge">
                    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100" alt="Admin">
                </div>
            </div>
        </div>

        <!-- APP BODY CANVAS -->
        <div class="inner-canvas">
            <div class="welcome-row">
                <div class="welcome-text">
                    <h1>Welcome Back,  Admin</h1>
                    <p>Here's what's happening with your business today.</p>
                </div>
                <div class="date-badge-container">
                    <i class="fa-regular fa-calendar"></i>
                   <span><?php echo date('d M Y, D'); ?></span>
                </div>
            </div>

            <!-- TWO COLUMN TOP ACTION BUTTONS -->
            <div class="quick-action-header-btns">
                <a href="sales_add.php" class="action-btn-quick btn-orange-tint"><i class="fa-solid fa-cart-shopping"></i> + New Sale</a>
                <a href="add-purchase.php" class="action-btn-quick btn-blue-tint"><i class="fa-solid fa-cart-plus"></i> + New Purchase</a>
                <a href="customers_add.php" class="action-btn-quick btn-orange-tint"><i class="fa-solid fa-user-plus"></i> + Add Customer</a>
                <a href="suppliers_add.php" class="action-btn-quick btn-blue-tint"><i class="fa-solid fa-user-shield"></i> + Add Supplier</a>
            </div>

            <!-- KPI DATA CARDS -->
            <div class="kpi-grid">
    <a href="customers_view.php" class="kpi-card" style="text-decoration:none; color:inherit;">
        <div class="kpi-header">
            <div class="kpi-icon-box ki-blue"><i class="fa-solid fa-users"></i></div>
            <div class="kpi-title-labels"><h3>Customers</h3><p><?= $total_customers_count ?></p></div>
        </div>
        <div class="kpi-footer-metric"><span>Total Customers</span> <span class="trend-indicator trend-up">↑ 8%</span></div>
    </a>

    <a href="suppliers_view.php" class="kpi-card" style="text-decoration:none; color:inherit;">
        <div class="kpi-header">
            <div class="kpi-icon-box ki-teal"><i class="fa-solid fa-truck"></i></div>
            <div class="kpi-title-labels"><h3>Suppliers</h3><p><?= $total_suppliers_count ?></p></div>
        </div>
        <div class="kpi-footer-metric"><span>Total Suppliers</span> <span class="trend-indicator trend-up">↑ 6%</span></div>
    </a>

    <a href="inventory.php" class="kpi-card" style="text-decoration:none; color:inherit;">
        <div class="kpi-header">
            <div class="kpi-icon-box ki-orange"><i class="fa-solid fa-cubes"></i></div>
            <div class="kpi-title-labels"><h3>Inventory Items</h3><p><?= number_format($total_inventory_items) ?></p></div>
        </div>
        <div class="kpi-footer-metric"><span>Total Stock Qty</span></div>
    </a>

    <a href="transactions_view.php" class="kpi-card" style="text-decoration:none; color:inherit;">
        <div class="kpi-header">
            <div class="kpi-icon-box ki-green"><i class="fa-solid fa-chart-line"></i></div>
            <div class="kpi-title-labels"><h3>Transactions</h3><p>OMR <?= number_format($total_transactions, 3); ?></p></div>
        </div>
        <div class="kpi-footer-metric"><span>This Month</span></div>
    </a>

    <a href="expense_view.php" class="kpi-card" style="text-decoration:none; color:inherit;">
        <div class="kpi-header">
            <div class="kpi-icon-box ki-red"><i class="fa-solid fa-wallet"></i></div>
            <div class="kpi-title-labels"><h3>Expenses</h3><p>OMR <?= number_format($total_expenses, 3); ?></p></div>
        </div>
        <div class="kpi-footer-metric"><span>This Month</span></div>
    </a>

    <a href="product_view.php" class="kpi-card" style="text-decoration:none; color:inherit;">
        <div class="kpi-header">
            <div class="kpi-icon-box ki-purple"><i class="fa-solid fa-building-columns"></i></div>
            <div class="kpi-title-labels"><h3>Products</h3><p><?= number_format($total_products_count) ?></p></div>
        </div>
        <div class="kpi-footer-metric"><span>Total Products</span></div>
    </a>
</div>

            <!-- ANALYTICS PLOTS -->
            <div class="graphs-row">
                <div class="graph-container-box">
                    <div class="gh-meta"><h4>Monthly Sales</h4></div>
                    <div style="height:180px;"><canvas id="salesLineChart"></canvas></div>
                </div>
                <div class="graph-container-box">
                    <div class="gh-meta"><h4>Expense Overview</h4></div>
                    <div style="height:180px;"><canvas id="expenseBarChart"></canvas></div>
                </div>
                <div class="graph-container-box">
                    <div class="gh-meta"><h4>Inventory Status</h4></div>
                    <div class="inventory-container-flex">
                        <div class="donut-chart-side">
                            <canvas id="inventoryDonutChart"></canvas>
                            <div class="donut-center-numbers"><h2><?= $stock_total ?></h2><p>Items</p></div>
                        </div>
                        <div class="donut-legend-side">
                            <div class="legend-item-row"><div class="legend-dot" style="background:#0284C7;"></div><span>In Stock (<?= $in_stock_pct ?>%)</span></div>
                            <div class="legend-item-row"><div class="legend-dot" style="background:#F59E0B;"></div><span>Low Stock (<?= $low_stock_pct ?>%)</span></div>
                            <div class="legend-item-row"><div class="legend-dot" style="background:#EF4444;"></div><span>Out of Stock (<?= $out_stock_pct ?>%)</span></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SPLIT BOTTOM DATA CARDS -->
            <div class="bottom-split">
                <!-- Recent Transactions Panel (Visible on desktop, perfectly responsive/hidden on mobile view) -->
                <div class="table-panel">
                    <div class="table-header-flex">
                        <h4>Recent Transactions</h4>
                        <a href="transactions_view.php" class="view-all-link">View All</a>
                    </div>
                    <div class="table-responsive-wrapper">
                        <table>
                            <thead>
                                <tr><th>Date</th><th>Invoice No.</th><th>Customer</th><th>Amount</th><th>Status</th></tr>
                            </thead>
                            <tbody>
                                <?php if (count($recent_sales) > 0): ?>
                                    <?php foreach ($recent_sales as $sale): ?>
                                        <tr>
                                            <td><?= date('d M', strtotime($sale['sale_date'])) ?></td>
                                            <td><?= htmlspecialchars($sale['invoice_no']) ?></td>
                                            <td><?= htmlspecialchars($sale['customer_name'] ?? 'N/A') ?></td>
                                            <td><b>OMR <?= number_format($sale['grand_total'], 3) ?></b></td>
                                            <td>
                                                <?php $status = strtolower($sale['payment_status']); ?>
                                                <span class="status-capsule <?= $status === 'paid' ? 'sc-paid' : 'sc-unpaid' ?>">
                                                    <?= htmlspecialchars($sale['payment_status']) ?>
                                                </span>
                                            </td>
                                        </tr>
                                    <?php endforeach; ?>
                                <?php else: ?>
                                    <tr><td colspan="5" style="text-align:center; color:#94A3B8;">No recent transactions</td></tr>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- QUICK ACTIONS SINGLE CARD CONSOLIDATED TAB BLOCK -->
                <div class="actions-panel">
                    <div class="table-header-flex"><h4>Quick Actions</h4></div>
                    <div class="actions-grid">
                        <a href="sales_add.php" class="action-tile-btn"><i class="fa-solid fa-cart-plus"></i><span>New Sale</span></a>
                        <a href="add-purchase.php" class="action-tile-btn"><i class="fa-solid fa-bag-shopping"></i><span>New Purchase</span></a>
                        <a href="customers_add.php" class="action-tile-btn"><i class="fa-solid fa-user-plus"></i><span>Add Customer</span></a>
                        <a href="suppliers_add.php" class="action-tile-btn"><i class="fa-solid fa-user-gear"></i><span>Add Supplier</span></a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
// MOBILE SIDEBAR HAMBURGER INTERACTION INTERFACES
const sidebarOpenTrigger = document.getElementById('sidebarOpenTrigger');
const sidebarOverlayMask = document.getElementById('sidebarOverlayMask');
const appMainContainer = document.getElementById('appMainContainer');

if(sidebarOpenTrigger) {
    sidebarOpenTrigger.addEventListener('click', () => {
        appMainContainer.classList.add('sidebar-open');
        sidebarOverlayMask.style.display = 'block';
    });
}

if(sidebarOverlayMask) {
    sidebarOverlayMask.addEventListener('click', () => {
        appMainContainer.classList.remove('sidebar-open');
        sidebarOverlayMask.style.display = 'none';
    });
}

// GRAPH RENDER LOGICS - now fed with real database values
new Chart(document.getElementById('salesLineChart'), {
    type: 'line',
    data: {
        labels: <?= json_encode($sales_chart_labels) ?>,
        datasets: [{ data: <?= json_encode($sales_chart_data) ?>, borderColor: '#FF6B00', fill: false, tension: 0.4 }]
    },
    options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
});

new Chart(document.getElementById('expenseBarChart'), {
    type: 'bar',
    data: {
        labels: <?= json_encode($expense_chart_labels) ?>,
        datasets: [{ data: <?= json_encode($expense_chart_data) ?>, backgroundColor: '#EF4444' }]
    },
    options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
});

new Chart(document.getElementById('inventoryDonutChart'), {
    type: 'doughnut',
    data: {
        datasets: [{ data: [<?= $in_stock ?>, <?= $low_stock ?>, <?= $out_stock ?>], backgroundColor: ['#0284C7', '#F59E0B', '#EF4444'], borderWidth: 0 }]
    },
    options: { responsive: true, maintainAspectRatio: false, cutout: '80%', plugins: { legend: { display: false } } }
});
</script>
</body>
</html>