<form method="POST" action="{{ route('monitor.gestisci-contenuto-store') }}" id="form-monitor-contenuto">
    @csrf
    <input type="hidden" name="monitor_id" value="{{ $monitor->id }}">

    {{-- Prima domanda: Selezione tipo (bacheca o chiamata cucina) --}}
    <div class="mb-3">
        <label class="form-label d-block mb-2">Assegna questo monitor a:</label>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="is_bacheca" id="is_bacheca_true" value="1"
                {{ old('is_bacheca', $is_bacheca ?? null) == 1 ? 'checked' : '' }}>
            <label class="form-check-label" for="is_bacheca_true">
                Bacheca
            </label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="is_bacheca" id="is_bacheca_false" value="0"
                {{ old('is_bacheca', $is_bacheca ?? null) == 0 ? 'checked' : '' }}>
            <label class="form-check-label" for="is_bacheca_false">
                Chiamata ordini per una cucina
            </label>
        </div>
    </div>

    {{-- Seconda domanda: mostro select2 per cucine o bacheche in base alla scelta --}}
    <div class="mb-3" id="bacheca_select_div" style="display: none;">
        <label for="bacheca_id" class="form-label">Seleziona la bacheca da collegare:</label>
        <select id="bacheca_id" name="bacheca_id" class="form-select select2">
            <option value="">-- Seleziona una bacheca --</option>
            @foreach(($bacheche ?? collect()) as $bacheca)
                <option value="{{ $bacheca->id }}" {{ (old('bacheca_id', $bacheca_id ?? null) == $bacheca->id) ? 'selected' : '' }}>
                    {{ $bacheca->nome ?? 'Bacheca #'.$bacheca->id }}
                </option>
            @endforeach
        </select>
        <small class="text-muted">Vengono mostrate solo le bacheche che hanno almeno un contenuto assegnato.</small>
    </div>

    <div class="mb-3" id="cucina_select_div" style="display: none;">
        <label for="cucina_id" class="form-label">Seleziona la cucina da collegare:</label>
        <select id="cucina_id" name="cucina_id" class="form-select select2">
            <option value="">-- Seleziona una cucina --</option>
            @foreach(\App\Models\Cucina::where('attivita_id', $monitor->attivita_id)->where('is_attiva', true)->get() as $cucina)
                <option value="{{ $cucina->id }}" {{ (old('cucina_id', $cucina_id ?? null) == $cucina->id) ? 'selected' : '' }}>
                    {{ $cucina->nome ?? 'Cucina #'.$cucina->id }}
                </option>
            @endforeach
        </select>
    </div>

    <div class="d-flex justify-content-end gap-2">
        <button type="submit" class="btn btn-primary">Salva</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annulla</button>
    </div>
</form>

<script>
(function () {
    const form = document.getElementById('form-monitor-contenuto');
    if (!form) return;

    function showRelevantSelect() {
        const isBacheca = document.querySelector('input[name="is_bacheca"]:checked')?.value;
        if (isBacheca === "1") {
            document.getElementById('bacheca_select_div').style.display = 'block';
            document.getElementById('cucina_select_div').style.display = 'none';
        } else if (isBacheca === "0") {
            document.getElementById('bacheca_select_div').style.display = 'none';
            document.getElementById('cucina_select_div').style.display = 'block';
        } else {
            // Nessun radio selezionato: nascondi entrambi
            document.getElementById('bacheca_select_div').style.display = 'none';
            document.getElementById('cucina_select_div').style.display = 'none';
        }
    }

    // Inizializzazione select2
    if (window.$ && $.fn.select2) {
        $('.select2').select2({
            dropdownParent: $('#modal_monitor_bacheca'),
            width: '100%'
        });
    }

    document.querySelectorAll('input[name="is_bacheca"]').forEach(function (radio) {
        radio.removeEventListener('change', showRelevantSelect);
        radio.addEventListener('change', showRelevantSelect);
    });

    // Esegui subito per mostrare le select in base allo stato attuale
    showRelevantSelect();

    if (window.$) {
        const $form = $('#form-monitor-contenuto');
        $form.off('submit.monitorContenuto').on('submit.monitorContenuto', function (e) {
            e.preventDefault();
            $.ajax({
                url: $form.attr('action'),
                type: 'POST',
                dataType: 'json',
                data: $form.serialize(),
                success: function (response) {
                    $('#modal_monitor_bacheca').modal('hide');

                    if (window.LaravelDataTables && window.LaravelDataTables['dataTable_monitor']) {
                        window.LaravelDataTables['dataTable_monitor'].ajax.reload(null, false);
                    }

                    alert(response?.message || 'Contenuto monitor aggiornato con successo');
                },
                error: function (xhr) {
                    alert(xhr?.responseJSON?.message || 'Errore nel salvataggio del contenuto monitor');
                }
            });
        });
    }
})();
</script>