@props([
    'binding' => 'wire', // wire|alpine
    'wireModifier' => 'live', // live|defer (solo se binding=wire)
])

@php
    use App\Services\BancaDatiNalkeinAccessService;

    $pasti = [
        'colazione' => [
            'label' => 'Colazione',
            'placeholder' => 'Es. yogurt, avena, frutta...',
        ],
        'spuntino_mattutino' => [
            'label' => 'Spuntino mattutino',
            'placeholder' => 'Es. frutta secca, banana...',
        ],
        'pranzo' => [
            'label' => 'Pranzo',
            'placeholder' => 'Es. pollo, riso, verdure...',
        ],
        'spuntino_pomeridiano' => [
            'label' => 'Spuntino pomeridiano',
            'placeholder' => 'Es. yogurt, frutta...',
        ],
        'cena' => [
            'label' => 'Cena',
            'placeholder' => 'Es. pesce, verdure, legumi...',
        ],
    ];

    $giorniTab = [
        'lun' => 'Lun',
        'mar' => 'Mar',
        'mer' => 'Mer',
        'gio' => 'Gio',
        'ven' => 'Ven',
        'sab' => 'Sab',
        'dom' => 'Dom',
    ];

    $wireModelAttr = $wireModifier === 'defer' ? 'wire:model.defer' : 'wire:model.live';
    $accessService = app(BancaDatiNalkeinAccessService::class);
    $modalita = $accessService->modalitaPreferenzePasto();
    $puoCercare = $accessService->utentePuoCercarePreferenzePasto();
@endphp

{{-- Sezione preferenze alimentari per pasto con ricerca da banca dati --}}
<div {{ $attributes->merge(['class' => 'form-group mt-3']) }}>
    <label class="font-weight-bold">
        <i class="fas fa-utensils"></i>
        Cibi da includere per pasto
        <span class="text-muted">(opzionale)</span>
    </label>

    @if ($modalita === BancaDatiNalkeinAccessService::MODALITA_TABS)
        {{-- Modalità alimentipvt2: tab giorni, pasti diversi per giorno --}}
        <div
            @if ($binding === 'wire')
                x-data="{ giornoTabAlimenti: @entangle('giornoTabAlimenti') }"
            @endif
        >
            <ul class="nav nav-tabs flex-wrap mb-2" role="tablist">
                @foreach ($giorniTab as $slug => $label)
                    <li class="nav-item" role="presentation">
                        <button
                            type="button"
                            class="nav-link py-1 px-2"
                            :class="{ 'active': giornoTabAlimenti === '{{ $slug }}' }"
                            @click="giornoTabAlimenti = '{{ $slug }}'"
                        >{{ $label }}</button>
                    </li>
                @endforeach
            </ul>

            <div class="row">
                @foreach ($pasti as $pasto => $meta)
                    <div class="col-md-6 mb-2">
                        <label>{{ $meta['label'] }}</label>
                        @if ($binding === 'alpine')
                            <div class="input-group">
                                <input
                                    type="text"
                                    class="form-control"
                                    :id="'alimenti_per_giorno_' + giornoTabAlimenti + '_{{ $pasto }}'"
                                    x-model="alimenti_per_giorno[giornoTabAlimenti]['{{ $pasto }}']"
                                    placeholder="{{ $meta['placeholder'] }}"
                                >
                                @if ($puoCercare)
                                    <div class="input-group-append">
                                        <button
                                            type="button"
                                            class="btn btn-outline-secondary"
                                            title="Cerca alimento nella tua banca dati personale"
                                            @click="$wire.apriModalCercaAlimentoPreferenza('{{ $pasto }}', giornoTabAlimenti)"
                                        >
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                @endif
                            </div>
                        @else
                            @foreach ($giorniTab as $slugGiorno => $labelGiorno)
                                <div
                                    x-show="giornoTabAlimenti === '{{ $slugGiorno }}'"
                                    x-cloak
                                    wire:key="alimenti-tab-{{ $slugGiorno }}-{{ $pasto }}"
                                >
                                    <div class="input-group">
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="alimenti_per_giorno_{{ $slugGiorno }}_{{ $pasto }}"
                                            {{ $wireModelAttr }}="alimenti_per_giorno.{{ $slugGiorno }}.{{ $pasto }}"
                                            placeholder="{{ $meta['placeholder'] }}"
                                        >
                                        @if ($puoCercare)
                                            <div class="input-group-append">
                                                <button
                                                    type="button"
                                                    class="btn btn-outline-secondary"
                                                    title="Cerca alimento nella tua banca dati personale"
                                                    wire:click="apriModalCercaAlimentoPreferenza('{{ $pasto }}', '{{ $slugGiorno }}')"
                                                >
                                                    <i class="fas fa-search"></i>
                                                </button>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
        <small class="form-text text-muted">
            Seleziona un giorno dalla tab e indica i cibi obbligatori per quel giorno (separati da virgola).
            Ogni giorno può avere preferenze diverse (es. colazione diversa il lunedì e il martedì).
            @if ($puoCercare)
                Usa il pulsante cerca per selezionare alimenti dalla tua banca dati personale.
            @endif
        </small>
    @else
        {{-- Modalità checkbox (alimentipvt) o base --}}
        <div class="row">
            @foreach ($pasti as $pasto => $meta)
                <div class="col-md-6 mb-2">
                    <label for="alimenti_{{ $pasto }}">{{ $meta['label'] }}</label>
                    <div class="input-group">
                        @if ($binding === 'alpine')
                            <input
                                type="text"
                                class="form-control"
                                id="alimenti_{{ $pasto }}"
                                x-model="alimenti_{{ $pasto }}"
                                placeholder="{{ $meta['placeholder'] }}"
                            >
                        @else
                            <input
                                type="text"
                                class="form-control"
                                id="alimenti_{{ $pasto }}"
                                {{ $wireModelAttr }}="alimenti_{{ $pasto }}"
                                placeholder="{{ $meta['placeholder'] }}"
                            >
                        @endif
                        @if ($modalita === BancaDatiNalkeinAccessService::MODALITA_CHECKBOX && $puoCercare)
                            <div class="input-group-append">
                                <button
                                    type="button"
                                    class="btn btn-outline-secondary"
                                    title="Cerca alimento nella tua banca dati personale"
                                    wire:click="apriModalCercaAlimentoPreferenza('{{ $pasto }}')"
                                >
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        @endif
                    </div>
                    @if ($modalita === BancaDatiNalkeinAccessService::MODALITA_CHECKBOX)
                        @if ($binding === 'alpine')
                            <x-piani-alimentari.giorni-alimenti-pasto pasto="{{ $pasto }}" alpine-model="giorni_alimenti_{{ $pasto }}" />
                        @else
                            <x-piani-alimentari.giorni-alimenti-pasto pasto="{{ $pasto }}" wire-model="giorni_alimenti_{{ $pasto }}" />
                        @endif
                    @endif
                </div>
            @endforeach
        </div>
        <small class="form-text text-muted">
            Compila solo se desideri che determinati cibi siano presenti in uno specifico pasto.
            Separali con la virgola (es. pesce, lattuga): sono alimenti singoli, tutti inclusi o tutti esclusi.
            @if ($modalita === BancaDatiNalkeinAccessService::MODALITA_CHECKBOX)
                Usa il pulsante cerca per selezionare alimenti dalla tua banca dati personale.
                I giorni selezionati indicano dove sono obbligatori.
            @endif
        </small>
    @endif
</div>