<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Dashboard') — {{ auth()->user()->business_name ?? 'OlaInvoice' }}</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">

    <style>
        :root {
            --sidebar-width: 260px;
            --topbar-height: 64px;
            --green: #00a651;
            --green-dark: #007a3d;
            --green-light: #e6f7ee;
            --sidebar-bg: #0f1923;
            --sidebar-muted: #a8b8c8;
        }

        body {
            background: #f4f6f9;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        }

        /* ── Sidebar ── */
        #sidebar {
            position: fixed; top: 0; left: 0; bottom: 0;
            width: var(--sidebar-width);
            background: var(--sidebar-bg);
            z-index: 1040;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease;
        }

        .sidebar-brand {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid rgba(255,255,255,0.07);
            display: flex;
            align-items: center;
            gap: 11px;
            text-decoration: none;
        }

        .sidebar-logo {
            width: 38px; height: 38px;
            background: var(--green);
            border-radius: 9px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }

        .sidebar-logo svg { width: 22px; height: 22px; }

        .brand-name {
            line-height: 1.2;
        }

        .brand-name strong {
            color: white;
            font-size: 1.05rem;
            font-weight: 700;
            display: block;
        }

        .brand-name span {
            color: var(--sidebar-muted);
            font-size: 0.68rem;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 165px;
        }

        .sidebar-section {
            padding: 1.2rem 1.5rem 0.35rem;
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.09em;
            color: rgba(168,184,200,0.45);
        }

        .sidebar-nav {
            list-style: none;
            padding: 0.4rem 0.7rem;
            margin: 0;
        }

        .sidebar-nav .nav-item { margin-bottom: 1px; }

        .sidebar-nav .nav-link {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0.58rem 0.85rem;
            color: var(--sidebar-muted);
            border-radius: 8px;
            font-size: 0.865rem;
            font-weight: 500;
            text-decoration: none;
            transition: background 0.12s, color 0.12s;
        }

        .sidebar-nav .nav-link i {
            font-size: 1rem;
            width: 18px;
            text-align: center;
            flex-shrink: 0;
        }

        .sidebar-nav .nav-link:hover {
            background: rgba(255,255,255,0.06);
            color: white;
        }

        .sidebar-nav .nav-link.active {
            background: var(--green);
            color: white;
        }

        .nav-badge {
            margin-left: auto;
            background: rgba(255,255,255,0.12);
            color: white;
            font-size: 0.68rem;
            padding: 1px 6px;
            border-radius: 8px;
        }

        .nav-link.active .nav-badge { background: rgba(255,255,255,0.25); }

        .plan-pill {
            font-size: 0.62rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .plan-free     { background: rgba(168,184,200,0.15); color: #a8b8c8; }
        .plan-pro      { background: rgba(124,58,237,0.25);  color: #a78bfa; }
        .plan-business { background: rgba(217,119,6,0.2);    color: #fbbf24; }

        .sidebar-footer {
            margin-top: auto;
            padding: 1rem 0.7rem;
            border-top: 1px solid rgba(255,255,255,0.07);
        }

        .sidebar-user {
            padding: 0.5rem 0.85rem;
            margin-bottom: 2px;
        }

        .sidebar-user .user-name {
            color: white;
            font-size: 0.82rem;
            font-weight: 600;
        }

        /* ── Topbar ── */
        #topbar {
            position: fixed; top: 0; right: 0;
            left: var(--sidebar-width);
            height: var(--topbar-height);
            background: white;
            border-bottom: 1px solid #e8edf2;
            z-index: 1030;
            display: flex;
            align-items: center;
            padding: 0 1.5rem;
            gap: 1rem;
            transition: left 0.3s ease;
        }

        .topbar-toggle { display: none; }

        .topbar-page-title {
            font-weight: 600;
            font-size: 0.95rem;
            color: #1e293b;
        }

        .user-avatar {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: var(--green-light);
            display: flex; align-items: center; justify-content: center;
            font-weight: 700;
            color: var(--green);
            font-size: 0.82rem;
            overflow: hidden;
            flex-shrink: 0;
        }

        .user-avatar img {
            width: 100%; height: 100%;
            object-fit: cover;
        }

        /* ── Main ── */
        #main-content {
            margin-left: var(--sidebar-width);
            padding-top: var(--topbar-height);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            transition: margin-left 0.3s ease;
        }

        .page-body { padding: 1.75rem; flex: 1; }

        /* ── App footer ── */
        .app-footer {
            padding: 1rem 1.75rem;
            border-top: 1px solid #e8edf2;
            background: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 0.5rem;
            font-size: 0.78rem;
            color: #94a3b8;
        }

        .app-footer a {
            color: var(--green);
            text-decoration: none;
            font-weight: 500;
        }

        .app-footer a:hover { text-decoration: underline; }

        /* ── Cards ── */
        .stat-card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
            transition: transform 0.15s, box-shadow 0.15s;
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 14px rgba(0,0,0,0.09);
        }

        .stat-icon {
            width: 46px; height: 46px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.25rem;
        }

        /* ── Table cards ── */
        .table-card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
            overflow: hidden;
        }

        .table thead th {
            background: #f8fafc;
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #64748b;
            border-bottom: 1px solid #e2e8f0;
        }

        .table td { font-size: 0.875rem; vertical-align: middle; color: #374151; }
        .table tbody tr:hover { background: #f8fafc; }

        /* ── Status badges ── */
        .status-badge {
            font-size: 0.7rem;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            display: inline-block;
        }

        .badge-draft     { background: #e2e8f0; color: #475569; }
        .badge-sent      { background: #dbeafe; color: #1d4ed8; }
        .badge-viewed    { background: #ede9fe; color: #6d28d9; }
        .badge-paid      { background: #dcfce7; color: #15803d; }
        .badge-overdue   { background: #fee2e2; color: #b91c1c; }
        .badge-cancelled { background: #f1f5f9; color: #334155; }

        /* ── Empty states ── */
        .empty-state { padding: 3.5rem 1rem; text-align: center; }
        .empty-state .empty-icon { font-size: 2.75rem; color: #cbd5e1; margin-bottom: 1rem; }
        .empty-state h5 { color: #374151; font-weight: 600; margin-bottom: 0.4rem; }
        .empty-state p  { color: #94a3b8; font-size: 0.875rem; }

        /* ── Overdue alert ── */
        .overdue-alert {
            background: linear-gradient(135deg, #fef2f2, #fee2e2);
            border: 1px solid #fecaca;
            border-radius: 10px;
            padding: 0.85rem 1.25rem;
        }

        /* ── Form controls ── */
        .form-control:focus,
        .form-select:focus {
            border-color: var(--green);
            box-shadow: 0 0 0 0.2rem rgba(0,166,81,0.15);
        }

        /* ── Sidebar overlay (mobile) ── */
        #sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1039;
            pointer-events: none;
        }

        #sidebar-overlay.show {
            display: block;
            pointer-events: all;
        }

        /* ── Responsive ── */
        @media (max-width: 991.98px) {
            #sidebar { transform: translateX(-100%); }
            #sidebar.show { transform: translateX(0); }
            #topbar { left: 0; }
            #main-content { margin-left: 0; }
            .topbar-toggle { display: flex !important; }
        }
    </style>

    @stack('styles')
</head>
<body>

<div id="sidebar-overlay"></div>

{{-- ── SIDEBAR ── --}}
<nav id="sidebar">
    <a href="{{ route('dashboard') }}" class="sidebar-brand">
        <div class="sidebar-logo">
            {{-- OlaInvoice icon --}}
            <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="8" y="6" width="46" height="58" rx="5" fill="white" opacity="0.95"/>
                <polygon points="42,6 54,6 54,18 42,18" fill="#007a3d" opacity="0.2"/>
                <polygon points="42,6 54,18 42,18" fill="white" opacity="0.65"/>
                <rect x="15" y="26" width="28" height="3" rx="1.5" fill="#00a651" opacity="0.75"/>
                <rect x="15" y="34" width="22" height="3" rx="1.5" fill="#00a651" opacity="0.5"/>
                <rect x="15" y="42" width="25" height="3" rx="1.5" fill="#00a651" opacity="0.5"/>
                <rect x="15" y="50" width="16" height="3" rx="1.5" fill="#00a651" opacity="0.3"/>
                <circle cx="61" cy="61" r="16" fill="#00c96a"/>
                <circle cx="61" cy="61" r="13" fill="#007a3d"/>
                <text x="61" y="66" text-anchor="middle" font-size="15" font-weight="900" font-family="Arial,sans-serif" fill="white">₦</text>
            </svg>
        </div>
        <div class="brand-name">
            <strong>OlaInvoice</strong>
            <span>{{ Str::limit(auth()->user()->business_name ?? 'My Business', 24) }}</span>
        </div>
    </a>

    <div class="sidebar-section">Main Menu</div>
    <ul class="sidebar-nav">
        <li class="nav-item">
            <a href="{{ route('dashboard') }}"
               class="nav-link {{ request()->routeIs('dashboard') ? 'active' : '' }}">
                <i class="bi bi-grid-fill"></i> Dashboard
            </a>
        </li>
        <li class="nav-item">
            <a href="{{ route('invoices.index') }}"
               class="nav-link {{ request()->routeIs('invoices.*') ? 'active' : '' }}">
                <i class="bi bi-receipt"></i> Invoices
                @php $overdueCount = auth()->user()->invoices()->where('status','overdue')->count(); @endphp
                @if($overdueCount > 0)
                    <span class="nav-badge">{{ $overdueCount }}</span>
                @endif
            </a>
        </li>
        <li class="nav-item">
            <a href="{{ route('clients.index') }}"
               class="nav-link {{ request()->routeIs('clients.*') ? 'active' : '' }}">
                <i class="bi bi-people-fill"></i> Clients
            </a>
        </li>
        <li class="nav-item">
            <a href="{{ route('expenses.index') }}"
               class="nav-link {{ request()->routeIs('expenses.*') ? 'active' : '' }}">
                @if(auth()->user()->isFreePlan())
                    <i class="bi bi-lock-fill" style="color:#fbbf24;"></i>
                @else
                    <i class="bi bi-wallet2"></i>
                @endif
                Expenses
                @if(auth()->user()->isFreePlan())
                    <span class="nav-badge" style="background:rgba(251,191,36,0.2);color:#fbbf24;">Pro</span>
                @endif
            </a>
        </li>
    </ul>

    <div class="sidebar-section">Analytics</div>
    <ul class="sidebar-nav">
        <li class="nav-item">
            <a href="{{ route('reports.revenue') }}"
               class="nav-link {{ request()->routeIs('reports.*') ? 'active' : '' }}">
                @if(!auth()->user()->canAccessReports())
                    <i class="bi bi-lock-fill" style="color:#fbbf24;"></i>
                @else
                    <i class="bi bi-bar-chart-fill"></i>
                @endif
                Reports
                @if(!auth()->user()->canAccessReports())
                    <span class="nav-badge" style="background:rgba(251,191,36,0.2);color:#fbbf24;">Biz</span>
                @endif
            </a>
        </li>
    </ul>

    <div class="sidebar-section">Account</div>
    <ul class="sidebar-nav">
        <li class="nav-item">
            <a href="{{ route('settings.profile') }}"
               class="nav-link {{ request()->routeIs('settings.*') ? 'active' : '' }}">
                <i class="bi bi-gear-fill"></i> Settings
            </a>
        </li>
    </ul>

    <div class="sidebar-footer">
        <div class="sidebar-user mb-2">
            <div class="user-name">{{ auth()->user()->name }}</div>
            <span class="plan-pill plan-{{ auth()->user()->plan }} mt-1 d-inline-block">
                <i class="bi bi-patch-check-fill me-1"></i>{{ auth()->user()->plan_label }}
            </span>
        </div>
        <form method="POST" action="{{ route('logout') }}" class="px-1">
            @csrf
            <button type="submit"
                    class="nav-link w-100 text-start border-0"
                    style="background:none;color:var(--sidebar-muted);">
                <i class="bi bi-box-arrow-left"></i> Sign Out
            </button>
        </form>
    </div>
</nav>

{{-- ── TOPBAR ── --}}
<header id="topbar">
    <button class="btn btn-sm btn-light topbar-toggle rounded-2" id="sidebarToggle">
        <i class="bi bi-list fs-5"></i>
    </button>

    <span class="topbar-page-title">@yield('page-title', 'Dashboard')</span>
    <div class="ms-auto d-flex align-items-center gap-2">

        <a href="{{ route('invoices.create') }}"
           class="btn btn-sm d-none d-md-inline-flex align-items-center gap-1 fw-600"
           style="background:#00a651;color:white;border:none;">
            <i class="bi bi-plus-lg"></i> New Invoice
        </a>

        <div class="dropdown">
            <button class="btn p-0 border-0 d-flex align-items-center gap-2" data-bs-toggle="dropdown">
                <div class="user-avatar">
                    @if(auth()->user()->logo_path)
                        <img src="{{ auth()->user()->logo_url }}" alt="">
                    @else
                        {{ strtoupper(substr(auth()->user()->name, 0, 2)) }}
                    @endif
                </div>
                <span class="d-none d-md-block" style="font-size:0.85rem;font-weight:500;color:#374151;">
                    {{ auth()->user()->name }}
                </span>
                <i class="bi bi-chevron-down d-none d-md-block" style="font-size:0.65rem;color:#94a3b8;"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow-sm mt-1" style="min-width:200px;font-size:0.875rem;">
                <li>
                    <div class="px-3 py-2">
                        <div class="fw-600 text-dark" style="font-size:0.85rem;">{{ auth()->user()->name }}</div>
                        <div class="text-muted" style="font-size:0.75rem;">{{ auth()->user()->email }}</div>
                    </div>
                </li>
                <li><hr class="dropdown-divider my-1"></li>
                <li>
                    <a class="dropdown-item py-2" href="{{ route('settings.profile') }}">
                        <i class="bi bi-person me-2 text-muted"></i>Profile
                    </a>
                </li>
                <li>
                    <a class="dropdown-item py-2" href="{{ route('settings.subscription') }}">
                        <i class="bi bi-patch-check me-2 text-muted"></i>Subscription
                    </a>
                </li>
                <li><hr class="dropdown-divider my-1"></li>
                <li>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="dropdown-item py-2 text-danger">
                            <i class="bi bi-box-arrow-left me-2"></i>Sign Out
                        </button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</header>

{{-- ── MAIN ── --}}
<main id="main-content">
    <div class="page-body">

        {{-- Flash messages --}}
        @if(session('success'))
            <div class="alert d-flex align-items-center gap-2 mb-3 alert-dismissible fade show"
                 style="background:#dcfce7;color:#15803d;border:none;border-radius:10px;" role="alert">
                <i class="bi bi-check-circle-fill flex-shrink-0"></i>
                <span>{{ session('success') }}</span>
                <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if(session('error'))
            <div class="alert d-flex align-items-center gap-2 mb-3 alert-dismissible fade show alert-danger"
                 style="border:none;border-radius:10px;" role="alert">
                <i class="bi bi-exclamation-circle-fill flex-shrink-0"></i>
                <span>{{ session('error') }}</span>
                <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @yield('content')
    </div>

    {{-- ── APP FOOTER ── --}}
    <footer class="app-footer">
        <div>
            &copy; {{ date('Y') }} <strong style="color:#374151;">OlaInvoice</strong>
            &nbsp;·&nbsp; Built for Nigerian SMEs
        </div>
        <div class="d-flex align-items-center gap-3 flex-wrap">
            <span>
                Made with <span style="color:#e11d48;">♥</span> by
                <a href="https://adeyemoportfolio.armitech.com.ng/about.php"
                   target="_blank" rel="noopener">
                    Adeyemo Olamilekan
                </a>
            </span>
            <span style="color:#e2e8f0;">|</span>
            <a href="https://adeyemoportfolio.armitech.com.ng/about.php"
               target="_blank" rel="noopener">
                Portfolio
            </a>
            <a href="mailto:adeyemoolamilekan08@gmail.com">Contact</a>
        </div>
    </footer>
</main>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    // ── Sidebar toggle (mobile)
    const sidebar  = document.getElementById('sidebar');
    const overlay  = document.getElementById('sidebar-overlay');
    const toggle   = document.getElementById('sidebarToggle');

    toggle?.addEventListener('click', () => {
        const open = sidebar.classList.toggle('show');
        overlay.classList.toggle('show', open);
        overlay.style.pointerEvents = open ? 'all' : 'none';
    });

    overlay.addEventListener('click', () => {
        sidebar.classList.remove('show');
        overlay.classList.remove('show');
        overlay.style.pointerEvents = 'none';
    });

    // ── Global toast helper
    window.Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3500,
        timerProgressBar: true,
    });

    // ── Global confirm helper
    window.confirmAction = (message, callback) => {
        Swal.fire({
            title: 'Are you sure?',
            text: message,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc2626',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Yes, proceed',
        }).then(r => { if (r.isConfirmed) callback(); });
    };

    // ── CSRF token for fetch() calls
    window.csrfToken = document.querySelector('meta[name="csrf-token"]').content;

    // ── Auto-dismiss flash alerts
    setTimeout(() => {
        document.querySelectorAll('.alert').forEach(el => {
            bootstrap.Alert.getOrCreateInstance(el)?.close();
        });
    }, 4500);
</script>

@stack('scripts')
</body>
</html>
