<!DOCTYPE HTML>
<html>
<head>
    <title>Cotizador GSA Leasing</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="ctx" content="/cotizador-gsaleasing" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="/cotizador-gsaleasing/oxoury/css/style.css" rel="stylesheet" />
    <link href="/cotizador-gsaleasing/css/principal.css" rel="stylesheet" />

</head>
<body class="bg-white">
    <div class="container">
        <main>
            <div class="py-3 text-center">
                <h2 class="f-os-n">Cotizador GSA Leasing</h2>
                <h3 class="f-osl-n">¡BIENVENIDO!</h3>
                <img class="h-25 w-25" src="/cotizador-gsaleasing/images/logo.png" alt="logo-gsa">
            </div>

            <div class="row g-5">
                <div class="col-md-5 col-lg-4 order-md-last card text-center bg-grisClaro d-none d-sm-block">
                    <img class="card-img img-1" src="/cotizador-gsaleasing/images/portada-v0_1.jpg" alt="portada">
<!--                    <img class="img-2" th:src="@{/images/auto.png}" alt="auto"> se pone esta arriba -->
                </div>

                <div class="col-md-7 col-lg-8 card bg-grisClaro">
                    <div class="card-title">
                        <div class="card-title-left">
                            <h4 class="f-os-n">Información del Vehículo</h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <form id="formCotizacion" class="needs-validation" novalidate>
                            <input type="hidden" id="producto" name="producto" value="sitemap.xml">
                            <div class="row g-3">
                                <div class="col-sm-3">
                                    <label for="anio" class="form-label f-osl-n font-md">Modelo (Año)</label>
                                    <select class="custom-select f-osl" id="anio" name="anio" required tabindex="1">
                                        <option selected disabled value="">Año del vehiculo</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        Seleccione un modelo válido
                                    </div>
                                </div>
                            </div>
                            <div class="row g-3">
                                <div class="col-sm-6">
                                    <label for="valorVehiculo" class="form-label f-osl-n font-md">Valor del Vehículo</label>
                                    <div class="input-group has-validation">
                                        <span class="input-group-text"><i class="fa fa-dollar"></i></span>
                                        <input type="text" class="form-control f-osl text-right" id="valorVehiculo" name="valorVehiculo"
                                               placeholder="Valor del Vehículo" required tabindex="2">
                                        <div class="invalid-feedback">
                                            El valor del vehículo es necesario
                                        </div>
                                    </div>
                                    <input type="range" id="rangoValorVehiculo" tabindex="-1"
                                           data-min="0.0"
                                           data-max="2.0E+7"
                                           data-from="0"
                                           data-skin="flat"
                                           data-prettifySeparator=","/>
                                </div>
                                <div class="col-sm-6">
                                    <div for="pagoInicial" class="form-label f-osl-n font-md">
                                        
                                        
                                    </div>
                                    <div class="input-group has-validation">
                                        <span class="input-group-text"><i class="fa fa-dollar"></i></span>
                                        
                                        
                                        <div class="invalid-feedback">
                                            El valor de la Renta Anticipada/Enganche es necesario
                                        </div>
                                    </div>
                                    <input type="range" id="rangoPagoInicial" tabindex="-1"
                                           data-min="0.0"
                                           data-max="50.0"
                                           data-from="0.0"
                                           data-base="0.0"
                                           data-skin="flat"
                                           data-prettifySeparator=","/>

                                    <input type="hidden" id="baseResidual" value="38.0" />
                                    <input type="hidden" id="overhead" value="110.0" />
                                </div>
                            </div>
                            <div class="row g-3">
                                <div class="col-sm-12">
                                    <label for="marca" class="form-label f-osl-n font-md">Marca</label>
                                    <div class="input-group">
                                        <select class="custom-select f-osl marca" id="marca" name="marca" required tabindex="4">
                                        </select>
<!--                                        <input type="text" class="form-control ps-upperCase ps-cleanString f-osl marca otro" autocomplete="off"-->
<!--                                               th:placeholder="#{portal.cotizador.datosvehiculo.marca.otro}" required tabindex="4" style="display: none;" />-->
<!--                                        <div class="input-group-append">-->
<!--                                            <button class="btn btn-overlay-dark btnOtro" type="button" data-otroque="marca" tabindex="-1">Otro</button>-->
<!--                                        </div>-->
                                    </div>
                                    <div class="invalid-feedback">
                                        Seleccione una Marca de vehículos válida
                                    </div>
                                </div>
                            </div>
                            <div class="row g-3">
                                <div class="col-sm-12">
                                    <label for="modelo" class="form-label f-osl-n font-md">Modelo</label>
                                    <div class="input-group">
                                        <select class="custom-select f-osl modelo" id="modelo" name="modelo" required tabindex="5">
                                        </select>
<!--                                        <input type="text" class="form-control ps-upperCase ps-cleanString f-osl modelo otro" autocomplete="off"-->
<!--                                               th:placeholder="#{portal.cotizador.datosvehiculo.modelo.otro}" tabindex="5" required style="display: none;" />-->
<!--                                        <div class="input-group-append">-->
<!--                                            <button class="btn btn-overlay-dark btnOtro" type="button" data-otroque="modelo" tabindex="-1">Otro</button>-->
<!--                                        </div>-->
                                    </div>
                                    <div class="invalid-feedback">
                                        Seleccione un Modelo válido
                                    </div>
                                </div>
                            </div>
                            <div class="row g-3">
                                <div class="col-sm-12">
                                    <label for="version" class="form-label f-osl-n font-md">Versión</label>
                                    <div class="input-group">
                                        <select class="custom-select f-osl version" id="version" name="version" required tabindex="6">
                                        </select>
<!--                                        <input type="text" class="form-control ps-upperCase ps-cleanString f-osl version otro" autocomplete="off"-->
<!--                                               th:placeholder="#{portal.cotizador.datosvehiculo.version.otro}" required tabindex="6" style="display: none;" />-->
<!--                                        <div class="input-group-append">-->
<!--                                            <button class="btn btn-overlay-dark btnOtro" type="button" data-otroque="version" tabindex="-1">Otro</button>-->
<!--                                        </div>-->
                                    </div>
                                    <div class="invalid-feedback">
                                        Seleccione una Versión válida
                                    </div>
                                </div>
                            </div>

                            <hr class="my-4">

                            <h4 class="mb-3 f-osl-n divSeguroFormaPago">Seguro</h4>

                            <div class="my-3 divSeguroFormaPago">
                                <div class="custom-control custom-radio">
                                    <input id="contado" name="tipoPago" type="radio" class="custom-control-input" value="CONTADO" checked required tabindex="7">
                                    <label class="custom-control-label f-osl" for="contado">Pago de Contado al Iniciar el Crédito</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    <input id="financiado" name="tipoPago" type="radio" class="custom-control-input" value="FINANCIADO" required tabindex="8">
                                    <label class="custom-control-label f-osl" for="financiado">Pago Financiado por todo el Plazo</label>
                                </div>
                            </div>

                            <hr class="my-4">

                            <button class="btn btn-overlay-primary btn-block btn-cotizar font-xl" type="button" id="btnCotizar" tabindex="9">Cotizar</button>
                        </form>
                    </div>
                </div>
            </div>

            <div id="plantillaCotizacionPlazo" class="col-sm-4 d-none">
                <fieldset>
                    <legend class="txtPlazo text-center f-os-n">Meses</legend>
                    <div class="row m-15px">
                        <div class="col-sm-12">
                            <label class="form-label f-osl-n">Pago inicial</label>
                            <label class="form-label float-right txtPagoInicial f-osl"></label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div>
                                
                                
                                <label class="form-label float-right txtRentaMensual f-osl"></label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <label class="form-label f-osl-n">Costo del seguro</label>
                            <label class="form-label float-right txtCostoSeguro f-osl"></label>
                            <small class="form-text text-muted txtTipoSeguro f-osl-n"></small>
                        </div>
                    </div>
                    <a href="#" class="btnSolicitar btn btn-overlay-primary btn-block f-ose-n">Solicitar</a>
                </fieldset>
            </div>

            <div class="modal fade" id="modalResultados" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false" style="z-index: 1900;">
                <div class="modal-dialog modal-xl" role="document">
                    <div class="modal-content">
                        <div class="modal-header bg-grisClaro">
                            <h5 class="modal-title f-os-n">Selecciona el Plazo</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body text-right p-1 bg-grisClaro"><h5>Arrendamiento Puro</h5></div>
                        <div for="pagoInicial" class="form-label f-osl-n font-md">
                            
                            
                        </div>
                        <div class="modal-body bg-grisClaro p-5">
                            <div class="form-row">
                                <div id="filaResultados" class="row">

                                </div>
                            </div>
                        </div>
                        <div class="modal-footer bg-grisClaro">
                            <button type="button" data-dismiss="modal" class="btn btn-overlay-danger f-ose-n centrar">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="modalInfoCliente" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" style="z-index: 1600;">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header bg-grisClaro">
                            <h5 class="modal-title f-os-n" id="exampleModalLabel">Todo listo...</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body bg-grisClaro p-5">
                            <div class="text-center p-2">
                                <h4>Estás a un paso de elevar tu experiencia de manejo.</h4>
                            </div>
                            <div class="text-center p-2">
                                <h4>Hemos preparado distintas opciones para garantizar un plan a tu medida.</h4>
                            </div>
                            <div class="text-center p-2">
                                <h4>Queremos que vivas una experiencia exclusiva y personalizada, antes de avanzar, compártenos tus datos:</h4>
                            </div>
                            <form id="formSolicitud">
                                <div class="form-row">
                                    <div class="form-group has-validation">
                                        <div class="custom-control custom-checkbox">
<!--                                            <input type="checkbox" class="custom-control-input" id="personaFisica" name="personaFisica" checked>-->
<!--                                            <label class="custom-control-label f-osl-n" for="personaFisica"> ¿Eres persona física?</label>-->
                                            <input id="personaFisica" name="personaFisica" type="checkbox" class="css-checkbox custom-control-input">
                                            <label for="personaFisica">¿Eres persona física?</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-row p-moral">
                                    <div class="form-group col-md-12 has-validation">
                                        <label class="f-osl-n" for="razonSocial">Razón Social</label>
                                        <input type="text" id="razonSocial" name="razonSocial" class="form-control ps-upperCase ps-cleanString f-osl" placeholder="Razón Social" autocomplete="off">
                                        <div class="invalid-feedback">
                                            Escriba una Razón Social válida
                                        </div>
                                    </div>
                                </div>
                                <div class="form-row p-fisica">
                                    <div class="form-group col-md-4 has-validation">
                                        <label class="f-osl-n" for="nombre">Nombre</label>
                                        <input type="text" id="nombre" name="nombre" class="form-control ps-upperCase ps-cleanString f-osl" placeholder="Nombre" autocomplete="off">
                                        <div class="invalid-feedback">
                                            Escriba un Nombre válido
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4 has-validation">
                                        <label class="f-osl-n" for="apaterno">Apellido Paterno</label>
                                        <input type="text" id="apaterno" name="apaterno" class="form-control ps-upperCase ps-cleanString f-osl" placeholder="Apellido Paterno" autocomplete="off">
                                        <div class="invalid-feedback">
                                            Escriba un Apellido Paterno válido
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4 has-validation">
                                        <label class="f-osl-n" for="amaterno">Apellido Materno</label>
                                        <input type="text" id="amaterno" name="amaterno" class="form-control ps-upperCase ps-cleanString f-osl" placeholder="Apellido Materno" autocomplete="off">
                                        <div class="invalid-feedback">
                                            Escriba un Apellido Materno válido
                                        </div>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-6 has-validation">
                                        <label class="f-osl-n" for="email">Correo Electrónico</label>
                                        <input type="text" id="email" name="email" class="form-control ps-upperCase ps-cleanString f-osl" placeholder="Correo Electrónico" autocomplete="off" required>
                                        <div class="invalid-feedback">
                                            El Correo Electrónico es necesario
                                        </div>
                                    </div>
                                    <div class="form-group col-md-6 has-validation">
                                        <label class="f-osl-n" for="telefono">Teléfono Móvil</label>
                                        <input type="text" id="telefono" name="telefono" class="form-control phone_us f-osl" placeholder="(000) 000-0000" autocomplete="off" required>
                                        <div class="invalid-feedback">
                                            Proporcione un Teléfono válido
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="form-row">
                                    <div class="form-group has-validation centrar">
                                        <div class="custom-control custom-checkbox">
                                            <input id="avisoPrivacidad" name="avisoPrivacidad" type="checkbox" class="css-checkbox custom-control-input">
<!--                                            <input type="checkbox" class="custom-control-input" id="avisoPrivacidad" name="avisoPrivacidad">-->
                                            <label for="avisoPrivacidad"> Acepto los términos del Aviso de Privacidad</label>
                                            <div class="invalid-feedback">
                                                Debe aceptar nuestro Aviso de Privacidad
                                            </div>
                                        </div>
                                        <label class="f-osl-n" for="avisoPrivacidad">Consulta nuestro Aviso de Privacidad</label>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <p class="card-text text-center">
                                        <small class="text-muted f-osl-n">Los precios mostrados en la cotización se basan en una estimación para Arrendamiento Puro Automotriz y NO representan un compromiso con el solicitante. Para una cotización definitiva favor de contactar a un Ejecutivo de GSA Leasing. El costo del seguro de daños puede variar dependiendo de la unidad.</small>
                                    </p>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer bg-grisClaro">
                            <button type="button" id="btnRegistrarse" class="btn btn-overlay-primary f-ose-n centrar">Adelante</button>
<!--                            <button type="button" data-dismiss="modal" class="btn btn-overlay-danger f-ose-n centrar">Cerrar</button>-->
                        </div>
                    </div>
                </div>
            </div>

            <input type="hidden" id="msg_success_titulo" value="¡Registro Exitoso!">
            <input type="hidden" id="msg_success" value="La cotizaci\u00F3n se ha enviado a tu correo electr\u00F3nico con \u00E9xito. <b>Para continuar tu tr\u00E1mite, es necesario que revises el mensaje que hemos enviado a tu email</b>, en el cual encontrar\u00E1s un bot\u00F3n para CONFIRMAR tu email, crear tu contrase\u00F1a y desde ah\u00ED inicia tu proceso para adquirir tu veh\u00EDculo">
            <input type="hidden" id="msg_error_titulo" value="¡Lo sentimos!">
            <input type="hidden" id="msg_error" value="Ocurrió un problema al intentar registrar su solicitud. Intente más tarde.">
            <input type="hidden" id="msg_warning_titulo" value="¡Lo sentimos!">
            <input type="hidden" id="msg_warning" value="No se obtuvo respuesta del servidor. Intente más tarde.">
            <input type="hidden" id="btn_terminar" value="Aceptar">
            <input type="hidden" id="msg_cotizacion_nodatos_titulo" value="¡Sin resultados!">
            <input type="hidden" id="msg_cotizacion_nodatos" value="No se pudo cotizar el vehículo seleccionado. Pruebe seleccionando otro.">
            <input type="hidden" id="msg_cotizacion_sinrespuesta_titulo" value="Error">
            <input type="hidden" id="msg_cotizacion_sinrespuesta" value="No se pudieron obtener datos del servidor. Intente más tarde.">
            <input type="hidden" id="msg_seguro_noincluido" value="Seguro No Incluido">
        </main>

        <footer class="my-5 pt-5 text-muted text-center text-small">
            <p class="mb-1">© <strong>Powered by Premium Systems</strong><br>Versión: 1.7</p>
        </footer>

        <div id="loading-overlay"><div class="spinner spinner-05 spinner-warning"></div></div>
    </div>

    <!-- jquery -->
    <script src="/cotizador-gsaleasing/oxoury/js/jquery-3.6.0.min.js"></script>
    <!-- bootstrap -->
    <script src="/cotizador-gsaleasing/oxoury/js/bootstrap/bootstrap.bundle.min.js"></script>
    <!-- sidebar-menu -->
    <script src="/cotizador-gsaleasing/oxoury/js/rangelider/ion.rangeSlider.min.js"></script>
    <!-- jquery-nicescroll -->
    <script src="/cotizador-gsaleasing/oxoury/js/jquery-nicescroll/jquery.nicescroll.min.js"></script>
    <!-- Para enmascarar datos en los campos de texto -->
    <script src="/cotizador-gsaleasing/oxoury/js/jquery.mask/jquery.mask.min.js"></script>
    <!-- Para validacion de formulario -->
    <script src="/cotizador-gsaleasing/oxoury/js/jquery-validation/jquery.validate.min.js"></script>
    <!-- para que funcione la validación del email -->
    <script src="/cotizador-gsaleasing/oxoury/js/jquery-validation/additional-methods.min.js"></script>
    <!-- Sweet-alerts -->
    <script src="/cotizador-gsaleasing/oxoury/js/sweetalert2/sweetalert2.min.js"></script>

    <!-- Local Scripts of Mine -->
    <script src="/cotizador-gsaleasing/js/consulta-catalogos.js"></script>
    <script src="/cotizador-gsaleasing/js/util.js"></script>
    <script src="/cotizador-gsaleasing/js/index.js"></script>
    <!-- Start of gsaleasing Zendesk Widget script -->
    <script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=b098f3cb-9c8b-4f75-b043-f2f4ef4125c0"> </script>
    <!-- End of gsaleasing Zendesk Widget script -->
</body>
</html>