@extends('layouts.app')

@section('content')
<div class="max-w-3xl mx-auto px-4 py-8">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-3xl font-bold text-gray-800">Ajouter un produit</h1>
        <a href="{{ route('admin.products.index') }}" class="text-gray-600 hover:text-gray-800 font-bold">Retour</a>
    </div>

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

            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2">Nom du produit</label>
                <input type="text" name="name" class="w-full border rounded px-3 py-2 text-gray-700 focus:outline-none focus:border-primary" required>
            </div>

            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2">Description</label>
                <textarea name="description" rows="3" class="w-full border rounded px-3 py-2 text-gray-700 focus:outline-none focus:border-primary"></textarea>
            </div>

            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2">Prix (€)</label>
                <input type="number" step="0.01" name="price" class="w-full border rounded px-3 py-2 text-gray-700 focus:outline-none focus:border-primary" required>
            </div>

            <div class="mb-6">
                <label class="block text-gray-700 text-sm font-bold mb-2">Image du produit</label>
                <input type="file" name="image" class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-white hover:file:bg-primary-dark" required>
                <p class="text-xs text-gray-500 mt-1">Format recommandé : Carré (ex: 800x800px), JPG ou PNG.</p>
            </div>

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