@extends('layouts.admin')

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

@section('page-title', 'Ajouter un nouveau livre')
@section('page-subtitle', 'Intégrez une nouvelle ressource pédagogique à la bibliothèque numérique.')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden">
        <form action="{{ route('admin.library.books.store') }}" method="POST" enctype="multipart/form-data" class="p-8 lg:p-12 space-y-8">
            @csrf

            @if($errors->any())
                <div class="bg-red-50 text-red-600 p-4 rounded-2xl text-sm font-medium border border-red-100">
                    <ul class="list-disc list-inside space-y-1">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <!-- Informations principales -->
            <div>
                <h3 class="text-lg font-black text-gray-900 mb-6 flex items-center gap-2">
                    <span class="w-8 h-8 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center text-sm">1</span>
                    Informations principales
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">
                        <label class="block text-sm font-bold text-gray-700 mb-2">Titre du livre <span class="text-red-500">*</span></label>
                        <input type="text" name="title" value="{{ old('title') }}" required
                            class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50"
                            placeholder="Ex: Introduction à l'algorithmique">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Auteur <span class="text-red-500">*</span></label>
                        <input type="text" name="author" value="{{ old('author') }}" required
                            class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50"
                            placeholder="Ex: Thomas Cormen">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">ISBN</label>
                        <input type="text" name="isbn" value="{{ old('isbn') }}"
                            class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50"
                            placeholder="Ex: 978-0-262-03384-8">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Éditeur</label>
                        <input type="text" name="publisher" value="{{ old('publisher') }}"
                            class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50"
                            placeholder="Ex: MIT Press">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Année de publication</label>
                        <input type="number" name="publication_year" value="{{ old('publication_year') }}" min="1000" max="{{ date('Y') }}"
                            class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50"
                            placeholder="Ex: 2009">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Catégorie</label>
                        <input type="text" name="category" value="{{ old('category') }}" list="categories-list"
                            class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50"
                            placeholder="Ex: Informatique">
                        <datalist id="categories-list">
                            <option value="Informatique">
                            <option value="Mathématiques">
                            <option value="Physique">
                            <option value="Chimie">
                            <option value="Biologie">
                            <option value="Économie">
                            <option value="Droit">
                            <option value="Littérature">
                            <option value="Histoire">
                            <option value="Philosophie">
                        </datalist>
                    </div>
                </div>
            </div>

            <hr class="border-gray-100">

            <!-- Description -->
            <div>
                <h3 class="text-lg font-black text-gray-900 mb-6 flex items-center gap-2">
                    <span class="w-8 h-8 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center text-sm">2</span>
                    Description
                </h3>
                <textarea name="description" rows="4"
                    class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 resize-none"
                    placeholder="Résumé ou description du livre...">{{ old('description') }}</textarea>
            </div>

            <hr class="border-gray-100">

            <!-- Exemplaires -->
            <div>
                <h3 class="text-lg font-black text-gray-900 mb-6 flex items-center gap-2">
                    <span class="w-8 h-8 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center text-sm">3</span>
                    Gestion des exemplaires
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Nombre d'exemplaires <span class="text-red-500">*</span></label>
                        <input type="number" name="total_copies" value="{{ old('total_copies', 1) }}" min="1" required
                            class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50">
                    </div>
                </div>
            </div>

            <hr class="border-gray-100">

            <!-- Fichiers -->
            <div>
                <h3 class="text-lg font-black text-gray-900 mb-6 flex items-center gap-2">
                    <span class="w-8 h-8 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center text-sm">4</span>
                    Fichiers
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Image de couverture</label>
                        <input type="file" name="cover_image" accept="image/*"
                            class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                        <p class="text-xs text-gray-400 mt-2">JPG, PNG, WebP (max 2MB)</p>
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Fichier PDF (optionnel)</label>
                        <input type="file" name="file_path" accept=".pdf"
                            class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                        <p class="text-xs text-gray-400 mt-2">PDF uniquement (max 50MB)</p>
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="pt-4 flex items-center gap-4">
                <a href="{{ route('admin.library.books.index') }}"
                    class="px-8 py-3 bg-gray-100 text-gray-700 font-bold rounded-xl hover:bg-gray-200 transition-all">
                    Annuler
                </a>
                <button type="submit"
                    class="px-8 py-3 bg-blue-600 text-white font-bold rounded-xl hover:bg-blue-700 transition-all shadow-lg shadow-blue-500/20">
                    Ajouter le livre
                </button>
            </div>
        </form>
    </div>
</div>
@endsection