@extends('layouts.admin.base')

@section('page.title', isset($product) ? 'Édition d\'un produit' : 'Création d\'un produit')

@section('page.content')
    <div class="flex mb-4">
        <a href="{{ route('admin.products.list') }}" class="px-3 py-1 text-sm bg-gray-600 text-white rounded shadow"><i class="bi bi-arrow-left"></i> Retour</a>

        @isset($product)
            <a href="{{ route('admin.products.delete', ['product' => $product]) }}" class="px-3 py-1 text-sm bg-red-600 text-white rounded shadow ml-2">Supprimer</a>
        @endisset
    </div>

    <form action="{{ isset($product) ? route('admin.products.update', ['product' => $product]) : route('admin.products.store') }}" method="POST" class="grid md:grid-cols-3 gap-4">
        @csrf

        <div class="md:col-span-2 mb-auto grid gap-4">
            <div class="bg-slate-50 rounded shadow-sm border p-4">
                @include('components.forms.inputs.classic-light', [
                    'id' => 'title',
                    'label' => 'Titre',
                    'value' => $product->title ?? null
                ])

                @include('components.forms.inputs.classic-light', [
                    'id' => 'quantity',
                    'type' => 'number',
                    'label' => 'Quantité en stock',
                    'value' => $product->quantity ?? null
                ])

                <div class="grid md:grid-cols-2 md:gap-4">
                    @include('components.forms.inputs.price', [
                        'id' => 'price',
                        'label' => 'Prix',
                        'value' => $product->price ?? null
                    ])

                    @include('components.forms.inputs.price', [
                        'id' => 'promo_price',
                        'label' => 'Prix en promo',
                        'value' => $product->promo_price ?? null
                    ])
                </div>
            </div>
            <div class="bg-slate-50 rounded shadow-sm border p-4">
                @include('components.forms.inputs.textarea-light', [
                    'id' => 'description',
                    'label' => "Description",
                    'value' => $product->description ?? null
                ])
            </div>

            <div class="mb-auto grid gap-4">
                <div class="bg-slate-50 rounded shadow-sm border p-4">
                    <h2 class="text-lg mb-2">Images</h2>

                    @include('components.forms.inputs.images', [
                        'id' => 'images',
                        'images' => $product->images ?? []
                    ])
                </div>
            </div>
        </div>

        <div class="mb-auto grid gap-4">
            <div class="bg-slate-50 rounded shadow-sm border p-4">
                @include('components.forms.inputs.checkbox', [
                    'id' => 'isBestSeller',
                    'label' => "Meilleures ventes",
                    'value' => $product->isBestSeller ?? null
                ])
            </div>
        </div>

        {{-- Bottom --}}
        <div class="md:col-span-3 border-t mt-4 pt-4 flex">
            <button type="submit" class="bg-green-500 text-white px-3 py-1 rounded shadow">Sauvegarder</button>
        </div>
    </form>
@endsection