@php
    /** @var \App\Models\Patient $reviewer */
    $activityLevels = array_keys(config('smartcarb.activity_levels'));
    $activityIcons = [
        'sedentary' => 'M4 20h16M6 20V10m4 10V4m4 16v-7m4 7V8',
        'lightly_active' => 'M13 5l7 7-7 7M5 5l7 7-7 7',
        'moderately_active' => 'M13 10V3L4 14h7v7l9-11h-7z',
        'very_active' => 'M12 4a8 8 0 100 16 8 8 0 000-16zm0 3v5l4 2',
    ];
    $activityMults = ['sedentary' => '1.0', 'lightly_active' => '1.5', 'moderately_active' => '1.7', 'very_active' => '1.8'];
    $goals = ['gluten_free', 'skin_radiance', 'heart_health', 'antioxidants', 'high_fiber', 'high_protein'];
    $dietIcons = [
        'diabetes' => 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z',
        'weight-loss' => 'M19 14l-7 7m0 0l-7-7m7 7V3',
        'keto' => 'M12 2s5 5.5 5 10a5 5 0 01-10 0c0-4.5 5-10 5-10z',
        'muscle-building' => 'M4 12h2m12 0h2M8 12a4 4 0 018 0m-8 0a4 4 0 004 4m0-4a4 4 0 014-4m-4 4a4 4 0 00-4-4',
        'maintain-weight' => 'M4.318 6.318a4.5 4.5 0 016.364 0L12 7.636l1.318-1.318a4.5 4.5 0 116.364 6.364L12 21 4.318 12.682a4.5 4.5 0 010-6.364z',
    ];
    $tagValue = fn (string $field) => implode(', ', old($field, $reviewer->{$field}) ?? []);
    $bmiCategoryLabels = collect(['underweight', 'normal', 'overweight', 'obese_1', 'obese_2', 'obese_3'])
        ->mapWithKeys(fn ($key) => [$key => __('patients.bmi_category.' . $key)]);
    $foodGroupLabels = collect(['main_carb', 'fruits', 'milks', 'rich_proteins', 'oils', 'other_fats'])
        ->mapWithKeys(fn ($key) => [$key => __('onsite.food_' . $key)]);
    $mealSlotLabels = collect(['breakfast', 'lunch', 'dinner'])
        ->mapWithKeys(fn ($key) => [$key => __('menus.slots.' . $key)]);
@endphp

<div class="space-y-5">

    {{-- Identity --}}
    <section class="card-sc">
        <h2 class="mb-4 text-lg">{{ __('patients.section_identity') }}</h2>
        <div class="grid gap-4 md:grid-cols-3">
            <div>
                <label for="file_number" class="field-label">{{ __('patients.file_number') }}</label>
                <input id="file_number" type="text" value="{{ old('file_number', $reviewer->file_number) }}" readonly disabled class="field-input bg-ink-50 text-ink-500">
            </div>
            <div>
                <label for="first_name" class="field-label">{{ __('patients.first_name') }}</label>
                <input id="first_name" name="first_name" type="text" value="{{ old('first_name', $reviewer->first_name) }}" class="field-input">
            </div>
            <div>
                <label for="last_name" class="field-label">{{ __('patients.last_name') }}</label>
                <input id="last_name" name="last_name" type="text" value="{{ old('last_name', $reviewer->last_name) }}" class="field-input">
            </div>

            <div>
                <label for="gender" class="field-label">{{ __('patients.gender') }}</label>
                <select id="gender" name="gender" class="field-input">
                    <option value="">{{ __('onsite.choose') }}</option>
                    @foreach (['male', 'female'] as $g)
                        <option value="{{ $g }}" @selected(old('gender', $reviewer->gender) === $g)>{{ __('common.' . $g) }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="date_of_birth" class="field-label">{{ __('patients.date_of_birth') }}</label>
                <input id="date_of_birth" name="date_of_birth" type="date"
                       value="{{ old('date_of_birth', $reviewer->date_of_birth?->format('Y-m-d')) }}" class="field-input">
            </div>
            <div>
                <label for="national_id" class="field-label">{{ __('patients.national_id') }}</label>
                <input id="national_id" name="national_id" type="text" value="{{ old('national_id', $reviewer->national_id) }}" class="field-input">
            </div>

            <div>
                <label for="phone" class="field-label">{{ __('patients.phone') }}</label>
                <input id="phone" name="phone" type="tel" dir="ltr" value="{{ old('phone', $reviewer->phone) }}" class="field-input">
            </div>
            <div>
                <label for="email" class="field-label">{{ __('patients.email') }}</label>
                <input id="email" name="email" type="email" value="{{ old('email', $reviewer->email) }}" class="field-input">
            </div>
            <div>
                <label for="city" class="field-label">{{ __('patients.city') }}</label>
                <input id="city" name="city" type="text" value="{{ old('city', $reviewer->city) }}" class="field-input">
            </div>
        </div>
    </section>

    {{-- Body --}}
    <section class="card-sc">
        <h2 class="mb-4 text-lg">{{ __('patients.section_body') }}</h2>
        <div class="row">
            <div class="col-md-2">
                <label for="height_cm" class="field-label">{{ __('patients.height_cm') }}</label>
                <input id="height_cm" name="height_cm" type="number" step="any"
                       value="{{ old('height_cm', $reviewer->height_cm) }}" class="field-input">
            </div>
            <div class="col-md-2">
                <label for="weight_kg" class="field-label">{{ __('patients.weight_kg') }}</label>
                <input id="weight_kg" name="weight_kg" type="number" step="any"
                       value="{{ old('weight_kg', $reviewer->weight_kg) }}" class="field-input">
            </div>
            <div class="col-md-2">
                <label for="body_fat_percent" class="field-label">{{ __('patients.body_fat_percent') }}</label>
                <input id="body_fat_percent" name="body_fat_percent" type="number" step="any" min="2" max="70"
                       value="{{ old('body_fat_percent', $reviewer->body_fat_percent) }}" class="field-input">
            </div>
            <div class="col-md-2">
                <label for="waist_cm" class="field-label">{{ __('patients.waist_cm') }}</label>
                <input id="waist_cm" name="waist_cm" type="number" step="any" value="{{ old('waist_cm', $reviewer->waist_cm) }}" class="field-input">
            </div>
            <div class="col-md-2">
                <label for="muscle_percent" class="field-label">{{ __('patients.muscle_percent') }}</label>
                <input id="muscle_percent" name="muscle_percent" type="number" step="any" value="{{ old('muscle_percent', $reviewer->muscle_percent) }}" class="field-input">
            </div>
            <div class="col-md-2">
                <label for="metabolic_rate" class="field-label">{{ __('patients.metabolic_rate') }}</label>
                <input id="metabolic_rate" name="metabolic_rate" type="number" step="any" value="{{ old('metabolic_rate', $reviewer->metabolic_rate) }}" class="field-input">
            </div>
        </div>
        <div class="grid gap-4 md:grid-cols-3">
            <div class="stat-card">
                <p class="text-sm font-semibold text-ink-500">{{ __('patients.target_weight_kg') }}</p>
                <p class="numeric mt-1 text-2xl font-extrabold text-ink-900" id="prev_ideal_weight">—</p>
                <p class="text-xs text-ink-400">{{ __('common.kg') }}</p>
            </div>
            <div class="stat-card">
                <p class="text-sm font-semibold text-ink-500">{{ __('patients.bmi') }}</p>
                <p class="numeric mt-1 text-2xl font-extrabold text-ink-900" id="prev_bmi">—</p>
                <p class="text-xs text-ink-400" id="prev_bmi_category">—</p>
            </div>
        </div>
    </section>

    {{-- Lifestyle --}}
    <section class="card-sc">
        <h2 class="mb-4 text-lg">{{ __('patients.section_lifestyle') }}</h2>

        <div class="mb-5">
            <p class="field-label mb-2">{{ __('patients.activity_level') }}</p>
            <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ($activityLevels as $level)
                    <div class="option-card {{ old('activity_level', $reviewer->activity_level) === $level ? 'is-selected' : '' }}"
                         data-option="activity_level" data-value="{{ $level }}" onclick="selectOptionCard(this)">
                        <svg class="option-card-icon" fill="none" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="{{ $activityIcons[$level] }}"/>
                        </svg>
                        <span class="option-card-label">{{ __('patients.activity.' . $level) }}</span>
                        <small class="d-block text-muted mt-1">× {{ $activityMults[$level] }}</small>
                    </div>
                @endforeach
            </div>
            <input type="hidden" id="activity_level" name="activity_level"
                   value="{{ old('activity_level', $reviewer->activity_level) }}">
        </div>

        <div class="mb-5">
            <p class="field-label mb-2">{{ __('patients.diet_type') }}</p>
            <div class="grid gap-3 sm:grid-cols-3 lg:grid-cols-5">
                @foreach ($dietTypes as $diet)
                    <div class="option-card {{ (int) old('diet_type_id', $reviewer->diet_type_id) === $diet->id ? 'is-selected' : '' }}"
                         data-option="diet_type_id" data-value="{{ $diet->id }}" data-slug="{{ $diet->slug }}"
                         data-carb-percent="{{ $diet->carb_percent }}" data-protein-percent="{{ $diet->protein_percent }}"
                         data-fat-percent="{{ $diet->fat_percent }}" data-calorie-adjustment="{{ $diet->calorie_adjustment }}"
                         onclick="selectOptionCard(this)">
                        <svg class="option-card-icon" fill="none" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="{{ $dietIcons[$diet->slug] ?? $dietIcons['maintain-weight'] }}"/>
                        </svg>
                        <span class="option-card-label">{{ $diet->name }}</span>
                    </div>
                @endforeach
            </div>
            <input type="hidden" id="diet_type_id" name="diet_type_id"
                   value="{{ old('diet_type_id', $reviewer->diet_type_id) }}">
        </div>

        <div class="grid gap-4 md:grid-cols-3">
            <div>
                <label for="goal" class="field-label">{{ __('patients.goal') }}</label>
                <select id="goal" name="goal" class="field-input">
                    <option value="">{{ __('onsite.choose') }}</option>
                    @foreach ($goals as $goal)
                        <option value="{{ $goal }}" @selected(old('goal', $reviewer->goal) === $goal)>{{ __('patients.goals.' . $goal) }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="meals_per_day" class="field-label">{{ __('patients.meals_per_day') }}</label>
                {{-- Fixed at 3 (breakfast/lunch/dinner) — the menu generator only builds those. --}}
                <input id="meals_per_day" name="meals_per_day" type="number"
                       value="3" readonly class="field-input bg-ink-50 cursor-not-allowed">
            </div>
            <div>
                <label for="snacks_number" class="field-label">{{ __('common.Snacks number') }}</label>
                <input id="snacks_number" name="snacks_number" type="number" min="0" max="10"
                        class="field-input">
            </div>
        </div>
    </section>

    {{-- Nutrition preview — same calculations/cards as the onsite-consultation
         wizard (BMR, TDEE, IBW/BMI, target calories, macro breakdown), but
         live and read-only on this one page instead of separate wizard
         steps. Recomputed client-side as body/lifestyle/diet fields change;
         the authoritative values are (re)computed server-side on save by
         NutritionCalculator using the exact same formulas. --}}
    <section class="card-sc" id="nutritionPreview">
        <h2 class="mb-1 text-lg">{{ __('patients.nutrition_preview') }}</h2>
        <p class="mb-4 text-sm text-ink-400">{{ __('patients.nutrition_preview_hint') }}</p>

        <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
            <div class="stat-card">
                <p class="text-sm font-semibold text-ink-500">{{ __('patients.bmr') }}</p>
                <div class="mt-1">
                    <input type="number" id="prev_bmr" inputmode="numeric" step="1"
                           class="numeric w-full border-0 bg-transparent p-0 text-center text-2xl font-extrabold text-ink-900 focus:outline-none focus:ring-2 focus:ring-ink-200 rounded-lg"
                           value="0">
                </div>
                <input type="range" id="prev_bmr_slider" min="500" max="4000" step="1" value="0" class="w-full mt-2">
                <p class="text-xs text-ink-400">{{ __('common.kcal') }}</p>
            </div>
            {{-- <div class="stat-card">
                <p class="text-sm font-semibold text-ink-500">{{ __('patients.tdee') }}</p>
                <p class="numeric mt-1 text-2xl font-extrabold text-ink-900" id="prev_tdee">—</p>
                <p class="text-xs text-ink-400">{{ __('common.kcal') }}</p>
            </div> --}}
            <div class="stat-card border-brand-200 bg-brand-50">
                <p class="text-sm font-semibold text-brand-700">{{ __('patients.target_calories') }}</p>
                <div class="mt-1 flex items-center gap-2">
                    <button type="button" id="eer_decrease" aria-label="{{ __('patients.decrease_eer') }}"
                            class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-brand-200 bg-white text-lg font-bold text-brand-700 leading-none hover:bg-brand-100">
                        &minus;
                    </button>
                    <input type="number" id="prev_target" inputmode="numeric" step="1"
                           class="numeric flex-1 border-0 bg-transparent p-0 text-center text-2xl font-extrabold text-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-200 rounded-lg"
                           value="0">
                    <button type="button" id="eer_increase" aria-label="{{ __('patients.increase_eer') }}"
                            class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-brand-200 bg-white text-lg font-bold text-brand-700 leading-none hover:bg-brand-100">
                        +
                    </button>
                </div>
                <input type="range" id="prev_target_slider" min="1000" max="6000" step="10" value="0" class="w-full mt-2">
                <p class="text-xs text-brand-600">{{ __('common.kcal') }}</p>
            </div>
            {{-- <div class="stat-card">
                <p class="text-sm font-semibold text-ink-500">{{ __('patients.bmi') }}</p>
                <p class="numeric mt-1 text-2xl font-extrabold text-ink-900" id="prev_bmi">—</p>
                <p class="text-xs text-ink-400" id="prev_bmi_category">—</p>
            </div> --}}
        </div>

        <div class="mt-4 grid gap-4 sm:grid-cols-3">
            @foreach (['protein' => ['bg-brand-50 text-brand-700', 25], 'carbs' => ['bg-amber-50 text-amber-700', 45], 'fat' => ['bg-sky-50 text-sky-700', 30]] as $macro => [$tone, $defaultPct])
                <div class="rounded-2xl {{ $tone }} px-4 py-4 text-center">
                    @if(app()->getLocale() === 'ar')
                        <p class="numeric text-2xl font-extrabold"><span id="prev_{{ $macro }}_g">0</span></p>&nbsp;{{ __('common.grams') }}
                    @else
                        <p class="numeric text-2xl font-extrabold"><span id="prev_{{ $macro }}_g">0</span>&nbsp;{{ __('common.grams') }}</p>
                    @endif
                    <p class="text-sm font-semibold">{{ __('patients.' . $macro) }}</p>
                    <p class="text-xs opacity-70"><span id="prev_{{ $macro }}_kcal">0</span> {{ __('common.kcal') }}</p>
                    <div class="mt-2 flex items-center justify-center gap-2">
                        <button type="button" class="macro-decrease flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-current bg-white/70 text-base font-bold leading-none hover:bg-white"
                                data-macro="{{ $macro }}" aria-label="{{ __('patients.decrease_macro', ['macro' => __('patients.' . $macro)]) }}">
                            &minus;
                        </button>
                        <input type="number" class="macro-percent-input w-16 rounded-lg border border-current bg-white/70 p-1 text-center numeric font-bold"
                               data-macro="{{ $macro }}" min="0" max="100" step="1" value="{{ $defaultPct }}">
                        <span class="text-sm font-semibold">%</span>
                        <button type="button" class="macro-increase flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-current bg-white/70 text-base font-bold leading-none hover:bg-white"
                                data-macro="{{ $macro }}" aria-label="{{ __('patients.increase_macro', ['macro' => __('patients.' . $macro)]) }}">
                            +
                        </button>
                    </div>
                    <input type="range" class="macro-percent-slider w-full mt-2" data-macro="{{ $macro }}" min="0" max="100" step="1" value="{{ $defaultPct }}">
                </div>
            @endforeach
        </div>
        <p class="mt-2 text-center text-xs text-ink-400">{{ __('patients.macro_sum_hint') }}</p>

        <p class="mt-4 text-sm text-ink-500">
            {{ __('patients.water') }}: <span class="numeric font-bold text-ink-800" id="prev_water">—</span> L
        </p>
    </section>

    {{-- Disliked / allergy exclusions — same component catalogue and picker
         design as the onsite-consultation wizard's Step 7, reused here via
         the same `portal.api.components.list` endpoint. Picked ids are
         stored on the visitor and the menu generator (Components-based)
         never selects them. --}}
    <section class="card-sc">
        <h2 class="mb-1 text-lg">{{ __('patients.section_exclusions') }}</h2>
        <p class="mb-4 text-sm text-ink-400">{{ __('patients.exclusions_hint') }}</p>

        <input type="text" class="field-input mb-2" id="exclusionsSearch" placeholder="{{ __('onsite.search_components') }}">
        <div id="exclusionGroups"></div>
        <div class="mt-2 flex flex-wrap gap-1" id="exclusionChips"></div>

        <input type="hidden" id="excluded_components_json" name="excluded_components_json"
               value="{{ old('excluded_components_json', json_encode($reviewer->excluded_component_ids ?? [])) }}">
    </section>

    {{-- Liked components — the flip side of exclusions. When left empty,
         the generator picks freely from the diet program's whole catalogue
         (same as before this existed). Once one or more are picked here,
         the generator restricts itself to ONLY these for every food-group
         slot (still honouring exclusions on top of that), so the menu is
         built entirely from what the reviewer likes. Same catalogue/picker
         as the exclusions section above. --}}
    <section class="card-sc">
        <h2 class="mb-1 text-lg">{{ __('patients.section_liked') }}</h2>
        <p class="mb-4 text-sm text-ink-400">{{ __('patients.liked_hint') }}</p>

        <input type="text" class="field-input mb-2" id="likedSearch" placeholder="{{ __('onsite.search_components') }}">
        <div id="likedGroups"></div>
        <div class="mt-2 flex flex-wrap gap-1" id="likedChips"></div>

        <input type="hidden" id="liked_components_json" name="liked_components_json"
               value="{{ old('liked_components_json', json_encode($reviewer->liked_component_ids ?? [])) }}">
    </section>

    {{-- Meal distribution — read-only table sourced live from
         food_group_distributions via the same API the onsite wizard's
         Step 8 uses, scaled to this visitor's own target calories. --}}
    {{-- <section class="card-sc">
        <h2 class="mb-1 text-lg">{{ __('patients.section_meal_distribution') }}</h2>
        <p class="mb-4 text-sm text-ink-400">{{ __('patients.meal_distribution_hint') }}</p>
        <div id="mealDistributionBody">
            <p class="text-sm text-ink-400">{{ __('patients.select_diet_first') }}</p>
        </div>
    </section> --}}

    {{-- Meal planner preview — a one-day sample built by the same
         MenuGenerationService (Components-based) the visitor's real menu
         will use once saved, shown with the onsite wizard's Step 9 visual
         language (meal dot + calorie progress bar per meal).
         Superseded on screen by the day-tabs planner included right below
         it (_meal_planner_days); kept hidden and unchanged. --}}
    <section class="card-sc" id="mealPlannerOneDay" style="display:none;">
        @if ($isNewVisit ?? false)
            <div class="mb-3 rounded-xl bg-brand-50 px-4 py-2.5 text-sm text-brand-800">
                {{ __('patients.new_visit_hint') }}
            </div>
        @elseif ($existingMenuPlan ?? null)
            <div class="mb-3 rounded-xl bg-ink-50 px-4 py-2.5 text-sm text-ink-600">
                {{ __('patients.editing_visit_hint', ['date' => $existingMenuPlan->starts_on?->format('Y-m-d') ?? $existingMenuPlan->created_at->format('Y-m-d')]) }}
            </div>
        @endif
        <div class="mb-1 flex flex-wrap items-center justify-between gap-3">
            <h2 class="text-lg">{{ __('patients.section_meal_planner') }}</h2>
            <div class="flex flex-wrap gap-2">
                <button type="button" class="btn-ghost !px-4 !py-2 text-sm" id="mealPlannerRegenerateBtn" onclick="previewMealPlan()" style="display:none;">
                    {{ __('patients.regenerate_preview') }}
                </button>
                <button type="button" class="btn-brand !px-4 !py-2 text-sm" id="mealPlannerPreviewBtn" onclick="previewMealPlan()">
                    {{ __('patients.preview_meal_plan') }}
                </button>
                {{-- These submit the whole reviewer form — saving the reviewer
                     and this exact previewed menu together in one step —
                     so they stay disabled until a preview exists to save. --}}
                <button type="submit" class="btn-soft !px-4 !py-2 text-sm" id="mealPlannerSaveBtn"
                        onclick="return prepareMenuSubmit('save')" disabled>
                    {{ __('patients.save_menu') }}
                </button>
                <button type="submit" class="btn-brand !px-4 !py-2 text-sm" id="mealPlannerSaveEmailBtn"
                        onclick="return prepareMenuSubmit('email')" disabled>
                    {{ __('patients.save_and_email_menu') }}
                </button>
            </div>
        </div>
        <p class="mb-4 text-sm text-ink-400">{{ __('patients.meal_planner_hint') }}</p>
        <div id="mealPlannerBody"></div>
        <p class="mt-2 text-xs text-amber-600" id="mealPlannerEmailHint" style="display:none;">{{ __('patients.menu_email_missing') }}</p>

        <input type="hidden" name="menu_preview_json" id="menu_preview_json" value="{{ old('menu_preview_json') }}">
        <input type="hidden" name="menu_action" id="menu_action_field" value="">
        {{-- Which visit Save writes to: the id of the visit this form opened
             into (blank on a "New visit" open — see ReviewerController::edit()
             and ::syncMenuPreview()), so Save always updates that exact
             visit instead of collapsing every save into one row. --}}
        <input type="hidden" name="menu_plan_target_id" id="menu_plan_target_id"
               value="{{ old('menu_plan_target_id', ($existingMenuPlan ?? null)?->id) }}">
    </section>

    @include('portal.reviewers._meal_planner_days')

    {{-- Clinical --}}
    <section class="card-sc">
        <h2 class="mb-4 text-lg">{{ __('patients.section_clinical') }}</h2>
        <div class="grid gap-4 md:grid-cols-2">
            <div>
                <label for="medical_conditions" class="field-label">{{ __('patients.medical_conditions') }}</label>
                <input id="medical_conditions" type="text" data-tags-field="medical_conditions"
                       value="{{ $tagValue('medical_conditions') }}" class="field-input">
                <p class="mt-1 text-xs text-ink-400">{{ __('patients.medical_conditions_hint') }}</p>
            </div>
            <div>
                <label for="medications" class="field-label">{{ __('patients.medications') }}</label>
                <input id="medications" type="text" data-tags-field="medications"
                       value="{{ $tagValue('medications') }}" class="field-input">
            </div>
            <div>
                <label for="allergies" class="field-label">{{ __('patients.medical_education') }}</label>
                <input id="allergies" type="text" data-tags-field="allergies"
                       value="{{ $tagValue('allergies') }}" class="field-input">
                {{-- <p class="mt-1 text-xs text-ink-400">{{ __('patients.allergies_hint') }}</p> --}}
            </div>
            <div>
                <label for="disliked_foods" class="field-label">{{ __('patients.recommendations') }}</label>
                <input id="disliked_foods" type="text" data-tags-field="disliked_foods"
                       value="{{ $tagValue('disliked_foods') }}" class="field-input">
            </div>
        </div>

        {{-- <div class="mt-4 flex flex-wrap gap-6">
            <label class="flex items-center gap-2 font-semibold text-ink-700">
                <input type="checkbox" name="is_pregnant" value="1" @checked(old('is_pregnant', $reviewer->is_pregnant))
                       class="rounded border-ink-300 text-brand-500 focus:ring-brand-300">
                {{ __('patients.is_pregnant') }}
            </label>
            <label class="flex items-center gap-2 font-semibold text-ink-700">
                <input type="checkbox" name="is_breastfeeding" value="1" @checked(old('is_breastfeeding', $reviewer->is_breastfeeding))
                       class="rounded border-ink-300 text-brand-500 focus:ring-brand-300">
                {{ __('patients.is_breastfeeding') }}
            </label>
        </div> --}}

        <div class="mt-4">
            <label for="notes" class="field-label">{{ __('patients.notes') }}</label>
            <textarea id="notes" name="notes" rows="3" class="field-input">{{ old('notes', $reviewer->notes) }}</textarea>
        </div>
    </section>
</div>

<style>
    /* Clickable option cards — same look for activity level and diet type,
       borrowed from the onsite-consultation wizard's card pickers. */
    .option-card {
        cursor: pointer; text-align: center; padding: 1rem .75rem; border-radius: .9rem;
        border: 1.5px solid #e2e8f0; background: #fff; transition: all .2s ease;
    }
    .option-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-1px); }
    .option-card.is-selected { border-color: #5F8A31; background: #f2f6e9; box-shadow: 0 4px 12px rgba(95,138,49,.18); }
    .option-card-icon { width: 28px; height: 28px; margin: 0 auto .5rem; display: block; color: #5F8A31; }
    .option-card-label { display: block; font-size: .82rem; font-weight: 600; color: #263A17; }

    /* Exclusions picker — same visual language as the onsite wizard's
       Step 7 component picker. */
    .comp-picker { border: 1px solid #e2e8f0; border-radius: 10px; max-height: 220px; overflow-y: auto; }
    .comp-picker-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; border-bottom: 1px solid #f1f3f5; cursor: pointer; }
    .comp-picker-row:last-child { border-bottom: 0; }
    .comp-picker-row:hover { background: #f8f9fa; }
    .comp-picker-row.picked { background: #f2f6e9; }
    .excluded-group { margin-bottom: .75rem; }
    .excluded-group-head {
        display: flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none;
        padding: .35rem .7rem; background: #F2F6E9; border-radius: 6px;
        font-size: .78rem; font-weight: 700; color: #263A17; transition: border-radius .15s;
    }
    .excluded-group.is-open .excluded-group-head { border-radius: 6px 6px 0 0; }
    .excluded-group-head .count { font-weight: 500; color: #7FA945; margin-inline-start: auto; }
    .excluded-group-chevron { display: inline-block; font-size: .65rem; color: #7FA945; transition: transform .15s; }
    .excluded-group.is-open .excluded-group-chevron { transform: rotate(90deg); }
    .excluded-group .comp-picker, .excluded-group .excluded-group-empty { display: none; }
    .excluded-group.is-open .comp-picker, .excluded-group.is-open .excluded-group-empty { display: block; }
    .excluded-group .comp-picker { max-height: 140px; border-radius: 0 0 10px 10px; border-top: 0; }
    .excluded-group-empty { font-size: .75rem; color: #AFABA1; padding: .4rem .7rem; border: 1px solid #e2e8f0; border-top: 0; border-radius: 0 0 10px 10px; }
</style>

<script src="{{ asset('js/nhs-ibw.js') }}"></script>
<script src="{{ asset('js/pediatric-bmr.js') }}"></script>
<script>
    function selectOptionCard(el) {
        var group = el.dataset.option;
        document.querySelectorAll('.option-card[data-option="' + group + '"]').forEach(function (c) {
            c.classList.remove('is-selected');
        });
        el.classList.add('is-selected');
        document.getElementById(group).value = el.dataset.value;

        if (group === 'diet_type_id' || group === 'activity_level') recalcNutritionPreview();
        if (group === 'diet_type_id') {
            loadExclusionsPool();
            loadMealDistribution();
            document.getElementById('mealPlannerBody').innerHTML = '';
            document.getElementById('mealPlannerRegenerateBtn').style.display = 'none';
        }
    }

    /**
     * Mirrors App\Services\NutritionCalculator (Mifflin-St Jeor BMR, activity
     * multiplier for TDEE, diet type's calorie_adjustment/macro percents for
     * the target and macro breakdown) — same formulas, computed live in the
     * browser as the consultant fills in the form, purely as a preview.
     * The authoritative values are (re)computed server-side on save.
     */
    var activityMultipliers = @json(config('smartcarb.activity_levels'));
    var bmiCategoryLabels = @json($bmiCategoryLabels);

    // EER +/- stepper — the consultant can nudge the computed target up or
    // down; the macro grams/kcal/% below stay in lockstep, recomputed from
    // the same percentages (diet type's carb/protein/fat split) at the new
    // calorie figure. A field that feeds the formula (weight, height, dob,
    // gender, activity, diet) changing re-runs recalcNutritionPreview() and
    // overwrites any manual nudge with the fresh baseline.
    var EER_STEP = 1;
    var currentMacroPercents = { protein: 25, carbs: 45, fat: 30 };
    var currentGender = 'male';

    function renderMacrosForTarget(target) {
        var proteinG = Math.round((target * currentMacroPercents.protein / 100) / 4);
        var carbsG = Math.round((target * currentMacroPercents.carbs / 100) / 4);
        var fatG = Math.round((target * currentMacroPercents.fat / 100) / 9);

        setTextIfExists('prev_protein_g', proteinG.toLocaleString());
        setTextIfExists('prev_carbs_g', carbsG.toLocaleString());
        setTextIfExists('prev_fat_g', fatG.toLocaleString());
        setTextIfExists('prev_protein_kcal', (proteinG * 4).toLocaleString());
        setTextIfExists('prev_carbs_kcal', (carbsG * 4).toLocaleString());
        setTextIfExists('prev_fat_kcal', (fatG * 9).toLocaleString());
        syncMacroControls();
    }

    // Keeps each macro's number input + range slider showing the same value
    // as `currentMacroPercents`, whichever of the three (typed number, drag,
    // +/- button) last changed it.
    function syncMacroControls() {
        ['protein', 'carbs', 'fat'].forEach(function (macro) {
            var value = Math.round(currentMacroPercents[macro]);
            document.querySelectorAll('.macro-percent-input[data-macro="' + macro + '"]').forEach(function (el) {
                if (document.activeElement !== el) el.value = value;
            });
            document.querySelectorAll('.macro-percent-slider[data-macro="' + macro + '"]').forEach(function (el) {
                if (document.activeElement !== el) el.value = value;
            });
        });
    }

    function currentTarget() {
        return parseInt(document.getElementById('prev_target').value, 10) || 0;
    }

    function setEer(next) {
        // Same absolute floors as NutritionCalculator::MIN_CALORIES_MALE/FEMALE.
        var floor = currentGender === 'female' ? 1200 : 1500;
        next = Math.max(floor, Math.min(6000, Math.round(next) || 0));

        var targetInput = document.getElementById('prev_target');
        var targetSlider = document.getElementById('prev_target_slider');
        if (document.activeElement !== targetInput) targetInput.value = next;
        if (document.activeElement !== targetSlider) targetSlider.value = next;

        renderMacrosForTarget(next);
    }

    function adjustEer(delta) {
        var current = currentTarget();
        if (!current) return;
        setEer(current + delta);
    }

    document.getElementById('eer_increase')?.addEventListener('click', function () { adjustEer(EER_STEP); });
    document.getElementById('eer_decrease')?.addEventListener('click', function () { adjustEer(-EER_STEP); });

    // Typing/pasting a number directly, or dragging the slider, both update
    // the target calories live — no separate "apply" step needed.
    document.getElementById('prev_target')?.addEventListener('input', function () { setEer(parseInt(this.value, 10) || 0); });
    document.getElementById('prev_target_slider')?.addEventListener('input', function () { setEer(parseInt(this.value, 10) || 0); });

    // Editing BMR (typing/pasting a value or dragging its slider) recomputes
    // the target calories from it (same BMR × activity-factor formula as
    // recalcNutritionPreview()), which in turn cascades into the macros —
    // all live, no separate step. Overwritten the next time a formula input
    // (weight, height, dob, gender, activity) changes, same as the target.
    function applyBmr(value) {
        value = Math.max(0, Math.round(value) || 0);

        var slider = document.getElementById('prev_bmr_slider');
        var input = document.getElementById('prev_bmr');
        if (input && document.activeElement !== input) input.value = value;
        if (slider && document.activeElement !== slider) slider.value = value;

        if (!value) return;

        var activityLevel = document.getElementById('activity_level').value;
        var factor = activityMultipliers[activityLevel] || activityMultipliers.light;
        setEer(value * factor);
    }

    document.getElementById('prev_bmr')?.addEventListener('input', function () { applyBmr(parseInt(this.value, 10) || 0); });
    document.getElementById('prev_bmr_slider')?.addEventListener('input', function () { applyBmr(parseInt(this.value, 10) || 0); });

    // Macro percentages — nudging/typing/dragging one macro's percentage
    // redistributes the change across the other two proportionally to their
    // current share, so the three always keep summing to 100% (no separate
    // validation message needed — the rebalance makes an invalid split
    // impossible). Grams/kcal are then re-rendered against the current EER,
    // so the breakdown always reflects the calorie target on screen, live.
    var MACRO_STEP = 1;

    function setMacroPercent(macro, next) {
        var keys = ['protein', 'carbs', 'fat'];
        var current = currentMacroPercents[macro];
        next = Math.max(0, Math.min(100, Math.round(next) || 0));
        var actualDelta = next - current;
        if (!actualDelta) { syncMacroControls(); return; }

        var others = keys.filter(function (k) { return k !== macro; });
        var othersSum = others.reduce(function (s, k) { return s + currentMacroPercents[k]; }, 0);

        var updated = {};
        updated[macro] = next;

        others.forEach(function (k) {
            var share = othersSum > 0 ? currentMacroPercents[k] / othersSum : 1 / others.length;
            updated[k] = Math.max(0, currentMacroPercents[k] - actualDelta * share);
        });

        // Round to whole percentage points, then fix any rounding drift on
        // the last "other" macro so the three always add up to exactly 100.
        var rounded = {};
        rounded[macro] = Math.round(updated[macro]);
        rounded[others[0]] = Math.round(updated[others[0]]);
        rounded[others[1]] = Math.max(0, 100 - rounded[macro] - rounded[others[0]]);

        currentMacroPercents = rounded;

        renderMacrosForTarget(currentTarget());
    }

    function adjustMacro(macro, delta) {
        setMacroPercent(macro, currentMacroPercents[macro] + delta);
    }

    document.querySelectorAll('.macro-increase').forEach(function (btn) {
        btn.addEventListener('click', function () { adjustMacro(btn.dataset.macro, MACRO_STEP); });
    });
    document.querySelectorAll('.macro-decrease').forEach(function (btn) {
        btn.addEventListener('click', function () { adjustMacro(btn.dataset.macro, -MACRO_STEP); });
    });
    document.querySelectorAll('.macro-percent-input').forEach(function (el) {
        el.addEventListener('input', function () { setMacroPercent(this.dataset.macro, parseInt(this.value, 10) || 0); });
    });
    document.querySelectorAll('.macro-percent-slider').forEach(function (el) {
        el.addEventListener('input', function () { setMacroPercent(this.dataset.macro, parseInt(this.value, 10) || 0); });
    });

    function calcAge(dob) {
        var today = new Date(), birth = new Date(dob);
        var age = today.getFullYear() - birth.getFullYear();
        var m = today.getMonth() - birth.getMonth();
        if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) age--;
        return age;
    }

    function recalcNutritionPreview() {
        var weight = parseFloat(document.getElementById('weight_kg').value);
        var height = parseFloat(document.getElementById('height_cm').value);
        var dob = document.getElementById('date_of_birth').value;
        var gender = document.getElementById('gender').value;
        var activityLevel = document.getElementById('activity_level').value;

        if (!weight || !height || !dob || !gender) return;

        var age = calcAge(dob);
        var heightM = height / 100;

        // BMR/EER — same pediatric (10-17) vs adult split and formulas as
        // the onsite-consultation wizard's Step 2 (calculateStep2()):
        // Schofield-style equation for pediatric ages, otherwise the IOM
        // EER equations, both before the activity multiplier.
        var isPediatric = PediatricBmr.isPediatric(age);
        var bmr;
        if (isPediatric) {
            bmr = PediatricBmr.calculate(gender, weight, height);
        } else if (gender === 'male') {
            bmr = 293 - (3.8 * age) + (456.4 * heightM) + (10.12 * weight);
        } else {
            bmr = 247 - (2.67 * age) + (401.5 * heightM) + (8.6 * weight);
        }

        var factor = activityMultipliers[activityLevel] || activityMultipliers.light;
        var target = bmr * factor;

        var bmi = heightM > 0 ? Math.round((weight / (heightM * heightM)) * 10) / 10 : 0;
        var bmiCategory = bmi < 18.5 ? 'underweight' : bmi < 25 ? 'normal' : bmi < 30 ? 'overweight'
            : bmi < 35 ? 'obese_1' : bmi < 40 ? 'obese_2' : 'obese_3';

        // Ideal body weight from the official NHS height/weight table
        // (window.NhsIbw, shared with the onsite-consultation wizard) —
        // also drives the same -500 kcal deduction Step 2 applies when
        // BMI is at/above 25 and weight exceeds the NHS ideal weight.
        var nhs = (typeof NhsIbw !== 'undefined') ? NhsIbw.lookup(gender, height) : null;
        var isAboveIbw = !!nhs && weight > nhs.ibw;
        var isAboveIdealBmi = bmi >= 25 && isAboveIbw;
        if (isAboveIdealBmi) target -= 500;

        bmr = Math.round(bmr);
        target = Math.round(target);

        var dietCard = document.querySelector('.option-card[data-option="diet_type_id"].is-selected');
        currentGender = gender;
        currentMacroPercents = {
            protein: dietCard ? parseFloat(dietCard.dataset.proteinPercent) : 25,
            carbs: dietCard ? parseFloat(dietCard.dataset.carbPercent) : 45,
            fat: dietCard ? parseFloat(dietCard.dataset.fatPercent) : 30,
        };

        var water = Math.round((((weight * 35) / 1000) + (activityLevel === 'very_active' ? 0.5 : 0)) * 10) / 10;

        setValueIfExists('prev_bmr', bmr);
        setValueIfExists('prev_bmr_slider', bmr);
        setTextIfExists('prev_bmi', bmi.toFixed(1));
        setTextIfExists('prev_bmi_category', bmiCategoryLabels[bmiCategory]);
        setTextIfExists('prev_ideal_weight', nhs ? nhs.ibw.toFixed(1) : '—');

        setEer(target);

        setTextIfExists('prev_water', water);
    }

    function setTextIfExists(id, text) {
        var el = document.getElementById(id);
        if (el) el.textContent = text;
    }

    function setValueIfExists(id, value) {
        var el = document.getElementById(id);
        if (el && document.activeElement !== el) el.value = value;
    }

    ['weight_kg', 'height_cm', 'date_of_birth', 'gender'].forEach(function (id) {
        var el = document.getElementById(id);
        if (!el) return;
        el.addEventListener('input', recalcNutritionPreview);
        el.addEventListener('change', recalcNutritionPreview);
    });

    document.addEventListener('DOMContentLoaded', function () {
        recalcNutritionPreview();
        loadExclusionsPool();
        loadMealDistribution();
    });

    /**
     * The Components-driven endpoints (api/components, api/food-group-
     * distribution, api/meal-planner/generate) key off the onsite wizard's
     * diet keys + optional phase, not the diet_types table slug — this is
     * the same reverse mapping MenuGenerationService::dietTypeFilterKey()
     * uses server-side.
     */
    function selectedDietWizardKey() {
        var card = document.querySelector('.option-card[data-option="diet_type_id"].is-selected');
        if (!card) return null;

        var map = {
            'diabetes': { key: 'diabetes', phase: null },
            'weight-loss': { key: 'weight_reduction', phase: 'phase_1' },
            'weight-loss-phase-2': { key: 'weight_reduction', phase: 'phase_2' },
            'keto': { key: 'ketogenic', phase: null },
            'muscle-building': { key: 'building_muscles', phase: null },
            'maintain-weight': { key: 'healthy_weight', phase: null },
        };

        return map[card.dataset.slug] || null;
    }

    // ── Disliked / allergy exclusions (Step 7 equivalent) ──
    var FOOD_GROUP_ORDER = ['main_carb', 'fruits', 'milks', 'rich_proteins', 'oils', 'other_fats'];
    var exclusionsPool = [];
    var excludedIds = new Set(@json($reviewer->excluded_component_ids ?? []));

    function loadExclusionsPool() {
        var wizard = selectedDietWizardKey();
        var locale = @json(app()->getLocale());
        var url = @json(route('portal.api.components.list')) + '?locale=' + locale;
        if (wizard) url += '&diet_type=' + encodeURIComponent(wizard.key);

        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }, cache: 'no-store' })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                // Same diet-type-filtered catalogue backs both pickers —
                // one pool, two independent selections (excluded vs liked).
                // Deduped by id so a component that matches more than once
                // (e.g. shared between meal slots/food groups server-side)
                // still shows up as a single row in each list.
                var raw = (data.components && Array.isArray(data.components)) ? data.components : [];
                var seen = new Set();
                exclusionsPool = raw.filter(function (c) {
                    if (seen.has(c.id)) return false;
                    seen.add(c.id);
                    return true;
                });
                renderExclusionGroups(exclusionsPool);
                renderExclusionChips();
                renderLikedGroups(exclusionsPool);
                renderLikedChips();
            })
            .catch(function (e) { console.error('Error loading components:', e); });
    }

    var foodGroupLabels = @json($foodGroupLabels);
    var mealSlotLabels = @json($mealSlotLabels);
    function foodGroupLabel(key) {
        return foodGroupLabels[key] || key;
    }

    /**
     * The catalogue can hold more than one component row sharing the exact
     * same displayed name (e.g. a metric and a "US units" variant of the
     * same food, both labelled "حليب صويا" in Arabic) — collapses those
     * into a single row per unique name, carrying every id that name covers
     * so picking/unpicking it applies to all of them at once instead of
     * showing the same name twice in the list.
     */
    function groupComponentsByName(items) {
        var byName = new Map();

        items.forEach(function (c) {
            var key = c.name;
            if (!byName.has(key)) {
                byName.set(key, { ids: [c.id], name: c.name, food_group: c.food_group });
            } else {
                byName.get(key).ids.push(c.id);
            }
        });

        return Array.from(byName.values());
    }

    function renderExclusionGroups(list, searching) {
        var container = document.getElementById('exclusionGroups');
        if (!container) return;
        container.innerHTML = '';

        FOOD_GROUP_ORDER.forEach(function (groupKey) {
            var items = groupComponentsByName(list.filter(function (c) { return c.food_group === groupKey; }));

            // Collapsed by default; while searching, only groups with a
            // match auto-open so the result is easy to spot.
            var isOpen = searching ? items.length > 0 : false;

            var section = document.createElement('div');
            section.className = 'excluded-group' + (isOpen ? ' is-open' : '');

            var head = document.createElement('div');
            head.className = 'excluded-group-head';
            head.innerHTML = '<span class="excluded-group-chevron">&#9656;</span>' +
                '<span>' + foodGroupLabel(groupKey) + '</span>' +
                '<span class="count">' + items.length + '</span>';
            head.addEventListener('click', function () { section.classList.toggle('is-open'); });
            section.appendChild(head);

            if (!items.length) {
                var empty = document.createElement('div');
                empty.className = 'excluded-group-empty';
                empty.textContent = @json(__('onsite.no_matching_components'));
                section.appendChild(empty);
            } else {
                var pool = document.createElement('div');
                pool.className = 'comp-picker';
                items.forEach(function (c) { pool.appendChild(buildExclusionRow(c)); });
                section.appendChild(pool);
            }

            container.appendChild(section);
        });
    }

    function buildExclusionRow(group) {
        var picked = group.ids.some(function (id) { return excludedIds.has(id); });
        var row = document.createElement('div');
        row.className = 'comp-picker-row' + (picked ? ' picked' : '');
        row.innerHTML = '<input type="checkbox" class="rounded border-ink-300" ' + (picked ? 'checked' : '') + '>' +
            '<span>' + group.name.replace(/</g, '&lt;') + '</span>';
        row.addEventListener('click', function (e) {
            var cb = row.querySelector('input');
            if (e.target.tagName !== 'INPUT') cb.checked = !cb.checked;
            var checked = cb.checked;
            group.ids.forEach(function (id) {
                if (checked) excludedIds.add(id); else excludedIds.delete(id);
            });
            row.classList.toggle('picked', checked);
            renderExclusionChips();
            document.getElementById('excluded_components_json').value = JSON.stringify(Array.from(excludedIds));
            onExclusionsChanged();
        });
        return row;
    }

    function renderExclusionChips() {
        var box = document.getElementById('exclusionChips');
        if (!box) return;
        box.innerHTML = '';

        var shown = new Set();
        Array.from(excludedIds).forEach(function (id) {
            var c = exclusionsPool.find(function (p) { return p.id === id; });
            if (!c || shown.has(c.name)) return;
            shown.add(c.name);
            var chip = document.createElement('span');
            chip.className = 'badge-sc bg-ink-100 text-ink-700';
            chip.textContent = c.name;
            box.appendChild(chip);
        });

        if (!excludedIds.size) {
            box.innerHTML = '<span class="text-sm text-ink-400">' + @json(__('onsite.no_excluded_picked')) + '</span>';
        }

        document.getElementById('excluded_components_json').value = JSON.stringify(Array.from(excludedIds));
    }

    document.getElementById('exclusionsSearch')?.addEventListener('input', function () {
        var term = this.value.trim().toLowerCase();
        var filtered = term ? exclusionsPool.filter(function (c) { return c.name.toLowerCase().indexOf(term) !== -1; }) : exclusionsPool;
        renderExclusionGroups(filtered, !!term);
    });

    // ── Liked components — the flip side of exclusions. Sharing the same
    // catalogue pool (exclusionsPool) and food-group layout, just a
    // separate selected-ids set and hidden field. When non-empty, the
    // generator (both previewMealPlan() below and the server-side
    // MenuGeneratorService) restricts every food-group slot to only these
    // components. ──
    var likedIds = new Set(@json($reviewer->liked_component_ids ?? []));

    function renderLikedGroups(list, searching) {
        var container = document.getElementById('likedGroups');
        if (!container) return;
        container.innerHTML = '';

        FOOD_GROUP_ORDER.forEach(function (groupKey) {
            var items = groupComponentsByName(list.filter(function (c) { return c.food_group === groupKey; }));
            var isOpen = searching ? items.length > 0 : false;

            var section = document.createElement('div');
            section.className = 'excluded-group' + (isOpen ? ' is-open' : '');

            var head = document.createElement('div');
            head.className = 'excluded-group-head';
            head.innerHTML = '<span class="excluded-group-chevron">&#9656;</span>' +
                '<span>' + foodGroupLabel(groupKey) + '</span>' +
                '<span class="count">' + items.length + '</span>';
            head.addEventListener('click', function () { section.classList.toggle('is-open'); });
            section.appendChild(head);

            if (!items.length) {
                var empty = document.createElement('div');
                empty.className = 'excluded-group-empty';
                empty.textContent = @json(__('onsite.no_matching_components'));
                section.appendChild(empty);
            } else {
                var pool = document.createElement('div');
                pool.className = 'comp-picker';
                items.forEach(function (c) { pool.appendChild(buildLikedRow(c)); });
                section.appendChild(pool);
            }

            container.appendChild(section);
        });
    }

    function buildLikedRow(group) {
        var picked = group.ids.some(function (id) { return likedIds.has(id); });
        var row = document.createElement('div');
        row.className = 'comp-picker-row' + (picked ? ' picked' : '');
        row.innerHTML = '<input type="checkbox" class="rounded border-ink-300" ' + (picked ? 'checked' : '') + '>' +
            '<span>' + group.name.replace(/</g, '&lt;') + '</span>';
        row.addEventListener('click', function (e) {
            var cb = row.querySelector('input');
            if (e.target.tagName !== 'INPUT') cb.checked = !cb.checked;
            var checked = cb.checked;
            group.ids.forEach(function (id) {
                if (checked) likedIds.add(id); else likedIds.delete(id);
            });
            row.classList.toggle('picked', checked);
            renderLikedChips();
            document.getElementById('liked_components_json').value = JSON.stringify(Array.from(likedIds));
            onExclusionsChanged(); // same invalidate-the-stale-preview rule applies to the liked list
        });
        return row;
    }

    function renderLikedChips() {
        var box = document.getElementById('likedChips');
        if (!box) return;
        box.innerHTML = '';

        var shown = new Set();
        Array.from(likedIds).forEach(function (id) {
            var c = exclusionsPool.find(function (p) { return p.id === id; });
            if (!c || shown.has(c.name)) return;
            shown.add(c.name);
            var chip = document.createElement('span');
            chip.className = 'badge-sc bg-brand-50 text-brand-700';
            chip.textContent = c.name;
            box.appendChild(chip);
        });

        if (!likedIds.size) {
            box.innerHTML = '<span class="text-sm text-ink-400">' + @json(__('patients.no_liked_picked')) + '</span>';
        }

        document.getElementById('liked_components_json').value = JSON.stringify(Array.from(likedIds));
    }

    document.getElementById('likedSearch')?.addEventListener('input', function () {
        var term = this.value.trim().toLowerCase();
        var filtered = term ? exclusionsPool.filter(function (c) { return c.name.toLowerCase().indexOf(term) !== -1; }) : exclusionsPool;
        renderLikedGroups(filtered, !!term);
    });

    // ── Meal distribution (Step 8 equivalent) ──
    function loadMealDistribution() {
        var wizard = selectedDietWizardKey();
        var body = document.getElementById('mealDistributionBody');
        if (!wizard) { body.innerHTML = '<p class="text-sm text-ink-400">' + @json(__('patients.select_diet_first')) + '</p>'; return; }

        var url = @json(route('portal.api.food-group-distribution')) + '?diet_type=' + wizard.key + (wizard.phase ? '&phase=' + wizard.phase : '');

        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }, cache: 'no-store' })
            .then(function (r) { return r.json(); })
            .then(function (json) {
                if (!json.status) { body.innerHTML = ''; return; }
                renderMealDistribution(json.distribution);
            })
            .catch(function (e) { console.error('Error loading meal distribution:', e); });
    }

    function renderMealDistribution(distribution) {
        var target = currentTarget();
        var meals = ['breakfast', 'lunch', 'dinner'];
        var mealLabels = mealSlotLabels;

        var html = '<div class="overflow-x-auto"><table class="table-sc"><thead><tr><th>' + @json(__('onsite.food_group')) + '</th>';
        meals.forEach(function (m) { html += '<th class="text-center">' + mealLabels[m] + '</th>'; });
        html += '</tr></thead><tbody>';

        FOOD_GROUP_ORDER.forEach(function (groupKey) {
            html += '<tr><td>' + foodGroupLabel(groupKey) + '</td>';
            meals.forEach(function (m) {
                var pct = (distribution[m] && distribution[m][groupKey]) || 0;
                var kcal = target > 0 ? Math.round(target * pct / 100) : null;
                html += '<td class="text-center numeric">' + (pct > 0 ? pct + '%' + (kcal ? ' · ' + kcal + ' ' + @json(__('common.kcal')) : '') : '—') + '</td>';
            });
            html += '</tr>';
        });

        html += '</tbody></table></div>';
        document.getElementById('mealDistributionBody').innerHTML = html;
    }

    ['weight_kg', 'height_cm', 'date_of_birth', 'gender'].forEach(function (id) {
        var el = document.getElementById(id);
        if (!el) return;
        el.addEventListener('input', function () { setTimeout(loadMealDistribution, 0); });
        el.addEventListener('change', function () { setTimeout(loadMealDistribution, 0); });
    });

    // ── Meal planner preview (Step 9 equivalent, read-only) ──
    var macroColors = { protein: '#D64545', carbs: '#5F8A31', fat: '#F2B705' };
    var previewRotationSeed = 0;
    // The exact payload behind what's currently on screen — saved verbatim
    // (not regenerated) when the Save / Save & email buttons are used.
    var latestMealPlanPreview = null;

    /**
     * A checked/unchecked exclusion invalidates whatever preview is
     * currently on screen — Save/Save & email submit `latestMealPlanPreview`
     * verbatim (see prepareMenuSubmit()), so leaving a stale preview in
     * place would let an item just excluded still get saved and emailed.
     * Re-run generation immediately so the preview (and therefore anything
     * saved from it) always reflects the current exclusion list.
     */
    var exclusionsChangeTimer = null;
    function onExclusionsChanged() {
        if (!latestMealPlanPreview) return;
        setMealPlanSaveEnabled(false);
        clearTimeout(exclusionsChangeTimer);
        exclusionsChangeTimer = setTimeout(previewMealPlan, 300);
    }

    function previewMealPlan() {
        var wizard = selectedDietWizardKey();
        var body = document.getElementById('mealPlannerBody');

        if (!wizard) { body.innerHTML = '<p class="text-danger small">' + @json(__('patients.preview_failed')) + '</p>'; return; }

        var target = currentTarget();
        if (!target) { body.innerHTML = '<p class="text-danger small">' + @json(__('patients.preview_failed')) + '</p>'; return; }

        var btn = document.getElementById('mealPlannerPreviewBtn');
        btn.disabled = true;

        fetch(@json(route('portal.api.meal-planner.generate')), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || document.querySelector('input[name="_token"]').value,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({
                diet_type: wizard.key,
                phase: wizard.phase,
                calories: target,
                excluded_component_ids: Array.from(excludedIds),
                liked_component_ids: Array.from(likedIds),
                rotation_seed: previewRotationSeed++,
                only_meals: ['breakfast', 'lunch', 'dinner'],
            }),
        })
        .then(function (r) { return r.json(); })
        .then(function (json) {
            btn.disabled = false;
            if (!json.status) { body.innerHTML = '<p class="text-danger small">' + (json.message || @json(__('patients.preview_failed'))) + '</p>'; return; }
            latestMealPlanPreview = json;
            renderMealPlanPreview(json);
            document.getElementById('mealPlannerRegenerateBtn').style.display = '';
            setMealPlanSaveEnabled(true);
        })
        .catch(function () {
            btn.disabled = false;
            body.innerHTML = '<p class="text-danger small">' + @json(__('patients.preview_failed')) + '</p>';
        });
    }

    function setMealPlanSaveEnabled(enabled) {
        document.getElementById('mealPlannerSaveBtn').disabled = !enabled;
        document.getElementById('mealPlannerSaveEmailBtn').disabled = !enabled;
    }

    /**
     * Sets the two hidden fields the reviewer form submits alongside every
     * other field, so Save (or Save & email) persists the reviewer and
     * this exact previewed menu in the same request — see
     * ReviewerController::syncMenuPreview().
     */
    function prepareMenuSubmit(action) {
        if (!latestMealPlanPreview) return false;

        var hint = document.getElementById('mealPlannerEmailHint');
        if (action === 'email' && !document.getElementById('email').value.trim()) {
            hint.style.display = 'block';
            return false;
        }
        hint.style.display = 'none';

        document.getElementById('menu_action_field').value = action;
        document.getElementById('menu_preview_json').value = JSON.stringify(latestMealPlanPreview);
        return true;
    }

    function macroChart(meal) {
        var proteinKcal = (meal.protein_g || 0) * 4;
        var carbsKcal = (meal.carbs_g || 0) * 4;
        var fatKcal = (meal.fat_g || 0) * 9;
        var total = proteinKcal + carbsKcal + fatKcal;
        if (total <= 0) return '';

        var segments = [
            ['protein', proteinKcal], ['carbs', carbsKcal], ['fat', fatKcal],
        ].map(function (pair) {
            var pct = Math.round((pair[1] / total) * 100);
            return pct > 0 ? '<span style="display:inline-block;height:100%;width:' + pct + '%;background:' + macroColors[pair[0]] + ';"></span>' : '';
        }).join('');

        return '<div style="height:6px;border-radius:99px;overflow:hidden;display:flex;margin-bottom:.4rem;">' + segments + '</div>' +
            '<div class="flex justify-between text-xs" style="color:#7a7566;margin-bottom:.75rem;">' +
            '<span>' + Math.round(meal.protein_g || 0) + 'g P</span>' +
            '<span>' + Math.round(meal.carbs_g || 0) + 'g C</span>' +
            '<span>' + Math.round(meal.fat_g || 0) + 'g F</span>' +
            '</div>';
    }

    function renderMealPlanPreview(result) {
        var mealLabels = mealSlotLabels;
        var body = document.getElementById('mealPlannerBody');
        var html = '<div class="grid gap-4 md:grid-cols-3">';

        ['breakfast', 'lunch', 'dinner'].forEach(function (slot) {
            var meal = result.meals[slot];
            if (!meal) return;

            var pct = meal.target_calories > 0 ? Math.min(100, Math.round((meal.calories / meal.target_calories) * 100)) : 0;
            // The calorie fill line reads as a to-do: red while the meal
            // hasn't reached its calorie target yet, green once it's fully
            // filled — clearer at a glance than the fixed per-meal color.
            var fillColor = pct >= 100 ? '#22c55e' : '#ef4444';

            html += '<div class="rounded-2xl border border-ink-100 p-4">' +
                '<div class="mb-2 flex items-center gap-2">' +
                '<span style="width:10px;height:10px;border-radius:50%;background:' + fillColor + ';display:inline-block;"></span>' +
                '<h3 class="text-base m-0">' + mealLabels[slot] + '</h3>' +
                '<span class="ms-auto numeric text-sm font-bold" style="color:' + fillColor + '">' + Math.round(meal.calories) + ' ' + @json(__('common.kcal')) + '</span>' +
                '</div>' +
                '<div style="height:6px;border-radius:99px;background:#eef0f7;overflow:hidden;margin-bottom:.5rem;">' +
                '<span style="display:block;height:100%;width:' + pct + '%;background:' + fillColor + ';"></span>' +
                '</div>' +
                macroChart(meal) +
                '<ul class="list-none space-y-1.5 ps-0 m-0">';

            meal.components.forEach(function (c, index) {
                html += '<li class="text-sm" data-slot="' + slot + '" data-index="' + index + '">' +
                    '<div class="flex items-center justify-between gap-2">' +
                    '<span class="text-ink-700">' + c.name + '</span>' +
                    '<span class="flex shrink-0 items-center gap-1.5">' +
                    '<span class="numeric font-semibold text-ink-500">' + c.grams + (c.unit === 'ml' ? @json(__('common.ml')) : @json(__('common.grams'))) + '</span>' +
                    '<button type="button" class="meal-item-swap text-ink-400 hover:text-brand-600" data-slot="' + slot + '" data-index="' + index + '" title="' + @json(__('patients.swap_component')) + '">&#8646;</button>' +
                    '<button type="button" class="meal-item-remove text-ink-400 hover:text-red-600" data-slot="' + slot + '" data-index="' + index + '" title="' + @json(__('onsite.remove_component')) + '">&times;</button>' +
                    '</span>' +
                    '</div>' +
                    '<div class="meal-swap-search hidden mt-1.5" id="mealSwapSearch_' + slot + '_' + index + '">' +
                    '<input type="text" class="field-input meal-swap-search-input !py-1 !text-xs" data-slot="' + slot + '" data-index="' + index + '" placeholder="' + @json(__('patients.search_component_to_swap')) + '">' +
                    '<div class="meal-search-results mt-1 space-y-1" id="mealSwapResults_' + slot + '_' + index + '"></div>' +
                    '</div>' +
                    '</li>';
            });

            html += '</ul>' +
                '<button type="button" class="meal-add-toggle mt-2 text-xs font-semibold text-brand-700 hover:underline" data-slot="' + slot + '">+ ' + @json(__('patients.add_component')) + '</button>' +
                '<div class="meal-add-search hidden mt-1.5" id="mealAddSearch_' + slot + '">' +
                '<input type="text" class="field-input meal-add-search-input !py-1 !text-xs" data-slot="' + slot + '" placeholder="' + @json(__('onsite.search_component_to_add')) + '">' +
                '<div class="meal-search-results mt-1 space-y-1" id="mealAddResults_' + slot + '"></div>' +
                '</div>' +
                '</div>';
        });

        html += '</div>';

        if (result.warnings && result.warnings.length) {
            html += '<div class="mt-3 rounded-xl bg-amber-50 px-4 py-3 text-sm text-amber-900">' + result.warnings.join('<br>') + '</div>';
        }

        body.innerHTML = html;
    }

    /**
     * Meal item editing — swap a generated component for another (kept at
     * the exact same portion size) or add a new one from search, both
     * sourced from the diet-type-filtered catalogue `componentsWithDetails`
     * already powers for the onsite wizard's own Step 9 editor. Mutates
     * `latestMealPlanPreview` in place (the same object Save/Save & email
     * submit verbatim), then re-renders so calories/macros/fill color stay
     * in sync with the edit.
     */
    var mealComponentsCatalog = [];

    function fetchMealComponentsCatalog(callback) {
        var wizard = selectedDietWizardKey();
        if (!wizard) { callback([]); return; }

        var locale = @json(app()->getLocale());
        var url = @json(route('portal.api.components.with-details')) +
            '?locale=' + locale +
            '&diet_type=' + encodeURIComponent(wizard.key) +
            '&excluded_ids=' + Array.from(excludedIds).join(',');

        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }, cache: 'no-store' })
            .then(function (r) { return r.json(); })
            .then(function (data) { callback((data.components && Array.isArray(data.components)) ? data.components : []); })
            .catch(function () { callback([]); });
    }

    function closeAllMealSearches() {
        document.querySelectorAll('.meal-swap-search, .meal-add-search').forEach(function (el) { el.classList.add('hidden'); });
    }

    function toggleSwapSearch(slot, index) {
        var target = document.getElementById('mealSwapSearch_' + slot + '_' + index);
        if (!target) return;
        var wasOpen = !target.classList.contains('hidden');
        closeAllMealSearches();
        if (wasOpen) return;

        target.classList.remove('hidden');
        var resultsEl = document.getElementById('mealSwapResults_' + slot + '_' + index);
        resultsEl.innerHTML = '<p class="text-xs text-ink-400">' + @json(__('common.loading')) + '</p>';

        fetchMealComponentsCatalog(function (list) {
            mealComponentsCatalog = list;
            resultsEl.innerHTML = '';
        });
    }

    function toggleAddSearch(slot) {
        var target = document.getElementById('mealAddSearch_' + slot);
        if (!target) return;
        var wasOpen = !target.classList.contains('hidden');
        closeAllMealSearches();
        if (wasOpen) return;

        target.classList.remove('hidden');
        var resultsEl = document.getElementById('mealAddResults_' + slot);
        resultsEl.innerHTML = '<p class="text-xs text-ink-400">' + @json(__('common.loading')) + '</p>';

        fetchMealComponentsCatalog(function (list) {
            mealComponentsCatalog = list;
            resultsEl.innerHTML = '';
        });
    }

    function renderMealSearchResults(resultsEl, term, excludeIds, onPick) {
        term = (term || '').trim().toLowerCase();
        if (term.length < 2) { resultsEl.innerHTML = ''; return; }

        var matches = mealComponentsCatalog.filter(function (c) {
            return c.name.toLowerCase().indexOf(term) !== -1 && excludeIds.indexOf(String(c.id)) === -1;
        }).slice(0, 8);

        if (!matches.length) {
            resultsEl.innerHTML = '<p class="px-1 text-xs text-ink-400">' + @json(__('onsite.no_matching_components')) + '</p>';
            return;
        }

        resultsEl.innerHTML = '';
        matches.forEach(function (c) {
            var btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'meal-component-result block w-full rounded-lg px-2 py-1 text-start text-xs hover:bg-brand-50';
            btn.textContent = c.name;
            btn.addEventListener('click', function () { onPick(c); });
            resultsEl.appendChild(btn);
        });
    }

    function componentToItem(component, grams) {
        var refQty = parseFloat(component.reference_quantity) || 100;
        var factor = refQty > 0 ? grams / refQty : 0;
        var foodGroup = (component.food_groups && component.food_groups[0] && component.food_groups[0].key) || null;

        return {
            component_id: component.id,
            name: component.name,
            name_en: component.name_en,
            name_ar: component.name_ar,
            food_group: foodGroup,
            grams: grams,
            unit: component.unit || 'g',
            calories: Math.round((parseFloat(component.calories) || 0) * factor * 10) / 10,
            protein_g: Math.round((parseFloat(component.protein) || 0) * factor * 10) / 10,
            carbs_g: Math.round((parseFloat(component.carbs) || 0) * factor * 10) / 10,
            fat_g: Math.round((parseFloat(component.fat) || 0) * factor * 10) / 10,
        };
    }

    function recomputeMealTotals(slot) {
        var meal = latestMealPlanPreview.meals[slot];
        if (!meal) return;

        var sums = meal.components.reduce(function (acc, item) {
            acc.calories += parseFloat(item.calories) || 0;
            acc.protein_g += parseFloat(item.protein_g) || 0;
            acc.carbs_g += parseFloat(item.carbs_g) || 0;
            acc.fat_g += parseFloat(item.fat_g) || 0;
            return acc;
        }, { calories: 0, protein_g: 0, carbs_g: 0, fat_g: 0 });

        meal.calories = Math.round(sums.calories * 10) / 10;
        meal.protein_g = Math.round(sums.protein_g * 10) / 10;
        meal.carbs_g = Math.round(sums.carbs_g * 10) / 10;
        meal.fat_g = Math.round(sums.fat_g * 10) / 10;
    }

    function removeMealItem(slot, index) {
        var meal = latestMealPlanPreview.meals[slot];
        if (!meal || !meal.components[index]) return;

        meal.components.splice(index, 1);
        recomputeMealTotals(slot);
        renderMealPlanPreview(latestMealPlanPreview);
    }

    function swapMealItem(slot, index, component) {
        var meal = latestMealPlanPreview.meals[slot];
        if (!meal || !meal.components[index]) return;

        // Same portion size as the item being replaced — only the food
        // item changes, not how much of it.
        var grams = meal.components[index].grams;
        meal.components[index] = componentToItem(component, grams);

        recomputeMealTotals(slot);
        renderMealPlanPreview(latestMealPlanPreview);
    }

    function addMealItem(slot, component) {
        var meal = latestMealPlanPreview.meals[slot];
        if (!meal) return;

        // No generated portion to match — default to the component's own
        // full reference serving (e.g. 100 g, or 15 ml for an oil).
        var refQty = parseFloat(component.reference_quantity) || 100;
        meal.components.push(componentToItem(component, refQty));

        recomputeMealTotals(slot);
        renderMealPlanPreview(latestMealPlanPreview);
    }

    document.getElementById('mealPlannerBody').addEventListener('click', function (e) {
        var swapBtn = e.target.closest('.meal-item-swap');
        if (swapBtn) { toggleSwapSearch(swapBtn.dataset.slot, parseInt(swapBtn.dataset.index, 10)); return; }

        var removeBtn = e.target.closest('.meal-item-remove');
        if (removeBtn) { removeMealItem(removeBtn.dataset.slot, parseInt(removeBtn.dataset.index, 10)); return; }

        var addToggle = e.target.closest('.meal-add-toggle');
        if (addToggle) { toggleAddSearch(addToggle.dataset.slot); return; }
    });

    document.getElementById('mealPlannerBody').addEventListener('input', function (e) {
        if (e.target.classList.contains('meal-swap-search-input')) {
            var slot = e.target.dataset.slot;
            var index = parseInt(e.target.dataset.index, 10);
            var meal = latestMealPlanPreview.meals[slot];
            var excludeIds = meal ? meal.components.map(function (c) { return String(c.component_id); }) : [];
            var resultsEl = document.getElementById('mealSwapResults_' + slot + '_' + index);

            renderMealSearchResults(resultsEl, e.target.value, excludeIds, function (component) {
                swapMealItem(slot, index, component);
            });
        } else if (e.target.classList.contains('meal-add-search-input')) {
            var addSlot = e.target.dataset.slot;
            var addMeal = latestMealPlanPreview.meals[addSlot];
            var addExcludeIds = addMeal ? addMeal.components.map(function (c) { return String(c.component_id); }) : [];
            var addResultsEl = document.getElementById('mealAddResults_' + addSlot);

            renderMealSearchResults(addResultsEl, e.target.value, addExcludeIds, function (component) {
                addMealItem(addSlot, component);
            });
        }
    });

    // ── Reopen a previously saved menu when editing (see
    //    ReviewerController::edit()'s $existingMenuPlan) — rebuilt into the
    //    same shape previewMealPlan() produces so the same renderer and
    //    Save/Save & email flow both just work on it. ──
    @if (($existingMenuPlan ?? null) && ($existingMenuPlan->structure[0] ?? null))
        (function () {
            var day = @json($existingMenuPlan->structure[0]);
            var preview = { status: true, meals: {}, warnings: day.warnings || [] };

            (day.meals || []).forEach(function (meal) {
                // A plan saved earlier can predate exclusions ticked since,
                // or the checkbox list changing — never reopen it still
                // carrying an item that's on the current exclusion list.
                var items = (meal.items || []).filter(function (i) {
                    return !i.component_id || !excludedIds.has(i.component_id);
                });
                preview.meals[meal.slot] = {
                    target_calories: meal.target_calories,
                    calories: meal.actual_calories ?? items.reduce(function (s, i) { return s + (i.calories || 0); }, 0),
                    protein_g: items.reduce(function (s, i) { return s + (i.protein_g || 0); }, 0),
                    carbs_g: items.reduce(function (s, i) { return s + (i.carbs_g || 0); }, 0),
                    fat_g: items.reduce(function (s, i) { return s + (i.fat_g || 0); }, 0),
                    components: items,
                };
            });

            latestMealPlanPreview = preview;
            document.addEventListener('DOMContentLoaded', function () {
                renderMealPlanPreview(preview);
                document.getElementById('mealPlannerRegenerateBtn').style.display = '';
                setMealPlanSaveEnabled(true);
            });
        })();
    @endif
</script>