<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title><?php echo e($title ?? 'HIPL CRM'); ?></title>
    <?php echo app('Illuminate\Foundation\Vite')(['resources/js/app.js']); ?>
    <style>
        :root {
            --crm-sidebar-width: 252px;
            --crm-sidebar-collapsed-width: 168px;
            --crm-surface: #f4f7fb;
            --crm-panel: rgba(255, 255, 255, 0.86);
            --crm-ink: #162033;
            --crm-muted: #6d7890;
            --crm-line: rgba(22, 32, 51, 0.08);
            --crm-accent: #1f6feb;
            --crm-accent-soft: rgba(31, 111, 235, 0.12);
        }

        body {
            background:
                radial-gradient(circle at top left, rgba(73, 132, 255, 0.14), transparent 28%),
                radial-gradient(circle at bottom right, rgba(255, 196, 102, 0.18), transparent 24%),
                var(--crm-surface);
            color: var(--crm-ink);
        }

        .crm-shell {
            min-height: 100vh;
        }

        .crm-sidebar {
            width: var(--crm-sidebar-width);
            min-height: 100vh;
            background: rgba(12, 18, 30, 0.94);
            color: #fff;
            border-right: 1px solid rgba(255, 255, 255, 0.08);
            transition: width 0.24s ease;
            position: sticky;
            top: 0;
            overflow: hidden;
            backdrop-filter: blur(16px);
            z-index: 1030;
        }

        .crm-sidebar .sidebar-content {
            width: 100%;
        }

        .crm-shell.is-collapsed .crm-sidebar {
            width: var(--crm-sidebar-collapsed-width);
        }

        .crm-shell.is-collapsed .sidebar-brand-subtitle,
        .crm-shell.is-collapsed .sidebar-user-role {
            display: none !important;
        }

        .crm-shell.is-collapsed .sidebar-link {
            justify-content: flex-start;
            padding-left: 0.9rem;
            padding-right: 0.9rem;
        }

        .crm-shell.is-collapsed .sidebar-section {
            padding-left: 0.6rem;
            padding-right: 0.6rem;
        }

        .sidebar-brand {
            padding: 1.4rem 1.2rem 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .sidebar-brand-badge {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, #2d74ff, #7cc7ff);
            color: #fff;
            font-weight: 800;
            box-shadow: 0 12px 24px rgba(45, 116, 255, 0.28);
            flex-shrink: 0;
        }

        .sidebar-brand-title {
            font-size: 1.15rem;
            font-weight: 700;
            letter-spacing: 0.01em;
        }

        .sidebar-brand-subtitle {
            color: rgba(255, 255, 255, 0.62);
            font-size: 0.82rem;
        }

        .sidebar-section {
            padding: 1rem 0.9rem 1.25rem;
        }

        .sidebar-section-label {
            color: rgba(255, 255, 255, 0.46);
            font-size: 0.74rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            margin-bottom: 0.7rem;
            padding: 0 0.8rem;
            text-transform: uppercase;
        }

        .sidebar-link {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            color: rgba(255, 255, 255, 0.82);
            text-decoration: none;
            padding: 0.82rem 0.9rem;
            border-radius: 16px;
            margin-bottom: 0.35rem;
            transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
        }

        .sidebar-link:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.08);
            transform: translateX(2px);
        }

        .sidebar-link.active {
            background: linear-gradient(135deg, rgba(46, 117, 255, 0.92), rgba(103, 177, 255, 0.9));
            color: #fff;
            box-shadow: 0 16px 28px rgba(31, 111, 235, 0.24);
        }

        .sidebar-link-icon {
            width: 18px;
            text-align: center;
            flex-shrink: 0;
            margin-right: 0.05rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .sidebar-user {
            margin-top: auto;
            padding: 1rem 1rem 1.2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .crm-shell.is-collapsed .sidebar-user {
            padding-left: 0.7rem;
            padding-right: 0.7rem;
        }

        .crm-shell.is-collapsed .sidebar-brand {
            padding-left: 0.9rem;
            padding-right: 0.9rem;
        }

        .crm-shell.is-collapsed .sidebar-brand-copy,
        .crm-shell.is-collapsed .sidebar-link-text,
        .crm-shell.is-collapsed .sidebar-user-copy,
        .crm-shell.is-collapsed .sidebar-section-label {
            display: block !important;
        }

        .crm-shell.is-collapsed .sidebar-link-text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 108px;
            font-size: 0.9rem;
        }

        .crm-shell.is-collapsed .sidebar-section-label {
            font-size: 0.68rem;
            letter-spacing: 0.08em;
            padding-left: 0.3rem;
            padding-right: 0.3rem;
        }

        .crm-shell.is-collapsed .sidebar-user-name {
            font-size: 0.84rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 80px;
        }

        .sidebar-user-panel {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 18px;
            padding: 0.9rem;
        }

        .sidebar-user-name {
            font-size: 0.92rem;
            font-weight: 600;
        }

        .sidebar-user-role {
            color: rgba(255, 255, 255, 0.58);
            font-size: 0.78rem;
        }

        .crm-main {
            min-width: 0;
        }

        .crm-topbar {
            position: sticky;
            top: 0;
            z-index: 1020;
            padding: 1rem 1.4rem;
            backdrop-filter: blur(16px);
            background: rgba(244, 247, 251, 0.78);
            border-bottom: 1px solid var(--crm-line);
        }

        .crm-topbar-panel,
        .crm-content-panel {
            background: var(--crm-panel);
            border: 1px solid var(--crm-line);
            border-radius: 24px;
            box-shadow: 0 22px 52px rgba(17, 24, 39, 0.08);
            backdrop-filter: blur(14px);
        }

        .crm-topbar-panel {
            padding: 0.9rem 1rem;
        }

        .crm-content-wrap {
            padding: 1.4rem;
        }

        .crm-content-panel {
            padding: 1.35rem;
        }

        .crm-toggle-btn {
            width: 44px;
            height: 44px;
            border-radius: 14px;
        }

        .crm-mobile-sidebar {
            width: min(280px, 86vw);
            background: rgba(12, 18, 30, 0.98);
            color: #fff;
        }

        .crm-mobile-sidebar .offcanvas-header {
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        @media (max-width: 991.98px) {
            .crm-sidebar {
                display: none;
            }

            .crm-content-wrap,
            .crm-topbar {
                padding-left: 1rem;
                padding-right: 1rem;
            }
        }
    </style>
</head>
<body>
<?php
    $sideSites = \App\Models\Website::orderBy('name')->get();
?>

<div class="crm-shell d-lg-flex" data-admin-shell>
    <aside class="crm-sidebar d-none d-lg-flex flex-column">
        <div class="sidebar-content d-flex flex-column min-vh-100">
            <div class="sidebar-brand d-flex align-items-center gap-3">
                <div class="sidebar-brand-badge">H</div>
                <div class="sidebar-brand-copy">
                    <div class="sidebar-brand-title">HIPL CRM</div>
                    <div class="sidebar-brand-subtitle">Lead Command Center</div>
                </div>
            </div>

            <div class="sidebar-section">
                <div class="sidebar-section-label">Workspace</div>

                <a href="<?php echo e(route('dashboard')); ?>"
                   class="sidebar-link <?php echo e(request()->routeIs('dashboard') ? 'active' : ''); ?>">
                    <span class="sidebar-link-icon">▣</span>
                    <span class="sidebar-link-text">Dashboard</span>
                </a>

                <a href="<?php echo e(route('leads.index')); ?>"
                   class="sidebar-link <?php echo e(request()->routeIs('leads.index') ? 'active' : ''); ?>">
                    <span class="sidebar-link-icon">◫</span>
                    <span class="sidebar-link-text">All Leads</span>
                </a>
            </div>

            <div class="sidebar-section pt-0">
                <div class="sidebar-section-label">Websites</div>

                <?php $__currentLoopData = $sideSites; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $s): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <a href="<?php echo e(route('leads.website', ['websiteKey' => $s->key])); ?>"
                       class="sidebar-link <?php echo e(request()->routeIs('leads.website') && request('websiteKey') === $s->key ? 'active' : ''); ?>">
                        <span class="sidebar-link-icon">•</span>
                        <span class="sidebar-link-text"><?php echo e($s->name); ?></span>
                    </a>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>

            <div class="sidebar-user">
                <div class="sidebar-user-panel d-flex align-items-center gap-3">
                    <div class="sidebar-brand-badge" style="width: 38px; height: 38px; border-radius: 12px;">
                        <?php echo e(strtoupper(substr(auth()->user()->name ?? 'A', 0, 1))); ?>

                    </div>
                    <div class="sidebar-user-copy">
                        <div class="sidebar-user-name"><?php echo e(auth()->user()->name ?? ''); ?></div>
                        <div class="sidebar-user-role">Administrator</div>
                    </div>
                </div>
            </div>
        </div>
    </aside>

    <div class="crm-main flex-grow-1">
        <header class="crm-topbar">
            <div class="crm-topbar-panel d-flex align-items-center justify-content-between gap-3">
                <div class="d-flex align-items-center gap-2">
                    <button type="button"
                            class="btn btn-outline-dark crm-toggle-btn d-none d-lg-inline-flex align-items-center justify-content-center"
                            data-sidebar-toggle
                            aria-label="Toggle sidebar">
                        ☰
                    </button>

                    <button class="btn btn-outline-dark crm-toggle-btn d-inline-flex d-lg-none align-items-center justify-content-center"
                            type="button"
                            data-bs-toggle="offcanvas"
                            data-bs-target="#mobileSidebar"
                            aria-controls="mobileSidebar"
                            aria-label="Open menu">
                        ☰
                    </button>

                    <div>
                        <div class="fw-semibold"><?php echo e($title ?? 'HIPL CRM'); ?></div>
                        <div class="small text-muted">Modern lead operations workspace</div>
                    </div>
                </div>

                <form method="POST" action="<?php echo e(route('logout')); ?>">
                    <?php echo csrf_field(); ?>
                    <button class="btn btn-dark rounded-pill px-3">Logout</button>
                </form>
            </div>
        </header>

        <div class="crm-content-wrap">
            <main class="crm-content-panel">
                <?php if(session('status')): ?>
                    <div class="alert alert-success rounded-4"><?php echo e(session('status')); ?></div>
                <?php endif; ?>

                <?php echo e($slot ?? ''); ?>

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

<div class="offcanvas offcanvas-start crm-mobile-sidebar" tabindex="-1" id="mobileSidebar" aria-labelledby="mobileSidebarLabel">
    <div class="offcanvas-header">
        <div>
            <div class="fw-bold" id="mobileSidebarLabel">HIPL CRM</div>
            <div class="small text-white-50">Lead Command Center</div>
        </div>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div class="sidebar-section p-0">
            <div class="sidebar-section-label px-0">Workspace</div>

            <a href="<?php echo e(route('dashboard')); ?>"
               class="sidebar-link <?php echo e(request()->routeIs('dashboard') ? 'active' : ''); ?>">
                <span class="sidebar-link-icon">▣</span>
                <span class="sidebar-link-text">Dashboard</span>
            </a>

            <a href="<?php echo e(route('leads.index')); ?>"
               class="sidebar-link <?php echo e(request()->routeIs('leads.index') ? 'active' : ''); ?>">
                <span class="sidebar-link-icon">◫</span>
                <span class="sidebar-link-text">All Leads</span>
            </a>
        </div>

        <div class="sidebar-section p-0 pt-3">
            <div class="sidebar-section-label px-0">Websites</div>

            <?php $__currentLoopData = $sideSites; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $s): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <a href="<?php echo e(route('leads.website', ['websiteKey' => $s->key])); ?>"
                   class="sidebar-link <?php echo e(request()->routeIs('leads.website') && request('websiteKey') === $s->key ? 'active' : ''); ?>">
                    <span class="sidebar-link-icon">•</span>
                    <span class="sidebar-link-text"><?php echo e($s->name); ?></span>
                </a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const shell = document.querySelector('[data-admin-shell]');
        const toggle = document.querySelector('[data-sidebar-toggle]');
        const storageKey = 'hipl-crm-sidebar-collapsed';

        if (!shell || !toggle) {
            return;
        }

        const applyState = function (collapsed) {
            shell.classList.toggle('is-collapsed', collapsed);
        };

        applyState(window.localStorage.getItem(storageKey) === '1');

        toggle.addEventListener('click', function () {
            const collapsed = !shell.classList.contains('is-collapsed');
            applyState(collapsed);
            window.localStorage.setItem(storageKey, collapsed ? '1' : '0');
        });
    });
</script>
</body>
</html>
<?php /**PATH D:\Laravel_CRM\hipl-crm-new\resources\views/layouts/admin.blade.php ENDPATH**/ ?>