<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inve Security - Modern CRM Dashboard</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <link rel="icon" href="https://cdn-icons-png.flaticon.com/512/9413/9413653.png" type="image/x-icon">

    <!-- Modern Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">

    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Plus Jakarta Sans', 'Inter', 'system-ui', 'sans-serif'],
                        display: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
                    },
                    colors: {
                        primary: {
                            50: '#f0fdf4',
                            100: '#dcfce7',
                            200: '#bbf7d0',
                            300: '#86efac',
                            400: '#4ade80',
                            500: '#22c55e',
                            600: '#16a34a',
                            700: '#047A58', // Primary color
                            800: '#05603a',
                            900: '#065f46',
                        },
                        accent: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                            900: '#1e3a8a',
                        },
                        dark: {
                            primary: '#0f172a',
                            secondary: '#1e293b',
                            tertiary: '#334155',
                            accent: '#10B981',
                            text: '#f8fafc'
                        }
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-in-out',
                        'slide-in': 'slideIn 0.3s ease-out',
                        'pulse-slow': 'pulse 3s infinite',
                        'bounce-subtle': 'bounceSubtle 2s infinite',
                        'float': 'float 3s ease-in-out infinite',
                        'wave': 'wave 12s linear infinite',
                        'shimmer': 'shimmer 2s infinite',
                        'gradient-x': 'gradient-x 3s ease infinite',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': {
                                opacity: '0'
                            },
                            '100%': {
                                opacity: '1'
                            },
                        },
                        slideIn: {
                            '0%': {
                                transform: 'translateX(-100%)'
                            },
                            '100%': {
                                transform: 'translateX(0)'
                            },
                        },
                        bounceSubtle: {
                            '0%, 100%': {
                                transform: 'translateY(0)'
                            },
                            '50%': {
                                transform: 'translateY(-5px)'
                            },
                        },
                        float: {
                            '0%, 100%': {
                                transform: 'translateY(0px)'
                            },
                            '50%': {
                                transform: 'translateY(-10px)'
                            },
                        },
                        wave: {
                            '0%': {
                                transform: 'translateX(0)'
                            },
                            '100%': {
                                transform: 'translateX(-100%)'
                            },
                        },
                        shimmer: {
                            '0%': {
                                backgroundPosition: '-200% center'
                            },
                            '100%': {
                                backgroundPosition: '200% center'
                            },
                        },
                        'gradient-x': {
                            '0%, 100%': {
                                'background-size': '200% 200%',
                                'background-position': 'left center'
                            },
                            '50%': {
                                'background-size': '200% 200%',
                                'background-position': 'right center'
                            }
                        }
                    },
                    backdropBlur: {
                        xs: '2px',
                    }
                }
            }
        }
    </script>
    <style>
        :root {
            --sidebar-width: 280px;
            --primary-color: #047A58;
        }

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

        ::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 4px;
        }

        .dark ::-webkit-scrollbar-track {
            background: #1e293b;
        }

        ::-webkit-scrollbar-thumb {
            background: #047A58;
            border-radius: 4px;
        }

        .dark ::-webkit-scrollbar-thumb {
            background: #10b981;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #065f46;
        }

        /* Sidebar with decorative elements */
        .sidebar {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            width: var(--sidebar-width);
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            position: relative;
            overflow: hidden;
            z-index: 50;
        }

        .sidebar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(4, 122, 88, 0.03) 0%, rgba(4, 122, 88, 0) 100%);
            z-index: -1;
        }

        .sidebar::after {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(4, 122, 88, 0.1) 0%, rgba(4, 122, 88, 0) 70%);
            border-radius: 50%;
            z-index: -1;
        }

        .dark .sidebar {
            background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
        }

        .dark .sidebar::before {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0) 100%);
        }

        .sidebar.collapsed {
            width: 80px;
        }

        .sidebar.collapsed .sidebar-text {
            opacity: 0;
            pointer-events: none;
        }

        .main-content {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            margin-left: 0;
        }

        /* Modern Active Menu Item */
        .active {
            background: linear-gradient(90deg, rgba(4, 122, 88, 0.15) 0%, rgba(4, 122, 88, 0.05) 100%);
            color: #047A58;
            border-right: 3px solid #047A58;
            backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
        }

        .active::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, #047A58 0%, #10B981 100%);
        }

        .dark .active {
            background: linear-gradient(90deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.08) 100%);
            color: #10b981;
            border-right: 3px solid #10b981;
        }

        .menu-item {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 12px;
            margin: 4px 8px;
            position: relative;
            overflow: hidden;
        }

        .menu-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(4, 122, 88, 0.1), transparent);
            transition: left 0.5s;
        }

        .menu-item:hover::before {
            left: 100%;
        }

        .menu-item:hover {
            color: #047A58;
            background-color: rgba(4, 122, 88, 0.08);
            transform: translateX(4px);
        }

        .menu-item:hover i {
            color: #047A58 !important;
            transform: scale(1.1);
        }

        /* Enhanced Stat Cards */
        .stat-card {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border: 1px solid rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #047A58, #10B981, #047A58);
            background-size: 200% 100%;
            animation: gradient-x 3s ease infinite;
        }

        .stat-card::after {
            content: '';
            position: absolute;
            bottom: -50%;
            right: -20%;
            width: 150px;
            height: 150px;
            background: radial-gradient(circle, rgba(4, 122, 88, 0.1) 0%, rgba(4, 122, 88, 0) 70%);
            border-radius: 50%;
            z-index: 0;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .stat-card:hover::after {
            opacity: 1;
        }

        .dark .stat-card {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .stat-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 25px 50px -12px rgba(4, 122, 88, 0.15);
        }

        .dark .stat-card:hover {
            box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.15);
        }

        /* Logo with decorative elements */
        .logo-icon {
            background: linear-gradient(135deg, #047A58 0%, #10B981 100%);
            box-shadow: 0 8px 25px rgba(4, 122, 88, 0.3);
            position: relative;
            overflow: hidden;
        }

        .logo-icon::before {
            content: '';
            position: absolute;
            top: -10px;
            left: -10px;
            width: 20px;
            height: 20px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            filter: blur(5px);
        }

        /* Header with decorative wave */
        .header {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(4, 122, 88, 0.1);
            position: relative;
            overflow: hidden;
        }

        .header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200%;
            height: 3px;
            background: linear-gradient(90deg,
                    transparent 0%,
                    #047A58 20%,
                    #10B981 40%,
                    #047A58 60%,
                    #10B981 80%,
                    transparent 100%);
            animation: wave 12s linear infinite;
            opacity: 0.7;
        }

        .dark .header {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border-bottom: 1px solid rgba(16, 185, 129, 0.2);
        }

        /* Search bar with modern design */
        .search-bar {
            transition: all 0.3s ease;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(4, 122, 88, 0.2);
            position: relative;
            overflow: hidden;
        }

        .search-bar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(4, 122, 88, 0.05), transparent);
            z-index: 0;
        }

        .dark .search-bar {
            background: rgba(30, 41, 59, 0.9);
            border: 1px solid rgba(16, 185, 129, 0.2);
        }

        .search-bar:focus-within {
            box-shadow: 0 0 0 3px rgba(4, 122, 88, 0.2);
            border-color: #047A58;
        }

        /* Notification badge with pulsing effect */
        .notification-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            background: linear-gradient(135deg, #ef4444, #dc2626);
            color: white;
            border-radius: 10px;
            min-width: 20px;
            height: 20px;
            font-size: 0.7rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
            animation: pulse-slow 2s infinite;
        }

        /* Floating action button with shine effect */
        .fab {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 64px;
            height: 64px;
            border-radius: 20px;
            background: linear-gradient(135deg, #047A58 0%, #10B981 100%);
            box-shadow: 0 8px 30px rgba(4, 122, 88, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            z-index: 100;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }

        .fab::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.7s;
        }

        .fab:hover::before {
            left: 100%;
        }

        .fab:hover {
            transform: scale(1.1) rotate(5deg);
            box-shadow: 0 12px 40px rgba(4, 122, 88, 0.5);
        }

        /* Progress bars with gradient animation */
        .progress-bar {
            height: 10px;
            border-radius: 10px;
            overflow: hidden;
            background-color: #e5e7eb;
            position: relative;
        }

        .dark .progress-bar {
            background-color: #334155;
        }

        .progress-fill {
            height: 100%;
            border-radius: 10px;
            background: linear-gradient(90deg, #047A58, #10B981, #047A58);
            background-size: 200% 100%;
            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            animation: gradient-x 3s ease infinite;
        }

        /* Modern buttons with gradient */
        .btn-primary {
            background: linear-gradient(135deg, #047A58 0%, #10B981 100%);
            color: white;
            border: none;
            border-radius: 12px;
            padding: 12px 24px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(4, 122, 88, 0.3);
            position: relative;
            overflow: hidden;
        }

        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .btn-primary:hover::before {
            left: 100%;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(4, 122, 88, 0.4);
        }

        /* Section headers with decorative line */
        .section-header {
            position: relative;
            padding-left: 20px;
        }

        .section-header::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 30px;
            background: linear-gradient(180deg, #047A58 0%, #10B981 100%);
            border-radius: 3px;
        }

        /* Modern decorative elements for cards */
        .decorative-circle {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(4, 122, 88, 0.1) 0%, rgba(4, 122, 88, 0) 70%);
            z-index: 0;
        }

        /* Hover lift effect with shadow */
        .hover-lift {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        .hover-lift:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px -10px rgba(4, 122, 88, 0.15);
        }

        .dark .hover-lift:hover {
            box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.15);
        }

        /* Gradient text effect */
        .gradient-text {
            background: linear-gradient(90deg, #047A58 0%, #10B981 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        /* Loading animation dots */
        .loading-dots {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }

        .loading-dots span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #047A58;
            animation: bounce 1.4s infinite ease-in-out both;
        }

        .loading-dots span:nth-child(1) {
            animation-delay: -0.32s;
        }

        .loading-dots span:nth-child(2) {
            animation-delay: -0.16s;
        }

        @keyframes bounce {

            0%,
            80%,
            100% {
                transform: scale(0);
            }

            40% {
                transform: scale(1.0);
            }
        }

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

            body {
                background: white !important;
            }

            .sidebar,
            .header {
                display: none !important;
            }

            .main-content {
                margin-left: 0 !important;
                width: 100% !important;
            }
        }

        /* Modern decorative background pattern */
        .pattern-dots {
            background-image: radial-gradient(#047A58 1px, transparent 1px);
            background-size: 20px 20px;
            opacity: 0.1;
        }

        .dark .pattern-dots {
            background-image: radial-gradient(#10B981 1px, transparent 1px);
        }
    </style>
</head>

<body class="bg-gray-50 dark:bg-dark-primary transition-all duration-500 font-sans antialiased relative">
    <div class="flex min-h-screen">
        <!-- Enhanced Sidebar with Decorative Elements -->
        <div class="sidebar border-r border-gray-200/50 dark:border-gray-700/50 flex flex-col no-print">


            <!-- Decorative element -->
            <div
                class="absolute top-20 right-0 w-16 h-16 bg-gradient-to-r from-primary-700/10 to-transparent rounded-l-full">
            </div>

            <!-- Navigation Menu -->
            @include('admin.layout.nav')

        </div>

        <!-- Main Content Area -->
        <div
            class="main-content flex-1 flex flex-col overflow-hidden bg-white dark:bg-dark-primary transition-all duration-500 relative">
            <!-- Background decorative pattern -->
            <div class="absolute inset-0 pattern-dots pointer-events-none"></div>

            <!-- Enhanced Header -->
            <header class="header hidden py-4 px-8 flex items-center justify-between no-print relative z-10">
                <div class="flex items-center space-x-4">
                    <div>
                        <h1 class="font-display text-3xl font-bold gradient-text">
                            Dashboard
                        </h1>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 font-medium">
                            Welcome back, Admin! Here's what's happening today.
                        </p>
                    </div>
                </div>

                <div class="flex items-center space-x-4">
                    <!-- Search Bar -->
                    <div class="relative">
                        <div class="search-bar px-4 py-2 w-80">
                            <i
                                class="fas fa-search text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2"></i>
                            <input type="text" placeholder="Search anything..."
                                class="w-full bg-transparent border-none focus:outline-none focus:ring-0 pl-8 text-gray-600 dark:text-gray-300 placeholder-gray-400 dark:placeholder-gray-500 relative z-10">
                        </div>
                    </div>


                    <!-- User Menu -->
                    <div class="flex items-center space-x-3">
                        <div
                            class="flex items-center space-x-3 bg-gray-100 dark:bg-gray-800 rounded-2xl px-4 py-2 hover:bg-primary-50 dark:hover:bg-primary-900/20 transition-all duration-300 cursor-pointer">
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button
                                    class="user-avatar w-10 h-10 rounded-full flex items-center justify-center bg-gradient-to-r from-primary-700 to-accent-500">
                                    <i class="fa-solid fa-power-off text-white"></i>
                                </button>
                            </form>
                            <div class="flex flex-col">
                                <span
                                    class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ auth()->user()->name }}</span>
                                <span
                                    class="text-xs text-gray-500 dark:text-gray-400 capitalize">{{ auth()->user()->role }}</span>
                            </div>

                        </div>
                    </div>
                </div>
            </header>

            <!-- Content Area -->
            <main class="flex-1 overflow-y-auto p-8 print:p-0 relative z-10">
                <div class="">
                    <div class="bg-white dark:bg-dark-primary">
                        <!-- Eample content area -->
                        <div class="space-y-6">
                            @yield('admin')
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>



    <script>
        // Dark mode detection
        if (localStorage.theme === 'dark' || (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)')
                .matches)) {
            document.documentElement.classList.add('dark');
        }

        // Enhanced sidebar toggle
        document.getElementById('toggleSidebar').addEventListener('click', function() {
            const sidebar = document.querySelector('.sidebar');
            const mainContent = document.querySelector('.main-content');
            const icon = this.querySelector('i');

            sidebar.classList.toggle('collapsed');

            if (sidebar.classList.contains('collapsed')) {
                icon.classList.remove('fa-chevron-left');
                icon.classList.add('fa-chevron-right');
            } else {
                icon.classList.remove('fa-chevron-right');
                icon.classList.add('fa-chevron-left');
            }
        });

        // Enhanced menu item interactions
        document.querySelectorAll('.menu-item').forEach(item => {
            item.addEventListener('click', function(e) {
                if (!this.href || this.href === '#') {
                    e.preventDefault();
                }

                // Remove active class from all items
                document.querySelectorAll('.menu-item').forEach(i => {
                    i.classList.remove('active');
                    const icon = i.querySelector('i');
                    icon.classList.remove('text-primary-700');
                    icon.classList.add('text-gray-500', 'dark:text-gray-400');
                });

                // Add active class to clicked item
                this.classList.add('active');
                const icon = this.querySelector('i');
                icon.classList.remove('text-gray-500', 'dark:text-gray-400');
                icon.classList.add('text-primary-700');
            });
        });

        // Add animations on page load
        document.addEventListener('DOMContentLoaded', function() {
            // Animate sidebar items with staggered delay
            const menuItems = document.querySelectorAll('.menu-item');
            menuItems.forEach((item, index) => {
                item.style.animationDelay = `${index * 0.05}s`;
                item.classList.add('animate-fade-in');
            });

            // Add hover effects to cards
            const cards = document.querySelectorAll('.stat-card, .hover-lift');
            cards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-8px) scale(1.02)';
                });

                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0) scale(1)';
                });
            });
        });

        // Enhanced search functionality
        const searchInput = document.querySelector('.search-bar input');
        if (searchInput) {
            searchInput.addEventListener('focus', function() {
                this.parentElement.style.boxShadow = '0 0 0 3px rgba(4, 122, 88, 0.2)';
                this.parentElement.style.borderColor = '#047A58';
            });

            searchInput.addEventListener('blur', function() {
                this.parentElement.style.boxShadow = '';
                this.parentElement.style.borderColor = '';
            });
        }

        // Notification bell animation
        const notificationBell = document.querySelector('.fa-bell');
        if (notificationBell) {
            setInterval(() => {
                notificationBell.style.transform = 'rotate(10deg)';
                setTimeout(() => {
                    notificationBell.style.transform = 'rotate(-10deg)';
                }, 200);
                setTimeout(() => {
                    notificationBell.style.transform = 'rotate(0deg)';
                }, 400);
            }, 5000);
        }

        // Toggle dark mode (example functionality)
        function toggleDarkMode() {
            const html = document.documentElement;
            html.classList.toggle('dark');
            localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
        }
    </script>
</body>

</html>
