@extends('layouts.portal')

@php
    // Every menu renders as recipe cards; one built from the recipe library
    // (RecipeMenuService) also has a whole dish per meal and can be re-rolled.
    $isRecipeMenu = ($menu->generation_input['source'] ?? null) === \App\Services\RecipeMenuService::SOURCE;
@endphp

@push('head')
    @include('portal.menus._recipe-styles')
@endpush

@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())
        @if ($isRecipeMenu)
            <form method="POST" action="{{ route('portal.recipe-menus.regenerate', $menu) }}">
                @csrf
                <button type="submit" class="btn-ghost !px-5 !py-2.5 text-sm">{{ __('menus.recipes.regenerate') }}</button>
            </form>
        @endif
        <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 ($days as $index => $day)
            @php $total = $totals[$index] ?? null; @endphp
            {{-- Meals are cards of their own, so the day isn't boxed. --}}
            <section>
                <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)
                        {{-- Only the figures are LTR; each label stays in the page's
                             direction so Arabic reads "136.5 جم بروتين", not reversed. --}}
                        <div class="flex flex-wrap gap-2 text-sm font-semibold">
                            <span class="badge-sc bg-brand-50 text-brand-700"><span class="numeric">{{ number_format($total['calories']) }}</span>&nbsp;{{ __('common.kcal') }}</span>
                            @foreach (['protein', 'carbs', 'fat'] as $macro)
                                <span class="badge-sc bg-ink-50 text-ink-600"><span class="numeric">{{ $total[$macro . '_g'] }}</span>{{ __('common.grams') }}&nbsp;{{ __('patients.' . $macro) }}</span>
                            @endforeach
                            <span class="badge-sc bg-ink-50 text-ink-600"><span class="numeric">{{ round(collect($day['meals'])->flatMap(fn ($m) => $m['items'])->sum('fiber_g'), 1) }}</span>{{ __('common.grams') }}&nbsp;{{ __('menus.recipes.fiber') }}</span>
                        </div>
                    @endif
                </div>

                @once
                    @include('portal.menus._recipe-icons')
                @endonce
                @if (! empty($day['warnings']))
                    <div class="mb-4 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
                        @foreach ($day['warnings'] as $warning)
                            <p class="m-0">{{ $warning }}</p>
                        @endforeach
                    </div>
                @endif
                <div class="space-y-5">
                    @foreach ($day['meals'] as $meal)
                        @include('portal.menus._recipe-meal', ['meal' => $meal, 'menu' => $menu, 'isRecipeMenu' => $isRecipeMenu])
                    @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