@extends('layouts.app')

@push('styles')
    @vite('resources/css/pages/admin-dashboard.css')
@endpush

@section('content')
@include('components.admin-header')

@php
    $totalUsers    = \App\Models\User::count();
    $activeUsers   = \App\Models\User::where('is_admin', false)->where('is_active', true)->count();
    $pendingUsers  = \App\Models\User::where('is_admin', false)->where('is_active', false)->count();
    $adminCount    = \App\Models\User::where('is_admin', true)->count();
    $totalProducts = \App\Models\Product::count();
    $users         = \App\Models\User::latest()->get();

    // Inscriptions par mois (6 derniers mois)
    $months = collect();
    for ($i = 5; $i >= 0; $i--) {
        $date  = now()->subMonths($i);
        $count = \App\Models\User::where('is_admin', false)
                    ->whereYear('created_at', $date->year)
                    ->whereMonth('created_at', $date->month)
                    ->count();
        $months->push(['label' => $date->isoFormat('MMM YY'), 'count' => $count]);
    }

    // Statistiques vidéos & stockage
    $totalVideos = \App\Models\Product::whereNotNull('video')->where('video','!=','')->count();

    $formatBytes = function(int $bytes): string {
        if ($bytes >= 1073741824) return round($bytes/1073741824,2).' Go';
        if ($bytes >= 1048576)   return round($bytes/1048576,2).' Mo';
        if ($bytes >= 1024)      return round($bytes/1024,1).' Ko';
        return $bytes.' o';
    };

    $totalVideoBytes = \App\Models\Product::whereNotNull('video')->where('video','!=','')->pluck('video')
        ->sum(fn($p) => \Illuminate\Support\Facades\Storage::disk('public')->exists($p) ? \Illuminate\Support\Facades\Storage::disk('public')->size($p) : 0);

    $totalImageBytes = \App\Models\Product::whereNotNull('image')->where('image','!=','')->pluck('image')
        ->sum(fn($p) => \Illuminate\Support\Facades\Storage::disk('public')->exists($p) ? \Illuminate\Support\Facades\Storage::disk('public')->size($p) : 0);

    $totalVideoSize  = $formatBytes((int)$totalVideoBytes);
    $totalImageSize  = $formatBytes((int)$totalImageBytes);
    $totalImages     = \App\Models\Product::whereNotNull('image')->where('image','!=','')->count();

    // Top 5 utilisateurs par nombre de produits
    $topUsers = \App\Models\User::where('is_admin', false)
                    ->withCount('products')
                    ->orderByDesc('products_count')
                    ->limit(5)
                    ->get();

    // Répartition comptes
    $withLogo     = \App\Models\User::where('is_admin', false)->whereNotNull('logo')->where('logo','!=','')->count();
    $withoutLogo  = \App\Models\User::where('is_admin', false)->where(fn($q) => $q->whereNull('logo')->orWhere('logo',''))->count();
    $withProducts2 = \App\Models\User::where('is_admin', false)->has('products')->count();
    $noProducts    = \App\Models\User::where('is_admin', false)->doesntHave('products')->count();
@endphp

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
*{font-family:'Inter',sans-serif;box-sizing:border-box}

@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.4)}50%{box-shadow:0 0 0 6px rgba(16,185,129,0)}}

.admin-card{background:#fff;border-radius:20px;border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 16px rgba(0,0,0,.05);transition:transform .25s,box-shadow .25s;animation:fadeInUp .6s ease both}
.admin-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.1)}

.stat-card{padding:20px;display:flex;align-items:center;gap:14px}
.stat-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-value{font-size:28px;font-weight:900;line-height:1;letter-spacing:-.02em;color:#0f2a45}
.stat-label{font-size:11px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;margin-top:4px}

.table-row:hover{background:#f8fafc}
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:50px;font-size:11px;font-weight:700}

.toast{position:fixed;bottom:16px;right:16px;left:16px;padding:14px 20px;border-radius:14px;font-size:14px;font-weight:600;color:#fff;z-index:9999;transform:translateY(80px);opacity:0;transition:all .35s ease;pointer-events:none;text-align:center}
.toast.show{transform:translateY(0);opacity:1}
.toast.success{background:linear-gradient(135deg,#059669,#10b981);box-shadow:0 8px 24px rgba(16,185,129,.4)}
.toast.error{background:linear-gradient(135deg,#dc2626,#ef4444);box-shadow:0 8px 24px rgba(239,68,68,.4)}

input:focus{outline:none;border-color:#1a8ed4!important;box-shadow:0 0 0 3px rgba(26,142,212,.12)}

/* ── GRILLES ── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.charts-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-bottom:28px}
.chart-span2{grid-column:span 2}
.admin-main-grid{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.admin-right-col{display:flex;flex-direction:column;gap:20px}

/* ── TABLE ── */
.table-wrap{overflow-x:auto;border-radius:14px;border:1px solid #f1f5f9;-webkit-overflow-scrolling:touch}
.admin-search-input{padding:9px 14px 9px 36px;border-radius:10px;border:1.5px solid #e2e8f0;font-size:13px;font-weight:500;color:#0f2a45;width:220px;background:#f8fafc}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
    .charts-grid{grid-template-columns:1fr 1fr}
    .chart-span2{grid-column:span 2}
}
@media(max-width:900px){
    .admin-main-grid{grid-template-columns:1fr}
    .charts-grid{grid-template-columns:1fr 1fr}
    .chart-span2{grid-column:span 2}
}
@media(max-width:700px){
    .stats-grid{grid-template-columns:1fr 1fr}
    .charts-grid{grid-template-columns:1fr}
    .chart-span2{grid-column:span 1}
    .admin-search-input{width:100%}
    .table-search-row{flex-direction:column;align-items:stretch!important}
    .stat-value{font-size:22px}
}
@media(max-width:420px){
    .stats-grid{grid-template-columns:1fr 1fr}
    .stat-card{padding:14px;gap:10px}
    .stat-icon{width:38px;height:38px;border-radius:10px}
    .stat-value{font-size:20px}
    .stat-label{font-size:10px}
}

@media(min-width:701px){
    .toast{left:auto;right:24px;text-align:left}
}
</style>

<!-- Toast -->
<div id="admin-toast" class="toast"></div>

<div style="min-height:100vh;background:#f0f4f8;padding-top:80px">

    <!-- ── HERO ── -->
    <div style="background:linear-gradient(135deg,#020f1e 0%,#041d38 50%,#063660 100%);padding:48px 0 80px;position:relative;overflow:hidden">
        <div style="position:absolute;top:-80px;right:-80px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(8,163,255,.1),transparent 70%);pointer-events:none"></div>
        <div style="position:absolute;bottom:-60px;left:-40px;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(4,93,152,.15),transparent 70%);pointer-events:none"></div>
        <div style="position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px;pointer-events:none"></div>

        <div style="max-width:1280px;margin:0 auto;padding:0 24px;position:relative;z-index:1">
            <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px">
                <div>
                    <div style="display:inline-flex;align-items:center;gap:7px;background:rgba(8,163,255,.1);border:1px solid rgba(8,163,255,.25);border-radius:50px;padding:5px 14px;margin-bottom:14px">
                        <span style="width:7px;height:7px;border-radius:50%;background:#08a3ff;box-shadow:0 0 8px #08a3ff;display:inline-block;animation:pulse-dot 2s infinite"></span>
                        <span style="font-size:12px;font-weight:700;color:#7dcfff;letter-spacing:.06em">PANNEAU D'ADMINISTRATION</span>
                    </div>
                    <h1 style="font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;color:#fff;line-height:1.15;letter-spacing:-.02em;margin:0">
                        Bonjour, <span style="background:linear-gradient(135deg,#08a3ff,#7dd3fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">{{ auth()->user()->name }}</span> 
                    </h1>
                    <p style="font-size:15px;color:rgba(255,255,255,.5);margin-top:8px">Voici un aperçu de votre plateforme aujourd'hui.</p>
                </div>
                <div style="font-size:13px;color:rgba(255,255,255,.35);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 16px">
                    {{ now()->isoFormat('dddd D MMMM YYYY') }}
                </div>
            </div>
        </div>
    </div>

    <!-- ── STATS ── -->
    <div style="max-width:1280px;margin:-40px auto 0;padding:0 24px;position:relative;z-index:10">
        <div class="stats-grid">

            @foreach([
                ['val'=>$totalUsers,   'label'=>'Utilisateurs',       'bg'=>'#dbeafe','color'=>'#1d4ed8','icon'=>'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197','delay'=>'0s'],
                ['val'=>$activeUsers,  'label'=>'Comptes actifs',     'bg'=>'#d1fae5','color'=>'#065f46','icon'=>'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z','delay'=>'.1s'],
                ['val'=>$pendingUsers, 'label'=>'En attente',         'bg'=>'#fef3c7','color'=>'#92400e','icon'=>'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z','delay'=>'.2s'],
                ['val'=>$totalProducts,'label'=>'Produits total',     'bg'=>'#ede9fe','color'=>'#5b21b6','icon'=>'M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4','delay'=>'.3s'],
            ] as $s)
            <div class="admin-card stat-card" style="animation-delay:{{ $s['delay'] }}">
                <div class="stat-icon" style="background:{{ $s['bg'] }}">
                    <svg width="24" height="24" fill="none" stroke="{{ $s['color'] }}" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="{{ $s['icon'] }}"/>
                    </svg>
                </div>
                <div>
                    <div class="stat-value">{{ $s['val'] }}</div>
                    <div class="stat-label">{{ $s['label'] }}</div>
                </div>
            </div>
            @endforeach

            {{-- Vidéos publiées --}}
            <div class="admin-card stat-card" style="animation-delay:.4s">
                <div class="stat-icon" style="background:#fce7f3">
                    <svg width="24" height="24" fill="none" stroke="#be185d" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.553-2.069A1 1 0 0121 8.82v6.36a1 1 0 01-1.447.894L15 14M3 8a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z"/>
                    </svg>
                </div>
                <div>
                    <div class="stat-value">{{ $totalVideos }}</div>
                    <div class="stat-label">Vidéos publiées</div>
                    <div style="font-size:11px;color:#94a3b8;margin-top:2px;font-weight:600">{{ $totalVideoSize }}</div>
                </div>
            </div>

            {{-- Images publiées --}}
            <div class="admin-card stat-card" style="animation-delay:.5s">
                <div class="stat-icon" style="background:#ecfdf5">
                    <svg width="24" height="24" fill="none" stroke="#059669" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                </div>
                <div>
                    <div class="stat-value">{{ $totalImages }}</div>
                    <div class="stat-label">Images publiées</div>
                    <div style="font-size:11px;color:#94a3b8;margin-top:2px;font-weight:600">{{ $totalImageSize }}</div>
                </div>
            </div>

        </div>

        <!-- ── STATISTIQUES / GRAPHIQUES ── -->
        <div class="charts-grid">

            <!-- Graphique 1 : Inscriptions par mois (barres) -->
            <div class="admin-card chart-span2" style="padding:24px;animation-delay:.1s">
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:18px">
                    <div>
                        <div style="font-size:15px;font-weight:800;color:#0f2a45">Inscriptions par mois</div>
                        <div style="font-size:12px;color:#94a3b8;margin-top:2px">6 derniers mois — utilisateurs uniquement</div>
                    </div>
                    <div style="width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#1a8ed4,#08a3ff);display:flex;align-items:center;justify-content:center;flex-shrink:0">
                        <svg width="18" height="18" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24"><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>
                    </div>
                </div>
                <div style="position:relative;height:200px">
                    <canvas id="chartMonths"></canvas>
                </div>
            </div>

            <!-- Graphique 2 : Répartition comptes (donut) -->
            <div class="admin-card" style="padding:24px;animation-delay:.2s">
                <div style="display:flex;align-items:center;gap:12px;margin-bottom:18px">
                    <div style="width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#7c3aed,#8b5cf6);display:flex;align-items:center;justify-content:center;flex-shrink:0">
                        <svg width="18" height="18" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/><path stroke-linecap="round" stroke-linejoin="round" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"/></svg>
                    </div>
                    <div>
                        <div style="font-size:15px;font-weight:800;color:#0f2a45">Statuts comptes</div>
                        <div style="font-size:12px;color:#94a3b8">Répartition</div>
                    </div>
                </div>
                <div style="position:relative;height:160px">
                    <canvas id="chartStatus"></canvas>
                </div>
                <div style="margin-top:14px;display:flex;flex-direction:column;gap:6px">
                    <div style="display:flex;align-items:center;justify-content:space-between">
                        <span style="display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#475569">
                            <span style="width:10px;height:10px;border-radius:3px;background:#10b981;display:inline-block"></span>Actifs
                        </span>
                        <span style="font-size:12px;font-weight:800;color:#0f2a45">{{ $activeUsers }}</span>
                    </div>
                    <div style="display:flex;align-items:center;justify-content:space-between">
                        <span style="display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#475569">
                            <span style="width:10px;height:10px;border-radius:3px;background:#f59e0b;display:inline-block"></span>En attente
                        </span>
                        <span style="font-size:12px;font-weight:800;color:#0f2a45">{{ $pendingUsers }}</span>
                    </div>
                    <div style="display:flex;align-items:center;justify-content:space-between">
                        <span style="display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#475569">
                            <span style="width:10px;height:10px;border-radius:3px;background:#8b5cf6;display:inline-block"></span>Admins
                        </span>
                        <span style="font-size:12px;font-weight:800;color:#0f2a45">{{ $adminCount }}</span>
                    </div>
                </div>
            </div>

            <!-- Graphique 3 : Top utilisateurs par produits (barres horizontales) -->
            <div class="admin-card chart-span2" style="padding:24px;animation-delay:.3s">
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:18px">
                    <div>
                        <div style="font-size:15px;font-weight:800;color:#0f2a45">Top 5 — utilisateurs actifs</div>
                        <div style="font-size:12px;color:#94a3b8;margin-top:2px">Classement par nombre de produits</div>
                    </div>
                    <div style="width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#059669,#10b981);display:flex;align-items:center;justify-content:center;flex-shrink:0">
                        <svg width="18" height="18" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                    </div>
                </div>
                <div style="position:relative;height:200px">
                    <canvas id="chartTopUsers"></canvas>
                </div>
            </div>

            <!-- Graphique 4 : Logo & Produits (donut) -->
            <div class="admin-card" style="padding:24px;animation-delay:.4s">
                <div style="display:flex;align-items:center;gap:12px;margin-bottom:18px">
                    <div style="width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#f59e0b,#fbbf24);display:flex;align-items:center;justify-content:center;flex-shrink:0">
                        <svg width="18" height="18" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    </div>
                    <div>
                        <div style="font-size:15px;font-weight:800;color:#0f2a45">Profil complet</div>
                        <div style="font-size:12px;color:#94a3b8">Logo & produits</div>
                    </div>
                </div>
                <div style="position:relative;height:160px">
                    <canvas id="chartProfile"></canvas>
                </div>
                <div style="margin-top:14px;display:flex;flex-direction:column;gap:6px">
                    <div style="display:flex;align-items:center;justify-content:space-between">
                        <span style="display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#475569">
                            <span style="width:10px;height:10px;border-radius:3px;background:#1a8ed4;display:inline-block"></span>Avec logo
                        </span>
                        <span style="font-size:12px;font-weight:800;color:#0f2a45">{{ $withLogo }}</span>
                    </div>
                    <div style="display:flex;align-items:center;justify-content:space-between">
                        <span style="display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#475569">
                            <span style="width:10px;height:10px;border-radius:3px;background:#e2e8f0;display:inline-block"></span>Sans logo
                        </span>
                        <span style="font-size:12px;font-weight:800;color:#0f2a45">{{ $withoutLogo }}</span>
                    </div>
                    <div style="display:flex;align-items:center;justify-content:space-between">
                        <span style="display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#475569">
                            <span style="width:10px;height:10px;border-radius:3px;background:#10b981;display:inline-block"></span>Avec produits
                        </span>
                        <span style="font-size:12px;font-weight:800;color:#0f2a45">{{ $withProducts2 }}</span>
                    </div>
                    <div style="display:flex;align-items:center;justify-content:space-between">
                        <span style="display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#475569">
                            <span style="width:10px;height:10px;border-radius:3px;background:#fde68a;display:inline-block"></span>Sans produits
                        </span>
                        <span style="font-size:12px;font-weight:800;color:#0f2a45">{{ $noProducts }}</span>
                    </div>
                </div>
            </div>

        </div>

        <!-- ── GRILLE PRINCIPALE ── -->
        <div class="admin-main-grid">

            <!-- Tableau utilisateurs -->
            <div class="admin-card" style="animation-delay:.15s;padding:28px">
                <div class="table-search-row" style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px">
                    <div>
                        <h2 style="font-size:18px;font-weight:800;color:#0f2a45;margin:0">Gestion des utilisateurs</h2>
                        <p style="font-size:13px;color:#94a3b8;margin:4px 0 0">{{ $totalUsers }} utilisateurs enregistrés</p>
                    </div>
                    <!-- Recherche -->
                    <div style="position:relative;flex:1;max-width:260px;min-width:140px">
                        <svg style="position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none" width="15" height="15" fill="none" stroke="#94a3b8" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                        <input type="text" id="admin-search" placeholder="Rechercher un utilisateur…"
                               oninput="adminSearch(this.value)"
                               class="admin-search-input">
                    </div>
                </div>

                <div class="table-wrap">
                    <table style="width:100%;border-collapse:collapse" id="users-table">
                        <thead>
                            <tr style="background:linear-gradient(135deg,#f8fafc,#f1f5f9)">
                                @foreach(['Utilisateur','Statut','Téléphone','Mapage','Logo','Actions'] as $th)
                                <th style="padding:12px 16px;text-align:left;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap">{{ $th }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody id="users-tbody">
                            @foreach($users as $u)
                            <tr class="table-row" data-name="{{ strtolower($u->name) }}" style="border-top:1px solid #f1f5f9;transition:background .15s">
                                <!-- Utilisateur -->
                                <td style="padding:14px 16px;white-space:nowrap">
                                    <div style="display:flex;align-items:center;gap:10px">
                                        <div style="width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#1a8ed4,#08a3ff);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0">
                                            {{ strtoupper(substr($u->name, 0, 1)) }}
                                        </div>
                                        <div>
                                            <div style="font-size:14px;font-weight:700;color:#0f2a45">{{ $u->name }}</div>
                                            @if($u->is_admin)
                                            <span class="badge" style="background:#ede9fe;color:#5b21b6;margin-top:2px">Admin</span>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <!-- Statut -->
                                <td style="padding:14px 16px;white-space:nowrap">
                                    @if($u->is_admin)
                                        <span class="badge" style="background:#ede9fe;color:#5b21b6">
                                            <span style="width:5px;height:5px;border-radius:50%;background:#7c3aed;display:inline-block"></span>
                                            Admin
                                        </span>
                                    @elseif($u->is_active)
                                        <span class="badge" id="badge-{{ $u->id }}" style="background:#d1fae5;color:#065f46">
                                            <span style="width:5px;height:5px;border-radius:50%;background:#10b981;display:inline-block"></span>
                                            Actif
                                        </span>
                                    @else
                                        <span class="badge" id="badge-{{ $u->id }}" style="background:#fef3c7;color:#92400e">
                                            <span style="width:5px;height:5px;border-radius:50%;background:#f59e0b;display:inline-block"></span>
                                            En attente
                                        </span>
                                    @endif
                                </td>
                                <!-- Téléphone -->
                                <td style="padding:14px 16px;white-space:nowrap;font-size:13px;color:#475569">
                                    {{ $u->phone ?? '—' }}
                                </td>
                                <!-- Mapage -->
                                <td class="mapage-cell" data-user-id="{{ $u->id }}" data-original-value="{{ $u->mapage }}" style="padding:14px 16px;white-space:nowrap">
                                    <div style="display:flex;align-items:center;gap:8px">
                                        <input type="text" class="mapage-input"
                                               value="{{ $u->mapage }}"
                                               placeholder="ex: ma-boutique"
                                               style="padding:7px 10px;border-radius:8px;border:1.5px solid #e2e8f0;font-size:12px;font-weight:600;color:#0f2a45;width:130px;background:#f8fafc">
                                        <button class="save-mapage-btn"
                                                style="padding:7px 12px;border-radius:8px;background:linear-gradient(135deg,#059669,#10b981);border:none;font-size:12px;font-weight:700;color:#fff;cursor:pointer;transition:opacity .2s;white-space:nowrap"
                                                onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
                                            Sauver
                                        </button>
                                    </div>
                                </td>
                                <!-- Logo -->
                                <td style="padding:14px 16px;white-space:nowrap">
                                    @if($u->logo && \Storage::disk('public')->exists($u->logo))
                                        <img src="{{ asset('storage/' . $u->logo) }}" alt="Logo" style="width:40px;height:40px;object-fit:contain;border-radius:10px;border:1px solid #e2e8f0;background:#f8fafc">
                                    @else
                                        <span style="font-size:12px;color:#cbd5e1;font-style:italic">Aucun</span>
                                    @endif
                                </td>
                                <!-- Actions -->
                                <td style="padding:14px 16px;white-space:nowrap">
                                    <div style="display:flex;align-items:center;gap:7px">
                                        @if(!$u->is_admin)
                                        <button id="toggle-btn-{{ $u->id }}"
                                                onclick="toggleActive({{ $u->id }}, this)"
                                                style="display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:8px;border:none;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;{{ $u->is_active ? 'background:#fef3c7;color:#92400e' : 'background:#d1fae5;color:#065f46' }}"
                                                onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'"
                                                data-active="{{ $u->is_active ? '1' : '0' }}">
                                            @if($u->is_active)
                                                <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                                                Désactiver
                                            @else
                                                <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                                Activer
                                            @endif
                                        </button>
                                        @endif
                                        <a id="voir-page-{{ $u->id }}" href="/az/{{ $u->mapage }}" target="_blank"
                                           style="display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:8px;border:1.5px solid #e2e8f0;font-size:12px;font-weight:600;color:#475569;text-decoration:none;transition:all .2s"
                                           onmouseover="this.style.borderColor='#1a8ed4';this.style.color='#1a8ed4'" onmouseout="this.style.borderColor='#e2e8f0';this.style.color='#475569'">
                                            <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                                            Voir page
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Aucun résultat -->
                <div id="admin-no-results" style="display:none;text-align:center;padding:32px;background:#f8fafc;border-radius:14px;margin-top:12px;border:2px dashed #e2e8f0">
                    <div style="font-size:32px;margin-bottom:8px">🔍</div>
                    <p style="color:#94a3b8;font-size:14px;font-weight:600">Aucun utilisateur trouvé.</p>
                </div>

                <div style="margin-top:16px;font-size:13px;color:#94a3b8;display:flex;justify-content:flex-end">
                    {{ $totalUsers }} utilisateurs au total
                </div>
            </div>

            <!-- Colonne droite -->
            <div class="admin-right-col">

                <!-- Infos système -->
                <div class="admin-card" style="padding:24px;animation-delay:.2s">
                    <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
                        <div style="width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#7c3aed,#8b5cf6);display:flex;align-items:center;justify-content:center">
                            <svg width="20" height="20" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/></svg>
                        </div>
                        <div>
                            <div style="font-size:15px;font-weight:800;color:#0f2a45">Informations système</div>
                            <div style="font-size:12px;color:#94a3b8">État de la plateforme</div>
                        </div>
                    </div>

                    <div style="display:flex;flex-direction:column;gap:10px">
                        @foreach([
                            ['dot'=>'#10b981','label'=>'Laravel','value'=>app()->version()],
                            ['dot'=>'#3b82f6','label'=>'PHP','value'=>PHP_VERSION],
                            ['dot'=>'#8b5cf6','label'=>'Base de données','value'=>'MySQL'],
                            ['dot'=>'#f59e0b','label'=>'Environnement','value'=>app()->environment()],
                        ] as $info)
                        <div style="display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:#f8fafc;border-radius:10px;border:1px solid #f1f5f9">
                            <div style="display:flex;align-items:center;gap:8px">
                                <span style="width:8px;height:8px;border-radius:50%;background:{{ $info['dot'] }};display:inline-block"></span>
                                <span style="font-size:13px;font-weight:600;color:#475569">{{ $info['label'] }}</span>
                            </div>
                            <span style="font-size:12px;font-weight:700;color:#0f2a45;background:#fff;padding:3px 10px;border-radius:6px;border:1px solid #e2e8f0">{{ $info['value'] }}</span>
                        </div>
                        @endforeach
                    </div>

                    <div style="margin-top:16px;padding:12px 14px;background:linear-gradient(135deg,#d1fae5,#ecfdf5);border-radius:12px;border:1px solid #a7f3d0;display:flex;align-items:center;gap:8px">
                        <svg width="16" height="16" fill="none" stroke="#059669" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        <span style="font-size:13px;font-weight:700;color:#065f46">Système opérationnel</span>
                    </div>
                </div>

                <!-- Résumé activité -->
                <div class="admin-card" style="padding:24px;animation-delay:.3s">
                    <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
                        <div style="width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#f59e0b,#fbbf24);display:flex;align-items:center;justify-content:center">
                            <svg width="20" height="20" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24"><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>
                        </div>
                        <div>
                            <div style="font-size:15px;font-weight:800;color:#0f2a45">Résumé</div>
                            <div style="font-size:12px;color:#94a3b8">Vue d'ensemble</div>
                        </div>
                    </div>

                    @php
                        $withMapage = \App\Models\User::whereNotNull('mapage')->where('mapage','!=','')->count();
                        $withLogo   = \App\Models\User::whereNotNull('logo')->where('logo','!=','')->count();
                        $withProducts = \App\Models\User::has('products')->count();
                    @endphp

                    @foreach([
                        ['label'=>'Pages configurées','val'=>$withMapage,'total'=>$totalUsers,'color'=>'#1a8ed4'],
                        ['label'=>'Avec logo','val'=>$withLogo,'total'=>$totalUsers,'color'=>'#8b5cf6'],
                        ['label'=>'Avec produits','val'=>$withProducts,'total'=>$totalUsers,'color'=>'#10b981'],
                    ] as $bar)
                    <div style="margin-bottom:14px">
                        <div style="display:flex;justify-content:space-between;margin-bottom:6px">
                            <span style="font-size:13px;font-weight:600;color:#475569">{{ $bar['label'] }}</span>
                            <span style="font-size:13px;font-weight:800;color:#0f2a45">{{ $bar['val'] }}/{{ $bar['total'] }}</span>
                        </div>
                        <div style="height:7px;background:#f1f5f9;border-radius:50px;overflow:hidden">
                            @php $pct = $bar['total'] > 0 ? round($bar['val']/$bar['total']*100) : 0; @endphp
                            <div style="height:100%;width:{{ $pct }}%;background:{{ $bar['color'] }};border-radius:50px;transition:width .6s ease"></div>
                        </div>
                    </div>
                    @endforeach
                </div>

                <!-- Modifier le mot de passe -->
                <div class="admin-card" style="padding:24px;animation-delay:.4s">
                    <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
                        <div style="width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#0f2a45,#1a8ed4);display:flex;align-items:center;justify-content:center">
                            <svg width="20" height="20" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
                        </div>
                        <div>
                            <div style="font-size:15px;font-weight:800;color:#0f2a45">Modifier le mot de passe</div>
                            <div style="font-size:12px;color:#94a3b8">Compte administrateur</div>
                        </div>
                    </div>

                    <div style="display:flex;flex-direction:column;gap:12px" id="admin-pw-form">

                        <!-- Mot de passe actuel -->
                        <div style="position:relative">
                            <label style="font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.07em;display:block;margin-bottom:5px">Mot de passe actuel</label>
                            <input type="password" id="admin-pw-current" placeholder="••••••••"
                                   style="width:100%;padding:10px 38px 10px 12px;border-radius:10px;border:1.5px solid #e2e8f0;font-size:13px;color:#0f2a45;background:#f8fafc">
                            <span onclick="toggleAdminPw('admin-pw-current',this)" style="position:absolute;right:10px;bottom:10px;cursor:pointer;color:#94a3b8">
                                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            </span>
                        </div>

                        <!-- Nouveau mot de passe -->
                        <div style="position:relative">
                            <label style="font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.07em;display:block;margin-bottom:5px">Nouveau mot de passe</label>
                            <input type="password" id="admin-pw-new" placeholder="••••••••"
                                   style="width:100%;padding:10px 38px 10px 12px;border-radius:10px;border:1.5px solid #e2e8f0;font-size:13px;color:#0f2a45;background:#f8fafc">
                            <span onclick="toggleAdminPw('admin-pw-new',this)" style="position:absolute;right:10px;bottom:10px;cursor:pointer;color:#94a3b8">
                                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            </span>
                        </div>

                        <!-- Confirmation -->
                        <div style="position:relative">
                            <label style="font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.07em;display:block;margin-bottom:5px">Confirmer le nouveau mot de passe</label>
                            <input type="password" id="admin-pw-confirm" placeholder="••••••••"
                                   style="width:100%;padding:10px 38px 10px 12px;border-radius:10px;border:1.5px solid #e2e8f0;font-size:13px;color:#0f2a45;background:#f8fafc">
                            <span onclick="toggleAdminPw('admin-pw-confirm',this)" style="position:absolute;right:10px;bottom:10px;cursor:pointer;color:#94a3b8">
                                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            </span>
                        </div>

                        <button onclick="saveAdminPassword()"
                                style="width:100%;padding:12px;border-radius:10px;background:linear-gradient(135deg,#0f2a45,#1a8ed4);border:none;font-size:14px;font-weight:800;color:#fff;cursor:pointer;transition:opacity .2s;margin-top:4px"
                                onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
                            Enregistrer le mot de passe
                        </button>
                    </div>
                </div>


                <!-- Mon profil admin -->
                <div class="admin-card" style="padding:24px;animation-delay:.5s">
                    <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
                        <div style="width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#7c3aed,#8b5cf6);display:flex;align-items:center;justify-content:center">
                            <svg width="20" height="20" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24"><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>
                        </div>
                        <div>
                            <div style="font-size:15px;font-weight:800;color:#0f2a45">Mon profil</div>
                            <div style="font-size:12px;color:#94a3b8">Informations personnelles</div>
                        </div>
                    </div>
                    <div style="display:flex;flex-direction:column;gap:12px">
                        <div>
                            <label style="font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.07em;display:block;margin-bottom:5px">Nom</label>
                            <input type="text" id="admin-profile-name" value="{{ auth()->user()->name }}"
                                   style="width:100%;padding:10px 12px;border-radius:10px;border:1.5px solid #e2e8f0;font-size:13px;font-weight:600;color:#0f2a45;background:#f8fafc">
                        </div>
                        <div>
                            <label style="font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.07em;display:block;margin-bottom:5px">Téléphone</label>
                            <input type="text" id="admin-profile-phone" value="{{ auth()->user()->phone ?? '' }}"
                                   style="width:100%;padding:10px 12px;border-radius:10px;border:1.5px solid #e2e8f0;font-size:13px;font-weight:600;color:#0f2a45;background:#f8fafc">
                        </div>
                        <div>
                            <label style="font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.07em;display:block;margin-bottom:5px">Email</label>
                            <input type="email" id="admin-profile-email" value="{{ auth()->user()->email ?? '' }}"
                                   style="width:100%;padding:10px 12px;border-radius:10px;border:1.5px solid #e2e8f0;font-size:13px;font-weight:600;color:#0f2a45;background:#f8fafc">
                        </div>
                        <button onclick="saveAdminProfile()"
                                style="width:100%;padding:11px;border-radius:10px;background:linear-gradient(135deg,#7c3aed,#8b5cf6);border:none;font-size:13px;font-weight:800;color:#fff;cursor:pointer;transition:opacity .2s;margin-top:4px"
                                onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
                            Enregistrer le profil
                        </button>
                    </div>
                </div>

            </div><!-- fin colonne droite -->
        </div><!-- fin admin-main-grid -->

        <div style="height:40px"></div>

        {{-- ── SECTION REDIRECTIONS ── --}}
        <div class="admin-card" style="padding:28px;animation-delay:.6s;margin-bottom:32px">
            <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:24px">
                <div style="display:flex;align-items:center;gap:12px">
                    <div style="width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#0f2a45,#1a8ed4);display:flex;align-items:center;justify-content:center;flex-shrink:0">
                        <svg width="20" height="20" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
                    </div>
                    <div>
                        <div style="font-size:16px;font-weight:800;color:#0f2a45">Redirections</div>
                        <div style="font-size:12px;color:#94a3b8">Gérer les redirections URL du site</div>
                    </div>
                </div>
                <button onclick="document.getElementById('redir-form-add').style.display=document.getElementById('redir-form-add').style.display==='none'?'flex':'none'"
                        style="display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:10px;background:linear-gradient(135deg,#045d98,#08a3ff);border:none;font-size:13px;font-weight:700;color:#fff;cursor:pointer;transition:opacity .2s"
                        onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
                    <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                    Nouvelle redirection
                </button>
            </div>

            {{-- Formulaire ajout --}}
            <div id="redir-form-add" style="display:none;flex-direction:column;gap:12px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:14px;padding:20px;margin-bottom:20px">
                <div style="font-size:13px;font-weight:800;color:#0f2a45;margin-bottom:4px">Ajouter une redirection</div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
                    <div>
                        <label style="font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.07em;display:block;margin-bottom:5px">Lien source (chemin)</label>
                        <input type="text" id="redir-add-source" placeholder="/ancien-chemin"
                               style="width:100%;padding:10px 12px;border-radius:10px;border:1.5px solid #e2e8f0;font-size:13px;color:#0f2a45;background:#fff">
                        <div style="font-size:11px;color:#94a3b8;margin-top:4px">Ex&nbsp;: /promo, /ancien-produit</div>
                    </div>
                    <div>
                        <label style="font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.07em;display:block;margin-bottom:5px">URL de destination (cible)</label>
                        <input type="text" id="redir-add-dest" placeholder="https://destination.com"
                               style="width:100%;padding:10px 12px;border-radius:10px;border:1.5px solid #e2e8f0;font-size:13px;color:#0f2a45;background:#fff">
                        <div style="font-size:11px;color:#94a3b8;margin-top:4px">Ex&nbsp;: https://monsite.com/nouvelle-page</div>
                    </div>
                </div>
                <div style="display:flex;gap:10px;justify-content:flex-end">
                    <button onclick="document.getElementById('redir-form-add').style.display='none'"
                            style="padding:9px 18px;border-radius:10px;border:1.5px solid #e2e8f0;background:#fff;font-size:13px;font-weight:700;color:#64748b;cursor:pointer">
                        Annuler
                    </button>
                    <button onclick="redirStore()"
                            style="padding:9px 18px;border-radius:10px;border:none;background:linear-gradient(135deg,#059669,#10b981);font-size:13px;font-weight:700;color:#fff;cursor:pointer;transition:opacity .2s"
                            onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
                        Enregistrer
                    </button>
                </div>
            </div>

            {{-- Tableau --}}
            @if($redirections->count() > 0)
            <div class="table-wrap">
                <table style="width:100%;border-collapse:collapse">
                    <thead>
                        <tr style="background:#f8fafc;border-bottom:2px solid #f1f5f9">
                            <th style="padding:12px 16px;text-align:left;font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em">#</th>
                            <th style="padding:12px 16px;text-align:left;font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em">Lien source</th>
                            <th style="padding:12px 16px;text-align:left;font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em">URL cible</th>
                            <th style="padding:12px 16px;text-align:center;font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="redir-tbody">
                        @foreach($redirections as $redir)
                        <tr class="table-row" id="redir-row-{{ $redir->id }}" style="border-bottom:1px solid #f1f5f9">
                            <td style="padding:14px 16px;font-size:12px;color:#94a3b8;font-weight:600">{{ $redir->id }}</td>
                            <td style="padding:14px 16px">
                                <span id="redir-src-{{ $redir->id }}" style="font-size:13px;font-weight:700;color:#0f2a45;font-family:monospace;background:#f0f4f8;padding:3px 8px;border-radius:6px">{{ $redir->source }}</span>
                            </td>
                            <td style="padding:14px 16px">
                                <span id="redir-dst-{{ $redir->id }}" style="font-size:13px;color:#1a8ed4;font-weight:600;word-break:break-all">{{ $redir->destination }}</span>
                            </td>
                            <td style="padding:14px 16px;text-align:center">
                                <div style="display:inline-flex;gap:8px">
                                    <button onclick="redirEditOpen({{ $redir->id }}, '{{ addslashes($redir->source) }}', '{{ addslashes($redir->destination) }}')"
                                            style="display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:8px;background:#eff6ff;color:#1a8ed4;border:1px solid #bfdbfe;font-size:12px;font-weight:700;cursor:pointer;transition:background .15s"
                                            onmouseover="this.style.background='#dbeafe'" onmouseout="this.style.background='#eff6ff'">
                                        <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125"/></svg>
                                        Modifier
                                    </button>
                                    <button onclick="redirDelete({{ $redir->id }})"
                                            style="display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:8px;background:#fef2f2;color:#dc2626;border:1px solid #fecaca;font-size:12px;font-weight:700;cursor:pointer;transition:background .15s"
                                            onmouseover="this.style.background='#fee2e2'" onmouseout="this.style.background='#fef2f2'">
                                        <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/></svg>
                                        Supprimer
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <div id="redir-empty" style="text-align:center;padding:40px 20px">
                <div style="font-size:36px;margin-bottom:12px">🔗</div>
                <div style="font-size:15px;font-weight:700;color:#0f2a45;margin-bottom:6px">Aucune redirection</div>
                <p style="font-size:13px;color:#94a3b8">Cliquez sur "Nouvelle redirection" pour en créer une.</p>
            </div>
            @endif
        </div>

        {{-- Modal modifier redirection --}}
        <div id="redir-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9000;align-items:center;justify-content:center;padding:20px">
            <div style="background:#fff;border-radius:20px;padding:28px;width:100%;max-width:520px;box-shadow:0 24px 60px rgba(0,0,0,.2)">
                <div style="font-size:16px;font-weight:800;color:#0f2a45;margin-bottom:20px">Modifier la redirection</div>
                <input type="hidden" id="redir-edit-id">
                <div style="display:flex;flex-direction:column;gap:14px">
                    <div>
                        <label style="font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.07em;display:block;margin-bottom:5px">Lien source (chemin)</label>
                        <input type="text" id="redir-edit-source" placeholder="/ancien-chemin"
                               style="width:100%;padding:11px 13px;border-radius:10px;border:1.5px solid #e2e8f0;font-size:13px;color:#0f2a45;background:#f8fafc">
                    </div>
                    <div>
                        <label style="font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.07em;display:block;margin-bottom:5px">URL de destination (cible)</label>
                        <input type="text" id="redir-edit-dest" placeholder="https://destination.com"
                               style="width:100%;padding:11px 13px;border-radius:10px;border:1.5px solid #e2e8f0;font-size:13px;color:#0f2a45;background:#f8fafc">
                    </div>
                </div>
                <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:20px">
                    <button onclick="document.getElementById('redir-modal').style.display='none'"
                            style="padding:10px 20px;border-radius:10px;border:1.5px solid #e2e8f0;background:#fff;font-size:13px;font-weight:700;color:#64748b;cursor:pointer">
                        Annuler
                    </button>
                    <button onclick="redirUpdate()"
                            style="padding:10px 20px;border-radius:10px;border:none;background:linear-gradient(135deg,#045d98,#08a3ff);font-size:13px;font-weight:700;color:#fff;cursor:pointer;transition:opacity .2s"
                            onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
                        Enregistrer
                    </button>
                </div>
            </div>
        </div>

    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
// ── Données PHP → JS ──
const monthsData = {
    labels : @json($months->pluck('label')),
    counts : @json($months->pluck('count')),
};
const statusData = {
    actifs   : {{ $activeUsers }},
    attente  : {{ $pendingUsers }},
    admins   : {{ $adminCount }},
};
const topUsersData = {
    labels : @json($topUsers->pluck('name')),
    counts : @json($topUsers->pluck('products_count')),
};
const profileData = {
    avecLogo    : {{ $withLogo }},
    sansLogo    : {{ $withoutLogo }},
    avecProd    : {{ $withProducts2 }},
    sansProd    : {{ $noProducts }},
};

// Options communes
const fontFamily = "'Inter', sans-serif";
Chart.defaults.font.family = fontFamily;
Chart.defaults.color = '#64748b';

// ── 1. Inscriptions par mois (barres) ──
new Chart(document.getElementById('chartMonths'), {
    type: 'bar',
    data: {
        labels: monthsData.labels,
        datasets: [{
            label: 'Inscriptions',
            data: monthsData.counts,
            backgroundColor: monthsData.counts.map((_, i) =>
                `rgba(26,142,212,${0.45 + i * 0.09})`
            ),
            borderColor: '#1a8ed4',
            borderWidth: 2,
            borderRadius: 8,
            borderSkipped: false,
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: false },
            tooltip: {
                callbacks: {
                    label: ctx => ` ${ctx.parsed.y} inscription${ctx.parsed.y > 1 ? 's' : ''}`
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: { stepSize: 1, font: { size: 11 } },
                grid: { color: 'rgba(0,0,0,.05)' }
            },
            x: {
                ticks: { font: { size: 11 } },
                grid: { display: false }
            }
        }
    }
});

// ── 2. Statuts comptes (donut) ──
new Chart(document.getElementById('chartStatus'), {
    type: 'doughnut',
    data: {
        labels: ['Actifs', 'En attente', 'Admins'],
        datasets: [{
            data: [statusData.actifs, statusData.attente, statusData.admins],
            backgroundColor: ['#10b981', '#f59e0b', '#8b5cf6'],
            borderColor: '#fff',
            borderWidth: 3,
            hoverOffset: 6,
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '70%',
        plugins: {
            legend: { display: false },
            tooltip: {
                callbacks: {
                    label: ctx => ` ${ctx.label} : ${ctx.parsed}`
                }
            }
        }
    }
});

// ── 3. Top utilisateurs par produits (barres horizontales) ──
new Chart(document.getElementById('chartTopUsers'), {
    type: 'bar',
    data: {
        labels: topUsersData.labels.length ? topUsersData.labels : ['Aucun'],
        datasets: [{
            label: 'Produits',
            data: topUsersData.counts.length ? topUsersData.counts : [0],
            backgroundColor: ['#1a8ed4','#10b981','#8b5cf6','#f59e0b','#ef4444'],
            borderRadius: 8,
            borderSkipped: false,
        }]
    },
    options: {
        indexAxis: 'y',
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: false },
            tooltip: {
                callbacks: {
                    label: ctx => ` ${ctx.parsed.x} produit${ctx.parsed.x > 1 ? 's' : ''}`
                }
            }
        },
        scales: {
            x: {
                beginAtZero: true,
                ticks: { stepSize: 1, font: { size: 11 } },
                grid: { color: 'rgba(0,0,0,.05)' }
            },
            y: {
                ticks: { font: { size: 11 } },
                grid: { display: false }
            }
        }
    }
});

// ── 4. Profil complet : Logo & Produits (donut) ──
new Chart(document.getElementById('chartProfile'), {
    type: 'doughnut',
    data: {
        labels: ['Avec logo', 'Sans logo', 'Avec produits', 'Sans produits'],
        datasets: [{
            data: [profileData.avecLogo, profileData.sansLogo, profileData.avecProd, profileData.sansProd],
            backgroundColor: ['#1a8ed4', '#e2e8f0', '#10b981', '#fde68a'],
            borderColor: '#fff',
            borderWidth: 3,
            hoverOffset: 6,
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '65%',
        plugins: {
            legend: { display: false },
            tooltip: {
                callbacks: {
                    label: ctx => ` ${ctx.label} : ${ctx.parsed}`
                }
            }
        }
    }
});

// Recherche utilisateurs
    function adminSearch(q) {
        const rows = document.querySelectorAll('#users-tbody .table-row');
        const noResults = document.getElementById('admin-no-results');
        q = q.trim().toLowerCase();
        let found = 0;
        rows.forEach(row => {
            const name = row.dataset.name || '';
            const show = !q || name.includes(q);
            row.style.display = show ? '' : 'none';
            if (show) found++;
        });
        noResults.style.display = (q && found === 0) ? 'block' : 'none';
    }

    // Toast notification
    function showAdminToast(msg, type = 'success') {
        const t = document.getElementById('admin-toast');
        t.textContent = msg;
        t.className = 'toast ' + type + ' show';
        setTimeout(() => t.classList.remove('show'), 3500);
    }

    // Save mapage
    document.querySelectorAll('.mapage-cell').forEach(cell => {
        const input  = cell.querySelector('.mapage-input');
        const btn    = cell.querySelector('.save-mapage-btn');
        const userId = cell.dataset.userId;

        function save() {
            const val = input.value.trim();
            btn.textContent = '…';
            btn.disabled = true;

            fetch('/admin/update-mapage', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ user_id: userId, mapage: val })
            })
            .then(r => r.json())
            .then(data => {
                btn.textContent = 'Sauver';
                btn.disabled = false;
                if (data.success) {
                    input.value = data.mapage;
                    cell.dataset.originalValue = data.mapage;
                    const voirBtn = document.getElementById('voir-page-' + userId);
                    if (voirBtn) voirBtn.href = '/az/' + data.mapage;
                    showAdminToast('Mapage mis à jour ✓');
                } else {
                    input.value = cell.dataset.originalValue;
                    showAdminToast(data.message || 'Erreur', 'error');
                }
            })
            .catch(() => {
                btn.textContent = 'Sauver';
                btn.disabled = false;
                input.value = cell.dataset.originalValue;
                showAdminToast('Erreur de connexion', 'error');
            });
        }

        btn.addEventListener('click', save);
        input.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); save(); } });
    });

    // Activer / Désactiver un compte
    function toggleActive(userId, btn) {
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const isActive = btn.dataset.active === '1';
        btn.disabled = true;
        btn.style.opacity = '.6';

        fetch('/admin/toggle-active', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ user_id: userId })
        })
        .then(r => r.json())
        .then(data => {
            btn.disabled = false;
            btn.style.opacity = '1';
            if (!data.success) { showAdminToast(data.message || 'Erreur', 'error'); return; }

            const nowActive = data.is_active;
            btn.dataset.active = nowActive ? '1' : '0';

            // Mettre à jour le bouton
            if (nowActive) {
                btn.style.background = '#fef3c7';
                btn.style.color = '#92400e';
                btn.innerHTML = '<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg> Désactiver';
            } else {
                btn.style.background = '#d1fae5';
                btn.style.color = '#065f46';
                btn.innerHTML = '<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg> Activer';
            }

            // Mettre à jour le badge de statut
            const badge = document.getElementById('badge-' + userId);
            if (badge) {
                if (nowActive) {
                    badge.style.background = '#d1fae5';
                    badge.style.color = '#065f46';
                    badge.innerHTML = '<span style="width:5px;height:5px;border-radius:50%;background:#10b981;display:inline-block"></span> Actif';
                } else {
                    badge.style.background = '#fef3c7';
                    badge.style.color = '#92400e';
                    badge.innerHTML = '<span style="width:5px;height:5px;border-radius:50%;background:#f59e0b;display:inline-block"></span> En attente';
                }
            }

            showAdminToast(data.message);
        })
        .catch(() => {
            btn.disabled = false;
            btn.style.opacity = '1';
            showAdminToast('Erreur de connexion', 'error');
        });
    }

    // Toggle visibilité mot de passe
    function toggleAdminPw(id, icon) {
        const input = document.getElementById(id);
        const isText = input.type === 'text';
        input.type = isText ? 'password' : 'text';
        icon.style.color = isText ? '#94a3b8' : '#1a8ed4';
    }

    // Sauvegarder le profil admin
    function saveAdminProfile() {
        const name  = document.getElementById('admin-profile-name').value.trim();
        const phone = document.getElementById('admin-profile-phone').value.trim();
        const email = document.getElementById('admin-profile-email').value.trim();

        if (!name) { showAdminToast('Le nom est obligatoire.', 'error'); return; }

        fetch('/admin/update-profile', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ name, phone, email })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showAdminToast(data.message || 'Profil mis à jour ✓');
            } else {
                showAdminToast(data.message || 'Erreur', 'error');
            }
        })
        .catch(() => showAdminToast('Erreur de connexion', 'error'));
    }

    // ── REDIRECTIONS ──────────────────────────────────────────────────────────

    function redirCsrf() {
        return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    }

    function redirStore() {
        const source = document.getElementById('redir-add-source').value.trim();
        const dest   = document.getElementById('redir-add-dest').value.trim();
        if (!source || !dest) { showAdminToast('Veuillez remplir les deux champs.', 'error'); return; }

        fetch('/admin/redirections/store', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': redirCsrf(), 'Accept': 'application/json', 'Content-Type': 'application/json' },
            body: JSON.stringify({ source, destination: dest })
        })
        .then(r => r.json())
        .then(data => {
            if (!data.success) { showAdminToast(data.message || 'Erreur', 'error'); return; }
            showAdminToast(data.message);
            document.getElementById('redir-add-source').value = '';
            document.getElementById('redir-add-dest').value   = '';
            document.getElementById('redir-form-add').style.display = 'none';
            redirAddRow(data.redirection);
            const empty = document.getElementById('redir-empty');
            if (empty) empty.style.display = 'none';
        })
        .catch(() => showAdminToast('Erreur de connexion', 'error'));
    }

    function redirAddRow(r) {
        const tbody = document.getElementById('redir-tbody');
        if (!tbody) { location.reload(); return; }
        const tr = document.createElement('tr');
        tr.className = 'table-row';
        tr.id = 'redir-row-' + r.id;
        tr.style.borderBottom = '1px solid #f1f5f9';
        tr.innerHTML = `
            <td style="padding:14px 16px;font-size:12px;color:#94a3b8;font-weight:600">${r.id}</td>
            <td style="padding:14px 16px"><span id="redir-src-${r.id}" style="font-size:13px;font-weight:700;color:#0f2a45;font-family:monospace;background:#f0f4f8;padding:3px 8px;border-radius:6px">${r.source}</span></td>
            <td style="padding:14px 16px"><span id="redir-dst-${r.id}" style="font-size:13px;color:#1a8ed4;font-weight:600;word-break:break-all">${r.destination}</span></td>
            <td style="padding:14px 16px;text-align:center">
                <div style="display:inline-flex;gap:8px">
                    <button onclick="redirEditOpen(${r.id},'${r.source.replace(/'/g,"\\'")}','${r.destination.replace(/'/g,"\\'")}')"
                            style="display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:8px;background:#eff6ff;color:#1a8ed4;border:1px solid #bfdbfe;font-size:12px;font-weight:700;cursor:pointer"
                            onmouseover="this.style.background='#dbeafe'" onmouseout="this.style.background='#eff6ff'">
                        <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125"/></svg>
                        Modifier
                    </button>
                    <button onclick="redirDelete(${r.id})"
                            style="display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:8px;background:#fef2f2;color:#dc2626;border:1px solid #fecaca;font-size:12px;font-weight:700;cursor:pointer"
                            onmouseover="this.style.background='#fee2e2'" onmouseout="this.style.background='#fef2f2'">
                        <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/></svg>
                        Supprimer
                    </button>
                </div>
            </td>`;
        tbody.appendChild(tr);
    }

    function redirEditOpen(id, source, dest) {
        document.getElementById('redir-edit-id').value     = id;
        document.getElementById('redir-edit-source').value = source;
        document.getElementById('redir-edit-dest').value   = dest;
        document.getElementById('redir-modal').style.display = 'flex';
    }

    function redirUpdate() {
        const id     = document.getElementById('redir-edit-id').value;
        const source = document.getElementById('redir-edit-source').value.trim();
        const dest   = document.getElementById('redir-edit-dest').value.trim();
        if (!source || !dest) { showAdminToast('Veuillez remplir les deux champs.', 'error'); return; }

        fetch('/admin/redirections/update', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': redirCsrf(), 'Accept': 'application/json', 'Content-Type': 'application/json' },
            body: JSON.stringify({ id, source, destination: dest })
        })
        .then(r => r.json())
        .then(data => {
            if (!data.success) { showAdminToast(data.message || 'Erreur', 'error'); return; }
            document.getElementById('redir-src-' + id).textContent = data.redirection.source;
            document.getElementById('redir-dst-' + id).textContent = data.redirection.destination;
            const btn = document.querySelector(`#redir-row-${id} button[onclick*="redirEditOpen"]`);
            if (btn) btn.setAttribute('onclick', `redirEditOpen(${id},'${data.redirection.source.replace(/'/g,"\\'")}','${data.redirection.destination.replace(/'/g,"\\'")}')`);
            document.getElementById('redir-modal').style.display = 'none';
            showAdminToast(data.message);
        })
        .catch(() => showAdminToast('Erreur de connexion', 'error'));
    }

    function redirDelete(id) {
        if (!confirm('Supprimer cette redirection ?')) return;

        fetch('/admin/redirections/delete', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': redirCsrf(), 'Accept': 'application/json', 'Content-Type': 'application/json' },
            body: JSON.stringify({ id })
        })
        .then(r => r.json())
        .then(data => {
            if (!data.success) { showAdminToast(data.message || 'Erreur', 'error'); return; }
            const row = document.getElementById('redir-row-' + id);
            if (row) row.remove();
            showAdminToast(data.message);
        })
        .catch(() => showAdminToast('Erreur de connexion', 'error'));
    }

    // Fermer modal en cliquant dehors
    document.getElementById('redir-modal').addEventListener('click', function(e) {
        if (e.target === this) this.style.display = 'none';
    });

    // ── Sauvegarder le mot de passe admin ────────────────────────────────────
    function saveAdminPassword() {
        const current = document.getElementById('admin-pw-current').value;
        const newPw   = document.getElementById('admin-pw-new').value;
        const confirm = document.getElementById('admin-pw-confirm').value;

        if (!current || !newPw || !confirm) {
            showAdminToast('Veuillez remplir tous les champs.', 'error');
            return;
        }

        fetch('/admin/update-password', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                current_password: current,
                new_password: newPw,
                new_password_confirmation: confirm,
            })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                document.getElementById('admin-pw-current').value = '';
                document.getElementById('admin-pw-new').value = '';
                document.getElementById('admin-pw-confirm').value = '';
                showAdminToast(data.message || 'Mot de passe mis à jour ✓');
            } else {
                showAdminToast(data.message || 'Erreur', 'error');
            }
        })
        .catch(() => showAdminToast('Erreur de connexion', 'error'));
    }
</script>

@endsection