@extends('layouts.portal')

@section('title', __('onsite.add') . ' — ' . config('app.name'))
@section('page_title', __('onsite.add'))

@section('page_actions')
    <a href="{{ route('portal.onsite-consultations.index') }}" class="btn-ghost !px-5 !py-2.5 text-sm no-underline">{{ __('onsite.back') }}</a>
@endsection

@push('head')
<style>
    /* Wizard progress bar */
    .wizard-steps { display: flex; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: .5rem 0; }
    .wizard-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; min-width: 70px; }
    .wizard-step:not(:last-child)::after {
        content: ''; position: absolute; top: 20px; left: 50%; width: 100%; height: 3px; background: #e2e8f0; z-index: 0;
    }
    .wizard-step[data-step="1"]::after { display: none; }
    .wizard-step.done::after, .wizard-step.active::after { background: #5F8A31; }
    .step-circle {
        width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 16px; border: 3px solid #e2e8f0; background: #fff; color: #adb5bd; z-index: 1;
        position: relative; transition: all .3s;
    }
    .wizard-step.done .step-circle, .wizard-step.active .step-circle { background: #5F8A31; border-color: #5F8A31; color: #fff; }
    .wizard-step.active .step-circle { box-shadow: 0 0 0 5px rgba(95,138,49,.15); }
    .step-label { margin-top: 8px; font-size: 12px; font-weight: 600; color: #adb5bd; text-align: center; }
    .wizard-step.done .step-label, .wizard-step.active .step-label { color: #5F8A31; }

    .step-panel { display: none; }
    .step-panel.active { display: block; }

    .calc-card { border-radius: 10px; padding: 16px 20px; margin-bottom: 16px; }
    .calc-card .calc-value { font-size: 28px; font-weight: 700; line-height: 1.1; }
    .calc-card .calc-unit { font-size: 14px; color: #6c757d; }
    .calc-card .calc-label { font-size: 13px; color: #6c757d; margin-bottom: 4px; }
    .formula-box {
        background: #f8f9fa; border-left: 4px solid #5F8A31; padding: 12px 16px; border-radius: 4px;
        font-family: monospace; font-size: 13px; margin-bottom: 12px;
    }
    .ibw-status { display: inline-block; padding: 4px 12px; border-radius: 20px; font-weight: 600; font-size: 13px; }
    .ibw-status.underweight { background:#cfe2ff; color:#084298; }
    .ibw-status.normal      { background:#d1e7dd; color:#0f5132; }
    .ibw-status.overweight  { background:#fff3cd; color:#664d03; }
    .ibw-status.obese       { background:#f8d7da; color:#842029; }

    .single-eer-slider {
        width: 100%; height: 6px; border-radius: 3px; background: transparent; outline: none;
        -webkit-appearance: none; appearance: none; position: relative; z-index: 3;
    }
    .single-eer-slider::-webkit-slider-thumb {
        -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
        background: linear-gradient(135deg, #5F8A31, #F2B705); cursor: pointer;
        box-shadow: 0 2px 8px rgba(95,138,49,.4); border: 2px solid #fff; transition: all 0.2s;
    }
    .single-eer-slider::-moz-range-thumb {
        width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #5F8A31, #F2B705);
        cursor: pointer; box-shadow: 0 2px 8px rgba(95,138,49,.4); border: 2px solid #fff;
    }

    .diet-card, .activity-card { cursor: pointer; transition: all 0.3s ease; background: #fff; }
    .diet-card:hover, .activity-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }
    .diet-card.border-primary, .activity-card.border-primary { background: #f2f6e9; box-shadow: 0 4px 12px rgba(95,138,49,.2); }

    /* Step 9: meal editor */
    #step9 {
        --ink:#263A17; --ink-soft:#615B4F; --line:#E1EBC9;
        --breakfast:#17b8a6; --lunch:#F2B705; --dinner:#E8792A;
        --carb:#5F8A31; --protein:#E8792A; --fat:#F2B705;
        --ok:#1eae76; --over:#e05252;
    }
    #step9 .day-tabs .nav-link{font-size:.78rem;color:var(--ink-soft);border-radius:6px;padding:.3rem .8rem;}
    #step9 .day-tabs .nav-link.active{background:var(--ink);color:#fff;}
    #step9 .meal-card{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:1rem;overflow:hidden;}
    #step9 .meal-toggle{width:100%;background:none;border:0;padding:.95rem 1.1rem;display:flex;align-items:center;gap:.75rem;text-align:start;}
    #step9 .meal-dot{width:11px;height:11px;border-radius:50%;flex:none;}
    #step9 .meal-name{font-weight:600;font-size:.95rem;}
    #step9 .meal-stats{margin-inline-start:auto;display:flex;align-items:center;gap:1rem;font-size:.75rem;color:var(--ink-soft);white-space:nowrap;}
    #step9 .meal-progress{width:110px;height:6px;background:#eef0f7;border-radius:99px;overflow:hidden;flex:none;}
    #step9 .meal-progress > span{display:block;height:100%;border-radius:99px;transition:width .25s;}
    #step9 .chev{flex:none;transition:transform .25s;color:var(--ink-soft);}
    #step9 [aria-expanded="true"] > .chev{transform:rotate(180deg);}
    #step9 .macro-block{border-top:1px solid var(--line);}
    #step9 .macro-toggle{width:100%;background:#fbfbfe;border:0;padding:.7rem 1.1rem;padding-inline-start:2.1rem;display:flex;align-items:center;gap:.6rem;text-align:start;}
    #step9 .macro-pill{font-size:.68rem;font-weight:600;color:#fff;border-radius:99px;padding:.15rem .6rem;flex:none;background:var(--over);transition:background .2s;}
    #step9 .macro-pill.is-complete{background:var(--ok);}
    #step9 .macro-count{margin-inline-start:auto;font-size:.72rem;color:var(--ink-soft);}
    #step9 .group-toggle{width:100%;background:#fff;border:0;border-top:1px dashed var(--line);
        padding:.6rem 1.1rem;padding-inline-start:3.2rem;display:flex;align-items:center;gap:.6rem;text-align:start;}
    #step9 .group-name{font-size:.82rem;font-weight:500;}
    #step9 .group-status-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--over);transition:background .2s;}
    #step9 .group-status-dot.is-complete{background:var(--ok);}
    #step9 .group-target{margin-inline-start:auto;font-size:.7rem;color:var(--ink-soft);white-space:nowrap;}
    #step9 .group-target b{font-weight:600;}
    #step9 .group-target.is-over b{color:var(--over);}
    #step9 .group-target.is-ok b{color:var(--ok);}
    #step9 .comp-search{position:relative;margin:.55rem 1.1rem .35rem;margin-inline-start:3.9rem;}
    #step9 .comp-search-icon{position:absolute;inset-inline-start:.65rem;top:50%;transform:translateY(-50%);color:var(--ink-soft);pointer-events:none;display:flex;}
    #step9 .comp-search input{width:100%;border:1px solid var(--line);border-radius:99px;background:#fff;
        font-size:.78rem;padding:.45rem .75rem .45rem 2.1rem;color:var(--ink);}
    html[dir="rtl"] #step9 .comp-search input{padding:.45rem 2.1rem .45rem .75rem;}
    #step9 .comp-search input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(38,58,23,.10);}
    #step9 .comp-search-clear{position:absolute;inset-inline-end:.4rem;top:50%;transform:translateY(-50%);
        border:0;background:#eef0fb;color:var(--ink-soft);width:20px;height:20px;border-radius:50%;
        display:none;align-items:center;justify-content:center;font-size:.7rem;cursor:pointer;}
    #step9 .comp-search.has-value .comp-search-clear{display:flex;}
    #step9 .comp-empty{padding:.6rem 1.1rem .8rem;padding-inline-start:3.9rem;font-size:.78rem;color:var(--ink-soft);background:#fcfcff;}
    #step9 .comp-search-hint{margin:0;padding:.6rem 1.1rem .8rem;padding-inline-start:3.9rem;font-size:.75rem;font-style:italic;color:var(--ink-soft);background:#fcfcff;}
    #step9 .comp-list{padding:.35rem 1.1rem .8rem;padding-inline-start:3.9rem;background:#fcfcff;border-top:1px dashed var(--line);}
    #step9 .comp-wrap{border:1px solid var(--line);border-radius:8px;background:#fff;margin-bottom:.4rem;overflow:hidden;}
    #step9 .comp-wrap:hover{border-color:#c9cfeb;}
    #step9 .comp-wrap.checked{border-color:var(--ink);background:#f4f6ff;}
    #step9 .comp-wrap.editing{border-color:var(--ink);box-shadow:0 2px 10px rgba(38,58,23,.10);}
    #step9 .comp-item{display:flex;align-items:center;gap:.65rem;padding:.45rem .6rem;cursor:pointer;margin-bottom:0;}
    #step9 .comp-name{font-size:.8rem;font-weight:500;color:#3a3f57;}
    #step9 .comp-macros{margin-inline-start:auto;font-size:.7rem;color:var(--ink-soft);white-space:nowrap;}
    #step9 .comp-macros .edited-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lunch);margin-inline-start:.35rem;vertical-align:middle;}
    #step9 .edit-btn{border:0;background:none;color:var(--ink-soft);flex:none;padding:.2rem .3rem;border-radius:6px;}
    #step9 .edit-btn:hover{background:#eef0fb;color:var(--ink);}
    #step9 .comp-wrap.editing .edit-btn{background:var(--ink);color:#fff;}
    #step9 .comp-editor{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease, opacity .25s ease;background:#f8f9ff;border-top:1px dashed transparent;}
    #step9 .comp-wrap.editing .comp-editor{max-height:140px;opacity:1;border-top-color:var(--line);}
    #step9 .comp-editor-inner{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;padding:.7rem .8rem;}
    #step9 .stepper-field{display:flex;flex-direction:column;gap:.25rem;}
    #step9 .stepper-label{font-size:.65rem;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;}
    #step9 .stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:99px;background:#fff;overflow:hidden;}
    #step9 .stepper button{border:0;background:none;width:30px;height:30px;font-size:1rem;color:var(--ink);}
    #step9 .stepper button:hover{background:#eef0fb;}
    #step9 .stepper input{border:0;width:58px;text-align:center;font-size:.78rem;font-weight:600;color:var(--ink);background:transparent;}
    #step9 .reset-btn{border:0;background:none;font-size:.7rem;color:var(--ink-soft);text-decoration:underline;padding:.3rem .2rem;margin-inline-start:auto;}
    #step9 .reset-btn:hover{color:var(--over);}

    @media (max-width: 640px){
        #step9 .meal-progress{display:none;}
        #step9 .comp-list{padding-inline-start:1.6rem;}
        #step9 .group-toggle{padding-inline-start:2rem;}
        #step9 .macro-toggle{padding-inline-start:1.5rem;}
    }

    /* Excluded-components picker (Step 7) — vanilla replacement for select2 */
    .comp-picker { border: 1px solid #e2e8f0; border-radius: 10px; max-height: 280px; 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; justify-content: space-between;
        padding: .35rem .7rem; background: #F2F6E9; border-radius: 6px 6px 0 0;
        font-size: .78rem; font-weight: 700; color: #263A17;
    }
    .excluded-group-head .count { font-weight: 500; color: #7FA945; }
    .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>
@endpush

@section('content')

    <div class="card-sc">

        {{-- Wizard progress --}}
        <div class="wizard-steps">
            <div class="wizard-step active" data-step="1"><div class="step-circle">1</div><div class="step-label">{{ __('onsite.basic_info') }}</div></div>
            <div class="wizard-step" data-step="2"><div class="step-circle">2</div><div class="step-label">{{ __('onsite.physical_activity') }}</div></div>
            <div class="wizard-step" data-step="3"><div class="step-circle">3</div><div class="step-label">{{ __('onsite.ideal_body_weight') }}</div></div>
            <div class="wizard-step" data-step="4"><div class="step-circle">4</div><div class="step-label">{{ __('onsite.diet_type_selection') }}</div></div>
            <div class="wizard-step" data-step="5"><div class="step-circle">5</div><div class="step-label">{{ __('onsite.eer_cutoff_range') }}</div></div>
            <div class="wizard-step" data-step="6"><div class="step-circle">6</div><div class="step-label">{{ __('onsite.macro_configuration') }}</div></div>
            <div class="wizard-step" data-step="7"><div class="step-circle">7</div><div class="step-label">{{ __('onsite.excluded_components') }}</div></div>
            <div class="wizard-step" data-step="8"><div class="step-circle">8</div><div class="step-label">{{ __('onsite.meal_distribution') }}</div></div>
            <div class="wizard-step" data-step="9"><div class="step-circle">9</div><div class="step-label">{{ __('onsite.weekly_meal_planner') }}</div></div>
            <div class="wizard-step" data-step="10"><div class="step-circle">10</div><div class="step-label">{{ __('onsite.summary_notes') }}</div></div>
        </div>

        <form method="POST" action="{{ route('portal.onsite-consultations.store') }}" id="onsiteForm" novalidate>
            @csrf

            <input type="hidden" name="consultation_id" id="h_consultation_id" value="{{ $consultation->id ?? '' }}">

            <input type="hidden" name="bmr" id="h_bmr">
            <input type="hidden" name="tdee" id="h_tdee">
            <input type="hidden" name="ibw_devine" id="h_ibw_devine">
            <input type="hidden" name="ibw_hamwi" id="h_ibw_hamwi">
            <input type="hidden" name="weight_deviation" id="h_weight_deviation">

            {{-- STEP 1 — Basic Information --}}
            <div class="step-panel active" id="step1">
                <h5 class="mb-4 text-primary fw-semibold"><i class="ri-user-3-line me-2"></i>{{ __('onsite.basic_info') }}</h5>

                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">{{ __('onsite.visitor_name') }} <small class="text-muted">({{ __('onsite.optional') }})</small></label>
                        <input type="text" name="patient_name" class="form-control" value="{{ old('patient_name') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('onsite.id_iqama_number') }} <small class="text-muted">({{ __('onsite.optional') }})</small></label>
                        <input type="text" name="id_number" id="id_number" class="form-control" value="{{ old('id_number') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('onsite.gender') }} <span class="text-danger">*</span></label>
                        <select name="gender" id="s_gender" class="form-control required">
                            <option value="">{{ __('onsite.choose') }}</option>
                            <option value="male" @selected(old('gender')=='male')>{{ __('common.male') }}</option>
                            <option value="female" @selected(old('gender')=='female')>{{ __('common.female') }}</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('onsite.date_of_birth') }} <span class="text-danger">*</span></label>
                        <input type="date" name="date_of_birth" id="s_dob" class="form-control required" value="{{ old('date_of_birth') }}" max="{{ date('Y-m-d', strtotime('-10 years')) }}">
                        <div class="invalid-feedback" id="dob_age_error">{{ __('onsite.min_age_10') }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('onsite.weight_kg') }} <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="number" name="weight" id="s_weight" class="form-control required" placeholder="0.0" step="0.1" min="1" max="500" value="{{ old('weight') }}">
                            <span class="input-group-text">kg</span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ __('onsite.height_cm') }} <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="number" name="height" id="s_height" class="form-control required" placeholder="0" step="0.1" min="50" max="300" value="{{ old('height') }}">
                            <span class="input-group-text">cm</span>
                        </div>
                    </div>

                    <div class="col-12">
                        <label class="form-label">{{ __('onsite.activity_level') }} <span class="text-danger">*</span></label>
                        <div class="row g-2" id="activityCards">
                            @php
                                $activities = [
                                    'sedentary'         => ['icon'=>'ri-sofa-line',   'mult'=>'1.0'],
                                    'lightly_active'    => ['icon'=>'ri-walk-line',    'mult'=>'1.5'],
                                    'moderately_active' => ['icon'=>'ri-run-line',     'mult'=>'1.7'],
                                    'very_active'       => ['icon'=>'ri-cycling-line', 'mult'=>'1.8'],
                                ];
                            @endphp
                            @foreach ($activities as $key => $act)
                                <div class="col-md-6 col-lg-3">
                                    <div class="activity-card border rounded p-3 text-center h-100 {{ old('activity_level')==$key ? 'border-primary' : '' }}"
                                         data-value="{{ $key }}" data-mult="{{ $act['mult'] }}" onclick="selectActivity(this)">
                                        <i class="{{ $act['icon'] }} fs-24 text-primary mb-2 d-block"></i>
                                        <div class="fw-semibold">{{ __('onsite.activity.' . $key) }}</div>
                                        <small class="text-muted">× {{ $act['mult'] }}</small>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <input type="hidden" name="activity_level" id="s_activity" value="{{ old('activity_level') }}">
                        <div id="activity_error" class="text-danger mt-1" style="display:none;">{{ __('onsite.please_select_activity') }}</div>
                    </div>
                </div>
            </div>

            {{-- STEP 2 — Physical Activity / EER --}}
            <div class="step-panel" id="step2">
                <h5 class="mb-4 text-primary fw-semibold"><i class="ri-fire-line me-2"></i>{{ __('onsite.physical_activity') }} — {{ __('onsite.caloric_needs') }}</h5>

                <div class="alert alert-primary d-flex gap-3 flex-wrap mb-4" id="step2_summary"></div>

                <div class="row g-3 mb-4">
                    <div class="col-12">
                        <h6 class="fw-semibold text-secondary">{{ __('onsite.eer_calculation') }}</h6>
                        <div class="formula-box" id="eer_formula_box"></div>
                    </div>
                </div>

                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="calc-card border border-success">
                            <div class="calc-label">{{ __('onsite.eer') }}</div>
                            <div class="calc-value text-success" id="r_eer">—</div>
                            <div class="calc-unit">kcal / day</div>
                            <div class="text-muted mt-2" style="font-size:12px;" id="r_eer_detail"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="calc-card border border-warning">
                            <div class="calc-label">{{ __('onsite.eer_adjusted') }}</div>
                            <div class="calc-value text-warning" id="r_eer_adjusted">—</div>
                            <div class="calc-unit">kcal / day</div>
                            <div class="text-muted mt-2" style="font-size:12px;" id="r_eer_adjusted_detail"></div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- STEP 3 — IBW --}}
            <div class="step-panel" id="step3">
                <h5 class="mb-4 text-primary fw-semibold"><i class="ri-scales-3-line me-2"></i>{{ __('onsite.ideal_body_weight') }} (IBW)</h5>

                <div class="row g-3 mb-4">
                    <div class="col-12">
                        <div class="formula-box" id="ibw_devine_formula_box"></div>
                        <h6 class="fw-semibold text-secondary mt-3">{{ __('onsite.bmi_title') }}</h6>
                        <div class="formula-box" id="bmi_formula_box"></div>
                    </div>
                </div>

                <div class="row g-3">
                    <div class="col-md-4">
                        <div class="calc-card border border-primary">
                            <div class="calc-label">{{ __('onsite.ideal_body_weight') }}</div>
                            <div class="calc-value text-primary" id="r_ibw_devine">—</div>
                            <div class="calc-unit">kg</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="calc-card border" id="deviation_card">
                            <div class="calc-label">{{ __('onsite.excess_weight') }}</div>
                            <div class="calc-value" id="r_deviation">—</div>
                            <div class="calc-unit">kg</div>
                            <div class="mt-2" id="r_ibw_status"></div>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-md-6">
                        <table class="table table-sm table-bordered mb-0" style="font-size:13px;">
                            <thead class="table-light"><tr><th>BMI</th><th>{{ __('onsite.status') }}</th></tr></thead>
                            <tbody>
                                <tr><td>&lt; 18.4</td><td>{{ __('onsite.underweight') }}</td></tr>
                                <tr><td>18.5 - 24.9</td><td>{{ __('onsite.normal_weight') }}</td></tr>
                                <tr><td>25.0 - 39.9</td><td>{{ __('onsite.overweight') }}</td></tr>
                                <tr><td>&ge; 40.0</td><td>{{ __('onsite.obese') }}</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- STEP 4 — Diet Type --}}
            <div class="step-panel" id="step4">
                <h5 class="mb-4 text-primary fw-semibold"><i class="ri-heart-pulse-line me-2"></i>{{ __('onsite.diet_type_selection') }}</h5>

                <div class="row g-3" id="dietTypeCards">
                    @php
                        $dietIcons = [
                            'diabetes' => ['ri-hospital-line', 'text-danger'],
                            'weight_reduction' => ['ri-arrow-down-line', 'text-warning'],
                            'ketogenic' => ['ri-drop-line', 'text-info'],
                            'building_muscles' => ['ri-boxing-line', 'text-success'],
                            'healthy_weight' => ['ri-heart-line', 'text-primary'],
                        ];
                        $dietSlugMap = [
                            'diabetes' => 'diabetes',
                            'weight_reduction' => 'weight-loss',
                            'ketogenic' => 'keto',
                            'building_muscles' => 'muscle-building',
                            'healthy_weight' => 'maintain-weight',
                        ];
                    @endphp
                    @foreach ($dietIcons as $key => [$icon, $tone])
                        <div class="col-md-4">
                            <div class="diet-card border rounded p-4 text-center h-100" data-diet="{{ $key }}" data-slug="{{ $dietSlugMap[$key] }}" onclick="selectDietTypeStep4(this)">
                                <i class="{{ $icon }} fs-32 {{ $tone }} mb-2 d-block"></i>
                                <div class="fw-semibold">{{ __('onsite.diet_' . ($key === 'weight_reduction' ? 'weight_reduction' : ($key === 'building_muscles' ? 'building_muscles' : $key))) }}</div>
                                <small class="text-muted d-block mt-1">0% - {{ $key === 'diabetes' || $key === 'weight_reduction' ? '100' : '120' }}% EER</small>
                            </div>
                        </div>
                    @endforeach
                </div>
                <input type="hidden" id="h_diet_type_step4" name="diet_type_step4">
                <input type="hidden" id="h_diet_phase" name="diet_phase">

                <div id="wrPhaseSelector" class="mt-4" style="display:none;">
                    <label class="form-label fw-semibold d-block">{{ __('onsite.weight_reduction_phase') }}</label>
                    <div class="btn-group" role="group">
                        <input type="radio" class="btn-check" name="wr_phase_radio" id="wrPhase1" checked onclick="selectWrPhase('phase_1')">
                        <label class="btn btn-outline-primary" for="wrPhase1">{{ __('onsite.phase_1') }}</label>
                        <input type="radio" class="btn-check" name="wr_phase_radio" id="wrPhase2" onclick="selectWrPhase('phase_2')">
                        <label class="btn btn-outline-primary" for="wrPhase2">{{ __('onsite.phase_2') }}</label>
                    </div>
                </div>

                <div id="diet_type_error" class="text-danger mt-2" style="display:none;">{{ __('onsite.please_select') }}</div>
            </div>

            {{-- STEP 5 — EER Cutoff Range --}}
            <div class="step-panel" id="step5">
                <h5 class="mb-4 text-primary fw-semibold"><i class="ri-slider-line me-2"></i>{{ __('onsite.eer_cutoff_range') }}</h5>

                <div class="alert alert-info mb-4"><i class="ri-information-line me-2"></i>{{ __('onsite.cutoff_range_note') }}</div>

                <div class="row g-4 mb-4">
                    <div class="col-md-6">
                        <div class="calc-card border border-primary">
                            <div class="calc-label">{{ __('onsite.eer_minimum') }}</div>
                            <div class="calc-value text-primary" id="r_eer_min">—</div>
                            <div class="calc-unit">kcal / day</div>
                            <small class="text-muted d-block mt-2" id="r_eer_min_formula"></small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="calc-card border border-success">
                            <div class="calc-label">{{ __('onsite.eer_maximum') }}</div>
                            <div class="calc-value text-success" id="r_eer_max">—</div>
                            <div class="calc-unit">kcal / day</div>
                            <small class="text-muted d-block mt-2" id="r_eer_max_formula"></small>
                        </div>
                    </div>
                </div>

                <hr class="my-4">

                <label class="form-label fw-semibold">{{ __('onsite.select_eer_value') }} <small class="text-muted">({{ __('onsite.drag_to_select') }})</small></label>
                <div style="position: relative; margin: 40px 0;">
                    <div style="position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 4px; background: #e9ecef; border-radius: 2px; z-index: 1;"></div>
                    <div id="slider-progress" style="position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 4px; background: #5F8A31; border-radius: 2px; z-index: 2; pointer-events: none;"></div>
                    <input type="range" id="slider_eer_value" class="form-range single-eer-slider" min="1000" max="5000" value="2500" oninput="updateEERSlider()">
                </div>

                <div class="row g-3 mt-2">
                    <div class="col-md-4">
                        <div style="text-align: center; padding: 12px; background: #f8f9fa; border-radius: 6px;">
                            <small class="text-muted d-block">{{ __('onsite.eer_minimum') }}</small>
                            <div style="font-size:16px;font-weight:600;color:#999;"><span id="display_bound_min">1500</span></div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div style="text-align: center; padding: 12px; background: linear-gradient(135deg, #5F8A31, #F2B705); border-radius: 6px; color: white;">
                            <small class="text-white d-block">{{ __('onsite.selected_eer') }}</small>
                            <div style="font-size:24px;font-weight:600;color:white;"><span id="display_eer_selected">2500</span></div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div style="text-align: center; padding: 12px; background: #f8f9fa; border-radius: 6px;">
                            <small class="text-muted d-block">{{ __('onsite.eer_maximum') }}</small>
                            <div style="font-size:16px;font-weight:600;color:#999;"><span id="display_bound_max">3500</span></div>
                        </div>
                    </div>
                </div>

                <div class="alert alert-info mt-3 mb-0"><i class="ri-lightbulb-line me-2"></i><small>{{ __('onsite.eer_selected_for_nutrition') }}</small></div>

                <div class="row g-3 mt-4">
                    <div class="col-12">
                        <div class="alert alert-warning"><strong>{{ __('onsite.selected_diet') }}:</strong> <span id="r_diet_selected" style="font-weight:600;"></span></div>
                    </div>
                </div>

                <input type="hidden" id="h_eer_min_adjusted" name="eer_min_adjusted">
                <input type="hidden" id="h_eer_max_adjusted" name="eer_max_adjusted">
                <input type="hidden" id="h_eer_adjusted_final_min" name="eer_adjusted_final_min">
                <input type="hidden" id="h_eer_adjusted_final_max" name="eer_adjusted_final_max">
            </div>

            {{-- STEP 6 — Macro Configuration --}}
            <div class="step-panel" id="step6">
                <h5 class="mb-4 text-primary fw-semibold"><i class="ri-apple-line me-2"></i>{{ __('onsite.nutrition_goals') }}</h5>

                <div class="alert alert-info mb-4">
                    <i class="ri-information-line me-2"></i><strong>{{ __('onsite.selected_diet') }}:</strong>
                    <span id="step6_diet_label" style="font-weight:600;"></span>
                </div>

                <input type="hidden" id="h_nutrition_goal" name="nutrition_goal">

                <div class="row g-4">
                    @foreach (['carbs' => 'text-primary', 'protein' => 'text-info', 'fat' => 'text-warning'] as $macro => $tone)
                        <div class="col-md-4">
                            <div class="card border">
                                <div class="card-body">
                                    <h6 class="card-title {{ $tone }} fw-semibold mb-3">{{ __('onsite.macro_' . $macro) }}</h6>

                                    <div style="position: relative; margin: 30px 0 12px;">
                                        <div style="position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 4px; background: #e9ecef; border-radius: 2px; z-index: 1;"></div>
                                        <div id="slider_{{ $macro }}_progress" style="position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 4px; background: #5F8A31; border-radius: 2px; z-index: 2; pointer-events: none;"></div>
                                        <input type="range" id="macro_{{ $macro }}_target" class="form-range single-eer-slider" min="0" max="100"
                                               value="{{ $macro === 'carbs' ? 50 : 25 }}" oninput="updateMacroSingleSlider('{{ $macro }}')">
                                    </div>

                                    <div class="text-center">
                                        <span class="fs-20 fw-bold {{ $tone }}"><span id="display_{{ $macro }}_target">{{ $macro === 'carbs' ? 50 : 25 }}</span>%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="row mt-4">
                    <div class="col-12">
                        <div id="macro_validation_message" class="alert alert-warning" style="display:none;">
                            <i class="ri-alert-line me-2"></i><span id="macro_validation_text"></span>
                        </div>
                        <div id="macro_success_message" class="alert alert-success" style="display:none;">
                            <i class="ri-check-line me-2"></i>{{ __('onsite.target_macro_equals_100') }}
                        </div>

                        <div id="calorie_breakdown" class="alert alert-info mt-3" style="display:none;">
                            <h6 class="alert-heading mb-3"><i class="ri-fire-line me-2"></i>{{ __('onsite.calorie_breakdown') }}</h6>
                            <div class="row g-3">
                                @foreach (['carbs' => '#5F8A31', 'protein' => '#0c6bab', 'fat' => '#c98a06'] as $macro => $color)
                                    <div class="col-md-4">
                                        <div style="text-align: center; padding: 12px; background: rgba(255,255,255,0.5); border-radius: 6px;">
                                            <div style="font-size: 12px; color: #666;">{{ __('onsite.macro_' . $macro) }}</div>
                                            <div style="font-size: 20px; font-weight: 600; color: {{ $color }};"><span id="display_{{ $macro }}_calories">0</span></div>
                                            <small style="color: #666;">kcal</small>
                                            <div style="font-size: 11px; color: #999; margin-top: 4px;"><span id="display_{{ $macro }}_percentage">0</span>%</div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <hr style="margin: 12px 0;">
                            <div style="text-align: center; font-weight: 600; color: #5F8A31;">
                                {{ __('onsite.total_energy') }}: <span id="display_total_eer">0</span> kcal/day
                            </div>
                        </div>

                        <div id="gram_breakdown" class="alert alert-success mt-3" style="display:none;">
                            <h6 class="alert-heading mb-3"><i class="ri-scales-2-line me-2"></i>Gram breakdown</h6>
                            <div class="row g-3">
                                @foreach (['carbs' => '#5F8A31', 'protein' => '#0c6bab', 'fat' => '#c98a06'] as $macro => $color)
                                    <div class="col-md-4">
                                        <div style="text-align: center; padding: 12px; background: rgba(255,255,255,0.5); border-radius: 6px;">
                                            <div style="font-size: 12px; color: #666;">{{ __('onsite.macro_' . $macro) }}</div>
                                            <div style="font-size: 20px; font-weight: 600; color: {{ $color }};"><span id="display_{{ $macro }}_grams">0</span></div>
                                            <small style="color: #666;">gm</small>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <input type="hidden" id="h_macro_carbs_target" name="macro_carbs_target">
                <input type="hidden" id="h_macro_carbs_min" name="macro_carbs_min">
                <input type="hidden" id="h_macro_carbs_max" name="macro_carbs_max">
                <input type="hidden" id="h_macro_protein_target" name="macro_protein_target">
                <input type="hidden" id="h_macro_protein_min" name="macro_protein_min">
                <input type="hidden" id="h_macro_protein_max" name="macro_protein_max">
                <input type="hidden" id="h_macro_fat_target" name="macro_fat_target">
                <input type="hidden" id="h_macro_fat_min" name="macro_fat_min">
                <input type="hidden" id="h_macro_fat_max" name="macro_fat_max">
                <input type="hidden" id="h_macro_carbs_grams" name="macro_carbs_grams">
                <input type="hidden" id="h_macro_protein_grams" name="macro_protein_grams">
                <input type="hidden" id="h_macro_fat_grams" name="macro_fat_grams">
            </div>

            {{-- STEP 7 — Dislike / Allergy Exclusions --}}
            <div class="step-panel" id="step7">
                <h5 class="mb-4 text-primary fw-semibold"><i class="ri-forbid-line me-2"></i>{{ __('onsite.excluded_components') }}</h5>

                <div class="alert alert-info mb-4">
                    <i class="ri-information-line me-2"></i><strong>{{ __('onsite.selected_diet') }}:</strong>
                    <span id="step7_diet_label" style="font-weight:600;"></span>
                </div>

                <div class="alert alert-warning mb-4"><i class="ri-alert-line me-2"></i>{{ __('onsite.excluded_components_help') }}</div>

                <input type="text" class="form-control mb-2 excluded-search" placeholder="{{ __('onsite.search_components') }}">
                <div id="excludedGroups"></div>
                <div class="excluded-chips mt-2 d-flex flex-wrap gap-1" id="excludedChips"></div>
                <small class="text-muted d-block mt-2">{{ __('onsite.components_search_hint') }}</small>

                <input type="hidden" id="h_excluded_components" name="excluded_components_json">
            </div>

            {{-- STEP 8 — Meal Distribution --}}
            <div class="step-panel" id="step8">
                <h5 class="mb-4 text-primary fw-semibold"><i class="ri-restaurant-2-line me-2"></i>{{ __('onsite.meal_distribution') }}</h5>

                <div class="alert alert-info mb-4">
                    <i class="ri-information-line me-2"></i><strong>{{ __('onsite.selected_diet') }}:</strong>
                    <span id="step8_diet_label" style="font-weight:600;"></span>
                </div>

                <div class="alert alert-info mb-4">
                    <i class="ri-information-line me-2"></i><strong>{{ __('onsite.total_daily_calories') }}: </strong><span id="meal_total_eer">0</span> kcal
                </div>

                @foreach (['breakfast' => ['ri-sun-line', 'text-success'], 'lunch' => ['ri-lunch-box-line', 'text-warning'], 'dinner' => ['ri-moon-line', 'text-danger']] as $meal => [$icon, $tone])
                    <div class="mb-5">
                        <h6 class="mb-3 {{ $tone }} fw-semibold"><i class="{{ $icon }} me-2"></i>{{ __('onsite.' . $meal) }}</h6>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered">
                                <thead class="table-light">
                                    <tr>
                                        <th>{{ __('onsite.food_group') }}</th>
                                        <th class="text-center" style="width: 80px;">%</th>
                                        <th class="text-center" style="width: 100px;">{{ __('onsite.calories') }}</th>
                                        <th class="text-center" style="width: 100px;">{{ __('onsite.grams') }}</th>
                                    </tr>
                                </thead>
                                <tbody id="{{ $meal }}_table"></tbody>
                                <tfoot class="table-light fw-semibold">
                                    <tr>
                                        <td>{{ __('onsite.total') }}</td>
                                        <td class="text-center">—</td>
                                        <td class="text-center" id="{{ $meal }}_total_cal">0</td>
                                        <td class="text-center" id="{{ $meal }}_total_grams">0</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- STEP 9 — Weekly Meal Planner --}}
            <div class="step-panel" id="step9">
                <h5 class="mb-4 text-primary fw-semibold"><i class="ri-calendar-line me-2"></i>{{ __('onsite.weekly_meal_planner') }}</h5>

                <div class="alert alert-info mb-4">
                    <i class="ri-information-line me-2"></i><strong>{{ __('onsite.selected_diet') }}:</strong>
                    <span id="step9_diet_label" style="font-weight:600;"></span>
                </div>

                {{-- Auto-generated preliminary menu — the consultant reviews/edits it below before continuing. --}}
                <div class="card mb-4" id="generatedMenuCard">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-2">
                            <h6 class="mb-0 fw-semibold"><i class="ri-magic-line me-1"></i>{{ __('onsite.generated_menu_title') }}</h6>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="regenerateMenuBtn" onclick="regenerateGeneratedMenu()">
                                    <i class="ri-refresh-line me-1"></i>{{ __('onsite.regenerate_all') }}
                                </button>
                                <button type="button" class="btn btn-sm btn-primary" id="applyGeneratedMenuBtn" onclick="applyGeneratedMenu()">
                                    <i class="ri-check-line me-1"></i>{{ __('onsite.apply_generated_menu') }}
                                </button>
                            </div>
                        </div>
                        <p class="text-muted small mb-3">{{ __('onsite.generated_menu_help') }}</p>
                        <div id="generatedMenuWarnings" class="alert alert-warning py-2 px-3 small" style="display:none;"></div>
                        <div id="generatedMenuBody" class="row g-3"></div>
                        <div id="generatedMenuDailyTotals" class="mt-3 small text-muted"></div>
                    </div>
                </div>

                {{-- Applying the generated menu above fills this in: one card per
                     meal with its chart and an Edit control to swap components,
                     replacing the old food-group browser + separate preview step. --}}
                <div class="mb-4" id="mealEditorRoot"></div>

                <div class="alert alert-warning mt-4">
                    <i class="ri-alert-line me-2"></i><strong>{{ __('onsite.validation_note') }}</strong> {{ __('onsite.meal_planner_validation_help') }}
                </div>

                <div id="step9_validation_message" class="alert alert-danger" style="display:none;">
                    <i class="ri-alert-line me-2"></i><span id="step9_validation_text"></span>
                </div>

                <input type="hidden" id="h_meal_planner_data" name="meal_planner_data">
            </div>

            {{-- STEP 10 — Summary --}}
            <div class="step-panel" id="step10">
                <h5 class="mb-4 text-primary fw-semibold"><i class="ri-file-text-line me-2"></i>{{ __('onsite.summary_notes') }}</h5>

                <div class="row g-3 mb-4">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm" style="font-size:14px;"><tbody id="summary_table"></tbody></table>
                        </div>
                    </div>
                </div>

                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">{{ __('onsite.notes') }} <small class="text-muted">({{ __('onsite.optional') }})</small></label>
                        <textarea name="notes" class="form-control" rows="5" placeholder="{{ __('onsite.notes_placeholder') }}"></textarea>
                    </div>
                </div>
            </div>

            {{-- Navigation --}}
            <div class="d-flex justify-content-between align-items-center mt-4 pt-3 border-top">
                <button type="button" class="btn btn-light" id="btnPrev" style="display:none;" onclick="prevStep()">
                    <i class="ri-arrow-left-line me-1"></i> {{ __('onsite.prev_step') }}
                </button>
                <div class="d-flex align-items-center gap-2">
                    <span id="draftSaveStatus" class="text-muted small" style="display:none;"></span>
                    <button type="button" class="btn btn-outline-secondary" id="btnSaveDraft" onclick="saveDraft()">
                        <i class="ri-save-3-line me-1"></i> {{ __('onsite.save_progress') }}
                    </button>
                </div>
                <button type="button" class="btn btn-primary" id="btnNext" onclick="nextStep()">
                    {{ __('onsite.next_step') }} <i class="ri-arrow-right-line ms-1"></i>
                </button>
                <button type="submit" class="btn btn-success" id="btnSave" style="display:none;">
                    <i class="ri-save-line me-1"></i> {{ __('onsite.save_consultation') }}
                </button>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
<script src="{{ asset('js/nhs-ibw.js') }}"></script>
<script src="{{ asset('js/pediatric-bmr.js') }}"></script>
<script type="text/javascript">

    var currentStep = 1;
    var totalSteps  = 10;
    var selectedEER = 0;

    // ── Save Progress (draft) / Resume ──
    var resumeConsultationId = @json($consultation->id ?? null);
    var resumeData = @json($resumeData ?? []);
    var resumeCurrentStep = @json($consultation->current_step ?? 1);

    function saveDraft() {
        var btn = document.getElementById('btnSaveDraft');
        var status = document.getElementById('draftSaveStatus');
        var form = document.getElementById('onsiteForm');

        // The wizard is one long-lived <form> across all steps, so a
        // FormData snapshot at any point already carries every field
        // filled in so far, whichever step is currently visible.
        var data = new FormData(form);
        data.set('current_step', String(currentStep));

        var consultationId = document.getElementById('h_consultation_id').value;
        var url = consultationId
            ? @json(route('portal.onsite-consultations.draft.update', ['onsiteConsultation' => '__ID__'])).replace('__ID__', consultationId)
            : @json(route('portal.onsite-consultations.draft.create'));

        btn.disabled = true;

        fetch(url, {
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
            body: data,
        })
        .then(function(response) { return response.json().then(function(json) { return { ok: response.ok, json: json }; }); })
        .then(function(result) {
            btn.disabled = false;
            if (!result.ok || !result.json.status) {
                if (status) { status.style.display = 'inline'; status.className = 'text-danger small'; status.textContent = @json(__('onsite.save_progress_failed')); }
                return;
            }
            document.getElementById('h_consultation_id').value = result.json.consultation_id;
            if (window.history && window.history.replaceState) {
                window.history.replaceState(null, '', result.json.edit_url);
            }
            if (status) {
                status.style.display = 'inline';
                status.className = 'text-success small';
                status.textContent = @json(__('onsite.save_progress_success'));
                setTimeout(function() { status.style.display = 'none'; }, 4000);
            }
        })
        .catch(function() {
            btn.disabled = false;
            if (status) { status.style.display = 'inline'; status.className = 'text-danger small'; status.textContent = @json(__('onsite.save_progress_failed')); }
        });
    }

    /**
     * Rebuilds the wizard from a saved draft's form_state snapshot:
     * refills every field by name, restores the diet-card/phase
     * selection, then replays the same step-transition calculations
     * nextStep() would have run on the way through (so every computed
     * display — BMR/TDEE table, macro table, meal distribution table —
     * is populated) before jumping to the step the consultant stopped on.
     */
    function resumeFromDraft() {
        if (!resumeConsultationId || !resumeData) return;

        Object.keys(resumeData).forEach(function(key) {
            var value = resumeData[key];
            if (Array.isArray(value)) return; // no array-named inputs in this form
            var els = document.getElementsByName(key);
            els.forEach(function(el) {
                if (el.type === 'checkbox' || el.type === 'radio') {
                    el.checked = (String(el.value) === String(value));
                } else {
                    el.value = value;
                }
            });
        });

        var dietKey = resumeData.diet_type_step4;
        if (dietKey) {
            var card = document.querySelector('#dietTypeCards .diet-card[data-diet="' + dietKey + '"]');
            if (card) selectDietTypeStep4(card);
        }
        if (resumeData.diet_phase === 'phase_2') {
            var phase2 = document.getElementById('wrPhase2');
            if (phase2) { phase2.checked = true; selectWrPhase('phase_2'); }
        }

        // Replay each step's "on leaving this step" calculations, in
        // order, using the values just restored above — mirrors nextStep().
        try { calculateStep2(); } catch (e) {}
        try { calculateStep3(); } catch (e) {}
        try { calculateStep4(); } catch (e) {}
        try { autoPopulateStep6(); } catch (e) {}
        try { loadExcludedComponentsPool(); } catch (e) {}
        try { calculateMealDistribution(); } catch (e) {}
        try { initializeMealPlanner(); } catch (e) {}
        try { buildSummary(); } catch (e) {}

        goToStep(Math.min(Math.max(resumeCurrentStep, 1), totalSteps));
    }

    document.addEventListener('DOMContentLoaded', function() {
        if (resumeConsultationId) {
            setTimeout(resumeFromDraft, 150);
        }
    });
    var mealPlannerData = {};
    var excludedComponentsPool = []; // populated by loadExcludedComponentsPool()
    // A dislike/allergy isn't meal-specific, so the picker is a single
    // food-group list (not split by breakfast/lunch/dinner), and marking
    // an item here excludes it from every meal in Step 9's planner via
    // the shared `excluded_ids` filter.
    var excludedComponentIds = new Set();

    var activityMultipliers = { sedentary: 1.0, lightly_active: 1.5, moderately_active: 1.7, very_active: 1.8 };

    var dietCutoffs = {
        diabetes:           { min: 0, max: 100, label: @json(__('onsite.diet_diabetes')) },
        weight_reduction:   { min: 0, max: 100, label: @json(__('onsite.diet_weight_reduction')) },
        ketogenic:          { min: 0, max: 120, label: @json(__('onsite.diet_ketogenic')) },
        building_muscles:   { min: 0, max: 120, label: @json(__('onsite.diet_building_muscles')) },
        healthy_weight:     { min: 0, max: 120, label: @json(__('onsite.diet_healthy_weight')) },
    };

    var nutritionGoalConfigs = {
        diabetes:          { carbs: {target:30,min:10,max:40}, protein: {target:35,min:15,max:35}, fat: {target:35,min:15,max:35} },
        weight_reduction:  { carbs: {target:30,min:10,max:40}, protein: {target:35,min:15,max:35}, fat: {target:35,min:15,max:35} },
        ketogenic:         { carbs: {target:15,min:5,max:15},  protein: {target:20,min:20,max:35}, fat: {target:65,min:60,max:80} },
        building_muscles:  { carbs: {target:40,min:30,max:45}, protein: {target:40,min:30,max:40}, fat: {target:20,min:10,max:20} },
        healthy_weight:    { carbs: {target:35,min:15,max:40}, protein: {target:35,min:15,max:30}, fat: {target:30,min:15,max:30} },
    };

    // Food-group distribution (breakfast/lunch/dinner % per food group) is
    // NOT hardcoded here — it's read live from food_group_distributions via
    // the API below, so a percentage change in the database (e.g. editing
    // FoodGroupDistributionSeeder and re-running it) is reflected here
    // without a frontend deploy. Weight Reduction's two phases resolve to
    // separate cache entries since they have independent distributions.
    var mealDistributions = {}; // cache, keyed by mealDistCacheKey()

    function mealDistCacheKey(dietType, phase) {
        return (dietType === 'weight_reduction' && phase === 'phase_2') ? 'weight_reduction_phase_2' : dietType;
    }

    /**
     * Resolves the distribution for the currently-selected diet type
     * (+ phase), fetching from the API on a cache miss, then invokes
     * `callback(distribution)`. Safe to call repeatedly — later calls for
     * the same diet/phase hit the cache immediately.
     */
    function ensureMealDistribution(dietType, phase, callback) {
        if (!dietType) return;
        var cacheKey = mealDistCacheKey(dietType, phase);

        if (mealDistributions[cacheKey]) {
            callback(mealDistributions[cacheKey]);
            return;
        }

        var url = @json(route('portal.api.food-group-distribution')) + '?diet_type=' + encodeURIComponent(dietType);
        if (phase) url += '&phase=' + encodeURIComponent(phase);

        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }, cache: 'no-store' })
            .then(function(response) { return response.json(); })
            .then(function(json) {
                if (json.status && json.distribution) {
                    mealDistributions[cacheKey] = json.distribution;
                    callback(json.distribution);
                }
            })
            .catch(function(error) { console.error('Error loading food-group distribution:', error); });
    }

    /** Pre-warms the cache as soon as the diet type/phase is known, so the
     * later steps that consume it (Step 8, Step 9) don't show a delay. */
    function prefetchMealDistribution() {
        var dietType = document.getElementById('h_diet_type_step4')?.value;
        var phase = document.getElementById('h_diet_phase')?.value || null;
        if (dietType) ensureMealDistribution(dietType, phase, function() {});
    }

    var foodGroupCaloriesPerGram = { main_carb: 4, fruits: 4, milks: 4, rich_proteins: 4, oils: 9, other_fats: 9 };

    function selectDietTypeStep4(el) {
        document.querySelectorAll('.diet-card').forEach(function(c) { c.classList.remove('border-primary'); });
        el.classList.add('border-primary');
        document.getElementById('h_diet_type_step4').value = el.dataset.diet;
        document.getElementById('h_diet_type_step4').dataset.slug = el.dataset.slug;
        document.getElementById('diet_type_error').style.display = 'none';

        var isWr = el.dataset.diet === 'weight_reduction';
        document.getElementById('wrPhaseSelector').style.display = isWr ? 'block' : 'none';
        document.getElementById('h_diet_phase').value = isWr ? 'phase_1' : '';
        if (isWr) document.getElementById('wrPhase1').checked = true;

        prefetchMealDistribution();
    }

    function selectWrPhase(phase) {
        document.getElementById('h_diet_phase').value = phase;
        prefetchMealDistribution();
    }

    function calculateStep4() {
        var dietType = document.getElementById('h_diet_type_step4').value;
        if (!dietType) { document.getElementById('diet_type_error').style.display = 'block'; return false; }

        var cutoff = dietCutoffs[dietType];
        var eerAdj = parseFloat(document.getElementById('h_tdee').value) || 0;
        var eerMin = Math.round((eerAdj * cutoff.min) / 100);
        var eerMax = Math.round((eerAdj * cutoff.max) / 100);

        document.getElementById('r_eer_min').textContent = eerMin.toLocaleString();
        document.getElementById('r_eer_min_formula').textContent = eerAdj.toFixed(0) + ' × ' + cutoff.min + '% = ' + eerMin + ' kcal';
        document.getElementById('r_eer_max').textContent = eerMax.toLocaleString();
        document.getElementById('r_eer_max_formula').textContent = eerAdj.toFixed(0) + ' × ' + cutoff.max + '% = ' + eerMax + ' kcal';
        document.getElementById('r_diet_selected').textContent = cutoff.label;

        var slider = document.getElementById('slider_eer_value');
        slider.min = eerMin;
        slider.max = eerMax;
        var midPoint = Math.round((eerMin + eerMax) / 2);
        slider.value = midPoint;

        document.getElementById('display_bound_min').textContent = eerMin.toLocaleString();
        document.getElementById('display_bound_max').textContent = eerMax.toLocaleString();
        document.getElementById('display_eer_selected').textContent = midPoint.toLocaleString();

        var percent = ((midPoint - eerMin) / (eerMax - eerMin)) * 100;
        document.getElementById('slider-progress').style.width = percent + '%';

        selectedEER = midPoint;
        document.getElementById('h_eer_adjusted_final_max').value = midPoint;
        document.getElementById('h_eer_min_adjusted').value = eerMin;
        document.getElementById('h_eer_max_adjusted').value = eerMax;

        return true;
    }

    function updateEERSlider() {
        var slider = document.getElementById('slider_eer_value');
        var value = parseInt(slider.value);
        document.getElementById('display_eer_selected').textContent = value.toLocaleString();
        var max = parseInt(slider.max), min = parseInt(slider.min);
        var percent = ((value - min) / (max - min)) * 100;
        document.getElementById('slider-progress').style.width = percent + '%';
        selectedEER = value;
        document.getElementById('h_eer_adjusted_final_max').value = value;
    }

    function loadNutritionGoalDefaults(goal) {
        var config = nutritionGoalConfigs[goal];
        if (!config) return;

        ['carbs', 'protein', 'fat'].forEach(function(macro) {
            document.getElementById('macro_' + macro + '_target').value = config[macro].target;
            updateMacroSingleSlider(macro);
        });
    }

    /**
     * Single 0-100% slider per macro — same progress-bar pattern as the
     * Step 5 EER slider, no separate min/max range.
     */
    function updateMacroSingleSlider(macro) {
        var slider = document.getElementById('macro_' + macro + '_target');
        if (!slider) return;

        var value = parseInt(slider.value) || 0;

        document.getElementById('display_' + macro + '_target').textContent = value;
        document.getElementById('slider_' + macro + '_progress').style.width = value + '%';
        document.getElementById('h_macro_' + macro + '_min').value = 0;
        document.getElementById('h_macro_' + macro + '_max').value = value;

        validateMacroPercentages();
    }

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

    function validateMacroPercentages() {
        var carbsTarget = parseInt(document.getElementById('macro_carbs_target').value) || 0;
        var proteinTarget = parseInt(document.getElementById('macro_protein_target').value) || 0;
        var fatTarget = parseInt(document.getElementById('macro_fat_target').value) || 0;
        var total = carbsTarget + proteinTarget + fatTarget;

        document.getElementById('h_macro_carbs_target').value = carbsTarget;
        document.getElementById('h_macro_protein_target').value = proteinTarget;
        document.getElementById('h_macro_fat_target').value = fatTarget;

        var validationMsg = document.getElementById('macro_validation_message');
        var successMsg = document.getElementById('macro_success_message');
        var calorieBreakdown = document.getElementById('calorie_breakdown');
        var gramBreakdown = document.getElementById('gram_breakdown');

        if (total === 100) {
            validationMsg.style.display = 'none';
            successMsg.style.display = 'block';

            var eerValue = selectedEER || parseFloat(document.getElementById('h_eer_adjusted_final_max').value) ||
                          parseFloat(document.getElementById('h_tdee').value) || 0;

            var carbsCalories = Math.round((carbsTarget / 100) * eerValue);
            var proteinCalories = Math.round((proteinTarget / 100) * eerValue);
            var fatCalories = Math.round((fatTarget / 100) * eerValue);

            setTextIfExists('display_carbs_calories', carbsCalories.toLocaleString());
            setTextIfExists('display_carbs_percentage', carbsTarget);
            setTextIfExists('display_protein_calories', proteinCalories.toLocaleString());
            setTextIfExists('display_protein_percentage', proteinTarget);
            setTextIfExists('display_fat_calories', fatCalories.toLocaleString());
            setTextIfExists('display_fat_percentage', fatTarget);
            setTextIfExists('display_total_eer', Math.round(eerValue).toLocaleString());

            var carbsGrams = Math.round(carbsCalories / 4);
            var proteinGrams = Math.round(proteinCalories / 4);
            var fatGrams = Math.round(fatCalories / 9);

            setTextIfExists('display_carbs_grams', carbsGrams.toLocaleString());
            setTextIfExists('display_protein_grams', proteinGrams.toLocaleString());
            setTextIfExists('display_fat_grams', fatGrams.toLocaleString());

            document.getElementById('h_macro_carbs_grams').value = carbsGrams;
            document.getElementById('h_macro_protein_grams').value = proteinGrams;
            document.getElementById('h_macro_fat_grams').value = fatGrams;

            calorieBreakdown.style.display = 'block';
            gramBreakdown.style.display = 'block';
            return true;
        }

        document.getElementById('h_macro_carbs_grams').value = '';
        document.getElementById('h_macro_protein_grams').value = '';
        document.getElementById('h_macro_fat_grams').value = '';

        validationMsg.style.display = 'block';
        setTextIfExists('macro_validation_text', 'Total macronutrient percentage is ' + total + '% (must be 100%)');
        successMsg.style.display = 'none';
        calorieBreakdown.style.display = 'none';
        gramBreakdown.style.display = 'none';
        return false;
    }

    function selectActivity(el) {
        document.querySelectorAll('.activity-card').forEach(function(c) { c.classList.remove('border-primary'); });
        el.classList.add('border-primary');
        document.getElementById('s_activity').value = el.dataset.value;
        document.getElementById('activity_error').style.display = 'none';
    }

    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 validateStep1() {
        var valid = true;
        ['s_gender', 's_dob', 's_weight', 's_height'].forEach(function(id) {
            var el = document.getElementById(id);
            if (!el.value || el.value.trim() === '') { el.classList.add('is-invalid'); valid = false; }
            else { el.classList.remove('is-invalid'); }
        });

        var dobEl = document.getElementById('s_dob');
        var dobAgeError = document.getElementById('dob_age_error');
        if (dobEl.value && calcAge(dobEl.value) < 10) {
            dobEl.classList.add('is-invalid'); dobAgeError.style.display = 'block'; valid = false;
        } else { dobAgeError.style.display = 'none'; }

        if (!document.getElementById('s_activity').value) {
            document.getElementById('activity_error').style.display = 'block'; valid = false;
        }
        return valid;
    }

    function calculateStep2() {
        var gender = document.getElementById('s_gender').value;
        var weight = parseFloat(document.getElementById('s_weight').value);
        var height = parseFloat(document.getElementById('s_height').value);
        var dob = document.getElementById('s_dob').value;
        var age = calcAge(dob);
        var activity = document.getElementById('s_activity').value;
        var mult = activityMultipliers[activity] || 1.2;
        var heightMeters = height / 100;

        var isPediatric = PediatricBmr.isPediatric(age);
        var eer;
        if (isPediatric) {
            eer = PediatricBmr.calculate(gender, weight, height);
        } else if (gender === 'male') {
            eer = 293 - (3.8 * age) + (456.4 * heightMeters) + (10.12 * weight);
        } else {
            eer = 247 - (2.67 * age) + (401.5 * heightMeters) + (8.6 * weight);
        }

        var eerAdjusted = eer * mult;

        var bmiStep2 = (weight / (heightMeters * heightMeters));
        var nhsStep2 = NhsIbw.lookup(gender, height);
        var isAboveIbw = !!nhsStep2 && weight > nhsStep2.ibw;
        var isAboveIdealBmi = bmiStep2 >= 25 && isAboveIbw;

        if (isAboveIdealBmi) eerAdjusted -= 500;

        document.getElementById('r_eer').textContent = Math.round(eer).toLocaleString();
        document.getElementById('r_eer_adjusted').textContent = Math.round(eerAdjusted).toLocaleString();
        document.getElementById('h_bmr').value = eer.toFixed(2);
        document.getElementById('h_tdee').value = eerAdjusted.toFixed(2);

        var genderLabel = gender === 'male' ? @json(__('common.male')) : @json(__('common.female'));
        document.getElementById('step2_summary').innerHTML =
            '<span class="badge bg-primary me-2">' + genderLabel + '</span>' +
            '<span class="me-3"><strong>' + @json(__('onsite.age_years')) + ':</strong> ' + age + '</span>' +
            '<span class="me-3"><strong>' + @json(__('onsite.weight_kg')) + ':</strong> ' + weight + ' kg</span>' +
            '<span class="me-3"><strong>' + @json(__('onsite.height_cm')) + ':</strong> ' + height + ' cm</span>' +
            '<span><strong>' + @json(__('onsite.activity_level')) + ':</strong> ×' + mult + '</span>';

        var genLabel, genFormula;
        if (isPediatric) {
            genLabel = gender === 'male' ? @json(__('onsite.for_men')) : @json(__('onsite.for_women'));
            genFormula = gender === 'male'
                ? 'BMR = [0.074 × ' + weight + ' + 2.754 × ' + heightMeters.toFixed(2) + ' + 0.754] × 239.006'
                : 'BMR = [0.056 × ' + weight + ' + 2.898 × ' + heightMeters.toFixed(2) + ' + 0.255] × 239.006';
        } else {
            genLabel = gender === 'male' ? @json(__('onsite.for_men')) : @json(__('onsite.for_women'));
            genFormula = gender === 'male'
                ? 'BEE = 293 − 3.8 × ' + age + ' + 456.4 × ' + heightMeters.toFixed(2) + ' + 10.12 × ' + weight
                : 'BEE = 247 − 2.67 × ' + age + ' + 401.5 × ' + heightMeters.toFixed(2) + ' + 8.6 × ' + weight;
        }

        var deductionText = isAboveIdealBmi ? ('<br><span style="color:#dc3545;">' + @json(__('onsite.kcal_deduction_note')) + ': -500 kcal</span>') : '';

        document.getElementById('eer_formula_box').innerHTML =
            '<strong>' + genLabel + ':</strong><br>' + genFormula + ' = <strong>' + Math.round(eer) + ' kcal</strong><br>' +
            'EER = ' + Math.round(eer) + ' × ' + mult + ' = <strong>' + Math.round(eer * mult) + ' kcal / day</strong>' + deductionText +
            '<br><strong>Final EER:</strong> <strong style="color:#28a745;">' + Math.round(eerAdjusted) + ' kcal / day</strong>';

        document.getElementById('r_eer_adjusted_detail').textContent = isAboveIdealBmi ? 'BMI above ideal (-500 kcal)' : 'Base EER + Activity';
    }

    function calculateStep3() {
        var gender = document.getElementById('s_gender').value;
        var height = parseFloat(document.getElementById('s_height').value);
        var weight = parseFloat(document.getElementById('s_weight').value);

        var nhs = NhsIbw.lookup(gender, height);
        if (!nhs) return;

        var ibwDevine = Math.max(nhs.ibw, 0);
        var obeseThreshold = Math.max(nhs.obeseThreshold, 0);
        var deviation = weight - ibwDevine;
        var pctOver = (deviation / ibwDevine) * 100;
        var heightM = height / 100;
        var bmi = weight / (heightM * heightM);

        document.getElementById('r_ibw_devine').textContent = ibwDevine.toFixed(1);
        var devText = (deviation >= 0 ? '+' : '') + deviation.toFixed(1);
        document.getElementById('r_deviation').textContent = devText;

        document.getElementById('h_ibw_devine').value = ibwDevine.toFixed(2);
        document.getElementById('h_ibw_hamwi').value = ibwDevine.toFixed(2);
        document.getElementById('h_weight_deviation').value = deviation.toFixed(2);

        var statusEl = document.getElementById('r_ibw_status');
        var cardEl = document.getElementById('deviation_card');
        var statusClass, statusLabel, borderColor;
        if (weight > obeseThreshold) { statusClass='obese'; statusLabel=@json(__('onsite.obese')); borderColor='#842029'; }
        else if (pctOver < -10) { statusClass='underweight'; statusLabel=@json(__('onsite.underweight')); borderColor='#084298'; }
        else if (pctOver <= 10) { statusClass='normal'; statusLabel=@json(__('onsite.normal_weight')); borderColor='#0f5132'; }
        else { statusClass='overweight'; statusLabel=@json(__('onsite.overweight')); borderColor='#664d03'; }

        statusEl.innerHTML = '<span class="ibw-status ' + statusClass + '">' + statusLabel + '</span>'; //(' + pctOver.toFixed(1) + '% vs IBW)';
        cardEl.style.borderColor = borderColor;

        var eerAdj = parseFloat(document.getElementById('h_tdee').value) || 0;
        var eerRaw = parseFloat(document.getElementById('h_bmr').value) || 0;
        if (document.getElementById('h_eer_adjusted')) document.getElementById('h_eer_adjusted').value = eerAdj.toFixed(2);
        if (document.getElementById('r_eer_adjusted')) {
            document.getElementById('r_eer_adjusted').textContent = Math.round(eerAdj).toLocaleString();
            document.getElementById('r_eer_adjusted').className = 'calc-value ' + (eerAdj < eerRaw ? 'text-danger' : 'text-success');
        }

        var genderLabelNhs = gender === 'male' ? @json(__('common.male')) : @json(__('common.female'));
        document.getElementById('ibw_devine_formula_box').innerHTML =
            '<strong>IBW (Devine 1974):</strong> ' + genderLabelNhs + ', ' + height + ' cm<br>' +
            'IBW = <strong>' + ibwDevine.toFixed(1) + ' kg</strong>';

        document.getElementById('bmi_formula_box').innerHTML =
            '<strong>' + @json(__('onsite.bmi_title')) + ':</strong><br>' +
            weight + ' / (' + heightM.toFixed(2) + ' × ' + heightM.toFixed(2) + ') = <strong>' + bmi.toFixed(3) + '</strong>';
    }

    function buildSummary() {
        var gender = document.getElementById('s_gender').value;
        var weight = document.getElementById('s_weight').value;
        var height = document.getElementById('s_height').value;
        var dob = document.getElementById('s_dob').value;
        var age = calcAge(dob);
        var idNum = document.getElementById('id_number').value;
        var eer = document.getElementById('h_bmr').value;
        var eerAdj = document.getElementById('h_tdee').value;
        var ibwD = document.getElementById('h_ibw_devine').value;
        var dev = document.getElementById('h_weight_deviation').value;
        var patName = document.querySelector('input[name=patient_name]').value || '-';
        var gLabel = gender === 'male' ? @json(__('common.male')) : @json(__('common.female'));

        var rows = [
            [@json(__('onsite.visitor_name')), patName],
            [@json(__('onsite.id_iqama_number')), idNum],
            [@json(__('onsite.gender')), gLabel],
            [@json(__('onsite.date_of_birth')), dob],
            [@json(__('onsite.age_years')), age + ' ' + @json(__('onsite.years'))],
            [@json(__('onsite.weight_kg')), weight + ' kg'],
            [@json(__('onsite.height_cm')), height + ' cm'],
            [@json(__('onsite.eer')), Math.round(parseFloat(eer)).toLocaleString() + ' kcal/day'],
            [@json(__('onsite.eer_adjusted')), Math.round(parseFloat(eerAdj)).toLocaleString() + ' kcal/day'],
            [@json(__('onsite.ibw_devine')), parseFloat(ibwD).toFixed(1) + ' kg'],
            [@json(__('onsite.weight_deviation')), (parseFloat(dev) >= 0 ? '+' : '') + parseFloat(dev).toFixed(1) + ' kg'],
        ];

        var html = '';
        rows.forEach(function(r) { html += '<tr><th class="bg-light" style="width:40%">' + r[0] + '</th><td>' + r[1] + '</td></tr>'; });
        document.getElementById('summary_table').innerHTML = html;
    }

    // ── Dislike/allergy exclusions picker (Step 7) — one search, one list
    //    of food groups (not split by breakfast/lunch/dinner — a dislike
    //    isn't meal-specific), vanilla (no select2/jQuery). What's marked
    //    here is excluded from every meal in Step 9's planner via the
    //    shared `excluded_ids` filter. ──
    var FOOD_GROUP_ORDER = ['main_carb', 'fruits', 'milks', 'rich_proteins', 'oils', 'other_fats'];

    function loadExcludedComponentsPool() {
        var locale = @json(app()->getLocale());
        var dietType = document.getElementById('h_diet_type_step4')?.value || '';

        var url = @json(route('portal.api.components.list')) + '?locale=' + locale;
        if (dietType) url += '&diet_type=' + encodeURIComponent(dietType);

        fetch(url, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            cache: 'no-store'
        })
        .then(function(response) { return response.json(); })
        .then(function(data) {
            excludedComponentsPool = (data.components && Array.isArray(data.components)) ? data.components : [];
            renderExcludedGroups(excludedComponentsPool);
            renderExcludedChips();
        })
        .catch(function(error) { console.error('Error loading components:', error); });
    }

    function renderExcludedGroups(list) {
        var container = document.getElementById('excludedGroups');
        if (!container) return;
        container.innerHTML = '';

        // Every food group, regardless of how much (or little) of it the
        // diet's meal distribution calls for — this is a full dislike /
        // allergy sweep, not a "what do you want" pick, so nothing should
        // be hidden from view here.
        FOOD_GROUP_ORDER.forEach(function(groupKey) {
            var items = list.filter(function(c) { return c.food_group === groupKey; });

            var section = document.createElement('div');
            section.className = 'excluded-group';
            section.innerHTML = '<div class="excluded-group-head"><span>' + formatFoodGroupLabel(groupKey) + '</span>' +
                '<span class="count">' + items.length + '</span></div>';

            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 list_ = document.createElement('div');
                list_.className = 'comp-picker';
                items.forEach(function(c) { list_.appendChild(buildExcludedRow(c)); });
                section.appendChild(list_);
            }

            container.appendChild(section);
        });
    }

    function buildExcludedRow(c) {
        var picked = excludedComponentIds.has(c.id);
        var row = document.createElement('div');
        row.className = 'comp-picker-row' + (picked ? ' picked' : '');
        row.innerHTML = '<input type="checkbox" class="form-check-input m-0" ' + (picked ? 'checked' : '') + '>' +
                         '<span>' + escapeHtml(c.name) + '</span>';
        row.addEventListener('click', function(e) {
            if (e.target.tagName !== 'INPUT') {
                var cb = row.querySelector('input');
                cb.checked = !cb.checked;
            }
            if (row.querySelector('input').checked) { excludedComponentIds.add(c.id); row.classList.add('picked'); }
            else { excludedComponentIds.delete(c.id); row.classList.remove('picked'); }
            renderExcludedChips();
            storeExcludedComponents();
        });
        return row;
    }

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

        Array.from(excludedComponentIds).forEach(function(id) {
            var c = excludedComponentsPool.find(function(p) { return p.id === id; });
            if (!c) return;
            var chip = document.createElement('span');
            chip.className = 'badge rounded-pill text-bg-light border d-inline-flex align-items-center gap-1';
            chip.innerHTML = escapeHtml(c.name) + ' <button type="button" class="btn-close btn-close-sm" style="font-size:.55rem;" aria-label="Remove"></button>';
            chip.querySelector('button').addEventListener('click', function() {
                excludedComponentIds.delete(id);
                renderExcludedGroups(excludedComponentsPool);
                renderExcludedChips();
                storeExcludedComponents();
            });
            box.appendChild(chip);
        });

        if (!excludedComponentIds.size) {
            box.innerHTML = '<span class="text-muted small">' + @json(__('onsite.no_excluded_picked')) + '</span>';
        }
    }

    function storeExcludedComponents() {
        document.getElementById('h_excluded_components').value = JSON.stringify(Array.from(excludedComponentIds));
    }

    document.addEventListener('input', function(e) {
        if (e.target && e.target.classList && e.target.classList.contains('excluded-search')) {
            var term = e.target.value.trim().toLowerCase();
            var filtered = term ? excludedComponentsPool.filter(function(c) { return c.name.toLowerCase().indexOf(term) !== -1; }) : excludedComponentsPool;
            renderExcludedGroups(filtered);
        }
    });

    // ── Navigation ──
    function nextStep() {
        if (currentStep === 1) {
            if (!validateStep1()) return;
            calculateStep2();
        } else if (currentStep === 2) {
            calculateStep3();
        } else if (currentStep === 4) {
            if (!calculateStep4()) return;
        } else if (currentStep === 5) {
            autoPopulateStep6();
        } else if (currentStep === 6) {
            if (!validateMacroPercentages()) return;
            setTimeout(function() { loadExcludedComponentsPool(); }, 100);
        } else if (currentStep === 7) {
            setTimeout(function() { calculateMealDistribution(); }, 100);
        } else if (currentStep === 8) {
            setTimeout(function() { initializeMealPlanner(); }, 100);
        } else if (currentStep === 9) {
            if (!validateMealPlanner()) return;
            storeMealPlannerData();
            buildSummary();
        }
        goToStep(currentStep + 1);
    }

    function goToStep(step) {
        document.querySelectorAll('.step-panel').forEach(function(p) { p.classList.remove('active'); });
        document.getElementById('step' + step).classList.add('active');

        document.querySelectorAll('.wizard-step').forEach(function(el) {
            var s = parseInt(el.dataset.step);
            el.classList.remove('active', 'done');
            if (s < step) el.classList.add('done');
            else if (s === step) el.classList.add('active');
        });

        currentStep = step;
        document.getElementById('btnPrev').style.display = step > 1 ? 'inline-block' : 'none';
        document.getElementById('btnNext').style.display = step < totalSteps ? 'inline-block' : 'none';
        document.getElementById('btnSave').style.display = step === totalSteps ? 'inline-block' : 'none';
    }

    function prevStep() { goToStep(currentStep - 1); }

    function autoPopulateStep6() {
        var dietType = document.getElementById('h_diet_type_step4').value;
        if (!dietType) return;

        document.getElementById('h_nutrition_goal').value = dietType;
        var cutoff = dietCutoffs[dietType];
        ['step6_diet_label', 'step7_diet_label', 'step8_diet_label', 'step9_diet_label'].forEach(function(id) {
            var el = document.getElementById(id);
            if (el) el.textContent = cutoff.label;
        });
        loadNutritionGoalDefaults(dietType);
    }

    function formatFoodGroupLabel(foodGroup) {
        var labels = {
            main_carb: @json(__('onsite.food_main_carb')),
            fruits: @json(__('onsite.food_fruits')),
            milks: @json(__('onsite.food_milks')),
            rich_proteins: @json(__('onsite.food_rich_proteins')),
            oils: @json(__('onsite.food_oils')),
            other_fats: @json(__('onsite.food_other_fats')),
        };
        return labels[foodGroup] || foodGroup;
    }

    function calculateMealDistribution() {
        var eerValue = parseFloat(document.getElementById('h_eer_adjusted_final_max')?.value || 0);
        if (!eerValue) eerValue = parseFloat(document.getElementById('display_total_eer')?.textContent?.replace(/,/g, '') || 0);
        if (!eerValue) return;

        var dietType = document.getElementById('h_diet_type_step4')?.value;
        var phase = document.getElementById('h_diet_phase')?.value || null;
        if (!dietType) return;

        ensureMealDistribution(dietType, phase, function(distribution) {
            renderMealDistributionTable(distribution, eerValue);
        });
    }

    function renderMealDistributionTable(distribution, eerValue) {
        document.getElementById('meal_total_eer').textContent = Math.round(eerValue).toLocaleString();

        ['breakfast', 'lunch', 'dinner'].forEach(function(meal) {
            var mealData = distribution[meal];
            var tableBody = document.getElementById(meal + '_table');
            if (!tableBody) return;

            tableBody.innerHTML = '';
            var mealTotalCals = 0;

            Object.keys(mealData).forEach(function(foodGroup) {
                var percentage = mealData[foodGroup];
                var calories = Math.round(eerValue * percentage / 100);
                var caloriesPerGram = foodGroupCaloriesPerGram[foodGroup] || 4;
                var grams = calories / caloriesPerGram;

                var row = document.createElement('tr');
                row.innerHTML = '<td>' + formatFoodGroupLabel(foodGroup) + '</td>' +
                               '<td class="text-center">' + percentage + '%</td>' +
                               '<td class="text-center">' + calories + '</td>' +
                               '<td class="text-center">' + grams.toFixed(1) + '</td>';
                tableBody.appendChild(row);
                mealTotalCals += calories;
            });

            document.getElementById(meal + '_total_cal').textContent = Math.round(mealTotalCals);
        });
    }

    // ── Meal Planner (Step 9) ──
    var plannerCurrentDay = 1;
    var plannerMeals = [];
    var plannerOverrides = {};
    var mealTargets = {};
    var plannerComponentsById = {};
    var plannerComponentsList = []; // full {id,name,calories,protein,carbs,fat,food_groups} rows, diet-program-filtered — used by the Step 9 edit/search UI
    var mealEditorOpen = { breakfast: false, lunch: false, dinner: false };

    var plannerMealDefs = [
        { key: 'breakfast', name: @json(__('onsite.breakfast')), color: 'var(--breakfast)' },
        { key: 'lunch',     name: @json(__('onsite.lunch')),     color: 'var(--lunch)' },
        { key: 'dinner',    name: @json(__('onsite.dinner')),    color: 'var(--dinner)' }
    ];

    var plannerMacroDefs = [
        { key: 'carb',    name: @json(__('onsite.carbohydrates')), color: 'var(--carb)',    groups: ['main_carb', 'fruits'] },
        { key: 'protein', name: @json(__('onsite.protein')),       color: 'var(--protein)', groups: ['rich_proteins', 'milks'] },
        { key: 'fat',     name: @json(__('onsite.components.fat')), color: 'var(--fat)',    groups: ['oils', 'other_fats'] }
    ];

    var plannerChev = '<svg class="chev" width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 6l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
    var plannerPencil = '<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M11.3 1.7a1.7 1.7 0 0 1 2.4 2.4l-8.2 8.2-3.2.8.8-3.2 8.2-8.2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>';
    var plannerSearchIcon = '<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5" stroke="currentColor" stroke-width="1.6"/><path d="M11 11l3.5 3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>';

    var plannerKcalLabel = @json(__('onsite.kcal_short'));
    var plannerGramLabel = @json(__('onsite.gram_short'));
    var plannerWeightLabel = @json(__('onsite.weight_short'));

    function plannerFmt(n) { return (Math.round((parseFloat(n) || 0) * 10) / 10).toLocaleString(); }
    function plannerRound1(n) { return Math.round((parseFloat(n) || 0) * 10) / 10; }

    function getPlannerEer() {
        var eerValue = parseFloat(document.getElementById('h_eer_adjusted_final_max')?.value || 0);
        if (!eerValue) eerValue = parseFloat(document.getElementById('display_total_eer')?.textContent?.replace(/,/g, '') || 0);
        return eerValue;
    }

    document.addEventListener('show.bs.collapse', function(e) {
        if (!e.target.classList.contains('group-collapse')) return;
        document.querySelectorAll('#plannerRoot .group-collapse.show').forEach(function(el) {
            if (el !== e.target) bootstrap.Collapse.getOrCreateInstance(el).hide();
        });
    });

    function closePlannerGroupOf(el) {
        var groupPanel = el.closest('.group-collapse');
        if (groupPanel && groupPanel.classList.contains('show')) bootstrap.Collapse.getOrCreateInstance(groupPanel).hide();
    }

    function initializeMealPlanner() {
        var locale = @json(app()->getLocale());
        var dietType = document.getElementById('h_diet_type_step4')?.value || '';
        var excludedIds = JSON.parse(document.getElementById('h_excluded_components').value || '[]');

        var apiUrl = @json(route('portal.api.components.with-details')) + '?locale=' + locale;
        if (dietType) apiUrl += '&diet_type=' + encodeURIComponent(dietType);
        if (excludedIds.length) apiUrl += '&excluded_ids=' + encodeURIComponent(excludedIds.join(','));

        fetch(apiUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' }, cache: 'no-store' })
        .then(function(response) { return response.json(); })
        .then(function(data) {
            if (data.status && data.components) {
                plannerComponentsById = {};
                plannerComponentsList = data.components;
                data.components.forEach(function(c) {
                    plannerComponentsById[c.id] = {
                        calories: parseFloat(c.calories) || 0, protein: parseFloat(c.protein) || 0, carbs: parseFloat(c.carbs) || 0, fat: parseFloat(c.fat) || 0,
                        unit: c.unit || 'g', referenceQuantity: parseFloat(c.reference_quantity) || 100,
                    };
                });

                calculateMealTargets(function(distribution) {
                    buildPlannerStructure(data.components, distribution);

                    if (!plannerOverrides[1]) plannerOverrides[1] = {};
                    plannerMealDefs.forEach(function(mealDef) { if (!plannerOverrides[1][mealDef.key]) plannerOverrides[1][mealDef.key] = {}; });

                    restoreMealPlannerData();
                    renderMealEditor();
                    fetchGeneratedMenu();
                });
            }
        })
        .catch(function(error) { console.error('Error loading components:', error); });
    }

    // ── Auto-generated preliminary menu (Step 9) ──
    // Calls MenuGenerationService via the backend so the diet program's
    // food-group distribution, meal split, menu-label combination rules
    // and fruit inclusion are never duplicated/hardcoded in this file.
    var generatedMenuData = null;
    var generatedMenuSeed = 0;

    function generatedMenuRequestBody(onlyMeals) {
        var dietType = document.getElementById('h_diet_type_step4')?.value || '';
        var phase = document.getElementById('h_diet_phase')?.value || null;
        var excludedIds = JSON.parse(document.getElementById('h_excluded_components')?.value || '[]');

        var body = {
            diet_type: dietType,
            calories: getPlannerEer(),
            excluded_component_ids: excludedIds,
            rotation_seed: generatedMenuSeed,
        };
        if (phase) body.phase = phase;
        if (onlyMeals) body.only_meals = onlyMeals;

        return body;
    }

    function fetchGeneratedMenu(onlyMeals) {
        var dietType = document.getElementById('h_diet_type_step4')?.value;
        if (!dietType) return;

        var card = document.getElementById('generatedMenuBody');
        if (card) card.innerHTML = '<div class="text-muted small">' + @json(__('onsite.generating_menu')) + '</div>';

        fetch(@json(route('portal.api.meal-planner.generate')), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': @json(csrf_token()),
                'Accept': 'application/json',
            },
            body: JSON.stringify(generatedMenuRequestBody(onlyMeals)),
        })
        .then(function(response) { return response.json().then(function(json) { return { ok: response.ok, json: json }; }); })
        .then(function(result) {
            if (!result.ok || !result.json.status) {
                if (card) card.innerHTML = '<div class="text-danger small">' + escapeHtml(result.json.message || 'Error') + '</div>';
                return;
            }

            if (onlyMeals && generatedMenuData) {
                onlyMeals.forEach(function(meal) { generatedMenuData.meals[meal] = result.json.meals[meal]; });
                generatedMenuData.daily_totals = recomputeGeneratedDailyTotals(generatedMenuData.meals);
                generatedMenuData.warnings = result.json.warnings;
            } else {
                generatedMenuData = result.json;
            }

            renderGeneratedMenu();

            // Auto-apply so the editable meal cards (chart + remove/add)
            // are populated the moment generation finishes — previously
            // this needed an extra "Apply" click, so the remove button
            // never showed until that was clicked. Scoped to onlyMeals on
            // a per-meal regenerate so it doesn't clobber manual edits
            // the consultant made to the *other* meals in the meantime.
            applyGeneratedMenu(onlyMeals);
        })
        .catch(function(error) { console.error('Error generating menu:', error); });
    }

    function recomputeGeneratedDailyTotals(meals) {
        var totals = { calories: 0, protein_g: 0, carbs_g: 0, fat_g: 0 };
        Object.keys(meals).forEach(function(meal) {
            totals.calories += meals[meal].calories;
            totals.protein_g += meals[meal].protein_g;
            totals.carbs_g += meals[meal].carbs_g;
            totals.fat_g += meals[meal].fat_g;
        });
        return totals;
    }

    function regenerateGeneratedMenu() {
        generatedMenuSeed++;
        fetchGeneratedMenu();
    }

    function regenerateGeneratedMeal(meal) {
        generatedMenuSeed++;
        fetchGeneratedMenu([meal]);
    }

    function renderGeneratedMenu() {
        var body = document.getElementById('generatedMenuBody');
        var totalsEl = document.getElementById('generatedMenuDailyTotals');
        var warningsEl = document.getElementById('generatedMenuWarnings');
        if (!body || !generatedMenuData) return;

        body.innerHTML = '';

        plannerMealDefs.forEach(function(mealDef) {
            var meal = generatedMenuData.meals[mealDef.key];
            if (!meal) return;

            var col = document.createElement('div');
            col.className = 'col-md-4';

            var rows = meal.components.map(function(c) {
                return '<li class="mb-1"><strong>' + escapeHtml(c.name) + '</strong> — ' + plannerFmt(c.grams) + ' ' + c.unit + '<br>' +
                    '<span class="text-muted">' + plannerFmt(c.calories) + ' ' + plannerKcalLabel +
                    ' · P ' + plannerFmt(c.protein_g) + 'g · C ' + plannerFmt(c.carbs_g) + 'g · F ' + plannerFmt(c.fat_g) + 'g</span></li>';
            }).join('');

            col.innerHTML =
                '<div class="border rounded p-3 h-100">' +
                    '<div class="d-flex align-items-center justify-content-between mb-2">' +
                        '<span class="fw-semibold" style="color:' + mealDef.color + '">' + escapeHtml(mealDef.name) + '</span>' +
                        '<button type="button" class="btn btn-sm btn-link p-0" onclick="regenerateGeneratedMeal(\'' + mealDef.key + '\')" title="' + @json(__('onsite.regenerate')) + '"><i class="ri-refresh-line"></i></button>' +
                    '</div>' +
                    '<ul class="list-unstyled small mb-2">' + (rows || '<li class="text-muted">' + @json(__('onsite.no_matching_components')) + '</li>') + '</ul>' +
                    '<div class="small border-top pt-2"><strong>' + @json(__('onsite.total')) + ':</strong> ' +
                        plannerFmt(meal.calories) + ' / ' + plannerFmt(meal.target_calories) + ' ' + plannerKcalLabel +
                        ' · P ' + plannerFmt(meal.protein_g) + 'g · C ' + plannerFmt(meal.carbs_g) + 'g · F ' + plannerFmt(meal.fat_g) + 'g</div>' +
                '</div>';

            body.appendChild(col);
        });

        var t = generatedMenuData.daily_totals;
        var g = generatedMenuData.target;
        if (totalsEl && t && g) {
            totalsEl.innerHTML =
                '<strong>' + @json(__('onsite.daily_total')) + ':</strong> ' + plannerFmt(t.calories) + ' ' + plannerKcalLabel +
                ' · P ' + plannerFmt(t.protein_g) + 'g · C ' + plannerFmt(t.carbs_g) + 'g · F ' + plannerFmt(t.fat_g) + 'g' +
                '&nbsp;&nbsp;<strong>' + @json(__('onsite.target')) + ':</strong> ' + plannerFmt(g.calories) + ' ' + plannerKcalLabel +
                ' · P ' + plannerFmt(g.protein_g) + 'g · C ' + plannerFmt(g.carbs_g) + 'g · F ' + plannerFmt(g.fat_g) + 'g';
        }

        if (warningsEl) {
            var warnings = generatedMenuData.warnings || [];
            warningsEl.style.display = warnings.length ? 'block' : 'none';
            warningsEl.innerHTML = warnings.map(function(w) { return escapeHtml(w); }).join('<br>');
        }
    }

    /**
     * Maps a food_groups[].key (main_carb, fruits, milks, rich_proteins,
     * oils, other_fats) to the macro field it stands in for, using the
     * same grouping plannerMacroDefs already defines — shared by
     * applyGeneratedMenu() and addMealComponent() so both build a
     * selection entry the exact same way.
     */
    function macroFieldForFoodGroup(groupKey) {
        var groupToMacroKey = {};
        plannerMacroDefs.forEach(function(macroDef) { macroDef.groups.forEach(function(g) { groupToMacroKey[g] = macroDef.key; }); });
        var macroToField = { carb: 'carbs', protein: 'protein', fat: 'fat' };
        return macroToField[groupToMacroKey[groupKey]] || 'carbs';
    }

    /**
     * Copies generated component(s) into the Step 9 editor's day-1
     * selections at the EXACT portion MenuGenerationService computed
     * (c.calories / c.grams / c.unit) — not a full 100%-reference serving.
     * This used to reset every item back to its full reference size (e.g.
     * a component defined per 100 g would jump to 100 g regardless of the
     * 25 g the generator actually picked), which is why applied totals
     * didn't match the target the system itself had just calculated.
     *
     * Called automatically after every (re)generation. `onlyMeals` scopes
     * a partial regenerate to just the meal(s) that were actually
     * refreshed — omitting it (the initial full generate, or the manual
     * "Reset to generated menu" button) re-applies every meal, which is
     * also the one case allowed to discard the consultant's manual edits.
     *
     * @param {string[]} [onlyMeals]
     */
    function applyGeneratedMenu(onlyMeals) {
        if (!generatedMenuData) return;
        var day = 1;
        if (!mealPlannerData[day]) mealPlannerData[day] = {};

        var meals = onlyMeals || Object.keys(generatedMenuData.meals);

        meals.forEach(function(meal) {
            if (!generatedMenuData.meals[meal]) return;
            mealPlannerData[day][meal] = generatedMenuData.meals[meal].components.map(function(c) {
                var ref = plannerComponentsById[c.component_id];
                var macroKey = macroFieldForFoodGroup(c.food_group) + '_g'; // -> protein_g/carbs_g/fat_g
                var macroGrams = c[macroKey];
                if (macroGrams == null) macroGrams = (ref && ref[macroFieldForFoodGroup(c.food_group)]) || 0;

                return {
                    id: c.component_id,
                    name: c.name,
                    calories: c.calories,
                    grams: macroGrams,
                    // The actual portion in the component's own unit
                    // (g or ml) — not a percentage. PdfService divides
                    // this by the component's reference_quantity to scale
                    // its macros, so this must stay a literal quantity.
                    weight: parseFloat(c.grams) || 0,
                    unit: c.unit || (ref && ref.unit) || 'g',
                };
            });
        });

        plannerMealDefs.forEach(function(mealDef) {
            if (!plannerOverrides[day]) plannerOverrides[day] = {};
            if (!plannerOverrides[day][mealDef.key]) plannerOverrides[day][mealDef.key] = {};
        });

        storeMealPlannerData();
        renderMealEditor();
    }

    function calculateMealTargets(callback) {
        var dietType = document.getElementById('h_diet_type_step4')?.value;
        var phase = document.getElementById('h_diet_phase')?.value || null;
        if (!dietType) return;

        ensureMealDistribution(dietType, phase, function(distribution) {
            var eerValue = getPlannerEer();

            ['breakfast', 'lunch', 'dinner'].forEach(function(meal) {
                var mealData = distribution[meal];
                if (!mealData) return;
                var totalCalories = 0, totalGrams = 0;

                Object.keys(mealData).forEach(function(foodGroup) {
                    var percentage = mealData[foodGroup];
                    var calories = Math.round(eerValue * percentage / 100);
                    var caloriesPerGram = foodGroupCaloriesPerGram[foodGroup] || 4;
                    totalCalories += calories;
                    totalGrams += calories / caloriesPerGram;
                });

                mealTargets[meal] = { calories: totalCalories, grams: totalGrams };
            });

            if (callback) callback(distribution);
        });
    }

    function buildPlannerStructure(components, distribution) {
        var eerValue = getPlannerEer();

        var groupToMacro = {};
        plannerMacroDefs.forEach(function(macroDef) { macroDef.groups.forEach(function(g) { groupToMacro[g] = macroDef.key; }); });

        var buckets = { main_carb: [], fruits: [], milks: [], rich_proteins: [], oils: [], other_fats: [] };
        components.forEach(function(component) {
            var calories = parseFloat(component.calories) || 0;
            var carbs = parseFloat(component.carbs) || 0;
            var protein = parseFloat(component.protein) || 0;
            var fat = parseFloat(component.fat) || 0;
            var gramsByMacro = { carb: carbs, protein: protein, fat: fat };

            (component.food_groups || []).forEach(function(fg) {
                var key = fg.key;
                if (!key || !buckets[key]) return;
                var grams = gramsByMacro[groupToMacro[key]] || 0;
                buckets[key].push({ id: component.id, name: component.name, kcal: calories, grams: grams });
            });
        });

        plannerMeals = plannerMealDefs.map(function(mealDef) {
            var mealDist = distribution ? distribution[mealDef.key] : null;
            var target = mealTargets[mealDef.key] || { calories: 0, grams: 0 };
            return {
                key: mealDef.key, name: mealDef.name, color: mealDef.color,
                target: { kcal: target.calories, grams: target.grams },
                // A food group only shows for a meal when the diet's
                // distribution actually allocates it a nonzero share —
                // a 0% target means this meal doesn't use that group at
                // all, so it's hidden rather than shown with a 0 g goal.
                macros: plannerMacroDefs.map(function(macroDef) {
                    return {
                        key: macroDef.key, name: macroDef.name, color: macroDef.color,
                        groups: macroDef.groups.filter(function(groupKey) {
                            var pct = (mealDist && mealDist[groupKey]) || 0;
                            return pct > 0 && (buckets[groupKey] || []).length > 0;
                        }).map(function(groupKey) {
                            var pct = mealDist[groupKey];
                            var kcal = Math.round(eerValue * pct / 100);
                            var caloriesPerGram = foodGroupCaloriesPerGram[groupKey] || 4;
                            return { key: groupKey, name: formatFoodGroupLabel(groupKey), target: { kcal: kcal, grams: kcal / caloriesPerGram }, components: buckets[groupKey] };
                        })
                    };
                }).filter(function(macro) { return macro.groups.length > 0; })
            };
        });
    }

    function getMealSelections(day, meal) {
        if (!mealPlannerData[day]) mealPlannerData[day] = {};
        if (!mealPlannerData[day][meal]) mealPlannerData[day][meal] = [];
        return mealPlannerData[day][meal];
    }

    function findSelection(day, meal, componentId) {
        return getMealSelections(day, meal).find(function(c) { return String(c.id) === String(componentId); });
    }

    function getOverride(day, meal, componentId) {
        return (plannerOverrides[day] && plannerOverrides[day][meal] && plannerOverrides[day][meal][componentId]) || null;
    }

    function effVal(day, meal, c) {
        var o = getOverride(day, meal, c.id);
        return o ? { kcal: o.kcal, grams: o.grams, weight: (o.weight != null ? o.weight : 100) } : { kcal: c.kcal, grams: c.grams, weight: 100 };
    }

    function isEdited(day, meal, c) {
        var o = getOverride(day, meal, c.id);
        return !!o && (o.kcal !== c.kcal || o.grams !== c.grams || (o.weight != null && o.weight !== 100));
    }

    function switchPlannerDay(day) {
        plannerCurrentDay = day;
        var tab = document.getElementById('day' + day + '-tab');
        if (tab) tab.classList.add('active');
        renderPlanner();
    }

    function renderPlanner() {
        var root = document.getElementById('plannerRoot');
        if (!root) return;
        root.innerHTML = '';

        plannerMeals.forEach(function(meal, mi) {
            var mealId = 'd' + plannerCurrentDay + '-' + meal.key;
            var card = document.createElement('div');
            card.className = 'meal-card';
            card.innerHTML =
                '<button class="meal-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#' + mealId + '" aria-expanded="' + (mi === 0) + '" aria-controls="' + mealId + '">' +
                    '<span class="meal-dot" style="background:' + meal.color + '"></span>' +
                    '<span class="meal-name" style="color:' + meal.color + '">' + escapeHtml(meal.name) + '</span>' +
                    '<span class="meal-stats"><span class="meal-progress"><span data-bar style="width:0;background:' + meal.color + '"></span></span>' +
                         plannerFmt(meal.target.grams) + ' g</span>' +
                    plannerChev +
                '</button>' +
                '<div class="collapse ' + (mi === 0 ? 'show' : '') + '" id="' + mealId + '"></div>';
            var body = card.querySelector('.collapse');

            meal.macros.forEach(function(macro) {
                var macroId = mealId + '-' + macro.key;
                var block = document.createElement('div');
                block.className = 'macro-block';
                block.innerHTML =
                    '<button class="macro-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#' + macroId + '" aria-expanded="false" aria-controls="' + macroId + '">' +
                        '<span class="macro-pill" data-macro-pill>' + escapeHtml(macro.name) + '</span>' +
                        '<span class="macro-count">' + macro.groups.length + ' ' + @json(__('onsite.food_group')) + '</span>' +
                        plannerChev +
                    '</button>' +
                    '<div class="collapse" id="' + macroId + '"></div>';
                var macroBody = block.querySelector('.collapse');

                macro.groups.forEach(function(group) {
                    var groupId = macroId + '-' + group.key;
                    var g = document.createElement('div');
                    g.innerHTML =
                        '<button class="group-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#' + groupId + '" aria-expanded="false" aria-controls="' + groupId + '">' +
                            '<span class="group-status-dot" data-group-status></span>' +
                            '<span class="group-name">' + escapeHtml(group.name) + '</span>' +
                            '<span class="group-target" data-group-target><b data-g-g>' + plannerFmt(group.target.grams) + '</b> g</span>' +
                            plannerChev +
                        '</button>' +
                        '<div class="collapse group-collapse" id="' + groupId + '">' +
                            (group.components.length ?
                                '<div class="comp-search"><span class="comp-search-icon">' + plannerSearchIcon + '</span>' +
                                    '<input type="text" autocomplete="off" placeholder="' + @json(__('onsite.search_component')) + '">' +
                                    '<button type="button" class="comp-search-clear">&times;</button></div>'
                            : '') +
                            '<div class="comp-list"></div>' +
                            '<p class="comp-empty" hidden>' + @json(__('onsite.no_matching_components')) + '</p>' +
                            '<p class="comp-search-hint">' + @json(__('onsite.components_search_hint')) + '</p>' +
                        '</div>';
                    var list = g.querySelector('.comp-list');
                    var emptyMsg = g.querySelector('.comp-empty');
                    var searchHint = g.querySelector('.comp-search-hint');

                    if (group.components.length) {
                        // Nothing renders until the consultant searches —
                        // a food group can hold hundreds of components, so
                        // browsing the full list isn't practical. Typing a
                        // name is the only way in; clearing the search
                        // empties the list again rather than dumping
                        // everything back in.
                        var searchWrap = g.querySelector('.comp-search');
                        var searchInput = searchWrap.querySelector('input');
                        var searchClear = searchWrap.querySelector('.comp-search-clear');

                        function applyCompSearch() {
                            var term = searchInput.value.trim().toLowerCase();
                            searchWrap.classList.toggle('has-value', term.length > 0);
                            list.innerHTML = '';

                            if (!term) {
                                emptyMsg.hidden = true;
                                searchHint.hidden = false;
                                return;
                            }

                            searchHint.hidden = true;

                            var matches = group.components.filter(function(c) {
                                return (c.name || '').toLowerCase().indexOf(term) !== -1;
                            });

                            matches.forEach(function(c) { list.appendChild(buildPlannerComponent(c, meal.key, macro.name)); });
                            emptyMsg.hidden = matches.length > 0;
                        }

                        searchInput.addEventListener('input', applyCompSearch);
                        searchClear.addEventListener('click', function() {
                            searchInput.value = '';
                            applyCompSearch();
                            searchInput.focus();
                        });
                    } else {
                        list.innerHTML = '<p class="text-muted small mb-0">' + @json(__('onsite.no_data')) + '</p>';
                    }

                    macroBody.appendChild(g);
                });

                body.appendChild(block);
            });

            root.appendChild(card);
        });

        updatePlannerSummaries();
    }

    function buildPlannerComponent(c, meal, macroName) {
        var day = plannerCurrentDay;
        var wrap = document.createElement('div');
        wrap.className = 'comp-wrap';
        var checked = !!findSelection(day, meal, c.id);
        if (checked) wrap.classList.add('checked');
        var v = effVal(day, meal, c);
        var gramsLabel = @json(__('onsite.grams')) + ' (' + escapeHtml(macroName) + ')';

        wrap.innerHTML =
            '<label class="comp-item">' +
                '<input class="form-check-input m-0" type="checkbox" ' + (checked ? 'checked' : '') + '>' +
                '<span class="comp-name">' + escapeHtml(c.name) + '</span>' +
                '<span class="comp-macros"><span class="comp-values">' +
                    '<span data-c-kcal>' + plannerFmt(v.kcal) + '</span> ' + plannerKcalLabel + ' &middot; ' +
                    '<span data-c-g>' + plannerFmt(v.grams) + '</span> ' + plannerGramLabel + ' &middot; ' +
                    plannerWeightLabel + ' <span data-c-w>' + plannerFmt(v.weight) + '</span> ' + plannerGramLabel +
                '</span><span class="edited-dot" data-dot ' + (isEdited(day, meal, c) ? '' : 'hidden') + '></span></span>' +
                '<button class="edit-btn" type="button" aria-expanded="false">' + plannerPencil + '</button>' +
            '</label>' +
            '<div class="comp-editor"><div class="comp-editor-inner">' +
                '<div class="stepper-field"><span class="stepper-label">' + @json(__('onsite.calories')) + ' (kcal)</span>' +
                    '<div class="stepper"><button type="button" data-step="kcal" data-dir="-1">&minus;</button>' +
                    '<input type="number" min="0" step="1" value="' + v.kcal + '" data-input="kcal">' +
                    '<button type="button" data-step="kcal" data-dir="1">+</button></div></div>' +
                '<div class="stepper-field"><span class="stepper-label">' + gramsLabel + '</span>' +
                    '<div class="stepper"><button type="button" data-step="grams" data-dir="-1">&minus;</button>' +
                    '<input type="number" min="0" step="1" value="' + v.grams + '" data-input="grams">' +
                    '<button type="button" data-step="grams" data-dir="1">+</button></div></div>' +
                '<div class="stepper-field"><span class="stepper-label">' + @json(__('onsite.weight_gm')) + ' (g)</span>' +
                    '<div class="stepper"><button type="button" data-step="weight" data-dir="-1">&minus;</button>' +
                    '<input type="number" min="0" step="1" value="' + v.weight + '" data-input="weight">' +
                    '<button type="button" data-step="weight" data-dir="1">+</button></div></div>' +
                '<button class="reset-btn" type="button">' + @json(__('onsite.reset')) + '</button>' +
            '</div></div>';

        var checkbox = wrap.querySelector('input[type=checkbox]');
        var editBtn = wrap.querySelector('.edit-btn');
        var kcalEl = wrap.querySelector('[data-c-kcal]');
        var gEl = wrap.querySelector('[data-c-g]');
        var wEl = wrap.querySelector('[data-c-w]');
        var dot = wrap.querySelector('[data-dot]');
        var inKcal = wrap.querySelector('[data-input=kcal]');
        var inG = wrap.querySelector('[data-input=grams]');
        var inW = wrap.querySelector('[data-input=weight]');

        checkbox.addEventListener('change', function(e) {
            var selections = getMealSelections(day, meal);
            if (e.target.checked) {
                var val = effVal(day, meal, c);
                selections.push({ id: c.id, name: c.name, calories: val.kcal, grams: val.grams, weight: val.weight });
            } else {
                mealPlannerData[day][meal] = selections.filter(function(s) { return String(s.id) !== String(c.id); });
            }
            wrap.classList.toggle('checked', e.target.checked);
            updatePlannerSummaries();
            storeMealPlannerData();
            if (e.target.checked) closePlannerGroupOf(wrap);
        });

        editBtn.addEventListener('click', function(e) {
            e.preventDefault(); e.stopPropagation();
            var open = wrap.classList.toggle('editing');
            editBtn.setAttribute('aria-expanded', open);
            if (open) inKcal.focus();
        });

        var ref = { kcal: v.kcal, grams: v.grams, weight: v.weight };

        function commit(source) {
            var k = Math.max(0, parseFloat(inKcal.value) || 0);
            var g = Math.max(0, parseFloat(inG.value) || 0);
            var w = Math.max(0, parseFloat(inW.value) || 0);

            if (source === 'weight') {
                var ratioW = w / 100;
                k = plannerRound1(c.kcal * ratioW); g = plannerRound1(c.grams * ratioW);
            } else if (source === 'kcal') {
                var ratioK = c.kcal > 0 ? (k / c.kcal) : 0;
                w = plannerRound1(100 * ratioK); g = plannerRound1(c.grams * ratioK);
            } else if (source === 'grams') {
                var kcalPerGram = ref.grams > 0 ? (ref.kcal / ref.grams) : (c.grams > 0 ? c.kcal / c.grams : 0);
                k = plannerRound1(g * kcalPerGram);
                var ratioG = c.grams > 0 ? (g / c.grams) : 0;
                w = plannerRound1(100 * ratioG);
            }

            inKcal.value = k; inG.value = g; inW.value = w;
            ref.kcal = k; ref.grams = g; ref.weight = w;

            plannerOverrides[day][meal][c.id] = { kcal: k, grams: g, weight: w };
            var selected = findSelection(day, meal, c.id);
            if (selected) { selected.calories = k; selected.grams = g; selected.weight = w; }
            kcalEl.textContent = plannerFmt(k); gEl.textContent = plannerFmt(g); wEl.textContent = plannerFmt(w);
            dot.hidden = !isEdited(day, meal, c);
            updatePlannerSummaries();
            storeMealPlannerData();
        }

        wrap.querySelectorAll('[data-step]').forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                e.preventDefault(); e.stopPropagation();
                var field = btn.dataset.step, dir = +btn.dataset.dir;
                var input = field === 'kcal' ? inKcal : (field === 'grams' ? inG : inW);
                var step = field === 'grams' ? 1 : 5;
                input.value = Math.max(0, (parseFloat(input.value) || 0) + dir * step);
                commit(field);
            });
        });
        [[inKcal, 'kcal'], [inG, 'grams'], [inW, 'weight']].forEach(function(pair) {
            var input = pair[0], field = pair[1];
            input.addEventListener('click', function(e) { e.stopPropagation(); });
            input.addEventListener('input', function() { commit(field); });
        });

        wrap.querySelector('.reset-btn').addEventListener('click', function(e) {
            e.preventDefault(); e.stopPropagation();
            delete plannerOverrides[day][meal][c.id];
            ref.kcal = c.kcal; ref.grams = c.grams; ref.weight = 100;
            var selected = findSelection(day, meal, c.id);
            if (selected) { selected.calories = c.kcal; selected.grams = c.grams; selected.weight = 100; }
            inKcal.value = c.kcal; inG.value = c.grams; inW.value = 100;
            kcalEl.textContent = plannerFmt(c.kcal); gEl.textContent = plannerFmt(c.grams); wEl.textContent = plannerFmt(100);
            dot.hidden = true;
            updatePlannerSummaries();
            storeMealPlannerData();
        });

        return wrap;
    }

    function updatePlannerSummaries() {
        var root = document.getElementById('plannerRoot');
        if (!root) return;

        plannerMeals.forEach(function(meal, mi) {
            var card = root.children[mi];
            if (!card) return;
            var mealKcal = 0, mealG = 0, groupIdx = 0, macroIdx = 0;
            var groupEls = card.querySelectorAll('[data-group-target]');
            var groupStatusEls = card.querySelectorAll('[data-group-status]');
            var macroPillEls = card.querySelectorAll('[data-macro-pill]');

            meal.macros.forEach(function(macro) {
                var macroComplete = true;

                macro.groups.forEach(function(group) {
                    var gk = 0, gg = 0, selectedCount = 0;
                    group.components.forEach(function(c) {
                        if (findSelection(plannerCurrentDay, meal.key, c.id)) {
                            var v = effVal(plannerCurrentDay, meal.key, c);
                            gk += v.kcal; gg += v.grams; selectedCount++;
                        }
                    });
                    mealKcal += gk; mealG += gg;
                    if (!selectedCount) macroComplete = false;

                    var el = groupEls[groupIdx];
                    if (el) {
                        el.classList.toggle('is-over', group.target.kcal > 0 && gk > group.target.kcal);
                        el.classList.toggle('is-ok', group.target.kcal > 0 && gk > 0 && gk <= group.target.kcal);
                    }
                    var statusEl = groupStatusEls[groupIdx];
                    if (statusEl) statusEl.classList.toggle('is-complete', selectedCount > 0);
                    groupIdx++;
                });

                var pillEl = macroPillEls[macroIdx++];
                if (pillEl) pillEl.classList.toggle('is-complete', macroComplete);
            });

            var bar = card.querySelector('[data-bar]');
            var pct = meal.target.kcal ? Math.min(100, (mealKcal / meal.target.kcal) * 100) : 0;
            bar.style.width = pct + '%';
            bar.style.background = mealKcal > meal.target.kcal ? 'var(--over)' : meal.color;
        });
    }

    function validateMealPlanner() {
        var meals = ['breakfast', 'lunch', 'dinner'];
        var isValid = true;

        for (var i = 0; i < meals.length; i++) {
            var components = (mealPlannerData[1] && mealPlannerData[1][meals[i]]) || [];
            if (components.length === 0) { isValid = false; break; }
        }

        if (!isValid) { showValidationError(@json(__('onsite.each_day_each_meal_required'))); return false; }
        document.getElementById('step9_validation_message').style.display = 'none';
        return true;
    }

    function showValidationError(message) {
        var validationDiv = document.getElementById('step9_validation_message');
        document.getElementById('step9_validation_text').textContent = message;
        validationDiv.style.display = 'block';
        window.scrollTo(0, 0);
    }

    function storeMealPlannerData() {
        document.getElementById('h_meal_planner_data').value = JSON.stringify(mealPlannerData);
    }

    function getDay1Meal(meal) { return (mealPlannerData[1] && mealPlannerData[1][meal]) || []; }

    /**
     * Sums an actually-scaled macro total for a meal's selections.
     * plannerComponentsById holds each component's macros per its
     * REFERENCE quantity (usually 100 g/ml) — summing those raw values
     * regardless of the chosen portion (item.weight) overstated small
     * servings and understated large ones, which is why the chart/macro
     * totals didn't line up with the actual generated portions.
     */
    function mealMacroTotals(items) {
        var totals = { kcal: 0, carbs: 0, protein: 0, fat: 0 };
        items.forEach(function(item) {
            var nutrition = plannerComponentsById[item.id] || { calories: 0, carbs: 0, protein: 0, fat: 0, referenceQuantity: 100 };
            var refQty = nutrition.referenceQuantity || 100;
            var portion = item.weight != null ? parseFloat(item.weight) : refQty;
            var factor = refQty > 0 ? portion / refQty : 0;

            totals.kcal += parseFloat(item.calories) || (nutrition.calories * factor);
            totals.carbs += nutrition.carbs * factor;
            totals.protein += nutrition.protein * factor;
            totals.fat += nutrition.fat * factor;
        });
        return totals;
    }

    // ── Step 9 meal editor: merges the old Step 10 preview/charts in here,
    // replacing the food-group browser with a per-meal card (chart +
    // component list) and an Edit control to remove/swap components. ──
    var mealEditorDefs = [
        { key: 'breakfast', name: @json(__('onsite.breakfast')), color: 'var(--breakfast)' },
        { key: 'lunch', name: @json(__('onsite.lunch')), color: 'var(--lunch)' },
        { key: 'dinner', name: @json(__('onsite.dinner')), color: 'var(--dinner)' },
    ];

    function renderMealEditor() {
        var root = document.getElementById('mealEditorRoot');
        if (!root) return;

        var dietTypeValue = document.getElementById('h_diet_type_step4')?.value || '';
        var selectedDietCard = dietTypeValue ? document.querySelector('#dietTypeCards .diet-card[data-diet="' + dietTypeValue + '"]') : null;
        var dietTypeLabel = selectedDietCard ? selectedDietCard.querySelector('.fw-semibold').textContent.trim() : '';

        var mealTotals = {}, dayKcal = 0;
        mealEditorDefs.forEach(function(m) { mealTotals[m.key] = mealMacroTotals(getDay1Meal(m.key)); dayKcal += mealTotals[m.key].kcal; });

        root.innerHTML = '';
        if (dietTypeLabel) {
            var badge = document.createElement('div');
            badge.className = 'mb-2';
            badge.innerHTML = '<span class="badge bg-success-subtle text-success">' + escapeHtml(dietTypeLabel) + '</span>';
            root.appendChild(badge);
        }

        mealEditorDefs.forEach(function(mealDef) {
            var meal = mealDef.key;
            var items = getDay1Meal(meal);
            var totals = mealTotals[meal];
            var editing = !!mealEditorOpen[meal];

            var macroGramsSum = totals.carbs + totals.protein + totals.fat;
            var pctOfDay = dayKcal > 0 ? Math.round((totals.kcal / dayKcal) * 100) : 0;
            var carbDeg = macroGramsSum > 0 ? (totals.carbs / macroGramsSum) * 360 : 0;
            var proteinDeg = macroGramsSum > 0 ? (totals.protein / macroGramsSum) * 360 : 0;
            var pieGradient = 'conic-gradient(var(--carb) 0deg ' + carbDeg + 'deg, var(--protein) ' + carbDeg + 'deg ' + (carbDeg + proteinDeg) + 'deg, var(--fat) ' + (carbDeg + proteinDeg) + 'deg 360deg)';

            var itemsHtml = items.map(function(item) {
                return '<li class="list-group-item d-flex justify-content-between align-items-center px-0">' +
                    '<span>' + escapeHtml(item.name) + '</span>' +
                    '<span class="d-flex align-items-center gap-2">' +
                        '<span class="text-muted small text-nowrap">' + plannerFmt(item.weight != null ? item.weight : 100) + ' ' + (item.unit || 'g') + '</span>' +
                        (editing
                            ? '<button type="button" class="btn btn-sm btn-link text-danger p-0" title="' + @json(__('onsite.remove_component')) + '" onclick="removeMealComponent(\'' + meal + '\',' + item.id + ')"><i class="ri-close-circle-line fs-18"></i></button>'
                            : '') +
                    '</span></li>';
            }).join('') || '<li class="list-group-item px-0 text-muted small">' + @json(__('onsite.no_components_selected')) + '</li>';

            var searchHtml = editing
                ? '<div class="mt-2">' +
                    '<div class="input-group input-group-sm">' +
                        '<span class="input-group-text bg-white"><i class="ri-search-line"></i></span>' +
                        '<input type="text" class="form-control" placeholder="' + @json(__('onsite.search_component_to_add')) + '" ' +
                            'oninput="searchMealComponents(\'' + meal + '\', this.value)">' +
                    '</div>' +
                    '<div class="list-group mt-1" id="mealSearchResults_' + meal + '" style="max-height:180px;overflow-y:auto;"></div>' +
                '</div>'
                : '';

            var card = document.createElement('div');
            card.className = 'meal-card p-3 mb-3';
            card.innerHTML =
                '<div class="d-flex align-items-center justify-content-between mb-2">' +
                    '<span class="d-flex align-items-center gap-2">' +
                        '<span class="meal-dot" style="background:' + mealDef.color + '"></span>' +
                        '<span class="meal-name" style="color:' + mealDef.color + '">' + escapeHtml(mealDef.name) + '</span>' +
                    '</span>' +
                    '<button type="button" class="btn btn-sm ' + (editing ? 'btn-secondary' : 'btn-outline-secondary') + '" onclick="toggleMealEdit(\'' + meal + '\')">' +
                        '<i class="ri-edit-line me-1"></i>' + (editing ? @json(__('onsite.done')) : @json(__('onsite.edit'))) +
                    '</button>' +
                '</div>' +
                '<ul class="list-group list-group-flush mb-2">' + itemsHtml + '</ul>' +
                searchHtml +
                '<div class="d-flex align-items-center gap-3 mt-3 pt-2 border-top">' +
                    '<div style="width:64px;height:64px;border-radius:50%;background:' + pieGradient + ';flex-shrink:0;"></div>' +
                    '<div class="small flex-grow-1">' +
                        '<div class="fw-semibold mb-1">' + plannerFmt(totals.kcal) + ' ' + plannerKcalLabel + ' &middot; ' + pctOfDay + '% ' + @json(__('onsite.of_daily_calories')) + '</div>' +
                        '<div><span class="badge" style="background:var(--carb)">&nbsp;</span> ' + @json(__('onsite.carbohydrates')) + ': ' + plannerRound1(totals.carbs) + ' g</div>' +
                        '<div><span class="badge" style="background:var(--fat)">&nbsp;</span> ' + @json(__('onsite.components.fat')) + ': ' + plannerRound1(totals.fat) + ' g</div>' +
                        '<div><span class="badge" style="background:var(--protein)">&nbsp;</span> ' + @json(__('onsite.protein')) + ': ' + plannerRound1(totals.protein) + ' g</div>' +
                    '</div>' +
                '</div>';

            root.appendChild(card);
        });
    }

    function toggleMealEdit(meal) {
        mealEditorOpen[meal] = !mealEditorOpen[meal];
        renderMealEditor();
    }

    function removeMealComponent(meal, componentId) {
        var day = 1;
        if (!mealPlannerData[day] || !mealPlannerData[day][meal]) return;

        mealPlannerData[day][meal] = mealPlannerData[day][meal].filter(function(item) {
            return String(item.id) !== String(componentId);
        });

        storeMealPlannerData();
        renderMealEditor();
    }

    /**
     * Filters the already diet-program-filtered component catalogue
     * (plannerComponentsList, loaded per the selected diet type in
     * initializeMealPlanner) by name, excluding whatever's already in
     * this meal, and renders up to 8 matches to click and add.
     */
    function searchMealComponents(meal, term) {
        var resultsEl = document.getElementById('mealSearchResults_' + meal);
        if (!resultsEl) return;

        term = (term || '').trim().toLowerCase();
        if (term.length < 2) { resultsEl.innerHTML = ''; return; }

        var alreadyIn = getDay1Meal(meal).map(function(item) { return String(item.id); });

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

        if (!matches.length) {
            resultsEl.innerHTML = '<div class="list-group-item px-2 py-1 text-muted small">' + @json(__('onsite.no_matching_components')) + '</div>';
            return;
        }

        resultsEl.innerHTML = matches.map(function(c) {
            return '<button type="button" class="list-group-item list-group-item-action px-2 py-1 small" onclick="addMealComponent(\'' + meal + '\',' + c.id + ')">' + escapeHtml(c.name) + '</button>';
        }).join('');
    }

    function addMealComponent(meal, componentId) {
        var component = plannerComponentsList.find(function(c) { return String(c.id) === String(componentId); });
        if (!component) return;

        var day = 1;
        if (!mealPlannerData[day]) mealPlannerData[day] = {};
        if (!mealPlannerData[day][meal]) mealPlannerData[day][meal] = [];

        var groupKey = (component.food_groups && component.food_groups[0] && component.food_groups[0].key) || 'main_carb';
        var field = macroFieldForFoodGroup(groupKey);
        var calories = parseFloat(component.calories) || 0;
        var grams = parseFloat(component[field]) || 0;
        // No generated portion to match for a manually added item — default
        // to its own full reference serving (e.g. 100 g, or 15 ml for an oil).
        var refQty = parseFloat(component.reference_quantity) || 100;

        mealPlannerData[day][meal].push({ id: component.id, name: component.name, calories: calories, grams: grams, weight: refQty, unit: component.unit || 'g' });

        var searchInput = document.querySelector('#mealEditorRoot input[oninput*="' + meal + '"]');
        if (searchInput) searchInput.value = '';
        var resultsEl = document.getElementById('mealSearchResults_' + meal);
        if (resultsEl) resultsEl.innerHTML = '';

        storeMealPlannerData();
        renderMealEditor();
    }

    function restoreMealPlannerData() {
        var saved = document.getElementById('h_meal_planner_data').value;
        if (!saved) return;
        try { mealPlannerData = JSON.parse(saved) || {}; } catch (e) { console.error(e); return; }

        var defaults = {};
        plannerMeals.forEach(function(meal) {
            meal.macros.forEach(function(macro) { macro.groups.forEach(function(group) { group.components.forEach(function(c) { defaults[c.id] = c; }); }); });
        });

        Object.keys(mealPlannerData).forEach(function(day) {
            Object.keys(mealPlannerData[day] || {}).forEach(function(meal) {
                (mealPlannerData[day][meal] || []).forEach(function(entry) {
                    var def = defaults[entry.id];
                    var kcal = parseFloat(entry.calories) || 0;
                    var grams = parseFloat(entry.grams) || 0;
                    var weight = entry.weight != null ? parseFloat(entry.weight) : null;
                    if (weight == null && def && def.kcal > 0) weight = plannerRound1((kcal / def.kcal) * 100);
                    if (weight == null) weight = 100;
                    entry.weight = weight;

                    if (def && (kcal !== def.kcal || grams !== def.grams || weight !== 100)) {
                        if (!plannerOverrides[day]) plannerOverrides[day] = {};
                        if (!plannerOverrides[day][meal]) plannerOverrides[day][meal] = {};
                        plannerOverrides[day][meal][entry.id] = { kcal: kcal, grams: grams, weight: weight };
                    }
                });
            });
        });
    }

    function escapeHtml(text) {
        var div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    document.addEventListener('DOMContentLoaded', function() {
        var saved = document.getElementById('s_activity').value;
        if (saved) {
            var card = document.querySelector('.activity-card[data-value="' + saved + '"]');
            if (card) card.classList.add('border-primary');
        }

        var eerSlider = document.getElementById('slider_eer_value');
        if (eerSlider) {
            eerSlider.addEventListener('change', calculateMealDistribution);
            eerSlider.addEventListener('input', calculateMealDistribution);
        }

        document.querySelectorAll('.diet-card').forEach(function(el) {
            el.addEventListener('click', function() { setTimeout(calculateMealDistribution, 50); });
        });
    });
</script>
@endpush