@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">
                @error('file_number')<p class="field-error">{{ $message }}</p>@enderror
            </div>
            <div>
                <label for="first_name" class="field-label">{{ __('patients.first_name') }} *</label>
                <input id="first_name" name="first_name" type="text" required value="{{ old('first_name', $reviewer->first_name) }}" class="field-input">
                @error('first_name')<p class="field-error">{{ $message }}</p>@enderror
            </div>
            <div>
                <label for="last_name" class="field-label">{{ __('patients.last_name') }} *</label>
                <input id="last_name" name="last_name" type="text" required value="{{ old('last_name', $reviewer->last_name) }}" class="field-input">
                @error('last_name')<p class="field-error">{{ $message }}</p>@enderror
            </div>

            <div>
                <label for="gender" class="field-label">{{ __('patients.gender') }} *</label>
                <select id="gender" name="gender" required class="field-input">
                    @foreach (['male', 'female'] as $g)
                        <option value="{{ $g }}" @selected(old('gender', $reviewer->gender) === $g)>{{ __('common.' . $g) }}</option>
                    @endforeach
                </select>
                @error('gender')<p class="field-error">{{ $message }}</p>@enderror
            </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" required
                       value="{{ old('date_of_birth', $reviewer->date_of_birth?->format('Y-m-d')) }}" class="field-input">
                @error('date_of_birth')<p class="field-error">{{ $message }}</p>@enderror
            </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" min="80" max="250" required
                       value="{{ old('height_cm', $reviewer->height_cm) }}" class="field-input">
                @error('height_cm')<p class="field-error">{{ $message }}</p>@enderror
            </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" min="25" max="400" required
                       value="{{ old('weight_kg', $reviewer->weight_kg) }}" class="field-input">
                @error('weight_kg')<p class="field-error">{{ $message }}</p>@enderror
            </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="0.1" 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="0.1" 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="hip_cm" type="number" step="0.1" 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="0.1" 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" required
                   value="{{ old('activity_level', $reviewer->activity_level) }}">
            @error('activity_level')<p class="field-error">{{ $message }}</p>@enderror
        </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" required
                   value="{{ old('diet_type_id', $reviewer->diet_type_id) }}">
            @error('diet_type_id')<p class="field-error">{{ $message }}</p>@enderror
        </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" required class="field-input">
                    @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>
                <input id="meals_per_day" name="meals_per_day" type="number" min="2" max="8" required
                       value="{{ old('meals_per_day', $reviewer->meals_per_day ?? 3) }}" class="field-input">
            </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>
                <p class="numeric mt-1 text-2xl font-extrabold text-ink-900" id="prev_bmr">—</p>
                <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>
                <p class="numeric mt-1 text-2xl font-extrabold text-brand-700" id="prev_target">—</p>
                <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', 'carbs' => 'bg-amber-50 text-amber-700', 'fat' => 'bg-sky-50 text-sky-700'] as $macro => $tone)
                <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') }} · <span id="prev_{{ $macro }}_pct">0</span>%</p>
                </div>
            @endforeach
        </div>

        <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>

    {{-- 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). --}}
    <section class="card-sc">
        <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="">
    </section>

    {{-- 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);

    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');
        var carbPct = dietCard ? parseFloat(dietCard.dataset.carbPercent) : 45;
        var proteinPct = dietCard ? parseFloat(dietCard.dataset.proteinPercent) : 25;
        var fatPct = dietCard ? parseFloat(dietCard.dataset.fatPercent) : 30;

        var proteinG = Math.round((target * proteinPct / 100) / 4);
        var carbsG = Math.round((target * carbPct / 100) / 4);
        var fatG = Math.round((target * fatPct / 100) / 9);

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

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

        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());
        setTextIfExists('prev_protein_pct', Math.round(proteinPct));
        setTextIfExists('prev_carbs_pct', Math.round(carbPct));
        setTextIfExists('prev_fat_pct', Math.round(fatPct));

        setTextIfExists('prev_water', water);
    }

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

    ['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) {
                exclusionsPool = (data.components && Array.isArray(data.components)) ? data.components : [];
                renderExclusionGroups(exclusionsPool);
                renderExclusionChips();
            })
            .catch(function (e) { console.error('Error loading components:', e); });
    }

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

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

        FOOD_GROUP_ORDER.forEach(function (groupKey) {
            var items = 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(c) {
        var picked = excludedIds.has(c.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>' + c.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;
            if (checked) { excludedIds.add(c.id); row.classList.add('picked'); }
            else { excludedIds.delete(c.id); row.classList.remove('picked'); }
            renderExclusionChips();
            document.getElementById('excluded_components_json').value = JSON.stringify(Array.from(excludedIds));
        });
        return row;
    }

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

        Array.from(excludedIds).forEach(function (id) {
            var c = exclusionsPool.find(function (p) { return p.id === id; });
            if (!c) return;
            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);
    });

    // ── 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 = parseFloat((document.getElementById('prev_target') || {}).textContent.replace(/,/g, '')) || 0;
        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 mealColors = { breakfast: '#17b8a6', lunch: '#F2B705', dinner: '#E8792A' };
    var macroColors = { protein: '#0c6bab', carbs: '#5F8A31', fat: '#c98a06' };
    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;

    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 = parseFloat((document.getElementById('prev_target') || {}).textContent.replace(/,/g, '')) || 0;
        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),
                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;

            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:' + mealColors[slot] + ';display:inline-block;"></span>' +
                '<h3 class="text-base m-0">' + mealLabels[slot] + '</h3>' +
                '<span class="ms-auto numeric text-sm font-bold" style="color:' + mealColors[slot] + '">' + 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:' + mealColors[slot] + ';"></span>' +
                '</div>' +
                macroChart(meal) +
                '<ul class="list-none space-y-1.5 ps-0 m-0">';

            meal.components.forEach(function (c) {
                html += '<li class="flex items-center justify-between text-sm">' +
                    '<span class="text-ink-700">' + c.name + '</span>' +
                    '<span class="numeric font-semibold text-ink-500">' + c.grams + (c.unit === 'ml' ? @json(__('common.ml')) : @json(__('common.grams'))) + '</span>' +
                    '</li>';
            });

            html += '</ul></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;
    }

    // ── 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) {
                var items = meal.items || [];
                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>