@php
    $icon = "/img/templates_v2/{$templateName}/icon-transport.svg";
    $privateTransportationText = $_privateTransportationText ?? 'Para facilitarte el traslado al lugar del evento contamos con un transporte privado.Para este servicio es necesario que confirmes para reservar tu lugar.';
@endphp
<section id="transport">
    <div class="container">
        <div class="icon">
            <img src="{{ asset($icon) }}" alt="" />
        </div>
        <div class="title">{{ $_privateTransportTitle ?? 'Transporte Privado' }}</div>
        <div class="text">
            {!! nl2br(e($privateTransportationText)) !!}
        </div>
        <form id="privateTransportationFrm">
            @csrf
            <div class="row">
                <div class="col-sm-12">
                    <input type="text" placeholder="Nombre completo" class="form-control"  name="fullname" required/>
                </div>

                <div class="col-sm-12">
                    <div class="form-control lugares" >
                        Cantidad de lugares* 
                        <select name="number_of_persons" class="px-3 py-2 rounded-0" required>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-12 btnConfirmed">
                    <button type="submit" class="btn" id="sendPrivateTransportationFrm">Confirmar</button>
                    <p id="confirmPrivateTransportationMessage" class="fs-sm-18 mb-4 mb-sm-0 text-center text-danger mt-4"></p>
                </div>
            </div>
        </form>
    </div>
</section>
@push('scripts')
    <script>
        $(document).ready(function () {
            $('#sendPrivateTransportationFrm').on('click', function (event) {
                event.preventDefault();

                var formData = $('#privateTransportationFrm').serializeArray();

                var requiredFields = true;
                formData.forEach(function (campo) {
                    if ($('[name="' + campo.name + '"]').prop('required') && campo.value.trim() === '') {
                        requiredFields = false;
                        return false;
                    }
                });
                if(!requiredFields){
                    $('#confirmPrivateTransportationMessage').show().text('Ingrese los campos requeridos');
                    return;
                }
                $.ajax({
                    url: '{{ route("send.privateTransportation", ["invitationType" => $invitation->type->code,"slug" => $invitation->slug ]) }}',
                    method: 'POST',
                    data: formData,
                    success: function (response) {
                        // Muestra el mensaje de éxito
                        $('#confirmPrivateTransportationMessage').show().text(response.message);
                    },
                    error: function (error) {
                        // Manejo de errores si es necesario
                        console.error(error);
                    }
                });
            });
        });
    </script>
@endpush