@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 flex flex-col gap-2">
            <div class="bg-slate-50 rounded shadow-sm border p-4 flex flex-col gap-3">
                @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.tinymce', [
                    '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 class="mb-auto grid gap-4">
                <div class="bg-slate-50 rounded shadow-sm border p-4">
                    <h2 class="text-lg mb-2">Référencement Google</h2>

                    <div class="flex flex-col flex-wrap">
                        <p class="text-lg text-blue-800">{{ config('app.name') }} - {{ $product?->title ?? "" }}</p>
                        <p class="text-sm text-green-700">{{ isset($product) ? route('produit', ['product' => $product]) : "" }}</p>
                        <p class="text-sm text-gray-600">{{ strip_tags(Str::limit(preg_replace("/<h([1-6]{1}).*>.*?<\/h\\1>/si", '', $product?->description ?? ""), 320)) }}</p>
                    </div>
                </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 class="bg-slate-50 rounded shadow-sm border p-4 grid gap-2">
                <h2>Icones</h2>

                @include('components.forms.inputs.checkbox', [
                    'id' => 'icons_secured_payment',
                    'old' => 'icons.secured_payment',
                    'name' => 'icons[secured_payment]',
                    'label' => "Paiement sécurisé",
                    'value' => isset($product->icons['secured_payment']) && $product->icons['secured_payment']
                ])

                @include('components.forms.inputs.checkbox', [
                    'id' => 'icons_made_in_france',
                    'old' => 'icons.made_in_france',
                    'name' => 'icons[made_in_france]',
                    'label' => "Fabriqué en France",
                    'value' => isset($product->icons['made_in_france']) && $product->icons['made_in_france']
                ])

                @include('components.forms.inputs.checkbox', [
                    'id' => 'icons_click_collect',
                    'old' => 'icons.click_collect',
                    'name' => 'icons[click_collect]',
                    'label' => "Click & Collect",
                    'value' => isset($product->icons['click_collect']) && $product->icons['click_collect']
                ])
            </div>

            <div class="bg-slate-50 rounded shadow-sm border p-4 grid gap-2">
                <h2>Dimensions</h2>

                @include('components.forms.inputs.classic-light', [
                    'id' => 'length',
                    'label' => 'Longueur',
                    'value' => $product?->length ?? null
                ])

                @include('components.forms.inputs.classic-light', [
                    'id' => 'width',
                    'label' => 'Largeur',
                    'value' => $product?->width ?? null
                ])

                @include('components.forms.inputs.classic-light', [
                    'id' => 'height',
                    'label' => 'Hauteur',
                    'value' => $product->height ?? 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