PNG  IHDR pHYs   OiCCPPhotoshop ICC profilexڝSgTS=BKKoR RB&*! J!QEEȠQ, !{kּ> H3Q5 B.@ $pd!s#~<<+"x M0B\t8K@zB@F&S`cbP-`'{[! eDh;VEX0fK9-0IWfH  0Q){`##xFW<+*x<$9E[-qWW.(I+6aa@.y24x6_-"bbϫp@t~,/;m%h^ uf@Wp~<5j>{-]cK'Xto(hw?G%fIq^D$.Tʳ?D*A, `6B$BB dr`)B(Ͱ*`/@4Qhp.U=pa( Aa!ڈbX#!H$ ɈQ"K5H1RT UH=r9\F;2G1Q= C7F dt1r=6Ыhڏ>C03l0.B8, c˱" VcϱwE 6wB aAHXLXNH $4 7 Q'"K&b21XH,#/{C7$C2'ITFnR#,4H#dk9, +ȅ3![ b@qS(RjJ4e2AURݨT5ZBRQ4u9̓IKhhitݕNWGw Ljg(gwLӋT071oUX**| J&*/Tު UUT^S}FU3S ԖUPSSg;goT?~YYLOCQ_ cx,!k u5&|v*=9C3J3WRf?qtN (~))4L1e\kXHQG6EYAJ'\'GgSSݧ M=:.kDwn^Loy}/TmG X $ <5qo</QC]@Caaᄑ.ȽJtq]zۯ6iܟ4)Y3sCQ? 0k߬~OCOg#/c/Wװwa>>r><72Y_7ȷOo_C#dz%gA[z|!?:eAAA!h쐭!ΑiP~aa~ 'W?pX15wCsDDDޛg1O9-J5*>.j<74?.fYXXIlK9.*6nl {/]py.,:@LN8A*%w% yg"/6шC\*NH*Mz쑼5y$3,幄'L Lݛ:v m2=:1qB!Mggfvˬen/kY- BTZ(*geWf͉9+̳ې7ᒶKW-X潬j9(xoʿܔĹdff-[n ڴ VE/(ۻCɾUUMfeI?m]Nmq#׹=TR+Gw- 6 U#pDy  :v{vg/jBFS[b[O>zG499?rCd&ˮ/~јѡ򗓿m|x31^VwwO| (hSЧc3- cHRMz%u0`:o_F@8N ' p @8N@8}' p '#@8N@8N pQ9p!i~}|6-ӪG` VP.@*j>[ K^<֐Z]@8N'KQ<Q(`s" 'hgpKB`R@Dqj '  'P$a ( `D$Na L?u80e J,K˷NI'0eݷ(NI'؀ 2ipIIKp`:O'`ʤxB8Ѥx Ѥx $ $P6 :vRNb 'p,>NB 'P]-->P T+*^h& p '‰a ‰ (ĵt#u33;Nt̵'ޯ; [3W ~]0KH1q@8]O2]3*̧7# *p>us p _6]/}-4|t'|Smx= DoʾM×M_8!)6lq':l7!|4} '\ne t!=hnLn (~Dn\+‰_4k)0e@OhZ`F `.m1} 'vp{F`ON7Srx 'D˸nV`><;yMx!IS钦OM)Ե٥x 'DSD6bS8!" ODz#R >S8!7ّxEh0m$MIPHi$IvS8IN$I p$O8I,sk&I)$IN$Hi$I^Ah.p$MIN$IR8I·N "IF9Ah0m$MIN$IR8IN$I 3jIU;kO$ɳN$+ q.x* tEXtComment

Viewing File: /home/u456810272/domains/agrifood.cloud/public_html/8dashboard.php

<?php
session_start();
if (!isset($_SESSION['user_id'])) {
    header('Location: index.html');
    exit;
}
// Generate random primary & secondary colors for the dashboard theme
$primaryColor = sprintf('#%06X', mt_rand(0, 0xFFFFFF));
$secondaryColor = sprintf('#%06X', mt_rand(0, 0xFFFFFF));
$gradient = "linear-gradient(135deg, {$primaryColor}, {$secondaryColor})";
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AGRI-Food Admin Dashboard</title>
    <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>
        :root {
            --primary: <?php echo $primaryColor; ?>;
            --secondary: <?php echo $secondaryColor; ?>;
            --gradient: <?php echo $gradient; ?>;
            --bg-dark: #0f172a;
            --bg-light: #f1f5f9;
            --card-bg: #ffffff;
            --text-dark: #1e293b;
            --text-light: #94a3b8;
            --shadow: 0 4px 20px rgba(0,0,0,0.06);
            --radius: 16px;
            --sidebar-width: 260px;
            --header-height: 70px;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: var(--bg-light);
            color: var(--text-dark);
            transition: background 0.3s, color 0.3s;
            overflow-x: hidden;
        }
        body.dark {
            --bg-light: #0f172a;
            --bg-dark: #0f172a;
            --card-bg: #1e293b;
            --text-dark: #e2e8f0;
            --text-light: #94a3b8;
            --shadow: 0 4px 20px rgba(0,0,0,0.4);
        }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }

        /* Layout */
        .dashboard-wrapper { display: flex; min-height: 100vh; }
        
        /* Sidebar */
        .sidebar {
            width: var(--sidebar-width);
            background: var(--card-bg);
            box-shadow: var(--shadow);
            padding: 20px 0;
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0; left: 0; bottom: 0;
            z-index: 1000;
            transition: transform 0.3s;
            overflow-y: auto;
        }
        .sidebar .logo {
            font-size: 1.5rem;
            font-weight: 800;
            padding: 0 24px 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--primary);
            border-bottom: 1px solid #e2e8f0;
        }
        .sidebar .logo i { color: var(--primary); }
        .sidebar .nav-links { padding: 20px 12px; flex: 1; }
        .sidebar .nav-links li { margin-bottom: 4px; }
        .sidebar .nav-links a {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 16px;
            border-radius: 12px;
            font-weight: 500;
            transition: all 0.2s;
            color: var(--text-light);
        }
        .sidebar .nav-links a i { width: 20px; text-align: center; }
        .sidebar .nav-links a:hover, .sidebar .nav-links a.active {
            background: var(--gradient);
            color: #fff;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            transform: translateX(4px);
        }
        .sidebar .logout-btn {
            padding: 16px 24px;
            border-top: 1px solid #e2e8f0;
            color: #e53e3e;
            font-weight: 600;
            cursor: pointer;
            transition: 0.2s;
        }
        .sidebar .logout-btn:hover { background: #fee2e2; }

        /* Main Content */
        .main-content {
            margin-left: var(--sidebar-width);
            flex: 1;
            padding: 20px 30px;
            min-height: 100vh;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 20px;
            border-bottom: 1px solid #e2e8f0;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 15px;
        }
        .header h2 { font-size: 1.6rem; font-weight: 700; }
        .header-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .header-actions button, .header-actions .btn {
            background: var(--gradient);
            color: #fff;
            border: none;
            padding: 8px 20px;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.2s;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .header-actions button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
        .dark-toggle {
            background: var(--card-bg);
            border: 1px solid #e2e8f0;
            border-radius: 50%;
            width: 40px; height: 40px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            transition: 0.2s;
        }
        .dark-toggle:hover { background: #e2e8f0; }

        /* Sections */
        .section-content { display: none; animation: fadeUp 0.3s ease; }
        .section-content.active { display: block; }
        @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Cards */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .stat-card {
            background: var(--card-bg);
            padding: 24px;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            transition: 0.3s;
        }
        .stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
        .stat-card .icon {
            width: 50px; height: 50px;
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            background: var(--gradient);
            color: #fff;
            font-size: 1.4rem;
            margin-bottom: 15px;
        }
        .stat-card h3 { font-size: 2rem; font-weight: 700; margin-bottom: 5px; }
        .stat-card p { color: var(--text-light); font-weight: 500; }

        /* Tables */
        .card-table {
            background: var(--card-bg);
            border-radius: var(--radius);
            padding: 20px;
            box-shadow: var(--shadow);
            overflow-x: auto;
        }
        .card-table h4 { margin-bottom: 15px; font-size: 1.1rem; }
        .card-table table { width: 100%; border-collapse: collapse; }
        .card-table th, .card-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #e2e8f0; }
        .card-table th { background: #f8fafc; font-weight: 600; color: var(--text-light); }
        .card-table tr:hover { background: #f8fafc; }
        .badge {
            padding: 4px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: 600;
        }
        .badge.active { background: #dcfce7; color: #16a34a; }
        .badge.pending { background: #fef9c3; color: #ca8a04; }
        .badge.expired { background: #fee2e2; color: #dc2626; }

        /* Forms & Modals */
        .modal-overlay {
            display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
            backdrop-filter: blur(4px); z-index: 9999;
            align-items: center; justify-content: center;
        }
        .modal-overlay.show { display: flex; }
        .modal-box {
            background: var(--card-bg);
            border-radius: var(--radius);
            padding: 30px;
            max-width: 500px; width: 95%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            transform: scale(0.95);
            transition: 0.3s;
        }
        .modal-overlay.show .modal-box { transform: scale(1); }
        .modal-box .close-modal {
            float: right; font-size: 1.6rem; cursor: pointer; color: var(--text-light);
        }
        .modal-box h3 { margin-bottom: 20px; font-size: 1.3rem; }
        .modal-box .form-group { margin-bottom: 16px; }
        .modal-box .form-group label { display: block; font-weight: 500; margin-bottom: 6px; }
        .modal-box .form-group input, .modal-box .form-group select {
            width: 100%; padding: 10px 14px; border: 1px solid #e2e8f0;
            border-radius: 8px; background: var(--bg-light); color: var(--text-dark);
        }
        .modal-box .form-group input:focus { outline: 2px solid var(--primary); }
        .modal-box .btn-primary {
            background: var(--gradient); color: #fff; border: none;
            padding: 10px 24px; border-radius: 8px; font-weight: 600; cursor: pointer;
        }

        /* Ticker */
        .ticker-wrap {
            background: var(--card-bg);
            padding: 10px 20px;
            border-radius: var(--radius);
            margin-bottom: 20px;
            box-shadow: var(--shadow);
            overflow: hidden;
            white-space: nowrap;
        }
        .ticker {
            display: inline-block;
            animation: tickerScroll 20s linear infinite;
        }
        @keyframes tickerScroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
        .ticker span { margin-right: 40px; color: var(--text-light); }

        /* Mobile */
        .hamburger { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; }
        @media (max-width: 768px) {
            .sidebar { transform: translateX(-100%); }
            .sidebar.open { transform: translateX(0); }
            .main-content { margin-left: 0; padding: 15px; }
            .hamburger { display: block; }
            .stats-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } }

        /* Utilities */
        .flex { display: flex; gap: 10px; align-items: center; }
        .flex-between { display: flex; justify-content: space-between; align-items: center; }
        .mt-20 { margin-top: 20px; }
        .text-center { text-align: center; }
        .search-input { padding: 8px 16px; border: 1px solid #e2e8f0; border-radius: 50px; background: var(--bg-light); width: 200px; }
    </style>
</head>
<body>
    <div class="dashboard-wrapper">
        <!-- Sidebar -->
        <aside class="sidebar" id="sidebar">
            <div class="logo">
                <i class="fas fa-seedling"></i> AGRI-Food
            </div>
            <ul class="nav-links">
                <li><a href="#" class="active" onclick="showSection('dashboard', this)"><i class="fas fa-chart-pie"></i> Dashboard</a></li>
                <li><a href="#" onclick="showSection('frontend', this)"><i class="fas fa-globe"></i> FrontEnd</a></li>
                <li><a href="#" onclick="showSection('products', this)"><i class="fas fa-box"></i> Products</a></li>
                <li><a href="#" onclick="showSection('members', this)"><i class="fas fa-users"></i> Members</a></li>
                <li><a href="#" onclick="showSection('subscriptions', this)"><i class="fas fa-credit-card"></i> Subscriptions</a></li>
                <li><a href="#" onclick="showSection('payment-gateway', this)"><i class="fas fa-coins"></i> Payment Gateway</a></li>
                <li><a href="#" onclick="showSection('seo-settings', this)"><i class="fas fa-search"></i> SEO Settings</a></li>
                <li><a href="#" onclick="showSection('language', this)"><i class="fas fa-language"></i> Language</a></li>
                <li><a href="#" onclick="showSection('smtp', this)"><i class="fas fa-envelope"></i> SMTP</a></li>
                <li><a href="#" onclick="showSection('general', this)"><i class="fas fa-cog"></i> General</a></li>
                <li><a href="#" onclick="showSection('security', this)"><i class="fas fa-shield-alt"></i> Security</a></li>
                <li><a href="#" onclick="showSection('market-trends', this)"><i class="fas fa-chart-line"></i> Market Trends</a></li>
                <li><a href="#" onclick="showSection('analytics', this)"><i class="fas fa-database"></i> Analytics</a></li>
            </ul>
            <div class="logout-btn" onclick="window.location.href='api.php?action=logout'">
                <i class="fas fa-sign-out-alt"></i> Logout
            </div>
        </aside>

        <!-- Main -->
        <main class="main-content">
            <!-- Header -->
            <header class="header">
                <div>
                    <button class="hamburger" onclick="document.getElementById('sidebar').classList.toggle('open')">
                        <i class="fas fa-bars"></i>
                    </button>
                    <h2 id="pageTitle">Dashboard</h2>
                </div>
                <div class="header-actions">
                    <button class="dark-toggle" onclick="document.body.classList.toggle('dark')">
                        <i class="fas fa-moon"></i>
                    </button>
                    <button onclick="window.location.href='index.html'"><i class="fas fa-external-link-alt"></i> View Site</button>
                </div>
            </header>

            <!-- Ticker -->
            <div class="ticker-wrap">
                <div class="ticker">
                    <span>📈 Wheat prices up 2.3%</span>
                    <span>🌾 Corn futures steady</span>
                    <span>🥛 Dairy exports rise</span>
                    <span>🐟 Seafood demand surges</span>
                    <span>🌱 Organic grain premium widens</span>
                </div>
            </div>

            <!-- ========== DASHBOARD ========== -->
            <div id="dashboard" class="section-content active">
                <div class="stats-grid" id="statsGrid">
                    <div class="stat-card"><div class="icon"><i class="fas fa-box"></i></div><h3 id="statProducts">0</h3><p>Total Products</p></div>
                    <div class="stat-card"><div class="icon"><i class="fas fa-users"></i></div><h3 id="statMembers">0</h3><p>Total Members</p></div>
                    <div class="stat-card"><div class="icon"><i class="fas fa-credit-card"></i></div><h3 id="statSubs">0</h3><p>Active Subs</p></div>
                    <div class="stat-card"><div class="icon"><i class="fas fa-dollar-sign"></i></div><h3 id="statRevenue">$0</h3><p>Total Revenue</p></div>
                </div>
                <div class="card-table">
                    <h4>Recent Activity</h4>
                    <table>
                        <thead><tr><th>User</th><th>Action</th><th>Date</th></tr></thead>
                        <tbody>
                            <tr><td>John Doe</td><td>Subscribed to Premium</td><td>2 min ago</td></tr>
                            <tr><td>Jane Smith</td><td>Updated product price</td><td>15 min ago</td></tr>
                            <tr><td>Mike Ross</td><td>Added new member</td><td>1 hour ago</td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="card-table mt-20">
                    <h4>Revenue Overview</h4>
                    <canvas id="revenueChart" height="100"></canvas>
                </div>
            </div>

            <!-- ========== FRONTEND ========== -->
            <div id="frontend" class="section-content">
                <h3>Frontend Management</h3>
                <p>Click the button below to visit the live site.</p>
                <button class="btn-primary" onclick="window.open('index.html', '_blank')">Open Frontend</button>
            </div>

            <!-- ========== PRODUCTS ========== -->
            <div id="products" class="section-content">
                <div class="flex-between"><h3>Products</h3><button class="btn-primary" onclick="openModal('productModal')">+ Add Product</button></div>
                <div class="flex mt-20"><input class="search-input" placeholder="Search products..." id="productSearch" onkeyup="filterTable('productTable')"></div>
                <div class="card-table mt-20">
                    <table id="productTable"><thead><tr><th>ID</th><th>Name</th><th>Price</th><th>Status</th><th>Actions</th></tr></thead><tbody id="productBody"></tbody></table>
                    <div class="flex-between mt-20"><span id="productCount">0 items</span><div class="flex"><button class="btn-primary" onclick="exportCSV('productTable')">Export CSV</button></div></div>
                </div>
            </div>

            <!-- ========== MEMBERS ========== -->
            <div id="members" class="section-content">
                <div class="flex-between"><h3>Members</h3><button class="btn-primary" onclick="openModal('memberModal')">+ Add Member</button></div>
                <div class="flex mt-20"><input class="search-input" placeholder="Search members..." id="memberSearch" onkeyup="filterTable('memberTable')"></div>
                <div class="card-table mt-20">
                    <table id="memberTable"><thead><tr><th>ID</th><th>Name</th><th>Email</th><th>Phone</th><th>Actions</th></tr></thead><tbody id="memberBody"></tbody></table>
                    <div class="flex-between mt-20"><span id="memberCount">0 items</span><div class="flex"><button class="btn-primary" onclick="exportCSV('memberTable')">Export CSV</button></div></div>
                </div>
            </div>

            <!-- ========== SUBSCRIPTIONS ========== -->
            <div id="subscriptions" class="section-content">
                <div class="flex-between"><h3>Subscriptions</h3><button class="btn-primary" onclick="openModal('subModal')">+ Add Subscription</button></div>
                <div class="card-table mt-20">
                    <table id="subTable"><thead><tr><th>ID</th><th>Member</th><th>Plan</th><th>Status</th><th>Actions</th></tr></thead><tbody id="subBody"></tbody></table>
                </div>
            </div>

            <!-- ========== PAYMENT GATEWAY ========== -->
            <div id="payment-gateway" class="section-content">
                <h3>Payment Gateway Settings</h3>
                <div class="card-table">
                    <form id="paymentForm">
                        <div class="form-group"><label>Gateway Name</label><input value="Stripe"></div>
                        <div class="form-group"><label>API Key (Public)</label><input value="pk_test_..."></div>
                        <div class="form-group"><label>API Key (Secret)</label><input type="password" value="sk_test_..."></div>
                        <button type="submit" class="btn-primary">Save</button>
                    </form>
                </div>
            </div>

            <!-- ========== SEO SETTINGS ========== -->
            <div id="seo-settings" class="section-content">
                <h3>SEO Settings</h3>
                <div class="card-table">
                    <form id="seoForm">
                        <div class="form-group"><label>Meta Title</label><input value="AGRI-Food - Market Intelligence"></div>
                        <div class="form-group"><label>Meta Description</label><input value="Global agrifood data and analytics"></div>
                        <div class="form-group"><label>Keywords</label><input value="agriculture, food, market, data"></div>
                        <button type="submit" class="btn-primary">Save</button>
                    </form>
                </div>
            </div>

            <!-- ========== LANGUAGE ========== -->
            <div id="language" class="section-content">
                <h3>Language Settings</h3>
                <div class="card-table">
                    <form>
                        <div class="form-group"><label>Default Language</label><select><option>English</option><option>Spanish</option><option>French</option></select></div>
                        <button class="btn-primary">Update</button>
                    </form>
                </div>
            </div>

            <!-- ========== SMTP ========== -->
            <div id="smtp" class="section-content">
                <h3>SMTP Configuration</h3>
                <div class="card-table">
                    <form>
                        <div class="form-group"><label>Host</label><input value="smtp.gmail.com"></div>
                        <div class="form-group"><label>Port</label><input value="587"></div>
                        <div class="form-group"><label>Username</label><input value="admin@agrifood.cloud"></div>
                        <div class="form-group"><label>Password</label><input type="password" value="******"></div>
                        <button class="btn-primary">Save</button>
                    </form>
                </div>
            </div>

            <!-- ========== GENERAL ========== -->
            <div id="general" class="section-content">
                <h3>General Settings</h3>
                <div class="card-table">
                    <form>
                        <div class="form-group"><label>Site Name</label><input value="AGRI-Food"></div>
                        <div class="form-group"><label>Currency</label><input value="USD"></div>
                        <div class="form-group"><label>Timezone</label><select><option>UTC</option><option>EST</option><option>PST</option></select></div>
                        <button class="btn-primary">Save</button>
                    </form>
                </div>
            </div>

            <!-- ========== SECURITY ========== -->
            <div id="security" class="section-content">
                <h3>Security Settings</h3>
                <div class="card-table">
                    <form>
                        <div class="form-group"><label>Current Password</label><input type="password"></div>
                        <div class="form-group"><label>New Password</label><input type="password"></div>
                        <div class="form-group"><label>Confirm Password</label><input type="password"></div>
                        <div class="form-group"><label>2FA Status</label><select><option>Enabled</option><option>Disabled</option></select></div>
                        <button class="btn-primary">Update</button>
                    </form>
                </div>
            </div>

            <!-- ========== MARKET TRENDS ========== -->
            <div id="market-trends" class="section-content">
                <h3>Market Trends</h3>
                <div class="card-table">
                    <canvas id="trendChart" height="200"></canvas>
                </div>
            </div>

            <!-- ========== ANALYTICS ========== -->
            <div id="analytics" class="section-content">
                <h3>Advanced Analytics</h3>
                <div class="card-table">
                    <canvas id="analyticsChart" height="200"></canvas>
                </div>
            </div>

        </main>
    </div>

    <!-- ========== MODALS ========== -->
    <div id="productModal" class="modal-overlay"><div class="modal-box"><span class="close-modal" onclick="closeModal('productModal')">&times;</span><h3>Product</h3><form><div class="form-group"><label>Name</label><input id="prodName"></div><div class="form-group"><label>Price</label><input id="prodPrice" type="number"></div><button class="btn-primary" onclick="saveProduct(event)">Save</button></form></div></div>
    <div id="memberModal" class="modal-overlay"><div class="modal-box"><span class="close-modal" onclick="closeModal('memberModal')">&times;</span><h3>Member</h3><form><div class="form-group"><label>Name</label><input id="memName"></div><div class="form-group"><label>Email</label><input id="memEmail" type="email"></div><div class="form-group"><label>Phone</label><input id="memPhone" type="tel"></div><div class="form-group"><label>Password</label><input id="memPass" type="password"></div><button class="btn-primary" onclick="saveMember(event)">Save</button></form></div></div>
    <div id="subModal" class="modal-overlay"><div class="modal-box"><span class="close-modal" onclick="closeModal('subModal')">&times;</span><h3>Subscription</h3><form><div class="form-group"><label>Member ID</label><input id="subMember"></div><div class="form-group"><label>Plan</label><select><option>Basic</option><option>Premium</option><option>Enterprise</option></select></div><button class="btn-primary" onclick="saveSub(event)">Save</button></form></div></div>

    <script>
        // --- SPA Navigation ---
        function showSection(id, el) {
            document.querySelectorAll('.section-content').forEach(s => s.classList.remove('active'));
            document.getElementById(id).classList.add('active');
            document.querySelectorAll('.sidebar .nav-links a').forEach(a => a.classList.remove('active'));
            if(el) el.classList.add('active');
            document.getElementById('pageTitle').innerText = id.replace(/-/g,' ').replace(/\b\w/g, l => l.toUpperCase());
            if(id === 'dashboard') loadDashboard();
            if(id === 'products') loadProducts();
            if(id === 'members') loadMembers();
            if(id === 'subscriptions') loadSubs();
            // Close mobile sidebar
            document.getElementById('sidebar').classList.remove('open');
        }

        // --- Modals ---
        function openModal(id) { document.getElementById(id).classList.add('show'); }
        function closeModal(id) { document.getElementById(id).classList.remove('show'); }

        // --- API Helper ---
        async function apiCall(action, data = {}) {
            const formData = new FormData();
            formData.append('action', action);
            Object.keys(data).forEach(k => formData.append(k, data[k]));
            const res = await fetch('api.php', { method: 'POST', body: formData });
            return res.json();
        }

        // --- Dashboard ---
        async function loadDashboard() {
            const data = await apiCall('dashboard_stats');
            if(data.status === 'success') {
                document.getElementById('statProducts').innerText = data.products || 0;
                document.getElementById('statMembers').innerText = data.members || 0;
                document.getElementById('statSubs').innerText = data.subscriptions || 0;
                document.getElementById('statRevenue').innerText = '$' + (data.revenue || 0);
                // Animate counters
                document.querySelectorAll('.stat-card h3').forEach(el => {
                    const val = parseInt(el.innerText.replace(/[^0-9]/g,''));
                    animateCounter(el, val);
                });
            }
        }

        function animateCounter(el, target) {
            let current = 0;
            const step = Math.ceil(target / 30);
            const interval = setInterval(() => {
                current += step;
                if(current >= target) { current = target; clearInterval(interval); }
                el.innerText = el.innerText.includes('$') ? '$'+current : current;
            }, 50);
        }

        // --- Products ---
        async function loadProducts() {
            const data = await apiCall('get_products');
            if(data.status === 'success') {
                const tbody = document.getElementById('productBody');
                tbody.innerHTML = data.products.map(p => `<tr><td>${p.id}</td><td>${p.name}</td><td>$${p.price}</td><td><span class="badge active">Active</span></td><td><button onclick="alert('Edit ${p.id}')">Edit</button> <button onclick="alert('Delete ${p.id}')">Del</button></td></tr>`).join('');
                document.getElementById('productCount').innerText = data.products.length + ' items';
            }
        }

        function saveProduct(e) {
            e.preventDefault();
            closeModal('productModal');
            loadProducts();
        }

        // --- Members ---
        async function loadMembers() {
            const data = await apiCall('get_members');
            if(data.status === 'success') {
                const tbody = document.getElementById('memberBody');
                tbody.innerHTML = data.members.map(m => `<tr><td>${m.id}</td><td>${m.name}</td><td>${m.email}</td><td>${m.phone}</td><td><button onclick="alert('Edit ${m.id}')">Edit</button> <button onclick="alert('Delete ${m.id}')">Del</button></td></tr>`).join('');
                document.getElementById('memberCount').innerText = data.members.length + ' items';
            }
        }

        function saveMember(e) {
            e.preventDefault();
            closeModal('memberModal');
            loadMembers();
        }

        // --- Subscriptions ---
        async function loadSubs() {
            const data = await apiCall('get_subscriptions');
            if(data.status === 'success') {
                const tbody = document.getElementById('subBody');
                tbody.innerHTML = data.subscriptions.map(s => `<tr><td>${s.id}</td><td>${s.member_id}</td><td>${s.plan}</td><td><span class="badge ${s.status}">${s.status}</span></td><td><button onclick="alert('Edit ${s.id}')">Edit</button></td></tr>`).join('');
            }
        }

        function saveSub(e) {
            e.preventDefault();
            closeModal('subModal');
            loadSubs();
        }

        // --- Utilities ---
        function filterTable(tableId) {
            const input = document.getElementById(tableId.replace('Table','Search'));
            if(!input) return;
            const filter = input.value.toLowerCase();
            const rows = document.getElementById(tableId).getElementsByTagName('tbody')[0].rows;
            for(let row of rows) {
                const text = row.innerText.toLowerCase();
                row.style.display = text.includes(filter) ? '' : 'none';
            }
        }

        function exportCSV(tableId) {
            let csv = [];
            const rows = document.getElementById(tableId).querySelectorAll('tr');
            rows.forEach(row => {
                const cols = row.querySelectorAll('td, th');
                const rowData = [];
                cols.forEach(col => rowData.push(col.innerText));
                csv.push(rowData.join(','));
            });
            const blob = new Blob([csv.join('\n')], {type: 'text/csv'});
            const a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = 'export.csv';
            a.click();
        }

        // --- Charts ---
        document.addEventListener('DOMContentLoaded', function() {
            // Revenue chart
            new Chart(document.getElementById('revenueChart'), {
                type: 'line',
                data: {
                    labels: ['Jan','Feb','Mar','Apr','May','Jun'],
                    datasets: [{ label: 'Revenue', data: [12000,19000,15000,22000,28000,31000], borderColor: getComputedStyle(document.documentElement).getPropertyValue('--primary'), tension: 0.3 }]
                }
            });
            // Trend chart
            new Chart(document.getElementById('trendChart'), {
                type: 'bar',
                data: {
                    labels: ['Wheat','Corn','Soy','Rice','Oats'],
                    datasets: [{ label: 'Price Index', data: [105,98,112,88,95], backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--primary') }]
                }
            });
            // Analytics chart
            new Chart(document.getElementById('analyticsChart'), {
                type: 'doughnut',
                data: {
                    labels: ['Produce','Meat','Dairy','Seafood','Grains'],
                    datasets: [{ data: [30,20,25,15,10], backgroundColor: ['#4facfe','#00f2fe','#43e97b','#fa709a','#fee140'] }]
                }
            });
            loadDashboard();
            loadProducts();
            loadMembers();
            loadSubs();
        });
    </script>
</body>
</html>
Back to Directory=ceiIENDB`