@extends('layouts.base')

@section('title', 'Pointage Hebdomadaire - Animation Vendeurs')

{{-- ! x-data : JSON safe --}}
@section('x-data', "checklistComponent(" . json_encode([
    'canModerate' => auth()->user()->isAdmin() || auth()->user()->isManager() || auth()->user()->isAnimateur(),
    'storeId' => auth()->user()->store_id,
    'userId' => auth()->id(),
    'userName' => trim(auth()->user()->first_name . ' ' . auth()->user()->last_name),
]) . ")")

@section('content')
<div class="container mx-auto px-4 py-6 max-w-4xl pb-32" x-data="{ activeTab: 'checklist' }">
    {{-- * Header --}}
    <header class="mb-6">
        <h1 class="text-3xl font-display font-bold text-boulanger-dark flex items-center gap-2">
            📋 Fiche de pointage hebdomadaire
        </h1>
        <p class="text-boulanger-gray mt-1">Pointages rayons vendeurs</p>
    </header>

    {{-- * Onglets (Manager/Animateur uniquement) --}}
    @if(auth()->user()->isAdmin() || auth()->user()->isManager() || auth()->user()->isAnimateur())
        <div class="mb-6">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                <div class="flex border-b border-gray-200">
                    <button @click="activeTab = 'checklist'"
                            :class="activeTab === 'checklist' ? 'bg-boulanger-orange text-white' : 'bg-white text-gray-600 hover:bg-gray-50'"
                            class="flex-1 px-4 py-3 sm:px-6 sm:py-4 font-semibold text-sm sm:text-base transition-colors duration-200 flex items-center justify-center gap-2">
                        <i data-lucide="clipboard-check" class="w-4 h-4 sm:w-5 sm:h-5"></i>
                        <span>Pointages</span>
                    </button>
                    <button @click="activeTab = 'departments'; loadStoreDepartments()"
                            :class="activeTab === 'departments' ? 'bg-boulanger-orange text-white' : 'bg-white text-gray-600 hover:bg-gray-50'"
                            class="flex-1 px-4 py-3 sm:px-6 sm:py-4 font-semibold text-sm sm:text-base transition-colors duration-200 flex items-center justify-center gap-2">
                        <i data-lucide="package" class="w-4 h-4 sm:w-5 sm:h-5"></i>
                        <span>Gestion des Rayons</span>
                    </button>
                </div>
            </div>
        </div>
    @endif

    {{-- Contenu de l'onglet Pointages --}}
    <div x-show="activeTab === 'checklist'" x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 transform translate-y-4"
         x-transition:enter-end="opacity-100 transform translate-y-0">

    {{-- * Bandeau infos (Nom vendeur + semaine) --}}
    <div class="mb-4 bg-white rounded-2xl p-4 shadow-sm border border-gray-100">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
                <p class="text-xs font-semibold text-boulanger-gray mb-1">Nom du vendeur</p>
                <div class="px-3 py-2 border border-gray-200 rounded-xl text-sm bg-gray-50">
                    <span x-text="selectedUserLabel ?? '—'"></span>
                </div>
            </div>

            <div>
                <p class="text-xs font-semibold text-boulanger-gray mb-1">Semaine du</p>
                <div class="px-3 py-2 border border-gray-200 rounded-xl text-sm bg-gray-50">
                    <span x-text="formatDate(currentWeekStart)"></span>
                    <span class="text-boulanger-gray">au</span>
                    <span x-text="formatDate(currentWeekEnd)"></span>
                </div>
            </div>
        </div>
    </div>

    {{-- * Sélecteur de vendeur (manager/animateur/admin) --}}
    @if(auth()->user()->isAdmin() || auth()->user()->isManager() || auth()->user()->isAnimateur())
        <div class="mb-4 bg-white rounded-2xl p-4 shadow-sm border border-gray-100 flex items-center gap-3">
            <p class="text-sm font-semibold text-boulanger-dark">Suivi de</p>

            <select
                class="border border-gray-200 rounded-xl px-3 py-2 text-sm flex-1"
                x-model="selectedUserId"
                @change="selectUser(selectedUserId)"
            >
                <option value="{{ auth()->id() }}">Moi</option>
                <template x-for="member in team" :key="member.id">
                    <option :value="member.id" x-text="member.first_name + ' ' + member.last_name"></option>
                </template>
            </select>
        </div>

        {{-- * Liste des pointages à valider --}}
        <div class="mb-6 bg-white rounded-2xl p-4 shadow-sm border border-gray-100">
            <div class="flex items-center justify-between mb-3">
                <h2 class="text-sm font-semibold text-boulanger-dark">Pointages à valider</h2>
                <span class="text-xs text-boulanger-gray" x-text="moderationList.length + ' en attente'"></span>
            </div>
            <div class="space-y-2 max-h-72 overflow-y-auto">
                <template x-if="moderationList.length === 0">
                    <p class="text-sm text-boulanger-gray">Aucun pointage pour l'instant.</p>
                </template>
                <template x-for="item in moderationList" :key="item.id">
                    <div class="flex items-center justify-between p-3 rounded-xl border border-gray-100 hover:border-orange-100 hover:bg-orange-50/40 transition">
                        <div>
                            <p class="text-sm font-semibold text-boulanger-dark" x-text="item.user.first_name + ' ' + item.user.last_name"></p>
                            <p class="text-xs text-boulanger-gray">
                                Semaine du <span x-text="formatDate(item.week_start_date)"></span>
                                • <span :class="{
                                    'text-yellow-600': item.validation_status === 'pending',
                                    'text-green-600': item.validation_status === 'validated',
                                    'text-red-600': item.validation_status === 'rejected'
                                }" x-text="item.validation_status ?? 'pending'"></span>
                            </p>
                        </div>
                        <button type="button"
                                @click="loadChecklistById(item.id)"
                                class="text-xs px-3 py-2 rounded-lg bg-boulanger-orange text-white font-semibold hover:bg-orange-600 transition">
                            Ouvrir
                        </button>
                    </div>
                </template>
            </div>
        </div>
    @endif

    {{-- * Remarques globales / Actions à prévoir --}}
    <div class="mb-6 bg-white rounded-2xl p-4 shadow-sm border border-gray-100">
        <div class="flex items-center justify-between mb-2">
            <h2 class="text-sm font-semibold text-boulanger-dark">Remarques globales / Actions à prévoir</h2>
            <span class="text-xs text-boulanger-gray">optionnel</span>
        </div>

        <textarea
            x-model="globalNotes"
            placeholder="Ex : réassort A6, gondole à reprendre, manque balisage promo, etc."
            class="w-full px-3 py-3 border border-gray-200 rounded-xl text-sm focus:border-boulanger-orange focus:ring-2 focus:ring-orange-100"
            rows="4"
        ></textarea>
    </div>

    {{-- * Barre de progression --}}
    <div class="mb-6 bg-white rounded-2xl p-4 shadow-sm border border-gray-100">
        <div class="flex items-center justify-between mb-2">
            <span class="text-sm font-medium text-boulanger-dark">Progression</span>
            <span class="text-sm font-bold text-boulanger-orange" x-text="completion + '%'"></span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-3" role="progressbar"
             :aria-valuenow="completion" aria-valuemin="0" aria-valuemax="100">
            <div class="bg-boulanger-orange h-3 rounded-full transition-all duration-300"
                 :style="`width: ${completion}%`"></div>
        </div>
    </div>

    {{-- * Statut & évaluation manager --}}
    <div class="mb-6 bg-white rounded-2xl p-4 shadow-sm border border-gray-100 flex flex-col gap-3">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
                <span class="px-3 py-1 text-xs font-semibold rounded-full"
                      :class="{
                        'bg-yellow-100 text-yellow-700': validationStatus === 'pending' || !validationStatus,
                        'bg-green-100 text-green-700': validationStatus === 'validated',
                        'bg-red-100 text-red-700': validationStatus === 'rejected'
                      }"
                      x-text="validationStatus ? (validationStatus === 'validated' ? 'Validée' : (validationStatus === 'rejected' ? 'Rejetée' : 'En attente')) : 'En attente'"></span>
                <span class="text-xs text-boulanger-gray" x-show="validatedBy">
                    par <span x-text="validatedBy?.first_name + ' ' + validatedBy?.last_name"></span>
                </span>
            </div>
            <div class="flex items-center gap-2 text-xs text-boulanger-gray">
                <span class="px-2 py-1 bg-green-50 text-green-700 rounded-lg font-semibold" x-text="'OK '+evaluationSummary.ok"></span>
                <span class="px-2 py-1 bg-red-50 text-red-700 rounded-lg font-semibold" x-text="'NOK '+evaluationSummary.nok"></span>
                <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded-lg font-semibold" x-text="'Total '+evaluationSummary.total"></span>
            </div>
        </div>

        {{-- Actions manager --}}
        <div x-show="canModerate && selectedUserId != userId && checklistId"
             class="flex items-center gap-3">
            <button type="button"
                    @click="submitEvaluation('validated')"
                    :disabled="isValidating"
                    class="flex-1 bg-green-600 text-white py-3 rounded-xl font-semibold shadow hover:bg-green-700 transition disabled:opacity-50 disabled:cursor-not-allowed">
                ✅ Valider
            </button>
            <button type="button"
                    @click="submitEvaluation('rejected')"
                    :disabled="isValidating"
                    class="flex-1 bg-red-600 text-white py-3 rounded-xl font-semibold shadow hover:bg-red-700 transition disabled:opacity-50 disabled:cursor-not-allowed">
                ✗ Rejeter
            </button>
        </div>
    </div>

    {{-- * Loader --}}
    <template x-if="isLoading">
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
            <div class="animate-pulse space-y-3">
                <div class="h-4 bg-gray-200 rounded w-1/3"></div>
                <div class="h-3 bg-gray-100 rounded"></div>
                <div class="h-3 bg-gray-100 rounded"></div>
            </div>
        </div>
    </template>

    {{-- * Placeholder manager/anim/admin si aucun pointage sélectionné --}}
    <template x-if="!isLoading && canModerate && !checklistId">
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-dashed border-boulanger-orange/50 text-boulanger-dark">
            <div class="flex items-start gap-3">
                <div class="w-10 h-10 rounded-full bg-boulanger-light flex items-center justify-center text-boulanger-orange text-xl">👀</div>
                <div class="flex-1">
                    <p class="font-semibold">Sélectionnez une checklist à examiner</p>
                    <p class="text-sm text-boulanger-gray mt-1">Choisissez un vendeur ou cliquez sur "Ouvrir" dans la liste des pointages pour afficher le détail et poser vos OK/NOK.</p>
                </div>
            </div>
        </div>
    </template>

    {{-- * Formulaire dynamique (format PDF : Tâche + Commentaires/Date) --}}
    <form x-show="!isLoading && (!canModerate || checklistId)" x-cloak @submit.prevent="submitChecklist()" class="space-y-6">

        <template x-for="(section, sIndex) in sections" :key="section.id">
            <section class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                {{-- En-tête section (1/2/3) --}}
                <div class="bg-boulanger-light p-4 flex items-center gap-2">
                    <span class="text-xs font-semibold text-boulanger-orange">
                        <span x-text="sIndex + 1"></span>.
                    </span>
                    <h2 class="text-xl font-display font-bold text-boulanger-dark" x-text="section.name"></h2>
                </div>

                {{-- En-tête tableau --}}
                <div class="px-4 pt-4">
                    <div class="grid grid-cols-12 gap-3 text-xs font-semibold text-boulanger-gray">
                        <div class="col-span-7 sm:col-span-8">Tâche</div>
                        <div class="col-span-5 sm:col-span-4">Commentaires / Date</div>
                    </div>
                    <div class="h-px bg-gray-100 mt-3"></div>
                </div>

                {{-- Lignes tâches --}}
                <div class="p-4 space-y-3">
                    <template x-for="item in section.items" :key="item.id">
                        <div class="border border-gray-100 rounded-xl p-4 hover:border-orange-100 transition">

                            {{-- ! Init defensive --}}
                            <div x-init="answers[item.id] ??= { done: false, comment: '', date: '' }"></div>

                            <div class="grid grid-cols-12 gap-3 items-start">
                                {{-- Col tâche --}}
                                <div class="col-span-12 sm:col-span-8">
                                    <label class="flex items-start gap-3 cursor-pointer">
                                        <input
                                            type="checkbox"
                                            class="mt-1 rounded border-gray-300 text-boulanger-orange focus:ring-boulanger-orange"
                                            :checked="answers[item.id]?.done === true"
                                            @change="setDone(item.id, $event.target.checked)"
                                        >
                                        <div>
                                            <p class="font-medium text-boulanger-dark" x-text="item.label"></p>
                                            <p class="text-xs text-boulanger-gray mt-1">Coche quand c’est fait</p>
                                        </div>
                                    </label>
                                </div>

                                {{-- Col commentaire + date (comme le PDF) --}}
                                <div class="col-span-12 sm:col-span-4 space-y-2">
                                    <input
                                        type="date"
                                        x-model="answers[item.id].date"
                                        class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:border-boulanger-orange focus:ring-2 focus:ring-orange-100"
                                    >

                                    <textarea
                                        x-model="answers[item.id].comment"
                                        placeholder="Commentaire"
                                        class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:border-boulanger-orange focus:ring-2 focus:ring-orange-100"
                                        rows="2"
                                    ></textarea>

                                    {{-- Evaluation manager --}}
                                    <div x-show="canModerate && selectedUserId != userId && answers[item.id]?.done"
                                         class="flex items-center gap-2 text-xs">
                                        <span class="text-boulanger-gray">Évaluation :</span>
                                        <button type="button"
                                                @click="setManagerEval(item.id, true)"
                                                :class="managerEvaluations[item.id] === true ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'"
                                                class="px-3 py-1 rounded-lg font-semibold transition">
                                            OK
                                        </button>
                                        <button type="button"
                                                @click="setManagerEval(item.id, false)"
                                                :class="managerEvaluations[item.id] === false ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-600'"
                                                class="px-3 py-1 rounded-lg font-semibold transition">
                                            NOK
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </template>
                </div>
            </section>
        </template>

        {{-- Bouton de validation --}}
        <div class="sticky bottom-20 z-10">
            <button
                type="submit"
                :disabled="isSubmitting"
                class="w-full bg-boulanger-orange text-white py-4 rounded-xl font-semibold shadow-lg hover:bg-orange-600 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
            >
                <template x-if="!isSubmitting">
                    <span>🚀 Envoyer mon pointage</span>
                </template>
                <template x-if="isSubmitting">
                    <span>⏳ Envoi en cours...</span>
                </template>
            </button>
        </div>

        {{-- Message de succès --}}
        <template x-if="successMessage">
            <div class="fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-xl shadow-lg z-50 animate-bounce">
                <span x-text="successMessage"></span>
            </div>
        </template>

        {{-- Message d'erreur --}}
        <template x-if="error">
            <div class="fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-xl shadow-lg z-50">
                <span x-text="error"></span>
            </div>
        </template>

    </form>
    </div>

    {{-- Contenu de l'onglet Gestion des Rayons --}}
    @if(auth()->user()->isAdmin() || auth()->user()->isManager() || auth()->user()->isAnimateur())
        <div x-show="activeTab === 'departments'" x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 transform translate-y-4"
             x-transition:enter-end="opacity-100 transform translate-y-0">
            @include('checklists.partials.manager-departments-tab')
        </div>
    @endif
</div>
@endsection