{{-- * VUE : Gestion Infinity Admin --}}
{{-- ? Pattern Alpine.js API-First : adminInfinity() gère la dynamique --}}
@extends('layouts.admin')

@section('title', 'Gestion Infinity - Admin')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8" x-data="adminInfinity()" x-cloak>
    {{-- * En-tête --}}
    <div class="mb-8 flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-display font-bold text-boulanger-dark flex items-center gap-3">
                <i data-lucide="infinity" class="w-8 h-8 text-boulanger-orange"></i>
                Gestion Infinity
            </h1>
            <p class="mt-2 text-gray-600">Sources officielles + coûts par produit pour la simulation</p>
        </div>
    </div>

    {{-- * Toast de notification --}}
    <div x-show="toast && toast.show"
         x-cloak
         x-transition
         :class="(toast && toast.type === 'success') ? 'bg-green-500' : 'bg-red-500'"
         class="fixed top-4 right-4 z-50 px-6 py-3 text-white rounded-lg shadow-lg">
        <span x-text="toast ? toast.message : ''"></span>
    </div>

    {{-- * Statut conformité --}}
    <div class="mb-6 bg-white rounded-lg shadow-sm border border-gray-200 p-4">
        <div class="flex items-start gap-3">
            <div class="w-10 h-10 rounded-lg bg-boulanger-orange/10 text-boulanger-orange flex items-center justify-center">
                <i data-lucide="badge-check" class="w-5 h-5"></i>
            </div>
            <div class="flex-1">
                <p class="text-sm font-semibold text-gray-900">
                    Source officielle : Boulanger.com
                </p>
                <p class="text-xs text-gray-500 mt-1">
                    Système simplifié avec une source unique de coûts de réparation.
                </p>
            </div>
        </div>
    </div>

    {{-- * Onglets --}}
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="border-b border-gray-200">
            <nav class="flex -mb-px">
                <div class="px-6 py-3 border-b-2 border-boulanger-orange text-boulanger-orange font-medium text-sm">
                    <div class="flex items-center gap-2">
                        <i data-lucide="package" class="w-4 h-4"></i>
                        Produits Infinity
                    </div>
                </div>
            </nav>
        </div>

        {{-- * Onglet Produits --}}
        <div class="p-6 space-y-6">
            {{-- Création produit --}}
            <div class="bg-gray-50 border border-dashed border-gray-300 rounded-lg p-4">
                <h3 class="text-sm font-semibold text-gray-700 mb-3">Ajouter un produit</h3>
                <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                    <input type="text" x-model="newProduct.name" placeholder="Nom produit"
                           class="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange">
                    <select x-model="newProduct.univers"
                            class="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange">
                        <option value="electro">Électroménager</option>
                        <option value="image">Image & Son</option>
                        <option value="multimedia">Multimédia</option>
                    </select>
                    <div class="relative">
                        <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
                            <i :data-lucide="newProduct.icon || 'package'" class="w-5 h-5 text-boulanger-orange"></i>
                        </div>
                        <input type="text" x-model="newProduct.icon"
                               @input="$nextTick(() => window.lucide && window.lucide.createIcons())"
                               placeholder="tv, smartphone..."
                               class="pl-11 pr-3 py-2 w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange">
                    </div>
                    <input type="number" x-model="newProduct.cost_eur" placeholder="Coût réparation (€)" min="0" step="0.01"
                           class="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange">
                    <label class="flex items-center gap-2 text-sm text-gray-700">
                        <input type="checkbox" x-model="newProduct.is_active"
                               class="rounded border-gray-300 text-boulanger-orange focus:ring-boulanger-orange">
                        Actif
                    </label>
                </div>
                <div class="mt-4">
                    <button @click="createProduct()"
                            :disabled="isSubmittingProduct"
                            :class="isSubmittingProduct ? 'bg-gray-300 cursor-not-allowed' : 'bg-boulanger-orange hover:bg-orange-600'"
                            class="px-4 py-2 text-white rounded-lg transition">
                        <span x-show="!isSubmittingProduct">Ajouter</span>
                        <span x-show="isSubmittingProduct">Ajout en cours...</span>
                    </button>
                </div>
            </div>

            {{-- * Barre de recherche et filtres --}}
            <div class="bg-white border border-gray-200 rounded-lg p-4 space-y-4">
                <div class="flex items-center gap-2 mb-3">
                    <i data-lucide="filter" class="w-4 h-4 text-gray-600"></i>
                    <h3 class="text-sm font-semibold text-gray-700">Filtres</h3>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    {{-- Recherche --}}
                    <div>
                        <label class="text-xs font-medium text-gray-600 mb-1 block">Recherche</label>
                        <input type="text"
                               x-model="filters.search"
                               @input="onSearchInput()"
                               placeholder="Rechercher un produit..."
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange text-sm">
                    </div>
                    {{-- Filtre Univers --}}
                    <div>
                        <label class="text-xs font-medium text-gray-600 mb-1 block">Univers</label>
                        <select x-model="filters.univers"
                                @change="onFilterChange()"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange text-sm">
                            <option value="all">Tous</option>
                            <option value="electro">Électroménager</option>
                            <option value="image">Image & Son</option>
                            <option value="multimedia">Multimédia</option>
                        </select>
                    </div>
                    {{-- Filtre Statut --}}
                    <div>
                        <label class="text-xs font-medium text-gray-600 mb-1 block">Statut</label>
                        <select x-model="filters.is_active"
                                @change="onFilterChange()"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange text-sm">
                            <option value="">Tous</option>
                            <option value="1">Actifs</option>
                            <option value="0">Inactifs</option>
                        </select>
                    </div>
                    {{-- Bouton Réinitialiser --}}
                    <div class="flex items-end">
                        <button @click="resetFilters()"
                                class="w-full px-3 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg transition text-sm font-medium">
                            Réinitialiser
                        </button>
                    </div>
                </div>
                {{-- Indicateur de résultats --}}
                <div class="text-xs text-gray-600 pt-2 border-t border-gray-200">
                    <template x-if="pagination.total > 0">
                        <span>Affichage <strong x-text="pagination.from"></strong> à <strong x-text="pagination.to"></strong> sur <strong x-text="pagination.total"></strong> produit<span x-show="pagination.total > 1">s</span></span>
                    </template>
                    <template x-if="pagination.total === 0">
                        <span>Aucun produit trouvé</span>
                    </template>
                </div>
            </div>

            {{-- Liste produits --}}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Produit</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Univers</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Icône</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Coût (€)</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actif</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <template x-for="product in products" :key="product.id">
                            <tr>
                                <td class="px-4 py-3">
                                    <input type="text" x-model="product.name"
                                           class="w-full px-2 py-1 border border-gray-300 rounded text-sm">
                                </td>
                                <td class="px-4 py-3">
                                    <select x-model="product.univers"
                                            class="w-full px-2 py-1 border border-gray-300 rounded text-sm">
                                        <option value="electro">Électroménager</option>
                                        <option value="image">Image & Son</option>
                                        <option value="multimedia">Multimédia</option>
                                    </select>
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex items-center gap-2">
                                        <i :data-lucide="product.icon" class="w-5 h-5 text-boulanger-orange"></i>
                                        <input type="text" x-model="product.icon"
                                               placeholder="tv, smartphone..."
                                               class="flex-1 px-2 py-1 border border-gray-300 rounded text-sm">
                                    </div>
                                </td>
                                <td class="px-4 py-3">
                                    <input type="number" min="0" step="0.01" x-model="product.cost_eur"
                                           class="w-full px-2 py-1 border border-gray-300 rounded text-sm">
                                </td>
                                <td class="px-4 py-3">
                                    <input type="checkbox" x-model="product.is_active"
                                           class="rounded border-gray-300 text-boulanger-orange focus:ring-boulanger-orange">
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    <div class="flex items-center gap-3">
                                        <button @click="updateProduct(product)"
                                                class="text-blue-600 hover:text-blue-800 font-medium text-sm">
                                            Enregistrer
                                        </button>
                                        <button @click="deleteProduct(product)"
                                                class="text-red-600 hover:text-red-800 font-medium text-sm">
                                            Supprimer
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>

                <div x-show="products.length === 0" class="text-center py-10 text-gray-500">
                    Aucun produit Infinity
                </div>
            </div>

            {{-- * Pagination --}}
            <div class="flex items-center justify-between bg-white border border-gray-200 rounded-lg p-4" x-show="pagination.last_page > 1">
                <div class="text-sm text-gray-600">
                    Page <strong x-text="pagination.current_page"></strong> sur <strong x-text="pagination.last_page"></strong>
                </div>
                <div class="flex items-center gap-2">
                    <button @click="fetchProducts(pagination.current_page - 1)"
                            :disabled="pagination.current_page === 1"
                            :class="pagination.current_page === 1 ? 'opacity-50 cursor-not-allowed bg-gray-100' : 'hover:bg-gray-100'"
                            class="px-3 py-2 border border-gray-300 rounded-lg text-sm transition">
                        ← Précédente
                    </button>
                    <div class="flex gap-1">
                        <template x-for="pageNum in Array.from({ length: pagination.last_page }, (_, i) => i + 1)" :key="pageNum">
                            <button @click="fetchProducts(pageNum)"
                                    :class="pageNum === pagination.current_page ? 'bg-boulanger-orange text-white' : 'border border-gray-300 hover:bg-gray-100'"
                                    class="px-3 py-2 rounded-lg text-sm transition"
                                    x-text="pageNum">
                            </button>
                        </template>
                    </div>
                    <button @click="fetchProducts(pagination.current_page + 1)"
                            :disabled="pagination.current_page === pagination.last_page"
                            :class="pagination.current_page === pagination.last_page ? 'opacity-50 cursor-not-allowed bg-gray-100' : 'hover:bg-gray-100'"
                            class="px-3 py-2 border border-gray-300 rounded-lg text-sm transition">
                        Suivante →
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection