{% extends 'base.html.twig' %}
{% block title %}Golf Cart Insurance | Novamar Insurance Mexico{% endblock %}
{% block metas %}    
    <meta name="description" content="" />
    <meta name="keywords" content="" />
{% endblock %}
{% block css %}
     {{encore_entry_link_tags('animateCSS')}}
    {# {% if slug is defined %}
        <link rel="canonical" href="{{ app.root }}insurance-services/mexico-auto-insurance/golf-cart">
    {% endif %} #}
     {{encore_entry_link_tags('stepsCSS')}}
       {{encore_entry_link_tags('animationPageLoaderCSS')}}
       {# Para select de phone number #}
    {# {{encore_entry_link_tags('intlTelInputCSS')}} #}
    <style>
    
        a{ 
        text-decoration: none;
        color:#428bca;
        }
        a[href^="#finish"]{
            background:#FFB040 !important
        }.block>h1{
            left:150px;
        }#full-loading{
            position:fixed;
            z-index:5;
            background-color:rgba(255,255,255,0.6);
            width:100%;
            bottom:0;
        }#full-loading>.sk-circle{
            margin:25% auto !important;
        }#form-container{
            background:#FFF;
            box-shadow:0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
            /*margin-top:-72%;*/
            margin-bottom:5px;
            padding-top:50px;
            padding-bottom:15px;
        }
        #form_entranceDate{
            cursor:pointer;background:#FFF}
        #button-novamar-usa{
            display:none !important}
        .block>h1{font-size:40px;top:12% !important;font-weight:bold;position:relative}
        .block>h2{
            right:350px !important}
        .bg-main-banner{
            background:url(../../img/Banner/golf-cart-insurance.jpg) no-repeat scroll center top / 100% auto rgba(0, 0, 0, 0);height:450px;width:100%}
            .wizard> .steps a, .wizard> .steps a:hover, .wizard> .steps a:active{margin:0 !important}
            .wizard>.steps>ul>li{width:20% !important}
            .wizard>.content{background:#fff !important}
            .wizard> .content> .body ul.list-price{list-style:none !important}
            .wizard> .content> .body ul.list-price li{padding:5px}
            @media (max-width: 768px){
                .bg-main-banner{height:180px}
                .block>h1{font-size:26px;top:4% !important}}
        img.img-responsive.aligncenter {
            margin-left: 37%;
            max-height: 75px;
        }.row.prices {
            display: inline-flex;
        }.coverages {
            text-align: center;
            background-color: transparent;
            border: 1px solid #ccc;
            margin-top: 15px;
            box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);    
            color: rgba(0, 0, 0, .87);
            width: 100%;
        }.wizard >.content {
            background: #fff !important;
            min-height: 533px !important;
        }
        @media(max-width: 991px){
            .wizard> .steps a{
            padding: .5em .5em;
        }
        }
        @media(max-width: 576px){
            .wizard> .steps a{
            padding: .3em .3em;
            font-size: 12px;
            min-height:46.41px;
        }
        }#generate-policy{
            background-color: #f36e03;
            color: #fff;
            margin-top: 10px;
        }
        .text-big{
            font-size: 20px;
        }
        .form-group {
            margin-bottom: 1rem;
        }
         .dist >.goog-te-gadget select:hover {
        cursor: pointer; 
        background-color:#084a7a  !important; 
        transition: background-color 0.2s ease-in-out; 
        color:white !important;
        }
        .dist >.goog-te-gadget select {
        font-size: 20px !important;
        color: #084a7a !important;
        font-weight: bold;
        padding: 8px;
        background: #f7f2ea !important;
        font-family: "Helvetica" !important;
        border-radius: 3px !important;
        }
    </style>
{% endblock %}
{% block body %}
    {# {% if pageConfig == 'WMAF' %} #}
    <div id="outer-wrap" data-page-config="WMAF">
        <div class="jumbotron golf">
            <div class="jumbotron-text text-center">
                <h1>Golf Cart Insurance</h1>
            </div>
        </div>
    </div>
    <div id="main" class="container d-flex justify-content-center">
        <div id="form-container" class="col-lg-12 col-md-10  col-sm-10  animated zoomIn">
            {% if slug is defined %}
                <div data-page-config="WOMAF.FANDL">
                    <div class="text-center pb-5">
                        <a href="" target="_blank" rel="nofollow" id="website">
                            <img id="distributorLogo" src="" class="img-fluid">
                        </a>
                        <span id="google_translate" class="dist text-center "></span>
                    </div>
                </div>
            {% endif %}
            <h3 class="text-center"> Quote &amp; Buy Your Golf Cart Insurance</h3>
            <div class="line-orange"></div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="total"> $00.00 Policy for 0 days</div>
            </div>
            <form id="form-golf-cart">
                <div id="wizard2">
                    <h6>Quote</h6>
                    <section>
                        <div class="quote-step-1">
                            <b style="color:#084A7A;">1.1 Please fill in the required fields to get your quote. </b>
                            <div class="form-group col-lg-12 mt-5">
                                <label class="control-label"> Term / Término<span class="required">*</span> </label>
                                {{ form_widget(form.term,{'attr':{'class' : 'form-control'} } ) }}
                            </div>
                            <div class="form-group col-lg-12">
                                <label class="control-label"> Golf Cart Value / Valor Carro de Golf<span class="required">*</span> </label>
                                {{ form_widget(form.carValue,{'attr':{'class' : 'form-control'} } ) }}
                            </div>
                            <div class="form-group col-lg-12">
                                <label class="control-label"> Liability / Responsabilidad Civil<span class="required">*</span> </label>
                                {{ form_widget(form.liability, {'attr':{'class' : 'form-control'} } ) }}
                            </div>
                            <div class="text-center"> <button class="btn btn-quote" type="button" onclick="getQuote()">Get your Quote!</button></div>
                        </div>
                        <div class="quote-step-2 d-none">
                            <b style="color:#084A7A;">1.2 Please choose your price and click in the next step button </b>
                            <div class="container">
                                <div class="row">
                                    <div class="col-lg-12 text-right">
                                        <button type="button" class="btn btn-link edit-quote" onclick="editQuote()">
                                            <span class="glyphicon glyphicon-pencil"></span> Edit Quote
                                        </button>
                                    </div>
                                </div>
                                <div class="row d-flex justify-content-between">
                                    <div class="col-lg-5 col-sm-12">
                                        <div class="coverages">
                                            <div class="title-coverage"> <span>Full Coverage</span></div> <br> <span id="priceFC" class="coverage-price">$00.00</span>
                                            <div class="aligncenter"> <button type="button" id="uno" class="btn btn-buy" onclick="choosePrice()">Buy Now!</button></div>
                                            <div class="price-selected"><span class="glyphicon glyphicon-ok-sign"></span></div> <a href="#"  data-bs-toggle="modal" data-bs-target="#modalGolfFullCoverage"> Coverage and Limits  <i class="fa-solid fa-circle-question"></i> </a>
                                            <div class="text-right"> <img src="{{asset('img/visa_mcard2.jpeg')}}" width="77" height="23" /></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-5 col-sm-12">
                                        <div class="coverages">
                                            <div class="title-coverage"> <span>Liability Coverage</span></div> <br> <span id="priceLC" class="coverage-price">$00.00</span>
                                            <div class="aligncenter"> <button type="button" id="dos" class="btn btn-buy" onclick="choosePrice()">Buy Now!</button></div>
                                            <div class="price-selected"><span class="glyphicon glyphicon-ok-sign"></span></div><a href="#" data-bs-toggle="modal" data-bs-target="#modalGolfLiabilityCoverage"> Coverage and Limits <i class="fa-solid fa-circle-question"></i> </a>
                                            <div class="text-right"> <img src="{{asset('img/visa_mcard2.jpeg')}}" width="77" height="23" /></div>
                                        </div>
                                    </div>
                                </div>
                            </div>                        
                            <div class="alert alert-warning mt-5" role="alert">
                                <strong>Credit Card Notice:</strong>
                                Please advise your credit card company the transaction for this purchase will be through a Mexican bank. Otherwise your bank may put a hold on your credit card while charging goods and services in Mexico.
                            </div>
                        </div>
                        <div class="loading-quote text-center d-none"> <img src="{{ asset('img/load75x75.gif')}}" loading="lazy"><br> <b>Loading your quote, please wait.</b></div>
                    </section>                
                    <h6>Customer</h6>
                    <section>
                        <b style="color:#084A7A;">2. Please fill in the required fields. </b>
                        <div class="row mt-5">
                            <div class="col-6">
                                <label class="control-label"> First Name<span class="required">*</span> </label>
                                {{ form_widget(form.firstName,{'attr':{'class' : 'form-control', 'placeholder' : 'First Name' }} ) }}
                            </div>
                            <div class="col-6">
                                <label class="control-label"> Last Name<span class="required">*</span> </label>
                                {{ form_widget(form.lastName,{'attr':{'class' : 'form-control', 'placeholder':'Last Name'} } ) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="control-label"> Do you want to add another insured?<span class="required">*</span> </label>
                                {{ form_widget(form.otherInsured,{'attr':{'class' : 'form-control'} } ) }}
                            </div>
                            <div class="form-group col-lg-6 col-md-6" id="otherInsuredName">
                                <label class="control-label"> Other Insured Name<span class="required">*</span> </label>
                                {{ form_widget(form.otherInsuredName,{'attr':{'class' : 'form-control', 'placeholder':'Other Insured Name'} } ) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="control-label"> Birthday(mm/dd/YYYY) <span class="required">*</span> </label>
                                {{ form_widget(form.birthday,{'attr':{'class' : 'form-control', 'placeholder': 'mm/dd/YYY', 'maxlength': '10', 'oninput': 'formatDate(this)'} } ) }}
                            </div>
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="control-label"> Email Address<span class="required">*</span> </label>
                                {{ form_widget(form.email,{'attr':{'class' : 'form-control', 'placeholder': 'example@domain.com'} } ) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="control-label"> Phone<span class="required">*</span> </label><br>
                                {{ form_widget(form.phone,{'attr':{'class' : 'form-control phone-format', 'placeholder' : '(000) 000-0000'} } ) }}
                            </div>
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="control-label"> Nationality<span class="required">*</span> </label>
                                {{ form_widget(form.nationality,{'attr':{'class' : 'form-control'} } ) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="control-label"> Country<span class="required">*</span> </label>
                                {{ form_widget(form.country,{'attr':{'class' : 'form-control'} } ) }}
                            </div>                        
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="control-label"> Zip Code<span class="required">*</span> </label>
                                {{ form_widget(form.postalCode,{'attr':{'class' : 'form-control', 'placeholder' : 'Postal Code'} } ) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="control-label"> State<span class="required">*</span> </label>
                                {{ form_widget(form.state,{'attr':{'class' : 'form-control', 'placeholder' : 'State'} } ) }}
                            </div>                        
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="control-label"> City<span class="required">*</span> </label>
                                {{ form_widget(form.city,{'attr':{'class' : 'form-control', 'placeholder' : 'City'} } ) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="control-label"> Address<span class="required">*</span> </label>
                                {{ form_widget(form.address,{'attr':{'class' : 'form-control', 'placeholder' : 'address'} } ) }}
                            </div>
                        </div>
                    </section>
                    <h6>Vehicle</h6>
                    <section>
                        <b style="color:#084A7A;">3. Please enter your vehicle information </b>
                        <div class="row">
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="control-label"> Passengers Number<span class="required">*</span></label>
                                {{ form_widget(form.passengersNumber,{'attr':{'class' : 'form-control'} } ) }}
                            </div>
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="control-label"> Model Year<span class="required">*</span> </label>
                                {{ form_widget(form.modelYear,{'attr':{'class' : 'form-control'} } ) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="control-label"> Make<span class="required">*</span> </label>
                                {{ form_widget(form.brand,{'attr':{'class' : 'form-control'} } ) }}
                            </div>
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="control-label"> Model<span class="required">*</span> </label>
                                {{ form_widget(form.subBrand,{'attr':{'class' : 'form-control', 'placehold': 'Model'} } ) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="control-label"> VIN<span class="required">*</span> </label>
                                {{ form_widget(form.serialNumber,{'attr':{'class' : 'form-control', 'placeholder' : 'VIN'} } ) }}
                            </div>
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="control-label"> Entrance Date<span class="required">*</span> </label>
                                {{ form_widget(form.entranceDate,{'attr':{'class' : 'form-control datepicker', 'readonly' : 'readonly', 'placeholder' : 'mm/dd/YYY'} } ) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-lg-6 col-md-6">
                                <label class="control-label"> End Date<span class="required">*</span> </label>
                                {{ form_widget(form.endDate,{'attr':{'class' : 'form-control', 'placeholder' : 'mm/dd/YYY', 'readonly' : 'readonly'} } ) }}
                            </div>
                        </div>
                    </section>
                    <h6>Summary</h6>
                    <section> <b style="color:#084A7A;">4. Please review your information </b>
                        <div class="col-lg-12 col-md-12  mt-5">
                            <div class="alert alert-warning" role="alert">
                                <ul>
                                    <li style="list-style: none"><b>Please review your Customer Information</b> before you go further. If you like to edit some of the information you provided, you can use the Previous and Next buttons at the bottom of this form.<br><br></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <td bgcolor="#084A7A" style="color:#FFF;" colspan="4" class="text-center"> <b>INFORMATION</b></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><b>Full Name</b></td>
                                        <td><span id="fullName"></span></td>
                                        <td><b>Birthday</b></td>
                                        <td><span id="birthday"></span></td>
                                    </tr>
                                    <tr>
                                        <td><b>Email</b></td>
                                        <td><span id="email"></span></td>
                                        <td><b>Phone</b></td>
                                        <td><span id="phone"></span></td>
                                    </tr>
                                    <tr>
                                        <td><b>Postal Code</b></td>
                                        <td><span id="postalCode"></span></td>
                                        <td><b>Street</b></td>
                                        <td><span id="street"></span></td>
                                    </tr>
                                    <tr>
                                        <td><b>City</b></td>
                                        <td><span id="city"></span></td>
                                        <td><b>State</b></td>
                                        <td><span id="state"></span></td>
                                    </tr>
                                    <tr>
                                        <td><b>Country</b></td>
                                        <td><span id="country"></span></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td width="18%"><b>Passengers Number</b></td>
                                        <td><span id="passengers"></span></td>
                                        <td><b>Make</b></td>
                                        <td><span id="make"></span></td>
                                    </tr>
                                    <tr>
                                        <td><b>Model Year</b></td>
                                        <td><span id="modelYear"></span></td>
                                        <td><b>Model</b></td>
                                        <td><span id="model"></span></td>
                                    </tr>
                                    <tr>
                                        <td><b>Vin</b></td>
                                        <td><span id="vin"></span></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-lg-12 text-center"> <a href="" data-bs-toggle="modal" data-bs-target="#termConditions"><b>Terms and Conditions</b></a><br> {{ form_widget(form.conditions) }}</div>
                        {% if auth is defined and auth == 1 %}
                            <div class="text-center">
                                <div class="alert alert-warning text-big" role="alert">
                                    <strong>Issuing Notice:</strong>
                                    Purchase notifications take around 2 minutes to reach the recipient indicated on the form.
                                </div>
                                <button id="generate-policy" type="button" class="btn btn-link">Generate policy</button>
                                <img src="{{ asset('img/load75x75.gif')}}" id="loading" class="d-none" loading="lazy">
                            </div>
                        {% endif %} 
                    </section>
                    <h6>Purchase</h6>
                    <section>
                        <b style="color:#084A7A;">5. Complete the required fields of your credit card. </b>
                        <div class="row mt-5">
                            <div class="form-group col-lg-6">
                                <label>Holder First Name</label>
                                <input type="text" id="cardFirstName" name="form[cardFirstName]" class="form-control" placeholder="First Name">
                            </div>
                            <div class="form-group col-lg-6">
                                <label>Holder Last Name</label>
                                <input type="text" id="cardLastName" name="form[cardLastName]" class="form-control" placeholder="Last Name">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-lg-12">
                                <label>Credit Card Number</label>
                                <input type="tel" id="cardNumber" name="form[cardNumber]" class="form-control" placeholder="****************">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-lg-4">
                                <label>Expiration Month</label>
                                <input type="number" id="cardExpirationMonth" name="form[cardExpirationMonth]" class="form-control" placeholder="Month" min="1" max="12">
                            </div>
                            <div class="form-group col-lg-4">
                                <label>Expiration Year</label>
                                <input type="number" id="cardExpirationYear" name="form[cardExpirationYear]" class="form-control" placeholder="Year" min="2017">
                            </div>
                            <div class="form-group col-lg-4">
                                <label>CCV Digits</label>
                                <input type="number" id="cardCcv" name="form[cardCcv]" class="form-control" min="1" placeholder="***" minlength="3">
                            </div>
                        </div>
                        <div class="row">
                            <div class="alert alert-danger d-none text-center" role="alert"><span class="cc_reason_text"></span></div>
                        </div>
                        <div class="col-lg-12 text-center">
                            <img src="{{ asset('img/load75x75.gif')}}" id="loadingPay" class="d-none" loading="lazy">
                        </div>
                    </section>
                </div>            
                <input type="hidden" name="form[product]" value="GC">
                <input type="hidden" name="form[distributor]" value="{% if slug is defined %}{{ slug }}{% endif %}">
                <input type="hidden" name="form[distributorCode]" value="">
                <input type="hidden" name="form[distributorLink]" value="{{ (slug is defined ? slug : '') }}">
                <input type="hidden" name="form[whitOutCharge]" id="form_whitOutCharge" value="">
                {# {{ whitOutCharge }}"> #}
                {% if auth is defined and auth != '' %}<input type="hidden" name="form[auth]" value="{{ auth }}">{% endif %}
                {{ form_widget(form.plan) }}
                {{ form_widget(form.price) }}
                {{ form_rest(form)}}
            </form>
        </div>
    </div>
    <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 text-center mb-2 p-5 ciabg">
        <br>
        <b class="text-center">Underwriter by</b>
        <br>
        <img id="card_logo_qualitas" src="{{asset(imgCompaniesPath~'qualitas-seguros.jpg')}}" alt="Qualitas Seguros" class="img-flex">
    </div>
    {{ include('./modals/golf-cart.twig', {option:''} ) }}
    {{ include('./modals/purchase-terms-conditions.html.twig') }} 
{% endblock %}
{% block scripts %}
    {% if app.environment != 'dev' %}
		<script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
	{% else %}
		<script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
	{% endif %}
	{{script_tag('components/tools.js')}}
    <script>        
        var enableLastStep = {% if auth is defined and auth == 1 %}false{% else %}true{% endif %};        
    </script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
    {# {{script_tag("libraries/intl-tel-input.js")}} #}
    {{script_tag('components/jquery-steps.js')}}
    {{ script_tag('libraries/jquery-mask.js') }}
    {{ script_tag('libraries/jquery-validate.js') }}
    {{ script_tag('libraries/modernizr.js') }}
    {{ script_tag('components/prospect.js') }}
    {{ script_tag('components/nationality-list.js') }}
    {{ script_tag('components/about-us-list.js') }}
    {{ script_tag('products/golfcart.js') }}
    <script>
        const distributor = "{{distributorLink}}";
        let distObj = {
            pageConfig: "{{ viewOptions }}",
            distLogo: "",
            distLink: "",
            distCode: "",
        }
        const prod = "GC"
	</script>
	{{script_tag('components/page-config.js')}}
{% endblock %}