@push('css')
    <link rel="stylesheet" href="{{ asset('css/visita-resoconto.css') }}">
@endpush

<div class="visita-nutrizionale-wizard">
    <div class="card card-outline card-primary shadow-sm">
        <div class="card-header">
            <h4 class="card-title mb-0"><i class="fas fa-clipboard-list me-2"></i>Visita nutrizionale</h4>
            <p class="text-muted small mb-0 mt-1">Visualizza e registra le informazioni del cliente e crea il piano alimentare.</p>
        </div>
        <div class="card-body">
            {{-- Barra step a griglia di card (stile reference) --}}
            @php
                $stepsConfig = [
                    1 => ['label' => 'Selezione cliente',   'sublabel' => 'Cerca e seleziona il cliente dall\'anagrafica', 'icon' => 'fa-user'],
                    2 => ['label' => 'Composizione corporea',         'sublabel' => 'Esame di composizione corporea (BIA)',          'icon' => 'fa-ruler'],
                    3 => ['label' => 'Impostazioni Piano',      'sublabel' => 'Peso, LAF, FCG e macronutrienti',                'icon' => 'fa-sliders-h'],
                    4 => ['label' => 'Schema Pasti',               'sublabel' => 'Piano nutrizionale settimanale',                 'icon' => 'fa-utensils'],
                    5 => ['label' => 'Indicazioni e suggerimenti',      'sublabel' => 'Esercizio, cibi da evitare, acqua',             'icon' => 'fa-running'],
                    6 => ['label' => 'Composizione dieta',             'sublabel' => 'Composizione della dieta',                      'icon' => 'fa-chart-bar'],
                    7 => ['label' => 'Resoconto piano',                'sublabel' => 'Riepilogo grafico del piano settimanale',       'icon' => 'fa-flag-checkered'],
                ];
            @endphp
            <div class="wizard-steps-grid mb-4">
                @foreach($stepsConfig as $num => $config)
                    @php
                        $isActive = $stepCorrente === $num;
                        $isDisabled = $num > 1 && !$visitaNutrizionaleId;
                        $hideStep = in_array($num, [4, 6]) && !$this->canManualiDieta();
                    @endphp
                    @if(!$hideStep)
                    <button type="button"
                            class="wizard-step-card {{ $isActive ? 'wizard-step-card--active' : '' }} {{ $isDisabled ? 'wizard-step-card--disabled' : '' }} {{ $num === 7 ? 'wizard-step-card--summary' : '' }}"
                            wire:click="vaiAStep({{ $num }})"
                            @if($isDisabled) disabled @endif
                            @if($num === 7) aria-label="Resoconto piano nutrizionale" title="Resoconto piano nutrizionale" @endif>
                        <span class="wizard-step-card__icon">
                            <i class="fas {{ $config['icon'] }}"></i>
                        </span>
                        @if($num !== 7)
                            <span class="wizard-step-card__title">{{ $num }}. {{ $config['label'] }}</span>
                            <span class="wizard-step-card__sublabel">{{ $config['sublabel'] }}</span>
                        @endif
                    </button>
                    @endif
                @endforeach
            </div>

            {{-- Step 1: Selezione cliente --}}
            @if($stepCorrente === 1)
                <div class="wizard-card-inner">
                    <h5 class="wizard-sezione-titolo">1. Selezione del cliente</h5>
                    <p class="wizard-sezione-desc">Cerca e seleziona il cliente dall'anagrafica per avviare la visita.</p>
                    <label class="fw-bold">Cerca cliente dall'anagrafica</label>
                    <div class="position-relative">
                        <input type="text"
                               class="form-control"
                               placeholder="Cerca per nome..."
                               wire:model.live.debounce.300ms="searchCliente">
                        @if($clienteId)
                            <div class="mt-1 text-success small"><i class="fas fa-check"></i> Cliente selezionato</div>
                        @elseif(strlen(trim($searchCliente)) >= 2)
                            <div class="list-group position-absolute mt-1 shadow" style="z-index: 1050; max-height: 220px; overflow-y: auto;">
                                @foreach($this->clientiCercati as $cliente)
                                    <button type="button"
                                            class="list-group-item list-group-item-action"
                                            wire:click="selectCliente({{ $cliente->id }})">
                                        {{ $cliente->Nome }}
                                    </button>
                                @endforeach
                                @if($this->clientiCercati->isEmpty())
                                    <div class="list-group-item text-muted">Nessun cliente trovato</div>
                                @endif
                            </div>
                        @endif
                        </div>
                    @error('clienteId')
                        <span class="text-danger small">{{ $message }}</span>
                    @enderror
                    @if($clienteId)
                        <hr class="my-4">
                        <div class="card border-0 bg-light">
                            <div class="card-header bg-white border-0 pb-1">
                                <h6 class="mb-0">Indagine alimentare abituale</h6>
                                <p class="small text-muted mb-0">
                                    Raccogli le abitudini alimentari del paziente inserendo gli alimenti consumati abitualmente nei vari pasti della giornata.
                                    I dati verranno utilizzati per stimare l'introito energetico medio giornaliero.
                                </p>
                            </div>
                            <div class="card-body pt-2">
                                @php
                                    $tabPasti = [
                                        'colazione' => 'Colazione',
                                        'spuntino_mattutino' => 'Spuntino mattutino',
                                        'pranzo' => 'Pranzo',
                                        'spuntino_pomeridiano' => 'Spuntino pomeridiano',
                                        'cena' => 'Cena',
                                    ];
                                @endphp
                                <div class="wizard-steps-grid wizard-steps-grid--pasti mb-3">
                                    @foreach($tabPasti as $keyPasto => $labelPasto)
                                        <button type="button"
                                                class="wizard-step-card {{ $pastoCorrente === $keyPasto ? 'wizard-step-card--active' : '' }}"
                                                wire:click="$set('pastoCorrente', '{{ $keyPasto }}')">
                                            <span class="wizard-step-card__title">{{ $labelPasto }}</span>
                                        </button>
                                    @endforeach
                                </div>
                                <div class="tab-content border rounded p-3">
                                    @foreach($tabPasti as $keyPasto => $labelPasto)
                                        <div class="tab-pane fade {{ $pastoCorrente === $keyPasto ? 'show active' : '' }}">
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <h6 class="mb-0">{{ $labelPasto }}</h6>
                                                <button type="button"
                                                        class="btn btn-sm btn-outline-primary"
                                                        wire:click="apriRicercaAlimentiIndagine('{{ $keyPasto }}')">
                                                    <i class="fas fa-plus"></i> Aggiungi alimento
                                                </button>
                                            </div>
                                            <div class="table-responsive">
                                                <table class="table table-sm table-hover mb-0">
                                                    <thead class="table-light">
                                                        <tr>
                                                            <th>Alimento</th>
                                                            <th class="text-end">Quantità</th>
                                                            <th class="text-end">Azione</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @php
                                                            $righePasto = $indaginePasti[$keyPasto] ?? [];
                                                        @endphp
                                                        @forelse($righePasto as $idx => $riga)
                                                            @php
                                                                $alimentoId = (int) ($riga['alimento_id'] ?? 0);
                                                                $infoAlimento = $this->nomiAlimentiIndagine[$alimentoId] ?? null;
                                                                $nomeAlimento = $infoAlimento['nome'] ?? ($alimentoId ? 'Alimento #'.$alimentoId : '-');
                                                                $porzioneAlimento = $infoAlimento['porzione'] ?? null;
                                                            @endphp
                                                            <tr>
                                                                <td>
                                                                    <div class="fw-semibold">{{ $nomeAlimento }}</div>
                                                                    @if($porzioneAlimento)
                                                                        <div class="small text-muted">Porzione: {{ $porzioneAlimento }}</div>
                                                                    @endif
                                                                </td>
                                                                <td class="text-end">
                                                                    {{ isset($riga['quantita_g']) ? number_format((float) $riga['quantita_g'], 1, ',', '.') : '-' }} g
                                                                </td>
                                                                <td class="text-end">
                                                                    <button type="button"
                                                                            class="btn btn-sm btn-outline-danger"
                                                                            wire:click="rimuoviAlimentoIndagine('{{ $keyPasto }}', {{ $idx }})"
                                                                            onclick="if (!confirm('Sei sicuro di voler cancellare questo alimento dall\'indagine alimentare?')) { event.stopImmediatePropagation(); }">
                                                                        <i class="fas fa-trash-alt"></i>
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        @empty
                                                            <tr>
                                                                <td colspan="3" class="text-center text-muted small py-3">
                                                                    Nessun alimento inserito per questo pasto.
                                                                </td>
                                                            </tr>
                                                        @endforelse
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="mt-3">
                                    @if($indagineKcalMedia !== null)
                                        @php
                                            $totaliIndagine = $indagineTotali ?? null;
                                            $proteineG = $totaliIndagine['proteine_g'] ?? 0;
                                            $carboG = $totaliIndagine['carboidrati_g'] ?? 0;
                                            $lipidiG = $totaliIndagine['lipidi_g'] ?? 0;
                                            $fibreG = $totaliIndagine['fibre_g'] ?? 0;
                                            $proteineKcalIndagine = (float) $proteineG * 4;
                                            $carboKcalIndagine = (float) $carboG * 4;
                                            $lipidiKcalIndagine = (float) $lipidiG * 9;
                                            $totaleMacroKcalIndagine = $proteineKcalIndagine + $carboKcalIndagine + $lipidiKcalIndagine;
                                            $proteinePctIndagine = $totaleMacroKcalIndagine > 0 ? ($proteineKcalIndagine / $totaleMacroKcalIndagine) * 100 : 0;
                                            $carboPctIndagine = $totaleMacroKcalIndagine > 0 ? ($carboKcalIndagine / $totaleMacroKcalIndagine) * 100 : 0;
                                            $lipidiPctIndagine = $totaleMacroKcalIndagine > 0 ? ($lipidiKcalIndagine / $totaleMacroKcalIndagine) * 100 : 0;
                                            $tolleranzaSemaforoPct = 5.0;
                                            $calcolaStatoSemaforo = static function (float $valore, float $targetMin, float $targetMax, float $tolleranzaPct): string {
                                                if ($valore >= $targetMin && $valore <= $targetMax) {
                                                    return 'verde';
                                                }
                                                $sogliaMinTollerata = $targetMin - ($targetMin * ($tolleranzaPct / 100));
                                                $sogliaMaxTollerata = $targetMax + ($targetMax * ($tolleranzaPct / 100));

                                                return ($valore >= $sogliaMinTollerata && $valore <= $sogliaMaxTollerata) ? 'giallo' : 'rosso';
                                            };
                                            $semaforoMacro = [
                                                [
                                                    'nome' => 'Proteine',
                                                    'pct' => $proteinePctIndagine,
                                                    'range' => '15–20%',
                                                    'suffisso' => '%',
                                                    'stato' => $calcolaStatoSemaforo((float) $proteinePctIndagine, 15, 20, $tolleranzaSemaforoPct),
                                                ],
                                                [
                                                    'nome' => 'Carboidrati',
                                                    'pct' => $carboPctIndagine,
                                                    'range' => '50–55%',
                                                    'suffisso' => '%',
                                                    'stato' => $calcolaStatoSemaforo((float) $carboPctIndagine, 50, 55, $tolleranzaSemaforoPct),
                                                ],
                                                [
                                                    'nome' => 'Grassi',
                                                    'pct' => $lipidiPctIndagine,
                                                    'range' => '25–30%',
                                                    'suffisso' => '%',
                                                    'stato' => $calcolaStatoSemaforo((float) $lipidiPctIndagine, 25, 30, $tolleranzaSemaforoPct),
                                                ],
                                                [
                                                    'nome' => 'Fibre',
                                                    'pct' => (float) $fibreG,
                                                    'range' => '>=25 g ',
                                                    'suffisso' => 'g',
                                                    'stato' => ((float) $fibreG >= 25)
                                                        ? 'verde'
                                                        : (((float) $fibreG >= 20) ? 'giallo' : 'rosso'),
                                                ],
                                            ];
                                        @endphp
                                        <p class="mb-1">
                                            Introito energetico medio stimato:
                                            <strong>{{ (int) round($indagineKcalMedia) }} kcal/giorno</strong>
                                        </p>
                                        <p class="mb-0 small">
                                            Apporto medio dai macronutrienti:
                                            Proteine <strong>{{ number_format((float) $proteineG, 1, ',', '.') }} g</strong>,
                                            Carboidrati <strong>{{ number_format((float) $carboG, 1, ',', '.') }} g</strong>,
                                            Grassi <strong>{{ number_format((float) $lipidiG, 1, ',', '.') }} g</strong>.
                                        </p>
                                        <div class="wizard-indagine-semaforo">
                                            @foreach($semaforoMacro as $macroSemaforo)
                                                <div class="wizard-indagine-semaforo__item">
                                                    <div class="wizard-indagine-semaforo__label-wrap">
                                                        <span class="wizard-indagine-semaforo__dot wizard-indagine-semaforo__dot--{{ $macroSemaforo['stato'] }}"
                                                              aria-hidden="true"></span>
                                                        <span class="wizard-indagine-semaforo__label">{{ $macroSemaforo['nome'] }}</span>
                                                    </div>
                                                    <div class="wizard-indagine-semaforo__values">
                                                        <strong>{{ number_format((float) $macroSemaforo['pct'], 1, ',', '.') }}{{ $macroSemaforo['suffisso'] }}</strong>
                                                        <span class="text-muted small">target {{ $macroSemaforo['range'] }}</span>
                                                    </div>
                                                </div>
                                            @endforeach
                      
                                        </div>
                                    @else
                                        <p class="mb-1 text-muted small">
                                            Inserisci almeno un alimento per ottenere la stima dell'introito energetico medio giornaliero.
                                        </p>
                                    @endif
                                    @error('indagine')
                                        <span class="text-danger small d-block">{{ $message }}</span>
                                    @enderror
                                </div>
                                <p class="mb-0 small">
                                                <i class="fas fa-info-circle"></i>
                                                <span>
                                                I semafori nutrizionali sono riferiti a soggetti adulti in condizioni fisiologiche e in buono stato di salute; in presenza di gravidanza, patologie o regimi dietetici specifici, i range devono essere personalizzati.
                                                </span>
                                            </p>
                            </div>
                        </div>
                    @endif
                    <div class="mt-3">
                        <button type="button" class="btn btn-primary" wire:click="confermaClienteAndAvanti" wire:loading.attr="disabled">
                            Avanti: Misurazioni
                            <span wire:loading class="spinner-border spinner-border-sm ms-1"></span>
                        </button>
                    </div>
                </div>
            @endif

            {{-- Step 2: Misurazioni --}}
            @if($stepCorrente === 2)
                <div class="wizard-card-inner">
                    <h5 class="wizard-sezione-titolo">2. Misurazioni – Esame di composizione corporea</h5>
                    <p class="wizard-sezione-desc">Associa un esame di composizione corporea (BIA) al cliente per utilizzare peso, massa grassa e metabolismo basale nella pianificazione.</p>
                    @if($this->analisiCliente->isEmpty())
                        <p class="text-warning">Nessuna analisi trovata per questo cliente. Puoi procedere senza e inserire i dati manualmente nello step successivo.</p>
                        <button type="button" class="btn btn-outline-primary" wire:click="avantiSenzaAnalisi">Avanti senza analisi</button>
                    @else
                        <div class="row g-3">
                            @foreach($this->analisiCliente as $analisi)
                                <div class="col-md-6 col-lg-4">
                                    <div class="card h-100 wizard-analisi-card">
                                        <div class="card-body">
                                                <small class="text-muted">{{ $analisi->created_at?->format('d/m/Y H:i') }}</small>
                                                <ul class="list-unstyled mb-0 mt-1">
                                                    <li>Peso: <strong>{{ $analisi->Peso }}</strong> kg</li>
                                                    @if($analisi->FMP !== null)<li>Massa grassa: <strong>{{ $analisi->FMP }}</strong>%</li>@endif
                                                    @if(isset($analisi->BMR))<li>BMR: <strong>{{ round($analisi->BMR) }}</strong> kcal</li>@endif
                                                </ul>
                                                <button type="button" class="btn btn-sm btn-success mt-2" wire:click="associaAnalisi({{ $analisi->id }})" wire:loading.attr="disabled">
                                                    Associa questa analisi
                                                </button>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <hr>
                        <button type="button" class="btn btn-outline-secondary" wire:click="avantiSenzaAnalisi">Avanti senza analisi</button>
                    @endif
                </div>
            @endif

            {{-- Step 3: Pianificazione (stile reference: Calcoli + Distribuzione macronutrienti) --}}
            @if($stepCorrente === 3)
                @php
                    $dati = $this->datiAnalisiSolaLettura;
                    $lafDescAttuale = $laf_attuale && isset(\App\Livewire\VisitaNutrizionale\Wizard::LAF_OPZIONI[$laf_attuale]) ? \App\Livewire\VisitaNutrizionale\Wizard::LAF_OPZIONI[$laf_attuale] : null;
                    $lafDescObiettivo = $laf && isset(\App\Livewire\VisitaNutrizionale\Wizard::LAF_OPZIONI[$laf]) ? \App\Livewire\VisitaNutrizionale\Wizard::LAF_OPZIONI[$laf] : null;
                @endphp

                <div class="wizard-card-inner">
                    <h5 class="wizard-sezione-titolo">Calcoli</h5>
                    <p class="wizard-sezione-desc">Definisci gli obiettivi dell'attività fisica e del FCG.</p>
                    <table class="wizard-calcoli-tabella">
                        <thead>
                            <tr>
                                <th style="width:1%"></th>
                                <th>Valore</th>
                                <th>Attuale</th>
                                <th>Obiettivo</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="wizard-calcoli-riga-icona"><i class="fas fa-running"></i></td>
                                <td>
                                    <span class="wizard-calcoli-riga-label">Livello di attività fisica</span>
                                    <span class="wizard-calcoli-riga-sublabel">Coefficiente LAF per il calcolo del fabbisogno</span>
                                </td>
                                <td>
                                    <div x-data="{ editing: false }" class="d-inline-block">
                                        <template x-if="!editing">
                                            <span class="wizard-calcoli-valore wizard-calcoli-attuale-editable"
                                                  title="Doppio click per modificare"
                                                  @dblclick="editing = true; $nextTick(() => $refs.sel?.focus())">{{ $lafDescAttuale ?? '–' }}</span>
                                        </template>
                                        <template x-if="editing">
                                            <span class="d-inline-block" @click.outside="editing = false">
                                                <select x-ref="sel"
                                                        class="form-select form-select-sm wizard-editable-select"
                                                        style="max-width:220px"
                                                        wire:model.blur="laf_attuale"
                                                        @blur="editing = false">
                                                    @foreach(\App\Livewire\VisitaNutrizionale\Wizard::LAF_OPZIONI as $val => $desc)
                                                        <option value="{{ $val }}">{{ $desc }}</option>
                                                    @endforeach
                                                </select>
                                            </span>
                                        </template>
                                        <span class="wizard-calcoli-valore-small ms-1">LAF {{ $laf_attuale ?? '–' }}</span>
                                    </div>
                                </td>
                                <td>
                                    <div x-data="{ editing: false }" class="d-inline-block">
                                        <template x-if="!editing">
                                            <span class="wizard-calcoli-valore wizard-calcoli-attuale-editable"
                                                  title="Doppio click per modificare"
                                                  @dblclick="editing = true; $nextTick(() => $refs.sel?.focus())">{{ $lafDescObiettivo ?? '–' }}</span>
                                        </template>
                                        <template x-if="editing">
                                            <span class="d-inline-block" @click.outside="editing = false">
                                                <select x-ref="sel"
                                                        class="form-select form-select-sm wizard-editable-select"
                                                        style="max-width:220px"
                                                        wire:model.blur="laf"
                                                        @blur="editing = false">
                                                    @foreach(\App\Livewire\VisitaNutrizionale\Wizard::LAF_OPZIONI as $val => $desc)
                                                        <option value="{{ $val }}">{{ $desc }}</option>
                                                    @endforeach
                                                </select>
                                            </span>
                                        </template>
                                        <span class="wizard-calcoli-valore-small ms-1">LAF {{ $laf ?? '–' }}</span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="wizard-calcoli-riga-icona"><i class="fas fa-heartbeat"></i></td>
                                <td>
                                    <span class="wizard-calcoli-riga-label">Metabolismo basale</span>
                                    <span class="wizard-calcoli-riga-sublabel">Energia a riposo (kcal/giorno)</span>
                                </td>
                                <td>
                                    <div x-data="{ editing: false }" class="d-inline-block">
                                        <template x-if="!editing">
                                            <span class="wizard-calcoli-valore wizard-calcoli-attuale-editable"
                                                  title="Doppio click per modificare"
                                                  @dblclick="editing = true; $nextTick(() => $refs.inp?.focus())">{{ $bmr_attuale !== null ? round($bmr_attuale) . ' kcal/giorno' : '–' }}</span>
                                        </template>
                                        <template x-if="editing">
                                            <span class="d-inline-block" @click.outside="editing = false">
                                                <input x-ref="inp" type="number" step="1"
                                                       class="form-control form-control-sm wizard-editable-input d-inline-block"
                                                       style="max-width:140px"
                                                       wire:model.blur="bmr_attuale"
                                                       placeholder="es. 1136"
                                                       @blur="editing = false">
                                                <span class="wizard-calcoli-valore-small">kcal/giorno</span>
                                            </span>
                                        </template>
                                    </div>
                                </td>
                                <td>
                                    <div x-data="{ editing: false }" class="d-inline-block">
                                        <template x-if="!editing">
                                            <span class="wizard-calcoli-valore wizard-calcoli-attuale-editable"
                                                  title="Doppio click per modificare"
                                                  @dblclick="editing = true; $nextTick(() => $refs.inp?.focus())">{{ $bmr_obiettivo !== null ? round($bmr_obiettivo) . ' kcal/giorno' : '–' }}</span>
                                        </template>
                                        <template x-if="editing">
                                            <span class="d-inline-block" @click.outside="editing = false">
                                                <input x-ref="inp" type="number" step="1"
                                                       class="form-control form-control-sm wizard-editable-input d-inline-block"
                                                       style="max-width:140px"
                                                       wire:model.blur="bmr_obiettivo"
                                                       placeholder="es. 1136"
                                                       @blur="editing = false">
                                                <span class="wizard-calcoli-valore-small">kcal/giorno</span>
                                            </span>
                                        </template>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="wizard-calcoli-riga-icona"><i class="fas fa-weight-hanging"></i></td>
                                <td>
                                    <span class="wizard-calcoli-riga-label">Peso</span>
                                    <span class="wizard-calcoli-riga-sublabel">Peso corporeo</span>
                                </td>
                                <td>
                                    <div x-data="{ editing: false }" class="d-inline-block">
                                        <template x-if="!editing">
                                            <span class="wizard-calcoli-valore wizard-calcoli-attuale-editable"
                                                  title="Doppio click per modificare"
                                                  @dblclick="editing = true; $nextTick(() => $refs.inp?.focus())">{{ $peso_attuale !== null ? $peso_attuale . ' kg' : '–' }}</span>
                                        </template>
                                        <template x-if="editing">
                                            <span class="d-inline-block" @click.outside="editing = false">
                                                <input x-ref="inp" type="number" step="0.1"
                                                       class="form-control form-control-sm wizard-editable-input d-inline-block"
                                                       style="max-width:120px"
                                                       wire:model.blur="peso_attuale"
                                                       placeholder="es. 70"
                                                       @blur="editing = false">
                                                <span class="wizard-calcoli-valore-small">kg</span>
                                            </span>
                                        </template>
                                    </div>
                                </td>
                                <td>
                                    <div x-data="{ editing: false }" class="d-inline-block">
                                        <template x-if="!editing">
                                            <span class="wizard-calcoli-valore wizard-calcoli-attuale-editable"
                                                  title="Doppio click per modificare"
                                                  @dblclick="editing = true; $nextTick(() => $refs.inp?.focus())">{{ $peso_obiettivo !== null ? $peso_obiettivo . ' kg' : '–' }}</span>
                                        </template>
                                        <template x-if="editing">
                                            <span class="d-inline-block" @click.outside="editing = false">
                                                <input x-ref="inp" type="number" step="0.1"
                                                       class="form-control form-control-sm wizard-editable-input d-inline-block"
                                                       style="max-width:120px"
                                                       wire:model.blur="peso_obiettivo"
                                                       placeholder="es. 70"
                                                       @blur="editing = false">
                                                <span class="wizard-calcoli-valore-small">kg</span>
                                            </span>
                                        </template>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="wizard-calcoli-riga-icona"><i class="fas fa-percentage"></i></td>
                                <td>
                                    <span class="wizard-calcoli-riga-label">Massa grassa percentuale</span>
                                    <span class="wizard-calcoli-riga-sublabel">Da analisi BIA</span>
                                </td>
                                <td>
                                    <div x-data="{ editing: false }" class="d-inline-block">
                                        <template x-if="!editing">
                                            <span class="wizard-calcoli-valore wizard-calcoli-attuale-editable"
                                                  title="Doppio click per modificare"
                                                  @dblclick="editing = true; $nextTick(() => $refs.inp?.focus())">{{ $fmp_attuale !== null ? $fmp_attuale . ' %' : '–' }}</span>
                                        </template>
                                        <template x-if="editing">
                                            <span class="d-inline-block" @click.outside="editing = false">
                                                <input x-ref="inp" type="number" step="0.1" min="0" max="100"
                                                       class="form-control form-control-sm wizard-editable-input d-inline-block"
                                                       style="max-width:100px"
                                                       wire:model.blur="fmp_attuale"
                                                       placeholder="es. 22"
                                                       @blur="editing = false">
                                                <span class="wizard-calcoli-valore-small">%</span>
                                            </span>
                                        </template>
                                    </div>
                                </td>
                                <td>
                                    <div x-data="{ editing: false }" class="d-inline-block">
                                        <template x-if="!editing">
                                            <span class="wizard-calcoli-valore wizard-calcoli-attuale-editable"
                                                  title="Doppio click per modificare"
                                                  @dblclick="editing = true; $nextTick(() => $refs.inp?.focus())">{{ $fmp_obiettivo !== null ? $fmp_obiettivo . ' %' : '–' }}</span>
                                        </template>
                                        <template x-if="editing">
                                            <span class="d-inline-block" @click.outside="editing = false">
                                                <input x-ref="inp" type="number" step="0.1" min="0" max="100"
                                                       class="form-control form-control-sm wizard-editable-input d-inline-block"
                                                       style="max-width:100px"
                                                       wire:model.blur="fmp_obiettivo"
                                                       placeholder="es. 22"
                                                       @blur="editing = false">
                                                <span class="wizard-calcoli-valore-small">%</span>
                                            </span>
                                        </template>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="wizard-calcoli-riga-icona"><i class="fas fa-fire-alt"></i></td>
                                <td>
                                    <span class="wizard-calcoli-riga-label">Fabbisogno calorico giornaliero</span>
                                    <span class="wizard-calcoli-riga-sublabel">MB × LAF</span>
                                </td>
                                <td>
                                    <div x-data="{ editing: false }" class="d-inline-block">
                                        <template x-if="!editing">
                                            <span class="wizard-calcoli-valore wizard-calcoli-attuale-editable"
                                                  title="Doppio click per modificare"
                                                  @dblclick="editing = true; $nextTick(() => $refs.inp?.focus())">{{ $fcg_attuale !== null ? round($fcg_attuale) . ' kcal/giorno' : '–' }}</span>
                                        </template>
                                        <template x-if="editing">
                                            <span class="d-inline-block" @click.outside="editing = false">
                                                <input x-ref="inp" type="number" step="1"
                                                       class="form-control form-control-sm wizard-editable-input d-inline-block"
                                                       style="max-width:140px"
                                                       wire:model.blur="fcg_attuale"
                                                       placeholder="es. 2000"
                                                       @blur="editing = false">
                                                <span class="wizard-calcoli-valore-small">kcal/giorno</span>
                                            </span>
                                        </template>
                                    </div>
                                </td>
                                <td>
                                    <div x-data="{ editing: false }" class="d-inline-block">
                                        <template x-if="!editing">
                                            <span class="wizard-calcoli-valore wizard-calcoli-attuale-editable"
                                                  title="Doppio click per modificare"
                                                  @dblclick="editing = true; $nextTick(() => $refs.inp?.focus())">{{ $fcg_obiettivo !== null ? round($fcg_obiettivo) . ' kcal/giorno' : '–' }}</span>
                                        </template>
                                        <template x-if="editing">
                                            <span class="d-inline-block" @click.outside="editing = false">
                                                <input x-ref="inp" type="number" step="1"
                                                       class="form-control form-control-sm wizard-editable-input d-inline-block"
                                                       style="max-width:140px"
                                                       wire:model.blur="fcg_obiettivo"
                                                       placeholder="es. 2000"
                                                       @blur="editing = false">
                                                <span class="wizard-calcoli-valore-small">kcal/giorno</span>
                                            </span>
                                        </template>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="wizard-card-inner">
                    <h5 class="wizard-sezione-titolo">Distribuzione dei macronutrienti</h5>
                    <p class="wizard-sezione-desc">Imposta la distribuzione dei macronutrienti (la somma deve essere 100%).</p>
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="macroAutoAggiornamento" wire:model.live="macroAutoAggiornamento">
                        <label class="form-check-label" for="macroAutoAggiornamento">
                            Aggiornamento automatico degli altri parametri (ridistribuisce per somma 100% quando muovi uno slider)
                        </label>
                    </div>
                    @php
                        $peso = $peso_obiettivo ?? $peso_attuale ?? 60;
                        $fcg = (int)($fcg_obiettivo ?? $fcg_attuale ?? 2000);
                        $proteineG = $fcg > 0 ? round(($proteine_pct ?? 0) / 100 * $fcg / 4, 0) : 0;
                        $carboidratiG = $fcg > 0 ? round(($carboidrati_pct ?? 0) / 100 * $fcg / 4, 0) : 0;
                        $lipidiG = $fcg > 0 ? round(($lipidi_pct ?? 0) / 100 * $fcg / 9, 0) : 0;
                        $proteineGkg = $peso > 0 ? round($proteineG / $peso, 2) : 0;
                        $carboidratiGkg = $peso > 0 ? round($carboidratiG / $peso, 2) : 0;
                        $lipidiGkg = $peso > 0 ? round($lipidiG / $peso, 2) : 0;

                        // Calcolo energia in kcal per ciascun macronutriente
                        $proteineKcal = $proteineG * 4;
                        $carboidratiKcal = $carboidratiG * 4;
                        $lipidiKcal = $lipidiG * 9;
                        $totaleMacroKcal = $proteineKcal + $carboidratiKcal + $lipidiKcal;
                    @endphp

                    {{-- Tabella a 6 colonne: Nome macro | Slider con % | Quantità gr | kcal | g/kg | Range --}}
                    <div class="table-responsive">
                        <table class="table table-borderless wizard-macro-tabella mb-0">
                            <thead>
                                <tr>
                                    <th class="wizard-macro-th-nome" style="width:30%"></th>
                                    <th class="wizard-macro-th-slider text-center text-nowrap" style="width:35%">% su kcal</th>
                                    <th class="wizard-macro-th-gr text-center text-nowrap" style="width:10%">g totali</th>
                                    <th class="wizard-macro-th-kcal text-center text-nowrap" style="width:10%">kcal</th>
                                    <th class="wizard-macro-th-gkg text-center text-nowrap" style="width:10%">g/kg</th>
                                    <th class="wizard-macro-th-range text-center text-nowrap" style="width:5%">Range %</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="wizard-macro-td-nome">
                                        <div class="d-flex align-items-start gap-2">
                                            <span class="wizard-macro-numero mr-2">1</span>
                                            <div>
                                                <span class="wizard-macro-label">Proteine</span>
                                                <span class="wizard-macro-sublabel d-block">Distribuzione delle proteine nella pianificazione</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="wizard-macro-td-slider">
                                        <div class="wizard-macro-slider-wrap wizard-macro-slider-proteine">
                                            <div class="wizard-macro-slider-controls">
                                                <button type="button"
                                                        class="btn btn-outline-secondary btn-sm wizard-macro-step-btn"
                                                        wire:click="regolaMacroFine('proteine', -0.5)"
                                                        @disabled(((float)($proteine_pct ?? 0)) <= 0)
                                                        aria-label="Diminuisci proteine di 0,5 punti percentuali"
                                                        title="Diminuisci di 0,5%">
                                                    <i class="fas fa-minus"></i>
                                                </button>
                                                <input type="range" min="0" max="100" step="1" class="form-range" wire:model.live.debounce.100ms="proteine_pct">
                                                <button type="button"
                                                        class="btn btn-outline-secondary btn-sm wizard-macro-step-btn"
                                                        wire:click="regolaMacroFine('proteine', 0.5)"
                                                        @disabled(((float)($proteine_pct ?? 0)) >= 100)
                                                        aria-label="Aumenta proteine di 0,5 punti percentuali"
                                                        title="Aumenta di 0,5%">
                                                    <i class="fas fa-plus"></i>
                                                </button>
                                            </div>
                                            <span class="wizard-macro-pct">{{ number_format((float)($proteine_pct ?? 0), 1, ',', '') }} %</span>
                                        </div>
                                    </td>
                                    <td class="wizard-macro-td-gr text-center text-nowrap">{{ $proteineG }} g</td>
                                    <td class="wizard-macro-td-kcal text-center text-nowrap">{{ $proteineKcal }} kcal</td>
                                    <td class="wizard-macro-td-gkg text-center text-nowrap">{{ $proteineGkg }} g/kg</td>
                                    <td class="wizard-macro-td-range text-center text-nowrap">10 – 35 %</td>
                                </tr>
                                <tr>
                                    <td class="wizard-macro-td-nome">
                                        <div class="d-flex align-items-start gap-2">
                                            <span class="wizard-macro-numero mr-2">2</span>
                                            <div>
                                                <span class="wizard-macro-label">Carboidrati</span>
                                                <span class="wizard-macro-sublabel d-block">Distribuzione dei carboidrati nella pianificazione</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="wizard-macro-td-slider">
                                        <div class="wizard-macro-slider-wrap wizard-macro-slider-carboidrati">
                                            <div class="wizard-macro-slider-controls">
                                                <button type="button"
                                                        class="btn btn-outline-secondary btn-sm wizard-macro-step-btn"
                                                        wire:click="regolaMacroFine('carboidrati', -0.5)"
                                                        @disabled(((float)($carboidrati_pct ?? 0)) <= 0)
                                                        aria-label="Diminuisci carboidrati di 0,5 punti percentuali"
                                                        title="Diminuisci di 0,5%">
                                                    <i class="fas fa-minus"></i>
                                                </button>
                                                <input type="range" min="0" max="100" step="1" class="form-range" wire:model.live.debounce.100ms="carboidrati_pct">
                                                <button type="button"
                                                        class="btn btn-outline-secondary btn-sm wizard-macro-step-btn"
                                                        wire:click="regolaMacroFine('carboidrati', 0.5)"
                                                        @disabled(((float)($carboidrati_pct ?? 0)) >= 100)
                                                        aria-label="Aumenta carboidrati di 0,5 punti percentuali"
                                                        title="Aumenta di 0,5%">
                                                    <i class="fas fa-plus"></i>
                                                </button>
                                            </div>
                                            <span class="wizard-macro-pct">{{ number_format((float)($carboidrati_pct ?? 0), 1, ',', '') }} %</span>
                                        </div>
                                    </td>
                                    <td class="wizard-macro-td-gr text-center text-nowrap">{{ $carboidratiG }} g</td>
                                    <td class="wizard-macro-td-kcal text-center text-nowrap">{{ $carboidratiKcal }} kcal</td>
                                    <td class="wizard-macro-td-gkg text-center text-nowrap">{{ $carboidratiGkg }} g/kg</td>
                                    <td class="wizard-macro-td-range text-center text-nowrap">45 – 65 %</td>
                                </tr>
                                <tr>
                                    <td class="wizard-macro-td-nome">
                                        <div class="d-flex align-items-start gap-2">
                                            <span class="wizard-macro-numero mr-2">3</span>
                                            <div>
                                                <span class="wizard-macro-label">Lipidi</span>
                                                <span class="wizard-macro-sublabel d-block">Distribuzione dei lipidi nella pianificazione</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="wizard-macro-td-slider">
                                        <div class="wizard-macro-slider-wrap wizard-macro-slider-lipidi">
                                            <div class="wizard-macro-slider-controls">
                                                <button type="button"
                                                        class="btn btn-outline-secondary btn-sm wizard-macro-step-btn"
                                                        wire:click="regolaMacroFine('lipidi', -0.5)"
                                                        @disabled(((float)($lipidi_pct ?? 0)) <= 0)
                                                        aria-label="Diminuisci lipidi di 0,5 punti percentuali"
                                                        title="Diminuisci di 0,5%">
                                                    <i class="fas fa-minus"></i>
                                                </button>
                                                <input type="range" min="0" max="100" step="1" class="form-range" wire:model.live.debounce.100ms="lipidi_pct">
                                                <button type="button"
                                                        class="btn btn-outline-secondary btn-sm wizard-macro-step-btn"
                                                        wire:click="regolaMacroFine('lipidi', 0.5)"
                                                        @disabled(((float)($lipidi_pct ?? 0)) >= 100)
                                                        aria-label="Aumenta lipidi di 0,5 punti percentuali"
                                                        title="Aumenta di 0,5%">
                                                    <i class="fas fa-plus"></i>
                                                </button>
                                            </div>
                                            <span class="wizard-macro-pct">{{ number_format((float)($lipidi_pct ?? 0), 1, ',', '') }} %</span>
                                        </div>
                                    </td>
                                    <td class="wizard-macro-td-gr text-center text-nowrap">{{ $lipidiG }} g</td>
                                    <td class="wizard-macro-td-kcal text-center text-nowrap">{{ $lipidiKcal }} kcal</td>
                                    <td class="wizard-macro-td-gkg text-center text-nowrap">{{ $lipidiGkg }} g/kg</td>
                                    <td class="wizard-macro-td-range text-center text-nowrap">20 – 35 %</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    @php
                        $sum = (float)($proteine_pct ?? 0) + (float)($carboidrati_pct ?? 0) + (float)($lipidi_pct ?? 0);
                        $macroOk = abs($sum - 100.0) < 0.001;
                    @endphp
                    <p class="wizard-macro-totale {{ $macroOk ? 'ok' : 'errore' }}" id="wizard-macro-totale">
                        Totale: <strong>{{ number_format($sum, 1, ',', '') }}%</strong>
                        @if(!$macroOk)
                            <span class="small">(valore raccomandato 100%)</span>
                        @endif
                    </p>
                    <p class="wizard-macro-totale-kcal">
                        Energia dai macronutrienti impostati:
                        <strong>{{ $totaleMacroKcal }} kcal</strong>
                        @if($fcg > 0)
                            <span class="small">su un fabbisogno di circa {{ $fcg }} kcal/giorno</span>
                        @endif
                    </p>
                    @error('macro')
                        <span class="text-danger small">{{ $message }}</span>
                    @enderror
                    <p class="wizard-footer-ref">Food and Nutrition Board / IOM</p>
                </div>

                <div class="mt-2">
                    <button type="button"
                            class="btn btn-primary"
                            wire:click="salvaPianificazione"
                            wire:loading.attr="disabled">
                        Salva e avanti: Pasti
                        <span wire:loading class="spinner-border spinner-border-sm ms-1"></span>
                    </button>
                </div>
            @endif

            {{-- Step 4: Pasti (embed CreaPianoSettimanale) – visibile solo con permesso manuali-diete --}}
            @if($stepCorrente === 4)
                @can('manuali-diete')
                <div class="card border">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">4. Pasti – Piano nutrizionale settimanale</h5>
                        <small class="text-muted">Compila il piano e salvalo; poi clicca Avanti per le raccomandazioni.</small>
                    </div>
                    <div class="card-body">
                        @if($this->visitaNutrizionale?->cliente_id)
                            @livewire('piani-alimentari.crea-piano-settimanale', [
                                'clienteId' => $this->visitaNutrizionale->cliente_id,
                                'visitaNutrizionaleId' => $visitaNutrizionaleId,
                            ], key('crea-piano-'.$visitaNutrizionaleId))
                        @endif
                        <div class="mt-3">
                            <button type="button" class="btn btn-primary" wire:click="avantiDaStep4" wire:loading.attr="disabled">
                                <span wire:loading.remove>Avanti: Raccomandazioni</span>
                                <span wire:loading>Salvataggio piano...</span>
                            </button>
                        </div>
                    </div>
                </div>
                @else
                <div class="alert alert-info">
                    La funzionalità piano nutrizionale settimanale non è disponibile per il tuo profilo.
                </div>
                <div class="mt-3">
                    <button type="button" class="btn btn-primary" wire:click="vaiAStep(5)">
                        Avanti: Raccomandazioni
                    </button>
                </div>
                @endcan
            @endif

            {{-- Step 5: Raccomandazioni --}}
            @if($stepCorrente === 5)
                <div class="wizard-card-inner">
                    <h5 class="wizard-sezione-titolo">5. Raccomandazioni</h5>
                    <p class="wizard-sezione-desc">Esercizio fisico, cibi da evitare e assunzione d'acqua.</p>
                    <div class="mb-4">
                            <label class="fw-bold">Esercizio fisico</label>
                            <p class="small text-muted">Attività fisiche da prescrivere al cliente.</p>
                            <textarea class="form-control" rows="2" wire:model="esercizio_fisico" placeholder="es. 1 ora di camminata tutti i giorni"></textarea>
                        </div>
                        <div class="mb-4">
                            <label class="fw-bold">Cibi da evitare</label>
                            <p class="small text-muted">Alimenti che non devono essere ingeriti.</p>
                            <textarea class="form-control" rows="3" wire:model="cibi_da_evitare" placeholder="es. Bevande alcoliche, fritti..."></textarea>
                        </div>
                        <div class="mb-4">
                            <label class="fw-bold">Assunzione d'acqua tra i pasti</label>
                            <p class="small text-muted">Consumo giornaliero d'acqua raccomandato.</p>
                            <input type="text" class="form-control" wire:model="acqua_raccomandata" placeholder="es. Tra 2 e 2,5 litri">
                        </div>
                    <button type="button" class="btn btn-primary" wire:click="salvaRaccomandazioni" wire:loading.attr="disabled">
                        Salva e avanti: Analisi
                        <span wire:loading class="spinner-border spinner-border-sm ms-1"></span>
                    </button>
                </div>
            @endif

            {{-- Step 6: Analisi – contenuto analisi visibile solo con permesso manuali-diete --}}
            @if($stepCorrente === 6)
                <div class="wizard-card-inner">
                    <h5 class="wizard-sezione-titolo">6. Analisi – Composizione della dieta</h5>
                    <p class="wizard-sezione-desc">Distribuzione macronutrienti ed energetica del piano alimentare.</p>
                    @can('manuali-diete')
                        {{-- Blocco scelta giorni: stesso stile card degli step (bianco inattivo, teal attivo) --}}
                        <h6 class="border-bottom pb-1 mt-4">Analisi per giorno</h6>
                        <div class="wizard-days-row mb-3">
                            @foreach(\App\Services\PianoSettimanaleNutrizionaleService::GIORNI_SETTIMANA as $giorno)
                                @php
                                    $macroGiorno = $this->analisiMacroPerGiorno[$giorno] ?? ['totali' => ['energia_kcal' => 0, 'proteine_g' => 0, 'carboidrati_g' => 0, 'lipidi_g' => 0, 'fibre_g' => 0], 'percentuali' => ['proteine' => 0, 'carboidrati' => 0, 'lipidi' => 0]];
                                    $perc = $macroGiorno['percentuali'];
                                    $tot = $macroGiorno['totali'];
                                    $isActive = $giornoAnalisiSelezionato === $giorno;
                                @endphp
                                <button type="button"
                                        class="wizard-step-card {{ $isActive ? 'wizard-step-card--active' : '' }}"
                                        wire:click="selezionaGiornoAnalisi('{{ $giorno }}')">
                                    <span class="wizard-step-card__icon">
                                        <i class="fas fa-calendar-day"></i>
                                    </span>
                                    <span class="wizard-step-card__title">{{ $giorno }}</span>
                                    <span class="wizard-step-card__sublabel">
                                        {{ (int) round($tot['energia_kcal']) }} kcal – P {{ round($perc['proteine'], 1) }}% / C {{ round($perc['carboidrati'], 1) }}% / L {{ round($perc['lipidi'], 1) }}%
                                    </span>
                                </button>
                            @endforeach
                        </div>

                        @livewire('visita-nutrizionale.analisi-piano', [
                            'visitaNutrizionaleId' => $visitaNutrizionaleId,
                            'giornoSelezionato' => $giornoAnalisiSelezionato,
                        ], key('analisi-piano-'.$visitaNutrizionaleId.'-'.$giornoAnalisiSelezionato.'-'.$analisiPianoRefreshKey))
                    @else
                        <div class="alert alert-info">L'analisi della composizione della dieta non è disponibile per il tuo profilo.</div>
                    @endcan

                    @if(!$this->visitaNutrizionale?->completata)
                        <hr>
                        <div class="d-flex flex-wrap align-items-center gap-2">
                            <button type="button" class="btn btn-success" wire:click="concludiVisita" wire:loading.attr="disabled">
                                Concludi visita nutrizionale
                                <span wire:loading class="spinner-border spinner-border-sm ms-1"></span>
                            </button>
                        </div>
                    @else
                        <div class="alert alert-success mt-2">Visita nutrizionale conclusa.</div>
                    @endif
                </div>
            @endif

            {{-- Step 7: Resoconto piano nutrizionale --}}
            @if($stepCorrente === 7)
                <div class="wizard-card-inner">
                    <h5 class="wizard-sezione-titolo">7. Resoconto piano nutrizionale</h5>
                    <p class="wizard-sezione-desc">
                        Riepilogo moderno del piano alimentare giornaliero e dei macronutrienti, ispirato al layout NutritionPro.
                    </p>
                    @if($visitaNutrizionaleId)
                        @livewire('visita-nutrizionale.resoconto-piano', [
                            'visitaNutrizionaleId' => $visitaNutrizionaleId,
                        ], key('resoconto-piano-'.$visitaNutrizionaleId))
                    @else
                        <div class="alert alert-info mb-0">
                            Seleziona e salva una visita nutrizionale prima di visualizzare il resoconto del piano.
                        </div>
                    @endif
                </div>
            @endif
        </div>
        {{-- Modale inserimento alimenti per indagine alimentare (riuso pattern step 4) --}}
        @if($mostraModalIndagineAlimenti)
            <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);" aria-modal="true">
                <div class="modal-dialog modal-xl modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                Seleziona alimento per
                                @php
                                    $labelPastoIndagine = [
                                        'colazione' => 'Colazione',
                                        'spuntino_mattutino' => 'Spuntino mattutino',
                                        'pranzo' => 'Pranzo',
                                        'spuntino_pomeridiano' => 'Spuntino pomeridiano',
                                        'cena' => 'Cena',
                                    ][$pastoCorrente] ?? ucfirst(str_replace('_', ' ', $pastoCorrente));
                                @endphp
                                <span class="fw-bold">{{ $labelPastoIndagine }}</span>
                            </h5>
                            <button type="button" class="btn-close" wire:click="chiudiModalIndagineAlimenti" aria-label="Chiudi"></button>
                        </div>
                        <div class="modal-body">
                            <livewire:piani-alimentari.seleziona-alimenti
                                :giorno="'GiornoUnico'"
                                :pasto="$pastoCorrente"
                                wire:key="indagine-{{ $pastoCorrente }}" />
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" wire:click="chiudiModalIndagineAlimenti">Chiudi</button>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>