@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">
    <div class="container">
        <form id="confirmationFrm">
            @csrf
            <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
                Completa el siguiente formulario para confirmar tu asistencia.
            </p>
            
            <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>
    </div>
</section>
@push('scripts')
    <script>
        $(document).ready(function () {
            $('#sendConfirmation').on('click', function (event) {
                event.preventDefault();

                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('Ingrese los campos requeridos');
                    return;
                }
                $.ajax({
                    url: '{{ route("send.confirmation", ["invitationType" => $invitation->type->code,"slug" => $invitation->slug ]) }}',
                    method: 'POST',
                    data: formData,
                    success: function (response) {
                        $('#confirmAssistanceMessage').show().text(response.message);
                    },
                    error: function (error) {
                        console.error(error);
                    }
                });
                $('#confirmationFrm')[0].reset()

            });
        });
    </script>
@endpush