
@{
    ViewBag.Title = "Inicio";
    ViewBag.Home = "active";
}

@Styles.Render("~/Cotize/css")

<main id="main">

    <!--==========================
      MultiStep Form
    ============================-->
    <section id="multi-step-form">
        <div class="container-fluid" id="grad1">
            <div class="row mt-5">
                <div class="col-12 col-sm-9 col-md-7 col-lg-6 text-center p-3 mt-3 mb-2">
                    <div id="grad2">
                        <div class="card px-0 pt-3 pb-0 mt-3 mb-3 text-left">
                            <div class="card-header">
                                <h2><strong>Cotizar tu Seguro de</strong></h2>
                                <h2>
                                    Auto Preferencial
                                </h2>
                            </div>
                            <div class="row">
                                <div class="col-md-12 mx-0">
                                    <form id="msform" method="POST">
                                        <!-- progressbar -->
                                        <ul id="progressbar">
                                            <li class="active" id="car"><strong>Datos Carro</strong></li>
                                            <li id="personal"><strong>Datos Personales</strong></li>
                                            <li id="confirm"><strong>Listo!</strong></li>
                                        </ul> <!-- fieldsets -->
                                        <fieldset>
                                            <div class="form-card">
                                                <h2 class="fs-title">Paso 1</h2>
                                                <div class="form-group">
                                                    <select name="Marca" class="form-control" required="">
                                                        <option value="">Marca *</option>
                                                        <option value="Acura">Acura</option>
                                                        <option value="Aleko">Aleko</option>
                                                        <option value="Alfa Romeo">Alfa Romeo</option>
                                                        <option value="Aro">Aro</option>
                                                        <option value="Asia">Asia</option>
                                                        <option value="Audi">Audi</option>
                                                        <option value="Autobianchi">Autobianchi</option>
                                                        <option value="BAIC">BAIC</option>
                                                        <option value="Bertone">Bertone</option>
                                                        <option value="Bmw">Bmw</option>
                                                        <option value="Chery">Chery</option>
                                                        <option value="Chevrolet">Chevrolet</option>
                                                        <option value="Chrysler">Chrysler</option>
                                                        <option value="Citroen">Citroen</option>
                                                        <option value="Dacia">Dacia</option>
                                                        <option value="Daewoo">Daewoo</option>
                                                        <option value="Daihatsu">Daihatsu</option>
                                                        <option value="Daihatsu Camion">Daihatsu Camion</option>
                                                        <option value="DFSK">DFSK</option>
                                                        <option value="DS AUTOMOBILES">DS AUTOMOBILES</option>
                                                        <option value="Ferrari">Ferrari</option>
                                                        <option value="Fiat">Fiat</option>
                                                        <option value="Ford">Ford</option>
                                                        <option value="Foton">Foton</option>
                                                        <option value="GEELY">GEELY</option>
                                                        <option value="Great Wall">Great Wall</option>
                                                        <option value="Ham-jiang">Ham-jiang</option>
                                                        <option value="Haval">Haval</option>
                                                        <option value="Heibao">Heibao</option>
                                                        <option value="Honda">Honda</option>
                                                        <option value="Hummer">Hummer</option>
                                                        <option value="Hyundai">Hyundai</option>
                                                        <option value="Isuzu">Isuzu</option>
                                                        <option value="Iveco">Iveco</option>
                                                        <option value="Izh">Izh</option>
                                                        <option value="Jaguar">Jaguar</option>
                                                        <option value="Kia">Kia</option>
                                                        <option value="Lada">Lada</option>
                                                        <option value="Lancia">Lancia</option>
                                                        <option value="LIFAN">LIFAN</option>
                                                        <option value="Maestro">Maestro</option>
                                                        <option value="Mahindra">Mahindra</option>
                                                        <option value="Maserati">Maserati</option>
                                                        <option value="Mazda">Mazda</option>
                                                        <option value="Mercedes Benz">Mercedes Benz</option>
                                                        <option value="Mini Cooper">Mini Cooper</option>
                                                        <option value="Mitsubishi">Mitsubishi</option>
                                                        <option value="Nissan">Nissan</option>
                                                        <option value="Opel">Opel</option>
                                                        <option value="Peugeot">Peugeot</option>
                                                        <option value="Piaggio">Piaggio</option>
                                                        <option value="Polonez">Polonez</option>
                                                        <option value="53">Porsche</option>
                                                        <option value="Porsche">Proton</option>
                                                        <option value="Renault">Renault</option>
                                                        <option value="Rolls Royce">Rolls Royce</option>
                                                        <option value="Rover-land Rov.">Rover-land Rov.</option>
                                                        <option value="Saab">Saab</option>
                                                        <option value="Santana">Santana</option>
                                                        <option value="Seat">Seat</option>
                                                        <option value="Shineray">Shineray</option>
                                                        <option value="Skoda">Skoda</option>
                                                        <option value="Smart">Smart</option>
                                                        <option value="Subaru">Subaru</option>
                                                        <option value="Suzuki">Suzuki</option>
                                                        <option value="Toyota">Toyota</option>
                                                        <option value="Volkswagen">Volkswagen</option>
                                                        <option value="Volvo">Volvo</option>
                                                    </select>
                                                </div>
                                                <div class="form-group">
                                                    <select id="Anio" name="Anio" required="" class="form-control">
                                                        <option value="">Año *</option>
                                                        <option value="0 KM">0 KM</option>
                                                        <option value="2021">2021</option>
                                                        <option value="2020">2020</option>
                                                        <option value="2019">2019</option>
                                                        <option value="2018">2018</option>
                                                        <option value="2017">2017</option>
                                                        <option value="2016">2016</option>
                                                        <option value="2015">2015</option>
                                                        <option value="2014">2014</option>
                                                        <option value="2013">2013</option>
                                                        <option value="2012">2012</option>
                                                        <option value="2011">2011</option>
                                                        <option value="2010">2010</option>
                                                        <option value="2009">2009</option>
                                                        <option value="2008">2008</option>
                                                        <option value="2007">2007</option>
                                                        <option value="2006">2006</option>
                                                        <option value="2005">2005</option>
                                                        <option value="2004">2004</option>
                                                        <option value="2003">2003</option>
                                                        <option value="2002">2002</option>
                                                        <option value="2001">2001</option>
                                                        <option value="2000">2000</option>
                                                        <option value="1999">1999</option>
                                                        <option value="1998">1998</option>
                                                    </select>
                                                </div>
                                                <div class="form-group">
                                                    <input type="text" name="Modelo" class="form-control" placeholder="Modelo *" />
                                                </div>
                                            </div>
                                            <input type="button" name="next" class="next action-button" value="Siguiente" id="btn-next" />
                                        </fieldset>
                                        <fieldset>
                                            <div class="form-card">
                                                <h2 class="fs-title">Paso 2</h2>
                                                <div class="form-group">
                                                    <input type="text" name="Nombres" class="form-control" placeholder="Nombres *" required="" />
                                                </div>
                                                <div class="form-group">
                                                    <input name="Telefono" type="text" class="form-control input-number" maxlength="8" pattern="[0-9]" placeholder="Teléfono de Contacto*" required="">
                                                </div>
                                            </div>
                                            <input type="button" name="previous" class="previous action-button-previous" value="Anterior" />
                                            <input type="button" class="send-button" value="Enviar" id="finish" />
                                            <input type="hidden" name="next" class="next action-button" value="Enviar" id="btn-action" />
                                        </fieldset>
                                        <fieldset>
                                            <div class="form-card">
                                                <h2 class="fs-title text-center">En breve nos comunicamos con Usted.</h2> <br><br>
                                                <div class="row justify-content-center">
                                                    <div class="col-3">
                                                        <img src="~/img/check.png" class="fit-image" />
                                                    </div>
                                                </div>
                                                <div class="row justify-content-center">
                                                    <div class="col-12 text-center">
                                                        <h5 class="text-white">¡Ahora contará con un Excelente Asesor de Seguros a su disposición en todo momento!</h5>
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                        <strong class="small text-left" id="required-field">Todos los campos con * son obligatorios</strong>
                                    </form>
                                </div>
                            </div>
                        </div><!--Card-->
                    </div>
                </div>
            </div>
        </div>

        <!-- ======= Clients Section ======= -->
        <section id="clients" class="clients clients">
            <div class="container">

                <div class="row">

                    <div class="col-lg-1 col-md-2 col-3">
                    </div>

                    <div class="col-lg-2 col-md-4 col-6">
                        <img src="~/img/clients/client-1.png" class="img-fluid aos-init aos-animate" alt="" data-aos="zoom-in">
                    </div>

                    <div class="col-lg-2 col-md-4 col-6">
                        <img src="~/img/clients/client-2.png" class="img-fluid aos-init aos-animate" alt="" data-aos="zoom-in" data-aos-delay="100">
                    </div>

                    <div class="col-lg-2 col-md-4 col-6">
                        <img src="~/img/clients/client-3.png" class="img-fluid aos-init aos-animate" alt="" data-aos="zoom-in" data-aos-delay="200">
                    </div>

                    <div class="col-lg-2 col-md-4 col-6">
                        <img src="~/img/clients/client-4.png" class="img-fluid aos-init aos-animate" alt="" data-aos="zoom-in" data-aos-delay="300">
                    </div>

                    <div class="col-lg-2 col-md-4 col-6">
                        <img src="~/img/clients/client-5.png" class="img-fluid aos-init aos-animate" alt="" data-aos="zoom-in" data-aos-delay="400">
                    </div>

                    <div class="col-lg-1 col-md-2 col-3">
                    </div>

                </div>

            </div>
        </section>
        <!-- End Clients Section -->

    </section><!-- #contact -->

    <link href="~/Content/loading.css" rel="stylesheet" />
    <!-- Start Loading Area -->
    <div class="lds-css ng-scope" id="loader">
        <div class="lds-blocks" style="width:100%;height:100%">
            <div style="left:38px;top:38px;animation-delay:0s"></div>
            <div style="left:80px;top:38px;animation-delay:0.125s"></div>
            <div style="left:122px;top:38px;animation-delay:0.25s"></div>
            <div style="left:38px;top:80px;animation-delay:0.875s"></div>
            <div style="left:122px;top:80px;animation-delay:0.375s"></div>
            <div style="left:38px;top:122px;animation-delay:0.75s"></div>
            <div style="left:80px;top:122px;animation-delay:0.625s"></div>
            <div style="left:122px;top:122px;animation-delay:0.5s"></div>
        </div>
    </div>
    <!-- End Loading Area -->
</main>

@*<a href="https://api.whatsapp.com/send?phone=+505 8888 9840&amp;text=Hola%21%20Me%20pueden%20apoyar%20a%20pagar%20menos%20en%20mi%20Seguro%20de%20Auto?" class="float" target="_blank">
    <i class="fa fa-whatsapp my-float"></i>
</a>

<div class="label-container">
    <div class="label-text text-center"><span class="text-center">Click para cotizar</span><br><span class="font-weight-bold"> Gratis </span> por WhatsApp</div>
</div>*@

<div id="sy-whatshelp">
    <div class="sywh-services">
        <a href="https://api.whatsapp.com/send?phone=+505 8888 9840&amp;text=Hola%21%20Me%20pueden%20apoyar%20a%20pagar%20menos%20en%20mi%20Seguro%20de%20Auto?" class="whatsapp" data-tooltip="WhatsApp" data-placement="right" target="_blank">
            <i class="fa fa-whatsapp"></i>
        </a>
        <a href="tel:+505 8979 5733" class="call" data-tooltip="Llamar" data-placement="right">
            <i class="fa fa-phone"></i>
        </a>
    </div>
    <a class="sywh-open-services" data-tooltip="Contacta con nosotros" data-placement="left">
        <i class="fa fa-whatsapp"></i>
        <i class="fa fa-times"></i>
    </a>
</div>

<style>
    .alert {
        display: none;
    }

    /**
    * Error color for the validation plugin
    */
    .error {
        color: #e74c3c;
    }
</style>

@section Scripts {
    <script src="~/Scripts/form-wizard.js"></script>
    <script src="~/Scripts/jquery-confirm/jquery-confirm.js"></script>
    @Scripts.Render("~/bundles/jqueryval")
    <script>
        $(document).ready(function () {
            var $loading = $('#loader').hide();
            //Attach the event handler to any element
            $(document)
                .ajaxStart(function () {
                    //ajax request went so show the loading image
                    $loading.show();
                })
                .ajaxStop(function () {
                    //got response so hide the loading image
                    $loading.hide();
                });

            //Solo numero para telefono
            $('.input-number').on('input', function () {
                this.value = this.value.replace(/[^0-9]/g, '');
            });

            $('#Modelo').blur(function () {
                var $valid = $('#msform').valid();
                if (!$valid) {
                    $validator.focusInvalid();
                    return false;
                }
            });

            $("#finish").click(function () {
                var $valid = $('#msform').valid();
                if (!$valid) {
                    $validator.focusInvalid();
                    return false;
                }
                else {
                    $.ajax({
                        url: 'Home/Index',
                        type: 'POST',
                        dataType: 'json',
                        data: $('#msform').serialize(),
                        success: function (result) {
                            // Result.
                            onEmailNotifySuccess(result);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            //do your own thing
                            alert("fail");
                        }
                    });
                }
            });
        });

        var validateForm = function () {
            var $form = $("#msform"),
                $successMsg = $(".alert");
            $.validator.addMethod("letters", function (value, element) {
                return this.optional(element) || value == value.match(/^[a-zA-Z\s]*$/);
            });
            $form.validate({
                rules: {
                    Nombres: {
                        required: true,
                        minlength: 3,
                        letters: true
                    },
                    Email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    Nombres: "Please specify your name (only letters and spaces are allowed)",
                    Email: "Please specify a valid email address"
                },
                submitHandler: function () {
                    $successMsg.show();
                }
            });
        }

        var onEmailNotifySuccess = function (result) {
            if (result.EnableError) {
                // Setting.
                //alert(result.ErrorMsg);
                $.alert({
                    title: result.ErrorTitle,
                    content: result.ErrorMsg,
                    icon: 'fa fa-frown-o',
                    theme: 'modern',
                    closeIcon: true,
                    animation: 'scale',
                    type: 'red'
                });
            }
            else if (result.EnableSuccess) {
                $.alert({
                    title: result.SuccessTitle,
                    content: result.SuccessMsg,
                    icon: 'fa fa-smile-o',
                    theme: 'modern',
                    closeIcon: true,
                    animation: 'scale',
                    type: 'blue'
                });
                //alert(result.SuccessMsg);
                $('#required-field').addClass("text-hide");
                $('#btn-action').attr('type', 'button');
                $('#finish').attr('type', 'hidden');
                $('#btn-action').click();
                // Resetting form.
                $('#msform').get(0).reset();
            }
        }
    </script>
}

