<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('Images/logocarte.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('Images/logocarte.png') }}">
    <link rel="shortcut icon" href="{{ asset('Images/logocarte.png') }}">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

<body class="font-sans antialiased bg-white" x-data="{ sidebarOpen: false }">
    <div class="flex min-h-screen">
        <!-- Overlay for mobile sidebar -->
        <div x-show="sidebarOpen" x-transition:enter="transition-opacity ease-linear duration-300"
            x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
            x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0" @click="sidebarOpen = false"
            class="fixed inset-0 z-40 bg-gray-900/50 backdrop-blur-sm lg:hidden"></div>

        <!-- Sidebar Responsive -->
        <style>
            @media (max-width: 1023px) {
                #admin-sidebar { background-color: #ffffff !important; border-right-color: #e2e8f0 !important; }
                #admin-sidebar .border-b { border-color: #e2e8f0 !important; }
                #admin-sidebar span, #admin-sidebar svg { color: #475569 !important; }
                #admin-sidebar span[style*="#ffffff"] { color: #0f172a !important; }
                #admin-sidebar span[style*="#fbbf24"], #admin-sidebar svg[style*="#fbbf24"] { color: #d97706 !important; }
                #admin-sidebar span[style*="#38bdf8"], #admin-sidebar svg[style*="#38bdf8"] { color: #0284c7 !important; }
                #admin-sidebar span[style*="#facc15"], #admin-sidebar svg[style*="#facc15"] { color: #ca8a04 !important; }
                #admin-sidebar span[style*="#dc2626"], #admin-sidebar svg[style*="#dc2626"] { color: #dc2626 !important; }
                #admin-sidebar .hover\:bg-white\/5:hover { background-color: #f1f5f9 !important; }
                #admin-sidebar .hover\:bg-gray-800:hover { background-color: #f1f5f9 !important; }
            }
        </style>
        <aside id="admin-sidebar" :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
            class="fixed inset-y-0 left-0 z-50 flex flex-shrink-0 min-h-screen transition-transform duration-300 ease-in-out transform -translate-x-full lg:translate-x-0 lg:static lg:inset-auto lg:flex-shrink-0 bg-black border-r border-white/5"
            style="width: 280px !important;">
            <div class="flex flex-col flex-grow overflow-y-auto">

                <!-- Reference-Aligned Profile Section -->
                <div class="px-5 py-4 border-b border-white/5 lg:bg-black">

                    <div class="flex items-center space-x-3">
                        <!-- Logo -->
                        <div class="shrink-0 transition-transform duration-300 hover:scale-110 bg-gray-800 rounded-full p-1.5 border border-gray-700">
                            <img src="{{ asset('Images/logocarte.png') }}" alt="Logo"
                                class="w-10 h-10 object-contain filter drop-shadow-sm">
                        </div>

                        <!-- Identity Text -->
                        <div class="flex flex-col min-w-0">
                            <span
                                style="color: #ffffff !important; font-weight: 900 !important; font-size: 1rem !important; line-height: 1.2 !important; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;">
                                Sénévalls
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Navigation List -->
                <nav class="flex-1">
                    <div style="margin-top: 1rem;">
                        @php 
                            $canManage = auth()->check() && auth()->user()->canManage();
                            $dashboardRoute = $canManage ? route('admin.dashboard') : route('member.dashboard');
                            $membersRoute = route('admin.members.index');
                            $projectsRoute = route('admin.projects.index');
                            $contributionsRoute = route('admin.contributions.index');
                            $accountsRoute = route('admin.accounts.index');
                        @endphp

                        <a href="{{ $dashboardRoute }}"
                            class="flex items-center px-6 py-3.5 transition-all duration-200 hover:bg-white/5"
                            style="text-decoration: none !important; {{ request()->routeIs('*.dashboard') ? 'border-left: 3px solid #fbbf24; padding-left: 21px;' : 'border-left: 3px solid transparent;' }}">
                            <svg class="mr-4 h-5 w-5"
                                style="color: {{ request()->routeIs('*.dashboard') ? '#fbbf24' : '#9ca3af' }} !important;"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                            </svg>
                            <span
                                style="color: {{ request()->routeIs('*.dashboard') ? '#fbbf24' : '#9ca3af' }} !important; font-weight: 600 !important; font-size: 0.9rem !important;">Tableau
                                de bord</span>
                        </a>
                        <!-- Members -->
                        <a href="{{ $membersRoute }}"
                            class="flex items-center px-6 py-3.5 transition-all duration-200 hover:bg-white/5"
                            style="text-decoration: none !important; {{ request()->routeIs('admin.members.*') ? 'border-left: 3px solid #fbbf24; padding-left: 21px;' : 'border-left: 3px solid transparent;' }}">
                            <svg class="mr-4 h-5 w-5"
                                style="color: {{ request()->routeIs('admin.members.*') ? '#fbbf24' : '#9ca3af' }} !important;"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                            </svg>
                            <span
                                style="color: {{ request()->routeIs('admin.members.*') ? '#fbbf24' : '#9ca3af' }} !important; font-weight: 600 !important; font-size: 0.9rem !important;">Membres</span>
                        </a>

                        <!-- Projects -->
                        <a href="{{ $projectsRoute }}"
                            class="flex items-center px-6 py-3.5 transition-all duration-200 hover:bg-white/5"
                            style="text-decoration: none !important; {{ request()->routeIs('admin.projects.*') ? 'border-left: 3px solid #fbbf24; padding-left: 21px;' : 'border-left: 3px solid transparent;' }}">
                            <svg class="mr-4 h-5 w-5"
                                style="color: {{ request()->routeIs('admin.projects.*') ? '#fbbf24' : '#9ca3af' }} !important;"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                            </svg>
                            <span
                                style="color: {{ request()->routeIs('admin.projects.*') ? '#fbbf24' : '#9ca3af' }} !important; font-weight: 600 !important; font-size: 0.9rem !important;">Projets</span>
                        </a>

                        <!-- Contributions -->
                        <a href="{{ $contributionsRoute }}"
                            class="flex items-center px-6 py-3.5 transition-all duration-200 hover:bg-white/5"
                            style="text-decoration: none !important; {{ request()->routeIs('admin.contributions.*') ? 'border-left: 3px solid #fbbf24; padding-left: 21px;' : 'border-left: 3px solid transparent;' }}">
                            <svg class="mr-4 h-5 w-5"
                                style="color: {{ request()->routeIs('admin.contributions.*') ? '#fbbf24' : '#9ca3af' }} !important;"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <span
                                style="color: {{ request()->routeIs('admin.contributions.*') ? '#fbbf24' : '#9ca3af' }} !important; font-weight: 600 !important; font-size: 0.9rem !important;">Cotisations</span>
                        </a>

                        <!-- Accounts -->
                        <a href="{{ $accountsRoute }}"
                            class="flex items-center px-6 py-3.5 transition-all duration-200 hover:bg-white/5"
                            style="text-decoration: none !important; {{ request()->routeIs('admin.accounts.*') ? 'border-left: 3px solid #fbbf24; padding-left: 21px;' : 'border-left: 3px solid transparent;' }}">
                            <svg class="mr-4 h-5 w-5"
                                style="color: {{ request()->routeIs('admin.accounts.*') ? '#fbbf24' : '#9ca3af' }} !important;"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                            </svg>
                            <span
                                style="color: {{ request()->routeIs('admin.accounts.*') ? '#fbbf24' : '#9ca3af' }} !important; font-weight: 600 !important; font-size: 0.9rem !important;">Comptes</span>
                        </a>

                        <!-- Finance (Transactions) -->
                        <a href="{{ route('admin.transactions.index') }}"
                            class="flex items-center px-6 py-3.5 transition-all duration-200 hover:bg-white/5"
                            style="text-decoration: none !important; {{ request()->routeIs('admin.transactions.*') ? 'border-left: 3px solid #fbbf24; padding-left: 21px;' : 'border-left: 3px solid transparent;' }}">
                            <svg class="mr-4 h-5 w-5"
                                style="color: {{ request()->routeIs('admin.transactions.*') ? '#fbbf24' : '#9ca3af' }} !important;"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                            </svg>
                            <span
                                style="color: {{ request()->routeIs('admin.transactions.*') ? '#fbbf24' : '#9ca3af' }} !important; font-weight: 600 !important; font-size: 0.9rem !important;">Finance</span>
                        </a>


                        <!-- Reports -->
                        <a href="{{ route('admin.reports.index') }}"
                            class="flex items-center px-6 py-3.5 transition-all duration-200 hover:bg-white/5"
                            style="text-decoration: none !important; {{ request()->routeIs('admin.reports.*') ? 'border-left: 3px solid #fbbf24; padding-left: 21px;' : 'border-left: 3px solid transparent;' }}">
                            <svg class="mr-4 h-5 w-5"
                                style="color: {{ request()->routeIs('admin.reports.*') ? '#fbbf24' : '#9ca3af' }} !important;"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                            </svg>
                            <span
                                style="color: {{ request()->routeIs('admin.reports.*') ? '#fbbf24' : '#9ca3af' }} !important; font-weight: 600 !important; font-size: 0.9rem !important;">Rapports</span>
                        </a>

                        <!-- Settings -->
                        <a href="{{ $canManage ? route('admin.settings.index') : 'javascript:void(0)' }}"
                            class="flex items-center px-6 py-3.5 transition-all duration-200 {{ $canManage ? 'hover:bg-white/5' : 'opacity-40 cursor-not-allowed' }}"
                            style="text-decoration: none !important; {{ request()->routeIs('admin.settings.*') ? 'border-left: 3px solid #fbbf24; padding-left: 21px;' : 'border-left: 3px solid transparent;' }}">
                            <svg class="mr-4 h-5 w-5"
                                style="color: {{ request()->routeIs('admin.settings.*') ? '#fbbf24' : '#9ca3af' }} !important;"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924-1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                            <span
                                style="color: {{ request()->routeIs('admin.settings.*') ? '#fbbf24' : '#9ca3af' }} !important; font-weight: 600 !important; font-size: 0.9rem !important;">Paramètres</span>
                        </a>

                        <!-- Profile (Blue) -->
                        <a href="{{ route('profile.edit') }}"
                            class="flex items-center px-6 py-3.5 transition-all duration-200 hover:bg-gray-800"
                            style="text-decoration: none !important;">
                            <svg class="mr-4 h-5 w-5" style="color: #38bdf8 !important;" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                            </svg>
                            <span
                                style="color: #38bdf8 !important; font-weight: 500 !important; font-size: 0.9rem !important;">Mon
                                Profil</span>
                        </a>

                        <!-- Site Public Link -->
                        <a href="{{ url('/') }}" target="_blank"
                            class="w-full flex items-center px-6 py-3.5 transition-all duration-200 hover:bg-gray-800"
                            style="text-decoration: none;">
                            <svg class="mr-4 h-5 w-5" style="color: #facc15 !important;" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                            </svg>
                            <span
                                style="color: #facc15 !important; font-weight: 500 !important; font-size: 0.9rem !important;">Site
                                Public</span>
                        </a>

                        <!-- Logout (Red) -->
                        <form method="POST" action="{{ route('logout') }}" class="mt-8">
                            @csrf
                            <button type="submit" onclick="event.preventDefault(); this.closest('form').submit();"
                                class="w-full flex items-center px-6 py-3.5 transition-all duration-200 hover:bg-red-900/20"
                                style="background: none; border: none; cursor: pointer; text-align: left; text-decoration: none !important;">
                                <svg class="mr-4 h-5 w-5" style="color: #dc2626 !important;" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                                </svg>
                                <span
                                    style="color: #dc2626 !important; font-weight: 600 !important; font-size: 0.9rem !important;">Déconnexion</span>
                            </button>
                        </form>
                    </div>
                </nav>
            </div>
        </aside>

        <!-- Main content -->
        <div class="flex-1 flex flex-col min-w-0 transition-all duration-300">
            <!-- Top bar -->
            <header class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-30">
                <div class="flex items-center justify-between px-4 lg:px-6 py-3">
                    <!-- Left Section: Year & Breadcrumbs -->
                    <div class="flex items-center">
                        <button @click="sidebarOpen = true" class="text-gray-500 focus:outline-none lg:hidden mr-4">
                            <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4 6H20M4 12H20M4 18H11" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </button>

                        <!-- Management Year: Premium Badge -->
                        @php
                            $currentYearValue = \App\Models\Setting::get('management_year', date('Y'));
                            $mgmtYear = \App\Models\ManagementYear::where('year', $currentYearValue)->first() 
                                        ?? \App\Models\ManagementYear::where('status', 'active')->first();
                        @endphp
                        <div class="hidden lg:flex items-center">
                            <div class="flex items-center bg-slate-100/80 border border-slate-200 rounded-lg p-1 px-3 shadow-sm">
                                <div class="flex items-center gap-2 pr-3 border-r border-slate-300">
                                    <div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
                                    <span class="text-[11px] font-black text-slate-500 uppercase tracking-widest">En cours</span>
                                </div>
                                <div class="flex items-center gap-2 pl-3">
                                    <span class="text-[12px] font-bold text-slate-900 uppercase">Gestion</span>
                                    <span class="text-[14px] font-black text-red-600 tabular-nums">
                                        {{ $mgmtYear ? $mgmtYear->year : $currentYearValue }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        @isset($header)
                            <div class="hidden md:block h-6 w-px bg-slate-200 mx-6"></div>
                            <h1 class="text-sm md:text-lg font-bold text-slate-900 tracking-tight">
                                {{ $header }}
                            </h1>
                        @endisset
                    </div>

                    <!-- Center Section: Pro Search Bar -->
                    <div class="flex-1 flex justify-center px-4">
                        <div class="relative w-full max-w-md group">
                            <input type="text" placeholder="Recherche rapide..."
                                class="w-full px-5 pr-12 py-2 bg-slate-100/50 border border-slate-200 rounded-xl text-sm text-slate-900 placeholder-slate-400 focus:bg-white focus:border-slate-900 focus:ring-4 focus:ring-slate-900/5 transition-all outline-none"
                                style="height: 40px;">
                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                <kbd class="hidden sm:inline-flex items-center px-1.5 py-0.5 border border-slate-200 rounded bg-white text-[10px] font-medium text-slate-400 tracking-tighter shadow-sm">
                                    ⌘ K
                                </kbd>
                            </div>
                        </div>
                    </div>

                    <!-- Right Section: Actions & Profile -->
                    <div class="flex items-center gap-2 md:gap-4">


                        <div class="h-8 w-px bg-slate-200 hidden md:block"></div>

                        <!-- User Profile -->
                        <div class="flex items-center gap-3 pl-2 cursor-pointer">
                            <div class="hidden md:flex flex-col text-right">
                                <span class="text-[13px] font-bold text-slate-900 leading-tight uppercase tracking-tight">{{ Auth::user()->name }}</span>
                            </div>
                            
                            <div class="relative">
                                <div class="w-10 h-10 rounded-full flex items-center justify-center border border-amber-400 transition-all overflow-hidden"
                                    style="background-color: #fbbf24 !important;">
                                    <svg class="w-6 h-6 text-black" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- Page content -->
            <main class="flex-1 overflow-x-hidden overflow-y-auto bg-white">
                <div class="p-4 md:p-6 pb-6">
                    {{ $slot }}
                </div>
            </main>
        </div>
    </div>
    <x-confirm-modal />
</body>

</html>