<div class="modal fade" id="modal-form" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-md  modal-dialog-centered">
        <div class="modal-content text-left p-2" style="border-radius: 20px">
            <div class="modal-header text-center">
                <h5 style="margin: 0 auto; font-size: 16px"><b><span id="modal_title">Formulario de contacto</span></b>
                </h5>
            </div>
            <form action="" method="POST" id="form_modal">
                <div class="modal-body row">
                    <input type="hidden" id="modal_type_contact" name="modal_type_contact">

                    <div class="col-md-6" id="div_appointment_time" hidden>
                        <div class="form-group mb-2">
                            <label class="mb-1 fs-12" for="modal_appointment_time">FECHA Y HORA <span
                                    class="text-danger ms-1">*</span></label>
                            <input class="form-control ms-0" name="modal_appointment_time" id="modal_appointment_time"
                                type="datetime-local">
                            <small id="invalid_modal_appointment_time" class="text-danger ml-2 fs-11"></small>
                        </div>
                    </div>
                    <div class="col-md-6" id="div_modal_name">
                        <div class="form-group mb-2">
                            <label class="mb-1 fs-12" for="modal_name">NOMBRE COMPLETO <span
                                    class="text-danger ms-1">*</span></label>
                            <input class="form-control ms-0" name="modal_name" id="modal_name" type="text"
                                placeholder="Ingrese nombre..." maxlength="100">
                            <small id="invalid_modal_name" class="text-danger ml-2 fs-11"></small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-2">
                            <label class="mb-1 fs-12" for="modal_email">CORREO ELECTRÓNICO
                                <span class="text-danger ms-1" id="modal_email_required">*</span>
                            </label>
                            <input class="form-control ms-0" name="modal_email" id="modal_email" type="email"
                                placeholder="Ingrese correo electrónico..." maxlength="100">
                            <small id="invalid_modal_email" class="text-danger ml-2 fs-11"></small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-2">
                            <label class="mb-1 fs-12" for="modal_mobile">CELULAR DE CONTACTO
                                <span class="text-danger ms-1" id="modal_mobile_required">*</span>
                            </label>
                            <input class="form-control ms-0" name="modal_mobile" id="modal_mobile" type="tel"
                                placeholder="Ingrese celular..." maxlength="12">
                            <small id="invalid_modal_mobile" class="text-danger ml-2 fs-11"></small>
                        </div>
                    </div>
                    <div class="col-md-12" id="div_modal_message">
                        <div class="form-group">
                            <label class="mb-1 fs-12" for="modal_message">MENSAJE <span
                                    class="text-danger ms-1">*</span></label>
                            <textarea class="form-control" name="modal_message" id="modal_message" rows="4" placeholder="Ingrese mensaje..."></textarea>
                            <small id="invalid_modal_message" class="text-danger ml-2 fs-11"></small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer text-center justify-content-center border-top mt-2">
                    <button type="button" id="btn_submit_modal_cancel" class="btn btn-sm btn-secondary btn-cerrar"
                        data-bs-dismiss="modal"><i class="bi bi-x-circle"></i> Cerrar</button>
                    <button type="submit" id="btn_submit_modal" class="btn btn-primary btn-sm"><i
                            class="bi bi-send"></i>
                        Enviar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<?php $__env->startSection('js_content'); ?>
    <?php echo $__env->make('validator-no-login', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

    <script>
        

        $('#modal_appointment_time').blur(function() {
            validateField($('#modal_appointment_time').val(), 'modal_appointment_time', 'text', false);
        });

        $('#modal_name').keyup(function() {
            validateField($('#modal_name').val(), 'modal_name', 'names', true);
        });

        $('#modal_email').keyup(function() {
            validateEmail($('#modal_email').val(), 'modal_email', 'Ingrese un Correo Válido', false)
        });

        $('#modal_mobile').keyup(function() {
            validateField($('#modal_mobile').val(), 'modal_mobile', 'mobile', false);
        });

        $('#modal_message').keyup(function() {
            validateField($('#modal_message').val(), 'modal_message', 'text_min_description', false);
        });

        function change_size_name_modal(col = 6) {
            if ($("#div_modal_name").hasClass('col-md-12')) {
                $("#div_modal_name").removeClass('col-md-12');
            }
            if ($("#div_modal_name").hasClass('col-md-6')) {
                $("#div_modal_name").removeClass('col-md-6');
            }
            if (col == 6) {
                $("#div_modal_name").addClass('col-md-6');
            } else {
                $("#div_modal_name").addClass('col-md-12');
            }
        }

        

        $(".open-modal").click(function() {
            $("#btn_submit_modal_cancel").attr('hidden', false);
            $("#btn_submit_modal").attr('disabled', false);
            $("#btn_submit_modal").html(`<i class="bi bi-send"></i> Enviar`);
            $("#form_modal")[0].reset();
            let type = $(this).attr('data-type');
            let title = '';
            let modal_mobile_required = false;
            let modal_email_required = true;
            let hidden_div_modal_message = true;
            let hidden_div_appointment_time = false;
            switch (type) {
                case 'appointment':
                    change_size_name_modal(6);
                    title = 'AGENDAR REUNIÓN';
                    break;
                case 'call':
                    modal_mobile_required = true;
                    modal_email_required = false;
                    change_size_name_modal(6);
                    title = 'SOLICITAR LLAMADA';
                    break;
                case 'form':
                    change_size_name_modal(12);
                    hidden_div_appointment_time = true;
                    hidden_div_modal_message = false;
                    title = 'SOLICITUD DE CONTACTO';
                    break;
                default:
                    change_size_name_modal(12);
                    hidden_div_appointment_time = true;
                    hidden_div_modal_message = false;
                    title = 'FORMULARIO DE CONTACTO';
                    break;
            }

            $("#modal_title").text(title);
            $("#modal_type_contact").val(type);

            $("#div_appointment_time").attr('hidden', hidden_div_appointment_time);
            $("#div_modal_message").attr('hidden', hidden_div_modal_message);

            $("#modal_mobile_required").text(`${modal_mobile_required ? '*' : ''}`);
            $("#modal_email_required").text(`${modal_email_required ? '*' : ''}`);

            validateField($('#modal_appointment_time').val(), 'modal_appointment_time', 'text', false);
            validateField($('#modal_name').val(), 'modal_name', 'names', false);
            validateEmail($('#modal_email').val(), 'modal_email', 'Ingrese un Correo Válido', false)
            validateField($('#modal_mobile').val(), 'modal_mobile', 'mobile', false);
            validateField($('#modal_message').val(), 'modal_message', 'text_min_description', false);

            $("#modal-form").modal({
                backdrop: 'static',
                keyboard: false
            }).modal('show');;

        });


        
        $("#form_modal").submit(function(e) {
            e.preventDefault();
            let modal_appointment_time_required = true;
            let modal_mobile_required = false;
            let modal_email_required = true;
            let modal_message_required = false;
            let type = $("#modal_type_contact").val();

            let url_action = `<?php echo e(route('appointments.store')); ?>`

            if (type == 'call') {
                modal_mobile_required = true;
                modal_email_required = false;
            }
            if (type != 'appointment' && type != 'call') {
                modal_message_required = true;
                modal_appointment_time_required = false;
                url_action = `<?php echo e(route('contact-forms.store')); ?>`
            }

            let modal_appointment_time = validateField($('#modal_appointment_time').val(), 'modal_appointment_time',
                'text', modal_appointment_time_required);

            let modal_name = validateField($('#modal_name').val(), 'modal_name', 'names', true);

            let modal_email = validateEmail($('#modal_email').val(), 'modal_email', 'Ingrese un Correo Válido',
                modal_email_required);

            let modal_mobile = validateField($('#modal_mobile').val(), 'modal_mobile', 'mobile',
                modal_mobile_required);

            let modal_message = validateField($('#modal_message').val(), 'modal_message', 'text_min_description',
                modal_message_required);

            if (modal_name && modal_email && modal_mobile && modal_message) {
                $("#btn_submit_modal_cancel").attr('hidden', true);
                $("#btn_submit_modal").attr('disabled', true);
                $("#btn_submit_modal").html(
                    `<span class="spinner-border spinner-border-sm" id="sign_spinner"></span> Enviando solicitud...`
                );

                setTimeout(function() {
                    $.ajax({
                        url: url_action,
                        type: "POST",
                        dataType: "json",
                        data: {
                            appointment_time: $('#modal_appointment_time').val(),
                            name: $('#modal_name').val(),
                            email: $('#modal_email').val(),
                            mobile: $('#modal_mobile').val(),
                            message: $('#modal_message').val(),
                            type_contact: $('#modal_type_contact').val(),
                            _token: "<?php echo e(csrf_token()); ?>"
                        },
                        success: function(resp) {
                            toastr["success"](
                                `Nos pondremos en contacto a la brevedad :).`,
                                "SOLICITUD ENVIADA CORRECTAMENTE");
                            $("#modal-form").modal('hide');
                        },
                        error: function(error) {
                            $("#btn_submit_modal_cancel").attr('hidden', false);
                            $("#btn_submit_modal").attr('disabled', false);
                            $("#btn_submit_modal").html(`<i class="bi bi-send"></i> Enviar`);
                            toastr["error"](
                                `${error.responseText}`,
                                "ERROR DE VALIDACIÓN");
                        }
                    });
                }, 800);
            } else {

                toastr["error"](`Se encontraron 1 o más Campos con Problemas. Corrija e Intente nuevamente`,
                    "Error de Validación")
            }
        });




        

        $('#name').keyup(function() {
            validateField($('#name').val(), 'name', 'names', true);
        });

        $('#email').keyup(function() {
            validateEmail($('#email').val(), 'email', 'Ingrese un Correo Válido', false)
        });

        $('#mobile').keyup(function() {
            validateField($('#mobile').val(), 'mobile', 'mobile', false);
        });

        $('#message').keyup(function() {
            validateField($('#message').val(), 'message', 'text_min_description', false);
        });

        $("#type_contact").change(function() {
            mobile_required = false;
            email_required = true;
            if ($(this).val() == 'phone') {
                mobile_required = true;
                email_required = false;
            }

            $("#mobile_required").text(`${mobile_required ? '*' : ''}`);
            $("#email_required").text(`${email_required ? '*' : ''}`);
            validateEmail($('#email').val(), 'email', 'Ingrese un Correo Válido', email_required)
            validateField($('#mobile').val(), 'mobile', 'mobile', mobile_required);
        });

        
        $("#form_contact").submit(function(e) {
            e.preventDefault();
            let mobile_required = false;
            let email_required = true;
            let type = $("#type_contact").val();

            if (type == 'phone') {
                mobile_required = true;
                email_required = false;
            } else {
                mobile_required = false;
                email_required = true;
            }


            let name = validateField($('#name').val(), 'name', 'names', true);

            let email = validateEmail($('#email').val(), 'email', 'Ingrese un Correo Válido', email_required);

            let mobile = validateField($('#mobile').val(), 'mobile', 'mobile', mobile_required);

            let message = validateField($('#message').val(), 'message', 'text_min_description', true);

            if (name && email && mobile && message) {
                $("#btn_submit").attr('disabled', true);
                $("#btn_submit").html(
                    `<span class="spinner-border spinner-border-sm" id="sign_spinner"></span> Enviando solicitud...`
                );

                $.ajax({
                    url: `<?php echo e(route('contact-forms.store')); ?>`,
                    type: "POST",
                    dataType: "json",
                    data: {
                        name: $('#name').val(),
                        email: $('#email').val(),
                        mobile: $('#mobile').val(),
                        message: $('#message').val(),
                        type_contact: $('#type_contact').val(),
                        _token: "<?php echo e(csrf_token()); ?>"
                    },
                    success: function(resp) {
                        $("#form_contact")[0].reset();
                        toastr["success"](
                            `Nos pondremos en contacto a la brevedad :).`,
                            "SOLICITUD ENVIADA CORRECTAMENTE");
                        $("#modal-form").modal('hide');
                    },
                    error: function(error) {
                        toastr["error"](
                            `${error.responseText}`,
                            "ERROR DE VALIDACIÓN");
                    }
                });
                setTimeout(function() {
                    $("#btn_submit").attr('disabled', false);
                    $("#btn_submit").html(`<i class="bi bi-send"></i> Enviar`);
                }, 500);
            } else {

                toastr["error"](`Se encontraron 1 o más Campos con Problemas. Corrija e Intente nuevamente`,
                    "Error de Validación")
            }
        });
    </script>
<?php $__env->stopSection(); ?>
<?php /**PATH C:\xampp\htdocs\APP_PRODUCTIVAS\HITCH\TravelTrackingLanding\resources\views/layout/modal.blade.php ENDPATH**/ ?>