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/filmmakejobs.com/public_html/dashboard.php

<?php
session_start();
if (!isset($_SESSION['user']) || $_SESSION['user']['email'] !== 'admin@filmmakejobs.com') {
    header('Location: index.html');
    exit;
}
$host = 'localhost';
$dbname = 'u456810272_filmmakejobs';
$user = 'u456810272_filmmakejobs';
$pass = 'Global@#980';
try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $user, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("DB Connection failed: " . $e->getMessage());
}
$stmt = $pdo->query("SELECT COUNT(*) as total_members FROM members");
$total_members = $stmt->fetch(PDO::FETCH_ASSOC)['total_members'];
$stmt = $pdo->query("SELECT COUNT(*) as total_products FROM products");
$total_products = $stmt->fetch(PDO::FETCH_ASSOC)['total_products'];
$stmt = $pdo->query("SELECT COUNT(*) as active_subs FROM subscriptions WHERE status='active'");
$active_subs = $stmt->fetch(PDO::FETCH_ASSOC)['active_subs'];
$stmt = $pdo->query("SELECT SUM(amount) as revenue FROM subscriptions WHERE status='active'");
$revenue = $stmt->fetch(PDO::FETCH_ASSOC)['revenue'] ?? 0;
$members = $pdo->query("SELECT * FROM members ORDER BY id DESC LIMIT 10")->fetchAll(PDO::FETCH_ASSOC);
$products = $pdo->query("SELECT * FROM products ORDER BY id DESC LIMIT 10")->fetchAll(PDO::FETCH_ASSOC);
$subscriptions = $pdo->query("SELECT * FROM subscriptions ORDER BY id DESC LIMIT 10")->fetchAll(PDO::FETCH_ASSOC);
$settings = [];
$stmt = $pdo->query("SELECT * FROM settings");
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    $settings[$row['setting_key']] = $row['setting_value'];
}
if(empty($settings)) {
    $settings = [
        'site_name' => 'FILM Make Jobs',
        'currency' => 'USD',
        'meta_title' => 'FILM Make Jobs - Film Industry Platform',
        'meta_description' => 'Connecting filmmakers worldwide.',
        'meta_keywords' => 'film, jobs, filmmakers, crew',
        'smtp_host' => 'smtp.gmail.com',
        'smtp_port' => '587',
        'smtp_username' => '',
        'smtp_password' => '',
        'smtp_encryption' => 'tls',
        'payment_gateway' => 'stripe',
        'stripe_key' => '',
        'stripe_secret' => '',
        'default_language' => 'en'
    ];
}
$job_listings = $pdo->query("SELECT * FROM products WHERE category='job' ORDER BY id DESC LIMIT 10")->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - FILM Make Jobs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
:root {
    --primary: #6c5ce7; --primary-hover: #5a4bd1;
    --secondary: #00b894; --secondary-hover: #00a381;
    --bg-dark: #1e1e2f; --bg-light: #f0f2f5;
    --sidebar-width: 260px;
    --shadow: 0 4px 20px rgba(0,0,0,0.08);
    --radius: 12px;
    --transition: all 0.3s ease;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg-light); display:flex; min-height:100vh; transition: background 0.3s, color 0.3s; }
body.dark { --bg-light: #0f0f1a; --bg-dark: #1a1a2e; color:#e0e0e0; }
.sidebar { width:var(--sidebar-width); background:var(--bg-dark); color:#fff; padding:20px 0; height:100vh; position:fixed; top:0; left:0; overflow-y:auto; transition:transform 0.3s ease; z-index:1000; }
.sidebar .brand { display:flex; align-items:center; gap:12px; padding:0 20px 30px; font-size:1.4rem; font-weight:700; border-bottom:1px solid rgba(255,255,255,0.08); }
.sidebar .brand i { color:var(--secondary); }
.sidebar .menu { padding:20px 10px; }
.sidebar .menu a { display:flex; align-items:center; gap:14px; padding:12px 20px; margin:4px 0; border-radius:var(--radius); color:rgba(255,255,255,0.7); text-decoration:none; transition:var(--transition); cursor:pointer; font-size:0.95rem; }
.sidebar .menu a:hover, .sidebar .menu a.active { background:rgba(255,255,255,0.08); color:#fff; transform:translateX(4px); }
.sidebar .menu a i { width:22px; text-align:center; }
.main { margin-left:var(--sidebar-width); flex:1; padding:20px 30px; transition:margin 0.3s; }
.topbar { display:flex; justify-content:space-between; align-items:center; background:#fff; padding:15px 25px; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:25px; flex-wrap:wrap; gap:10px; }
body.dark .topbar { background:#1f1f35; }
.topbar .hamburger { display:none; font-size:1.5rem; cursor:pointer; }
.topbar .right { display:flex; align-items:center; gap:20px; }
.topbar .right .dark-toggle { cursor:pointer; font-size:1.2rem; }
.topbar .right .badge { background:var(--primary); color:#fff; padding:2px 8px; border-radius:20px; font-size:0.7rem; }
.view { display:none; animation:fadeIn 0.3s ease; }
.view.active { display:block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; margin-bottom:30px; }
.stat-card { background:#fff; padding:20px 25px; border-radius:var(--radius); box-shadow:var(--shadow); transition:var(--transition); }
.stat-card:hover { transform:translateY(-4px); box-shadow:0 8px 30px rgba(0,0,0,0.12); }
body.dark .stat-card { background:#1f1f35; }
.stat-card .icon { font-size:2rem; color:var(--secondary); margin-bottom:10px; }
.stat-card h3 { font-size:1.8rem; margin-bottom:4px; }
.stat-card p { color:#888; font-size:0.9rem; }
.chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:25px; margin-bottom:30px; }
.chart-box { background:#fff; padding:20px; border-radius:var(--radius); box-shadow:var(--shadow); }
body.dark .chart-box { background:#1f1f35; }
.table-wrap { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; overflow-x:auto; }
body.dark .table-wrap { background:#1f1f35; }
.table-wrap table { width:100%; border-collapse:collapse; }
.table-wrap th, .table-wrap td { padding:12px 16px; text-align:left; border-bottom:1px solid #eee; }
body.dark .table-wrap th, body.dark .table-wrap td { border-bottom:1px solid #333; }
.table-wrap th { font-weight:600; color:#888; }
.table-wrap .actions i { cursor:pointer; margin:0 6px; color:var(--primary); transition:var(--transition); }
.table-wrap .actions i:hover { color:var(--primary-hover); transform:scale(1.1); }
.btn { display:inline-block; padding:8px 20px; border:none; border-radius:8px; background:var(--primary); color:#fff; cursor:pointer; transition:var(--transition); font-weight:600; }
.btn:hover { transform:translateY(-2px); box-shadow:0 4px 15px rgba(108,92,231,0.4); }
.btn-secondary { background:var(--secondary); }
.btn-secondary:hover { box-shadow:0 4px 15px rgba(0,184,148,0.4); }
.btn-danger { background:#e74c3c; }
.btn-danger:hover { box-shadow:0 4px 15px rgba(231,76,60,0.4); }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-weight:600; margin-bottom:6px; font-size:0.9rem; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:10px 14px; border:1px solid #ddd; border-radius:8px; font-size:0.95rem; transition:var(--transition); background:#fff; }
body.dark .form-group input, body.dark .form-group select, body.dark .form-group textarea { background:#2a2a40; border-color:#444; color:#fff; }
.form-group input:focus, .form-group select:focus { border-color:var(--primary); outline:none; box-shadow:0 0 0 3px rgba(108,92,231,0.2); }
.modal { position:fixed; top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6); z-index:2000; display:none; justify-content:center; align-items:center; }
.modal.show { display:flex; }
.modal-content { background:#fff; padding:30px; border-radius:var(--radius); max-width:500px; width:90%; max-height:80vh; overflow-y:auto; }
body.dark .modal-content { background:#1f1f35; }
.modal-content .close { float:right; font-size:1.5rem; cursor:pointer; color:#888; }
.toast-container { position:fixed; top:20px; right:20px; z-index:3000; display:flex; flex-direction:column; gap:10px; }
.toast { padding:14px 24px; border-radius:8px; color:#fff; font-weight:600; box-shadow:0 8px 30px rgba(0,0,0,0.2); animation:slideInRight 0.4s ease; min-width:260px; }
.toast-success { background:var(--secondary); }
.toast-error { background:#e74c3c; }
.toast-info { background:var(--primary); }
@keyframes slideInRight { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
.loader { display:inline-block; width:20px; height:20px; border:3px solid #eee; border-top:3px solid var(--primary); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
.pagination { display:flex; gap:8px; justify-content:center; margin-top:15px; }
.pagination span, .pagination button { padding:6px 14px; border:1px solid #ddd; border-radius:6px; cursor:pointer; background:#fff; transition:var(--transition); }
body.dark .pagination span, body.dark .pagination button { background:#2a2a40; border-color:#444; color:#e0e0e0; }
.pagination .active { background:var(--primary); color:#fff; border-color:var(--primary); }
.news-ticker { background:var(--primary); color:#fff; padding:8px 20px; border-radius:var(--radius); margin-bottom:20px; overflow:hidden; white-space:nowrap; }
.news-ticker span { display:inline-block; animation:ticker 20s linear infinite; }
@keyframes ticker { 0% { transform:translateX(100%); } 100% { transform:translateX(-100%); } }
@media (max-width:992px) { .sidebar { transform:translateX(-100%); } .sidebar.open { transform:translateX(0); } .main { margin-left:0; } .topbar .hamburger { display:block; } .chart-grid { grid-template-columns:1fr; } }
@media (max-width:600px) { .stats-grid { grid-template-columns:1fr 1fr; } .topbar .right { gap:10px; } }
</style>
</head>
<body>
<div class="sidebar" id="sidebar">
    <div class="brand"><i class="fas fa-film"></i> FILM Make Jobs</div>
    <div class="menu">
        <a class="active" data-view="dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
        <a data-view="frontend"><i class="fas fa-arrow-left"></i> FrontEnd</a>
        <a data-view="products"><i class="fas fa-box"></i> Products</a>
        <a data-view="members"><i class="fas fa-users"></i> Members</a>
        <a data-view="subscriptions"><i class="fas fa-credit-card"></i> Subscriptions</a>
        <a data-view="job-listings"><i class="fas fa-briefcase"></i> Job Listings</a>
        <a data-view="analytics"><i class="fas fa-chart-line"></i> Analytics</a>
        <a data-view="payment-gateway"><i class="fas fa-lock"></i> Payment Gateway</a>
        <a data-view="seo-settings"><i class="fas fa-search"></i> SEO Settings</a>
        <a data-view="language"><i class="fas fa-globe"></i> Language</a>
        <a data-view="smtp"><i class="fas fa-envelope"></i> SMTP</a>
        <a data-view="general"><i class="fas fa-cogs"></i> General</a>
        <a data-view="security"><i class="fas fa-shield-alt"></i> Security</a>
        <a href="api.php?action=logout" style="color:#e74c3c;"><i class="fas fa-sign-out-alt"></i> Logout</a>
    </div>
</div>
<div class="main">
    <div class="topbar">
        <div class="hamburger" onclick="document.getElementById('sidebar').classList.toggle('open')"><i class="fas fa-bars"></i></div>
        <div style="font-weight:600;font-size:1.1rem;">Admin Panel</div>
        <div class="right">
            <span class="dark-toggle" onclick="toggleDark()"><i class="fas fa-moon"></i></span>
            <span><i class="fas fa-user-circle"></i> <?php echo htmlspecialchars($_SESSION['user']['email']); ?></span>
        </div>
    </div>
    <div class="news-ticker"><span>Welcome to FILM Make Jobs Admin. Latest updates: New feature "Job Listings" added. Check the dashboard for stats.</span></div>
    <div id="app">
        <!-- Dashboard View -->
        <div class="view active" id="view-dashboard">
            <div class="stats-grid">
                <div class="stat-card"><div class="icon"><i class="fas fa-users"></i></div><h3 id="stat-members">0</h3><p>Total Members</p></div>
                <div class="stat-card"><div class="icon"><i class="fas fa-box"></i></div><h3 id="stat-products">0</h3><p>Total Products</p></div>
                <div class="stat-card"><div class="icon"><i class="fas fa-check-circle"></i></div><h3 id="stat-subs">0</h3><p>Active Subscriptions</p></div>
                <div class="stat-card"><div class="icon"><i class="fas fa-dollar-sign"></i></div><h3 id="stat-revenue">$0</h3><p>Total Revenue</p></div>
            </div>
            <div class="chart-grid">
                <div class="chart-box"><canvas id="membersChart"></canvas></div>
                <div class="chart-box"><canvas id="revenueChart"></canvas></div>
            </div>
            <div class="table-wrap"><h3 style="margin-bottom:15px;">Recent Members</h3>
                <table><thead><tr><th>Name</th><th>Email</th><th>Phone</th></tr></thead><tbody id="recent-members"></tbody></table>
            </div>
        </div>
        <!-- FrontEnd View -->
        <div class="view" id="view-frontend">
            <h2 style="margin-bottom:20px;">Frontend Management</h2>
            <p>Open the main website to manage content.</p>
            <button class="btn btn-secondary" onclick="window.open('index.html','_blank')"><i class="fas fa-external-link-alt"></i> Visit Frontend</button>
        </div>
        <!-- Products View -->
        <div class="view" id="view-products">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;">
                <h2>Products</h2>
                <button class="btn" onclick="openModal('productModal')"><i class="fas fa-plus"></i> Add Product</button>
            </div>
            <div class="table-wrap"><table><thead><tr><th>ID</th><th>Name</th><th>Price</th><th>Category</th><th>Actions</th></tr></thead><tbody id="products-tbody"></tbody></table>
            <div class="pagination" id="products-pagination"></div></div>
        </div>
        <!-- Members View -->
        <div class="view" id="view-members">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;">
                <h2>Members</h2>
                <button class="btn" onclick="openModal('memberModal')"><i class="fas fa-plus"></i> Add Member</button>
            </div>
            <div class="table-wrap"><table><thead><tr><th>Name</th><th>Email</th><th>Phone</th><th>Actions</th></tr></thead><tbody id="members-tbody"></tbody></table>
            <div class="pagination" id="members-pagination"></div></div>
        </div>
        <!-- Subscriptions View -->
        <div class="view" id="view-subscriptions">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;">
                <h2>Subscriptions</h2>
                <button class="btn" onclick="openModal('subModal')"><i class="fas fa-plus"></i> Add Subscription</button>
            </div>
            <div class="table-wrap"><table><thead><tr><th>ID</th><th>User</th><th>Plan</th><th>Amount</th><th>Status</th><th>Actions</th></tr></thead><tbody id="subs-tbody"></tbody></table>
            <div class="pagination" id="subs-pagination"></div></div>
        </div>
        <!-- Job Listings View -->
        <div class="view" id="view-job-listings">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;">
                <h2>Job Listings</h2>
                <button class="btn" onclick="openModal('jobModal')"><i class="fas fa-plus"></i> Add Job</button>
            </div>
            <div class="table-wrap"><table><thead><tr><th>Title</th><th>Company</th><th>Location</th><th>Actions</th></tr></thead><tbody id="jobs-tbody"></tbody></table>
            <div class="pagination" id="jobs-pagination"></div></div>
        </div>
        <!-- Analytics View -->
        <div class="view" id="view-analytics">
            <h2 style="margin-bottom:20px;">Analytics Overview</h2>
            <div class="chart-grid"><div class="chart-box"><canvas id="analyticsChart"></canvas></div></div>
        </div>
        <!-- Payment Gateway View -->
        <div class="view" id="view-payment-gateway">
            <h2 style="margin-bottom:20px;">Payment Gateway Settings</h2>
            <form id="paymentForm" class="form-wrap" style="max-width:600px;">
                <div class="form-group"><label>Gateway</label><select name="payment_gateway"><option value="stripe">Stripe</option><option value="paypal">PayPal</option></select></div>
                <div class="form-group"><label>Public Key</label><input name="stripe_key" value="<?php echo htmlspecialchars($settings['stripe_key']??''); ?>"></div>
                <div class="form-group"><label>Secret Key</label><input name="stripe_secret" value="<?php echo htmlspecialchars($settings['stripe_secret']??''); ?>"></div>
                <button type="submit" class="btn">Save Settings</button>
            </form>
        </div>
        <!-- SEO Settings View -->
        <div class="view" id="view-seo-settings">
            <h2 style="margin-bottom:20px;">SEO Settings</h2>
            <form id="seoForm" style="max-width:600px;">
                <div class="form-group"><label>Meta Title</label><input name="meta_title" value="<?php echo htmlspecialchars($settings['meta_title']??''); ?>"></div>
                <div class="form-group"><label>Meta Description</label><textarea name="meta_description" rows="3"><?php echo htmlspecialchars($settings['meta_description']??''); ?></textarea></div>
                <div class="form-group"><label>Meta Keywords</label><input name="meta_keywords" value="<?php echo htmlspecialchars($settings['meta_keywords']??''); ?>"></div>
                <button type="submit" class="btn">Save SEO</button>
            </form>
        </div>
        <!-- Language View -->
        <div class="view" id="view-language">
            <h2 style="margin-bottom:20px;">Language Settings</h2>
            <form id="langForm" style="max-width:400px;">
                <div class="form-group"><label>Default Language</label><select name="default_language"><option value="en" <?php echo ($settings['default_language']=='en')?'selected':''; ?>>English</option><option value="es" <?php echo ($settings['default_language']=='es')?'selected':''; ?>>Spanish</option><option value="fr" <?php echo ($settings['default_language']=='fr')?'selected':''; ?>>French</option></select></div>
                <button type="submit" class="btn">Save Language</button>
            </form>
        </div>
        <!-- SMTP View -->
        <div class="view" id="view-smtp">
            <h2 style="margin-bottom:20px;">SMTP Configuration</h2>
            <form id="smtpForm" style="max-width:600px;">
                <div class="form-group"><label>Host</label><input name="smtp_host" value="<?php echo htmlspecialchars($settings['smtp_host']??''); ?>"></div>
                <div class="form-group"><label>Port</label><input name="smtp_port" value="<?php echo htmlspecialchars($settings['smtp_port']??''); ?>"></div>
                <div class="form-group"><label>Username</label><input name="smtp_username" value="<?php echo htmlspecialchars($settings['smtp_username']??''); ?>"></div>
                <div class="form-group"><label>Password</label><input name="smtp_password" type="password" value="<?php echo htmlspecialchars($settings['smtp_password']??''); ?>"></div>
                <div class="form-group"><label>Encryption</label><select name="smtp_encryption"><option value="tls" <?php echo ($settings['smtp_encryption']=='tls')?'selected':''; ?>>TLS</option><option value="ssl" <?php echo ($settings['smtp_encryption']=='ssl')?'selected':''; ?>>SSL</option></select></div>
                <button type="submit" class="btn">Save SMTP</button>
            </form>
        </div>
        <!-- General View -->
        <div class="view" id="view-general">
            <h2 style="margin-bottom:20px;">General Settings</h2>
            <form id="generalForm" style="max-width:600px;">
                <div class="form-group"><label>Site Name</label><input name="site_name" value="<?php echo htmlspecialchars($settings['site_name']??''); ?>"></div>
                <div class="form-group"><label>Currency</label><select name="currency"><option value="USD" <?php echo ($settings['currency']=='USD')?'selected':''; ?>>USD</option><option value="EUR" <?php echo ($settings['currency']=='EUR')?'selected':''; ?>>EUR</option><option value="GBP" <?php echo ($settings['currency']=='GBP')?'selected':''; ?>>GBP</option></select></div>
                <button type="submit" class="btn">Save General</button>
            </form>
        </div>
        <!-- Security View -->
        <div class="view" id="view-security">
            <h2 style="margin-bottom:20px;">Security Settings</h2>
            <form id="securityForm" style="max-width:600px;">
                <div class="form-group"><label>Change Admin Password</label><input type="password" name="new_password" placeholder="New password" minlength="6"></div>
                <div class="form-group"><label>Confirm Password</label><input type="password" name="confirm_password" placeholder="Confirm new password"></div>
                <button type="submit" class="btn">Update Password</button>
            </form>
        </div>
    </div>
</div>

<!-- Modals -->
<div class="modal" id="productModal"><div class="modal-content"><span class="close" onclick="closeModal('productModal')">&times;</span><h3 id="productModalTitle">Add Product</h3>
<form id="productForm"><input type="hidden" name="id" id="productId"><div class="form-group"><label>Name</label><input name="name" required></div><div class="form-group"><label>Price</label><input name="price" type="number" step="0.01" required></div><div class="form-group"><label>Category</label><select name="category"><option>job</option><option>service</option><option>gear</option></select></div><button type="submit" class="btn">Save</button></form></div></div>
<div class="modal" id="memberModal"><div class="modal-content"><span class="close" onclick="closeModal('memberModal')">&times;</span><h3 id="memberModalTitle">Add Member</h3>
<form id="memberForm"><input type="hidden" name="id" id="memberId"><div class="form-group"><label>Full Name</label><input name="name" required></div><div class="form-group"><label>Email</label><input name="email" type="email" required></div><div class="form-group"><label>Phone</label><input name="phone" required pattern="[0-9]+"></div><div class="form-group"><label>Password (leave blank to keep current)</label><input name="password" type="password"></div><button type="submit" class="btn">Save</button></form></div></div>
<div class="modal" id="subModal"><div class="modal-content"><span class="close" onclick="closeModal('subModal')">&times;</span><h3 id="subModalTitle">Add Subscription</h3>
<form id="subForm"><input type="hidden" name="id" id="subId"><div class="form-group"><label>User ID</label><input name="user_id" required></div><div class="form-group"><label>Plan</label><input name="plan" required></div><div class="form-group"><label>Amount</label><input name="amount" type="number" step="0.01" required></div><div class="form-group"><label>Status</label><select name="status"><option>active</option><option>pending</option><option>canceled</option></select></div><button type="submit" class="btn">Save</button></form></div></div>
<div class="modal" id="jobModal"><div class="modal-content"><span class="close" onclick="closeModal('jobModal')">&times;</span><h3 id="jobModalTitle">Add Job Listing</h3>
<form id="jobForm"><input type="hidden" name="id" id="jobId"><div class="form-group"><label>Title</label><input name="name" required></div><div class="form-group"><label>Company</label><input name="company" required></div><div class="form-group"><label>Location</label><input name="location" required></div><button type="submit" class="btn">Save</button></form></div></div>

<div class="toast-container" id="toastContainer"></div>

<script>
// ---------- Initial Data ----------
let stats = <?php echo json_encode(['members'=>$total_members,'products'=>$total_products,'subs'=>$active_subs,'revenue'=>$revenue]); ?>;
let members = <?php echo json_encode($members); ?>;
let products = <?php echo json_encode($products); ?>;
let subs = <?php echo json_encode($subscriptions); ?>;
let jobs = <?php echo json_encode($job_listings); ?>;

// ---------- Helpers ----------
function showToast(msg, type='info') { const c=document.getElementById('toastContainer'); const t=document.createElement('div'); t.className='toast toast-'+type; t.textContent=msg; c.appendChild(t); setTimeout(()=>{t.style.opacity='0';t.style.transform='translateX(40px)';setTimeout(()=>t.remove(),400);},3500); }
function openModal(id){ document.getElementById(id).classList.add('show'); }
function closeModal(id){ document.getElementById(id).classList.remove('show'); }
function toggleDark(){ document.body.classList.toggle('dark'); localStorage.setItem('darkMode', document.body.classList.contains('dark')); }
if(localStorage.getItem('darkMode')==='true') document.body.classList.add('dark');

// ---------- Navigation ----------
document.querySelectorAll('.sidebar .menu a[data-view]').forEach(el=>{
    el.addEventListener('click',function(e){
        e.preventDefault();
        document.querySelectorAll('.sidebar .menu a').forEach(a=>a.classList.remove('active'));
        this.classList.add('active');
        document.querySelectorAll('.view').forEach(v=>v.classList.remove('active'));
        document.getElementById('view-'+this.dataset.view).classList.add('active');
        if(window.innerWidth<=992) document.getElementById('sidebar').classList.remove('open');
    });
});

// ---------- Charts ----------
let membersChart, revenueChart, analyticsChart;
function initCharts(){
    const ctx1=document.getElementById('membersChart').getContext('2d');
    membersChart=new Chart(ctx1,{type:'bar',data:{labels:['Total Members'],datasets:[{label:'Members',data:[stats.members],backgroundColor:'#6c5ce7'}]}});
    const ctx2=document.getElementById('revenueChart').getContext('2d');
    revenueChart=new Chart(ctx2,{type:'doughnut',data:{labels:['Active Subs','Inactive'],datasets:[{data:[stats.subs,Math.max(0,stats.members-stats.subs)],backgroundColor:['#00b894','#e0e0e0']}]}});
    const ctx3=document.getElementById('analyticsChart').getContext('2d');
    analyticsChart=new Chart(ctx3,{type:'line',data:{labels:['Jan','Feb','Mar','Apr','May','Jun'],datasets:[{label:'Signups',data:[12,19,15,22,28,34],borderColor:'#6c5ce7',fill:false}]}});
}
// ---------- Update Stats ----------
function updateStats(){ document.getElementById('stat-members').textContent=stats.members; document.getElementById('stat-products').textContent=stats.products; document.getElementById('stat-subs').textContent=stats.subs; document.getElementById('stat-revenue').textContent='$'+stats.revenue; }
function renderRecentMembers(){ const t=document.getElementById('recent-members'); t.innerHTML=members.slice(0,5).map(m=>`<tr><td>${m.name}</td><td>${m.email}</td><td>${m.phone}</td></tr>`).join(''); }

// ---------- Generic Table Render (with pagination) ----------
function renderTable(data, tbodyId, paginationId, cols, rowFn, pageSize=5){
    let page=1; const totalPages=Math.ceil(data.length/pageSize);
    function render(){
        const start=(page-1)*pageSize, end=start+pageSize;
        const pageData=data.slice(start,end);
        document.getElementById(tbodyId).innerHTML=pageData.map(rowFn).join('');
        const pg=document.getElementById(paginationId);
        if(totalPages<=1){ pg.innerHTML=''; return; }
        let html='';
        if(page>1) html+=`<button onclick="pagePrev('${paginationId}')">«</button>`;
        for(let i=1;i<=totalPages;i++) html+=`<span class="${i===page?'active':''}" onclick="pageGo(${i},'${paginationId}')">${i}</span>`;
        if(page<totalPages) html+=`<button onclick="pageNext('${paginationId}')">»</button>`;
        pg.innerHTML=html;
    }
    window.pageGo=(p,id)=>{ const idx=Array.from(document.querySelectorAll('.view.active .pagination')).findIndex(el=>el.id===id); if(idx!==-1){ /* fine */ } page=p; render(); };
    window.pagePrev=(id)=>{ if(page>1){page--; render();} };
    window.pageNext=(id)=>{ if(page<totalPages){page++; render();} };
    render();
}

// Products
function renderProducts(){
    renderTable(products, 'products-tbody', 'products-pagination', ['id','name','price','category','actions'],
        p=>`<tr><td>${p.id}</td><td>${p.name}</td><td>$${p.price}</td><td>${p.category}</td><td class="actions"><i class="fas fa-edit" onclick="editProduct(${p.id})"></i><i class="fas fa-trash-alt" style="color:#e74c3c;" onclick="deleteProduct(${p.id})"></i></td></tr>`
    );
}
// Members
function renderMembers(){
    renderTable(members, 'members-tbody', 'members-pagination', ['name','email','phone','actions'],
        m=>`<tr><td>${m.name}</td><td>${m.email}</td><td>${m.phone}</td><td class="actions"><i class="fas fa-edit" onclick="editMember(${m.id})"></i><i class="fas fa-trash-alt" style="color:#e74c3c;" onclick="deleteMember(${m.id})"></i></td></tr>`
    );
}
// Subscriptions
function renderSubs(){
    renderTable(subs, 'subs-tbody', 'subs-pagination', ['id','user_id','plan','amount','status','actions'],
        s=>`<tr><td>${s.id}</td><td>${s.user_id}</td><td>${s.plan}</td><td>$${s.amount}</td><td><span style="background:${s.status==='active'?'#00b894':'#e74c3c'};color:#fff;padding:2px 10px;border-radius:12px;">${s.status}</span></td><td class="actions"><i class="fas fa-edit" onclick="editSub(${s.id})"></i><i class="fas fa-trash-alt" style="color:#e74c3c;" onclick="deleteSub(${s.id})"></i></td></tr>`
    );
}
// Jobs
function renderJobs(){
    renderTable(jobs, 'jobs-tbody', 'jobs-pagination', ['name','company','location','actions'],
        j=>`<tr><td>${j.name}</td><td>${j.company||'N/A'}</td><td>${j.location||'N/A'}</td><td class="actions"><i class="fas fa-edit" onclick="editJob(${j.id})"></i><i class="fas fa-trash-alt" style="color:#e74c3c;" onclick="deleteJob(${j.id})"></i></td></tr>`
    );
}

// ---------- CRUD API calls ----------
async function apiCall(action, method='GET', data=null){
    const opts={method, headers:{'Content-Type':'application/json'}};
    if(data) opts.body=JSON.stringify(data);
    const res=await fetch('api.php?action='+action, opts);
    return res.json();
}
// Products
window.deleteProduct=async(id)=>{ if(!confirm('Delete product?'))return; const r=await apiCall('products&id='+id,'DELETE'); if(r.status==='success'){ products=products.filter(p=>p.id!==id); renderProducts(); showToast('Deleted','success');}else showToast(r.message,'error'); };
window.editProduct=(id)=>{ const p=products.find(x=>x.id===id); if(!p)return; document.getElementById('productModalTitle').textContent='Edit Product'; document.getElementById('productId').value=p.id; document.getElementById('productForm').querySelector('[name="name"]').value=p.name; document.getElementById('productForm').querySelector('[name="price"]').value=p.price; document.getElementById('productForm').querySelector('[name="category"]').value=p.category; openModal('productModal'); };
document.getElementById('productForm').onsubmit=async(e)=>{ e.preventDefault(); const fd=new FormData(e.target); const data=Object.fromEntries(fd.entries()); const isEdit=!!data.id; const r=await apiCall('products', isEdit?'PUT':'POST', data); if(r.status==='success'){ closeModal('productModal'); const res=await apiCall('products'); if(res.data) products=res.data; renderProducts(); showToast('Saved','success');}else showToast(r.message,'error'); };
// Members
window.deleteMember=async(id)=>{ if(!confirm('Delete member?'))return; const r=await apiCall('members&id='+id,'DELETE'); if(r.status==='success'){ members=members.filter(m=>m.id!==id); renderMembers(); renderRecentMembers(); showToast('Deleted','success');}else showToast(r.message,'error'); };
window.editMember=(id)=>{ const m=members.find(x=>x.id===id); if(!m)return; document.getElementById('memberModalTitle').textContent='Edit Member'; document.getElementById('memberId').value=m.id; document.getElementById('memberForm').querySelector('[name="name"]').value=m.name; document.getElementById('memberForm').querySelector('[name="email"]').value=m.email; document.getElementById('memberForm').querySelector('[name="phone"]').value=m.phone; document.getElementById('memberForm').querySelector('[name="password"]').value=''; openModal('memberModal'); };
document.getElementById('memberForm').onsubmit=async(e)=>{ e.preventDefault(); const fd=new FormData(e.target); const data=Object.fromEntries(fd.entries()); const isEdit=!!data.id; const r=await apiCall('members', isEdit?'PUT':'POST', data); if(r.status==='success'){ closeModal('memberModal'); const res=await apiCall('members'); if(res.data) members=res.data; renderMembers(); renderRecentMembers(); showToast('Saved','success');}else showToast(r.message,'error'); };
// Subs
window.deleteSub=async(id)=>{ if(!confirm('Delete subscription?'))return; const r=await apiCall('subscriptions&id='+id,'DELETE'); if(r.status==='success'){ subs=subs.filter(s=>s.id!==id); renderSubs(); showToast('Deleted','success');}else showToast(r.message,'error'); };
window.editSub=(id)=>{ const s=subs.find(x=>x.id===id); if(!s)return; document.getElementById('subModalTitle').textContent='Edit Subscription'; document.getElementById('subId').value=s.id; document.getElementById('subForm').querySelector('[name="user_id"]').value=s.user_id; document.getElementById('subForm').querySelector('[name="plan"]').value=s.plan; document.getElementById('subForm').querySelector('[name="amount"]').value=s.amount; document.getElementById('subForm').querySelector('[name="status"]').value=s.status; openModal('subModal'); };
document.getElementById('subForm').onsubmit=async(e)=>{ e.preventDefault(); const fd=new FormData(e.target); const data=Object.fromEntries(fd.entries()); const isEdit=!!data.id; const r=await apiCall('subscriptions', isEdit?'PUT':'POST', data); if(r.status==='success'){ closeModal('subModal'); const res=await apiCall('subscriptions'); if(res.data) subs=res.data; renderSubs(); showToast('Saved','success');}else showToast(r.message,'error'); };
// Jobs
window.deleteJob=async(id)=>{ if(!confirm('Delete job?'))return; const r=await apiCall('products&id='+id,'DELETE'); if(r.status==='success'){ jobs=jobs.filter(j=>j.id!==id); renderJobs(); showToast('Deleted','success');}else showToast(r.message,'error'); };
window.editJob=(id)=>{ const j=jobs.find(x=>x.id===id); if(!j)return; document.getElementById('jobModalTitle').textContent='Edit Job'; document.getElementById('jobId').value=j.id; document.getElementById('jobForm').querySelector('[name="name"]').value=j.name; document.getElementById('jobForm').querySelector('[name="company"]').value=j.company||''; document.getElementById('jobForm').querySelector('[name="location"]').value=j.location||''; openModal('jobModal'); };
document.getElementById('jobForm').onsubmit=async(e)=>{ e.preventDefault(); const fd=new FormData(e.target); const data=Object.fromEntries(fd.entries()); data.category='job'; const isEdit=!!data.id; const r=await apiCall('products', isEdit?'PUT':'POST', data); if(r.status==='success'){ closeModal('jobModal'); const res=await apiCall('products'); if(res.data) jobs=res.data.filter(p=>p.category==='job'); renderJobs(); showToast('Saved','success');}else showToast(r.message,'error'); };

// ---------- Settings Forms ----------
['paymentForm','seoForm','langForm','smtpForm','generalForm','securityForm'].forEach(id=>{
    document.getElementById(id).onsubmit=async(e)=>{
        e.preventDefault();
        const fd=new FormData(e.target);
        const data=Object.fromEntries(fd.entries());
        if(id==='securityForm'){ if(data.new_password!==data.confirm_password){ showToast('Passwords do not match','error'); return; } if(!data.new_password){ showToast('Password required','error'); return; } data.action='security'; }
        else data.action='settings';
        const r=await apiCall('settings','POST',data);
        if(r.status==='success') showToast('Settings saved','success');
        else showToast(r.message||'Error','error');
    }
});

// ---------- Init ----------
updateStats();
renderRecentMembers();
renderProducts();
renderMembers();
renderSubs();
renderJobs();
initCharts();

// Export CSV
document.querySelectorAll('.table-wrap').forEach((el,idx)=>{
    const btn=document.createElement('button');
    btn.className='btn btn-secondary';
    btn.style.marginTop='10px';
    btn.innerHTML='<i class="fas fa-file-csv"></i> Export CSV';
    btn.onclick=function(){
        const rows=el.querySelectorAll('table tr');
        let csv='';
        rows.forEach(row=>{
            const cells=row.querySelectorAll('th, td');
            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();
    };
    el.appendChild(btn);
});
</script>
</body>
</html>
Back to Directory=ceiIENDB`