{% extends 'base.html.twig' %}
{% block title %}México Travel Insurance Coverage{% endblock %}
{% block metas %}
<meta name="description" content="Get comprehensive Mexico travel insurance with COVID coverage. Protect yourself during your trip with Novamar Insurance Mexico. Request a quote now!" />
    <meta name="keywords" content="mexico travel insurance, mexico travel medical, mexico travel coverage, mexico covid coverage, mexico covid insurance, mexican covid coverage, covid coverage in mexico" />
{% endblock %}
{% block css %}
    <!-- TrustBox script -->
	<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
	<!-- End TrustBox script -->
     {{encore_entry_link_tags('trustpilotWidgetsCSS')}}
     {{encore_entry_link_tags('stepsCSS')}}
     {{encore_entry_link_tags('animationPageLoaderCSS')}}
     {{encore_entry_link_tags('travelWsCSS')}}
    <style type="text/css">
        .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;
        text-align: center;
        }
        .img-logo{
            max-height: 160px;
        }
         .section-form{margin-top: 40px;}
    </style>
{% endblock %}
{% block body %}
    <section class="section-form">
        {% if distributor !='' %}
            <div data-page-config="WMAF.WOMAF.FANDL">
                <div class="text-center">
                     <img id="distributorLogo" src="" style="margin-top:15px;">
                </div>
                <span id="google_translate" class="text-center dist"></span>
            </div>
        {% endif %}
        {# {% if pageConfig != 'OF' %} #}
        <div data-page-config="WMAF.WOMAF.FANDL">
              {{ include('components/trust-pilot-ranking.html.twig', { option : '' } ) }}
            {# <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
            <div class=" d-flex justify-content-center align-items-center"> <span id="google_translate_element" class="dist "></span></div> #}
        {# {% endif %} #}
        </div>
        <div class="container mt-3">
            <h2 class="text-center" >Get Your México Travel Insurance Coverage</h2> 
            <div class="line-orange"></div>
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><br>
                    <div class="total d-none">
                    </div>
                    {{ form_start(form, {'attr' : {'id':'form_safeTravel'}} ) }}
                    <div id="wizard">
                        <h5>Travel Information</h5>
                        <section>
                            <div class="row">
                                <div class="col-12">
                                    <small class="officialName">Alert: You must use your complete name as it appears on your passport</small>
                                </div>
                                <div class="col-xl-12 col-md-12 col-12 d-none">
                                    <div class="alert alert-warning" role="alert" id="change_dates_alert"></div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                    <label for="form_firstName">First name<span class="red-asterisk">*</span></label>
                                    {{ form_errors(form.firstName) }}
                                    {{ form_widget(form.firstName, {'attr':{'class':'form-control quoteField','tabindex':'1', 'placeholder': 'First name'}} ) }}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                    <label for="form_lastName">Last name<span class="red-asterisk">*</span></label>
                                    {{ form_errors(form.lastName) }}
                                    {{ form_widget(form.lastName, {'attr':{'class':'form-control quoteField','tabindex':'2', 'placeholder': 'Last name'}} ) }}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                    <label for="form_email">Email<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.email) }}
                                    {{ form_widget(form.email, {'attr':{'class':'form-control quoteField', 'placeholder': 'example@domain.com','tabindex':'3'}} ) }}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                    <label for="form_phone">Phone<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.phone) }}
                                    {{ form_widget(form.phone, {'attr':{'class':'form-control phone-format quoteField', 'placeholder': '(000)-000-00', 'tabindex':'4'}} ) }}
                                </div>                                                            
                                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                    <label for="form_nationalityContact">Nationality<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.nationalityContact) }}
                                    {{ form_widget(form.nationalityContact, {'attr':{'class':'form-control quoteField', 'tabindex':'5'}} ) }}
                                </div>                                                            
                                {% if dist_link == "" %}                              
                                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                    <label for="form_aboutUsList">How did you hear about us?<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.aboutUsList) }}
                                    {{ form_widget(form.aboutUsList, {'attr':{'class':'form-control', 'tabindex':'6'}} ) }}
                                    {{ form_widget(form.aboutUs) }}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 d-none">
                                     <label for="form_auxAboutUs">Specify your reference<span class="red-asterisk">*</span> </label>                              
                                    {{ form_errors(form.auxAboutUs) }}
                                    {{ form_widget(form.auxAboutUs, {'attr':{'class':'form-control', 'tabindex':'7'}} ) }}
                                </div>
                                {% else %}
                                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 d-none">                                
                                        {{ form_widget(form.aboutUsList, {value: 'Sales Representative','attr':{'class':'form-control'}} ) }}
                                        {{ form_widget(form.auxAboutUs, {value: dist_link} ) }}
                                        {{ form_widget(form.aboutUs) }}
                                    </div>
                                {% endif %}         
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_departureDate">Select your departure date<span class="red-asterisk">*</span></label>
                                    {{ form_errors(form.departureDate) }}
                                    {{ form_widget(form.departureDate, {'attr':{'class':'form-control cursorPointer quoteField', 'placeholder': 'Click to choose', 'tabindex' : '8'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_arrivalDate">Select your arrival date<span class="red-asterisk">*</span></label>
                                    {{ form_errors(form.arrivalDate) }}
                                    {{ form_widget(form.arrivalDate, {'attr':{'class':'form-control cursorPointer quoteField', 'placeholder': 'Click to choose','tabindex' : '9'}} ) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">                                    
                                    {{ form_label(form.adultsPax, 'Amount of passengers traveling in a range of age 0-75') }}
                                    {{ form_errors(form.adultsPax) }}
                                    {{ form_widget(form.adultsPax, {'attr':{'class':'form-control quoteField', 'placeholder': 'Enter the number of adult passengers', 'tabindex' : '10'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                    {{ form_label(form.seniorPax, 'Amount of passengers traveling in a range of age 76-86') }}
                                    {{ form_errors(form.seniorPax) }}
                                    {{ form_widget(form.seniorPax, {'attr':{'class':'form-control quoteField', 'placeholder': 'Enter the number of senior passengers', 'tabindex' : '11'}} ) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <label for="form_typeTravel">Select your type trip<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.typeTravel) }}
                                    {{ form_widget(form.typeTravel, {'attr':{'class':'form-control quoteField', 'tabindex' : '12'}} ) }}
                                </div>
                            </div>
                            <div class="row">                                
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 departureField d-none">
                                    <label for="form_departureCountry">Your departure country<span class="red-asterisk">*</span></label>
                                    {{ form_errors(form.departureCountry) }}
                                    {{ form_widget(form.departureCountry, {'attr':{'class':'form-control quoteField','tabindex' : '13'}} ) }}
                                </div>                                
                                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-10 col-10 arrivalField d-none">
                                    <label for="form_arrivalCountries">Arrival country<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.arrivalCountries) }}
                                    {{ form_widget(form.arrivalCountries, {'attr':{'class': 'form-control quoteField', 'tabindex' : '1'}} ) }}
                                </div>
                                <div class="col-lg-1 col-md-1 col-sm-1 col-xs-2 col-2 elementsForList d-none">
                                    <label style="color:rgba(0,0,0,0);">add</label>
                                    <button type="button" class="btn btn-primary text-white" id="addArrivalCountry" title="Add country" tabindex="14">
                                        <span class="glyphicon glyphicon-plus"></span>
                                    </button>
                                </div>
                            </div>
                            <div class="row elementsForList d-none">
                                <div class="col-lg-11 col-md-11 col-sm-11 col-xs-10 col-10">
                                    <div class="form-group">
                                        <label for="arrivalCountriesList">Destinations list</label>
                                        <select id="arrivalCountriesList" name="form[arrivalCountriesList]" class="form-control quoteField" size="5" multiple></select>
                                    </div>
                                </div>
                                <div class="col-lg-1 col-md-1 col-sm-1 col-xs-2 col-2">
                                    <label style="color:rgba(0,0,0,0);">remove</label>
                                    <button type="button" class="btn btn-danger d-none" title="Select and remove" id="removeArrivalCountry" tabindex="15">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 text-center areaButtonQuote">
                                    <button type="button" id="btnQuote" class="btn btn-novamar" tabindex="16">Quote</button>
                                </div>
                            </div>
                            <div class="row"> 
                                <div class="offset-md-3 offset-lg-3 col-md-6 col-lg-6 offset-2 col-8 globalTotalPremium d-none" id="globalTotalPremium">
                                    <strong>Total premium for all passengers</strong><br>
                                    <span id="amountDaysTotal"></span><br>
                                    <button type="button" class="continueLink  btn btn-novamar">Continue</button>
                                </div>    
                                <div class="col-12 justify-content-center mt-4 mb-4 d-none" id="select_plan_label">
                                    <span style="padding: 7px 15px; box-shadow: 2px 3px 3px rgba(0,0,0,0.2); background:#fff; border-radius: 5px; color: #f36e03; font-size: 18px;" ><strong>Select your plan:</strong></span>
                                </div>                            
                                <div class="col-md-6 col-lg-6 col-12">
                                    <div class="table-responsive plansTable d-none">
                                        <div class="container-fluid d-flex justify-content-start"><span style="padding: 5px 10px; background:#005694; border-radius: 3px; color: #fff;" >Available plans for Adults</span></div>
                                        <table class="table">
                                            <tbody id="plansRowsListAdults">
                                            </tbody>
                                        </table>
                                    </div>                                
                                </div>
                                <div class="col-md-6 col-lg-6 col-12">
                                    <div class="table-responsive plansTable d-none">
                                        <div class="container-fluid d-flex justify-content-end"><span style="padding: 5px 10px; background:#005694; border-radius: 3px; color: #fff;" >Available plans for Seniors</span></div>
                                        <table class="table">
                                            <tbody id="plansRowsListSeniors">
                                            </tbody>
                                        </table>
                                    </div>                                
                                </div>
                                <table class="table table-responsive coveragesTable d-none">
                                </table>
                                <button type="button" id="btnBackToTheOptions" class="btn btn-novamar d-none">Back to the options</button>
                            </div> 
                            <div class="row d-none" id="cancellationLabel">
                                <div class="col-md-12">
                                    <div class="alert alert-warning">
                                        Cancellation: In case of a cancellation this must be done at the most three days before the policy effective date of the policy, retuning 50% of the total premium paid.<br>After the specified date, the policy may be canceled without the right to receive a refund of the premium paid.
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 d-none text-center mt-5" id="loadPlans">
                                <img src="{{asset('/img/load75x75.gif')}}" alt="loading" loading="lazy">
                            </div>
                        </section>
                        <h5>Policyholder</h5>
                        <section>
                            <h4>Policyholder details</h4>
                            <div class="row">
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 d-none">
                                    {{ form_label(form.typePerson) }}
                                    {{ form_errors(form.typePerson) }}
                                    {{ form_widget(form.typePerson, {'attr':{'class':'form-control'}} ) }}
                                </div>                                                                                                
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 person-field">
                                    {{ form_label(form.secondLastName, 'Mother Last Name')}}
                                    {{ form_errors(form.secondLastName) }}
                                    {{ form_widget(form.secondLastName,{'attr':{'class':'form-control', 'placeholder' : 'Optional'}} ) }}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 company-field">
                                    <label for="form_rfc">RFC<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.rfc) }}
                                    {{ form_widget(form.rfc, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 person-field">
                                    <label for="form_gender">Gender<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.gender) }}
                                    {{ form_widget(form.gender, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 person-field">
                                    <label for="form_birthday">Birthday<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.birthday) }}
                                    {{ form_widget(form.birthday, {'attr':{'class':'form-control date-picker', 'placeholder': 'mm/dd/yyyy'}} ) }}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 person-field">
                                    <label for="form_maritalStatus">Marital status<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.maritalStatus) }}
                                    {{ form_widget(form.maritalStatus, {'attr':{'class':'form-control', 'placeholder': 'Marital Status'}} ) }}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 person-field">
                                    <label for="form_ocupationCode">Ocupation<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.ocupationCode) }}
                                    {{ form_widget(form.ocupationCode, {'attr':{'class':'form-control'}} ) }}
                                </div>                                            
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                    <label for="form_nationality">Nationality<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.nationality) }}
                                    {{ form_widget(form.nationality, {'attr':{'class':'form-control'}} ) }}
                                </div>       
                            </div>
                            <h4 style="margin-top: 7px;">Destination address in México</h4>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_street">Street<span class="red-asterisk">*</span></label>
                                    {{ form_errors(form.address) }}
                                    {{ form_widget(form.address, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_buildingNumber">Building number<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.buildingNumber) }}
                                    {{ form_widget(form.buildingNumber, {'attr':{'class':'form-control'}} ) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    {{ form_label(form.unitNumber, 'Unit number (Optional)') }}
                                    {{ form_errors(form.unitNumber) }}
                                    {{ form_widget(form.unitNumber, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_neighborhood">Neighborhood<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.neighborhood) }}
                                    {{ form_widget(form.neighborhood, {'attr':{'class':'form-control'}} ) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_country">Country<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.country) }}
                                    {{ form_widget(form.country, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 stateCityArea">
                                    <label for="form_state">State<span class="red-asterisk">*</span></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 d-none auxStateCityArea">
                                    <label for="form_auxState">State<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.auxState) }}
                                    {{ form_widget(form.auxState, {'attr':{'class':'form-control'}} ) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 stateCityArea">
                                    <label for="form_city">City<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.city) }}
                                    {{ form_widget(form.city, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 d-none auxStateCityArea">
                                    <label for="form_auxCity">City<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.auxCity) }}
                                    {{ form_widget(form.auxCity, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    {{ form_label(form.postalCode, 'Postal code') }}
                                    {{ form_errors(form.postalCode) }}
                                    {{ form_widget(form.postalCode, {'attr':{'class':'form-control'}} ) }}
                                </div>
                            </div>
                        </section>
                        <h5>Passengers</h5>
                        <section>
                            <div class="col-12">
                                <h3 id="headNumberPassenger">Passenger #1</h3>
                            </div>
                            <div class="line-orange"></div>
                            <!--Section de pasajeros-->
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <button class="label_sameClientFirstPassenger">Click here to load the policyholder information</button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_personTypePax">Age<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.personTypePax) }}
                                    {{ form_widget(form.personTypePax, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_personFirstName">First name<span class="red-asterisk">*</span></label>
                                    {{ form_errors(form.personFirstName) }}
                                    {{ form_widget(form.personFirstName, {'attr':{'class':'form-control'}} ) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_personFatherLastName">First last name<span class="red-asterisk">*</span></label>                                   
                                    {{ form_errors(form.personFatherLastName) }}
                                    {{ form_widget(form.personFatherLastName, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">                                    
                                    {{ form_label(form.personMotherLastname ,'Mother last name') }}
                                    {{ form_errors(form.personMotherLastname) }}
                                    {{ form_widget(form.personMotherLastname, {required: false, 'attr':{'class':'form-control'}} ) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_personGender">Gender<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.personGender) }}
                                    {{ form_widget(form.personGender, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_personNationality">Nationality<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.personNationality) }}
                                    {{ form_widget(form.personNationality, {'attr':{'class':'form-control'}} ) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_personBirthday" id="label_personBirthday">Birthday<span class="red-asterisk">*</span></label>
                                    {{ form_errors(form.personBirthday) }}
                                    {{ form_widget(form.personBirthday, {'attr':{'class':'form-control','placeholder':'mm/dd/yyyy'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_personPassport">Number passport<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.personPassport) }}
                                    {{ form_widget(form.personPassport, {'attr':{'class':'form-control', 'maxlength':'10'}} ) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 mt-1">
                                    <button type="button" class="label_sameAddress">Click here to load the policyholder address</button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_personStreet">Street<span class="red-asterisk">*</span></label>                                    
                                    {{ form_widget(form.personStreet, {'attr':{'class':'form-control'}} ) }}
                                    {{ form_errors(form.personStreet) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_personBuildingNumber">Building number<span class="red-asterisk">*</span></label>                                   
                                    {{ form_errors(form.personBuildingNumber) }}
                                    {{ form_widget(form.personBuildingNumber, {'attr':{'class':'form-control'}} ) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">                                    
                                    {{ form_label(form.personUnitNumber, 'Unit number (Optional)') }}
                                    {{ form_widget(form.personUnitNumber, {required: false, 'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_personNeighborhood">Neighborhood<span class="red-asterisk">*</span></label>
                                    {{ form_errors(form.personNeighborhood) }}
                                    {{ form_widget(form.personNeighborhood, {'attr':{'class':'form-control'}} ) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_personCountry">Country<span class="red-asterisk">*</span></label>
                                    {{ form_errors(form.personCountry) }}
                                    {{ form_widget(form.personCountry, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 personStateCityArea">
                                    <label for="form_personState">State<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.personState) }}
                                    {{ form_widget(form.personState, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 d-none personAuxStateCityArea">
                                    <label for="form_personAuxState">State<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.personAuxState) }}
                                    {{ form_widget(form.personAuxState, {'attr':{'class':'form-control'}} ) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 personStateCityArea">
                                    <label for="form_personCity">City<span class="red-asterisk">*</span></label>
                                    {# {{ form_label(form.personCity, 'City' )}} #}
                                    {{ form_errors(form.personCity) }}
                                    {{ form_widget(form.personCity, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 d-none personAuxStateCityArea">
                                    <label for="form_personAuxCity">City<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.personAuxCity) }}
                                    {{ form_widget(form.personAuxCity, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_personPostalCode">Zip code<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.personPostalCode) }}
                                    {{ form_widget(form.personPostalCode, {'attr':{'class':'form-control'}} ) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_personParent">Relationship with the policyholder<span class="red-asterisk">*</span></label>
                                    {{ form_errors(form.personParent) }}
                                    {{ form_widget(form.personParent, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_personPhone">Phone<span class="red-asterisk">*</span></label>
                                    {{ form_label(form.personPhone, 'Phone' )}}
                                    {{ form_errors(form.personPhone) }}
                                    {{ form_widget(form.personPhone, {'attr':{'class':'form-control phone-format', 'placeholder': '(000)-000-00'}} ) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_personEmail">Email<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.personEmail) }}
                                    {{ form_widget(form.personEmail, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_personOcupationCode">Ocupation<span class="red-asterisk">*</span></label>
                                    {{ form_errors(form.personOcupationCode) }}
                                    {{ form_widget(form.personOcupationCode, {'attr':{'class':'form-control'}} ) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label for="form_personMaritalStatus">Marital status<span class="red-asterisk">*</span></label>                                    
                                    {{ form_errors(form.personMaritalStatus) }}
                                    {{ form_widget(form.personMaritalStatus, {'attr':{'class':'form-control'}} ) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <label class="invisible">o</label>
                                    <center>
                                        <button type="button" class="btn btn-novamar p-1" id="form_previosPassenger"><i class="glyphicon glyphicon-chevron-left"></i> Previous passenger</button>
                                        <button type="button" class="btn btn-novamar p-1" id="form_nextPassenger">Next passenger <i class="glyphicon glyphicon-chevron-right"></i></button>
                                    </center>
                                </div>
                            </div>
                        </section>
                        <h5>Purchase</h5>
                        <section>
                            <div class="row">
                                <div class="col-lg-5">
                                    <div id="policy-summary" class="text-center">
                                        <div>
                                            <picture>
                                                <source type="image/webp" srcset="{{asset('/img/companies/mapfre.webp')}}">
                                                <source type="image/png" srcset="{{asset('/img/companies/mapfre.png')}}">
                                                <img style="width:100%;" loading="lazy" src="{{asset('/img/companies/mapfre.png')}}" class="img-responsive" alt="mapfre logo">
                                            </picture>
                                        </div>
                                        <label id="policy-coverage" style="color:#084A7A;"></label>                                    
                                        <br>
                                    </div>
                                    <div class="summary pl-3 pt-3">
                                        <div class="summary-item">
                                            <img loading="lazy" src="{{asset('/icons/travel_covid_icons/066-schedule.png')}}" width="40"> Days of Travel <span class="summary-pipe" alt="sumarry icon">|</span> <span id="daysOfTravel"></span>
                                        </div>
                                        <div class="summary-item">
                                            <img loading="lazy" src="{{asset('/icons/travel_covid_icons/047-man.png')}}" width="40"> Adult passengers <span class="summary-pipe" alt="sumarry icon">|</span> <span id="adultsPaxSummary"></span>
                                        </div>
                                        <div class="summary-item">
                                            <img loading="lazy" src="{{asset('/icons/travel_covid_icons/048-man.png')}}" width="40"> Senior passengers <span class="summary-pipe" alt="sumarry icon">|</span> <span id="siniorPaxSummary"></span>
                                        </div>
                                        <div class="summary-item">
                                            <img loading="lazy" src="{{asset('/icons/travel_covid_icons/029-flight.png')}}" width="40"> Departure date <span class="summary-pipe" alt="sumarry icon">|</span> <span id="departureDateSummary"></span>
                                        </div>
                                        <div class="summary-item">
                                            <img loading="lazy" src="{{asset('/icons/travel_covid_icons/040-landscape.png')}}" width="40"> Arrival date <span class="summary-pipe" alt="sumarry icon">|</span> <span id="arrivalDateSummary"></span>
                                        </div>
                                        <div class="summary-item">
                                            <img loading="lazy" src="{{asset('/icons/travel_covid_icons/030-globe.png')}}" width="40"> Departure country <span class="summary-pipe" alt="sumarry icon">|</span> <span id="departureCountrySummary"></span>
                                        </div>
                                        <div class="summary-item">
                                            <img loading="lazy" src="{{asset('/icons/travel_covid_icons/033-globe.png')}}" width="40"> Arrival country <span class="summary-pipe" alt="sumarry icon">|</span> <span id="arrivalCountrySummary"></span>
                                        </div>
                                        <div class="summary-item">
                                            <img loading="lazy" src="{{asset('/icons/travel_covid_icons/049-globe.png')}}" width="40"> Total premium <span class="summary-pipe" alt="sumarry icon">|</span> <span id="totalPremiumSummaryMXN"></span> MXN
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-7">
                                    <div class="row">
                                        <div class="col-12">
                                            <h3>Credit Card Information</h3>
                                            <div class="line-orange"></div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            {{ form_label(form.cardHolderName, 'Card holder name') }}
                                            {{ form_errors(form.cardHolderName) }}
                                            {{ form_widget(form.cardHolderName, {'attr':{'class':'form-control'}} ) }}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                            {{ form_label(form.bankEntity, 'Bank entity') }}
                                            {{ form_errors(form.bankEntity) }}
                                            {{ form_widget(form.bankEntity, {'attr':{'class':'form-control'}} ) }}
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                            {{ form_label(form.cardType, 'Card type') }}
                                            {{ form_errors(form.cardType) }}
                                            {{ form_widget(form.cardType, {'attr':{'class':'form-control','maxlength':'4'}} ) }}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                            {{ form_label(form.creditCardNumber, 'Credit card number') }}
                                            {{ form_errors(form.creditCardNumber) }}
                                            {{ form_widget(form.creditCardNumber, {'attr':{'class':'form-control'}} ) }}
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                            {{ form_label(form.securityCode, 'Security code') }}
                                            {{ form_errors(form.securityCode) }}
                                            {{ form_widget(form.securityCode, {'attr':{'class':'form-control','maxlength':'4'}} ) }}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                            {{ form_label(form.expirationDateMonth, 'Expiration date') }}
                                            {{ form_errors(form.expirationDateMonth) }}
                                            {{ form_widget(form.expirationDateMonth, {'attr':{'class':'form-control'}} ) }}
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                            {{ form_label(form.expirationDateYear, 'Expiration year') }}
                                            {{ form_errors(form.expirationDateYear) }}
                                            {{ form_widget(form.expirationDateYear, {'attr':{'class':'form-control'}} ) }}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div role="alert" class="alert alert-info labelReviewChanges">
                                                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.
                                            </div>
                                        </div>
                                    </div>                                                                
                                    <center>
                                        <a href="" data-bs-toggle="modal" data-bs-target="#termConditions">
                                            <b>Terms and Conditions</b>
                                        </a>
                                        <input type="checkbox" id="form_conditions" name="form_conditions">
                                        <label for="form_conditions" class="iAgreeMessage" >
                                            I agree, I have read and accept the terms and conditions on this page
                                        </label>
                                        <button id="pay-policy" type="button" class="btn btn-default">Pay Now</button>
                                        <p class="warningTakeTime d-none">This operation may take a moment, do not close the window.</p>
                                        <div class="small-loader d-none">
                                            <img src="{{asset('/img/load75x75.gif')}}" alt="loading" loading="lazy">                           
                                        </div>
                                    </center>
                                </div>
                            </div>
                        </section>
                    </div>
                    <input type="hidden" name="form[source]" id="form_source" value="{{source}}">
                    <input type="hidden" name="form[referer]" id="form_referer" value="{{referer}}">
                    <input type="hidden" name="form[campaign]" id="form_campaign" value="{{campaign}}">
                    <input type="hidden" name="form[company]" id="form_company" value="Mapfre">
                    <input type="hidden" name="form[product]" id="form_product" value="TM">
                    <input type="hidden" name="form[distributorLink]" id="form_distributorLink" value="{{dist_link}}">
                    <input type="hidden" name="form[distributorCode]" id="form_distributorCode" value="{{distributorCode}}">               
                    <input type="hidden" name="form[distributor]" id="form_distributor" value="{{dist_link}}">
                    <input type="hidden" name="form[resumenPlanAdult]" id="form_resumenPlanAdult" value="">
                    <input type="hidden" name="form[resumenPlanSenior]" id="form_resumenPlanSenior" value="">
                    <input type="hidden" name="form[personsCollection]" id="form_personsCollection" value="">
                    <input type="hidden" name="form[arrivalCountriesCollection]" id="form_arrivalCountriesCollection" value="">
                    <input type="hidden" name="form[textValues]" id="form_textValues" value="">
                    <input type="hidden" name="form[totalDays]" id="form_totalDays" value="">                     
                    <input type="hidden" name="form[quoteData]" id="form_quoteData" value="{{ quoteData }}">                     
                    <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[quoteNumber]" id="form_quoteNumber" value="">
                    <input type="hidden" name="form[id_client]" id="form_id_client" value="">
                    {{ form_widget(form.exchangeRate, {'attr':{'class': 'd-none'}} ) }}               
                    {{ form_rest(form) }}
                    {{ form_end(form) }}  
                </div>
                {# {% if pageConfig != 'OF' and pageConfig != 'FANDL' %}  #}
                    <div class="container" role="main" id="main" data-page-config="WMAF.WOMAF">
                        <div class="row">
                            <div class="col-lg-12">
                                <p class="content-text">
                                    Enhance your travel experiences knowing you and your budget are protected from the unexpected - for a fraction of your trip cost.
                                    With travel insurance, you can get help finding - and paying for - appropriate care in a covered medical emergency.
                                    With 24-hour expert assistance for solving medical and other travel-related problems on the go, you can enjoy more freedom to explore.
                                    <br><br>                            
                                    <strong>
                                        Features of our M&eacute;xico Travel Insurance Coverage
                                    </strong>                                
                                </p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 benefits">
                                <ul>
                                    <li class="benefit">Medical Coverage for illness and/or accident</li>
                                    <li class="benefit"><strong>COVID</strong> Coverage included</li>
                                    <li class="benefit">Direct Payment with the best local Hospital and Clinics</li>
                                    <li class="benefit">Zero deductible and no copayment policy</li>
                                    <li class="benefit">Maximum limits from US$25,000 up to 350,000</li>
                                    <li class="benefit">Trip Cancellation Expenses</li>
                                    <li class="benefit">Emergency Medical Assistance up to US$350,000</li>
                                    <li class="benefit">Emergency Medical Transportation</li>
                                    <li class="benefit">Emergency local ambulance</li>
                                    <li class="benefit">Emergency Dental Treatment</li>
                                    <li class="benefit">Medications</li>
                                    <li class="benefit">Medical Repatriation</li>
                                    <li class="benefit">Hospital Extension</li>
                                    <li class="benefit">Transfer of a relative</li>
                                    <li class="benefit">Hotel expenses of a relative</li>
                                    <li class="benefit">Registered Baggage Shipping</li>
                                    <li class="benefit">Lost of Registered luggage</li>
                                </ul>
                            </div>
                            <div class="col-md-4 benefits">
                                <ul>
                                    <li class="benefit">Legal Assistance in case of Traffic Accident</li>
                                    <li class="benefit">Mediphone</li>
                                    <li class="benefit">Third Party Liability</li>
                                    <li class="benefit">Accidental Death</li>
                                    <li class="benefit">24/7 Medical & Travel assistance services</li>
                                    <li class="benefit">Ages: From 0 to 75 yrs (up to 86 yrs old special quote)</li>
                                    <li class="benefit">Personal Liability</li>
                                    <li class="benefit">Repatriation or return of mortal remains</li>
                                    <li class="benefit">Extended Care facility</li>
                                    <li class="benefit">Medical Evacuation & Repatriation</li>
                                    <li class="benefit">Transport & Adult Companion for Children</li>
                                    <li class="benefit">Early Return of the Insured in case of Death of direct relative</li>
                                    <li class="benefit">Early Return of the Insured in case of Hospitalization of direct relative</li>
                                    <li class="benefit">Compensation for Delay in Location of baggage</li>
                                </ul>
                            </div>
                            <div class="col-md-4">
                                <div class="d-none d-sm-block">
                                    <div class="Container-logo-two-lines">
                                    <picture>
                                            <source type="image/webp" srcset="{{asset('/img/mx/Products-Banner/safetravel/safe-travel-5.webp')}}">
                                            <source type="image/jpeg" srcset="{{asset('/img/mx/Products-Banner/safetravel/safe-travel-5.jpg')}}">
                                            <img loading="lazy" src="{{asset('/img/mx/Products-Banner/safetravel/safe-travel-5.jpg')}}" style="width: 100%;" alt="What to do if a loss occurs">
                                        </picture>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row d-block d-sm-none">
                            <div class="col-lg-12">                            
                                <div class="Container-logo-two-lines">
                                    <picture>
                                        <source type="image/webp" srcset="{{asset('/img/mx/Products-Banner/safetravel/safe-travel-5.webp')}}">
                                        <source type="image/jpeg" srcset="{{asset('/img/mx/Products-Banner/safetravel/safe-travel-5.jpg')}}">
                                        <img src="{{asset('/img/mx/Products-Banner/safetravel/safe-travel-5.jpg')}}" style="width: 100%;" alt="What to do if a loss occurs">
                                    </picture>
                                </div>                            
                            </div>                        
                        </div>
                        <div class="row">
                            <div class="col-md-12 text-center mt-4">
                                <picture>
                                    <source type="image/webp" srcset="{{asset('/img/companies/mapfre.webp')}}">
                                    <source type="image/png" srcset="{{asset('/img/companies/mapfre.png')}}">
                                    <img class="img-logo" src="{{asset('/img/companies/mapfre.png')}}" alt="mapfre logo">
                                </picture>
                            </div>
                        </div>
                    </div>
                {# {% endif %} #}
            </div>
        </div>    
    </section>
    {{ include('./modals/purchase-terms-conditions.html.twig') }}
{% endblock %}
{% block scripts %}
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    {% 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 = "{{ dist_link }}"
        let distObj = {
            pageConfig: "{{ viewOptions }}",
            distLogo: "",
            distLink: "",
            distCode: "",
        }
        const prod = "Travel"
    </script>

 
    {{script_tag('libraries/sweet-alert.js') }}
    {{script_tag("components/tools.js")}}
    {{script_tag("libraries/jquery-validate.js")}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation/1.19.3/additional-methods.min.js"></script>
    {{script_tag('components/jquery-steps.js')}}
    {{script_tag('components/jquery-number.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("components/addMethod.js")}}
    {{script_tag('components/page-config.js')}}
    {{script_tag("products/travel-covid.js")}}

{% endblock %}