{% extends 'base.html.twig' %}
{% block title %}Mexico Vehicle Insurance Ana Seguros | Novamar Insurance Mexico{% endblock %}
{% block metas %}    
 <meta name="description" content="Resident Auto Insurance by Ana Seguros - Get reliable coverage for your car in Mexico. Explore our insurance services at Novamar Insurance Mexico." />
    <meta name="keywords" content="resident auto, auto insurance, resident auto insurance, mexican auto insurace, mexican resident auto, mexico resident auto, mexico auto insurance, mexican resident auto insurance, mexico resident auto insurance mexico, auto insurance for expats, auto insurance in mexico" />
   {# {{app.robots|raw}} #}
    <meta property="og:title" content="Mexican Resident Auto Insurance With Ana Seguros" />
    <meta property="og:description" content="Mexican Resident Auto Insurance for all people who has a vehicle registered in Mexico (mexican plates) with Ana Seguros">
    <meta property="og:image" content="{{asset('img/mexican-resident-auto.jpg')}}" />
    <meta property="og:image:secure_url" content="{{asset('img/mexican-resident-auto.jpg')}}" />
    <meta property="og:image:type" content="image/jpg" />
    <meta property="og:image:width" content="995" />
    <meta property="og:image:height" content="325">
	<meta property="og:url" content="{{ url('insurance_services_resident_auto', {distributor: 'auto'}) }}">
    {% if distributor != 'auto' %}
		<link rel="canonical" href="{{ url('insurance_services_resident_auto', {distributor: 'auto'}) }}">
	{% endif %}
{% endblock %}
{% block css %}
     <!-- TrustPilot -->
    {{encore_entry_link_tags('trustpilotWidgetsCSS')}}
	<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
	<!-- End Trust Pilot -->
    {{ encore_entry_link_tags('stepsCSS') }}
    {{ encore_entry_link_tags('residentAutoCSS') }}
    {{ encore_entry_link_tags('animationPageLoaderCSS') }}
    {# {{ encore_entry_link_tags('intlTelInputCSS') }} #}
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
      .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;
        }
         .img-logo{
            max-height: 160px;
        }
    </style>
{% endblock %}

{% block body %}
    <section>
        <div class="container mt-4">
            <div class="row" id="section-content-form">
                <div data-page-config="WMAF.WOMAF" class="mt-3">
                    {{ include('components/trust-pilot-ranking.html.twig', { option : '' } ) }}
                </div>
                <div class="col-12">
                    <h2 class="text-center">Get Your Mexican Plates Auto Insurance</h2>
                    <div class="line-orange"></div>
                    <div class="container-fluid my-2 my-md-4">
                        <h3 class="text-center d-none d-md-block"> ANA Insurance</h3>
                        <p class="text-center d-none d-md-block">
                            Novamar and ANA SEGUROS, are a leading vehicle insurer in Mexico. They have designed the ANA / Novamar Mx Auto Registration Policy, a unique Auto Policy for Expatriates with vehicles with Mx License.
                        </p>
                    </div>
                    {% if distributor != "auto" %}
                        <input type="hidden" id="isDistributor" value="true">
                        {# solo se mostrara cuando la bandera de solo formualrio este desactivada #}
                        <!-- if != OF -->
                            <div class="text-center" data-page-config="WMAF.WOMAF.FANDL">
                                <img id="distributorLogo" src="" style="margin-top:15px;">
                            </div>
                        <!-- end if -->
                            <span id="google_translate" class="text-center dist"></span>
                    {% else %}
                        <input type="hidden" id="isDistributor" value="false">
                    {% endif %}
                    
                    {# solo se mostrara cuando la bandera de solo formualrio este desactivada #}
                    <!-- if WMAF or WOMAF -->
                   
                    <!-- end if -->
                    
                    <div class="total">
                        <b><span class="price-text">$00.00</span> MXN Policy for <span class="coverage-days">0 days</span></b>
                    </div>
                    {{ form_start(form, {'attr' : {'id':'form_resident_auto'}} ) }} {{ form_errors(form) }}
                    <div id="wizard" class="residentAutoWizard">
                        <h5>Quoted</h5>
                        <section>
                            <div class="row">
                                <div class="col-12 row">
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-3">
                                        {{ form_label(form.firstNameContact, 'First name*')}}
                                        {{ form_errors(form.firstNameContact) }}
                                        {{ form_widget(form.firstNameContact,{'attr':{'class':'form-control','placeholder':'First name'}} ) }}
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-3">
                                        {{ form_label(form.lastNameContact, 'Last name*') }}
                                        {{ form_errors(form.lastNameContact) }}
                                        {{ form_widget(form.lastNameContact,{'attr':{'class':'form-control','placeholder':'Last name'}} ) }}
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-3 d-flex flex-column">
                                        {{ form_label(form.phone, 'Phone*') }}
                                        {{ form_errors(form.phone) }}
                                        {{ form_widget(form.phone, {'attr':{'class':'form-control phone-format'}} ) }}
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-3">
                                        {{ form_label(form.email, 'Email*') }}
                                        {{ form_errors(form.email) }}
                                        {{ form_widget(form.email, {'attr':{'class':'form-control','placeholder':'exampe@domain.com'}} ) }}
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-3">
                                        {{ form_label(form.nationalityContact, 'Nationality*') }}
                                        {{ form_errors(form.nationalityContact) }}
                                        {{ form_widget(form.nationalityContact, {'attr':{'class':'form-control'}} ) }}
                                    </div>
                                    {% if distributor == 'auto' %}
                                        <div class="col-lg-4 col-md-4 col-12 mb-3">
                                            <label>How did you found us?*</label>
                                            {{ form_widget(form.aboutUsList, {'attr':{'class':'form-control'}} ) }}
                                            {{ form_widget(form.reference) }}
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-12 mb-3 d-none">
                                            <label>Specify your reference*</label>
                                            {{ form_widget(form.auxAboutUs, {'attr':{'class':'form-control'}} ) }}
                                        </div>
                                    {% else %}
                                        <div class="col-lg-4 col-md-4 col-12 mb-3 d-none">
                                            {{ form_widget(form.aboutUsList, {value: 'Sales Representative','attr':{'class':'form-control'}} ) }}
                                            {{ form_widget(form.auxAboutUs, {value: distributor} ) }}
                                            {{ form_widget(form.reference) }}
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="col-12 row">
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-3">
                                        <label class="requeried">Vehicle type*</label>
                                        {{ form_errors(form.vehicleType) }}
                                        {{ form_widget(form.vehicleType, {'attr':{'class':'form-control'}} ) }}
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-3">
                                        <label class="requeried">Model year*</label>
                                        {{ form_errors(form.modelYear) }}
                                        {{ form_widget(form.modelYear, {'attr':{'class':'form-control'}} ) }}
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-3">
                                        <label class="requeried">Brand*</label>
                                        {{ form_errors(form.brand) }}
                                        {{ form_widget(form.brand, {'attr':{'class':'form-control'}} ) }}
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 mb-3">
                                        <label class="requeried">Sub brand*</label>
                                        {{ form_errors(form.subBrand) }}
                                        {{ form_widget(form.subBrand, {'attr':{'class':'form-control'}} ) }}
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 mb-3">
                                        <label class="requeried">Version*</label>
                                        {{ form_errors(form.version) }}
                                        {{ form_widget(form.version, {'attr':{'class':'form-control'}} ) }}
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 mb-3">
                                        <label class="requeried">State*</label>
                                        {{ form_errors(form.state) }}
                                        {{ form_widget(form.state, {'attr':{'class': 'form-control'}} ) }}
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 mb-3">
                                        <label class="requeried">City*</label>
                                        {{ form_errors(form.city) }}
                                        {{ form_widget(form.city, {'attr':{'class': 'form-control'}} ) }}
                                    </div>
                                </div>
                                <div class="col-lg-12 text-center pt-3">
                                    <button type="button" id="btnQuote" class="btn btn-novamar">
                                        Quote
                                    </button>
                                    <div class="col-lg-12 d-flex justify-content-center">
                                        <div class="alert alert-warning  d-none col-lg-8 mt-2" role="alert" id="alertMessage2">
                                            <p>These policies are only for cars with Mexican plates, if your car has Legalized Auto, ONAPPAFA or UCD plates, please contact the executive in charge:<br>
                                                Gabriela Hurtado of Novamar - <a href="mailto:auto@novamar.net">auto@novamar.net</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 text-center pt-3">
                                    <div class="loading d-none">
                                        <img src="{{ asset('/img/load75x75.gif') }}" alt="Loading icon" loading="lazy">
                                    </div>
                                </div>
                                <div class="alert alert-warning d-none col-lg-5" role="alert" id="alertMessage">
                                    <p>These policies are only for cars with Mexican plates, if your car has Legalized Auto, ONAPPAFA or UCD plates, please contact the executive in charge</p>
                                </div>
                                <div class="col-lg-12 text-center pt-3 d-none">
                                    <div class="alert" id="responseSpecialQuoteRequest"></div>
                                </div>
                            </div>
                            <div class="row">
                                <div id="prices" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 d-none">
                                    <h3 class="text-center">Select your term</h3>
                                    <div class="text-center validation-error"> {{ form_widget(form.price) }}</div>
                                    <div class="row">
                                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center">
                                            <div class="package">
                                                <h3 class="text-info">Full Coverage</h3> <span id="fullCoverage" class="total-premium">$ 0.00</span><br> <b>MXN for 1 Year</b><br> <button type="button" id="fullCoverageBtn" class="btn btn-buy">Select</button><br> <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#modalFullCoverage">View Coverages</button>
                                            </div>
                                            <div class="package">
                                                <h3 class="text-info">Full Coverage</h3>
                                                <span id="fullCoverageError" class="erroWs"></span>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center">
                                            <div class="package">
                                                <h3 class="text-info">Limited Coverage</h3> <span id="limitedCoverage" class="total-premium">$ 0.00</span><br> <b>MXN for 1 Year</b><br> <button type="button" id="limitedCoverage" class="btn btn-buy">Select</button><br> <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#modalLimitedCoverage">View Coverages</button>
                                            </div>
                                            <div class="package">
                                                <h3 class="text-info">Limited Coverage</h3>
                                                <span id="limitedCoverageError" class="erroWs"></span>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center">
                                            <div class="package">
                                                <h3 class="text-info">Liability Coverage</h3> <span id="liabilityCoverage" class="total-premium">$ 0.00</span><br> <b>MXN for 1 Year</b><br> <button type="button" id="liabilityCoverage" class="btn btn-buy">Select</button><br> <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#modalLiabilityCoverage">View Coverages</button>
                                            </div>
                                            <div class="package">
                                                <h3 class="text-info">Liability Coverage</h3>
                                                <span id="liabilityCoverageError" class="erroWs"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <span>We accept</span>
                                            <img src="{{ asset('img/visa_mcard.jpg') }}" />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="alert alert-warning" 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>
                                </div>
                            </div>
                        </section>
                        <h5>Insured Information</h5>
                        <section>
                            <div class="row">
                                <div class="col-12 mb-2 mt-2">
                                    <h4>References</h4>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-3 col-md-3 col-12 mb-3">
                                    {{ form_label(form.ownerType, 'Owner type*') }}
                                    {{ form_errors(form.ownerType) }}
                                    {{ form_widget(form.ownerType, {'attr':{'class' : 'form-control'}}) }}
                                </div>
                            </div>
                            <div class="row personContainer">                                
                                <div class="col-12 mb-2 mt-2">
                                    <h4>Person Information</h4>
                                </div>
                            </div>
                            <div class="row personContainer">
                                <div class="col-12 mb-2">
                                    <small class="officialName">Alert: You must use your complete name as it appears on your passport or official id</small>
                                </div>                                
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 mb-3">
                                    {{ form_label(form.nationality, 'Nationality') }}
                                    {{ form_errors(form.nationality) }}
                                    {{ form_widget(form.nationality, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 mb-3"> 
                                    {{ form_label(form.firstName, 'First name*')}}
                                    {{ form_errors(form.firstName) }}
                                    {{ form_widget(form.firstName,{'attr':{'class':'form-control','placeholder':'First name'}} ) }}
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 mb-3">
                                    {{ form_label(form.lastName, 'Last name*') }}
                                    {{ form_errors(form.lastName) }}
                                    {{ form_widget(form.lastName,{'attr':{'class':'form-control','placeholder':'Father last name'}} ) }}
                                </div>
                                <div class="col-lg-3 col-md-3 col-12 mb-3 d-none">
                                    {{ form_label(form.secondLastName, 'Mother last name*') }}
                                    {{ form_errors(form.secondLastName) }}
                                    {{ form_widget(form.secondLastName, {'attr':{'class':'form-control', 'placeholder':'Mother last name'}} ) }}
                                </div>
                            </div>
                            <div class="row personContainer">
                                <div class="col-lg-3 col-md-3 col-12 mb-3">
                                    {{ form_label(form.birthday, 'Birthday') }}<span>(mm/dd/YYYY)*</span>
                                    {{ form_errors(form.birthday) }}
                                    {{ form_widget(form.birthday, {'attr':{'class':'form-control', 'placeholder': 'mm/dd/YYYY', 'maxlength': '10', 'oninput': 'formatDate(this)'}} ) }}
                                </div>
                                <div class="col-lg-3 col-md-3 col-12 mb-3">
                                    {{ form_label(form.gender, 'Gender*') }}
                                    {{ form_errors(form.gender) }}
                                    {{ form_widget(form.gender, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 d-none mb-3">
                                    {{ form_label(form.curp, 'CURP*') }}
                                    {{ form_errors(form.curp) }}
                                    {{ form_widget(form.curp, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 d-none mb-3">
                                    {{ form_label(form.rfc, 'R.F.C.*') }}
                                    {{ form_errors(form.rfc) }}
                                    {{ form_widget(form.rfc, {'attr':{'class': 'form-control'}} ) }}
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 mb-3">
                                    {{ form_label(form.identificationType, 'Identification type*') }}
                                    {{ form_errors(form.identificationType) }}
                                    {{ form_widget(form.identificationType, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 mb-3">
                                    {{ form_label(form.identificationNumber, 'Identification number*') }}
                                    {{ form_errors(form.identificationNumber) }}
                                    {{ form_widget(form.identificationNumber, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 mb-3">
                                    {{ form_label(form.occupation, 'Occupation*') }}
                                    {{ form_errors(form.occupation) }}
                                    {{ form_widget(form.occupation, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="row companyContainer d-none">
                                <div class="col-12 mb-2 mt-2">
                                    <h4>Company Information</h4>
                                </div>
                            </div>
                            <div class="row companyContainer d-none">
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 mb-3">
                                    {{ form_label(form.companyName, 'Company name*') }}
                                    {{ form_errors(form.companyName) }}
                                    {{ form_widget(form.companyName,{'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 mb-3">
                                    {{ form_label(form.rfcCompany, 'R.F.C.*') }}
                                    {{ form_errors(form.rfcCompany) }}
                                    {{ form_widget(form.rfcCompany, {'attr':{'class': 'form-control'}} ) }}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 mb-3">
                                    {{ form_label(form.turningCompany, 'Type of company*') }}
                                    {{ form_errors(form.turningCompany) }}
                                    {{ form_widget(form.turningCompany, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 mb-3">
                                    {{ form_label(form.representativeName, 'Legal representative name*') }}
                                    {{ form_errors(form.representativeName) }}
                                    {{ form_widget(form.representativeName, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 mb-3">
                                    {{ form_label(form.nationalityRepresentative, 'Nationality representative*') }}
                                    {{ form_errors(form.nationalityRepresentative) }}
                                    {{ form_widget(form.nationalityRepresentative, {'attr':{'class':'form-control'}} ) }}
                                </div>
                            </div>  
                            <div class="row">
                                <div class="col-12 mb-2 mt-2">
                                    <h4>Address information</h4>
                                </div>
                            </div>             
                            <div class="row">
                                <div class="col-xl-2 col-xs-12 mb-3">
                                    {{ form_label(form.postalCode, 'Postal code*') }}
                                    {{ form_errors(form.postalCode) }}
                                    {{ form_widget(form.postalCode, {'attr':{'class': 'form-control'}} ) }}
                                </div>
                                <div class="col-xl-3 col-xs-12 mb-3">
                                    {{ form_label(form.municipality, 'Neighborhood*') }}
                                    {{ form_errors(form.municipality) }}
                                    {{ form_widget(form.municipality, {'attr':{'class': 'form-control'}} ) }}
                                </div>
                                <div class="col-xl-3 col-xs-12 mb-3">
                                    {{ form_label(form.address, 'Address*') }}
                                    {{ form_errors(form.address) }}
                                    {{ form_widget(form.address, {'attr':{'class': 'form-control'}} ) }}
                                </div>
                                <div class="col-xl-2 col-xs-12 mb-3">
                                    {{ form_label(form.buildingNumber, 'Building number*') }}
                                    {{ form_errors(form.buildingNumber) }}
                                    {{ form_widget(form.buildingNumber, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-xl-2 col-xs-12 mb-3">
                                    {{ form_label(form.unitNumber, 'Unit number*') }}
                                    {{ form_errors(form.unitNumber) }}
                                    {{ form_widget(form.unitNumber, {'attr':{'class':'form-control'}} ) }}
                                </div>                                
                            </div>                                      
                            <div class="row">
                                <div class="col-12 mb-2 mt-2">
                                    <h4>Vehicle information</h4>
                                </div>
                            </div>             
                            <div class="row">                                
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                    <label>Engine number*</label>
                                    {{ form_widget(form.engine, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                    <label>Plates*</label>
                                    {{ form_errors(form.plates) }}
                                    {{ form_widget(form.plates, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 mt-2">
                                    <label>Serial number / VIN*</label>
                                    {{ form_widget(form.serialNumber, {'attr':{'class':'form-control', 'maxlength' : "17"}} ) }}
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <small class="officialNameSmall">Attention: Please check your serial number (VIN), as this is the identity of your vehicle. In case this is wrong, it will be a rejection at the time of the claim.</small>
                                </div>    
                            </div>
                            <div class="row">
                                <div class="col-12 mb-2 mt-2">
                                    <h4>Second driver</h4>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 mb-3">
                                    {{ form_label(form.secondDriver, "Add second driver (optional)") }}
                                    {{ form_errors(form.secondDriver) }}
                                    {{ form_widget(form.secondDriver, {'attr':{'class':'form-control'}} ) }}
                                </div>
                            </div>                            
                            <div class="row">
                                <div class="col-12 mb-2 mt-2">
                                    <h4>Term</h4>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 mb-3">
                                    <label>Start date*</label>
                                    {{ form_widget(form.startDate ,{'attr': {'class' : 'form-control', 'placeholder': 'mm/dd/YYYY'}})}}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 mb-3">
                                    {{ form_label(form.endDate) }}
                                    {{ form_widget(form.endDate ,{'attr': {'class' : 'form-control'}})}}
                                </div>
                            </div>
                        </section>
                        <h5>Review Informaiton</h5>
                        <section>
                            <div class="row">
                                <div class="col-12">
                                    <h4 class="text-center">Review information</h4>
                                    <div id="vTab">
                                        <ul class="resp-tabs-list hor_1">
                                            <li>Customer information</li>
                                            <li>Address information</li>
                                            <li>Vehicle information</li>
                                        </ul>
                                        <div class="resp-tabs-container hor_1">
                                            <div class="resp-tab-content hor_1 resp-tab-content-active" aria-labelledby="hor_1_tab_item-0" style="display:block">
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info" id="content_name">
                                                        <b>Insured:</b>
                                                        <br>
                                                        <span id="show_name"></span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info" id="content_birthday">
                                                        <b>Birthday:</b>
                                                        <br>
                                                        <span id="show_birthday"></span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info" id="content_email">
                                                        <b>Email:</b>
                                                        <br>
                                                        <span id="show_email"></span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info" id="content_phone">
                                                        <b>Phone:</b>
                                                        <br>
                                                        <span id="show_phone"></span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info" id="content_secondDriver"> 
                                                        <b>Second driver:</b>
                                                        <br>
                                                        <span id="show_secondDriver"></span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info" id="content_nationality">
                                                        <b>Nationality:</b>
                                                        <br>
                                                        <span id="show_nationality"></span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info" id="content_idType"> 
                                                        <b>Identification type:</b>
                                                        <br>
                                                        <span id="show_idType"></span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info" id="content_idNumber"> 
                                                        <b>Identification number:</b>
                                                        <br>
                                                        <span id="show_idNumber"></span>
                                                    </div>
                                                </div>
                                                <div class="row">   
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info" id="content_rfc"> 
                                                        <b>RFC:</b> 
                                                        <br>    
                                                        <span id="show_rfc"></span> 
                                                    </div>  
                                                </div>  
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info" id="content_occupation">
                                                        <b>Occupation:</b>
                                                        <br>
                                                        <span id="show_occupation"></span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info" id="content_representativeName"> 
                                                        <b>Representative Name:</b>
                                                        <br>
                                                        <span id="show_representativeName"></span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info" id="content_nationalityRepresentative"> 
                                                        <b>Nationality representative:</b>
                                                        <br>
                                                        <span id="show_nationalityRepresentative"></span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info" id="content_turningCompany"> 
                                                        <b>Type of company:</b>
                                                        <br>
                                                        <span id="show_turningCompany"></span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info" id="content_rfcCompany"> 
                                                        <b>RFC:</b>
                                                        <br>
                                                        <span id="show_rfcCompany"></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info">
                                                        <b>Postal code:</b>
                                                        <br>
                                                        <span id="show_postalCode"></span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info">
                                                        <b>Address:</b>
                                                        <br>
                                                        <span id="show_address"></span>
                                                     </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info">
                                                        <b>Building number:</b>
                                                        <br>
                                                        <span id="show_buildingNumber"></span>
                                                     </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info">
                                                        <b>Unit number:</b>
                                                        <br>
                                                        <span id="show_unitNumber"></span>
                                                     </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info">
                                                        <b>Municipality:</b>
                                                        <br>
                                                        <span id="show_municipality"></span>
                                                     </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info">
                                                        <b>City:</b>
                                                        <br>
                                                        <span id="show_city"></span>
                                                     </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info">
                                                        <b>State:</b>
                                                        <br>
                                                        <span id="show_state"></span>
                                                     </div>
                                                </div>
                                            </div>
                                            <div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info">
                                                        <b>Year model:</b>
                                                        <br>
                                                        <span id="show_modelYear"></span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info">
                                                        <b>Brand:</b>
                                                        <br>
                                                        <span id="show_brand"></span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info">
                                                        <b>Sub brand:</b>
                                                        <br>
                                                        <span id="show_subBrand"></span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info">
                                                        <b>Version:</b>
                                                        <br>
                                                        <span id="show_version"></span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info">
                                                        <b>Engine number:</b>
                                                        <br>
                                                        <span id="show_engine"></span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info">
                                                        <b>VIN:</b>
                                                        <br>
                                                        <span id="show_serialNumber"></span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 row-info">
                                                        <b>Plates:</b>
                                                        <br>
                                                        <span id="show_plates"></span>
                                                    </div>
                                                </div>                                               
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="text-center">
                                        <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#termConditions"><b>Terms &amp; Conditions</b></button><br>
                                        <label for="form_conditions"> I agree, I have read and accept the terms and conditions on this page</label>
                                        <input type="checkbox" name="form[conditions]" id="form_conditions"><br>
                                    </div>
                                    <div class="alert alert-danger">
                                        <b>Note: These policies are non-cancellable and premiums are fully earned at time of purchase.</b>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <h5>Purchase</h5>
                        <section>
                            <div class="row">
                                <div class="col-md-3 col-sm-12 col-xs-12">
                                    <div id="policy-summary" class="text-center">                                        
                                        <img src="{{asset(imgCompaniesPath~'ana.png')}}" class="img-fluid"><br>                                        
                                        <label id="policy-coverage" style="color:#084A7A;"></label><br>
                                        <label><span id="policy-price">00.00</span> MXN/Year</label><br>
                                        <span id="car-description" class="description"></span>
                                    </div>
                                </div>
                                <div class="col-md-9 col-sm-12 col-xs-12">
                                    <div class="row">
                                        <div class="col-12 mb-2 mt-2">
                                            <h4>Credit card information</h4>
                                        </div>
                                    </div>                                    
                                    <div class="row">
                                        <div class="form-group col-xl-6">
                                            <label>Card holder name</label>
                                            <input type="text" name="form[cardFullName]" class="form-control" id="cardFullName" required="required">
                                        </div>
                                        <div class="form-group col-xl-6">
                                            <label>Credit card number</label>
                                            <input type="text" name="form[cardNumber]" class="form-control" id="cardNumber" maxlength="19" required="required" oninput="formatCreditCard(this)">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-xl-6">
                                            <label>Security code</label>
                                            <input type="text" id="cardCcv" name="form[cardCcv]" class="form-control" required="required" maxlength="4">
                                        </div>
                                        <div class="form-group col-xl-3">
                                            <label>Expiration date</label>
                                            <select id="cardExpirationMonth" name="form[cardExpirationMonth]" class="form-control" required="required">
                                                <option value="">Month</option>
                                                <option value="01">Jan</option>
                                                <option value="02">Feb</option>
                                                <option value="03">Mar</option>
                                                <option value="04">Apr</option>
                                                <option value="05">May</option>
                                                <option value="06">Jun</option>
                                                <option value="07">Jul</option>
                                                <option value="08">Aug</option>
                                                <option value="09">Sep</option>
                                                <option value="10">Oct</option>
                                                <option value="11">Nov</option>
                                                <option value="12">Dec</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-xl-3">
                                            <label>Expiration year</label>
                                            <select id="cardExpirationYear" name="form[cardExpirationYear]" class="form-control" required="required">
                                                <option value="">Year</option>                                                
                                                <option value="22">2022</option>
                                                <option value="23">2023</option>
                                                <option value="24">2024</option>
                                                <option value="25">2025</option>
                                                <option value="26">2026</option>
                                                <option value="27">2027</option>
                                                <option value="27">2028</option>
                                                <option value="27">2029</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-xl-12 text-center mt-4">
                                            <button id="pay-policy" type="button" class="btn btn-novamar">Pay Now</button>
                                        </div>
                                    </div>
                                    <div class="row d-none" id="processLoading">
                                        <div class="form-group col-xl-12 text-center">
                                            <img src="{{ asset('/img/load75x75.gif') }}" alt="Loading icon" loading="lazy">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                    <input type="hidden" name="form[distributorCode]" value="">
                    <input type="hidden" name="form[distributor]" value="{{ distributor }}">
                    <input type="hidden" name="form[distributorLink]" id="form_distributorLink" value="{{distributor == 'auto' ? '' : distributor }}">
                    <input type="hidden" id="form_policyNumber" name="form[policyNumber]" value="{{ policyNumber }}">
                    <input type="hidden" id="form_policyLink" name="form[policyLink]" value="">
                    <input type="hidden" name="form[whitOutCharge]" id="form_whitOutCharge" value="{{ whitOutCharge }}">
                    <input type="hidden" name="form[referer]" id="form_referer" value="{{ referer }}">
                    <input type="hidden" name="form[prospect]" id="form_prospect" value="">
                    <input type="hidden" name="form[prospectSicas]" id="form_prospectSicas" value="">
                    <input type="hidden" name="form[contactSicas]" id="form_contactSicas" value="">
                    <input type="hidden" name="form[campaign]" id="form_campaign" value="{{ campaign }}">                    
                    <input type="hidden" name="form[source]" id="form_source" value="{{ source }}">
                    <input type="hidden" name="form[id_client]" id="form_id_client" value="">
                    <input type="hidden" name="form[quoteNumber]" id="form_quoteNumber" value="">
                    <!--Renovacion-->
                    <input type="hidden" name="form[renewData]" id="form_renewData" value="{{renewData}}">
                    {{ form_rest(form) }}
                    {{ form_end(form) }}
                </div>
            </div>            
            <!-- if != OF and != FANDL -->
                <div class="row" data-page-config="WMAF.WOMAF">
                    {# separador #}
                    <div class="separator-section container-fluid d-flex align-items-center">
                        <div class="separator-line col-5"></div>
                        <div class="separator-section-image col-2 d-flex justify-content-center">
                            <img src="{{ asset('/img/novasun.png') }}" loading="lazy" alt="logo novamar insurance"class="img-responsive"></img>
                        </div>
                        <div class="separator-line col-5"></div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12 mt-4 mb-4">
                        <p class="d-md-none d-block mb-3" style="text-align: justify;">
                            Novamar and ANA SEGUROS, are a leading vehicle insurer in Mexico. They have designed the ANA / Novamar Mx Auto Registration Policy, a unique Auto Policy for Expatriates with vehicles with Mx License.
                        </p>
                        <span>Additional Benefits:</span><br><br>
                        <span>Here are the additional benefits from this Policy with Premiums up to 35% lower than those found in the market.</span>
                        <div class="line-orange"></div>
                        <div class="row">
                            <div class="col-lg-4 col-md-6 col-sm-12">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">All processes will be handled by the ANA Seguros bilingual staff specializing in the expat community in Mexico.</li>
                                    <li class="list-group-item">Damage to Vehicle due to overheating</li>
                                    <li class="list-group-item">Roadside assistance including gasoline delivery</li>
                                </ul>
                            </div>
                            <div class="col-lg-4 col-md-6 col-sm-12">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">Rental Car coverage for insured vehicle in case of total loss</li>
                                    <li class="list-group-item">Drivers under 18 years are covered for Liability</li>
                                    <li class="list-group-item">Liability extension while driving in other vehicles (including motorcycles).</li>
                                </ul>
                            </div>
                            <div class="col-lg-4 col-md-6 col-sm-12">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">Liability for trailers, caravans and for objects transported in the vehicle; caused by the insured.</li>
                                    <li class="list-group-item">USA and Canada liability coverage extension</li>
                                    <li class="list-group-item">English speaking staff to answers your call</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12 mt-4 mb-4">
                        <span>ANA Claims Services</span>
                        <div class="line-orange"></div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">Adjuster assistance in English</li>
                            <li class="list-group-item">All claims handled by the Tourist Auto Department of ANA to ensure that an English-speaking person is in charge of the claim.</li>
                        </ul>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12 mt-4 mb-4">
                        <span>Coverage:</span>
                        <div class="line-orange"></div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">Comprehensive</li>
                            <li class="list-group-item">Limited</li>
                            <li class="list-group-item">Liability</li>
                        </ul>
                    </div>
                    <div class="col-lg-12 col-sm-12 mt-4 mb-4">
                        <span>Complete the fields above to get a free online quote for vehicle insurance in Mexico today.</span>
                    </div>
                    <div class="col-12 text-center mb-2">
                      <img class="img-logo text-center" src="{{asset(imgCompaniesPath~'ana.png')}}" alt="Company Logo" />
                    </div>
                </div>
            <!-- en if -->
        </div>
    </section>
    {{ include('modals/modal-coverages-resident-auto.html.twig') }}
    {{ include('modals/purchase-terms-conditions.html.twig') }}
    <div id="modalRequestQuoteForm" class="modal fade">
        <div class="modal-dialog">          
            <div class="modal-content">
                <div class="modal-body">
                    <p>
                        <strong>Attention</strong><br>
                        Models <span id="yearRangeOut"></span> cannot be quoted here<br>
                        Do you want to request this quote to the executive in charge?
                    </p>
                    <br>
                    <label class="font-weight-bold" for="form_specialQuoteRequestInvoiceValue">Please enter the Invoice value of your vehicle</label>
                    <br>
                    <input type="text" name="form[specialQuoteRequestInvoiceValue]" id="form_specialQuoteRequestInvoiceValue" class="form-control" placeholder="$ MXN">
                </div>
                <div class="modal-footer d-flex justify-content-center align-items-center">
                    <button class="btn btn-novamar btn-lg" id="specialQuoteRequestButton">Request special quote</button>
                </div>
            </div>
        </div>
    </div>  
{% 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>
        const distributor = "{{ distributor }}"
        let distObj = {
        pageConfig: "{{ viewOptions }}",
        distLogo: "",
        distLink: "",
        distCode: ""
        }
        const prod = "RA"
    </script>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    {{ script_tag('libraries/jquery-validate.js') }}
    {{ script_tag('libraries/sweet-alert.js') }}
    {{ script_tag('libraries/easy-responsive-tab.js') }}
    {{ script_tag('components/tools.js') }}
    {{ script_tag('components/jquery-steps.js') }}
    {{ script_tag('components/page-config.js')}}
    {{ script_tag('libraries/jquery-mask.js') }}
    {{ script_tag('components/nationality-list.js') }}
    {{ script_tag('components/about-us-list.js') }}
    {{ script_tag('components/prospect.js') }}
    {{ script_tag('products/resident-auto-ana.js') }}
{% endblock %}