@extends("ushuaia.web.plantilla")

@section('contenido')
    <div class="container-fluid" id="index-comercio-construccion">
        <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>Convocatoria <strong>Construcción</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">Invitamos a todas/os los profesionales de la construcción, carpintería,
                                gasista, electricista, plomería, de Ushuaia, a formar parte de Tarjeta +U para impulsar su
                                actividad laboral.</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">
                <div class="row">
                    <div class="col-12">
                        <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-12 text-center">
                        <img src="/ushuaia/images/+uprocrear construccion.jpg" class="img-thumbnail w-70" >
                    </div>
                </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>
                                @if (isset($msg))
                                    <script>
                                        msgShow('{{ $msg['MSG'] }}', '{{ $msg['ESTADO'] }}');
                                    </script>
                                @endif
                            </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