@props([
    'selectId' => 'laf-select',
    'modalId' => 'lafGuidaModal',
    'label' => 'LAF',
    'showLabel' => true,
    'selectClass' => 'form-control',
])

@php
    $opzioni = \App\Support\LafOpzioni::elenco();
    $descrizioni = \App\Support\LafOpzioni::descrizioniGuida();
@endphp

<div class="form-group">
    @if($showLabel)
        <label for="{{ $selectId }}" class="font-weight-bold d-flex align-items-center">
            <i class="fas fa-running mr-1"></i> {{ $label }}
            <button
                type="button"
                class="btn btn-link btn-sm p-0 ml-2"
                data-toggle="modal"
                data-target="#{{ $modalId }}"
                aria-label="Apri guida approfondita LAF"
            >
                <i class="fas fa-info-circle"></i> Guida
            </button>
        </label>
    @endif

    <select
        id="{{ $selectId }}"
        {{ $attributes->merge(['class' => $selectClass]) }}
    >
        @foreach($opzioni as $valore => $etichetta)
            <option value="{{ $valore }}">{{ $etichetta }}</option>
        @endforeach
    </select>

    <small class="form-text text-muted mt-2">
        Seleziona il coefficiente LAF del soggetto per personalizzare il fabbisogno e il piano nutrizionale.
    </small>
</div>

<div class="modal fade" id="{{ $modalId }}" tabindex="-1" role="dialog" aria-labelledby="{{ $modalId }}Label" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header bg-info">
                <h5 class="modal-title" id="{{ $modalId }}Label">Guida approfondita scelta LAF</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Chiudi">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @foreach($opzioni as $valore => $etichetta)
                    <h6 class="font-weight-bold mb-1">{{ $etichetta }}</h6>
                    <p class="mb-3">{{ $descrizioni[$valore] ?? '' }}</p>
                @endforeach
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
            </div>
        </div>
    </div>
</div>