@php
    $icon = "/img/templates_v2/{$templateName}/icon-confirmation.svg";
    $confirmationMessage = $_confirmationMessage ?? "Para poder unirte a esta celebración, es necesario que confirmes tu asistencia lo antes posible.";
@endphp
<section id="confirmation">
    @if (in_array(strtolower($invitation->template->name), ['graduation classic', 'classic']))
        <div class="decorative-slot decorative-slot-1"><img alt="decorative" loading="lazy"></div>
        <div class="decorative-slot decorative-slot-2"><img alt="decorative" loading="lazy"></div>
        <div class="decorative-slot decorative-slot-3"><img alt="decorative" loading="lazy"></div>
        <div class="decorative-slot decorative-slot-4"><img alt="decorative" loading="lazy"></div>
        <div class="decorative-slot decorative-slot-5"><img alt="decorative" loading="lazy"></div>
        <div class="decorative-slot decorative-slot-6"><img alt="decorative" loading="lazy"></div>
        <div class="decorative-slot decorative-slot-7"><img alt="decorative" loading="lazy"></div>
        <div class="decorative-slot decorative-slot-8"><img alt="decorative" loading="lazy"></div>
    @endif
    <div class="container">
        @php
            // Estado real de la sección Ticket según variables de la invitación
            // Nota: los vars vienen con prefijo '_' desde InvitationService::getVars
            $ticketEnabled = isset($_enableGuestTicket) && (string)$_enableGuestTicket === '1';

            // (Opcional) se mantiene para compatibilidad, pero no decide la UI
            $hasTicketPlan = isset($sectionsEnabled) && $sectionsEnabled->contains(function($s){ return $s->code === 'ticket'; });

            $guestPasses = isset($guest) ? (int)($guest->number_of_guests ?? 0) : 0;
            $enableTicketFlow = $ticketEnabled && isset($guest) && $guestPasses > 0;

            // Modo edición/preview: cuando se visualiza desde /invitations/{id}/edit agregamos ?edit=true al iframe.
            // Si Ticket está habilitado pero no hay invitado, mostrar un botón ficticio SOLO en preview.
            $isEditPreview = request()->boolean('edit');
            $showTicketButtonPreview = $ticketEnabled && $isEditPreview && !isset($guest);
            // Grupo: si el invitado representa un grupo
            $isGroupGuest = isset($guest) && (mb_strtolower((string)($guest->last_name ?? '')) === 'grupo');
            $groupMembers = $isGroupGuest ? (is_array($guest->group_members) ? $guest->group_members : []) : [];
            // Opciones de menú por invitación (con fallback)
            $menuOptions = is_array($invitation->menu_options) && count($invitation->menu_options) > 0
                ? $invitation->menu_options
                : ['Sin restricción', 'Vegetariano', 'Vegano', 'Celíaco'];
            $isAlreadyConfirmed = false;
            $existingInfo = null;
            if ($enableTicketFlow && isset($existingConfirmation)) {
                $isAlreadyConfirmed = (bool) ($existingConfirmation->confirm ?? false);
                try {
                    $existingInfo = $existingConfirmation->info ? json_decode($existingConfirmation->info, true) : null;
                } catch (\Throwable $e) { $existingInfo = null; }
            }
        @endphp

        <div class="icon">
            <img src="{{ asset($icon) }}" alt="" />
        </div>
        <h3 class="title">Confirmación</h3>

        <p class="text textEdit">
            {{ $confirmationMessage }}<br>
            @if(isset($_confirmation_deadline))
            La fecha límite es el {{\Carbon\Carbon::fromFormatToReadableDate('Y-m-d', $_confirmation_deadline)}}.<br>
            @endif
            @if(!$enableTicketFlow && !$showTicketButtonPreview)
                Completa el siguiente formulario para confirmar tu asistencia.
            @endif
        </p>

        @if($enableTicketFlow)
            <div class="text-center">
                @if($isAlreadyConfirmed && $existingInfo && ($existingInfo['passes_confirmed'] ?? 0) > 0)
                    <p class="mb-2">Ya confirmaste <strong>{{ $existingInfo['passes_confirmed'] }}</strong> pase(s).</p>
                @endif
                <button type="button" class="btn bg-secondary text-white rounded-5 px-4" data-bs-toggle="modal" data-bs-target="#ticketConfirmModal">
                    {{ $isAlreadyConfirmed ? 'Editar confirmación' : 'Confirmar asistencia' }}
                </button>
            </div>

            <!-- Modal de Confirmación por Ticket -->
            <div class="modal fade" id="ticketConfirmModal" tabindex="-1" aria-labelledby="ticketConfirmModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="ticketConfirmModalLabel">Confirmar asistencia</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form id="confirmationFrm">
                                @csrf
                                @php
                                    $existingConfirmValue = isset($existingConfirmation) ? (int)($existingConfirmation->confirm ?? 1) : 1;
                                @endphp
                                <div class="mb-3" id="overall_confirm_block" @if($isGroupGuest) style="display:none" @endif>
                                    <label class="form-label small d-block mb-2">Asistencia</label>
                                    <div class="d-flex gap-3 align-items-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="confirm" id="confirm_yes" value="1" {{ $existingConfirmValue === 1 ? 'checked' : '' }}>
                                            <label class="form-check-label" for="confirm_yes">Sí, voy</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="confirm" id="confirm_no" value="0" {{ $existingConfirmValue === 0 ? 'checked' : '' }}>
                                            <label class="form-check-label" for="confirm_no">No puedo ir</label>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="pass_code" value="{{ $guest->pass_code }}" />
                                <div class="mb-3" id="passes_block" @if($isGroupGuest) style="display:none" @endif>
                                    <label class="form-label small">Selecciona la cantidad de pases a confirmar</label>
                                    <select class="form-select" name="passes_confirmed" id="passes_confirmed" required>
                                        @for($i=1; $i <= $guestPasses; $i++)
                                            <option value="{{ $i }}">{{ $i }}</option>
                                        @endfor
                                    </select>
                                </div>
                                <div id="confirmed_persons_container"></div>
                                <p id="confirmAssistanceMessage" class="fs-sm-18 mb-0 text-danger" style="display:none"></p>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                            <button class="btn btn-primary" id="sendConfirmation">Enviar</button>
                        </div>
                    </div>
                </div>
            </div>
        @elseif($showTicketButtonPreview)
            <div class="text-center">
                <button type="button" class="btn bg-secondary text-white rounded-5 px-4" disabled title="Vista previa">
                    Confirmar asistencia
                </button>
                <small class="d-block mt-2 text-muted">Vista previa del botón de confirmación con tickets</small>
            </div>
        @else
            <form id="confirmationFrm">
                @csrf
                <div class="row">
                    <div class="col-sm-6">
                        <div class="checks">
                            <div class="form-check me-3">
                                <input class="form-check-input" type="radio" name="confirm" value="1" id="flexRadioDefault1" required>
                                <label class="form-check-label" for="flexRadioDefault1">Sí! Confirmo</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="confirm" value="0" id="flexRadioDefault2" required>
                                <label class="form-check-label" for="flexRadioDefault2">No puedo :(</label>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" style="height: 45px;" name="name" placeholder="Nombre completo">
                        </div>
                        <div class="col-sm-12">
                            <textarea class="form-control" rows="4" placeholder="Ingrese algún dato importante..." name="info"></textarea>
                        </div>
                        <div class="col-sm-12">
                            <button class="btn" id="sendConfirmation">Enviar</button>
                            <p id="confirmAssistanceMessage" class="fs-sm-18 mb-4 mb-sm-0 text-danger mt-4"></p>
                        </div>
                    </div>
                </div>
            </form>
        @endif
    </div>
</section>
@push('scripts')
    <script>
        $(document).ready(function () {
            // Mover el modal al <body> para evitar problemas de stacking context/z-index
            var $modal = $('#ticketConfirmModal');
            if ($modal.length) {
                $modal.appendTo('body');
            }
            // Render dinámico de inputs Nombre/Apellido según cantidad de pases
            var isGroup = {!! json_encode($isGroupGuest) !!};
            var groupMembers = {!! json_encode($groupMembers) !!};
            var menuOptions = {!! json_encode(array_values($menuOptions)) !!};
            var individualName = {!! json_encode(trim(($guest->first_name ?? '').' '.($guest->last_name ?? ''))) !!};
            var individualAtt = {!! json_encode(isset($guest) ? ($guest->attendance === null ? '' : ($guest->attendance ? 'yes' : 'no')) : '') !!};
            var individualMenu = {!! json_encode(isset($guest) ? (string)($guest->menu ?? '') : '') !!};
            // Prefill desde DB para grupos (usa guest->group_members)
            function prefillFromDbGroupMembers(){
                if (!isGroup) return;
                var members = Array.isArray(groupMembers) ? groupMembers : [];
                members.forEach(function(m, idx){
                    var $row = $('#confirmed_persons_container .confirmed-person').eq(idx);
                    var $att = $row.find('select[name="persons['+idx+'][attendance]"]');
                    var $menu = $row.find('select[name="persons['+idx+'][menu]"]');
                    var att = (m && m.attendance) ? m.attendance.toString() : '';
                    var menu = (m && typeof m.menu !== 'undefined' && m.menu !== null) ? m.menu.toString() : '';
                    $att.val(att);
                    $menu.val(menu);
                    if (att === 'yes') { $menu.prop('required', true); }
                    else { $menu.prop('required', false); if (att === 'no') { $menu.val(''); } }
                });
            }
            function renderConfirmedPersons(count){
                var container = $('#confirmed_persons_container');
                if(container.length === 0){ return; }
                container.empty();
                if (isGroup) {
                    // Render miembros del grupo: nombre fijo, selects de asistencia y menú, sin remover
                    (groupMembers || []).forEach(function(m, i){
                        var fullName = (m && m.full_name) ? m.full_name : ('Invitado #' + (i+1));
                        var row = $('<div class="row g-2 mb-2 confirmed-person"></div>');
                        row.append('<div class="col-5"><label class="form-label small">Invitado</label><div class="form-control-plaintext">'+$('<div>').text(fullName).html()+'</div><input type="hidden" name="persons['+i+'][full_name]" value="'+$('<div>').text(fullName).html()+'" required></div>');
                        // Asistencia
                        var att = $('<div class="col-3"><label class="form-label small">Asistencia</label><select class="form-select attendance-select" data-index="'+i+'" name="persons['+i+'][attendance]" aria-label="Seleccionar asistencia"><option value="">Pendiente</option><option value="yes">Asiste</option><option value="no">No asiste</option></select></div>');
                        row.append(att);
                        // Menú
                        var menuSel = $('<select class="form-select menu-select" name="persons['+i+'][menu]" aria-label="Seleccionar tipo de menú"></select>');
                        menuSel.append('<option value="">—</option>');
                        menuOptions.forEach(function(opt){ menuSel.append('<option value="'+opt+'">'+opt+'</option>'); });
                        row.append($('<div class="col-4"><label class="form-label small">Menú</label></div>').append(menuSel));
                        container.append(row);
                    });
                } else {
                    // Modo individual: replicar flujo de grupos con un solo invitado fijo
                    var i = 0;
                    var row = $('<div class="row g-2 mb-2 confirmed-person"></div>');
                    row.append('<div class="col-6"><label class="form-label small">Invitado</label><div class="form-control-plaintext">'+$('<div>').text(individualName || 'Invitado').html()+'</div><input type="hidden" name="persons['+i+'][full_name]" value="'+$('<div>').text(individualName || 'Invitado').html()+'" required></div>');
                    var att = $('<div class="col-3"><label class="form-label small">Asistencia</label><select class="form-select attendance-select" data-index="'+i+'" name="persons['+i+'][attendance]" aria-label="Seleccionar asistencia"><option value="">Pendiente</option><option value="yes">Asiste</option><option value="no">No asiste</option></select></div>');
                    row.append(att);
                    var menuSel = $('<select class="form-select menu-select" name="persons['+i+'][menu]" aria-label="Seleccionar tipo de menú"></select>');
                    menuSel.append('<option value="">—</option>');
                    menuOptions.forEach(function(opt){ menuSel.append('<option value="'+opt+'">'+opt+'</option>'); });
                    row.append($('<div class="col-3"><label class="form-label small">Menú</label></div>').append(menuSel));
                    container.append(row);
                }
            }

            function renumberConfirmedPersons(){
                var rows = $('#confirmed_persons_container .confirmed-person');
                rows.each(function(idx){
                    var $row = $(this);
                    $row.find('label.form-label.small').text('Pase #'+(idx+1));
                    $row.find('input[name^="persons"]').attr('name', 'persons['+idx+'][full_name]');
                    $row.find('select[name^="persons"]').attr('name', 'persons['+idx+'][menu]');
                });
                // Sincronizar cantidad con el select
                $('#passes_confirmed').val(rows.length);
            }

            function bindRemoveButtons(){
                $('#confirmed_persons_container .remove-person').off('click').on('click', function(){
                    $(this).closest('.confirmed-person').remove();
                    renumberConfirmedPersons();
                });
            }

            var enableTicketFlow = {!! json_encode($enableTicketFlow) !!};
            if(enableTicketFlow){
                // Pre-carga si existe confirmación previa
                var existing = {!! isset($existingInfo) ? json_encode($existingInfo) : 'null' !!};
                if (isGroup) {
                    // Grupos: cantidad fija = miembros del grupo
                    var initial = (groupMembers || []).length;
                    renderConfirmedPersons(initial);
                } else {
                    // Individual: ocultar confirm/pases y renderizar una sola fila
                    $('#overall_confirm_block').hide();
                    $('#passes_block').hide();
                    renderConfirmedPersons(1);
                }
                // Prefill: para grupos usamos DB (group_members); para individuales, usamos DB del invitado
                if (isGroup) {
                    prefillFromDbGroupMembers();
                } else {
                    // Individual prefill desde DB
                    var $att = $('#confirmed_persons_container select[name="persons[0][attendance]"]');
                    var $menu = $('#confirmed_persons_container select[name="persons[0][menu]"]');
                    $att.val(individualAtt || '');
                    $menu.val(individualMenu || '');
                    if ((individualAtt || '') === 'yes') { $menu.prop('required', true); }
                    else { $menu.prop('required', false); if ((individualAtt || '') === 'no') { $menu.val(''); } }
                }
                // En modo individual ya no manejamos pases_confirmed dinámico

                // Toggle confirmación negativa
                // Ya no usamos radios de confirm para individual; derivamos de la asistencia

                // En grupos: si cambia asistencia, el menú solo es requerido cuando "Asiste"
                if (isGroup) {
                    $('#confirmed_persons_container').on('change', 'select.attendance-select', function(){
                        var idx = $(this).data('index');
                        var v = ($(this).val() || '').toString();
                        var $menu = $('#confirmed_persons_container').find('select[name="persons['+idx+'][menu]"]');
                        if (v === 'yes') { $menu.prop('required', true); }
                        else { $menu.prop('required', false); if ($menu.val() !== '') { $menu.val(''); } }
                    });
                } else {
                    // Individual: mismo comportamiento que grupos pero con índice 0
                    $('#confirmed_persons_container').on('change', 'select.attendance-select', function(){
                        var v = ($(this).val() || '').toString();
                        var $menu = $('#confirmed_persons_container').find('select[name="persons[0][menu]"]');
                        if (v === 'yes') { $menu.prop('required', true); }
                        else { $menu.prop('required', false); if ($menu.val() !== '') { $menu.val(''); } }
                    });
                }
            }

            $('#sendConfirmation').on('click', function (event) {
                event.preventDefault();
                var going;
                if (isGroup) {
                    // Derivar confirm y pases_confirmed desde selección por integrante
                    var yesCount = 0;
                    $('#confirmed_persons_container select[name$="[attendance]"]').each(function(){ if ($(this).val()==='yes') yesCount++; });
                    going = yesCount > 0;
                    // Inyectar campos confirm y passes_confirmed si se ocultó el bloque
                    if ($('#overall_confirm_block').is(':hidden')) {
                        if ($('input[name="confirm"]').length === 0) {
                            $('<input type="hidden" name="confirm" />').appendTo('#confirmationFrm');
                        }
                        $('input[name="confirm"]').val(going ? '1' : '0');
                    } else {
                        $('input[name="confirm"][value="'+(going?'1':'0')+'"]').prop('checked', true);
                    }
                    if ($('#passes_block').is(':hidden')) {
                        if ($('#passes_confirmed').length === 0) {
                            $('<input type="hidden" name="passes_confirmed" id="passes_confirmed" />').appendTo('#confirmationFrm');
                        }
                        $('#passes_confirmed').val(yesCount);
                    }
                } else {
                    // Individual: derivar confirm desde select de asistencia y setear passes_confirmed acorde
                    var att = ($('#confirmed_persons_container select[name="persons[0][attendance]"]').val() || '').toString();
                    going = (att === 'yes');
                    if ($('#overall_confirm_block').is(':hidden')) {
                        if ($('input[name="confirm"]').length === 0) { $('<input type="hidden" name="confirm" />').appendTo('#confirmationFrm'); }
                        $('input[name="confirm"]').val(going ? '1' : '0');
                    }
                    if ($('#passes_block').is(':hidden')) {
                        if ($('#passes_confirmed').length === 0) { $('<input type="hidden" name="passes_confirmed" id="passes_confirmed" />').appendTo('#confirmationFrm'); }
                        $('#passes_confirmed').val(going ? 1 : 0);
                    }
                }
                var formData = $('#confirmationFrm').serializeArray();

                var requiredFields = true;
                formData.forEach(function (campo) {
                    if ($('[name="' + campo.name + '"]').prop('required') && campo.value.trim() === '') {
                        requiredFields = false;
                        return false;
                    }
                });
                if(!requiredFields){
                    $('#confirmAssistanceMessage').show().text('Por favor, completá los campos requeridos.');
                    return;
                }
                // Bloquear botón para evitar doble envío
                var $btn = $('#sendConfirmation');
                var originalText = $btn.text();
                $btn.prop('disabled', true).text('Enviando...');

                $.ajax({
                    url: '{{ route("send.confirmation", ["invitationType" => $invitation->type->code,"slug" => $invitation->slug ]) }}',
                    method: 'POST',
                    data: formData,
                    success: function (response) {
                        $('#confirmAssistanceMessage').removeClass('text-danger').addClass('text-success').show().text(response.message || '¡Listo! Guardamos tu confirmación.');
                        // Si existe el modal, cerrarlo y refrescar la página
                        var $modal = $('#ticketConfirmModal');
                        if ($modal.length) {
                            try {
                                if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                                    var instance = bootstrap.Modal.getInstance($modal[0]) || new bootstrap.Modal($modal[0]);
                                    instance.hide();
                                } else if (typeof $modal.modal === 'function') {
                                    $modal.modal('hide');
                                }
                            } catch (e) {}
                            setTimeout(function(){ window.location.reload(); }, 250);
                        }
                    },
                    error: function (error) {
                        console.error(error);
                        $('#confirmAssistanceMessage').removeClass('text-success').addClass('text-danger').show().text('Ocurrió un error. Intentá nuevamente.');
                    },
                    complete: function(){
                        $btn.prop('disabled', false).text(originalText);
                    }
                });
                try { $('#confirmationFrm')[0].reset(); } catch (e) {}

            });
        });
    </script>
@endpush
@push('styles')
    <style>
        /* Asegurar que el modal quede por encima del backdrop y suavizar la oscuridad */
        .modal { z-index: 20000; }
        /* El backdrop debe estar por debajo del modal pero por encima de cualquier contenido */
        .modal-backdrop { z-index: 19990 !important; }
        .modal-backdrop.show { opacity: 0.65 !important; background-color: #000 !important; }

        /* Fix: texto de inputs/selects invisibles cuando no están en foco (tema oscuro/colores heredados) */
        .modal .form-control,
        .modal .form-select {
            color: #212529 !important;          /* texto principal */
            background-color: #fff !important;  /* fondo claro */
        }
        .modal .form-control::placeholder {
            color: #6c757d;                     /* placeholder en gris */
            opacity: 1;
        }
        .modal .form-control:disabled,
        .modal .form-select:disabled {
            background-color: #e9ecef !important;
            color: #6c757d !important;
        }
    </style>
@endpush