@extends('layouts.portal')

@section('title', ($menu->title ?? __('menus.title')) . ' — ' . config('app.name'))
@section('page_title', $menu->title ?? $menu->dietType?->name)
@section('page_subtitle', $menu->patient?->full_name . ' · ' . $menu->starts_on?->format('Y-m-d') . ' · ' . $menu->duration_days . ' ' . __('common.days'))

@section('page_actions')
    @unless ($menu->isIssued())
        <form method="POST" action="{{ route('portal.menus.issue', $menu) }}">
            @csrf
            <button type="submit" class="btn-brand !px-5 !py-2.5 text-sm">{{ __('menus.issue') }}</button>
        </form>
    @endunless
    <a href="{{ route('portal.reviewers.show', $menu->patient_id) }}" class="btn-ghost !px-5 !py-2.5 text-sm no-underline">{{ __('common.back') }}</a>
@endsection

@section('content')

    {{-- Calorie & macro preview — editable after generation. Daily EER
         (target_calories) and the protein/carbs/fat split can be nudged by
         the consultant without regenerating the whole meal structure; the
         split is entered as percentages and must add up to 100%, mirroring
         the onsite-consultation wizard's macro sliders. Grams shown here
         and saved to the menu are recomputed from calories × percent
         (protein/carbs at 4 kcal/g, fat at 9 kcal/g) — same formulas as
         NutritionCalculator::macros(). --}}
    @php
        $proteinPercent = $menu->target_calories > 0 ? round(($menu->protein_g * 4 / $menu->target_calories) * 100) : 25;
        $carbsPercent = $menu->target_calories > 0 ? round(($menu->carbs_g * 4 / $menu->target_calories) * 100) : 45;
        $fatPercent = $menu->target_calories > 0 ? round(($menu->fat_g * 9 / $menu->target_calories) * 100) : 30;
    @endphp
    <section class="card-sc" id="targetsCard">
        <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
            <h2 class="text-lg">{{ __('patients.nutrition_preview') }}</h2>
            <button type="button" id="targetsEditToggle" class="btn-ghost !px-4 !py-2 text-sm">{{ __('menus.edit_targets') }}</button>
        </div>

        @error('macro_percent')
            <p class="field-error mb-3">{{ $message }}</p>
        @enderror

        {{-- Read-only view --}}
        <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4" id="targetsView">
            <div class="stat-card border-brand-200 bg-brand-50">
                <p class="text-sm font-semibold text-brand-700">{{ __('patients.target_calories') }}</p>
                <p class="numeric mt-1 text-2xl font-extrabold text-brand-700">{{ number_format($menu->target_calories) }}</p>
            </div>
            @foreach ([['protein', $menu->protein_g, $proteinPercent], ['carbs', $menu->carbs_g, $carbsPercent], ['fat', $menu->fat_g, $fatPercent]] as [$label, $value, $pct])
                <div class="stat-card">
                    <p class="text-sm font-semibold text-ink-500">{{ __('patients.' . $label) }}</p>
                    <p class="numeric mt-1 text-2xl font-extrabold text-ink-900">{{ $value }}{{ __('common.grams') }}</p>
                    <p class="text-xs text-ink-400">{{ $pct }}%</p>
                </div>
            @endforeach
        </div>

        {{-- Edit form --}}
        <form method="POST" action="{{ route('portal.menus.targets.update', $menu) }}" id="targetsForm" class="hidden mt-2">
            @csrf
            @method('PATCH')

            <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
                <div>
                    <label for="target_calories" class="field-label">{{ __('menus.daily_eer') }}</label>
                    <input type="number" id="target_calories" name="target_calories" min="800" max="6000" step="1"
                           class="field-input" value="{{ old('target_calories', $menu->target_calories) }}">
                    @error('target_calories')<p class="field-error">{{ $message }}</p>@enderror
                </div>
                @foreach ([['protein', $proteinPercent, $menu->protein_g], ['carbs', $carbsPercent, $menu->carbs_g], ['fat', $fatPercent, $menu->fat_g]] as [$macro, $pct, $grams])
                    <div>
                        <label for="{{ $macro }}_percent" class="field-label">{{ __('patients.' . $macro) }} (%)</label>
                        <input type="number" id="{{ $macro }}_percent" name="{{ $macro }}_percent" min="0" max="100" step="1"
                               class="field-input macro-percent-input" value="{{ old($macro . '_percent', $pct) }}"
                               data-macro="{{ $macro }}">
                        <p class="mt-1 text-xs text-ink-400">
                            <span id="{{ $macro }}_grams_preview">{{ $grams }}</span>{{ __('common.grams') }}
                        </p>
                    </div>
                @endforeach
            </div>

            <p class="mt-3 text-sm" id="macroSumHint">
                {{ __('menus.macro_split') }}: <span id="macroSumTotal">100</span>%
            </p>

            <div class="mt-3 flex gap-3">
                <button type="submit" id="targetsSaveBtn" class="btn-brand !px-5 !py-2.5 text-sm">{{ __('menus.save_targets') }}</button>
                <button type="button" id="targetsCancelBtn" class="btn-ghost !px-5 !py-2.5 text-sm">{{ __('common.cancel') }}</button>
            </div>
        </form>
    </section>

    <script>
        (function () {
            var view = document.getElementById('targetsView');
            var form = document.getElementById('targetsForm');
            var toggleBtn = document.getElementById('targetsEditToggle');
            var cancelBtn = document.getElementById('targetsCancelBtn');
            var saveBtn = document.getElementById('targetsSaveBtn');
            var caloriesInput = document.getElementById('target_calories');
            var percentInputs = Array.prototype.slice.call(document.querySelectorAll('.macro-percent-input'));
            var sumTotal = document.getElementById('macroSumTotal');
            var sumHint = document.getElementById('macroSumHint');

            function showForm(show) {
                view.classList.toggle('hidden', show);
                form.classList.toggle('hidden', !show);
                toggleBtn.classList.toggle('hidden', show);
            }

            function recalc() {
                var calories = parseFloat(caloriesInput.value) || 0;
                var sum = 0;

                percentInputs.forEach(function (input) {
                    var pct = parseFloat(input.value) || 0;
                    sum += pct;

                    var macro = input.dataset.macro;
                    var grams = macro === 'fat'
                        ? Math.round((calories * pct / 100) / 9)
                        : Math.round((calories * pct / 100) / 4);

                    var preview = document.getElementById(macro + '_grams_preview');
                    if (preview) preview.textContent = grams;
                });

                sum = Math.round(sum * 100) / 100;
                sumTotal.textContent = sum;

                var isValid = sum === 100;
                sumHint.classList.toggle('text-red-600', !isValid);
                sumHint.classList.toggle('font-semibold', !isValid);
                sumHint.classList.toggle('text-ink-500', isValid);
                saveBtn.disabled = !isValid;
                saveBtn.classList.toggle('opacity-50', !isValid);
                saveBtn.classList.toggle('cursor-not-allowed', !isValid);
            }

            toggleBtn.addEventListener('click', function () { showForm(true); recalc(); });
            cancelBtn.addEventListener('click', function () { showForm(false); });
            caloriesInput.addEventListener('input', recalc);
            percentInputs.forEach(function (input) { input.addEventListener('input', recalc); });

            @if ($errors->has('macro_percent') || $errors->has('target_calories'))
                showForm(true);
                recalc();
            @endif
        })();
    </script>

    {{-- Day by day --}}
    <div class="mt-5 space-y-4">
        @foreach ($menu->structure ?? [] as $index => $day)
            @php $total = $totals[$index] ?? null; @endphp
            <section class="card-sc">
                <div class="mb-4 flex flex-wrap items-center justify-between gap-3 border-b border-ink-100 pb-4">
                    <h2 class="text-lg">
                        {{ __('common.day') }} <span class="numeric">{{ $day['day'] }}</span>
                        <span class="ms-2 text-sm font-normal text-ink-400">
                            {{ $menu->starts_on?->copy()->addDays($day['day'] - 1)->format('D, d M') }}
                        </span>
                    </h2>
                    @if ($total)
                        <div class="numeric flex flex-wrap gap-4 text-sm font-semibold">
                            <span class="text-brand-700">{{ number_format($total['calories']) }} {{ __('common.kcal') }}</span>
                            <span class="text-ink-500">{{ $total['protein_g'] }}{{ __('common.grams') }} {{ __('patients.protein') }}</span>
                            <span class="text-ink-500">{{ $total['carbs_g'] }}{{ __('common.grams') }} {{ __('patients.carbs') }}</span>
                            <span class="text-ink-500">{{ $total['fat_g'] }}{{ __('common.grams') }} {{ __('patients.fat') }}</span>
                        </div>
                    @endif
                </div>

                <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
                    @foreach ($day['meals'] as $meal)
                        <div class="rounded-2xl border border-ink-100 p-4">
                            <div class="mb-3 flex items-baseline justify-between">
                                <h3 class="text-base">{{ __('menus.slots.' . $meal['slot']) }}</h3>
                                <span class="numeric text-sm font-bold text-brand-700">{{ $meal['target_calories'] }} {{ __('common.kcal') }}</span>
                            </div>

                            <ul class="list-none space-y-2 ps-0">
                                @forelse ($meal['items'] as $item)
                                    @php
                                        // Shows both languages when the saved item has them (every
                                        // menu generated since bilingual names were added); falls
                                        // back to whichever single name an older/manually-edited
                                        // item happens to carry.
                                        $itemName = collect([$item['name_en'] ?? null, $item['name_ar'] ?? null])
                                            ->filter()
                                            ->unique()
                                            ->implode(' / ');
                                        if ($itemName === '') {
                                            $itemName = $item['name'] ?? (app()->getLocale() === 'ar' ? ($item['name_ar'] ?? null) : ($item['name_en'] ?? null));
                                        }
                                    @endphp
                                    <li class="flex items-start justify-between gap-3 text-sm">
                                        <div>
                                            <span class="font-semibold text-ink-800">{{ $itemName }}</span>
                                            <span class="numeric block text-xs text-ink-400">
                                                {{ $item['protein_g'] }}P · {{ $item['carbs_g'] }}C · {{ $item['fat_g'] }}F
                                            </span>
                                        </div>
                                        <span class="numeric shrink-0 font-bold text-ink-600">{{ $item['grams'] }}{{ ($item['unit'] ?? null) === 'ml' ? __('common.ml') : __('common.grams') }}</span>
                                    </li>
                                @empty
                                    <li class="text-sm text-ink-400">{{ __('common.no_results') }}</li>
                                @endforelse
                            </ul>
                        </div>
                    @endforeach
                </div>
            </section>
        @endforeach
    </div>

    {{-- Email the full menu (targets, per-day totals, every meal with its
         component breakdown and a calorie bar) straight to the visitor. --}}
    <section class="card-sc mt-5">
        <h2 class="mb-3 text-lg">{{ __('menus.email_menu') }}</h2>
        <form method="POST" action="{{ route('portal.menus.email', $menu) }}" class="flex flex-wrap items-end gap-3">
            @csrf
            <div class="flex-1" style="min-width:220px;">
                <label for="email_to" class="field-label">{{ __('patients.email') }}</label>
                <input id="email_to" name="email" type="email" required class="field-input"
                       value="{{ old('email', $menu->patient?->email) }}" placeholder="{{ __('menus.email_missing') }}">
                @error('email')<p class="field-error">{{ $message }}</p>@enderror
            </div>
            <button type="submit" class="btn-brand !px-5 !py-2.5 text-sm">{{ __('menus.email_menu') }}</button>
        </form>
    </section>

    @can('delete', $menu->patient)
        <form method="POST" action="{{ route('portal.menus.destroy', $menu) }}" class="mt-5" data-confirm="{{ __('common.confirm_delete') }}">
            @csrf
            @method('DELETE')
            <button type="submit" class="text-sm font-semibold text-red-600 underline">{{ __('common.delete') }}</button>
        </form>
    @endcan
@endsection