<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $__env->yieldContent('title', 'Vendor Portal'); ?> - MyOpticals</title>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        :root {
            --primary: #EC4899;
            --primary-dark: #DB2777;
            --bg-dark: #0B0F19;
            --sidebar-bg: #131B2E;
            --card-bg: #1E293B;
            --border: rgba(255, 255, 255, 0.08);
            --text: #F8FAFC;
            --text-muted: #94A3B8;
            --success: #10B981;
            --danger: #EF4444;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; }
        body { background: var(--bg-dark); color: var(--text); display: flex; min-height: 100vh; }

        /* Sidebar */
        aside {
            width: 270px; background: var(--sidebar-bg); border-right: 1px solid var(--border);
            display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem;
        }
        .logo { font-size: 1.35rem; font-weight: 800; display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; margin-bottom: 2rem; }
        .logo span { color: var(--primary); }
        .nav-menu { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
        .nav-link {
            display: flex; align-items: center; gap: 12px; padding: 0.75rem 1rem; border-radius: 12px;
            color: var(--text-muted); text-decoration: none; font-weight: 500; transition: 0.2s;
        }
        .nav-link:hover, .nav-link.active { background: rgba(236, 72, 153, 0.15); color: #fff; border-left: 3px solid var(--primary); }
        .nav-link i { font-size: 1.1rem; }

        /* Main Content */
        main { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }
        header {
            padding: 1.2rem 2.5rem; background: rgba(19, 27, 46, 0.8); backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;
        }
        .content { padding: 2.5rem; flex: 1; }

        /* Cards & Tables */
        .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; margin-bottom: 1.5rem; }
        .grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
        .stat-card {
            background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem;
            display: flex; align-items: center; gap: 1.2rem;
        }
        .stat-icon {
            width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
            font-size: 1.4rem; background: rgba(236, 72, 153, 0.15); color: var(--primary);
        }
        .stat-val { font-size: 1.8rem; font-weight: 700; margin-top: 4px; }

        table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
        th, td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
        th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.5px; }

        .badge { display: inline-block; padding: 4px 10px; border-radius: 99px; font-size: 0.75rem; font-weight: 700; }
        .badge-success { background: rgba(16, 185, 129, 0.2); color: var(--success); }
        .badge-danger { background: rgba(239, 68, 68, 0.2); color: var(--danger); }

        .btn {
            padding: 0.6rem 1.2rem; border-radius: 8px; font-weight: 600; text-decoration: none;
            display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; font-size: 0.9rem; transition: 0.2s;
        }
        .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
        .btn-primary:hover { opacity: 0.9; }
        .btn-danger { background: rgba(239, 68, 68, 0.2); color: var(--danger); }

        .alert-success { background: rgba(16, 185, 129, 0.2); border: 1px solid var(--success); color: #fff; padding: 1rem; border-radius: 12px; margin-bottom: 1.5rem; }

        input, select, textarea {
            width: 100%; padding: 0.75rem 1rem; background: #0B0F19; border: 1px solid var(--border);
            border-radius: 8px; color: #fff; font-size: 0.95rem; margin-top: 6px; margin-bottom: 1rem;
        }
    </style>
</head>
<body>

    <!-- Sidebar -->
    <aside>
        <div>
            <a href="/vendor/dashboard" class="logo">
                <i class="fa-solid fa-glasses" style="color: var(--primary);"></i>
                <div>Vendor<span>Portal</span></div>
            </a>
            <ul class="nav-menu">
                <li><a href="/vendor/dashboard" class="nav-link <?php echo e(request()->is('vendor/dashboard') ? 'active' : ''); ?>"><i class="fa-solid fa-gauge-high"></i> Dashboard</a></li>
                <li><a href="/vendor/frames" class="nav-link <?php echo e(request()->is('vendor/frames*') ? 'active' : ''); ?>"><i class="fa-solid fa-glasses"></i> Frame Catalog</a></li>
                <li><a href="/vendor/lenses" class="nav-link <?php echo e(request()->is('vendor/lenses*') ? 'active' : ''); ?>"><i class="fa-solid fa-eye"></i> Contact Lenses</a></li>
                <li><a href="/vendor/orders" class="nav-link <?php echo e(request()->is('vendor/orders*') ? 'active' : ''); ?>"><i class="fa-solid fa-cart-shopping"></i> Orders</a></li>
                <li><a href="/vendor/customers" class="nav-link <?php echo e(request()->is('vendor/customers*') ? 'active' : ''); ?>"><i class="fa-solid fa-users"></i> Customers</a></li>
                <li><a href="/vendor/stock" class="nav-link <?php echo e(request()->is('vendor/stock*') ? 'active' : ''); ?>"><i class="fa-solid fa-boxes-stacked"></i> Stock</a></li>
                <li><a href="/vendor/bills" class="nav-link <?php echo e(request()->is('vendor/bills*') ? 'active' : ''); ?>"><i class="fa-solid fa-file-invoice"></i> Bill Book</a></li>
                <li><a href="/vendor/banners" class="nav-link <?php echo e(request()->is('vendor/banners*') ? 'active' : ''); ?>"><i class="fa-solid fa-image"></i> Banners & Sliders</a></li>
                <li><a href="/vendor/offers" class="nav-link <?php echo e(request()->is('vendor/offers*') ? 'active' : ''); ?>"><i class="fa-solid fa-tags"></i> Offers & Deals</a></li>
                <li><a href="/vendor/events" class="nav-link <?php echo e(request()->is('vendor/events*') ? 'active' : ''); ?>"><i class="fa-solid fa-calendar-days"></i> Sales & Events</a></li>
                <li><a href="/vendor/notifications" class="nav-link <?php echo e(request()->is('vendor/notifications*') ? 'active' : ''); ?>"><i class="fa-solid fa-paper-plane"></i> Push Broadcasts</a></li>
                <li><a href="/vendor/cutout-tool" class="nav-link <?php echo e(request()->is('vendor/cutout*') ? 'active' : ''); ?>"><i class="fa-solid fa-wand-magic-sparkles"></i> AI Cutout Tool</a></li>
                <li><a href="/vendor/subscription" class="nav-link <?php echo e(request()->is('vendor/subscription*') ? 'active' : ''); ?>"><i class="fa-solid fa-crown"></i> My Plan & Upgrade</a></li>
                <li><a href="/vendor/profile" class="nav-link <?php echo e(request()->is('vendor/profile*') ? 'active' : ''); ?>"><i class="fa-solid fa-shop"></i> Store & Payments</a></li>
                <li><a href="/" target="_blank" class="nav-link"><i class="fa-solid fa-globe"></i> View Website</a></li>
            </ul>
        </div>
        <div>
            <form action="<?php echo e(route('vendor.logout')); ?>" method="POST">
                <?php echo csrf_field(); ?>
                <button type="submit" class="btn btn-danger" style="width: 100%; justify-content: center;"><i class="fa-solid fa-arrow-right-from-bracket"></i> Logout</button>
            </form>
        </div>
    </aside>

    <!-- Main Section -->
    <main>
        <header>
            <h2><?php echo $__env->yieldContent('header_title', 'Vendor Dashboard'); ?></h2>
            <div style="display: flex; align-items: center; gap: 15px;">
                <span style="font-weight: 600;"><?php echo e(Auth::user()->vendorProfile->vendor_name ?? Auth::user()->name); ?></span>
                <div style="width: 36px; height: 36px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700;">V</div>
            </div>
        </header>

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

                </div>
            <?php endif; ?>

            <?php if($errors->any()): ?>
                <div class="alert-success" style="background: rgba(239, 68, 68, 0.2); border-color: var(--danger);">
                    <strong>Please correct the following:</strong>
                    <ul style="margin: 0.5rem 0 0 1.2rem;">
                        <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <li><?php echo e($error); ?></li>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </ul>
                </div>
            <?php endif; ?>

            <?php echo $__env->yieldContent('content'); ?>
        </div>
    </main>

</body>
</html>
<?php /**PATH D:\Clients\MInfosoftware\LiveApp\MyOpticals\backend\resources\views/layouts/vendor.blade.php ENDPATH**/ ?>