<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Admin') - {{ $siteName ?? 'ATARA LifeStyle' }}</title>
    <link rel="icon" type="image/x-icon" href="{{ $siteFavicon ?? asset('favicon.ico') }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <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=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <style>
        :root {
            --sidebar-width: 270px;
            --primary: #0ea5e9;
            --secondary: #22d3ee;
            --accent: #a855f7;
            --surface: #ffffff;
            --surface-strong: #f8f9fa;
            --border: rgba(0, 0, 0, 0.1);
            --text: #1e293b;
            --muted: #64748b;
            --success: #22c55e;
            --warning: #f59e0b;
            --danger: #ef4444;
        }

        * { box-sizing: border-box; }

        body { 
            font-family: 'Space Grotesk', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f1f5f9;
            color: var(--text);
            min-height: 100vh;
        }

        a { color: var(--primary); text-decoration: none; }
        a:hover { color: var(--secondary); }

        .sidebar {
            background: #ffffff;
            border-right: 1px solid var(--border);
            height: 100vh;
            max-height: 100vh;
            width: var(--sidebar-width);
            position: fixed;
            left: 0;
            top: 0;
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 1000;
            box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
        }

        .sidebar::-webkit-scrollbar { width: 6px; }
        .sidebar::-webkit-scrollbar-track { background: transparent; }
        .sidebar::-webkit-scrollbar-thumb { 
            background: rgba(14, 165, 233, 0.3);
            border-radius: 3px;
        }

        .sidebar .nav-link {
            color: var(--text);
            padding: 12px 20px;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
            font-size: 0.95rem;
            font-weight: 500;
            display: flex;
            align-items: center;
        }

        .sidebar .nav-link:hover {
            background: rgba(14, 165, 233, 0.1);
            color: var(--primary);
            border-left-color: var(--primary);
            padding-left: 25px;
        }

        .sidebar .nav-link.active {
            background: rgba(14, 165, 233, 0.15);
            color: var(--primary);
            border-left-color: var(--primary);
        }

        .sidebar .nav-section {
            padding: 15px 20px 8px;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--muted);
            opacity: 0.8;
            margin-top: 15px;
            font-weight: 700;
        }

        .main-content {
            margin-left: var(--sidebar-width);
            padding: 25px;
            min-height: 100vh;
        }

        .topbar {
            background: #ffffff;
            padding: 18px 30px;
            margin: -25px -25px 30px -25px;
            border-bottom: 1px solid var(--border);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .card {
            background: #ffffff;
            border: 1px solid var(--border);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            border-radius: 12px;
            transition: transform 0.3s ease;
        }

        .card:hover { transform: translateY(-2px); }

        .card-header {
            background: rgba(14, 165, 233, 0.1);
            border-bottom: 1px solid var(--border);
            font-weight: 600;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border: none;
            font-weight: 600;
            padding: 10px 20px;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
        }

        .table {
            color: var(--text);
            background: transparent;
        }

        .table thead {
            background: rgba(14, 165, 233, 0.1);
            border-bottom: 2px solid var(--border);
        }

        .table tbody tr {
            border-bottom: 1px solid var(--border);
            transition: background 0.2s ease;
        }

        .table tbody tr:hover {
            background: rgba(14, 165, 233, 0.05);
        }

        .badge {
            padding: 6px 12px;
            font-weight: 600;
            border-radius: 6px;
        }

        .form-control, .form-select {
            background: #ffffff;
            border: 1px solid var(--border);
            color: var(--text);
        }

        .form-control:focus, .form-select:focus {
            background: #ffffff;
            border-color: var(--primary);
            color: var(--text);
            box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.25);
        }

        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
                transition: transform 0.3s ease;
            }
            .sidebar.show { transform: translateX(0); }
            .main-content { margin-left: 0; }
        }
    </style>
    @stack('styles')
</head>
<body>    <!-- Bannière Impersonate -->
    @include('components.impersonate-banner')
        <nav class="sidebar">
        <div class="p-3 text-center border-bottom border-white border-opacity-25">
            <a href="{{ route('admin.dashboard') }}" class="text-decoration-none">
                <img src="{{ $siteLogo ?? asset('images/logo.png') }}" alt="{{ $siteName ?? 'ATARA LifeStyle' }}" height="{{ $siteLogoHeight ?? 50 }}" class="mb-2">
                @if($showLogoText ?? false)
                <h5 class="mb-0">{{ $siteName ?? 'ATARA LifeStyle' }}</h5>
                @endif
            </a>
            <small class="opacity-75 d-block">Administration</small>
        </div>
        <ul class="nav flex-column px-2 py-2">
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}" href="{{ route('admin.dashboard') }}">
                    <i class="bi bi-speedometer2 me-2"></i>Dashboard
                </a>
            </li>

            <li class="nav-section">Gestion Principale</li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.users.*') ? 'active' : '' }}" href="{{ route('admin.users.index') }}">
                    <i class="bi bi-people me-2"></i>Utilisateurs
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.sellers.*') ? 'active' : '' }}" href="{{ route('admin.sellers.index') }}">
                    <i class="bi bi-shop me-2"></i>Sellers
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.categories.*') ? 'active' : '' }}" href="{{ route('admin.categories.index') }}">
                    <i class="bi bi-tags me-2"></i>Categories
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.products.*') ? 'active' : '' }}" href="{{ route('admin.products.index') }}">
                    <i class="bi bi-bag me-2"></i>Produits
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.orders.*') ? 'active' : '' }}" href="{{ route('admin.orders.index') }}">
                    <i class="bi bi-cart3 me-2"></i>Commandes
                </a>
            </li>

            <li class="nav-section">MLM & Finances</li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.mlm.*') ? 'active' : '' }}" href="{{ route('admin.mlm.index') }}">
                    <i class="bi bi-diagram-3 me-2"></i>Configuration MLM
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.commissions.*') ? 'active' : '' }}" href="{{ route('admin.commissions.index') }}">
                    <i class="bi bi-cash-stack me-2"></i>Commissions
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.wallets.*') ? 'active' : '' }}" href="{{ route('admin.wallets.index') }}">
                    <i class="bi bi-wallet2 me-2"></i>Portefeuilles
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.savings.*') ? 'active' : '' }}" href="{{ route('admin.savings.index') }}">
                    <i class="bi bi-piggy-bank me-2"></i>💰 Épargne
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.pool.*') ? 'active' : '' }}" href="{{ route('admin.pool.index') }}">
                    <i class="bi bi-pie-chart me-2"></i>Pool de Partage
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.leaderboards.*') ? 'active' : '' }}" href="{{ route('admin.leaderboards.index') }}">
                    <i class="bi bi-trophy me-2"></i>Classements
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.badges.*') ? 'active' : '' }}" href="{{ route('admin.badges.index') }}">
                    <i class="bi bi-award me-2"></i>Badges
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.loyalty.*') ? 'active' : '' }}" href="{{ route('admin.loyalty.index') }}">
                    <i class="bi bi-gift me-2"></i>Fidelite
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.coupons.*') ? 'active' : '' }}" href="{{ route('admin.coupons.index') }}">
                    <i class="bi bi-percent me-2"></i>Coupons
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.promotions.*') ? 'active' : '' }}" href="{{ route('admin.promotions.index') }}">
                    <i class="bi bi-tag me-2"></i>Promotions
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.top-sponsors.*') ? 'active' : '' }}" href="{{ route('admin.top-sponsors.index') }}">
                    <i class="bi bi-trophy me-2"></i>🏆 Parrain du mois
                </a>
            </li>

            <li class="nav-section">Investissement</li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.investment-categories.*') ? 'active' : '' }}" href="{{ route('admin.investment-categories.index') }}">
                    <i class="bi bi-collection me-2"></i>Catégories d'investissement
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.investment-products.*') ? 'active' : '' }}" href="{{ route('admin.investment-products.index') }}">
                    <i class="bi bi-box-seam me-2"></i>Produits d'investissement
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.plans') ? 'active' : '' }}" href="{{ route('admin.plans') }}">
                    <i class="bi bi-calendar2-check me-2"></i>Plans d'investissement
                </a>
            </li>

            <li class="nav-section">Support</li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.disputes.*') ? 'active' : '' }}" href="{{ route('admin.disputes.index') }}">
                    <i class="bi bi-exclamation-triangle me-2"></i>Litiges
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.reviews.*') ? 'active' : '' }}" href="{{ route('admin.reviews.index') }}">
                    <i class="bi bi-star me-2"></i>Avis
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.contacts.*') ? 'active' : '' }}" href="{{ route('admin.contacts.index') }}">
                    <i class="bi bi-envelope me-2"></i>Contacts
                </a>
            </li>

            <li class="nav-section">Communication</li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.blog.*') ? 'active' : '' }}" href="{{ route('admin.blog.index') }}">
                    <i class="bi bi-journal-text me-2"></i>Blog
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.newsletter.*') ? 'active' : '' }}" href="{{ route('admin.newsletter.index') }}">
                    <i class="bi bi-newspaper me-2"></i>Newsletter
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.notifications.*') ? 'active' : '' }}" href="{{ route('admin.notifications.index') }}">
                    <i class="bi bi-bell me-2"></i>Notifications
                </a>
            </li>

            <li class="nav-section">Configuration</li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.settings.index') ? 'active' : '' }}" href="{{ route('admin.settings.index') }}">
                    <i class="bi bi-sliders me-2"></i>Parametres
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.settings.site') ? 'active' : '' }}" href="{{ route('admin.settings.site') }}">
                    <i class="bi bi-image me-2"></i>Logo & Identité
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.features.*') ? 'active' : '' }}" href="{{ route('admin.features.index') }}">
                    <i class="bi bi-toggles me-2"></i>Fonctionnalites
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.languages.*') ? 'active' : '' }}" href="{{ route('admin.languages.index') }}">
                    <i class="bi bi-translate me-2"></i>Langues
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.currencies.*') ? 'active' : '' }}" href="{{ route('admin.currencies.index') }}">
                    <i class="bi bi-currency-exchange me-2"></i>Devises
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.shipping-fees.*') ? 'active' : '' }}" href="{{ route('admin.shipping-fees.index') }}">
                    <i class="bi bi-truck me-2"></i>Livraison
                </a>
            </li>

            <li class="nav-section">Outils</li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.ai.*') ? 'active' : '' }}" href="{{ route('admin.ai.index') }}">
                    <i class="bi bi-robot me-2"></i>Module IA
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.analytics.*') ? 'active' : '' }}" href="{{ route('admin.analytics.index') }}">
                    <i class="bi bi-bar-chart me-2"></i>Analytics
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.activity-logs.*') ? 'active' : '' }}" href="{{ route('admin.activity-logs.index') }}">
                    <i class="bi bi-activity me-2"></i>Logs
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.email-templates.*') ? 'active' : '' }}" href="{{ route('admin.email-templates.index') }}">
                    <i class="bi bi-envelope-paper me-2"></i>Templates Email
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.email-logs.*') ? 'active' : '' }}" href="{{ route('admin.email-logs.index') }}">
                    <i class="bi bi-clock-history me-2"></i>Historique Emails
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {{ request()->routeIs('admin.exports.*') ? 'active' : '' }}" href="{{ route('admin.exports.index') }}">
                    <i class="bi bi-download me-2"></i>Exports CSV
                </a>
            </li>
        </ul>
        <div class="p-3 border-top border-white border-opacity-25 mt-auto">
            <div class="d-flex align-items-center mb-2 text-white">
                <i class="bi bi-person-circle fs-5 me-2"></i>
                <div class="small flex-grow-1">
                    <div class="fw-bold">{{ Auth::user()->name }}</div>
                    <div class="opacity-75">{{ Auth::user()->role }}</div>
                </div>
                <a href="{{ route('admin.profile.edit') }}" class="text-white"><i class="bi bi-gear"></i></a>
            </div>
            <form action="{{ route('logout') }}" method="POST">
                @csrf
                <button type="submit" class="btn btn-light w-100 btn-sm">
                    <i class="bi bi-box-arrow-right me-2"></i>Deconnexion
                </button>
            </form>
        </div>
    </nav>

    <main class="main-content">
        <div class="topbar d-flex justify-content-between align-items-center flex-wrap gap-2">
            <h2 class="h5 mb-0">@yield('page-title', 'Dashboard')</h2>
            <div class="d-flex align-items-center gap-3">
                <span class="text-muted small">{{ now()->format('d/m/Y H:i') }}</span>
            </div>
        </div>

        @yield('content')
    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <!-- SweetAlert2 Ultra Modern Theme -->
    @include('components.swal-modern-theme')
    
    <script>
        // Auto-hide alerts after 5 seconds
        document.querySelectorAll('.alert').forEach(function(alert) {
            setTimeout(function() {
                let bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            }, 5000);
        });

        // Confirmation globale pour les suppressions
        document.querySelectorAll('form[method="POST"] button[type="submit"]').forEach(function(button) {
            const form = button.closest('form');
            if (form.action.includes('destroy') || form.querySelector('input[name="_method"][value="DELETE"]')) {
                button.addEventListener('click', function(e) {
                    if (!button.hasAttribute('data-confirmed')) {
                        e.preventDefault();
                        
                        Swal.fire({
                            title: 'Êtes-vous sûr ?',
                            text: "Cette action est irréversible !",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#d33',
                            cancelButtonColor: '#3085d6',
                            confirmButtonText: 'Oui, supprimer !',
                            cancelButtonText: 'Annuler'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                button.setAttribute('data-confirmed', 'true');
                                button.click();
                            }
                        });
                    }
                });
            }
        });

        // Afficher les messages de session avec SweetAlert2
        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Succès !',
                text: '{{ session('success') }}',
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true
            });
        @endif

        @if(session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Erreur !',
                text: '{{ session('error') }}',
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true
            });
        @endif

        @if(session('warning'))
            Swal.fire({
                icon: 'warning',
                title: 'Attention !',
                text: '{{ session('warning') }}',
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true
            });
        @endif

        @if(session('info'))
            Swal.fire({
                icon: 'info',
                title: 'Information',
                text: '{{ session('info') }}',
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true
            });
        @endif
    </script>
    
    @stack('scripts')
</body>
</html>
