@extends("ushuaia.web.plantilla")

@section("contenido")
<div class="container-fluid" id="index-comercio">
    <div class="row mx-0 pt-2">
        <div class="col-12 pl-xl-5 mt-md-5 mt-0 pt-md-3">
            <div class="row mx-0 pl-xl-5">
                <div class="col-lg-5 comercio-titulo">
                    <h1>Formá parte <br> de <strong>Tarjeta +U</strong></h1>
                </div>
            </div>
            <div class="row mx-0 pl-xl-5">
                <div class="pr-sm-4 pr-lg-3 col-12 col-sm-6 col-xl-5">
                    <div class="mt-md-3 mt-1 text-white">
                        <p class="texto">Te invitamos a sumarte a esta especial iniciativa para impulsar la actividad de tu comercio. ¡No te pierdas la oportunidad de ser parte!</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="comercio" class="container-fluid mt-sm-3 pb-sm-5 mb-sm-2 pl-xl-5">
    <div class="row mx-0 my-md-5 my-4 px-xl-5 justify-content-between">
        <div class="col-sm-6 col-12 text-left pr-md-5 pl-lg-4 preguntas-frecuentes">
            <h2 class="mb-md-4 mb-2">Registrate</h2>
            <div class="mb-4">
                <p>
                    Para adherir tu comercio al programa +U completá el formulario que figura a la derecha de la pantalla con los datos solicitados. Estos serán recibidos en el Centro +U para su verificación y, una vez confirmados, se realizará tu registración al programa. Este proceso puede demorar entre 24 y 48 horas.
                </p>
                <p>
                    En caso de encontrar algún inconveniente en tu solicitud, nos pondremos en contacto con vos para poder resolverlo a la brevedad.
                </p>
            </div>
        </div>
        <div class="col-sm-5 col-12 text-center pl-md-5 pr-lg-4 form">
            <div class="info pr-4 pl-4">
                <h3 class="text-uppercase py-3">Completá la solicitud</h3>
                <form id="form1" method="post">
                    <div class="row">
                        <div class="col-12">
                            <div id="msg"></div>
                                                    </div>
                    </div>
                    <input type="hidden" name="_token" value="{{ csrf_token() }}"></input>
                    <div class="form-group">
                        <input class="form-control" type="text" name="txtNombre" id="txtNombre" placeholder="Nombre de fantasía (*)" required>
                    </div>
                    <div class="form-group">
                        <input class="form-control" type="text" name="txtRazonSocial" id="txtRazonSocial" placeholder="Razón social (*)" required>
                    </div>
                    <div class="form-group">
                        <input class="form-control" type="text" name="txtCuit" id="txtCuit" placeholder="CUIT">
                    </div>
                    <div class="form-group">
                        <input class="form-control" type="text" name="txtTelefono" id="txtTelefono" placeholder="Teléfono">
                    </div>
                    <div class="form-group">
                        <input class="form-control" type="email" name="txtEmail" id="txtEmail" placeholder="E-Mail (*)" required>
                    </div>
                    <div class="form-group">
                        <input class="form-control" type="text" name="txtContacto" id="txtContacto" placeholder="Nombre y apellido del contacto (*)" required>
                    </div>
                    <div class="form-group">
                        <input class="form-control" type="text" name="txtUsuario" id="txtUsuario" placeholder="Ingrese un nombre de usuario (*)" required onkeyup="correct(this);">
                    </div>
                    <div class="form-group">
                        <div class="g-recaptcha captcha" data-sitekey="6LfZ1CUaAAAAALMKRsor-CtjYuigeoxz1qXNHM-t"></div>
                    </div>
                    <div class="text-right">
                        <button type="button" class="btn text-uppercase my-3 btnInscribir px-5" onclick="inscribirse();">Inscribirme</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<script>
    let usuarioExiste = false;

    let inscripto = false;

    $("#txtUsuario").change(function() {
        validarUsuario();
    });

    const validarUsuario = () => {
        let usuario = $("#txtUsuario").val();
        if (usuario != "") {
            $.ajax({
                type: "GET",
                url: "/comercio/usuarioExiste",
                data: {
                    usuario: usuario
                },
                async: true,
                dataType: "json",
                success: function(data) {
                    usuarioExiste = data.existe;
                    if (usuarioExiste == "true") {
                        if (!inscripto) {
                            msgShow(data.MSG, data.ESTADO);
                        }
                    }
                }
            });
        }
    }

    const correct = (e) => {
        e.value = e.value.toLowerCase().replace(/ /g, "");
        $("#txtUsuario").val(e.value);
    }

    $("#form1").validate();

    function inscribirse() {
        if (usuarioExiste == "false" || usuarioExiste == false) {
            if ($("#form1").valid()) {
                form1.submit();
                inscripto = true;
            }
        } else {
            msgShow("Usuario ya existente, ingrese uno distinto", "danger");
        }
    }
</script>

@endsection