@extends('layouts.admin')
@section('title', 'Nouveau produit')

@section('content')

<div class="mx-auto max-w-4xl space-y-6">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div class="flex items-start gap-3">
            <a href="{{ route('admin.produits.index') }}" class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-gray-200 bg-white text-gray-500 shadow-sm transition-colors hover:border-gray-300 hover:text-gray-800 hover:bg-gray-50" title="Retour à la liste">
                <i class="fas fa-arrow-left text-sm"></i>
            </a>
            <div>
                <h2 class="text-xl font-bold tracking-tight text-gray-900">Nouveau produit</h2>
                <p class="mt-1 text-sm text-gray-500">Renseignez les informations ci-dessous. Les champs marqués d’une astérisque sont obligatoires.</p>
            </div>
        </div>
    </div>

    <form action="{{ route('admin.produits.store') }}" method="POST" enctype="multipart/form-data" class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm">
        @csrf
        @include('admin.products._form')
        <div class="flex flex-col-reverse gap-3 border-t border-gray-100 bg-gray-50/90 px-6 py-5 sm:flex-row sm:items-center sm:justify-end sm:px-8">
            <a href="{{ route('admin.produits.index') }}" class="inline-flex justify-center rounded-xl border border-gray-200 bg-white px-5 py-3 text-sm font-semibold text-gray-700 shadow-sm transition-colors hover:bg-gray-50">
                Annuler
            </a>
            <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-xl bg-blue-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-blue-700">
                <i class="fas fa-save"></i> Créer le produit
            </button>
        </div>
    </form>
</div>

@endsection