@extends('layouts.admin')

@section('title', 'Ajouter un produit')
@section('page-title', 'Ajouter un produit')

@section('content')

<div class="max-w-3xl mx-auto">

    <div class="mb-6">
        <a href="{{ route('admin.products.index') }}"
           class="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-primary transition-colors">
            <i class="fas fa-arrow-left"></i> Retour aux produits
        </a>
    </div>

    {{-- Affichage global des erreurs --}}
    @if($errors->any())
    <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-6">
        <div class="flex items-center gap-2 mb-2">
            <i class="fas fa-exclamation-circle text-red-500"></i>
            <p class="font-semibold text-red-700 text-sm">Veuillez corriger les erreurs suivantes :</p>
        </div>
        <ul class="list-disc list-inside space-y-1">
            @foreach($errors->all() as $error)
            <li class="text-red-600 text-sm">{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 bg-gray-50">
            <h2 class="font-semibold text-gray-800 flex items-center gap-2">
                <i class="fas fa-box-open text-primary"></i> Informations du produit
            </h2>
        </div>

        <form action="{{ route('admin.products.store') }}" method="POST"
              enctype="multipart/form-data" class="p-6 space-y-6">
            @csrf

            {{-- Nom & Catégorie --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                <div class="sm:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Nom du produit <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="name" value="{{ old('name') }}" required
                           class="w-full border rounded-xl px-4 py-2.5 text-sm outline-none transition
                                  focus:ring-2 focus:ring-primary focus:border-transparent
                                  {{ $errors->has('name') ? 'border-red-400 bg-red-50' : 'border-gray-200' }}"
                           placeholder="Ex : Vase en poterie traditionnelle">
                    @error('name')
                    <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                        <i class="fas fa-circle-exclamation"></i> {{ $message }}
                    </p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Catégorie <span class="text-red-500">*</span>
                    </label>
                    <select name="category_id" required
                            class="w-full border rounded-xl px-4 py-2.5 text-sm bg-white outline-none transition
                                   focus:ring-2 focus:ring-primary focus:border-transparent
                                   {{ $errors->has('category_id') ? 'border-red-400 bg-red-50' : 'border-gray-200' }}">
                        <option value="">— Sélectionner une catégorie —</option>
                        @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>
                            {{ $cat->name }}
                        </option>
                        @endforeach
                    </select>
                    @error('category_id')
                    <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                        <i class="fas fa-circle-exclamation"></i> {{ $message }}
                    </p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Prix (FCFA) <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input type="number" name="price" value="{{ old('price') }}"
                               required min="0" step="0.01"
                               class="w-full border rounded-xl pl-4 pr-12 py-2.5 text-sm outline-none transition
                                      focus:ring-2 focus:ring-primary focus:border-transparent
                                      {{ $errors->has('price') ? 'border-red-400 bg-red-50' : 'border-gray-200' }}"
                               placeholder="0.00">
                        <span class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 text-sm font-medium">FCFA</span>
                    </div>
                    @error('price')
                    <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                        <i class="fas fa-circle-exclamation"></i> {{ $message }}
                    </p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Image du produit
                        <span class="text-gray-400 font-normal">(jpg, png, webp — max 2 Mo)</span>
                    </label>
                    <input type="file" name="image" accept="image/jpeg,image/png,image/webp,image/jpg"
                           class="w-full border rounded-xl px-4 py-2.5 text-sm outline-none transition
                                  focus:ring-2 focus:ring-primary focus:border-transparent
                                  {{ $errors->has('image') ? 'border-red-400 bg-red-50' : 'border-gray-200' }}
                                  file:mr-3 file:py-1 file:px-3 file:rounded-lg file:border-0
                                  file:text-xs file:font-medium file:bg-primary file:text-white hover:file:bg-primary-dark">
                    @error('image')
                    <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                        <i class="fas fa-circle-exclamation"></i> {{ $message }}
                    </p>
                    @enderror
                </div>

                <div class="sm:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Description courte
                        <span class="text-gray-400 font-normal">(affichée sur la carte produit)</span>
                    </label>
                    <input type="text" name="short_description"
                           value="{{ old('short_description') }}" maxlength="500"
                           class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm outline-none transition
                                  focus:ring-2 focus:ring-primary focus:border-transparent"
                           placeholder="Résumé en une phrase...">
                </div>

                <div class="sm:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Description complète <span class="text-red-500">*</span>
                    </label>
                    <textarea name="description" required rows="5"
                              class="w-full border rounded-xl px-4 py-2.5 text-sm outline-none transition resize-none
                                     focus:ring-2 focus:ring-primary focus:border-transparent
                                     {{ $errors->has('description') ? 'border-red-400 bg-red-50' : 'border-gray-200' }}"
                              placeholder="Description détaillée du produit, matériaux utilisés, dimensions...">{{ old('description') }}</textarea>
                    @error('description')
                    <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                        <i class="fas fa-circle-exclamation"></i> {{ $message }}
                    </p>
                    @enderror
                </div>
            </div>

            {{-- Options --}}
            <div class="bg-gray-50 rounded-xl p-4 border border-gray-100">
                <p class="text-sm font-semibold text-gray-700 mb-3">Options de visibilité</p>
                <div class="flex flex-col sm:flex-row gap-4">
                    <label class="flex items-center gap-3 cursor-pointer select-none group">
                        <div class="relative">
                            <input type="checkbox" name="is_active" value="1"
                                   {{ old('is_active', true) ? 'checked' : '' }}
                                   class="sr-only peer">
                            <div class="w-10 h-6 bg-gray-200 rounded-full peer-checked:bg-primary transition-colors"></div>
                            <div class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform peer-checked:translate-x-4"></div>
                        </div>
                        <div>
                            <span class="text-sm font-medium text-gray-700">Produit actif</span>
                            <p class="text-xs text-gray-400">Visible sur le site public</p>
                        </div>
                    </label>

                    <label class="flex items-center gap-3 cursor-pointer select-none group">
                        <div class="relative">
                            <input type="checkbox" name="is_featured" value="1"
                                   {{ old('is_featured') ? 'checked' : '' }}
                                   class="sr-only peer">
                            <div class="w-10 h-6 bg-gray-200 rounded-full peer-checked:bg-yellow-400 transition-colors"></div>
                            <div class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform peer-checked:translate-x-4"></div>
                        </div>
                        <div>
                            <span class="text-sm font-medium text-gray-700">Produit vedette</span>
                            <p class="text-xs text-gray-400">Affiché sur la page d'accueil</p>
                        </div>
                    </label>
                </div>
            </div>

            {{-- Boutons --}}
            <div class="flex gap-3 pt-2 border-t border-gray-100">
                <a href="{{ route('admin.products.index') }}"
                   class="flex-1 sm:flex-none px-6 py-3 border border-gray-200 rounded-xl text-sm font-medium
                          text-gray-600 hover:bg-gray-50 transition-colors text-center">
                    Annuler
                </a>
                <button type="submit"
                        class="flex-1 sm:flex-none px-8 py-3 bg-primary text-white rounded-xl text-sm font-bold
                               hover:bg-primary-dark transition-all shadow-sm hover:shadow-md
                               flex items-center justify-center gap-2">
                    <i class="fas fa-save"></i> Enregistrer le produit
                </button>
            </div>
        </form>
    </div>
</div>

@endsection