<!DOCTYPE html>
<html lang="en" class="scroll-smooth">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $__env->yieldContent('title', 'Client Dashboard - Invo Security'); ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <link rel="icon" href="https://cdn-icons-png.flaticon.com/512/9413/9413653.png">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">

    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    colors: {
                        primary: {
                            50: '#fef8eb',
                            100: '#fdf0d7',
                            200: '#fbe1af',
                            300: '#f9d287',
                            400: '#f7c35f',
                            500: '#f5b437',
                            600: '#d99c1e',
                            700: '#b98927',
                            800: '#946e20',
                            900: '#705419',
                        },
                        accent: {
                            50: '#f8fafc',
                            100: '#f1f5f9',
                            500: '#64748b',
                            600: '#475569',
                            700: '#334155',
                            900: '#0f172a',
                        },
                        dark: {
                           primary: '#0f172a',
                            secondary: '#1e293b',
                            tertiary: '#334155',
                            accent: '#f5b437',
                            text: '#f8fafc'
                        }
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-out',
                        'slide-in': 'slideIn 0.4s ease-out',
                        'slide-up': 'slideUp 0.5s ease-out',
                        'slide-down': 'slideDown 0.5s ease-out',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'float': 'float 6s ease-in-out infinite',
                        'shimmer': 'shimmer 2s infinite',
                        'gradient': 'gradient 3s ease infinite',
                        'bounce-subtle': 'bounceSubtle 2s infinite',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': {
                                opacity: '0'
                            },
                            '100%': {
                                opacity: '1'
                            }
                        },
                        slideIn: {
                            '0%': {
                                transform: 'translateX(-20px)',
                                opacity: '0'
                            },
                            '100%': {
                                transform: 'translateX(0)',
                                opacity: '1'
                            }
                        },
                        slideUp: {
                            '0%': {
                                transform: 'translateY(20px)',
                                opacity: '0'
                            },
                            '100%': {
                                transform: 'translateY(0)',
                                opacity: '1'
                            }
                        },
                        slideDown: {
                            '0%': {
                                transform: 'translateY(-20px)',
                                opacity: '0'
                            },
                            '100%': {
                                transform: 'translateY(0)',
                                opacity: '1'
                            }
                        },
                        float: {
                            '0%, 100%': {
                                transform: 'translateY(0)'
                            },
                            '50%': {
                                transform: 'translateY(-10px)'
                            }
                        },
                        shimmer: {
                            '0%': {
                                backgroundPosition: '-200% center'
                            },
                            '100%': {
                                backgroundPosition: '200% center'
                            }
                        },
                        gradient: {
                            '0%, 100%': {
                                'background-size': '200% 200%',
                                'background-position': 'left center'
                            },
                            '50%': {
                                'background-size': '200% 200%',
                                'background-position': 'right center'
                            }
                        },
                        bounceSubtle: {
                            '0%, 100%': {
                                transform: 'translateY(0)'
                            },
                            '50%': {
                                transform: 'translateY(-5px)'
                            }
                        }
                    },
                    backdropBlur: {
                        xs: '2px',
                        sm: '4px',
                        md: '8px',
                        lg: '12px',
                        xl: '16px',
                        '2xl': '24px',
                    }
                }
            }
        }
    </script>

    <style>
        :root {
            --primary-gold: #b98927;
            --gold-gradient: linear-gradient(135deg, #b98927 0%, #f5b437 100%);
            --gold-gradient-light: linear-gradient(135deg, rgba(185, 137, 39, 0.1) 0%, rgba(245, 180, 55, 0.1) 100%);
        }

        /* Modern Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(185, 137, 39, 0.05);
            border-radius: 10px;
        }

        .dark ::-webkit-scrollbar-track {
            background: rgba(245, 180, 55, 0.05);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--gold-gradient);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #946e20 0%, #d99c1e 100%);
        }

        /* Selection */
        ::selection {
            background: rgba(185, 137, 39, 0.3);
            color: #000;
        }

        .dark ::selection {
            background: rgba(245, 180, 55, 0.3);
            color: #fff;
        }

        /* Modern Glass Effect */
        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .dark .glass {
            background: rgba(17, 24, 39, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Gold Border Effect */
        .gold-border {
            position: relative;
        }

        .gold-border::after {
            content: '';
            position: absolute;
            inset: 0;
            padding: 1px;
            border-radius: inherit;
            background: var(--gold-gradient);
            -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }

        /* Animated Background */
        .animated-bg {
            background: linear-gradient(90deg,
                    rgba(185, 137, 39, 0.1) 0%,
                    rgba(245, 180, 55, 0.2) 25%,
                    rgba(185, 137, 39, 0.3) 50%,
                    rgba(245, 180, 55, 0.2) 75%,
                    rgba(185, 137, 39, 0.1) 100%);
            background-size: 200% 100%;
            animation: gradient 3s ease infinite;
        }

        /* Gradient Text */
        .gradient-text {
            background: var(--gold-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        /* Hover Lift Effect */
        .hover-lift {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .hover-lift:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(185, 137, 39, 0.15);
        }

        /* Loading Skeleton */
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        .dark .skeleton {
            background: linear-gradient(90deg, #2d3748 25%, #4a5568 50%, #2d3748 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        /* Print Styles */
        @media print {
            .no-print {
                display: none !important;
            }

            body {
                background: white !important;
                color: black !important;
            }
        }

        /* Animation Delays */
        .delay-100 {
            animation-delay: 100ms;
        }

        .delay-200 {
            animation-delay: 200ms;
        }

        .delay-300 {
            animation-delay: 300ms;
        }

        .delay-400 {
            animation-delay: 400ms;
        }

        .delay-500 {
            animation-delay: 500ms;
        }
    </style>
</head>

<body
    class="bg-gradient-to-br from-gray-50 via-white to-amber-50/30 dark:from-gray-900 dark:via-gray-900 dark:to-gray-900 text-gray-800 dark:text-gray-200 font-sans min-h-screen overflow-x-hidden">

    <!-- Background Elements -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
        <div
            class="absolute top-1/4 left-1/4 w-96 h-96 bg-gradient-to-br from-amber-200/20 to-yellow-300/10 rounded-full blur-3xl animate-float delay-300">
        </div>
        <div
            class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-gradient-to-tr from-amber-200/20 to-yellow-300/10 rounded-full blur-3xl animate-float delay-500">
        </div>
        <div
            class="absolute top-3/4 left-3/4 w-64 h-64 bg-gradient-to-br from-amber-300/10 to-yellow-400/5 rounded-full blur-3xl animate-float">
        </div>
    </div>

    <!-- Desktop Header -->
    <header class="hidden lg:block fixed top-0 left-0 right-0 z-50 animate-slide-down">
        <div class="container mx-auto px-8">
            <div class="glass rounded-2xl mt-4 border border-white/10 dark:border-white/5 shadow">
                <div class="px-6 py-4 flex items-center justify-between">
                    <!-- Logo -->
                    <div class="flex items-center gap-4">
                        <div class="relative group">
                            <div
                                class="w-12 h-12 rounded-xl bg-gradient-to-br from-amber-600 to-yellow-500 flex items-center justify-center shadow-lg group-hover:scale-105 transition-transform duration-300">
                                <i class="fas fa-shield-alt text-white text-xl"></i>
                            </div>
                            <div
                                class="absolute -inset-2 bg-gradient-to-br from-amber-600/30 to-yellow-500/30 rounded-xl blur-xl -z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            </div>
                        </div>

                        <div>
                            <h1 class="text-xl font-black gradient-text tracking-tight">Invo Security</h1>
                            <p class="text-xs text-gray-500 dark:text-gray-400 font-medium mt-0.5">Enterprise Security
                                Solutions</p>
                        </div>
                    </div>

                    <!-- Navigation -->
                    <nav class="flex items-center gap-1">
                        <a href="<?php echo e(route('dashboard')); ?>"
                            class="nav-item px-5 py-2.5 rounded-xl font-medium text-gray-700 dark:text-gray-300 hover:bg-gradient-to-r hover:from-amber-500/10 hover:to-yellow-500/10 hover:text-amber-700 dark:hover:text-amber-400 transition-all duration-300 flex items-center gap-3 group">
                            <i class="fas fa-chart-line text-amber-600 group-hover:scale-110 transition-transform"></i>
                            <span>Dashboard</span>
                        </a>

                        <a href="<?php echo e(route('home')); ?>"
                            class="nav-item px-5 py-2.5 rounded-xl font-medium text-gray-700 dark:text-gray-300 hover:bg-gradient-to-r hover:from-amber-500/10 hover:to-yellow-500/10 hover:text-amber-700 dark:hover:text-amber-400 transition-all duration-300 flex items-center gap-3 group">
                            <i class="fas fa-home text-amber-600 group-hover:scale-110 transition-transform"></i>
                            <span>Home</span>
                        </a>

                        <button onclick="history.back()"
                            class="nav-item px-5 py-2.5 rounded-xl font-medium text-gray-700 dark:text-gray-300 hover:bg-gradient-to-r hover:from-amber-500/10 hover:to-yellow-500/10 hover:text-amber-700 dark:hover:text-amber-400 transition-all duration-300 flex items-center gap-3 group">
                            <i class="fas fa-arrow-left text-amber-600 group-hover:scale-110 transition-transform"></i>
                            <span>Back</span>
                        </button>
                    </nav>

                    <!-- User Actions -->
                    <div class="flex items-center gap-4">
                        <!-- Dark Mode Toggle -->
                        <button id="dark-mode-toggle"
                            class="w-10 h-10 rounded-xl glass flex items-center justify-center hover:shadow-lg transition-all hover:scale-105">
                            <i class="fas fa-moon text-amber-600 dark:hidden"></i>
                            <i class="fas fa-sun text-amber-400 hidden dark:block"></i>
                        </button>

                        <!-- User Profile -->
                        <div class="flex items-center gap-3">
                            <div class="text-right">
                                <p class="font-bold text-gray-800 dark:text-gray-100 text-sm">
                                    <?php echo e(auth()->user()->name ?? 'Client'); ?></p>
                                <p class="text-xs text-gray-500 dark:text-gray-400 capitalize">
                                    <?php echo e(auth()->user()->role ?? 'client'); ?></p>
                            </div>

                            <div class="relative group">
                                <img src="<?php echo e(auth()->user()->image ?? 'https://ui-avatars.com/api/?name=' . urlencode(auth()->user()->name ?? 'User') . '&background=b98927&color=fff'); ?>"
                                    class="w-12 h-12 rounded-xl border-2 border-white/20 shadow-lg group-hover:scale-105 transition-transform duration-300">
                                <div
                                    class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-white dark:border-gray-900 shadow-sm">
                                </div>
                            </div>

                            <!-- Logout -->
                            <form action="<?php echo e(route('logout')); ?>" method="POST">
                                <?php echo csrf_field(); ?>
                                <button type="submit"
                                    class="px-4 py-2 rounded-xl bg-gradient-to-r from-amber-600 to-yellow-500 text-white font-semibold shadow-lg hover:shadow-xl hover:from-amber-700 hover:to-yellow-600 active:scale-95 transition-all duration-300 flex items-center gap-2">
                                    <i class="fas fa-sign-out-alt text-sm"></i>
                                    <span class="text-sm">Logout</span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Mobile Header -->
    <div class="lg:hidden fixed top-0 left-0 right-0 z-50 animate-slide-down">
        <div class="glass border-b border-white/10 dark:border-white/5">
            <div class="px-4 py-3 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <button onclick="history.back()"
                        class="w-10 h-10 rounded-xl bg-white/80 dark:bg-gray-800/80 flex items-center justify-center shadow-sm">
                        <i class="fas fa-arrow-left text-amber-600"></i>
                    </button>

                    <div>
                        <h1 class="font-bold text-gray-900 dark:text-white text-sm">Invo Security</h1>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Dashboard</p>
                    </div>
                </div>

                <div class="flex items-center gap-2">
                    <button id="mobile-dark-mode-toggle"
                        class="w-10 h-10 rounded-xl bg-white/80 dark:bg-gray-800/80 flex items-center justify-center shadow-sm">
                        <i class="fas fa-moon text-amber-600 dark:hidden"></i>
                        <i class="fas fa-sun text-amber-400 hidden dark:block"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <main class="pt-16 lg:pt-24 pb-20 lg:pb-8 px-4 lg:px-8 min-h-screen">
        <div class="max-w-7xl mx-auto">


            <!-- Content -->
            <div class="animate-fade-in py-10">
                <?php echo $__env->yieldContent('content'); ?>
            </div>
        </div>
    </main>

    <!-- Mobile Bottom Navigation -->
    <nav class="lg:hidden fixed bottom-0 left-0 right-0 z-50 animate-slide-up">
        <div class="glass border-t border-white/10 dark:border-white/5">
            <div class="flex justify-around items-center py-3 px-2">
                <a href="<?php echo e(route('home')); ?>"
                    class="flex flex-col items-center gap-1 p-2 rounded-xl transition-all duration-300 hover:bg-gradient-to-r hover:from-amber-500/10 hover:to-yellow-500/10">
                    <div
                        class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500/10 to-yellow-500/10 flex items-center justify-center">
                        <i class="fas fa-home text-amber-600"></i>
                    </div>
                    <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Home</span>
                </a>

                <a href="<?php echo e(route('dashboard')); ?>"
                    class="flex flex-col items-center gap-1 p-2 rounded-xl transition-all duration-300 hover:bg-gradient-to-r hover:from-amber-500/10 hover:to-yellow-500/10">
                    <div
                        class="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-500/10 to-yellow-500/10 flex items-center justify-center">
                        <i class="fas fa-chart-line text-amber-600"></i>
                    </div>
                    <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Dashboard</span>
                </a>

                <div class="relative">
                    <form action="<?php echo e(route('logout')); ?>" method="POST" class="flex flex-col items-center">
                        <?php echo csrf_field(); ?>
                        <button type="submit"
                            class="flex flex-col items-center gap-1 p-2 rounded-xl transition-all duration-300 hover:bg-gradient-to-r hover:from-red-500/10 hover:to-red-500/10">
                            <div
                                class="w-10 h-10 rounded-xl bg-gradient-to-br from-red-500/10 to-red-500/10 flex items-center justify-center">
                                <i class="fas fa-sign-out-alt text-red-500"></i>
                            </div>
                            <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Logout</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </nav>


    <script>
        (function() {
            const html = document.documentElement;
            const themeToggleCheckbox = document.getElementById('themeToggle'); // frontend
            const toggleButtons = document.querySelectorAll('#dark-mode-toggle, #mobile-dark-mode-toggle'); // dashboard

            function applyTheme(theme) {
                if (theme === 'dark') {
                    html.classList.add('dark');
                    localStorage.setItem('theme', 'dark');
                    if (themeToggleCheckbox) themeToggleCheckbox.checked = true;
                } else {
                    html.classList.remove('dark');
                    localStorage.setItem('theme', 'light');
                    if (themeToggleCheckbox) themeToggleCheckbox.checked = false;
                }
            }

            // Initial theme load
            const savedTheme = localStorage.getItem('theme');
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

            applyTheme(savedTheme ? savedTheme : (prefersDark ? 'dark' : 'light'));

            // Frontend checkbox
            if (themeToggleCheckbox) {
                themeToggleCheckbox.addEventListener('change', function() {
                    applyTheme(this.checked ? 'dark' : 'light');
                });
            }

            // Dashboard buttons
            toggleButtons.forEach(btn => {
                btn.addEventListener('click', () => {
                    const isDark = html.classList.contains('dark');
                    applyTheme(isDark ? 'light' : 'dark');
                });
            });
        })();
    </script>


    <script>
        function initMobileMenu() {
            const menuToggle = document.querySelector('[data-menu-toggle]');
            const mobileMenu = document.querySelector('[data-mobile-menu]');

            if (menuToggle && mobileMenu) {
                menuToggle.addEventListener('click', () => {
                    mobileMenu.classList.toggle('hidden');
                });
            }
        }

        // Page Load Animations
        function initAnimations() {
            const elements = document.querySelectorAll('[data-animate]');

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const animation = entry.target.getAttribute('data-animate');
                        entry.target.classList.add(`animate-${animation}`);
                        observer.unobserve(entry.target);
                    }
                });
            }, {
                threshold: 0.1
            });

            elements.forEach(el => observer.observe(el));
        }

        // Initialize everything
        document.addEventListener('DOMContentLoaded', () => {
            initDarkMode();
            initMobileMenu();
            initAnimations();
        });
    </script>
</body>

</html>
<?php /**PATH C:\laragon\www\crm_new\resources\views/dashboard/layout.blade.php ENDPATH**/ ?>