@extends('layouts.admin-layout')

@section('title', 'Ajouter un Produit')

@section('content')
    <div class="p-6">
        <!-- Page Header -->
        <div class="mb-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 flex items-center">
                        <i class="fas fa-box text-blue-600 mr-3"></i>Ajouter un Produit
                    </h1>
                    <p class="mt-2 text-gray-600">Ajoutez un nouveau produit à votre boutique</p>
                </div>
                <a href="{{ route('admin.products.index') }}"
                   class="inline-flex items-center px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg transition duration-200">
                    <i class="fas fa-arrow-left mr-2"></i>Retour
                </a>
            </div>
        </div>

        <div class="max-w-4xl mx-auto">
            <div class="bg-white overflow-hidden shadow-lg sm:rounded-2xl border border-gray-100">
                <div class="p-8 text-gray-900">
                    <form action="{{ route('admin.products.store') }}" method="POST">
                        @csrf

                        <!-- Section: Informations de base -->
                        <div class="mb-8">
                            <div class="flex items-center mb-6 pb-3 border-b-2 border-blue-500">
                                <div class="bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-info-circle text-blue-600"></i>
                                </div>
                                <h2 class="text-xl font-bold text-gray-900">Informations de base</h2>
                            </div>

                            <div class="mb-6">
                                <label for="title" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-blue-50 px-4 py-2 rounded-lg border-l-4 border-blue-500">
                                    <i class="fas fa-heading text-blue-600 mr-2"></i>
                                    <span>Titre du produit</span>
                                    <span class="text-red-500 ml-1">*</span>
                                </label>
                                <input type="text" name="title" id="title" value="{{ old('title') }}" required
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 text-base"
                                    placeholder="Ex: Bible Louis Segond">
                                @error('title')
                                    <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>

                            <div class="mb-6">
                                <label for="description" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-blue-50 px-4 py-2 rounded-lg border-l-4 border-blue-500">
                                    <i class="fas fa-align-left text-blue-600 mr-2"></i>
                                    <span>Description</span>
                                </label>
                                <textarea name="description" id="description" rows="4"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 text-base"
                                    placeholder="Décrivez le produit...">{{ old('description') }}</textarea>
                                @error('description')
                                    <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>

                            <div class="grid md:grid-cols-2 gap-6 mb-6">
                                <div>
                                    <label for="author" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-blue-50 px-4 py-2 rounded-lg border-l-4 border-blue-500">
                                        <i class="fas fa-user-pen text-blue-600 mr-2"></i>
                                        <span>Auteur</span>
                                    </label>
                                    <input type="text" name="author" id="author" value="{{ old('author') }}"
                                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 text-base"
                                        placeholder="Ex: John Doe">
                                    @error('author')
                                        <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                        </p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="category" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-blue-50 px-4 py-2 rounded-lg border-l-4 border-blue-500">
                                        <i class="fas fa-tag text-blue-600 mr-2"></i>
                                        <span>Catégorie</span>
                                        <span class="text-red-500 ml-1">*</span>
                                    </label>
                                    <select name="category" id="category" required
                                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 text-base">
                                        <option value="">Sélectionner une catégorie...</option>
                                        <option value="Livre" {{ old('category') === 'Livre' ? 'selected' : '' }}>📖 Livre</option>
                                        <option value="Autre" {{ old('category') === 'Autre' ? 'selected' : '' }}>📦 Autre</option>
                                    </select>
                                    @error('category')
                                        <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                        </p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Section: Prix et Stock -->
                        <div class="mb-8">
                            <div class="flex items-center mb-6 pb-3 border-b-2 border-green-500">
                                <div class="bg-green-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-dollar-sign text-green-600"></i>
                                </div>
                                <h2 class="text-xl font-bold text-gray-900">Prix et inventaire</h2>
                            </div>

                            <div class="grid md:grid-cols-2 gap-6 mb-6">
                                <div>
                                    <label for="price" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-green-50 px-4 py-2 rounded-lg border-l-4 border-green-500">
                                        <i class="fas fa-dollar-sign text-green-600 mr-2"></i>
                                        <span>Prix</span>
                                        <span class="text-red-500 ml-1">*</span>
                                    </label>
                                    <input type="number" name="price" id="price" value="{{ old('price', '0.00') }}" step="0.01" min="0" required
                                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-2 focus:ring-green-500 text-base"
                                        placeholder="0.00">
                                    <p class="mt-2 text-xs text-gray-500 italic flex items-center">
                                        <i class="fas fa-info-circle mr-1"></i>Prix en dollars ($)
                                    </p>
                                    @error('price')
                                        <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                        </p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="stock" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-green-50 px-4 py-2 rounded-lg border-l-4 border-green-500">
                                        <i class="fas fa-boxes text-green-600 mr-2"></i>
                                        <span>Stock</span>
                                        <span class="text-red-500 ml-1">*</span>
                                    </label>
                                    <input type="number" name="stock" id="stock" value="{{ old('stock', '0') }}" min="0" required
                                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-2 focus:ring-green-500 text-base"
                                        placeholder="0">
                                    <p class="mt-2 text-xs text-gray-500 italic flex items-center">
                                        <i class="fas fa-info-circle mr-1"></i>Nombre d'exemplaires disponibles
                                    </p>
                                    @error('stock')
                                        <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                        </p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Section: Image et Statut -->
                        <div class="mb-8">
                            <div class="flex items-center mb-6 pb-3 border-b-2 border-purple-500">
                                <div class="bg-purple-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-image text-purple-600"></i>
                                </div>
                                <h2 class="text-xl font-bold text-gray-900">Image et statut</h2>
                            </div>

                            <div class="mb-6">
                                <label for="image" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-purple-50 px-4 py-2 rounded-lg border-l-4 border-purple-500">
                                    <i class="fas fa-image text-purple-600 mr-2"></i>
                                    <span>URL de l'image</span>
                                </label>
                                <input type="text" name="image" id="image" value="{{ old('image') }}"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-2 focus:ring-purple-500 text-base"
                                    placeholder="https://exemple.com/image.jpg">
                                <p class="mt-2 text-xs text-gray-500 italic flex items-center">
                                    <i class="fas fa-info-circle mr-1"></i>URL complète de l'image du produit (JPG, PNG)
                                </p>
                                @error('image')
                                    <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>

                            <div class="mb-6">
                                <label for="status" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-purple-50 px-4 py-2 rounded-lg border-l-4 border-purple-500">
                                    <i class="fas fa-toggle-on text-purple-600 mr-2"></i>
                                    <span>Statut</span>
                                    <span class="text-red-500 ml-1">*</span>
                                </label>
                                <select name="status" id="status" required
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-2 focus:ring-purple-500 text-base">
                                    <option value="available" {{ old('status') === 'available' ? 'selected' : '' }}>✅ Disponible</option>
                                    <option value="out_of_stock" {{ old('status') === 'out_of_stock' ? 'selected' : '' }}>❌ En rupture de stock</option>
                                </select>
                                @error('status')
                                    <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="flex gap-4 pt-6 border-t border-gray-200">
                            <a href="{{ route('admin.products.index') }}"
                                class="flex-1 px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg font-semibold transition duration-200 text-center">
                                <i class="fas fa-times mr-2"></i>Annuler
                            </a>
                            <button type="submit"
                                class="flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white rounded-lg font-semibold shadow-lg transition duration-200">
                                <i class="fas fa-save mr-2"></i>Créer le produit
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection