{{-- Portion photos: four boxes, each a photo of one amount of this
     component with what it equals (a number and a unit, written out as
     "≈ 25 حبة" / "about 25 almonds") and its carbs, worked out from the
     amount and the carbs per reference quantity above (and kept up to date
     as those change). Empty boxes are fine.
     Expects $component and $portionPhotos (keyed by slot). --}}
<style>
    .pp-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .pp-box { border: 1px solid #E8E7E4; border-radius: 16px; padding: 12px; background: #fff; }
    .pp-title { margin: 0 0 8px; font-size: .8rem; font-weight: 700; color: #2E5D78; }
    .pp-photo {
        position: relative; display: flex; align-items: center; justify-content: center;
        aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #fff; border: 1px dashed #D9D6CF;
    }
    .pp-photo img { width: 100%; height: 100%; object-fit: contain; }
    .pp-photo.is-removed img { opacity: .25; }
    .pp-empty { font-size: .75rem; color: #AFABA1; }
    .pp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
    .pp-actions label { cursor: pointer; }
    .pp-remove { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; color: #B42318; }
    .pp-qty { display: flex; align-items: center; gap: 6px; }
    .pp-unit { font-size: .8rem; color: #837D70; }
    .pp-equivalent { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 6px; }
    .pp-approx { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: .75rem; color: #5F5A50; cursor: pointer; }
    .pp-preview { margin: 6px 0 0; font-size: .75rem; color: #837D70; }
    .pp-carbs { margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: #F2F6E9; color: #3B5A20; font-size: .8rem; font-weight: 700; }
    .pp-box .field-label { margin-top: 6px; }
    .pp-piece { max-width: 22rem; margin-bottom: 12px; }
</style>

<h3 class="mb-1 mt-6 text-sm font-bold text-ink-900">{{ __('admin_components.section_portions') }}</h3>
<p class="mb-3 text-xs text-ink-400">{{ __('admin_components.portions_hint') }}</p>

<div class="pp-piece">
    <label class="field-label" for="piece_name_en">{{ __('admin_components.piece_name_en') }}</label>
    <input id="piece_name_en" name="piece_name_en" type="text" dir="ltr" maxlength="60" value="{{ old('piece_name_en', $component->piece_name_en) }}" class="field-input" placeholder="almond" data-piece-name>
    <p class="mt-1 text-xs text-ink-400">{{ __('admin_components.piece_name_en_hint') }}</p>
    @error('piece_name_en')<p class="text-xs text-red-600">{{ $message }}</p>@enderror
</div>

<div class="pp-grid" data-portions
     data-grams="{{ __('common.grams') }}" data-ml="{{ __('common.ml') }}" data-carbs="{{ __('admin_components.portion_carbs_unit') }}"
     data-forms='@json(\App\Support\PortionEquivalent::ARABIC)'
     data-saved-piece="{{ $component->piece_name_en ?: 'piece' }}" data-saved-piece-plural="{{ \Illuminate\Support\Str::plural($component->piece_name_en ?: 'piece') }}">
    @foreach (\App\Models\Component::PORTION_SLOTS as $slot)
        @php
            $photo = $portionPhotos->get($slot);
            $field = "portions.{$slot}";
            $figure = fn (?float $value) => $value !== null ? rtrim(rtrim(number_format($value, 2, '.', ''), '0'), '.') : null;
            $quantity = old("{$field}.quantity", $figure($photo?->portion));
            $equivalentAmount = old("{$field}.equivalent_amount", $figure($photo?->equivalent_amount));
            $equivalentUnit = old("{$field}.equivalent_unit", $photo?->equivalent_unit);
            $approx = session()->hasOldInput() ? (bool) old("{$field}.equivalent_approx") : (bool) $photo?->equivalent_approx;
            // Older free text that isn't a number and a unit is shown until one is picked.
            $legacy = $photo && ! $photo->equivalent_unit ? $photo : null;
        @endphp
        <div class="pp-box" data-portion>
            <p class="pp-title">{{ __('admin_components.portion_box', ['n' => $slot]) }}</p>

            <div class="pp-photo" data-photo>
                <img src="{{ $photo ? \App\Services\RecipeMenuService::mediaUrl('components', $photo->image_path) : '' }}" alt="" @unless ($photo) hidden @endunless data-preview>
                <span class="pp-empty" @if ($photo) hidden @endif data-empty>{{ __('admin_components.portion_no_photo') }}</span>
            </div>

            <div class="pp-actions">
                <label class="btn-soft">
                    <span data-upload-label>{{ $photo ? __('admin_components.portion_change') : __('admin_components.portion_upload') }}</span>
                    <input type="file" name="portions[{{ $slot }}][image]" accept="image/png,image/jpeg,image/webp" hidden data-file>
                </label>
                @if ($photo)
                    <label class="pp-remove">
                        <input type="checkbox" name="portions[{{ $slot }}][remove]" value="1" @checked(old("{$field}.remove")) data-remove>
                        {{ __('admin_components.portion_remove') }}
                    </label>
                @endif
            </div>
            @error("{$field}.image")<p class="text-xs text-red-600">{{ $message }}</p>@enderror

            <label class="field-label" for="portion-{{ $slot }}-quantity">{{ __('admin_components.portion_quantity') }}</label>
            <div class="pp-qty">
                <input id="portion-{{ $slot }}-quantity" name="portions[{{ $slot }}][quantity]" type="number" step="0.1" min="0" dir="ltr" value="{{ $quantity }}" class="field-input" placeholder="30" data-quantity>
                <span class="pp-unit" data-unit></span>
            </div>
            @error("{$field}.quantity")<p class="text-xs text-red-600">{{ $message }}</p>@enderror

            <label class="field-label" for="portion-{{ $slot }}-equivalent">{{ __('admin_components.portion_equivalent') }}</label>
            <div class="pp-equivalent">
                <input id="portion-{{ $slot }}-equivalent" name="portions[{{ $slot }}][equivalent_amount]" type="number" step="0.25" min="0.25" dir="ltr" value="{{ $equivalentAmount }}" class="field-input"
                       placeholder="{{ __('admin_components.portion_equivalent_count') }}" aria-label="{{ __('admin_components.portion_equivalent_count') }}" data-eq-amount>
                <select name="portions[{{ $slot }}][equivalent_unit]" class="field-input" aria-label="{{ __('admin_components.portion_equivalent') }}" data-eq-unit>
                    <option value="">{{ __('admin_components.portion_equivalent_none') }}</option>
                    @foreach (\App\Support\PortionEquivalent::UNITS as $unit)
                        <option value="{{ $unit }}" @selected($equivalentUnit === $unit)>{{ __("admin_components.equivalent_units.{$unit}") }}</option>
                    @endforeach
                </select>
            </div>
            <label class="pp-approx">
                <input type="checkbox" name="portions[{{ $slot }}][equivalent_approx]" value="1" @checked($approx) data-eq-approx>
                {{ __('admin_components.portion_equivalent_approx') }}
            </label>
            <p class="pp-preview" data-eq-preview data-legacy-ar="{{ $legacy?->equivalent_ar }}" data-legacy-en="{{ $legacy?->equivalent_en }}">
                <span dir="rtl">{{ $photo?->equivalent_ar ?? '—' }}</span>@if ($photo?->equivalent_en) · <span dir="ltr">{{ $photo->equivalent_en }}</span>@endif
            </p>
            @error("{$field}.equivalent_amount")<p class="text-xs text-red-600">{{ $message }}</p>@enderror
            @error("{$field}.equivalent_unit")<p class="text-xs text-red-600">{{ $message }}</p>@enderror

            <div class="pp-carbs">{{ __('admin_components.portion_carbs') }}: <span data-carbs-value>—</span></div>
        </div>
    @endforeach
</div>

<script>
    (() => {
        const root = document.querySelector('[data-portions]');
        if (!root) return;

        const form = root.closest('form');
        const field = (name) => form.querySelector(`[name="${name}"]`);
        const number = (input) => parseFloat(input?.value);

        // Carbs in each box's amount: amount ÷ reference quantity × carbs per reference.
        const refresh = () => {
            const unit = field('reference_unit')?.value === 'ml' ? root.dataset.ml : root.dataset.grams;
            const reference = number(field('reference_quantity'));
            const carbs = number(field('carbs_g'));

            root.querySelectorAll('[data-portion]').forEach((box) => {
                const amount = number(box.querySelector('[data-quantity]'));
                box.querySelector('[data-unit]').textContent = unit;
                const value = box.querySelector('[data-carbs-value]');
                value.textContent = '—';
                if (amount > 0 && reference > 0 && carbs >= 0) {
                    // Only the figure is left-to-right, so Arabic reads "3 غ كارب".
                    const figure = document.createElement('span');
                    figure.dir = 'ltr';
                    figure.textContent = Math.round(amount / reference * carbs * 10) / 10;
                    value.replaceChildren(figure, ` ${root.dataset.carbs}`);
                }
            });
        };

        // The equivalent as it will be saved — the same wording as
        // App\Support\PortionEquivalent, which writes the stored text.
        const forms = JSON.parse(root.dataset.forms);
        const pieceName = form.querySelector('[data-piece-name]');
        const figure = (amount) => {
            const whole = Math.floor(amount);
            const fraction = { 0: '', 0.25: '¼', 0.5: '½', 0.75: '¾' }[Math.round((amount - whole) * 100) / 100];
            if (fraction === undefined) return String(Math.round(amount * 100) / 100);
            return (whole > 0 || fraction === '' ? String(whole) : '') + fraction;
        };
        const arabic = (amount, unit, approx) => {
            const words = forms[unit];
            const count = Math.trunc(amount);
            const tens = count % 100;
            let text = `${count} ${words.noun}`;
            if (amount !== count) text = `${figure(amount)} ${words.noun}`;
            else if (count === 1) text = words.one;
            else if (count === 2) text = words.two;
            else if (tens >= 3 && tens <= 10) text = `${count} ${words.few}`;
            else if (tens >= 11) text = `${count} ${words.many}`;
            return (approx ? '≈ ' : '') + text;
        };
        const plural = (word) => {
            if (word === root.dataset.savedPiece) return root.dataset.savedPiecePlural;
            if (/(s|x|z|ch|sh)$/i.test(word)) return `${word}es`;
            if (/[^aeiou]y$/i.test(word)) return `${word.slice(0, -1)}ies`;
            if (/(?:[^f]fe|[lr]f)$/i.test(word)) return word.replace(/fe?$/i, 'ves');
            return `${word}s`;
        };
        const english = (amount, unit, approx) => {
            const singular = unit === 'piece' ? (pieceName?.value.trim() || 'piece') : unit;
            const noun = unit === 'tbsp' || unit === 'tsp' || amount <= 1 ? singular : plural(singular);
            return `${approx ? 'about ' : ''}${figure(amount)} ${noun}`;
        };
        const preview = (box) => {
            const amount = number(box.querySelector('[data-eq-amount]'));
            const unit = box.querySelector('[data-eq-unit]').value;
            const approx = box.querySelector('[data-eq-approx]').checked;
            const output = box.querySelector('[data-eq-preview]');
            const ar = amount > 0 && unit ? arabic(amount, unit, approx) : (output.dataset.legacyAr || '—');
            const en = amount > 0 && unit ? english(amount, unit, approx) : output.dataset.legacyEn;
            const arabicText = Object.assign(document.createElement('span'), { dir: 'rtl', textContent: ar });
            const englishText = Object.assign(document.createElement('span'), { dir: 'ltr', textContent: en || '' });
            output.replaceChildren(arabicText, ...(en ? [' · ', englishText] : []));
        };

        root.querySelectorAll('[data-portion]').forEach((box) => {
            const photoPreview = box.querySelector('[data-preview]');

            box.querySelector('[data-file]').addEventListener('change', (event) => {
                const [file] = event.target.files;
                if (!file) return;
                photoPreview.src = URL.createObjectURL(file);
                photoPreview.hidden = false;
                box.querySelector('[data-empty]').hidden = true;
                const remove = box.querySelector('[data-remove]');
                if (remove) remove.checked = false;
                box.querySelector('[data-photo]').classList.remove('is-removed');
            });

            const remove = box.querySelector('[data-remove]');
            const markRemoved = () => box.querySelector('[data-photo]').classList.toggle('is-removed', remove.checked);
            remove?.addEventListener('change', markRemoved);
            if (remove) markRemoved();

            box.querySelector('[data-quantity]').addEventListener('input', refresh);
            ['[data-eq-amount]', '[data-eq-unit]', '[data-eq-approx]'].forEach((selector) => {
                box.querySelector(selector).addEventListener('input', () => preview(box));
                box.querySelector(selector).addEventListener('change', () => preview(box));
            });
            preview(box);
        });

        pieceName?.addEventListener('input', () => root.querySelectorAll('[data-portion]').forEach(preview));

        ['reference_quantity', 'reference_unit', 'carbs_g'].forEach((name) => {
            field(name)?.addEventListener('input', refresh);
            field(name)?.addEventListener('change', refresh);
        });

        refresh();
    })();
</script>