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/huntinggear.tech/public_html/dashboard.php

<?php
session_start();
if (!isset($_SESSION['user_id'])) {
    header("Location: index.html");
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hunting-Gear · 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@4.4.0/dist/chart.umd.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        :root {
            --primary: #0f172a;
            --secondary: #f97316;
            --bg: #f1f5f9;
            --card: #ffffff;
            --text: #0f172a;
            --border: #e2e8f0;
            --radius: 16px;
            --shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
            --transition: 0.25s ease;
        }
        body.dark {
            --primary: #e2e8f0;
            --secondary: #fb923c;
            --bg: #0f172a;
            --card: #1e293b;
            --text: #e2e8f0;
            --border: #334155;
        }
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background: var(--bg);
            color: var(--text);
            transition: background var(--transition), color var(--transition);
            display: flex;
            min-height: 100vh;
            overflow-x: hidden;
        }
        a {
            text-decoration: none;
            color: inherit;
        }
        .app {
            display: flex;
            width: 100%;
        }
        .sidebar {
            width: 260px;
            background: var(--card);
            border-right: 1px solid var(--border);
            padding: 24px 16px;
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: 100;
            transition: transform var(--transition);
            overflow-y: auto;
        }
        .sidebar-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 36px;
            color: var(--text);
        }
        .sidebar-brand i {
            color: var(--secondary);
        }
        .sidebar-nav {
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex: 1;
        }
        .sidebar-nav .nav-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 14px;
            border-radius: 12px;
            font-weight: 500;
            font-size: 14px;
            color: var(--text);
            cursor: pointer;
            transition: all var(--transition);
            background: transparent;
            border: none;
            width: 100%;
            text-align: left;
        }
        .sidebar-nav .nav-item:hover {
            background: var(--bg);
        }
        .sidebar-nav .nav-item.active {
            background: var(--secondary);
            color: #fff;
        }
        .sidebar-nav .nav-item i {
            width: 20px;
            text-align: center;
        }
        .sidebar-footer {
            margin-top: auto;
            border-top: 1px solid var(--border);
            padding-top: 16px;
        }
        .main {
            flex: 1;
            margin-left: 260px;
            padding: 24px 32px;
            min-height: 100vh;
        }
        .topbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 32px;
            flex-wrap: wrap;
            gap: 16px;
        }
        .topbar-left h2 {
            font-size: 24px;
            font-weight: 700;
        }
        .topbar-left p {
            color: var(--text);
            opacity: 0.6;
            font-size: 14px;
        }
        .topbar-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .topbar-right .theme-toggle {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 8px 12px;
            cursor: pointer;
            font-size: 18px;
            transition: var(--transition);
        }
        .topbar-right .theme-toggle:hover {
            background: var(--bg);
        }
        .view {
            display: none;
            animation: fadeUp 0.3s ease;
        }
        .view.active {
            display: block;
        }
        @keyframes fadeUp {
            0% {
                opacity: 0;
                transform: translateY(12px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 32px;
        }
        .stat-card {
            background: var(--card);
            border-radius: var(--radius);
            padding: 22px 24px;
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
        }
        .stat-card .stat-label {
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            opacity: 0.6;
            font-weight: 600;
        }
        .stat-card .stat-value {
            font-size: 32px;
            font-weight: 800;
            margin-top: 4px;
        }
        .stat-card .stat-icon {
            float: right;
            font-size: 32px;
            opacity: 0.2;
        }
        .card {
            background: var(--card);
            border-radius: var(--radius);
            padding: 24px;
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
            margin-bottom: 24px;
        }
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 18px;
            flex-wrap: wrap;
            gap: 12px;
        }
        .card-header h3 {
            font-size: 18px;
            font-weight: 700;
        }
        .table-wrapper {
            overflow-x: auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        table th {
            text-align: left;
            padding: 12px 12px 12px 0;
            font-weight: 600;
            border-bottom: 2px solid var(--border);
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: 0.5px;
            opacity: 0.7;
        }
        table td {
            padding: 12px 12px 12px 0;
            border-bottom: 1px solid var(--border);
        }
        table .actions {
            display: flex;
            gap: 8px;
        }
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 18px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 13px;
            border: none;
            cursor: pointer;
            transition: var(--transition);
            background: var(--bg);
            color: var(--text);
        }
        .btn-primary {
            background: var(--secondary);
            color: #fff;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3);
        }
        .btn-danger {
            background: #ef4444;
            color: #fff;
        }
        .btn-danger:hover {
            background: #dc2626;
        }
        .btn-outline {
            background: transparent;
            border: 1px solid var(--border);
        }
        .btn-sm {
            padding: 4px 12px;
            font-size: 12px;
        }
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(4px);
        }
        .modal-overlay.active {
            display: flex;
        }
        .modal {
            background: var(--card);
            border-radius: var(--radius);
            padding: 32px;
            max-width: 480px;
            width: 90%;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
            animation: fadeUp 0.3s ease;
        }
        .modal h3 {
            font-size: 20px;
            margin-bottom: 20px;
        }
        .modal .form-group {
            margin-bottom: 16px;
        }
        .modal .form-group label {
            display: block;
            font-weight: 600;
            font-size: 13px;
            margin-bottom: 4px;
        }
        .modal .form-group input,
        .modal .form-group select,
        .modal .form-group textarea {
            width: 100%;
            padding: 10px 14px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: var(--bg);
            color: var(--text);
            font-size: 14px;
            transition: var(--transition);
        }
        .modal .form-group input:focus,
        .modal .form-group select:focus,
        .modal .form-group textarea:focus {
            outline: none;
            border-color: var(--secondary);
            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
        }
        .modal .modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 20px;
        }
        .toast-container {
            position: fixed;
            top: 24px;
            right: 24px;
            z-index: 99999;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .toast {
            padding: 14px 24px;
            border-radius: 12px;
            color: #fff;
            font-weight: 600;
            font-size: 14px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
            animation: slideIn 0.4s ease;
        }
        .toast.success {
            background: #22c55e;
        }
        .toast.error {
            background: #ef4444;
        }
        .toast.info {
            background: #3b82f6;
        }
        @keyframes slideIn {
            0% {
                transform: translateX(100%);
                opacity: 0;
            }
            100% {
                transform: translateX(0);
                opacity: 1;
            }
        }
        .search-box {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 6px 14px;
            flex: 1;
            max-width: 280px;
        }
        .search-box input {
            border: none;
            background: transparent;
            padding: 8px 0;
            font-size: 14px;
            color: var(--text);
            width: 100%;
            outline: none;
        }
        .hamburger {
            display: none;
            font-size: 24px;
            cursor: pointer;
            background: none;
            border: none;
            color: var(--text);
        }
        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
            }
            .sidebar.open {
                transform: translateX(0);
            }
            .main {
                margin-left: 0;
                padding: 16px;
            }
            .hamburger {
                display: block;
            }
            .stats-grid {
                grid-template-columns: 1fr 1fr;
            }
        }
        @media (max-width: 480px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }
            .topbar {
                flex-direction: column;
                align-items: stretch;
            }
        }
        .chip {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            background: var(--bg);
        }
        .chip.active {
            background: #bbf7d0;
            color: #166534;
        }
        .chip.inactive {
            background: #fecaca;
            color: #991b1b;
        }
        .loader {
            border: 3px solid var(--border);
            border-top: 3px solid var(--secondary);
            border-radius: 50%;
            width: 28px;
            height: 28px;
            animation: spin 0.8s linear infinite;
            margin: 20px auto;
        }
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        .pagination {
            display: flex;
            gap: 6px;
            justify-content: flex-end;
            margin-top: 16px;
        }
        .pagination button {
            padding: 6px 12px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: var(--card);
            cursor: pointer;
            font-weight: 600;
        }
        .pagination button.active {
            background: var(--secondary);
            color: #fff;
            border-color: var(--secondary);
        }
    </style>
</head>
<body>
    <div class="toast-container" id="toastContainer"></div>
    <div class="app">
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-brand">
                <i class="fas fa-crosshairs"></i> Hunting<span style="color:var(--secondary)">Gear</span>
            </div>
            <nav class="sidebar-nav">
                <button class="nav-item active" data-view="dashboard"><i class="fas fa-chart-pie"></i> Dashboard</button>
                <button class="nav-item" data-view="frontend"><i class="fas fa-globe"></i> FrontEnd</button>
                <button class="nav-item" data-view="products"><i class="fas fa-box"></i> Products</button>
                <button class="nav-item" data-view="members"><i class="fas fa-users"></i> Members</button>
                <button class="nav-item" data-view="subscriptions"><i class="fas fa-crown"></i> Subscriptions</button>
                <button class="nav-item" data-view="categories"><i class="fas fa-tags"></i> Categories</button>
                <button class="nav-item" data-view="reviews"><i class="fas fa-star"></i> Reviews</button>
                <button class="nav-item" data-view="payment"><i class="fas fa-credit-card"></i> Payment Gateway</button>
                <button class="nav-item" data-view="seo"><i class="fas fa-search"></i> SEO Settings</button>
                <button class="nav-item" data-view="language"><i class="fas fa-language"></i> Language</button>
                <button class="nav-item" data-view="smtp"><i class="fas fa-envelope"></i> SMTP</button>
                <button class="nav-item" data-view="general"><i class="fas fa-cog"></i> General</button>
                <button class="nav-item" data-view="security"><i class="fas fa-shield-alt"></i> Security</button>
            </nav>
            <div class="sidebar-footer">
                <button class="nav-item" id="logoutBtn"><i class="fas fa-sign-out-alt"></i> Logout</button>
            </div>
        </aside>
        <main class="main">
            <header class="topbar">
                <div class="topbar-left">
                    <h2 id="pageTitle">Dashboard</h2>
                    <p id="pageSub">Overview of your hunting gear empire</p>
                </div>
                <div class="topbar-right">
                    <div class="search-box">
                        <i class="fas fa-search" style="opacity:0.5"></i>
                        <input type="text" id="globalSearch" placeholder="Search...">
                    </div>
                    <button class="theme-toggle" id="themeToggle"><i class="fas fa-moon"></i></button>
                    <button class="hamburger" id="hamburger"><i class="fas fa-bars"></i></button>
                </div>
            </header>

            <!-- ========== VIEW: DASHBOARD ========== -->
            <div class="view active" id="view-dashboard">
                <div class="stats-grid" id="statsGrid">
                    <div class="stat-card"><div class="stat-icon"><i class="fas fa-box"></i></div><div class="stat-label">Total Products</div><div class="stat-value" id="statProducts">0</div></div>
                    <div class="stat-card"><div class="stat-icon"><i class="fas fa-users"></i></div><div class="stat-label">Total Members</div><div class="stat-value" id="statMembers">0</div></div>
                    <div class="stat-card"><div class="stat-icon"><i class="fas fa-crown"></i></div><div class="stat-label">Active Subs</div><div class="stat-value" id="statSubs">0</div></div>
                    <div class="stat-card"><div class="stat-icon"><i class="fas fa-dollar-sign"></i></div><div class="stat-label">Revenue</div><div class="stat-value" id="statRevenue">$0</div></div>
                </div>
                <div class="card">
                    <div class="card-header"><h3>Revenue Overview</h3><span style="font-size:13px;opacity:0.6">Last 30 days</span></div>
                    <canvas id="revenueChart" height="80"></canvas>
                </div>
                <div class="card">
                    <div class="card-header"><h3>Recent Activity</h3></div>
                    <div class="table-wrapper"><table><thead><tr><th>User</th><th>Action</th><th>Time</th></tr></thead><tbody id="recentActivity"><tr><td colspan="3" style="text-align:center;padding:20px;opacity:0.6">Loading...</td></tr></tbody></table></div>
                </div>
            </div>

            <!-- ========== VIEW: FRONTEND ========== -->
            <div class="view" id="view-frontend">
                <div class="card"><div class="card-header"><h3>Frontend Manager</h3><a href="index.html" target="_blank" class="btn btn-primary"><i class="fas fa-external-link-alt"></i> Visit Site</a></div>
                <p style="opacity:0.7;margin-bottom:12px">Manage frontend banners, hero sliders, and featured sections.</p>
                <div class="table-wrapper"><table><thead><tr><th>Section</th><th>Status</th><th>Last Updated</th><th>Action</th></tr></thead><tbody><tr><td>Hero Slider</td><td><span class="chip active">Active</span></td><td>2026-07-09</td><td><button class="btn btn-sm btn-outline">Edit</button></td></tr><tr><td>Banner Grid</td><td><span class="chip active">Active</span></td><td>2026-07-08</td><td><button class="btn btn-sm btn-outline">Edit</button></td></tr><tr><td>Shop by Category</td><td><span class="chip active">Active</span></td><td>2026-07-07</td><td><button class="btn btn-sm btn-outline">Edit</button></td></tr></tbody></table></div></div>
            </div>

            <!-- ========== VIEW: PRODUCTS ========== -->
            <div class="view" id="view-products">
                <div class="card"><div class="card-header"><h3>Products</h3><button class="btn btn-primary" id="addProductBtn"><i class="fas fa-plus"></i> Add Product</button></div>
                <div class="table-wrapper"><table><thead><tr><th>ID</th><th>Name</th><th>Price</th><th>Category</th><th>Actions</th></tr></thead><tbody id="productsTable"><tr><td colspan="5" style="text-align:center;padding:20px"><div class="loader"></div></td></tr></tbody></table></div>
                <div class="pagination" id="productsPagination"></div></div>
            </div>

            <!-- ========== VIEW: MEMBERS ========== -->
            <div class="view" id="view-members">
                <div class="card"><div class="card-header"><h3>Members</h3><button class="btn btn-primary" id="addMemberBtn"><i class="fas fa-plus"></i> Add Member</button></div>
                <div class="table-wrapper"><table><thead><tr><th>ID</th><th>Name</th><th>Email</th><th>Phone</th><th>Actions</th></tr></thead><tbody id="membersTable"><tr><td colspan="5" style="text-align:center;padding:20px"><div class="loader"></div></td></tr></tbody></table></div>
                <div class="pagination" id="membersPagination"></div></div>
            </div>

            <!-- ========== VIEW: SUBSCRIPTIONS ========== -->
            <div class="view" id="view-subscriptions">
                <div class="card"><div class="card-header"><h3>Subscriptions</h3><button class="btn btn-primary"><i class="fas fa-plus"></i> New Subscription</button></div>
                <div class="table-wrapper"><table><thead><tr><th>ID</th><th>Member</th><th>Plan</th><th>Status</th><th>End Date</th><th>Actions</th></tr></thead><tbody id="subsTable"><tr><td colspan="6" style="text-align:center;padding:20px"><div class="loader"></div></td></tr></tbody></table></div></div>
            </div>

            <!-- ========== VIEW: CATEGORIES ========== -->
            <div class="view" id="view-categories">
                <div class="card"><div class="card-header"><h3>Categories</h3><button class="btn btn-primary"><i class="fas fa-plus"></i> Add Category</button></div>
                <div class="table-wrapper"><table><thead><tr><th>ID</th><th>Name</th><th>Slug</th><th>Product Count</th><th>Actions</th></tr></thead><tbody><tr><td>1</td><td>Jackets</td><td>jackets</td><td>6</td><td><div class="actions"><button class="btn btn-sm btn-outline">Edit</button><button class="btn btn-sm btn-danger">Delete</button></div></td></tr><tr><td>2</td><td>Pants</td><td>pants</td><td>4</td><td><div class="actions"><button class="btn btn-sm btn-outline">Edit</button><button class="btn btn-sm btn-danger">Delete</button></div></td></tr></tbody></table></div></div>
            </div>

            <!-- ========== VIEW: REVIEWS ========== -->
            <div class="view" id="view-reviews">
                <div class="card"><div class="card-header"><h3>Reviews</h3><div class="search-box" style="max-width:200px"><input placeholder="Filter..."></div></div>
                <div class="table-wrapper"><table><thead><tr><th>Product</th><th>User</th><th>Rating</th><th>Comment</th><th>Status</th><th>Action</th></tr></thead><tbody><tr><td>Blizzard Pro</td><td>John D.</td><td>⭐⭐⭐⭐⭐</td><td>Best jacket ever!</td><td><span class="chip active">Approved</span></td><td><button class="btn btn-sm btn-outline">View</button></td></tr><tr><td>Mountain Pant</td><td>Sarah K.</td><td>⭐⭐⭐⭐</td><td>Great fit, durable.</td><td><span class="chip active">Approved</span></td><td><button class="btn btn-sm btn-outline">View</button></td></tr></tbody></table></div></div>
            </div>

            <!-- ========== VIEW: PAYMENT GATEWAY ========== -->
            <div class="view" id="view-payment">
                <div class="card"><div class="card-header"><h3>Payment Gateway Configuration</h3></div>
                <form id="paymentForm"><div class="form-group"><label>Merchant ID</label><input value="MERCH_123456"></div><div class="form-group"><label>Public Key</label><input value="pk_test_abc123"></div><div class="form-group"><label>Secret Key</label><input type="password" value="sk_test_xyz789"></div><div class="form-group"><label>Sandbox Mode</label><select><option>Enabled</option><option>Disabled</option></select></div><button type="submit" class="btn btn-primary">Save Settings</button></form></div>
            </div>

            <!-- ========== VIEW: SEO ========== -->
            <div class="view" id="view-seo">
                <div class="card"><div class="card-header"><h3>SEO Settings</h3></div>
                <form id="seoForm"><div class="form-group"><label>Site Title</label><input value="Hunting-Gear | Technical Hunting Gear"></div><div class="form-group"><label>Meta Description</label><textarea rows="2">Advanced hunting gear systems designed for the serious hunter.</textarea></div><div class="form-group"><label>Meta Keywords</label><input value="hunting gear, camo, waterproof, gore-tex"></div><div class="form-group"><label>OG Image URL</label><input value="https://hunting-gear.com/og-image.jpg"></div><button type="submit" class="btn btn-primary">Save SEO</button></form></div>
            </div>

            <!-- ========== VIEW: LANGUAGE ========== -->
            <div class="view" id="view-language">
                <div class="card"><div class="card-header"><h3>Language Settings</h3></div>
                <form id="langForm"><div class="form-group"><label>Default Language</label><select><option>English (en)</option><option>Spanish (es)</option><option>French (fr)</option></select></div><div class="form-group"><label>Available Languages</label><div style="display:flex;gap:16px;flex-wrap:wrap"><label><input type="checkbox" checked> English</label><label><input type="checkbox"> Spanish</label><label><input type="checkbox"> French</label></div></div><button type="submit" class="btn btn-primary">Save Language</button></form></div>
            </div>

            <!-- ========== VIEW: SMTP ========== -->
            <div class="view" id="view-smtp">
                <div class="card"><div class="card-header"><h3>SMTP Configuration</h3></div>
                <form id="smtpForm"><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="noreply@hunting-gear.com"></div><div class="form-group"><label>Password</label><input type="password" value="smtp_password"></div><div class="form-group"><label>Encryption</label><select><option>TLS</option><option>SSL</option></select></div><button type="submit" class="btn btn-primary">Save SMTP</button></form></div>
            </div>

            <!-- ========== VIEW: GENERAL ========== -->
            <div class="view" id="view-general">
                <div class="card"><div class="card-header"><h3>General Settings</h3></div>
                <form id="generalForm"><div class="form-group"><label>Site Name</label><input value="Hunting-Gear"></div><div class="form-group"><label>Logo URL</label><input value="/logo.png"></div><div class="form-group"><label>Address</label><input value="123 Outdoor Lane, Bozeman, MT"></div><div class="form-group"><label>Phone</label><input value="+1 (555) 123-4567"></div><div class="form-group"><label>Email</label><input value="info@hunting-gear.com"></div><button type="submit" class="btn btn-primary">Save General</button></form></div>
            </div>

            <!-- ========== VIEW: SECURITY ========== -->
            <div class="view" id="view-security">
                <div class="card"><div class="card-header"><h3>Security Settings</h3></div>
                <form id="securityForm"><div class="form-group"><label>Current Password</label><input type="password" placeholder="Enter current password"></div><div class="form-group"><label>New Password</label><input type="password" placeholder="New password"></div><div class="form-group"><label>Confirm New Password</label><input type="password" placeholder="Confirm new password"></div><div class="form-group"><label>Two-Factor Authentication</label><select><option>Disabled</option><option>Enabled (Authenticator)</option><option>Enabled (SMS)</option></select></div><button type="submit" class="btn btn-primary">Update Security</button></form></div>
            </div>

        </main>
    </div>

    <!-- ========== MODALS ========== -->
    <div class="modal-overlay" id="productModal">
        <div class="modal"><h3 id="productModalTitle">Add Product</h3>
        <form id="productForm"><div class="form-group"><label>Product Name</label><input id="prodName" required></div><div class="form-group"><label>Price</label><input id="prodPrice" type="number" step="0.01" required></div><div class="form-group"><label>Category</label><select id="prodCategory"><option>Jackets</option><option>Pants</option><option>Footwear</option><option>Accessories</option></select></div><div class="modal-actions"><button type="button" class="btn btn-outline modal-close-btn">Cancel</button><button type="submit" class="btn btn-primary">Save</button></div></form></div>
    </div>

    <div class="modal-overlay" id="memberModal">
        <div class="modal"><h3 id="memberModalTitle">Add Member</h3>
        <form id="memberForm"><div class="form-group"><label>Full Name</label><input id="memName" required></div><div class="form-group"><label>Email</label><input id="memEmail" type="email" required></div><div class="form-group"><label>Phone</label><input id="memPhone" required></div><div class="form-group"><label>Password</label><input id="memPassword" type="password" placeholder="Leave blank to keep current"></div><div class="modal-actions"><button type="button" class="btn btn-outline modal-close-btn">Cancel</button><button type="submit" class="btn btn-primary">Save</button></div></form></div>
    </div>

    <script>
        (function() {
            const toastContainer = document.getElementById('toastContainer');
            function showToast(msg, type = 'info') {
                const t = document.createElement('div');
                t.className = 'toast ' + type;
                t.textContent = msg;
                toastContainer.appendChild(t);
                setTimeout(() => { t.style.opacity = '0';
                    t.style.transform = 'translateX(100%)';
                    setTimeout(() => t.remove(), 400); }, 4000);
            }
            window.showToast = showToast;

            // Sidebar navigation
            const navItems = document.querySelectorAll('.sidebar-nav .nav-item');
            const views = document.querySelectorAll('.view');
            const pageTitle = document.getElementById('pageTitle');
            const pageSub = document.getElementById('pageSub');
            const viewTitles = {
                dashboard: ['Dashboard', 'Overview of your hunting gear empire'],
                frontend: ['FrontEnd', 'Manage your public site content'],
                products: ['Products', 'Manage your product catalog'],
                members: ['Members', 'Manage registered users'],
                subscriptions: ['Subscriptions', 'Manage member subscriptions'],
                categories: ['Categories', 'Organize products by category'],
                reviews: ['Reviews', 'Moderate user reviews'],
                payment: ['Payment Gateway', 'Configure payment processing'],
                seo: ['SEO Settings', 'Optimize for search engines'],
                language: ['Language', 'Manage multilingual settings'],
                smtp: ['SMTP', 'Configure email delivery'],
                general: ['General', 'Site-wide settings'],
                security: ['Security', 'Protect your admin area']
            };

            function switchView(viewId) {
                views.forEach(v => v.classList.remove('active'));
                const target = document.getElementById('view-' + viewId);
                if (target) target.classList.add('active');
                navItems.forEach(n => n.classList.remove('active'));
                const activeNav = document.querySelector('.nav-item[data-view="' + viewId + '"]');
                if (activeNav) activeNav.classList.add('active');
                if (viewTitles[viewId]) {
                    pageTitle.textContent = viewTitles[viewId][0];
                    pageSub.textContent = viewTitles[viewId][1];
                }
                // close mobile sidebar
                document.getElementById('sidebar').classList.remove('open');
            }

            navItems.forEach(item => {
                item.addEventListener('click', function() {
                    const view = this.getAttribute('data-view');
                    if (view) switchView(view);
                });
            });

            // Hamburger
            document.getElementById('hamburger').addEventListener('click', function() {
                document.getElementById('sidebar').classList.toggle('open');
            });

            // Theme toggle
            const themeToggle = document.getElementById('themeToggle');
            let dark = false;
            themeToggle.addEventListener('click', function() {
                dark = !dark;
                document.body.classList.toggle('dark', dark);
                this.innerHTML = dark ? '<i class="fas fa-sun"></i>' : '<i class="fas fa-moon"></i>';
            });

            // Logout
            document.getElementById('logoutBtn').addEventListener('click', function() {
                if (confirm('Logout?')) {
                    fetch('api.php?action=logout', { method: 'POST' }).then(() => {
                        window.location.href = 'index.html';
                    }).catch(() => { window.location.href = 'index.html'; });
                }
            });

            // Modal helpers
            function openModal(id) {
                document.getElementById(id).classList.add('active');
            }

            function closeModal(id) {
                document.getElementById(id).classList.remove('active');
            }
            document.querySelectorAll('.modal-close-btn').forEach(b => {
                b.addEventListener('click', function() { this.closest('.modal-overlay').classList.remove('active'); });
            });
            document.querySelectorAll('.modal-overlay').forEach(o => {
                o.addEventListener('click', function(e) { if (e.target === this) this.classList.remove('active'); });
            });

            // ===== API FETCH HELPERS =====
            async function apiFetch(action, method = 'GET', body = null) {
                const opts = { method, headers: { 'Content-Type': 'application/json' } };
                if (body) opts.body = JSON.stringify(body);
                const res = await fetch('api.php?action=' + action, opts);
                return await res.json();
            }

            // ===== DASHBOARD STATS =====
            async function loadStats() {
                try {
                    const data = await apiFetch('dashboard_stats');
                    if (data.status === 'success') {
                        document.getElementById('statProducts').textContent = data.products || 0;
                        document.getElementById('statMembers').textContent = data.members || 0;
                        document.getElementById('statSubs').textContent = data.subs || 0;
                        document.getElementById('statRevenue').textContent = '$' + (data.revenue || 0);
                        // chart
                        if (data.chart) {
                            new Chart(document.getElementById('revenueChart'), {
                                type: 'bar',
                                data: {
                                    labels: data.chart.labels || ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                                    datasets: [{ label: 'Revenue', data: data.chart.values || [0, 0, 0, 0, 0, 0, 0],
                                        backgroundColor: '#f97316', borderRadius: 6 }]
                                },
                                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
                            });
                        }
                        // recent activity
                        const actBody = document.getElementById('recentActivity');
                        if (data.recent && data.recent.length) {
                            actBody.innerHTML = data.recent.map(r =>
                                `<tr><td>${r.user}</td><td>${r.action}</td><td>${r.time}</td></tr>`
                            ).join('');
                        } else {
                            actBody.innerHTML = '<tr><td colspan="3" style="text-align:center;padding:20px;opacity:0.6">No recent activity</td></tr>';
                        }
                    }
                } catch (e) { /* fallback to mock */ }
            }

            // ===== PRODUCTS =====
            async function loadProducts() {
                const tbody = document.getElementById('productsTable');
                try {
                    const data = await apiFetch('products');
                    if (data.status === 'success' && data.data) {
                        tbody.innerHTML = data.data.map(p =>
                            `<tr><td>${p.id}</td><td>${p.name}</td><td>$${p.price}</td><td>${p.category}</td><td><div class="actions"><button class="btn btn-sm btn-outline edit-product" data-id="${p.id}">Edit</button><button class="btn btn-sm btn-danger delete-product" data-id="${p.id}">Delete</button></div></td></tr>`
                        ).join('');
                    } else {
                        tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;padding:20px;opacity:0.6">No products found</td></tr>';
                    }
                } catch (e) {
                    tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;padding:20px;opacity:0.6">Error loading</td></tr>';
                }
            }

            document.getElementById('addProductBtn').addEventListener('click', function() {
                document.getElementById('productModalTitle').textContent = 'Add Product';
                document.getElementById('productForm').reset();
                openModal('productModal');
            });

            document.getElementById('productForm').addEventListener('submit', async function(e) {
                e.preventDefault();
                const name = document.getElementById('prodName').value;
                const price = document.getElementById('prodPrice').value;
                const category = document.getElementById('prodCategory').value;
                const res = await apiFetch('products', 'POST', { name, price, category });
                if (res.status === 'success') { showToast('Product added!', 'success');
                    closeModal('productModal');
                    loadProducts(); } else showToast(res.message || 'Error', 'error');
            });

            // ===== MEMBERS =====
            async function loadMembers() {
                const tbody = document.getElementById('membersTable');
                try {
                    const data = await apiFetch('members');
                    if (data.status === 'success' && data.data) {
                        tbody.innerHTML = data.data.map(m =>
                            `<tr><td>${m.id}</td><td>${m.name}</td><td>${m.email}</td><td>${m.phone}</td><td><div class="actions"><button class="btn btn-sm btn-outline edit-member" data-id="${m.id}">Edit</button><button class="btn btn-sm btn-danger delete-member" data-id="${m.id}">Delete</button></div></td></tr>`
                        ).join('');
                    } else {
                        tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;padding:20px;opacity:0.6">No members</td></tr>';
                    }
                } catch (e) {
                    tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;padding:20px;opacity:0.6">Error loading</td></tr>';
                }
            }

            document.getElementById('addMemberBtn').addEventListener('click', function() {
                document.getElementById('memberModalTitle').textContent = 'Add Member';
                document.getElementById('memberForm').reset();
                openModal('memberModal');
            });

            document.getElementById('memberForm').addEventListener('submit', async function(e) {
                e.preventDefault();
                const name = document.getElementById('memName').value;
                const email = document.getElementById('memEmail').value;
                const phone = document.getElementById('memPhone').value;
                const password = document.getElementById('memPassword').value;
                const res = await apiFetch('members', 'POST', { name, email, phone, password });
                if (res.status === 'success') { showToast('Member added!', 'success');
                    closeModal('memberModal');
                    loadMembers(); } else showToast(res.message || 'Error', 'error');
            });

            // ===== SUBSCRIPTIONS =====
            async function loadSubs() {
                const tbody = document.getElementById('subsTable');
                try {
                    const data = await apiFetch('subscriptions');
                    if (data.status === 'success' && data.data) {
                        tbody.innerHTML = data.data.map(s =>
                            `<tr><td>${s.id}</td><td>${s.member}</td><td>${s.plan}</td><td><span class="chip ${s.status === 'active' ? 'active' : 'inactive'}">${s.status}</span></td><td>${s.end_date}</td><td><div class="actions"><button class="btn btn-sm btn-outline">Edit</button><button class="btn btn-sm btn-danger">Delete</button></div></td></tr>`
                        ).join('');
                    } else {
                        tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;padding:20px;opacity:0.6">No subscriptions</td></tr>';
                    }
                } catch (e) {
                    tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;padding:20px;opacity:0.6">Error loading</td></tr>';
                }
            }

            // ===== SETTINGS FORMS =====
            document.querySelectorAll('#paymentForm, #seoForm, #langForm, #smtpForm, #generalForm, #securityForm').forEach(f => {
                f.addEventListener('submit', async function(e) {
                    e.preventDefault();
                    const formData = new FormData(this);
                    const data = Object.fromEntries(formData.entries());
                    // map to action
                    let action = 'settings';
                    if (this.id === 'paymentForm') action = 'settings_payment';
                    else if (this.id === 'seoForm') action = 'settings_seo';
                    else if (this.id === 'langForm') action = 'settings_lang';
                    else if (this.id === 'smtpForm') action = 'settings_smtp';
                    else if (this.id === 'generalForm') action = 'settings_general';
                    else if (this.id === 'securityForm') action = 'settings_security';
                    const res = await apiFetch(action, 'POST', data);
                    showToast(res.status === 'success' ? 'Settings saved!' : res.message || 'Error', res.status ===
                        'success' ? 'success' : 'error');
                });
            });

            // ===== INIT =====
            loadStats();
            loadProducts();
            loadMembers();
            loadSubs();

            // global search filter
            document.getElementById('globalSearch').addEventListener('input', function() {
                const q = this.value.toLowerCase();
                document.querySelectorAll('.table-wrapper table tbody tr').forEach(tr => {
                    const txt = tr.textContent.toLowerCase();
                    tr.style.display = txt.includes(q) ? '' : 'none';
                });
            });

            // export CSV (simple)
            document.querySelectorAll('.card-header .btn-primary').forEach(btn => {
                if (btn.textContent.includes('Export') === false) return;
                btn.addEventListener('click', function() {
                    const table = this.closest('.card').querySelector('table');
                    if (!table) return;
                    let csv = '';
                    table.querySelectorAll('tr').forEach(row => {
                        const cells = row.querySelectorAll('td, th');
                        csv += Array.from(cells).map(c => '"' + c.textContent.trim() + '"').join(',') + '\n';
                    });
                    const blob = new Blob([csv], { type: 'text/csv' });
                    const a = document.createElement('a');
                    a.href = URL.createObjectURL(blob);
                    a.download = 'export.csv';
                    a.click();
                });
            });

        })();
    </script>
</body>
</html>
Back to Directory=ceiIENDB`