@php
    $item = $item ?? null;
    $submitLabel = $submitLabel ?? 'Enregistrer';
@endphp

@once
    @push('styles')
    <style>
        .food-stock-form-layout {
            display: grid;
            gap: 1rem;
        }

        .food-stock-form-card {
            border-radius: 1.25rem;
            border: 1px solid rgba(226, 232, 240, 0.9);
            background: #fff;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
        }

        .food-stock-field {
            width: 100%;
            border-radius: 0.9rem;
            border: 1px solid #e2e8f0;
            padding: 0.72rem 0.9rem;
            font-size: 0.92rem;
            line-height: 1.25rem;
        }

        .food-stock-field:focus {
            outline: none;
            border-color: #fb923c;
            box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.18);
        }

        .food-stock-side-card {
            position: sticky;
            top: calc(var(--site-nav-h, 70px) + 14px);
        }

        .food-stock-mini-note {
            border-radius: 1rem;
        }

        @media (max-width: 1024px) {
            .food-stock-side-card {
                position: static;
            }
        }

        @media (min-width: 1280px) {
            .food-stock-form-layout {
                grid-template-columns: minmax(0, 1.25fr) 320px;
            }
        }
    </style>
    @endpush
@endonce

@if($errors->any())
    <div class="mb-4 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
        <p class="font-semibold">Corrigez les champs en erreur.</p>
    </div>
@endif

<div class="food-stock-form-layout">
    <div class="space-y-4">
        <div class="food-stock-form-card p-4 sm:p-5">
            <div class="mb-4 flex items-center justify-between gap-3">
                <div>
                    <h2 class="text-base font-semibold text-slate-900 sm:text-lg">Article cuisine</h2>
                    <p class="mt-1 text-xs text-slate-500 sm:text-sm">Reserve au food uniquement.</p>
                </div>
                <span class="inline-flex items-center rounded-full bg-orange-50 px-2.5 py-1 text-xs font-semibold text-orange-700 sm:px-3">Stock cuisine</span>
            </div>

            <div class="grid gap-3 md:grid-cols-2">
                <div class="md:col-span-2">
                    <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">Nom *</label>
                    <input
                        type="text"
                        name="name"
                        value="{{ old('name', $item?->name) }}"
                        required
                        class="food-stock-field"
                        placeholder="Ex: Mozzarella rapee, Coca 33cl, Sauce burger"
                    >
                </div>

                <div>
                    <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">Categorie</label>
                    <select
                        name="category"
                        class="food-stock-field"
                    >
                        @foreach($categoryOptions as $value => $label)
                            <option value="{{ $value }}" @selected(old('category', $item?->category ?? 'ingredient') === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">Reference / SKU</label>
                    <input
                        type="text"
                        name="sku"
                        value="{{ old('sku', $item?->sku) }}"
                        class="food-stock-field"
                        placeholder="Optionnel"
                    >
                </div>

                <div class="md:col-span-2">
                    <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">Description</label>
                    <textarea
                        name="description"
                        rows="2"
                        class="food-stock-field"
                        style="min-height: 88px;"
                        placeholder="Notes internes, conditionnement, taille, marque..."
                    >{{ old('description', $item?->description) }}</textarea>
                </div>
            </div>
        </div>

        <div class="food-stock-form-card p-4 sm:p-5">
            <div class="mb-4">
                <h2 class="text-base font-semibold text-slate-900 sm:text-lg">Stock et cout</h2>
                <p class="mt-1 text-xs text-slate-500 sm:text-sm">Utilise l'unite la plus pratique pour la deduction: g, ml, dose, portion, piece. Exemple: gruyere en g, sauce en ml.</p>
            </div>

            <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
                <div>
                    <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">Stock actuel *</label>
                    <input
                        type="number"
                        name="quantity"
                        min="0"
                        step="0.001"
                        value="{{ old('quantity', $item?->quantity ?? 0) }}"
                        required
                        class="food-stock-field"
                    >
                </div>

                <div>
                    <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">Unite *</label>
                    <select
                        name="unit"
                        class="food-stock-field"
                    >
                        @foreach($unitOptions as $value => $label)
                            <option value="{{ $value }}" @selected(old('unit', $item?->unit ?? 'g') === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">Cout par unite *</label>
                    <div class="relative">
                        <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-sm font-semibold text-slate-400">€</span>
                        <input
                            type="number"
                            step="0.01"
                            min="0"
                            name="cost_per_unit"
                            id="foodStockCost"
                            value="{{ old('cost_per_unit', $item?->cost_per_unit) }}"
                            required
                            class="food-stock-field pl-8"
                            placeholder="0.00"
                        >
                    </div>
                    <p class="mt-1 text-xs text-slate-500">Exemple: si l'unite est `g`, mets le cout pour 1 g. Si l'unite est `piece`, mets le cout pour 1 piece.</p>
                </div>

                <div>
                    <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">Seuil alerte</label>
                    <input
                        type="number"
                        min="0"
                        step="0.001"
                        name="reorder_level"
                        value="{{ old('reorder_level', $item?->reorder_level ?? 0) }}"
                        class="food-stock-field"
                        placeholder="Ex: 500 g ou 12 pieces"
                    >
                </div>

                <div>
                    <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">Fournisseur</label>
                    <input
                        type="text"
                        name="supplier"
                        value="{{ old('supplier', $item?->supplier) }}"
                        class="food-stock-field"
                        placeholder="Metro, grossiste, cash and carry..."
                    >
                </div>

                <div class="md:col-span-2">
                    <label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">Emplacement</label>
                    <input
                        type="text"
                        name="location"
                        value="{{ old('location', $item?->location) }}"
                        class="food-stock-field"
                        placeholder="Frigo 1, reserve seche, congelateur, bar..."
                    >
                </div>
            </div>

            <input
                type="hidden"
                name="selling_price"
                id="foodStockSelling"
                value="{{ old('selling_price', $item?->selling_price ?? $item?->cost_per_unit) }}"
            >
        </div>
    </div>

    <div class="space-y-4 food-stock-side-card">
        <div class="food-stock-form-card overflow-hidden border-slate-900 bg-slate-950 p-4 text-white sm:p-5">
            <div class="mb-4">
                <h2 class="text-base font-semibold sm:text-lg">Resume rapide</h2>
                <p class="mt-1 text-xs text-slate-400 sm:text-sm">Lecture simple du cout et du niveau de stock.</p>
            </div>

            <div class="space-y-3">
                <div class="food-stock-mini-note rounded-2xl bg-white/5 px-4 py-3">
                    <p class="text-xs uppercase tracking-wide text-slate-400">Valeur stock</p>
                    <p class="mt-1 text-2xl font-bold text-white" id="foodStockValue">0.00 €</p>
                </div>
                <div class="food-stock-mini-note rounded-2xl bg-white/5 px-4 py-3">
                    <p class="text-xs uppercase tracking-wide text-slate-400">Cout par unite</p>
                    <p class="mt-1 text-2xl font-bold text-orange-300" id="foodStockUnitCost">0.00 €</p>
                </div>
                <div class="food-stock-mini-note rounded-2xl bg-white/5 px-4 py-3 text-sm leading-5 text-slate-300">
                    Ce stock est deduit automatiquement quand une commande passe en preparation cuisine.
                </div>
            </div>
        </div>

        <div class="food-stock-form-card border-orange-100 bg-orange-50 p-4 text-sm text-orange-900 sm:p-5">
            <p class="font-semibold">Conseil</p>
            <p class="mt-1.5 leading-5">Ne mets pas `kg` si ta recette consomme en `g`. Choisis directement l'unite la plus pratique pour tes fiches produit.</p>
        </div>
    </div>
</div>

<div class="mt-5 flex flex-col gap-2.5 sm:flex-row sm:justify-end">
    <a
        href="{{ route('prestataire.food-stock.index') }}"
        class="inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50"
    >
        Annuler
    </a>
    <button
        type="submit"
        class="inline-flex items-center justify-center rounded-2xl bg-orange-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-orange-600"
    >
        {{ $submitLabel }}
    </button>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const quantityInput = document.querySelector('[name="quantity"]');
    const costInput = document.getElementById('foodStockCost');
    const sellingInput = document.getElementById('foodStockSelling');
    const valueNode = document.getElementById('foodStockValue');
    const unitCostNode = document.getElementById('foodStockUnitCost');

    if (!quantityInput || !costInput || !valueNode || !unitCostNode) {
        return;
    }

    const formatCurrency = function (value) {
        return new Intl.NumberFormat('fr-FR', {
            style: 'currency',
            currency: 'EUR',
        }).format(value || 0);
    };

    const updateSummary = function () {
        const quantity = Number(quantityInput.value || 0);
        const cost = Number(costInput.value || 0);
        const stockValue = quantity * cost;

        valueNode.textContent = formatCurrency(stockValue);
        unitCostNode.textContent = formatCurrency(cost);
        if (sellingInput) {
            sellingInput.value = String(cost);
        }
    };

    [quantityInput, costInput].forEach(function (input) {
        input?.addEventListener('input', updateSummary);
    });

    updateSummary();
});
</script>
@endpush