<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard — <?php echo e($company?->name ?? $user->name); ?></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <style>
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#f4f6f9; min-height:100vh; display:flex; flex-direction:column; }

        /* ── HEADER ── */
        header { background:#000; color:#fff; height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 1.75rem; position:fixed; top:0;left:0;right:0; z-index:200; border-bottom:1px solid #1a1a1a; gap:1rem; }
        .header-center { flex:1; display:flex; justify-content:center; }
        .brand { display:flex; align-items:center; gap:.65rem; }
        .brand-logo { height:36px; width:auto; max-width:140px; object-fit:contain; }
        .header-right { display:flex; align-items:center; gap:1rem; }
        .header-search { display:flex; align-items:center; gap:.5rem; background:#111; border:1px solid #2a2a2a; border-radius:25px; padding:.35rem .9rem; transition:.18s; }
        .header-search:focus-within { background:#fff; border-color:#fff; }
        .header-search:focus-within i { color:#999; }
        .header-search i { color:#555; font-size:.8rem; transition:.18s; }
        .header-search input { background:transparent; border:none; outline:none; color:#fff; font-size:.83rem; width:200px; transition:.18s; }
        .header-search:focus-within input { color:#111; }
        .header-search input::placeholder { color:#555; }

        /* ── SEARCH OVERLAY ── */
        .search-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:999; backdrop-filter:blur(6px); animation:overlayIn .18s ease; }
        .search-overlay.active { display:flex; flex-direction:column; align-items:center; padding-top:7vh; }
        @keyframes overlayIn { from{opacity:0} to{opacity:1} }
        .search-modal { background:#fff; border-radius:20px; width:100%; max-width:680px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.4); animation:modalIn .2s ease; }
        @keyframes modalIn { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
        .search-modal-input { display:flex; align-items:center; gap:.75rem; padding:1rem 1.4rem; border-bottom:1px solid #f1f5f9; }
        .search-modal-input i { color:#9ca3af; font-size:1.1rem; flex-shrink:0; }
        .search-modal-input input { flex:1; border:none; outline:none; font-size:1.05rem; color:#111; font-family:inherit; }
        .search-modal-input input::placeholder { color:#c4c4c4; }
        .search-modal-input .close-search { background:#f1f5f9; border:none; border-radius:8px; padding:.3rem .65rem; font-size:.78rem; font-weight:700; color:#6b7280; cursor:pointer; transition:.15s; }
        .search-modal-input .close-search:hover { background:#e5e7eb; color:#111; }
        .search-body { padding:1.25rem 1.4rem; max-height:60vh; overflow-y:auto; }
        .search-section-title { font-size:.65rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:#9ca3af; margin-bottom:.6rem; }
        .search-empty { text-align:center; padding:3rem 1rem; }
        .search-empty i { font-size:2.5rem; color:#e5e7eb; display:block; margin-bottom:.75rem; }
        .search-empty h4 { font-size:.95rem; font-weight:700; color:#374151; margin-bottom:.3rem; }
        .search-empty p  { font-size:.82rem; color:#9ca3af; line-height:1.55; }
        .search-quick { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.25rem; }
        .search-tag { display:inline-flex; align-items:center; gap:.4rem; background:#f8fafc; border:1.5px solid #e5e7eb; border-radius:20px; padding:.3rem .8rem; font-size:.78rem; font-weight:600; color:#374151; cursor:pointer; transition:.15s; }
        .search-tag:hover { border-color:#25d366; color:#16a34a; background:#f0fdf4; }
        .search-tag i { font-size:.72rem; }
        .search-footer { padding:.75rem 1.4rem; border-top:1px solid #f1f5f9; display:flex; align-items:center; justify-content:space-between; background:#fafafa; }
        .search-footer span { font-size:.74rem; color:#9ca3af; }
        .search-shortcut { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; color:#9ca3af; }
        .kbd { background:#e5e7eb; border:1px solid #d1d5db; border-radius:5px; padding:.1rem .4rem; font-size:.7rem; font-weight:700; color:#374151; }
        .user-pill { display:flex; align-items:center; gap:.6rem; background:#111; border:1px solid #2a2a2a; border-radius:30px; padding:.3rem .75rem .3rem .4rem; }
        .user-avatar { width:28px; height:28px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.75rem; color:#000; flex-shrink:0; }
        .user-pill .uname { font-size:.82rem; color:#ccc; font-weight:500; }
        .btn-logout { background:transparent; border:1px solid #2a2a2a; color:#888; padding:.35rem .9rem; border-radius:7px; cursor:pointer; font-size:.8rem; font-weight:600; transition:.18s; }
        .btn-logout:hover { border-color:#555; color:#fff; }

        /* ── LAYOUT ── */
        .layout { display:flex; flex:1; margin-top:58px; min-height:calc(100vh - 58px); }

        /* ── SIDEBAR ── */
        aside { width:240px; background:#000; position:fixed; top:58px; left:0; bottom:0; overflow-y:auto; padding:1.25rem 0 2rem; border-right:1px solid #1a1a1a; scrollbar-width:thin; scrollbar-color:#222 #000; }
        .company-badge { margin:.25rem .9rem .75rem; background:linear-gradient(135deg,#1a7a4a,#25d366); border-radius:14px; padding:.65rem 1rem; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
        .company-badge::before { content:''; position:absolute; right:-30px; top:-30px; width:110px; height:110px; background:rgba(255,255,255,.1); border-radius:50%; }
        .company-badge::after  { content:''; position:absolute; left:-20px; bottom:-30px; width:90px; height:90px; background:rgba(255,255,255,.07); border-radius:50%; }
        .cb-inner { position:relative; z-index:1; display:flex; justify-content:center; align-items:center; }
        .cb-name { font-size:.95rem; font-weight:800; color:#000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .cb-plan { font-size:.72rem; color:rgba(0,0,0,.65); margin-top:3px; display:flex; align-items:center; gap:.35rem; font-weight:600; }
        .cb-plan-dot { width:6px; height:6px; border-radius:50%; background:#000; display:inline-block; opacity:.5; }
        .cb-plan-dot.trial { background:#000; opacity:.5; }
        .cb-plan-dot.expired { background:#7f0000; opacity:1; }
        .cb-wa-status { display:inline-flex; align-items:center; gap:.35rem; font-size:.68rem; font-weight:800; margin-top:0; padding:.32rem .75rem; border-radius:20px; background:rgba(0,0,0,.18); border:none; }
        .wa-dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0; }
        .wa-dot.connected { background:#25d366; animation:pulse 1.8s infinite; }
        .wa-dot.disconnected { background:#ef4444; }
        .nav-section-label { padding:1.1rem 1.3rem .4rem; font-size:.6rem; font-weight:800; letter-spacing:1.8px; color:#555; text-transform:uppercase; }
        .nav-item { display:flex; align-items:center; gap:.75rem; padding:.72rem 1.3rem; color:#f0f0f0; text-decoration:none; font-size:.87rem; font-weight:600; border-left:3px solid transparent; transition:.15s; cursor:pointer; white-space:nowrap; }
        .nav-item i { width:16px; text-align:center; font-size:.85rem; flex-shrink:0; color:#ccc; }
        .nav-item:hover { background:#25d366; color:#000; border-left-color:#1db954; }
        .nav-item:hover i { color:#000; }
        .nav-item.active { background:#25d366; color:#000; border-left-color:#1db954; font-weight:700; }
        .nav-item.active i { color:#000; }
        .nav-item.soon { opacity:.45; cursor:not-allowed; }
        .nav-item.soon:hover { background:transparent; color:#f0f0f0; border-left-color:transparent; }
        .nav-item.soon:hover i { color:#ccc; }
        .nav-sep { height:1px; background:#2e2e2e; margin:.6rem 0; border:none; }
        .nav-badge { font-size:.6rem; background:#1c1c1c; color:#555; border-radius:20px; padding:.12rem .5rem; font-weight:700; margin-left:auto; border:1px solid #2e2e2e; }

        /* ── MAIN ── */
        main { margin-left:240px; flex:1; padding:0; animation:fadeIn .2s ease both; display:flex; flex-direction:column; }
        @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

        /* ── TOP WELCOME BAR ── */
        .top-bar { background:#000; border-bottom:1px solid #1a1a1a; padding:.9rem 2rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; }
        .top-bar-left h1 { font-size:1.15rem; font-weight:800; color:#fff; display:flex; align-items:center; gap:.45rem; }
        .top-bar-left p  { font-size:.78rem; color:#6b7280; margin-top:2px; }
        .quick-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
        .qa-btn { display:inline-flex; align-items:center; gap:.45rem; border:1.5px solid #fff; border-radius:25px; padding:.38rem .9rem; font-size:.78rem; font-weight:600; color:#000; background:#fff; cursor:pointer; text-decoration:none; transition:.15s; white-space:nowrap; }
        .qa-btn:hover { border-color:#25d366; color:#000; background:#25d366; }
        .qa-btn i { font-size:.75rem; }
        .qa-btn.verified { border-color:#1877f2; color:#fff; background:#1877f2; }
        .qa-btn.verified:hover { background:#1557c0; border-color:#1557c0; color:#fff; }

        /* ── CONTENT AREA ── */
        .content { padding:1.5rem 2rem; flex:1; }

        /* ── 3-COLUMN TOP ROW ── */
        .top-row { display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:1.25rem; margin-bottom:1.25rem; }
        @media(max-width:1200px){ .top-row{ grid-template-columns:1fr 1fr; } }
        @media(max-width:860px){ .top-row{ grid-template-columns:1fr; } }

        /* Greeting Card */
        .greeting-card { background:linear-gradient(135deg,#075e54 0%,#128c7e 60%,#25d366 100%); border-radius:16px; padding:1.35rem 1.5rem; color:#fff; position:relative; overflow:hidden; }
        .greeting-card::before { content:''; position:absolute; left:-60px; top:-60px; width:280px; height:280px; background:rgba(255,255,255,.09); border-radius:50%; }
        .greeting-card::after  { content:''; position:absolute; right:-80px; bottom:-80px; width:260px; height:260px; background:rgba(255,255,255,.07); border-radius:50%; }
        .greeting-card-inner { position:relative; z-index:1; }
        .greeting-time { font-size:.68rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; background:rgba(255,255,255,.18); display:inline-block; padding:.22rem .7rem; border-radius:20px; margin-bottom:.65rem; }
        .greeting-card h2 { font-size:1.5rem; font-weight:800; display:flex; align-items:center; gap:.4rem; }
        .greeting-card .g-date { font-size:.8rem; color:rgba(255,255,255,.7); margin-top:.3rem; }
        .quick-links { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-top:1.1rem; position:relative; z-index:1; }
        .ql-item { background:#000; border:1px solid #222; border-radius:10px; padding:.7rem .8rem; display:flex; align-items:center; gap:.55rem; cursor:pointer; transition:.15s; text-decoration:none; }
        .ql-item:hover { background:#1a1a1a; border-color:#333; }
        .ql-item i { font-size:.9rem; color:#fff; width:16px; text-align:center; }
        .ql-item-text { font-size:.8rem; font-weight:700; color:#fff; }
        .ql-item-sub  { font-size:.65rem; color:#888; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

        /* Connect WhatsApp Card */
        .connect-card { background:#fff; border-radius:16px; padding:1.5rem; box-shadow:0 1px 4px rgba(0,0,0,.06); border:1.5px solid #f1f5f9; display:flex; flex-direction:column; }
        .connect-card-top { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.1rem; }
        .connect-icon-big { width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,#dcfce7,#bbf7d0); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .connect-icon-big i { font-size:1.4rem; color:#16a34a; }
        .connect-card-top h3 { font-size:1rem; font-weight:800; color:#111; margin-bottom:.25rem; }
        .connect-card-top p  { font-size:.78rem; color:#9ca3af; line-height:1.5; }
        .connect-methods { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:1.1rem; }
        .cm-item { border:1.5px solid #e5e7eb; border-radius:11px; padding:.7rem .5rem; text-align:center; cursor:pointer; transition:.15s; }
        .cm-item:hover { border-color:#25d366; background:#f0fdf4; }
        .cm-item i { font-size:1.1rem; display:block; margin-bottom:.35rem; }
        .cm-item span { font-size:.7rem; font-weight:600; color:#374151; display:block; line-height:1.3; }
        .cm-embedded i { color:#6366f1; }
        .cm-qr i { color:#f59e0b; }
        .cm-manual i { color:#3b82f6; }
        .btn-connect { width:100%; background:#111; color:#fff; border:none; padding:.8rem; border-radius:11px; font-size:.88rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:.5rem; transition:.18s; margin-top:auto; }
        .btn-connect:hover { background:#25d366; color:#000; }

        /* Subscription Card */
        .sub-card { background:#fff; border-radius:16px; padding:1.35rem 1.4rem; box-shadow:0 1px 4px rgba(0,0,0,.06); border:1.5px solid #f1f5f9; display:flex; flex-direction:column; gap:0; }
        .sub-renewal-label { font-size:.72rem; font-weight:700; color:#ef4444; margin-bottom:.5rem; display:flex; align-items:center; gap:.35rem; }
        .sub-renewal-label.ok { color:#16a34a; }
        .sub-renewal-label.warn { color:#f59e0b; }
        .sub-price { font-size:2rem; font-weight:900; color:#111; line-height:1; }
        .sub-price sup { font-size:.9rem; font-weight:700; vertical-align:top; margin-top:.25rem; display:inline-block; }
        .sub-period { font-size:.78rem; color:#9ca3af; margin-left:.2rem; font-weight:500; }
        .sub-billed-row { font-size:.76rem; color:#9ca3af; margin-top:.35rem; margin-bottom:1rem; }
        .sub-billed-row span { color:#374151; font-weight:600; }
        .sub-renewal-row { display:flex; justify-content:space-between; align-items:center; font-size:.78rem; margin-bottom:.4rem; }
        .sub-renewal-row .label { color:#374151; font-weight:600; }
        .sub-renewal-row .days  { font-weight:800; }
        .sub-renewal-row .days.red { color:#ef4444; }
        .sub-renewal-row .days.ok  { color:#16a34a; }
        .sub-renewal-row .days.warn { color:#f59e0b; }
        .renewal-bar { height:6px; background:#f1f5f9; border-radius:10px; overflow:hidden; margin-bottom:1.1rem; }
        .renewal-fill { height:100%; border-radius:10px; transition:width .4s ease; }
        .renewal-fill.red  { background:#ef4444; }
        .renewal-fill.ok   { background:#25d366; }
        .renewal-fill.warn { background:#f59e0b; }
        .btn-manage-sub { width:100%; background:#25d366; color:#000; border:none; padding:.78rem; border-radius:11px; font-size:.88rem; font-weight:800; cursor:pointer; transition:.18s; display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:auto; }
        .btn-manage-sub:hover { background:#1db954; }
        .no-plan-sub { text-align:center; padding:1.5rem .5rem; }
        .no-plan-sub i { font-size:1.8rem; color:#e5e7eb; margin-bottom:.65rem; display:block; }
        .no-plan-sub p { font-size:.8rem; color:#9ca3af; }

        /* ── RESOURCE USAGE ── */
        .section-title { font-size:.82rem; font-weight:800; color:#111; letter-spacing:.2px; margin-bottom:.85rem; display:flex; align-items:center; gap:.5rem; text-transform:uppercase; letter-spacing:.8px; }
        .section-title i { color:#9ca3af; font-size:.75rem; }
        .resource-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:.9rem; margin-bottom:1.4rem; }
        @media(max-width:1200px){ .resource-grid{ grid-template-columns:repeat(3,1fr); } }
        @media(max-width:800px) { .resource-grid{ grid-template-columns:repeat(2,1fr); } }
        .res-card { background:#fff; border-radius:14px; padding:1.1rem 1.2rem; box-shadow:0 1px 3px rgba(0,0,0,.05); border:1.5px solid #f1f5f9; transition:.18s; }
        .res-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.08); transform:translateY(-2px); }
        .res-card-top { display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; }
        .res-icon { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; }
        .res-card-top span { font-size:.82rem; font-weight:700; color:#374151; }
        .res-count { font-size:1.7rem; font-weight:900; color:#111; line-height:1; margin-bottom:2px; }
        .res-limit { font-size:.7rem; color:#9ca3af; margin-bottom:.6rem; }
        .res-bar { height:5px; background:#f1f5f9; border-radius:10px; overflow:hidden; margin-bottom:.4rem; }
        .res-bar-fill { height:100%; border-radius:10px; }
        .res-utilised { font-size:.65rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }

        /* ── METRICS ── */
        .metrics-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:.9rem; margin-bottom:1.4rem; }
        @media(max-width:1200px){ .metrics-grid{ grid-template-columns:repeat(3,1fr); } }
        @media(max-width:800px) { .metrics-grid{ grid-template-columns:repeat(2,1fr); } }
        .metric-card { background:#fff; border-radius:14px; padding:1.1rem 1.2rem; box-shadow:0 1px 3px rgba(0,0,0,.05); border:1.5px solid #f1f5f9; }
        .metric-card-top { display:flex; align-items:center; gap:.55rem; margin-bottom:.7rem; }
        .metric-icon { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.82rem; flex-shrink:0; }
        .metric-card-top span { font-size:.82rem; font-weight:700; color:#374151; }
        .metric-val { font-size:1.75rem; font-weight:900; color:#111; line-height:1; }
        .metric-sub { font-size:.68rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase; margin-top:.3rem; }
        .realtime-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.63rem; font-weight:700; color:#16a34a; background:#f0fdf4; padding:.15rem .5rem; border-radius:20px; }
        .realtime-badge::before { content:''; width:5px; height:5px; border-radius:50%; background:#25d366; display:inline-block; animation:pulse 1.5s infinite; }
        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

        /* ── TOAST ── */
        .toast { position:fixed; bottom:1.5rem; right:1.5rem; background:#0f0f0f; color:#fff; padding:.75rem 1.2rem; border-radius:12px; font-size:.85rem; font-weight:600; display:flex; align-items:center; gap:.6rem; z-index:900; box-shadow:0 8px 24px rgba(0,0,0,.3); animation:toastIn .25s ease; }
        .toast i { color:#25d366; }
        @keyframes toastIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

        /* Colors */
        .c-purple { background:#f5f3ff; color:#7c3aed; }
        .c-orange  { background:#fff7ed; color:#ea580c; }
        .c-blue    { background:#eff6ff; color:#2563eb; }
        .c-green   { background:#f0fdf4; color:#16a34a; }
        .c-pink    { background:#fdf2f8; color:#db2777; }
        .c-teal    { background:#f0fdfa; color:#0d9488; }
        .c-indigo  { background:#eef2ff; color:#4f46e5; }
        .c-amber   { background:#fffbeb; color:#d97706; }
        .bar-purple { background:linear-gradient(90deg,#7c3aed,#a855f7); }
        .bar-orange { background:linear-gradient(90deg,#ea580c,#f97316); }
        .bar-blue   { background:linear-gradient(90deg,#2563eb,#60a5fa); }
        .bar-green  { background:linear-gradient(90deg,#16a34a,#25d366); }
        .bar-teal   { background:linear-gradient(90deg,#0d9488,#2dd4bf); }
        .bar-indigo { background:linear-gradient(90deg,#4f46e5,#818cf8); }
        .bar-pink   { background:linear-gradient(90deg,#db2777,#f472b6); }
        .bar-amber  { background:linear-gradient(90deg,#d97706,#fbbf24); }
        .util-purple { color:#7c3aed; }
        .util-orange { color:#ea580c; }
        .util-blue   { color:#2563eb; }
        .util-green  { color:#16a34a; }
        .util-teal   { color:#0d9488; }
        .util-grey   { color:#9ca3af; }
    </style>
</head>
<body>

<?php
    $appLogo    = \App\Models\Setting::get('app_logo', '');
    $appName    = \App\Models\Setting::get('project_name', 'On Cloud API');
    $hasLogo    = $appLogo && file_exists(public_path('uploads/' . $appLogo));
    $initials   = strtoupper(substr($user->name ?? 'U', 0, 1));
    $planStatus = $user->plan_status ?? 'trial';
    $firstName  = explode(' ', $user->name)[0];
    $companyName = $company?->name ?? $user->business_name ?? 'My Company';

    // Time greeting
    $hour = now()->hour;
    $greeting = $hour < 12 ? 'GOOD MORNING' : ($hour < 17 ? 'GOOD AFTERNOON' : 'GOOD EVENING');

    // Subscription renewal calc
    $trialEnds   = $user->trial_ends_at;
    $daysLeft    = $trialEnds ? max(0, (int) now()->diffInDays($trialEnds, false)) : null;
    $totalDays   = 30; // default trial period
    $renewalPct  = $daysLeft !== null ? max(2, min(100, round(($daysLeft / $totalDays) * 100))) : 0;
    $renewalColor = $daysLeft === null ? 'ok' : ($daysLeft <= 3 ? 'red' : ($daysLeft <= 10 ? 'warn' : 'ok'));

    $periodLabels = ['1month'=>'/monthly','3months'=>'/3 months','6months'=>'/6 months','1year'=>'/yearly'];
?>

<!-- HEADER -->
<header>
    <div class="brand">
        <?php if($hasLogo): ?>
            <img src="<?php echo e(asset('uploads/' . $appLogo)); ?>" class="brand-logo" alt="<?php echo e($appName); ?>">
        <?php else: ?>
            <svg viewBox="0 0 48 48" fill="none" width="32" height="32">
                <circle cx="24" cy="24" r="24" fill="#25D366"/>
                <path d="M24 10C16.268 10 10 16.268 10 24c0 2.637.718 5.107 1.97 7.23L10 38l7-1.93A13.93 13.93 0 0024 38c7.732 0 14-6.268 14-14S31.732 10 24 10z" fill="white"/>
            </svg>
        <?php endif; ?>
    </div>
    <div class="header-center">
        <div class="header-search" onclick="openSearch()" style="cursor:pointer;">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="Search contacts, messages..." readonly style="cursor:pointer;">
        </div>
    </div>
    <div class="header-right">
        <div class="user-pill">
            <div class="user-avatar"><?php echo e($initials); ?></div>
            <span class="uname"><?php echo e($user->name); ?></span>
        </div>
        <form method="POST" action="<?php echo e(route('logout')); ?>">
            <?php echo csrf_field(); ?>
            <button type="submit" class="btn-logout"><i class="fas fa-sign-out-alt"></i> Logout</button>
        </form>
    </div>
</header>

<div class="layout">
    <?php echo $__env->make('user.partials.sidebar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

    <!-- MAIN -->
    <main>

        <!-- TOP WELCOME BAR -->
        <div class="top-bar">
            <div class="top-bar-left">
                <h1>Welcome back, <?php echo e($companyName); ?> 🤖</h1>
                <p><?php echo e(now()->format('l, F j, Y')); ?></p>
            </div>
            <div class="quick-actions">
                <a href="#" class="qa-btn soon"><i class="fas fa-bullhorn"></i> Send Campaign</a>
                <a href="#" class="qa-btn soon"><i class="fas fa-user-plus"></i> Create Contact</a>
                <a href="#" class="qa-btn soon"><i class="fas fa-robot"></i> Create Reply Bot</a>
                <a href="#" class="qa-btn soon"><i class="fas fa-file-alt"></i> Create Template</a>
                <a href="#" class="qa-btn verified"><i class="fab fa-meta"></i> Meta Verified Tech Provider</a>
            </div>
        </div>

        <div class="content">

            <!-- TOP 3-COLUMN ROW -->
            <div class="top-row">

                <!-- Greeting + Quick Links -->
                <div class="greeting-card">
                <div class="greeting-card-inner">
                    <div class="greeting-time"><?php echo e($greeting); ?></div>
                    <h2>HELLO, <?php echo e(strtoupper($firstName)); ?> ✋</h2>
                    <div class="g-date"><?php echo e(now()->format('l, F j')); ?></div>
                    <div class="quick-links">
                        <a href="#" class="ql-item">
                            <i class="fas fa-bullhorn"></i>
                            <div>
                                <div class="ql-item-text">Campaigns</div>
                                <div class="ql-item-sub">Send broadcast...</div>
                            </div>
                        </a>
                        <a href="#" class="ql-item">
                            <i class="fas fa-tools"></i>
                            <div>
                                <div class="ql-item-text">Tools</div>
                                <div class="ql-item-sub">Manage chat bot &...</div>
                            </div>
                        </a>
                        <a href="#" class="ql-item">
                            <i class="fas fa-address-book"></i>
                            <div>
                                <div class="ql-item-text">Contacts</div>
                                <div class="ql-item-sub">Manage contacts</div>
                            </div>
                        </a>
                        <a href="#" class="ql-item">
                            <i class="fas fa-chart-bar"></i>
                            <div>
                                <div class="ql-item-text">Reports</div>
                                <div class="ql-item-sub">View analytics</div>
                            </div>
                        </a>
                    </div>
                </div><!-- /greeting-card-inner -->
                </div>

                <!-- Link WhatsApp -->
                <div class="connect-card">
                    <div class="connect-card-top">
                        <div class="connect-icon-big"><i class="fab fa-whatsapp"></i></div>
                        <div>
                            <h3>Link WhatsApp</h3>
                            <p>Unleash the power of automated messaging and AI support with official WABA.</p>
                        </div>
                    </div>
                    <div class="connect-methods" style="grid-template-columns:1fr;">
                        <div class="cm-item cm-manual">
                            <i class="fas fa-link"></i>
                            <span>Manual Connection</span>
                        </div>
                    </div>
                    <a href="<?php echo e(route('user.whatsapp-setup')); ?>" class="btn-connect">
                        <i class="fas fa-link"></i> Connect Now
                    </a>
                </div>

                <!-- Subscription -->
                <div class="sub-card">
                    <?php if($plan): ?>
                    <?php
                        $renewalDateStr = $trialEnds ? $trialEnds->format('Y-m-d') . ' (' . $daysLeft . ' Days)' : 'No expiry set';
                        $renewalLabelClass = $renewalColor === 'red' ? '' : ($renewalColor === 'ok' ? 'ok' : 'warn');
                    ?>
                    <div class="sub-renewal-label <?php echo e($renewalLabelClass); ?>">
                        <i class="fas fa-calendar-alt"></i>
                        <?php if($trialEnds): ?>
                            Next Renewal: <?php echo e($trialEnds->format('Y-m-d')); ?> (<?php echo e($daysLeft); ?> Days)
                        <?php else: ?>
                            Plan: <?php echo e(ucfirst($planStatus)); ?>

                        <?php endif; ?>
                    </div>
                    <div>
                        <span class="sub-price"><sup><?php echo e($plan->currency ?? '$'); ?></sup><?php echo e(number_format($plan->price, 0)); ?></span><span class="sub-period"><?php echo e($periodLabels[$plan->period] ?? '/'.$plan->period); ?></span>
                    </div>
                    <div class="sub-billed-row">
                        Billed <?php echo e(ucfirst(str_replace(['1month','3months','6months','1year'],['Monthly','Every 3 Months','Every 6 Months','Yearly'], $plan->period ?? ''))); ?> &bull; <span><?php echo e($user->email); ?></span>
                    </div>
                    <div class="sub-renewal-row">
                        <span class="label">Renewal in</span>
                        <span class="days <?php echo e($renewalColor); ?>">
                            <?php if($daysLeft !== null): ?> <?php echo e($daysLeft); ?> days <?php else: ?> Active <?php endif; ?>
                        </span>
                    </div>
                    <div class="renewal-bar">
                        <div class="renewal-fill <?php echo e($renewalColor); ?>" style="width:<?php echo e($renewalPct); ?>%;"></div>
                    </div>
                    <button class="btn-manage-sub" onclick="alert('Subscription management coming soon!')">
                        <i class="fas fa-credit-card"></i> Manage Subscription Plan
                    </button>
                    <?php else: ?>
                    <div class="no-plan-sub">
                        <i class="fas fa-box-open"></i>
                        <p>No plan assigned yet.<br>Contact your administrator.</p>
                    </div>
                    <button class="btn-manage-sub" style="margin-top:1rem;" onclick="alert('Contact your administrator to assign a plan.')">
                        <i class="fas fa-envelope"></i> Contact Admin
                    </button>
                    <?php endif; ?>
                </div>
            </div>

            <!-- RESOURCE USAGE -->
            <div class="section-title"><i class="fas fa-chart-pie"></i> Resource Usage</div>
            <div class="resource-grid">
                <?php
                    $resources = [
                        ['label'=>'Messages',  'icon'=>'fas fa-envelope',     'color'=>'c-purple', 'bar'=>'bar-purple', 'util'=>'util-purple', 'used'=>0, 'limit'=>$plan?->messages_limit ?? 0],
                        ['label'=>'Templates', 'icon'=>'fas fa-file-alt',     'color'=>'c-orange',  'bar'=>'bar-orange', 'util'=>'util-orange', 'used'=>0, 'limit'=>500],
                        ['label'=>'Campaigns', 'icon'=>'fas fa-bullhorn',     'color'=>'c-blue',   'bar'=>'bar-blue',   'util'=>'util-blue',   'used'=>0, 'limit'=>$plan?->campaigns_limit ?? 0],
                        ['label'=>'Contacts',  'icon'=>'fas fa-address-book', 'color'=>'c-green',  'bar'=>'bar-green',  'util'=>'util-green',  'used'=>0, 'limit'=>$plan?->contacts_limit ?? 0],
                        ['label'=>'Apps',      'icon'=>'fas fa-puzzle-piece', 'color'=>'c-teal',   'bar'=>'bar-teal',   'util'=>'util-teal',   'used'=>$apps->count(), 'limit'=>0],
                    ];
                ?>
                <?php $__currentLoopData = $resources; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $res): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php
                    $pct = ($res['limit'] > 0) ? min(100, round(($res['used'] / $res['limit']) * 100)) : ($res['used'] > 0 ? 100 : 0);
                    $limitLabel = $res['limit'] == 0 ? 'Unlimited' : number_format($res['limit']);
                ?>
                <div class="res-card">
                    <div class="res-card-top">
                        <div class="res-icon <?php echo e($res['color']); ?>"><i class="<?php echo e($res['icon']); ?>"></i></div>
                        <span><?php echo e($res['label']); ?></span>
                    </div>
                    <div class="res-count"><?php echo e(number_format($res['used'])); ?></div>
                    <div class="res-limit">/ <?php echo e($limitLabel); ?></div>
                    <div class="res-bar">
                        <div class="res-bar-fill <?php echo e($res['bar']); ?>" style="width:<?php echo e($pct); ?>%;"></div>
                    </div>
                    <div class="res-utilised <?php echo e($res['util']); ?>">
                        <?php if($res['limit'] == 0): ?> Real-time <?php else: ?> <?php echo e($pct); ?>% Utilized <?php endif; ?>
                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>

            <!-- REAL-TIME METRICS -->
            <div class="section-title"><i class="fas fa-bolt"></i> Real-time Metrics</div>
            <div class="metrics-grid">
                <?php
                    $metrics = [
                        ['label'=>'Sent',     'icon'=>'fas fa-paper-plane', 'color'=>'c-amber',  'bar'=>'bar-amber',  'val'=>0],
                        ['label'=>'Received', 'icon'=>'fas fa-inbox',       'color'=>'c-blue',   'bar'=>'bar-blue',   'val'=>0],
                        ['label'=>'Contacts', 'icon'=>'fas fa-users',       'color'=>'c-green',  'bar'=>'bar-green',  'val'=>0],
                        ['label'=>'Chats',    'icon'=>'fas fa-comments',    'color'=>'c-purple', 'bar'=>'bar-purple', 'val'=>0],
                        ['label'=>'Tags',     'icon'=>'fas fa-tags',        'color'=>'c-pink',   'bar'=>'bar-pink',   'val'=>0],
                    ];
                ?>
                <?php $__currentLoopData = $metrics; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $m): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="metric-card">
                    <div class="metric-card-top">
                        <div class="metric-icon <?php echo e($m['color']); ?>"><i class="<?php echo e($m['icon']); ?>"></i></div>
                        <span><?php echo e($m['label']); ?></span>
                    </div>
                    <div class="metric-val"><?php echo e(number_format($m['val'])); ?></div>
                    <div class="metric-sub">
                        <span class="realtime-badge">Real-time</span>
                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>

        </div><!-- /content -->
    </main>
</div>

<!-- SEARCH OVERLAY -->
<div class="search-overlay" id="searchOverlay" onclick="handleOverlayClick(event)">
    <div class="search-modal" id="searchModal">
        <div class="search-modal-input">
            <i class="fas fa-search"></i>
            <input type="text" id="searchInput" placeholder="Search contacts, messages, campaigns..." autofocus oninput="handleSearch(this.value)">
            <button class="close-search" onclick="closeSearch()">ESC</button>
        </div>
        <div class="search-body" id="searchBody">
            <div id="searchDefault">
                <div class="search-section-title" style="margin-bottom:.75rem;">Quick Search</div>
                <div class="search-quick">
                    <span class="search-tag"><i class="fas fa-address-book"></i> Contacts</span>
                    <span class="search-tag"><i class="fas fa-inbox"></i> Inbox Messages</span>
                    <span class="search-tag"><i class="fas fa-bullhorn"></i> Campaigns</span>
                    <span class="search-tag"><i class="fas fa-file-alt"></i> Templates</span>
                    <span class="search-tag"><i class="fas fa-robot"></i> Reply Bots</span>
                </div>
                <div class="search-empty">
                    <i class="fas fa-search"></i>
                    <h4>Search everything</h4>
                    <p>Find contacts by name or number, inbox messages, campaigns, templates and more — all in one place.</p>
                </div>
            </div>
            <div id="searchResults" style="display:none;">
                <div class="search-empty">
                    <i class="fas fa-inbox"></i>
                    <h4>No results found</h4>
                    <p>Try searching with a different keyword.</p>
                </div>
            </div>
        </div>
        <div class="search-footer">
            <span>Search across contacts &amp; inbox messages</span>
            <div class="search-shortcut">
                <span class="kbd">ESC</span> to close &nbsp;
                <span class="kbd">↵</span> to select
            </div>
        </div>
    </div>
</div>

<script>
function openSearch() {
    document.getElementById('searchOverlay').classList.add('active');
    setTimeout(() => document.getElementById('searchInput').focus(), 50);
}
function closeSearch() {
    document.getElementById('searchOverlay').classList.remove('active');
    document.getElementById('searchInput').value = '';
    document.getElementById('searchDefault').style.display = 'block';
    document.getElementById('searchResults').style.display = 'none';
}
function handleOverlayClick(e) {
    if (e.target === document.getElementById('searchOverlay')) closeSearch();
}
function handleSearch(val) {
    const def = document.getElementById('searchDefault');
    const res = document.getElementById('searchResults');
    if (val.trim().length > 0) { def.style.display='none'; res.style.display='block'; }
    else { def.style.display='block'; res.style.display='none'; }
}
document.addEventListener('keydown', e => {
    if (e.key === 'Escape') closeSearch();
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); openSearch(); }
});
</script>

<?php if(session('success')): ?>
<div class="toast" id="toast">
    <i class="fas fa-check-circle"></i> <?php echo e(session('success')); ?>

    <span style="margin-left:.75rem;cursor:pointer;color:#888;" onclick="this.parentElement.remove()">✕</span>
</div>
<script>setTimeout(()=>{ const t=document.getElementById('toast'); if(t)t.remove(); }, 5000);</script>
<?php endif; ?>

</body>
</html>
<?php /**PATH /Applications/XAMPP/xamppfiles/htdocs/WhatsApp/whatsappcloudapi/resources/views/user/dashboard.blade.php ENDPATH**/ ?>