@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-8">Ajouter un nouveau produit</h1>

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

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <label class="block text-gray-700 font-bold mb-2">Nom du produit</label>
                <input type="text" name="name" class="w-full border rounded p-2" required>
            </div>
            <div>
                <label class="block text-gray-700 font-bold mb-2">Prix (€)</label>
                <input type="number" step="0.01" name="price" class="w-full border rounded p-2" required>
            </div>
        </div>

        <div class="mb-6">
            <label class="block text-gray-700 font-bold mb-2">Catégorie</label>
            <select name="category_id" class="w-full border rounded p-2">
                <option value="">-- Aucune --</option>
                @foreach(\App\Models\Category::whereIn('type', ['all', 'shop'])->get() as $cat)
                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-6">
            <label class="block text-gray-700 font-bold mb-2">Description</label>
            <textarea name="description" rows="4" class="w-full border rounded p-2"></textarea>
        </div>

        <div class="bg-gray-50 p-4 rounded mb-6 border border-gray-200">
            <h3 class="font-bold text-lg mb-4 text-gray-700">Images</h3>

            <div class="mb-4">
                <label class="block text-sm font-bold mb-1">Image principale (Catalogue)</label>
                <input type="file" name="image" class="w-full" required>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-bold mb-1">Image "Vierge" (Pour personnalisation)</label>
                <input type="file" name="base_image" class="w-full">
                <p class="text-xs text-gray-500">L'image du mug vide sur laquelle le client va dessiner.</p>
            </div>
        </div>

        <div class="bg-blue-50 p-4 rounded mb-8 border border-blue-200">
            <h3 class="font-bold text-lg mb-4 text-blue-800"><i class="fas fa-search mr-2"></i>Référencement Google (SEO)</h3>

            <div class="mb-4">
                <label class="block text-sm font-bold text-blue-900 mb-1">Méta Titre (Titre bleu Google)</label>
                <input type="text" name="meta_title" class="w-full border rounded p-2 text-sm" placeholder="Ex: Mug Personnalisé Prénom - Idée Cadeau Unique">
                <p class="text-xs text-blue-500 mt-1">Idéalement moins de 70 caractères.</p>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-bold text-blue-900 mb-1">Méta Description (Texte gris)</label>
                <textarea name="meta_description" rows="2" class="w-full border rounded p-2 text-sm" placeholder="Ex: Créez votre mug unique avec prénom et photo. Livraison rapide en France. Atelier Laeti'Fée."></textarea>
                <p class="text-xs text-blue-500 mt-1">Idéalement moins de 160 caractères.</p>
            </div>
        </div>

        <button type="submit" class="bg-primary text-white font-bold py-3 px-6 rounded w-full hover:bg-primary-dark">
            Créer le produit
        </button>
    </form>
</div>
@endsection