{{-- Formulaire partagé d'un plat (ajout / édition). Attend $item (peut être null). --}}
@php
    $item = $item ?? null;

    // Suppléments déjà enregistrés sur le plat, indexés par clé pour le pré-remplissage.
    $selectedSupplements = collect($item?->supplements ?? [])->keyBy('key');
@endphp

<style>
    .resto-photo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 12px;
        margin-top: 12px;
    }
    .resto-photo-tile {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #eee;
        aspect-ratio: 4 / 3;
        background: #f6f6f6;
    }
    .resto-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .resto-photo-tile.is-deleted { opacity: .4; outline: 2px solid #d9534f; outline-offset: -2px; }
    .resto-photo-remove {
        position: absolute; top: 6px; right: 6px;
        width: 26px; height: 26px; border: none; border-radius: 50%;
        background: rgba(17,17,17,.85); color: #fff;
        font-size: 16px; line-height: 1; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
    }
    .resto-photo-remove:hover { background: #d9534f; }

    .resto-uploader {
        margin-top: 12px;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
        padding: 26px 20px;
        border: 2px dashed #d8cfa8;
        border-radius: 14px;
        background: #fbf9f0;
        color: #6b6350;
        cursor: pointer;
        text-align: center;
        transition: border-color .15s ease, background .15s ease;
    }
    .resto-uploader:hover, .resto-uploader.is-drag { border-color: #C3AD66; background: #f6efd8; }
    .resto-uploader i { font-size: 26px; color: #C3AD66; }
    .resto-uploader-title { font-weight: 700; color: #111; }
    .resto-uploader-hint { font-size: 12px; color: #999; }

    .resto-supp-hint { font-size: 12px; color: #999; margin: 2px 0 12px; }
    .resto-supp-cat { margin-bottom: 16px; }
    .resto-supp-cat-title {
        font-weight: 700; color: #111; font-size: 13px;
        text-transform: uppercase; letter-spacing: .04em;
        margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid #eee;
    }
    .resto-supp-items {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 8px 16px;
    }
    .resto-supp-row {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        padding: 6px 10px; border: 1px solid #eee; border-radius: 10px;
        background: #fafafa; cursor: pointer; user-select: none;
        transition: border-color .15s ease, background .15s ease;
    }
    .resto-supp-row:hover { border-color: #d8cfa8; }
    .resto-supp-row.is-on { border-color: #C3AD66; background: #fbf9f0; }
    .resto-supp-row:focus-visible { outline: 2px solid #C3AD66; outline-offset: 2px; }
    .resto-supp-input { display: none; }
    .resto-supp-name { display: flex; align-items: center; gap: 8px; font-weight: 500; color: #444; transition: color .15s ease; }
    .resto-supp-row.is-on .resto-supp-name { color: #111; font-weight: 600; }
    .resto-supp-price { display: flex; align-items: center; gap: 4px; opacity: .4; transition: opacity .15s ease; }
    .resto-supp-row.is-on .resto-supp-price { opacity: 1; }
    .resto-supp-price input { width: 74px; padding: 4px 6px; text-align: right; }
    .resto-supp-cur { font-size: 12px; color: #888; min-width: 30px; }

    .resto-delivery-items {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 8px 16px;
    }
    .resto-delivery-row {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px; border: 1px solid #eee; border-radius: 10px;
        background: #fafafa; cursor: pointer; user-select: none;
        font-weight: 500; color: #444;
        transition: border-color .15s ease, background .15s ease, color .15s ease;
    }
    .resto-delivery-row:hover { border-color: #d8cfa8; }
    .resto-delivery-row.is-on { border-color: #C3AD66; background: #fbf9f0; color: #111; font-weight: 600; }
    .resto-delivery-row:focus-visible { outline: 2px solid #C3AD66; outline-offset: 2px; }
    .resto-delivery-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: #C3AD66; pointer-events: none; }
    .resto-delivery-km { margin-top: 12px; max-width: 320px; }
    .resto-delivery-km[hidden] { display: none; }
    .resto-delivery-km label { display: block; margin-bottom: 4px; }
    .resto-delivery-km-input { display: flex; align-items: center; gap: 6px; }
    .resto-delivery-km-input input { width: 120px; }
    .resto-delivery-km-cur { font-size: 12px; color: #888; }
</style>

<div class="sm-grid">
    <div class="sm-field">
        <label for="name">{{ __('restaurant.dish_name') }}</label>
        <input type="text" id="name" name="name" value="{{ old('name', $item->name ?? '') }}" required>
    </div>

    <div class="sm-field">
        <label for="category">{{ __('restaurant.dish_category') }}</label>
        <input type="text" id="category" name="category" value="{{ old('category', $item->category ?? '') }}"
               placeholder="{{ __('restaurant.dish_category_placeholder') }}" required>
    </div>

    <div class="sm-field">
        <label for="price">{{ __('restaurant.dish_price') }}</label>
        <input type="number" step="0.01" min="0" id="price" name="price" value="{{ old('price', $item->price ?? '') }}" required>
    </div>

    <div class="sm-field">
        <label for="currency">{{ __('restaurant.dish_currency') }}</label>
        <select id="currency" name="currency" required>
            @foreach(config('currencies.available') as $code => $currency)
                <option value="{{ $code }}" @selected(old('currency', $item->currency ?? config('currencies.default')) === $code)>{{ currency_label($code) }}</option>
            @endforeach
        </select>
    </div>

    <div class="sm-field full">
        <label for="description">{{ __('restaurant.dish_description') }}</label>
        <textarea id="description" name="description" rows="4">{{ old('description', $item->description ?? '') }}</textarea>
    </div>

    <div class="sm-field full">
        <label>{{ __('restaurant.dish_supplements') }}</label>
        <p class="resto-supp-hint">{{ __('restaurant.dish_supplements_hint') }}</p>

        @php $suppCurrency = old('currency', $item->currency ?? config('currencies.default')); @endphp

        <div id="resto-supplements">
            @foreach(config('supplements.categories') as $catKey => $cat)
                <div class="resto-supp-cat">
                    <div class="resto-supp-cat-title">{{ \Illuminate\Support\Facades\Lang::has("supplements.categories.{$catKey}") ? __("supplements.categories.{$catKey}") : $cat['label'] }}</div>
                    <div class="resto-supp-items">
                        @foreach($cat['items'] as $itemKey => $label)
                            @php
                                $saved = $selectedSupplements->get($itemKey);
                                $isOn = old("supplements.{$itemKey}.enabled", $saved ? '1' : null);
                                $suppPrice = old("supplements.{$itemKey}.price", $saved['price'] ?? '');
                            @endphp
                            <div class="resto-supp-row {{ $isOn ? 'is-on' : '' }}"
                                 role="button" tabindex="0" aria-pressed="{{ $isOn ? 'true' : 'false' }}">
                                <input type="checkbox" class="resto-supp-input"
                                       name="supplements[{{ $itemKey }}][enabled]" value="1" @checked($isOn)>
                                <span class="resto-supp-name">{{ \Illuminate\Support\Facades\Lang::has("supplements.items.{$itemKey}") ? __("supplements.items.{$itemKey}") : $label }}</span>
                                <div class="resto-supp-price">
                                    <input type="number" step="0.01" min="0"
                                           name="supplements[{{ $itemKey }}][price]"
                                           value="{{ $suppPrice }}" placeholder="0.00">
                                    <span class="resto-supp-cur">{{ $suppCurrency }}</span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="sm-field full">
        <label>{{ __('restaurant.dish_delivery') }}</label>
        <p class="resto-supp-hint">{{ __('restaurant.dish_delivery_hint') }}</p>

        @php
            // Un champ caché accompagne chaque case : la clé est ainsi toujours
            // présente et `old()` reste fiable après une erreur de validation.
            $clickCollect = (bool) old('is_click_collect', $item->is_click_collect ?? false);
            $carrierDelivery = (bool) old('is_carrier_delivery', $item->is_carrier_delivery ?? false);
            $restaurantDelivery = (bool) old('is_restaurant_delivery', $item->is_restaurant_delivery ?? false);
            $pricePerKm = old('delivery_price_per_km', $item->delivery_price_per_km ?? '');
            $freeShipping = (bool) old('free_shipping', $item->free_shipping ?? false);
        @endphp

        <div id="resto-delivery">
            <div class="resto-delivery-items">
                <label class="resto-delivery-row {{ $clickCollect ? 'is-on' : '' }}">
                    <input type="hidden" name="is_click_collect" value="0">
                    <input type="checkbox" name="is_click_collect" value="1" @checked($clickCollect)>
                    <span>{{ __('restaurant.delivery_click_collect') }}</span>
                </label>

                <label class="resto-delivery-row {{ $carrierDelivery ? 'is-on' : '' }}">
                    <input type="hidden" name="is_carrier_delivery" value="0">
                    <input type="checkbox" name="is_carrier_delivery" value="1" @checked($carrierDelivery)>
                    <span>{{ __('restaurant.delivery_carrier') }}</span>
                </label>

                <label class="resto-delivery-row {{ $restaurantDelivery ? 'is-on' : '' }}">
                    <input type="hidden" name="is_restaurant_delivery" value="0">
                    <input type="checkbox" id="is_restaurant_delivery" name="is_restaurant_delivery" value="1"
                           @checked($restaurantDelivery)>
                    <span>{{ __('restaurant.delivery_by_restaurant') }}</span>
                </label>
            </div>

            {{-- Tarif kilométrique : visible uniquement si le restaurant livre lui-même. --}}
            <div class="resto-delivery-km" id="resto-delivery-km" @if(! $restaurantDelivery) hidden @endif>
                <label for="delivery_price_per_km">{{ __('restaurant.delivery_price_per_km') }}</label>
                <div class="resto-delivery-km-input">
                    <input type="number" step="0.01" min="0" id="delivery_price_per_km"
                           name="delivery_price_per_km" value="{{ $pricePerKm }}" placeholder="0.00">
                    <span class="resto-delivery-km-cur" id="resto-delivery-km-cur">{{ $suppCurrency }}/km</span>
                </div>
            </div>

            {{-- Livraison offerte : le client ne paie aucun frais de livraison. --}}
            <div class="resto-delivery-items" style="margin-top:12px;">
                <label class="resto-delivery-row {{ $freeShipping ? 'is-on' : '' }}">
                    <input type="hidden" name="free_shipping" value="0">
                    <input type="checkbox" name="free_shipping" value="1" @checked($freeShipping)>
                    <span><strong>{{ __('messages.free_shipping_option') }}</strong></span>
                </label>
            </div>
            <p class="resto-supp-hint">{{ __('messages.free_shipping_hint') }}</p>
        </div>
    </div>

    <div class="sm-field full">
        <label>{{ __('restaurant.dish_photos') }}</label>

        {{-- Photos déjà enregistrées (édition) : cliquer sur la croix les marque pour suppression --}}
        @if($item && $item->photos->isNotEmpty())
            <div class="resto-photo-grid" id="resto-existing-photos">
                @foreach($item->photos as $photo)
                    <div class="resto-photo-tile" data-photo-id="{{ $photo->id }}">
                        <img src="{{ asset('storage/' . $photo->path) }}" alt="{{ $item->name }}">
                        <button type="button" class="resto-photo-remove" title="{{ __('restaurant.remove_photo') }}">&times;</button>
                        <input type="checkbox" name="deleted_photos[]" value="{{ $photo->id }}" class="resto-photo-delete-input" hidden>
                    </div>
                @endforeach
            </div>
        @endif

        {{-- Uploader stylisé (multi-fichiers + glisser-déposer) --}}
        <label for="photos" class="resto-uploader" id="resto-dropzone">
            <i class="fa-light fa-images"></i>
            <span class="resto-uploader-title">{{ __('restaurant.choose_photos') }}</span>
            <span class="resto-uploader-hint">{{ __('restaurant.dish_photos_hint') }}</span>
        </label>
        <input type="file" id="photos" name="photos[]" accept="image/*" multiple hidden>

        {{-- Aperçu des photos à ajouter --}}
        <div class="resto-photo-grid" id="resto-preview"></div>
    </div>
</div>

<script>
    (function () {
        const input = document.getElementById('photos');
        const preview = document.getElementById('resto-preview');
        const dropzone = document.getElementById('resto-dropzone');
        if (!input) return;

        let files = [];

        function render() {
            preview.innerHTML = '';
            files.forEach(function (file, i) {
                const url = URL.createObjectURL(file);
                const tile = document.createElement('div');
                tile.className = 'resto-photo-tile';
                tile.innerHTML =
                    '<img src="' + url + '" alt="">' +
                    '<button type="button" class="resto-photo-remove" data-i="' + i + '">&times;</button>';
                preview.appendChild(tile);
            });
        }

        // Reflète la liste courante dans l'input réellement envoyé.
        function syncInput() {
            const dt = new DataTransfer();
            files.forEach(function (f) { dt.items.add(f); });
            input.files = dt.files;
        }

        input.addEventListener('change', function () {
            files = files.concat(Array.from(input.files));
            syncInput();
            render();
        });

        preview.addEventListener('click', function (e) {
            const btn = e.target.closest('.resto-photo-remove');
            if (!btn) return;
            files.splice(parseInt(btn.dataset.i, 10), 1);
            syncInput();
            render();
        });

        if (dropzone) {
            ['dragover', 'dragenter'].forEach(function (ev) {
                dropzone.addEventListener(ev, function (e) { e.preventDefault(); dropzone.classList.add('is-drag'); });
            });
            ['dragleave', 'drop'].forEach(function (ev) {
                dropzone.addEventListener(ev, function (e) { e.preventDefault(); dropzone.classList.remove('is-drag'); });
            });
            dropzone.addEventListener('drop', function (e) {
                const dropped = Array.from(e.dataTransfer.files).filter(function (f) { return f.type.indexOf('image/') === 0; });
                files = files.concat(dropped);
                syncInput();
                render();
            });
        }

        // Suppression / restauration des photos existantes.
        document.querySelectorAll('#resto-existing-photos .resto-photo-tile').forEach(function (tile) {
            const btn = tile.querySelector('.resto-photo-remove');
            const chk = tile.querySelector('.resto-photo-delete-input');
            btn.addEventListener('click', function () {
                chk.checked = !chk.checked;
                tile.classList.toggle('is-deleted', chk.checked);
            });
        });
    })();

    // Suppléments : révèle le prix au clic et reflète la devise choisie pour le plat.
    (function () {
        const wrap = document.getElementById('resto-supplements');
        if (!wrap) return;

        wrap.querySelectorAll('.resto-supp-row').forEach(function (row) {
            const chk = row.querySelector('.resto-supp-input');
            const price = row.querySelector('.resto-supp-price');

            function toggle() {
                chk.checked = !chk.checked;
                row.classList.toggle('is-on', chk.checked);
                row.setAttribute('aria-pressed', chk.checked ? 'true' : 'false');
            }

            row.addEventListener('click', function (e) {
                // Le champ prix reste éditable sans (dé)cocher le supplément.
                if (price && price.contains(e.target)) return;
                toggle();
            });

            row.addEventListener('keydown', function (e) {
                if (e.key === ' ' || e.key === 'Enter') {
                    e.preventDefault();
                    toggle();
                }
            });
        });

        const currencySelect = document.getElementById('currency');
        if (currencySelect) {
            currencySelect.addEventListener('change', function () {
                wrap.querySelectorAll('.resto-supp-cur').forEach(function (el) {
                    el.textContent = currencySelect.value;
                });
            });
        }
    })();

    // Livraison : surlignage des options cochées et affichage du tarif au km
    // quand le restaurant assure lui-même la livraison.
    (function () {
        const wrap = document.getElementById('resto-delivery');
        if (!wrap) return;

        wrap.querySelectorAll('.resto-delivery-row').forEach(function (row) {
            const chk = row.querySelector('input[type="checkbox"]');
            chk.addEventListener('change', function () {
                row.classList.toggle('is-on', chk.checked);
            });
        });

        const byRestaurant = document.getElementById('is_restaurant_delivery');
        const kmBlock = document.getElementById('resto-delivery-km');
        if (byRestaurant && kmBlock) {
            byRestaurant.addEventListener('change', function () {
                kmBlock.hidden = !byRestaurant.checked;
            });
        }

        const currencySelect = document.getElementById('currency');
        const kmCur = document.getElementById('resto-delivery-km-cur');
        if (currencySelect && kmCur) {
            currencySelect.addEventListener('change', function () {
                kmCur.textContent = currencySelect.value + '/km';
            });
        }
    })();
</script>