<?php
require_once __DIR__ . '/auth_guard.php';
require_once __DIR__ . '/../backend/config/database.php';

$db       = getDB();
$userId   = $_SESSION['user_id'];
$userName = $_SESSION['user_name'];

// Stats
$totalStmt   = $db->prepare("SELECT COUNT(*) FROM orders WHERE user_id=?");
$totalStmt->execute([$userId]);
$totalOrders = (int)$totalStmt->fetchColumn();

$pendingStmt = $db->prepare("SELECT COUNT(*) FROM orders WHERE user_id=? AND status='pending'");
$pendingStmt->execute([$userId]);
$pendingOrders = (int)$pendingStmt->fetchColumn();

$deliveredStmt = $db->prepare("SELECT COUNT(*) FROM orders WHERE user_id=? AND status='delivered'");
$deliveredStmt->execute([$userId]);
$deliveredOrders = (int)$deliveredStmt->fetchColumn();

$spendStmt = $db->prepare("SELECT COALESCE(SUM(total),0) FROM orders WHERE user_id=? AND status='delivered'");
$spendStmt->execute([$userId]);
$totalSpend = (float)$spendStmt->fetchColumn();

// Recent orders
$recentStmt = $db->prepare("SELECT id,total,status,fulfillment,created_at FROM orders WHERE user_id=? ORDER BY created_at DESC LIMIT 5");
$recentStmt->execute([$userId]);
$recentOrders = $recentStmt->fetchAll(PDO::FETCH_ASSOC);

$currentPage = 'dashboard';
$pageTitle   = 'My Dashboard';

function statusStyle($s){
    $map = [
        'pending'         => ['bg'=>'#fef3c7','color'=>'#d97706'],
        'confirmed'       => ['bg'=>'#dbeafe','color'=>'#2563eb'],
        'out_for_delivery'=> ['bg'=>'#ede9fe','color'=>'#7c3aed'],
        'delivered'       => ['bg'=>'#d1fae5','color'=>'#059669'],
        'cancelled'       => ['bg'=>'#fee2e2','color'=>'#dc2626'],
    ];
    return $map[$s] ?? ['bg'=>'#f1f5f9','color'=>'#475569'];
}
$navUserName = htmlspecialchars($userName);

// Additional page-specific styles injected before head.php outputs <body>
ob_start();
?>
<style>
.customer-sidebar{width:220px;flex-shrink:0;background:#fff;border-radius:14px;padding:1.25rem .875rem;border:1px solid #e8ecf0;position:sticky;top:80px;align-self:flex-start}
.sidebar-link{display:flex;align-items:center;gap:.75rem;padding:.65rem .875rem;border-radius:8px;color:#64748b;font-weight:500;font-size:.875rem;transition:all .18s;text-decoration:none}
.sidebar-link:hover{background:#f8fafc;color:#0f172a;}
.sidebar-link.active{background:#0f172a;color:#fff;font-weight:600;}
.sidebar-link.active svg{stroke:#f97316;}
.sidebar-link svg{width:16px;height:16px;stroke:currentColor;fill:none;flex-shrink:0;opacity:.7;}
.sidebar-link:hover svg,.sidebar-link.active svg{opacity:1;}
.dash-welcome{background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#7c2d12 100%);border-radius:24px;padding:2rem 2.5rem;position:relative;overflow:hidden;margin-bottom:2rem}
.dash-welcome::before{content:'';position:absolute;top:-60px;right:-60px;width:250px;height:250px;background:radial-gradient(circle,rgba(249,115,22,.25) 0%,transparent 70%)}
.dash-welcome::after{content:'';position:absolute;bottom:-40px;left:30%;width:180px;height:180px;background:radial-gradient(circle,rgba(124,45,18,.3) 0%,transparent 70%)}
.dash-stat-card{border-radius:20px;padding:1.5rem;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.dash-stat-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.08)}
.dash-action-card{border-radius:16px;padding:1.25rem;display:block;text-decoration:none;transition:transform .2s,box-shadow .2s}
.dash-action-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1)}
.new-order-btn{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;padding:.6rem 1.25rem;border-radius:10px;font-weight:700;font-size:.82rem;text-decoration:none;transition:all .2s;box-shadow:0 4px 14px rgba(249,115,22,.35)}
.new-order-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(249,115,22,.5)}
@media(max-width:1100px){
  .customer-page-wrap{padding:1.5rem 1rem!important;gap:1rem!important}
  .customer-sidebar{width:210px}
  .dash-stats-grid{grid-template-columns:repeat(2,1fr)!important;gap:1rem!important}
}
@media(max-width:900px){
  .customer-layout{flex-direction:column!important}
  .customer-sidebar{width:100%!important;position:static!important}
  .customer-sidebar nav{flex-direction:row!important;overflow-x:auto;gap:.5rem;padding-bottom:.25rem}
  .customer-sidebar nav .sidebar-link{white-space:nowrap;min-width:max-content}
  .dash-welcome{padding:1.5rem}
  .dash-welcome-inner{flex-direction:column!important;gap:1rem!important}
  .dash-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:600px){
  .customer-page-wrap{padding:1rem .75rem!important}
  .dash-welcome{padding:1.15rem 1rem;border-radius:16px}
  .dash-title{font-size:1.2rem!important;line-height:1.3}
  .new-order-btn{width:100%;justify-content:center}
  .dash-stats-grid{grid-template-columns:1fr!important;margin-bottom:1.5rem!important}
  .dash-actions-grid{grid-template-columns:1fr!important}
  .dash-recent-head{padding:1rem!important;gap:.7rem;align-items:flex-start!important;flex-direction:column}
  .dash-recent-table thead{display:none}
  .dash-recent-table,.dash-recent-table tbody,.dash-recent-table tr,.dash-recent-table td{display:block;width:100%}
  .dash-recent-table tr{padding:.75rem;border-top:1px solid #f1f5f9}
  .dash-recent-table td{padding:.35rem 0!important;border:none!important;font-size:.82rem!important}
  .dash-recent-table td::before{content:attr(data-label);display:inline-block;min-width:84px;color:#94a3b8;font-weight:700;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;margin-right:.45rem}
}
@media(max-width:400px){
  .sidebar-link{padding:.6rem .75rem;font-size:.82rem}
}
</style>
<?php
$extraStyles = ob_get_clean();

require_once __DIR__ . '/../backend/includes/head.php';
require_once __DIR__ . '/../backend/includes/navbar.php';
echo $extraStyles;
?>

<div style="max-width:1200px;margin:0 auto;padding:2rem 1.5rem;display:flex;gap:2rem;align-items:flex-start" class="customer-layout customer-page-wrap">

  <!-- Sidebar -->
  <aside class="customer-sidebar">
    <div style="text-align:center;padding:.75rem 0 1.25rem;border-bottom:1px solid #f1f5f9;margin-bottom:1rem">
      <div style="width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#0f172a,#1e293b);display:flex;align-items:center;justify-content:center;color:#f97316;font-weight:900;font-size:1.2rem;margin:0 auto .5rem"><?= strtoupper(substr($userName,0,1)) ?></div>
      <div style="font-weight:700;font-size:.875rem;color:#0f172a"><?= $navUserName ?></div>
      <div style="color:#94a3b8;font-size:.72rem">Customer Account</div>
    </div>
    <nav style="display:flex;flex-direction:column;gap:.125rem">
      <a href="/stile-lpg/customer/dashboard.php" class="sidebar-link <?= $currentPage==='dashboard'?'active':'' ?>">
        <svg viewBox="0 0 24 24" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/></svg>
        <span>Dashboard</span>
      </a>
      <a href="/stile-lpg/customer/orders.php" class="sidebar-link <?= $currentPage==='orders'?'active':'' ?>">
        <svg viewBox="0 0 24 24" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
        <span>My Orders</span>
      </a>
      <a href="/stile-lpg/customer/profile.php" class="sidebar-link <?= $currentPage==='profile'?'active':'' ?>">
        <svg viewBox="0 0 24 24" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        <span>Profile</span>
      </a>
    </nav>
  </aside>

  <!-- Main -->
  <main style="flex:1;min-width:0">
    <!-- Welcome banner -->
    <div class="dash-welcome">
      <div style="position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem" class="dash-welcome-inner">
        <div>
          <div style="display:inline-flex;align-items:center;gap:.4rem;background:rgba(249,115,22,.2);border:1px solid rgba(249,115,22,.35);border-radius:50px;padding:.3rem .85rem;margin-bottom:1rem">
            <svg width="12" height="12" fill="none" stroke="#f97316" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
            <span style="color:#f97316;font-size:.72rem;font-weight:700;letter-spacing:.05em">MY DASHBOARD</span>
          </div>
          <h1 class="dash-title" style="font-weight:900;font-size:1.6rem;color:#fff;margin-bottom:.35rem">Welcome back, <?= $navUserName ?></h1>
          <p style="color:#94a3b8;font-size:.875rem;margin:0">Manage your LPG orders, track deliveries, and update your account.</p>
        </div>
        <a href="/stile-lpg/services.php" class="new-order-btn">
          <svg width="16" height="16" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M8.5 14.5A2.5 2.5 0 0011 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 11-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 002.5 3z"/></svg>
          Order LPG Now
        </a>
      </div>
    </div>

    <!-- Stats cards -->
    <div class="dash-stats-grid" style="display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:2.5rem">
      <?php $statCards = [
        ['svg'=>'<svg width="22" height="22" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>','label'=>'Total Orders','val'=>$totalOrders,'bg'=>'linear-gradient(135deg,#eff6ff,#dbeafe)','border'=>'#bfdbfe','clr'=>'#2563eb','iconBg'=>'rgba(37,99,235,.12)','sub'=>'All time'],
        ['svg'=>'<svg width="22" height="22" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>','label'=>'Pending','val'=>$pendingOrders,'bg'=>'linear-gradient(135deg,#fff7ed,#ffedd5)','border'=>'#fed7aa','clr'=>'#d97706','iconBg'=>'rgba(217,119,6,.12)','sub'=>'Awaiting delivery'],
        ['svg'=>'<svg width="22" height="22" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>','label'=>'Delivered','val'=>$deliveredOrders,'bg'=>'linear-gradient(135deg,#f0fdf4,#dcfce7)','border'=>'#bbf7d0','clr'=>'#16a34a','iconBg'=>'rgba(22,163,74,.12)','sub'=>'Completed'],
        ['svg'=>'<svg width="22" height="22" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>','label'=>'Total Spent','val'=>'₦'.number_format($totalSpend),'bg'=>'linear-gradient(135deg,#fdf4ff,#f3e8ff)','border'=>'#e9d5ff','clr'=>'#7c3aed','iconBg'=>'rgba(124,58,237,.12)','sub'=>'Lifetime value'],
      ];
      foreach($statCards as $sc): ?>
      <div class="dash-stat-card" style="background:<?= $sc['bg'] ?>;border:1.5px solid <?= $sc['border'] ?>">
        <div style="position:absolute;top:-12px;right:-12px;width:70px;height:70px;border-radius:50%;background:<?= $sc['iconBg'] ?>;opacity:.5"></div>
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem;position:relative">
          <div style="width:44px;height:44px;border-radius:12px;background:<?= $sc['iconBg'] ?>;display:flex;align-items:center;justify-content:center"><?= $sc['svg'] ?></div>
          <svg width="40" height="20" viewBox="0 0 40 20" fill="none" style="opacity:.25"><polyline points="0,15 8,12 16,16 24,8 32,10 40,4" stroke="<?= $sc['clr'] ?>" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
        <div style="font-weight:900;font-size:1.6rem;color:<?= $sc['clr'] ?>;line-height:1;position:relative"><?= $sc['val'] ?></div>
        <div style="color:#0f172a;font-weight:700;font-size:.875rem;margin-top:.35rem"><?= $sc['label'] ?></div>
        <div style="color:#94a3b8;font-size:.75rem;margin-top:.2rem"><?= $sc['sub'] ?></div>
      </div>
      <?php endforeach; ?>
    </div>

    <!-- Quick actions -->
    <div style="margin-bottom:2.5rem">
      <h2 style="font-weight:800;font-size:1rem;color:#0f172a;margin-bottom:1.25rem">Quick Actions</h2>
      <div class="dash-actions-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem">
        <?php $actions = [
          ['svg'=>'<svg width="22" height="22" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M8.5 14.5A2.5 2.5 0 0011 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 11-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 002.5 3z"/></svg>','label'=>'Order LPG','desc'=>'Buy cooking gas now','href'=>'/stile-lpg/services.php','bg'=>'linear-gradient(135deg,#f97316,#fb923c)','light'=>false],
          ['svg'=>'<svg width="22" height="22" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg>','label'=>'Accessories','desc'=>'Gas regulators & more','href'=>'/stile-lpg/accessories.php','bg'=>'linear-gradient(135deg,#1e293b,#334155)','light'=>false],
          ['svg'=>'<svg width="22" height="22" fill="none" stroke="#475569" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>','label'=>'My Orders','desc'=>'Track your deliveries','href'=>'/stile-lpg/customer/orders.php','bg'=>'#fff','light'=>true],
          ['svg'=>'<svg width="22" height="22" fill="none" stroke="#475569" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>','label'=>'Profile','desc'=>'Update your info','href'=>'/stile-lpg/customer/profile.php','bg'=>'#fff','light'=>true],
        ];
        foreach($actions as $a): ?>
        <a href="<?= $a['href'] ?>" class="dash-action-card" style="background:<?= $a['bg'] ?>;border:1px solid <?= $a['light']?'#e2e8f0':'transparent' ?>">
          <div style="width:42px;height:42px;border-radius:10px;background:<?= $a['light']?'#f1f5f9':'rgba(255,255,255,.18)' ?>;display:flex;align-items:center;justify-content:center;margin-bottom:.75rem"><?= $a['svg'] ?></div>
          <div style="font-weight:800;font-size:.9rem;color:<?= $a['light']?'#0f172a':'#fff' ?>;margin-bottom:.2rem"><?= $a['label'] ?></div>
          <div style="font-size:.76rem;color:<?= $a['light']?'#94a3b8':'rgba(255,255,255,.7)' ?>"><?= $a['desc'] ?></div>
        </a>
        <?php endforeach; ?>
      </div>
    </div>

    <!-- Recent Orders -->
    <div style="background:#fff;border-radius:20px;border:1px solid #e2e8f0;box-shadow:0 2px 12px rgba(0,0,0,.05);overflow:hidden">
      <div class="dash-recent-head" style="padding:1.5rem;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between">
        <div style="display:flex;align-items:center;gap:.65rem">
          <div style="width:32px;height:32px;border-radius:8px;background:rgba(249,115,22,.1);display:flex;align-items:center;justify-content:center">
            <svg width="16" height="16" fill="none" stroke="#f97316" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
          </div>
          <h2 style="font-weight:800;font-size:1rem;color:#0f172a;margin:0">Recent Orders</h2>
        </div>
        <a href="/stile-lpg/customer/orders.php" style="color:#f97316;font-weight:700;font-size:.82rem;display:inline-flex;align-items:center;gap:.3rem">View all <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline stroke-linecap="round" stroke-linejoin="round" points="9 18 15 12 9 6"/></svg></a>
      </div>
      <?php if(empty($recentOrders)): ?>
      <div style="text-align:center;padding:3rem 1rem">
        <div style="width:56px;height:56px;border-radius:16px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem"><svg width="28" height="28" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg></div>
        <p style="color:#94a3b8">No orders yet. <a href="/stile-lpg/services.php" style="color:#f97316;font-weight:700">Order LPG now →</a></p>
      </div>
      <?php else: ?>
      <div style="overflow-x:auto">
        <table class="dash-recent-table" style="width:100%;border-collapse:collapse">
          <thead>
            <tr style="background:#f8f9fb">
              <?php foreach(['Order ID','Date','Amount','Type','Status'] as $col): ?>
              <th style="padding:.85rem 1.5rem;text-align:left;font-size:.75rem;font-weight:700;color:#94a3b8;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap"><?= $col ?></th>
              <?php endforeach; ?>
            </tr>
          </thead>
          <tbody>
            <?php foreach($recentOrders as $o):
              $st = statusStyle($o['status']);
              $label = ucwords(str_replace('_',' ',$o['status']));
            ?>
            <tr style="border-top:1px solid #f1f5f9">
              <td data-label="Order" style="padding:.85rem 1.5rem;font-size:.82rem;font-family:monospace;color:#475569">#<?= substr($o['id'],-8) ?></td>
              <td data-label="Date" style="padding:.85rem 1.5rem;font-size:.82rem;color:#475569"><?= date('M j, Y', strtotime($o['created_at'])) ?></td>
              <td data-label="Amount" style="padding:.85rem 1.5rem;font-weight:700;font-size:.875rem;color:#0f172a">₦<?= number_format($o['total']) ?></td>
              <td data-label="Type" style="padding:.85rem 1.5rem;font-size:.82rem;color:#475569"><?= ucfirst($o['fulfillment'] ?? '—') ?></td>
              <td data-label="Status" style="padding:.85rem 1.5rem">
                <span style="background:<?= $st['bg'] ?>;color:<?= $st['color'] ?>;font-size:.72rem;font-weight:700;padding:.25rem .75rem;border-radius:20px;white-space:nowrap"><?= $label ?></span>
              </td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      </div>
      <?php endif; ?>
    </div>
  </main>
</div>

</body>
</html>
