@extends('layouts.app')

@section('title', 'Pointage Hebdomadaire - Dashboard Manager')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 pb-32"
     x-data="managerChecklistDashboardV2({{ $activeStoreId ?? 'null' }}, {{ auth()->id() }})"
     x-init="init()"
     x-cloak>

    {{-- * Header avec gradient --}}
    <div class="bg-gradient-to-br from-purple-600 via-purple-700 to-indigo-700 rounded-2xl shadow-xl p-6 sm:p-8 mb-8 text-white relative overflow-hidden">
        {{-- Pattern décoratif --}}
        <div class="absolute inset-0 opacity-10">
            <div class="absolute inset-0" style="background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 32px 32px;"></div>
        </div>

        <div class="relative">
            <div class="flex items-center gap-4 mb-4">
                <div class="w-14 h-14 sm:w-16 sm:h-16 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center border-2 border-white/30 shadow-lg">
                    <i data-lucide="clipboard-list" class="w-7 h-7 sm:w-8 sm:h-8"></i>
                </div>
                <div>
                    <h1 class="text-2xl sm:text-3xl font-display font-bold">Dashboard Pointages Hebdo</h1>
                    <p class="text-purple-100 text-sm sm:text-base mt-1">Évaluation et validation des pointages rayons vendeurs</p>
                </div>
            </div>

            {{-- * Statistiques en ligne --}}
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mt-6">
                <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                    <p class="text-xs text-purple-100 uppercase font-semibold tracking-wide mb-1">En attente</p>
                    <p class="text-3xl font-bold" x-text="stats.pending || 0"></p>
                </div>
                <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                    <p class="text-xs text-purple-100 uppercase font-semibold tracking-wide mb-1">Validées</p>
                    <p class="text-3xl font-bold text-green-200" x-text="stats.validated || 0"></p>
                </div>
                <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                    <p class="text-xs text-purple-100 uppercase font-semibold tracking-wide mb-1">Rejetées</p>
                    <p class="text-3xl font-bold text-red-200" x-text="stats.rejected || 0"></p>
                </div>
                <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                    <p class="text-xs text-purple-100 uppercase font-semibold tracking-wide mb-1">Total</p>
                    <p class="text-3xl font-bold" x-text="stats.total || 0"></p>
                </div>
            </div>
        </div>
    </div>

    {{-- * Barre de recherche et filtres --}}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 sm:p-6 mb-6">
        <div class="flex flex-col sm:flex-row gap-4">
            {{-- Recherche --}}
            <div class="flex-1 relative">
                <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"></i>
                <input type="text"
                       x-model="searchQuery"
                       @input="debounceSearch()"
                       placeholder="Rechercher par vendeur..."
                       class="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm">
            </div>

            {{-- Filtres --}}
            <div class="flex gap-2 overflow-x-auto no-scrollbar">
                <button @click="filterStatus = ''; loadChecklists()"
                        class="px-4 py-2.5 rounded-xl text-sm font-semibold border-2 transition-all whitespace-nowrap"
                        :class="filterStatus === '' ? 'bg-purple-600 text-white border-purple-600' : 'bg-white text-gray-600 border-gray-200 hover:border-purple-500'">
                    Tous
                </button>
                <button @click="filterStatus = 'pending'; loadChecklists()"
                        class="px-4 py-2.5 rounded-xl text-sm font-semibold border-2 transition-all whitespace-nowrap"
                        :class="filterStatus === 'pending' ? 'bg-yellow-500 text-white border-yellow-500' : 'bg-white text-gray-600 border-gray-200 hover:border-yellow-500'">
                    <span class="flex items-center gap-1.5">
                        <i data-lucide="clock" class="w-4 h-4"></i>
                        En attente
                    </span>
                </button>
                <button @click="filterStatus = 'validated'; loadChecklists()"
                        class="px-4 py-2.5 rounded-xl text-sm font-semibold border-2 transition-all whitespace-nowrap"
                        :class="filterStatus === 'validated' ? 'bg-green-500 text-white border-green-500' : 'bg-white text-gray-600 border-gray-200 hover:border-green-500'">
                    <span class="flex items-center gap-1.5">
                        <i data-lucide="check-circle" class="w-4 h-4"></i>
                        Validées
                    </span>
                </button>
                <button @click="filterStatus = 'rejected'; loadChecklists()"
                        class="px-4 py-2.5 rounded-xl text-sm font-semibold border-2 transition-all whitespace-nowrap"
                        :class="filterStatus === 'rejected' ? 'bg-red-500 text-white border-red-500' : 'bg-white text-gray-600 border-gray-200 hover:border-red-500'">
                    <span class="flex items-center gap-1.5">
                        <i data-lucide="x-circle" class="w-4 h-4"></i>
                        Rejetées
                    </span>
                </button>
            </div>
        </div>

        {{-- Compteur résultats --}}
        <div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-100 text-sm">
            <span class="text-gray-600">
                <span class="font-semibold text-purple-600" x-text="filteredChecklists.length"></span> pointage<span x-show="filteredChecklists.length > 1">s</span>
            </span>
            <button @click="searchQuery = ''; filterStatus = ''; loadChecklists()"
                    x-show="searchQuery || filterStatus"
                    class="text-purple-600 hover:underline font-semibold">
                Réinitialiser
            </button>
        </div>
    </div>

    {{-- * Loading state --}}
    <template x-if="isLoading">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <template x-for="i in 6" :key="i">
                <div class="bg-white border border-gray-100 rounded-2xl p-6 animate-pulse">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-12 h-12 rounded-full bg-gray-200"></div>
                        <div class="flex-1 space-y-2">
                            <div class="h-4 bg-gray-200 rounded w-3/4"></div>
                            <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                    </div>
                    <div class="space-y-2">
                        <div class="h-3 bg-gray-200 rounded"></div>
                        <div class="h-3 bg-gray-200 rounded w-5/6"></div>
                    </div>
                </div>
            </template>
        </div>
    </template>

    {{-- * Empty state --}}
    <template x-if="!isLoading && filteredChecklists.length === 0">
        <div class="bg-white border border-gray-100 rounded-2xl p-12 text-center">
            <i data-lucide="inbox" class="w-20 h-20 mx-auto mb-4 text-gray-300"></i>
            <p class="font-semibold text-gray-700 text-lg mb-2">Aucun pointage trouvé</p>
            <p class="text-gray-500 text-sm">Essayez de modifier vos filtres ou revenez plus tard</p>
        </div>
    </template>

    {{-- * Grille de cards --}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" x-show="!isLoading && filteredChecklists.length > 0">
        <template x-for="checklist in filteredChecklists" :key="checklist.id">
            <article @click="openEvaluationModal(checklist)"
                     class="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm hover:shadow-xl hover:border-purple-300 transition-all duration-200 cursor-pointer group">
                {{-- Header card --}}
                <div class="flex items-start gap-3 mb-4">
                    {{-- Avatar --}}
                    <div class="w-14 h-14 rounded-xl font-bold text-lg flex items-center justify-center border-2 transition-all"
                         :class="{
                            'bg-yellow-50 text-yellow-600 border-yellow-200 group-hover:bg-yellow-100 group-hover:border-yellow-400': checklist.validation_status === 'pending',
                            'bg-green-50 text-green-600 border-green-200 group-hover:bg-green-100 group-hover:border-green-400': checklist.validation_status === 'validated',
                            'bg-red-50 text-red-600 border-red-200 group-hover:bg-red-100 group-hover:border-red-400': checklist.validation_status === 'rejected'
                         }"
                         x-text="checklist.user.first_name.charAt(0) + checklist.user.last_name.charAt(0)"></div>

                    {{-- Nom + Badge statut --}}
                    <div class="flex-1 min-w-0">
                        <h3 class="font-semibold text-gray-900 truncate group-hover:text-purple-700 transition-colors"
                            x-text="`${checklist.user.first_name} ${checklist.user.last_name}`"></h3>
                        <span class="inline-block px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide mt-1"
                              :class="{
                                'bg-yellow-100 text-yellow-700': checklist.validation_status === 'pending',
                                'bg-green-100 text-green-700': checklist.validation_status === 'validated',
                                'bg-red-100 text-red-700': checklist.validation_status === 'rejected'
                              }">
                            <span x-show="checklist.validation_status === 'pending'">⏳ En attente</span>
                            <span x-show="checklist.validation_status === 'validated'">✓ Validée</span>
                            <span x-show="checklist.validation_status === 'rejected'">✗ Rejetée</span>
                        </span>
                    </div>
                </div>

                {{-- Infos semaine --}}
                <div class="space-y-2 text-sm text-gray-600 mb-4">
                    <div class="flex items-center gap-2">
                        <i data-lucide="calendar" class="w-4 h-4 text-gray-400"></i>
                        <span>Semaine du <span class="font-semibold" x-text="formatDate(checklist.week_start_date)"></span></span>
                    </div>
                    <div class="flex items-center gap-2">
                        <i data-lucide="send" class="w-4 h-4 text-gray-400"></i>
                        <span>Soumis le <span class="font-semibold" x-text="formatDateTime(checklist.submitted_at)"></span></span>
                    </div>
                    <template x-if="checklist.validated_at">
                        <div class="flex items-center gap-2">
                            <i data-lucide="check-circle" class="w-4 h-4 text-gray-400"></i>
                            <span>Évalué le <span class="font-semibold" x-text="formatDateTime(checklist.validated_at)"></span></span>
                        </div>
                    </template>
                </div>

                {{-- Résumé visuel (mini stats) --}}
                <div class="pt-3 border-t border-gray-100 flex items-center justify-between">
                    <span class="text-xs text-gray-500">Progression</span>
                    <div class="flex items-center gap-2">
                        <span class="px-2 py-1 bg-green-50 text-green-700 rounded-lg text-xs font-bold"
                              x-text="countDoneTasks(checklist) + ' OK'"></span>
                        <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs font-bold"
                              x-text="'/ 9'"></span>
                    </div>
                </div>

                {{-- CTA hover --}}
                <div class="mt-4 pt-3 border-t border-gray-100 flex items-center justify-between opacity-0 group-hover:opacity-100 transition-opacity">
                    <span class="text-xs text-gray-500">Cliquer pour évaluer</span>
                    <i data-lucide="chevron-right" class="w-4 h-4 text-purple-600"></i>
                </div>
            </article>
        </template>
    </div>

    {{-- * Modal d'évaluation --}}
    <template x-if="selectedChecklist">
        <div class="fixed inset-0 z-50 flex items-center justify-center p-4"
             @click.self="closeEvaluationModal()">
            {{-- Overlay --}}
            <div class="fixed inset-0 bg-black/60 backdrop-blur-sm"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition ease-in duration-150"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"></div>

            {{-- Modal content --}}
            <div class="relative bg-white w-full max-w-4xl max-h-[90vh] rounded-2xl shadow-2xl overflow-hidden flex flex-col"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100"
                 x-transition:leave="transition ease-in duration-150"
                 x-transition:leave-start="opacity-100 scale-100"
                 x-transition:leave-end="opacity-0 scale-95">

                {{-- Header sticky --}}
                <div class="flex-shrink-0 bg-gradient-to-br from-purple-600 to-indigo-700 text-white p-6">
                    <div class="flex items-start justify-between mb-4">
                        <div class="flex items-center gap-4">
                            <div class="w-14 h-14 rounded-xl bg-white/20 backdrop-blur-sm border-2 border-white/30 font-bold text-xl flex items-center justify-center"
                                 x-text="selectedChecklist.user.first_name.charAt(0) + selectedChecklist.user.last_name.charAt(0)"></div>
                            <div>
                                <h2 class="text-xl font-display font-bold"
                                    x-text="`${selectedChecklist.user.first_name} ${selectedChecklist.user.last_name}`"></h2>
                                <p class="text-purple-100 text-sm mt-1">
                                    Semaine du <span x-text="formatDate(selectedChecklist.week_start_date)"></span>
                                </p>
                            </div>
                        </div>
                        <button @click="closeEvaluationModal()"
                                class="w-10 h-10 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center hover:bg-white/30 transition-colors">
                            <i data-lucide="x" class="w-5 h-5"></i>
                        </button>
                    </div>

                    {{-- Résumé évaluation --}}
                    <div class="flex items-center gap-4 bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                        <div class="flex items-center gap-2">
                            <div class="w-8 h-8 rounded-lg bg-green-500/20 flex items-center justify-center">
                                <span class="text-sm font-bold" x-text="evaluationSummary.ok"></span>
                            </div>
                            <span class="text-sm text-purple-100">OK</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center">
                                <span class="text-sm font-bold" x-text="evaluationSummary.nok"></span>
                            </div>
                            <span class="text-sm text-purple-100">NOK</span>
                        </div>
                        <div class="flex-1"></div>
                        <span class="text-sm text-purple-100">
                            Progression: <span class="font-bold" x-text="evaluationSummary.total"></span>/9
                        </span>
                    </div>
                </div>

                {{-- Body scrollable --}}
                <div class="flex-1 overflow-y-auto p-6 space-y-6">
                    {{-- Section Repérage --}}
                    <div class="space-y-4">
                        <h3 class="text-lg font-bold text-gray-900 flex items-center gap-3">
                            <div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
                                <i data-lucide="search" class="w-5 h-5 text-purple-600"></i>
                            </div>
                            1. Repérage
                        </h3>

                        {{-- Produits hors gamme --}}
                        <div class="bg-gray-50 rounded-xl p-4"
                             :class="{'bg-green-50 border-2 border-green-200': evaluations.reperage_hors_gamme === true, 'bg-red-50 border-2 border-red-200': evaluations.reperage_hors_gamme === false}">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex-1">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span :class="selectedChecklist.reperage_hors_gamme ? 'bg-green-100 text-green-800' : 'bg-gray-200 text-gray-600'"
                                              class="px-2 py-1 rounded-lg text-xs font-bold">
                                            <span x-text="selectedChecklist.reperage_hors_gamme ? '✓ Fait' : '○ Non fait'"></span>
                                        </span>
                                        <p class="font-semibold text-gray-900">Produits hors gamme retirés</p>
                                    </div>
                                    <p x-show="selectedChecklist.reperage_hors_gamme_comment"
                                       class="text-sm text-gray-600 pl-3 border-l-2 border-purple-300 italic"
                                       x-text="'💬 ' + selectedChecklist.reperage_hors_gamme_comment"></p>
                                </div>
                            </div>
                            <div x-show="selectedChecklist.validation_status === 'pending' && selectedChecklist.reperage_hors_gamme"
                                 class="flex gap-3">
                                <button type="button"
                                        @click="setEvaluation('reperage_hors_gamme', true)"
                                        :class="evaluations.reperage_hors_gamme === true ? 'bg-green-600 text-white border-green-700 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:border-green-500'"
                                        class="flex-1 px-4 py-3 rounded-xl text-sm font-bold border-2 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="check" class="w-4 h-4"></i>
                                    OK
                                </button>
                                <button type="button"
                                        @click="setEvaluation('reperage_hors_gamme', false)"
                                        :class="evaluations.reperage_hors_gamme === false ? 'bg-red-600 text-white border-red-700 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:border-red-500'"
                                        class="flex-1 px-4 py-3 rounded-xl text-sm font-bold border-2 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="x" class="w-4 h-4"></i>
                                    NOK
                                </button>
                            </div>
                        </div>

                        {{-- Prix barrés (même structure) --}}
                        <div class="bg-gray-50 rounded-xl p-4"
                             :class="{'bg-green-50 border-2 border-green-200': evaluations.reperage_prix_barres === true, 'bg-red-50 border-2 border-red-200': evaluations.reperage_prix_barres === false}">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex-1">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span :class="selectedChecklist.reperage_prix_barres ? 'bg-green-100 text-green-800' : 'bg-gray-200 text-gray-600'"
                                              class="px-2 py-1 rounded-lg text-xs font-bold">
                                            <span x-text="selectedChecklist.reperage_prix_barres ? '✓ Fait' : '○ Non fait'"></span>
                                        </span>
                                        <p class="font-semibold text-gray-900">Prix barrés / étiquettes promos vérifiés</p>
                                    </div>
                                    <p x-show="selectedChecklist.reperage_prix_barres_comment"
                                       class="text-sm text-gray-600 pl-3 border-l-2 border-purple-300 italic"
                                       x-text="'💬 ' + selectedChecklist.reperage_prix_barres_comment"></p>
                                </div>
                            </div>
                            <div x-show="selectedChecklist.validation_status === 'pending' && selectedChecklist.reperage_prix_barres"
                                 class="flex gap-3">
                                <button type="button"
                                        @click="setEvaluation('reperage_prix_barres', true)"
                                        :class="evaluations.reperage_prix_barres === true ? 'bg-green-600 text-white border-green-700 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:border-green-500'"
                                        class="flex-1 px-4 py-3 rounded-xl text-sm font-bold border-2 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="check" class="w-4 h-4"></i>
                                    OK
                                </button>
                                <button type="button"
                                        @click="setEvaluation('reperage_prix_barres', false)"
                                        :class="evaluations.reperage_prix_barres === false ? 'bg-red-600 text-white border-red-700 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:border-red-500'"
                                        class="flex-1 px-4 py-3 rounded-xl text-sm font-bold border-2 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="x" class="w-4 h-4"></i>
                                    NOK
                                </button>
                            </div>
                        </div>

                        {{-- Étiquettes conformes --}}
                        <div class="bg-gray-50 rounded-xl p-4"
                             :class="{'bg-green-50 border-2 border-green-200': evaluations.reperage_etiquettes === true, 'bg-red-50 border-2 border-red-200': evaluations.reperage_etiquettes === false}">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex-1">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span :class="selectedChecklist.reperage_etiquettes ? 'bg-green-100 text-green-800' : 'bg-gray-200 text-gray-600'"
                                              class="px-2 py-1 rounded-lg text-xs font-bold">
                                            <span x-text="selectedChecklist.reperage_etiquettes ? '✓ Fait' : '○ Non fait'"></span>
                                        </span>
                                        <p class="font-semibold text-gray-900">Étiquettes conformes et lisibles</p>
                                    </div>
                                    <p x-show="selectedChecklist.reperage_etiquettes_comment"
                                       class="text-sm text-gray-600 pl-3 border-l-2 border-purple-300 italic"
                                       x-text="'💬 ' + selectedChecklist.reperage_etiquettes_comment"></p>
                                </div>
                            </div>
                            <div x-show="selectedChecklist.validation_status === 'pending' && selectedChecklist.reperage_etiquettes"
                                 class="flex gap-3">
                                <button type="button"
                                        @click="setEvaluation('reperage_etiquettes', true)"
                                        :class="evaluations.reperage_etiquettes === true ? 'bg-green-600 text-white border-green-700 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:border-green-500'"
                                        class="flex-1 px-4 py-3 rounded-xl text-sm font-bold border-2 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="check" class="w-4 h-4"></i>
                                    OK
                                </button>
                                <button type="button"
                                        @click="setEvaluation('reperage_etiquettes', false)"
                                        :class="evaluations.reperage_etiquettes === false ? 'bg-red-600 text-white border-red-700 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:border-red-500'"
                                        class="flex-1 px-4 py-3 rounded-xl text-sm font-bold border-2 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="x" class="w-4 h-4"></i>
                                    NOK
                                </button>
                            </div>
                        </div>
                    </div>

                    {{-- Section Balisage (structure identique, couleur bleue) --}}
                    <div class="space-y-4">
                        <h3 class="text-lg font-bold text-gray-900 flex items-center gap-3">
                            <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
                                <i data-lucide="tag" class="w-5 h-5 text-blue-600"></i>
                            </div>
                            2. Balisage
                        </h3>

                        {{-- Modèles exposés --}}
                        <div class="bg-gray-50 rounded-xl p-4"
                             :class="{'bg-green-50 border-2 border-green-200': evaluations.balisage_modeles_exposes === true, 'bg-red-50 border-2 border-red-200': evaluations.balisage_modeles_exposes === false}">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex-1">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span :class="selectedChecklist.balisage_modeles_exposes ? 'bg-green-100 text-green-800' : 'bg-gray-200 text-gray-600'"
                                              class="px-2 py-1 rounded-lg text-xs font-bold">
                                            <span x-text="selectedChecklist.balisage_modeles_exposes ? '✓ Fait' : '○ Non fait'"></span>
                                        </span>
                                        <p class="font-semibold text-gray-900">Modèles exposés conformes</p>
                                    </div>
                                    <p x-show="selectedChecklist.balisage_modeles_exposes_comment"
                                       class="text-sm text-gray-600 pl-3 border-l-2 border-blue-300 italic"
                                       x-text="'💬 ' + selectedChecklist.balisage_modeles_exposes_comment"></p>
                                </div>
                            </div>
                            <div x-show="selectedChecklist.validation_status === 'pending' && selectedChecklist.balisage_modeles_exposes"
                                 class="flex gap-3">
                                <button type="button"
                                        @click="setEvaluation('balisage_modeles_exposes', true)"
                                        :class="evaluations.balisage_modeles_exposes === true ? 'bg-green-600 text-white border-green-700 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:border-green-500'"
                                        class="flex-1 px-4 py-3 rounded-xl text-sm font-bold border-2 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="check" class="w-4 h-4"></i>
                                    OK
                                </button>
                                <button type="button"
                                        @click="setEvaluation('balisage_modeles_exposes', false)"
                                        :class="evaluations.balisage_modeles_exposes === false ? 'bg-red-600 text-white border-red-700 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:border-red-500'"
                                        class="flex-1 px-4 py-3 rounded-xl text-sm font-bold border-2 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="x" class="w-4 h-4"></i>
                                    NOK
                                </button>
                            </div>
                        </div>

                        {{-- ILV --}}
                        <div class="bg-gray-50 rounded-xl p-4"
                             :class="{'bg-green-50 border-2 border-green-200': evaluations.balisage_ilv === true, 'bg-red-50 border-2 border-red-200': evaluations.balisage_ilv === false}">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex-1">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span :class="selectedChecklist.balisage_ilv ? 'bg-green-100 text-green-800' : 'bg-gray-200 text-gray-600'"
                                              class="px-2 py-1 rounded-lg text-xs font-bold">
                                            <span x-text="selectedChecklist.balisage_ilv ? '✓ Fait' : '○ Non fait'"></span>
                                        </span>
                                        <p class="font-semibold text-gray-900">ILV à jour</p>
                                    </div>
                                    <p x-show="selectedChecklist.balisage_ilv_comment"
                                       class="text-sm text-gray-600 pl-3 border-l-2 border-blue-300 italic"
                                       x-text="'💬 ' + selectedChecklist.balisage_ilv_comment"></p>
                                </div>
                            </div>
                            <div x-show="selectedChecklist.validation_status === 'pending' && selectedChecklist.balisage_ilv"
                                 class="flex gap-3">
                                <button type="button"
                                        @click="setEvaluation('balisage_ilv', true)"
                                        :class="evaluations.balisage_ilv === true ? 'bg-green-600 text-white border-green-700 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:border-green-500'"
                                        class="flex-1 px-4 py-3 rounded-xl text-sm font-bold border-2 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="check" class="w-4 h-4"></i>
                                    OK
                                </button>
                                <button type="button"
                                        @click="setEvaluation('balisage_ilv', false)"
                                        :class="evaluations.balisage_ilv === false ? 'bg-red-600 text-white border-red-700 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:border-red-500'"
                                        class="flex-1 px-4 py-3 rounded-xl text-sm font-bold border-2 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="x" class="w-4 h-4"></i>
                                    NOK
                                </button>
                            </div>
                        </div>

                        {{-- Fiches conseils --}}
                        <div class="bg-gray-50 rounded-xl p-4"
                             :class="{'bg-green-50 border-2 border-green-200': evaluations.balisage_fiches_conseils === true, 'bg-red-50 border-2 border-red-200': evaluations.balisage_fiches_conseils === false}">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex-1">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span :class="selectedChecklist.balisage_fiches_conseils ? 'bg-green-100 text-green-800' : 'bg-gray-200 text-gray-600'"
                                              class="px-2 py-1 rounded-lg text-xs font-bold">
                                            <span x-text="selectedChecklist.balisage_fiches_conseils ? '✓ Fait' : '○ Non fait'"></span>
                                        </span>
                                        <p class="font-semibold text-gray-900">Fiches conseils disponibles</p>
                                    </div>
                                    <p x-show="selectedChecklist.balisage_fiches_conseils_comment"
                                       class="text-sm text-gray-600 pl-3 border-l-2 border-blue-300 italic"
                                       x-text="'💬 ' + selectedChecklist.balisage_fiches_conseils_comment"></p>
                                </div>
                            </div>
                            <div x-show="selectedChecklist.validation_status === 'pending' && selectedChecklist.balisage_fiches_conseils"
                                 class="flex gap-3">
                                <button type="button"
                                        @click="setEvaluation('balisage_fiches_conseils', true)"
                                        :class="evaluations.balisage_fiches_conseils === true ? 'bg-green-600 text-white border-green-700 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:border-green-500'"
                                        class="flex-1 px-4 py-3 rounded-xl text-sm font-bold border-2 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="check" class="w-4 h-4"></i>
                                    OK
                                </button>
                                <button type="button"
                                        @click="setEvaluation('balisage_fiches_conseils', false)"
                                        :class="evaluations.balisage_fiches_conseils === false ? 'bg-red-600 text-white border-red-700 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:border-red-500'"
                                        class="flex-1 px-4 py-3 rounded-xl text-sm font-bold border-2 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="x" class="w-4 h-4"></i>
                                    NOK
                                </button>
                            </div>
                        </div>
                    </div>

                    {{-- Section Entretien (structure identique, couleur verte) --}}
                    <div class="space-y-4">
                        <h3 class="text-lg font-bold text-gray-900 flex items-center gap-3">
                            <div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center">
                                <i data-lucide="sparkles" class="w-5 h-5 text-green-600"></i>
                            </div>
                            3. Entretien
                        </h3>

                        {{-- Propreté --}}
                        <div class="bg-gray-50 rounded-xl p-4"
                             :class="{'bg-green-50 border-2 border-green-200': evaluations.entretien_proprete === true, 'bg-red-50 border-2 border-red-200': evaluations.entretien_proprete === false}">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex-1">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span :class="selectedChecklist.entretien_proprete ? 'bg-green-100 text-green-800' : 'bg-gray-200 text-gray-600'"
                                              class="px-2 py-1 rounded-lg text-xs font-bold">
                                            <span x-text="selectedChecklist.entretien_proprete ? '✓ Fait' : '○ Non fait'"></span>
                                        </span>
                                        <p class="font-semibold text-gray-900">Propreté rayon assurée</p>
                                    </div>
                                    <p x-show="selectedChecklist.entretien_proprete_comment"
                                       class="text-sm text-gray-600 pl-3 border-l-2 border-green-300 italic"
                                       x-text="'💬 ' + selectedChecklist.entretien_proprete_comment"></p>
                                </div>
                            </div>
                            <div x-show="selectedChecklist.validation_status === 'pending' && selectedChecklist.entretien_proprete"
                                 class="flex gap-3">
                                <button type="button"
                                        @click="setEvaluation('entretien_proprete', true)"
                                        :class="evaluations.entretien_proprete === true ? 'bg-green-600 text-white border-green-700 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:border-green-500'"
                                        class="flex-1 px-4 py-3 rounded-xl text-sm font-bold border-2 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="check" class="w-4 h-4"></i>
                                    OK
                                </button>
                                <button type="button"
                                        @click="setEvaluation('entretien_proprete', false)"
                                        :class="evaluations.entretien_proprete === false ? 'bg-red-600 text-white border-red-700 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:border-red-500'"
                                        class="flex-1 px-4 py-3 rounded-xl text-sm font-bold border-2 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="x" class="w-4 h-4"></i>
                                    NOK
                                </button>
                            </div>
                        </div>

                        {{-- Stocks visibles --}}
                        <div class="bg-gray-50 rounded-xl p-4"
                             :class="{'bg-green-50 border-2 border-green-200': evaluations.entretien_stocks_visibles === true, 'bg-red-50 border-2 border-red-200': evaluations.entretien_stocks_visibles === false}">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex-1">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span :class="selectedChecklist.entretien_stocks_visibles ? 'bg-green-100 text-green-800' : 'bg-gray-200 text-gray-600'"
                                              class="px-2 py-1 rounded-lg text-xs font-bold">
                                            <span x-text="selectedChecklist.entretien_stocks_visibles ? '✓ Fait' : '○ Non fait'"></span>
                                        </span>
                                        <p class="font-semibold text-gray-900">Pas de stocks visibles / non-exposables</p>
                                    </div>
                                    <p x-show="selectedChecklist.entretien_stocks_visibles_comment"
                                       class="text-sm text-gray-600 pl-3 border-l-2 border-green-300 italic"
                                       x-text="'💬 ' + selectedChecklist.entretien_stocks_visibles_comment"></p>
                                </div>
                            </div>
                            <div x-show="selectedChecklist.validation_status === 'pending' && selectedChecklist.entretien_stocks_visibles"
                                 class="flex gap-3">
                                <button type="button"
                                        @click="setEvaluation('entretien_stocks_visibles', true)"
                                        :class="evaluations.entretien_stocks_visibles === true ? 'bg-green-600 text-white border-green-700 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:border-green-500'"
                                        class="flex-1 px-4 py-3 rounded-xl text-sm font-bold border-2 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="check" class="w-4 h-4"></i>
                                    OK
                                </button>
                                <button type="button"
                                        @click="setEvaluation('entretien_stocks_visibles', false)"
                                        :class="evaluations.entretien_stocks_visibles === false ? 'bg-red-600 text-white border-red-700 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:border-red-500'"
                                        class="flex-1 px-4 py-3 rounded-xl text-sm font-bold border-2 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="x" class="w-4 h-4"></i>
                                    NOK
                                </button>
                            </div>
                        </div>

                        {{-- Réserves --}}
                        <div class="bg-gray-50 rounded-xl p-4"
                             :class="{'bg-green-50 border-2 border-green-200': evaluations.entretien_reserves === true, 'bg-red-50 border-2 border-red-200': evaluations.entretien_reserves === false}">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex-1">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span :class="selectedChecklist.entretien_reserves ? 'bg-green-100 text-green-800' : 'bg-gray-200 text-gray-600'"
                                              class="px-2 py-1 rounded-lg text-xs font-bold">
                                            <span x-text="selectedChecklist.entretien_reserves ? '✓ Fait' : '○ Non fait'"></span>
                                        </span>
                                        <p class="font-semibold text-gray-900">Réserves rangées et organisées</p>
                                    </div>
                                    <p x-show="selectedChecklist.entretien_reserves_comment"
                                       class="text-sm text-gray-600 pl-3 border-l-2 border-green-300 italic"
                                       x-text="'💬 ' + selectedChecklist.entretien_reserves_comment"></p>
                                </div>
                            </div>
                            <div x-show="selectedChecklist.validation_status === 'pending' && selectedChecklist.entretien_reserves"
                                 class="flex gap-3">
                                <button type="button"
                                        @click="setEvaluation('entretien_reserves', true)"
                                        :class="evaluations.entretien_reserves === true ? 'bg-green-600 text-white border-green-700 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:border-green-500'"
                                        class="flex-1 px-4 py-3 rounded-xl text-sm font-bold border-2 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="check" class="w-4 h-4"></i>
                                    OK
                                </button>
                                <button type="button"
                                        @click="setEvaluation('entretien_reserves', false)"
                                        :class="evaluations.entretien_reserves === false ? 'bg-red-600 text-white border-red-700 shadow-md' : 'bg-white text-gray-700 border-gray-300 hover:border-red-500'"
                                        class="flex-1 px-4 py-3 rounded-xl text-sm font-bold border-2 transition-all flex items-center justify-center gap-2">
                                    <i data-lucide="x" class="w-4 h-4"></i>
                                    NOK
                                </button>
                            </div>
                        </div>
                    </div>

                    {{-- Notes globales --}}
                    <div x-show="selectedChecklist.notes" class="bg-yellow-50 border-2 border-yellow-200 rounded-xl p-4">
                        <h4 class="font-semibold text-gray-900 mb-2 flex items-center gap-2">
                            <i data-lucide="message-square" class="w-4 h-4 text-yellow-600"></i>
                            Remarques du vendeur
                        </h4>
                        <p class="text-sm text-gray-700 italic" x-text="selectedChecklist.notes"></p>
                    </div>

                    {{-- Commentaire manager --}}
                    <div class="bg-gray-50 rounded-xl p-4">
                        <label class="block font-semibold text-gray-900 mb-2">
                            <i data-lucide="message-circle" class="w-4 h-4 inline text-purple-600"></i>
                            Votre commentaire (optionnel)
                        </label>
                        <textarea x-model="managerComment"
                                  placeholder="Ajoutez vos remarques pour le vendeur..."
                                  class="w-full border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                                  rows="3"></textarea>
                    </div>
                </div>

                {{-- Footer sticky --}}
                <div class="flex-shrink-0 bg-gray-50 border-t border-gray-200 p-6">
                    <div x-show="selectedChecklist.validation_status === 'pending'" class="flex gap-4">
                        <button type="button"
                                @click="submitValidation('validated')"
                                :disabled="isSubmitting"
                                class="flex-1 bg-green-600 text-white py-4 rounded-xl font-bold shadow-lg hover:bg-green-700 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2">
                            <i data-lucide="check-circle" class="w-5 h-5"></i>
                            <span x-show="!isSubmitting">Valider la checklist</span>
                            <span x-show="isSubmitting">Validation en cours...</span>
                        </button>
                        <button type="button"
                                @click="submitValidation('rejected')"
                                :disabled="isSubmitting"
                                class="flex-1 bg-red-600 text-white py-4 rounded-xl font-bold shadow-lg hover:bg-red-700 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2">
                            <i data-lucide="x-circle" class="w-5 h-5"></i>
                            <span x-show="!isSubmitting">Rejeter la checklist</span>
                            <span x-show="isSubmitting">Rejet en cours...</span>
                        </button>
                    </div>
                    <div x-show="selectedChecklist.validation_status !== 'pending'" class="text-center">
                        <p class="text-sm text-gray-600">
                            Cette checklist a déjà été <span :class="{
                                'text-green-600 font-bold': selectedChecklist.validation_status === 'validated',
                                'text-red-600 font-bold': selectedChecklist.validation_status === 'rejected'
                            }" x-text="selectedChecklist.validation_status === 'validated' ? 'validée' : 'rejetée'"></span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </template>

    {{-- * Notifications toast --}}
    <div class="fixed top-4 right-4 z-[60] space-y-2" style="max-width: 24rem;">
        <template x-for="notif in notifications" :key="notif.id">
            <div x-show="true"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 transform translate-x-full"
                 x-transition:enter-end="opacity-100 transform translate-x-0"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100 transform translate-x-0"
                 x-transition:leave-end="opacity-0 transform translate-x-full"
                 :class="{
                     'bg-green-50 border-green-500': notif.type === 'success',
                     'bg-red-50 border-red-500': notif.type === 'error',
                     'bg-blue-50 border-blue-500': notif.type === 'info'
                 }"
                 class="flex items-start gap-3 p-4 rounded-xl shadow-lg border-l-4">
                <div class="flex-shrink-0">
                    <template x-if="notif.type === 'success'">
                        <i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>
                    </template>
                    <template x-if="notif.type === 'error'">
                        <i data-lucide="x-circle" class="w-5 h-5 text-red-600"></i>
                    </template>
                    <template x-if="notif.type === 'info'">
                        <i data-lucide="info" class="w-5 h-5 text-blue-600"></i>
                    </template>
                </div>
                <p x-text="notif.message"
                   :class="{
                       'text-green-800': notif.type === 'success',
                       'text-red-800': notif.type === 'error',
                       'text-blue-800': notif.type === 'info'
                   }"
                   class="flex-1 text-sm font-medium"></p>
                <button @click="removeNotification(notif.id)"
                        class="flex-shrink-0 text-gray-400 hover:text-gray-600">
                    <i data-lucide="x" class="w-4 h-4"></i>
                </button>
            </div>
        </template>
    </div>
</div>
@endsection