@extends('layouts.base')

@section('title', 'Codes Zimms - Animation Vendeurs')

@section('x-data', 'zimmsComponent()')

@section('content')
<div class="container mx-auto px-4 py-6 max-w-3xl pb-32">

    <header class="mb-6">
        <h1 class="text-3xl font-display font-bold text-boulanger-dark">
            🛠️ Codes Zimms
        </h1>
        <p class="text-boulanger-gray mt-1">Recherchez et copiez rapidement vos codes promo</p>
    </header>

    {{-- * Barre de recherche (US-04) --}}
    <div class="mb-6">
        <input type="text"
               x-model="searchQuery"
               @input="search()"
               placeholder="Rechercher un code, un libellé ou une famille..."
               class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-boulanger-orange focus:ring-2 focus:ring-orange-100 transition">
    </div>

    {{-- * Loading State --}}
    <template x-if="isLoading">
        <div class="text-center py-12">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-boulanger-orange mx-auto"></div>
        </div>
    </template>

    {{-- * Liste des Zimms --}}
    <div class="space-y-3" x-show="!isLoading">
        <template x-for="zimm in filteredZimms" :key="zimm.code">
            <div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 hover:border-orange-100 transition cursor-pointer"
                 @click="copyCode(zimm.code)">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <p class="font-display font-bold text-lg text-boulanger-dark" x-text="zimm.label"></p>
                        <p class="text-sm text-boulanger-gray mt-1">
                            <span class="font-mono font-bold text-boulanger-orange" x-text="zimm.code"></span>
                            <span x-show="zimm.family"> • <span x-text="zimm.family"></span></span>
                            <span x-show="zimm.value"> • <span x-text="zimm.value + '€'"></span></span>
                        </p>
                    </div>

                    {{-- * Icône copier --}}
                    <div class="ml-4">
                        <i data-lucide="copy" class="w-6 h-6" :class="copiedCode === zimm.code ? 'text-green-500' : 'text-boulanger-gray'" x-show="copiedCode !== zimm.code"></i>
                        <i data-lucide="check" class="w-6 h-6 text-green-500" x-show="copiedCode === zimm.code"></i>
                    </div>
                </div>
            </div>
        </template>
    </div>

    {{-- * Toast de confirmation (US-04) --}}
    <div x-show="copiedCode"
         x-transition
         class="fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-full shadow-lg">
        ✓ Code copié !
    </div>

</div>
@endsection