{% set layout = userData.role != 'ROLE_DISTRIBUTOR' ? 'base.html.twig' : 'layout-distributors.html.twig' %}
{% extends layout %}
{% block title %}Travel Mapfre - NIS{% endblock %}
{% block stylesheets %}
	{{ parent() }}
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    {{encore_entry_link_tags('travelCSS')}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
   
    <link rel="stylesheet" href="{{asset('css/jquery.steps.min.css')}}">

    <style>
    #wizard > .content{
        overflow: visible !important;
    }
    #wizard{
        overflow: visible !important;
    }
    </style>
{% endblock %}
{% block body %}
{# {{ include('./components/full-loader-container.html.twig') }} #}
{% if userData.role != 'ROLE_DISTRIBUTOR' %}
    {{ include("mx/nav_menu.twig",{option:'new_record'}) }}
{% else %}
    {{ include("distributors/nav_menu.twig", {option:''}) }}
{% endif %}
<main>
    <div class="container-fluid">
        <div class="row border-bottom">
            <div class="col-xl-2 offset-xl-1 col-lg-3 col-md-6 col-sm-4 col-6 p-2 text-center">
                <img src="{{ asset('images/companies/mapfre.png') }}" class="img-fluid m-3" width="300">
            </div>
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-4 col-6 text-center">
                <h1>Travel Ws</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 p-1 text-center border-end border-bottom">
                <label class="fw-bold">Contractor name</label><br>
                {{firstName}} {{lastName}} {{secondLastName}}
            </div>
            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 p-1 text-center border-end border-bottom">
                <label class="fw-bold">Group code</label><br>
                {% if group_code == 'start' %}
                    New
                {% else %}
                    {{group_code}}
                {% endif %}
            </div>
            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 p-1 text-center border-bottom">
                <label class="fw-bold">Total premium</label><br>
                <div class="total">-</div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-12 p-0">
                {{ form_start(form, {'attr' : {'id':'form_safeTravel'}} ) }}
                <div id="wizard">
                    <h5>Travel Information</h5>
                    <section>
                        <!-- Row for alerts -->
                        <div class="row d-none quoteFieldContainer">
                            <div class="col-xl-6 offset-xl-3 col-md-12 col-12 d-none">
                                <div class="alert alert-warning" role="alert" id="change_dates_alert"></div>
                            </div>
                        </div>

                        <!-- Row for date selection -->
                        <div class="row d-none quoteFieldContainer">
                            <div class="col-md-6 col-12">
                                <label for="form_departureDate" class="fw-bold">Select the departure date<span class="requiredSign">*</span></label>
                                {{ form_errors(form.departureDate) }}
                                {{ form_widget(form.departureDate, {'attr':{'class':'form-control cursor-pointer quoteField', 'placeholder': 'Click to choose', 'tabindex' : '5'}}) }}
                            </div>
                            <div class="col-md-6 col-12">
                                <label for="form_arrivalDate" class="fw-bold">Select the arrival date<span class="requiredSign">*</span></label>
                                {{ form_errors(form.arrivalDate) }}
                                {{ form_widget(form.arrivalDate, {'attr':{'class':'form-control cursor-pointer quoteField', 'placeholder': 'Click to choose', 'tabindex' : '6'}}) }}
                            </div>
                        </div>

                        <!-- Row for passenger count -->
                        <div class="row d-none quoteFieldContainer">
                            <div class="col-md-6 col-12">
                                {{ form_label(form.adultsPax, 'Adults passengers (0 ~ 75 years old)', {'label_attr': {'class': 'fw-bold'}}) }}
                                {{ form_errors(form.adultsPax) }}
                                {{ form_widget(form.adultsPax, {'attr':{'class':'form-control quoteField', 'placeholder': 'Enter the number of adult passengers', 'tabindex' : '7'}}) }}
                            </div>
                            <div class="col-md-6 col-12">
                                {{ form_label(form.seniorPax, 'Senior passengers (76 ~ 86 years old)', {'label_attr': {'class': 'fw-bold'}}) }}
                                {{ form_errors(form.seniorPax) }}
                                {{ form_widget(form.seniorPax, {'attr':{'class':'form-control quoteField', 'placeholder': 'Enter the number of senior passengers', 'tabindex' : '8'}}) }}
                            </div>
                        </div>

                        <!-- Row for trip type -->
                        <div class="row d-none quoteFieldContainer">
                            <div class="col-md-12">
                                <label for="form_typeTravel" class="fw-bold">Select the type of trip<span class="requiredSign">*</span></label>
                                {{ form_errors(form.typeTravel) }}
                                {{ form_widget(form.typeTravel, {'attr':{'class':'form-control quoteField', 'tabindex' : '9'}}) }}
                            </div>
                        </div>

                        <!-- Row for country selection -->
                        <div class="row d-none quoteFieldContainer">
                            <div class="col-md-6 departureField d-none">
                                <label for="form_departureCountry" class="fw-bold">Your departure country<span class="requiredSign">*</span></label>
                                {{ form_errors(form.departureCountry) }}
                                {{ form_widget(form.departureCountry, {'attr':{'class':'form-control quoteField','tabindex' : '10'}}) }}
                            </div>
                            <div class="col-md-5 arrivalField d-none">
                                <label for="form_arrivalCountries" class="fw-bold">Arrival country<span class="requiredSign">*</span></label>
                                {{ form_errors(form.arrivalCountries) }}
                                {{ form_widget(form.arrivalCountries, {'attr':{'class':'form-control quoteField', 'tabindex' : '11'}}) }}
                            </div>
                            <div class="col-md-1 text-end elementsForList d-none">
                                <label style="color:rgba(0,0,0,0);">Add</label>
                                <button type="button" class="btn btn-primary" id="addArrivalCountry" title="Add country" tabindex="12">
                                    <i class="bi bi-plus"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Row for destination list -->
                        <div class="row elementsForList d-none">
                            <div class="col-md-11">
                                <label for="arrivalCountriesList" class="fw-bold">Destinations list</label>
                                <select id="arrivalCountriesList" name="form[arrivalCountriesList]" class="form-control quoteField" size="5" multiple></select>
                            </div>
                            <div class="col-md-1 text-end">
                                <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="13">
                                    <i class="bi bi-x"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Buttons -->
                        <div class="row pt-4" id="buttonsContainer">
                            <div class="col text-center">
                                <button type="button" id="btnQuote" class="btn btn-primary d-none me-2" tabindex="14">Quote</button>
                                <button type="button" class="btn btn-info exportQuoteStyle d-none" id="exportQuoteBtn">Export</button>
                            </div>
                        </div>

                        <!-- Additional rows and elements can follow similarly -->
                        <div class="row">
                            <div class="col-xl-4 offset-xl-4 mt-3 exportQuoteContainer pb-3 d-none">
                                <div class="row">
                                    <div class="col-md-6 offset-md-3 p-2 text-center">
                                        <label id="label_select_plans_to_export">Select plans to send or download</label>
                                        <br>
                                        <label id="label_select_plans_to_export_note">The <b>Silver</b> plan was automatically selected because the quote includes senior passengers.</label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-2 offset-md-3 optionPlanToExport p-0 text-center">
                                        <label>Platinum</label>
                                        <input type="checkbox" name="form[platinum]" class="form-check-input d-none" id="form_platinum">
                                    </div>
                                    <div class="col-md-2 optionPlanToExport p-0 text-center">
                                        <label>Gold</label>
                                        <input type="checkbox" name="form[gold]" class="form-check-input d-none" id="form_gold">
                                    </div>
                                    <div class="col-md-2 optionPlanToExport p-0 text-center">
                                        <label>Silver</label>
                                        <input type="checkbox" name="form[silver]" class="form-check-input d-none" id="form_silver">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 offset-md-3 p-2">
                                        <label>Send to</label>
                                        <input type="text" id="form_emailAux" class="form-control" value="{{email}}" readonly>
                                    </div>
                                </div>
                                <div class="row text-center">
                                    <div class="col-12 pt-2">
                                        <button class="btn btn-info exportQuoteStyle2 me-1" type="button" id="sendQuoteButton">Send quote</button>
                                        <button class="btn btn-info exportQuoteStyle2" type="button" id="downloadQuoteButton">Download quote</button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="alert d-none mt-3" id="exportMessage"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row quoteContainer"> 
                            <div class="col-10 offset-1 col-md-6 offset-md-3 col-xl-4 offset-xl-4 globalTotalPremium d-none" id="globalTotalPremium">
                                <strong>Total premium</strong><br>
                                <span id="amountDaysTotal"></span><br>
                                <a href="#" class="continueLink">Continue</a>
                            </div>
                        </div>

                        <div class="row quoteContainer">
                            <div class="col-12 col-md-8 offset-md-2 col-xl-6 offset-xl-3">
                                <div class="table-responsive plansTable d-none">
                                    <table class="table">
                                        <tbody id="plansRowsList">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="row" id="coveragesContainer">
                        </div>

                        <div class="col-12 d-none text-center" id="loadPlans">
                            <img src="{{ asset('images/load75x75.gif') }}" alt="Loading...">
                        </div>
                    </section>
                    <h5>Contractor</h5>
                    <section>
                        <div class="row">
                            <div class="col-12">
                                <label class="line-orange w-100">Contractor details</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 col-md-4 col-sm-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-12 company-field">
                                <label for="form_rfc">RFC<span class="requiredSign">*</span></label>
                                {{ form_errors(form.rfc) }}
                                {{ form_widget(form.rfc, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-12 person-field">
                                <label for="form_gender">Gender<span class="requiredSign">*</span></label>
                                {{ form_errors(form.gender) }}
                                {{ form_widget(form.gender, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-12 person-field">
                                <label for="form_maritalStatus">Marital status<span class="requiredSign">*</span></label>
                                {{ form_errors(form.maritalStatus) }}
                                {{ form_widget(form.maritalStatus, {'attr':{'class':'form-control', 'placeholder': 'Marital Status'}} ) }}
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-12 person-field">
                                <label for="form_ocupationCode">Occupation<span class="requiredSign">*</span></label>
                                {{ form_errors(form.ocupationCode) }}
                                {{ form_widget(form.ocupationCode, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-12 person-field">
                                <label for="form_nationality">Nationality<span class="requiredSign">*</span></label>
                                {{ form_errors(form.nationality) }}
                                {{ form_widget(form.nationality, {'attr':{'class':'form-control'}} ) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 pt-3">
                                <label class="line-orange w-100">Address information</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 col-md-4 col-sm-12">
                                <label for="form_street">Street<span class="requiredSign">*</span></label>
                                {{ form_errors(form.address) }}
                                {{ form_widget(form.address, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-lg-2 col-md-2 col-sm-12">
                                <label for="form_buildingNumber">Building number<span class="requiredSign">*</span></label>
                                {{ form_errors(form.buildingNumber) }}
                                {{ form_widget(form.buildingNumber, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-lg-2 col-md-2 col-sm-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-4 col-md-4 col-sm-12">
                                <label for="form_neighborhood">Neighborhood<span class="requiredSign">*</span></label>
                                {{ form_errors(form.neighborhood) }}
                                {{ form_widget(form.neighborhood, {'attr':{'class':'form-control'}} ) }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-3 col-md-3 col-sm-12">
                                <label for="form_country">Country<span class="requiredSign">*</span></label>
                                {{ form_errors(form.country) }}
                                {{ form_widget(form.country, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-12 stateCityArea">
                                <label for="form_state">State<span class="requiredSign">*</span></label>
                                {{ form_errors(form.state) }}
                                {{ form_widget(form.state, {'attr':{'class': 'form-control'}} ) }}
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-12 d-none auxStateCityArea">
                                <label for="form_auxState">State<span class="requiredSign">*</span></label>
                                {{ form_errors(form.auxState) }}
                                {{ form_widget(form.auxState, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-12 stateCityArea">
                                <label for="form_city">City<span class="requiredSign">*</span></label>
                                {{ form_errors(form.city) }}
                                {{ form_widget(form.city, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-12 d-none auxStateCityArea">
                                <label for="form_auxCity">City<span class="requiredSign">*</span></label>
                                {{ form_errors(form.auxCity) }}
                                {{ form_widget(form.auxCity, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-12">
                                {{ form_label(form.postalCode, 'Postal code') }}
                                {{ form_errors(form.postalCode) }}
                                {{ form_widget(form.postalCode, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-12 d-none">
                                <label>How did you hear about us?</label>
                                {{ form_errors(form.aboutUsList) }}
                                {{ form_widget(form.aboutUsList, {'attr':{'class':'form-control'}}) }}
                                {{ form_widget(form.aboutUs) }}
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-12 d-none">
                                <label for="form_auxAboutUs">Specify your reference</label>
                                {{ form_errors(form.auxAboutUs) }}
                                {{ form_widget(form.auxAboutUs, {'attr':{'class':'form-control', 'disabled':'disabled'}}) }}
                            </div>
                        </div>
                    </section>
                    <h5>Passengers</h5>
                    <section>
                        <div class="row">
                            <div class="col-12">
                                <h3 id="headNumberPassenger">Passenger #1</h3>
                                <label class="line-orange w-100">Personal information</label>
                            </div>
                        </div>
                        <div class="row searchClientContainer d-none">
                            <div class="col-12">
                                <input type="text" id="search_form_filter" class="form-control mb-2" placeholder="Client name or certificate number">
                            </div>
                        </div>
                        <div class="row searchClientContainer d-none">
                            <div class="col-12" id="searchClientContainerResults"></div>
                        </div>
                        <div class="row personContainer">
                            <div class="col-md-3 col-sm-12">
                                <label for="form_personFirstName">Data origin<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personDataOrigin) }}
                                {{ form_widget(form.personDataOrigin, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-md-3 col-sm-12">
                                <label for="form_personFirstName">First name<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personFirstName) }}
                                {{ form_widget(form.personFirstName, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-md-3 col-sm-12">
                                <label for="form_personFatherLastName">Father last name<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personFatherLastName) }}
                                {{ form_widget(form.personFatherLastName, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-md-3 col-sm-12">
                                {{ form_label(form.personMotherLastname ,'Mother last name') }}
                                {{ form_errors(form.personMotherLastname) }}
                                {{ form_widget(form.personMotherLastname, {'attr':{'class':'form-control'}} ) }}
                            </div>
                        </div>
                        <div class="row personContainer">
                            <div class="col-md-2 col-sm-12">
                                <label for="form_personBirthday" id="label_personBirthday">Birthday<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personBirthday) }}
                                {{ form_widget(form.personBirthday, {'attr':{'class':'form-control','placeholder':'mm/dd/yyyy'}} ) }}
                            </div>
                            <div class="col-md-2 col-sm-12">
                                <label for="form_personTypePax">Age group<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personTypePax) }}
                                {{ form_widget(form.personTypePax, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-md-2 col-sm-12">
                                <label for="form_personGender">Gender<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personGender) }}
                                {{ form_widget(form.personGender, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-md-3 col-sm-12">
                                <label for="form_personNationality">Nationality<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personNationality) }}
                                {{ form_widget(form.personNationality, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-md-3 col-sm-12">
                                <label for="form_personPassport">Number passport<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personPassport) }}
                                {{ form_widget(form.personPassport, {'attr':{'class':'form-control', 'maxlength':'10'}} ) }}
                            </div>
                        </div>
                        <div class="row personContainer">
                            <div class="col-md-4 col-sm-12">
                                <label for="form_personParent">Relationship with the contractor<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personParent) }}
                                {{ form_widget(form.personParent, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-md-4 col-sm-12">
                                <label for="form_personOcupationCode">Occupation<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personOcupationCode) }}
                                {{ form_widget(form.personOcupationCode, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-md-4 col-sm-12">
                                <label for="form_personMaritalStatus">Marital status<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personMaritalStatus) }}
                                {{ form_widget(form.personMaritalStatus, {'attr':{'class':'form-control'}} ) }}
                            </div>
                        </div>
                        <div class="row personContainer">
                            <div class="col-12 pt-3">
                                <label class="line-orange w-100">
                                    Address information
                                    <a class="label_sameAddress" href="#">Click here to load the contractor address</a>
                                </label>
                            </div>
                        </div>
                        <div class="row personContainer">
                            <div class="col-md-3 col-sm-12">
                                <label for="form_personStreet">Street<span class="requiredSign">*</span></label>
                                {{ form_widget(form.personStreet, {'attr':{'class':'form-control'}} ) }}
                                {{ form_errors(form.personStreet) }}
                            </div>
                            <div class="col-md-2 col-sm-12">
                                <label for="form_personBuildingNumber">Building number<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personBuildingNumber) }}
                                {{ form_widget(form.personBuildingNumber, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-md-2 col-sm-12">
                                {{ form_label(form.personUnitNumber, 'Unit number (Optional)') }}
                                {{ form_errors(form.personUnitNumber) }}
                                {{ form_widget(form.personUnitNumber, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-md-3 col-sm-12">
                                <label for="form_personNeighborhood">Neighborhood<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personNeighborhood) }}
                                {{ form_widget(form.personNeighborhood, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-md-2 col-sm-12">
                                <label for="form_personPostalCode">Zip code<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personPostalCode) }}
                                {{ form_widget(form.personPostalCode, {'attr':{'class':'form-control'}} ) }}
                            </div>
                        </div>
                        <div class="row personContainer">
                            <div class="col-md-4 col-sm-12">
                                <label for="form_personCountry">Country<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personCountry) }}
                                {{ form_widget(form.personCountry, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-md-4 col-sm-12">
                                <label for="form_personState">State<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personState) }}
                                {{ form_widget(form.personState, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-md-4 col-sm-12 d-none personAuxStateCityArea">
                                <label for="form_personAuxState">State<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personAuxState) }}
                                {{ form_widget(form.personAuxState, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-md-4 col-sm-12">
                                <label for="form_personCity">City<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personCity) }}
                                {{ form_widget(form.personCity, {'attr':{'class':'form-control'}} ) }}
                            </div>
                            <div class="col-md-4 col-sm-12 d-none personAuxStateCityArea">
                                <label for="form_personAuxCity">City<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personAuxCity) }}
                                {{ form_widget(form.personAuxCity, {'attr':{'class':'form-control'}} ) }}
                            </div>      
                        </div>
                        <div class="row personContainer">
                            <div class="col-12">
                                <label class="line-orange w-100">Contact information</label>
                            </div>
                        </div>
                        <div class="row personContainer">
                            <div class="col-md-4 col-sm-12">
                                <label for="form_personPhone">Phone<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personPhone) }}
                                {{ form_widget(form.personPhone, {'attr':{'class':'form-control phone-format', 'placeholder': '(000)-000-00'}} ) }}
                            </div>
                            <div class="col-md-4 col-sm-12">
                                <label for="form_personEmail">Email<span class="requiredSign">*</span></label>
                                {{ form_errors(form.personEmail) }}
                                {{ form_widget(form.personEmail, {'attr':{'class':'form-control'}} ) }}
                            </div>
                        </div>
                        <div class="row personContainer">
                            <div class="col-12 text-center mt-3">
                                <button type="button" class="btn btn-warning" id="form_previosPassenger">
                                    &#60;&#60; <b>Previous passenger</b>
                                </button>
                                <button type="button" class="btn btn-warning" id="form_nextPassenger">
                                    <b>Next passenger</b> &#62;&#62;
                                </button>
                            </div>
                        </div>
                    </section>
                    <h5>Payment</h5>
                    <section>
                        <div class="row">
                            <div class="col-xl-4">
                                <table class="table table-striped travelTable mb-2">
                                    <tr>
                                        <td colspan="2">
                                            <img src="{{ asset('images/companies/mapfre.png') }}" class="img-fluid m-3" width="300">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <label id="policy-coverage" style="color:#084A7A;"></label>
                                        </td>        
                                    </tr>
                                    <tr>
                                        <td class="label">Days of travel</td>
                                        <td><span id="daysOfTravel"></span></td>
                                    </tr>
                                    <tr>
                                        <td class="label">Adult passengers</td>
                                        <td><span id="adultsPaxSummary"></span></td>
                                    </tr>
                                    <tr>
                                        <td class="label">Senior passengers</td>
                                        <td><span id="siniorPaxSummary"></span></td>
                                    </tr>
                                    <tr>
                                        <td class="label">Departure date</td>
                                        <td><span id="departureDateSummary"></span></td>
                                    </tr>
                                    <tr>
                                        <td class="label">Arrival date</td>
                                        <td><span id="arrivalDateSummary"></span></td>
                                    </tr>
                                    <tr>
                                        <td class="label">Departure country</td>
                                        <td><span id="departureCountrySummary"></span></td>
                                    </tr>
                                    <tr>
                                        <td class="label">Arrival country</td>
                                        <td><span id="arrivalCountrySummary"></span></td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            Total premium<br>
                                            <span id="totalPremiumSummaryMXN"></span> MXN
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-xl-8">
                                <div class="row">
                                    <div class="col-12">
                                        <h3>Payment information</h3>
                                        <div class="line-orange"></div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-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-xl-6 col-md-6 col-sm-12">
                                        {{ form_label(form.bankEntity, 'Bank entity') }}
                                        {{ form_errors(form.bankEntity) }}
                                        {{ form_widget(form.bankEntity, {'attr':{'class':'form-control'}} ) }}
                                    </div>
                                    <div class="col-xl-6 col-md-6 col-sm-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-xl-8 col-md-8 col-sm-12">
                                        {{ form_label(form.creditCardNumber, 'Credit card number') }}
                                        {{ form_errors(form.creditCardNumber) }}
                                        {{ form_widget(form.creditCardNumber, {'attr':{'class':'form-control'}} ) }}
                                    </div>
                                    <div class="col-xl-4 col-md-4 col-sm-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-xl-6 col-md-6 col-sm-12">
                                        {{ form_label(form.expirationDateMonth, 'Expiration date') }}
                                        {{ form_errors(form.expirationDateMonth) }}
                                        {{ form_widget(form.expirationDateMonth, {'attr':{'class':'form-control'}} ) }}
                                    </div>
                                    <div class="col-xl-6 col-md-6 col-sm-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-12">
                                        <div role="alert" class="alert alert-info labelReviewChanges mt-2">
                                            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>
                                <div class="row">
                                    <div class="col-12 text-center" style="z-index: 10;">
                                        <button id="pay-policy" type="button" class="btn btn-primary mb-2">Pay Policy</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('images/load75x75.gif') }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                <input type="hidden" name="form[company]" id="form_company" value="Mapfre">
                <input type="hidden" name="form[product]" value="Travel">
                <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" id="arrWithQuote" value={{arrWithQuote}}>
                <input type="hidden" id="form_id_client" value="{{id_client}}"> 
                {{ form_rest(form) }}
                {{ form_end(form) }}
            </div>
        </div>
    </div>
</main>
{# modal para la verificacion de los datos del cliente #}
{{ include('mx/modals/validate-client-info-modal.html.twig') }}
{% endblock %}
{% block javascripts %}
    {% if userData.role !='ROLE_DISTRIBUTOR'  %}<script src="{{ asset('js/main.js') }}" defer></script> {% endif %}
    <!--Steps-->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" defer></script>
    <script src="{{asset('js/jquery.steps.min.js')}}" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!--Validate-->
    <script  type="text/javascript" src="{{asset('js/libraries/jquery-validate.js')}}" defer></script>
    <!--Date picker-->
    <script src="{{asset('js/complements/validInformationService.js')}}"></script>
    <!--Para los campos-->
    <script src="{{asset('js/libraries/jquery-mask.js')}}" defer></script>
    <script src="{{asset('js/complements/about-us-list.js')}}" defer></script>
    <!--Lógica del producto-->
    <script src="{{ asset('js/products/travel_covid_ws.js') }}?v={{ "now"|date("dmYHis") }}" defer></script>
    <!--Toast para las alertas-->
{% endblock %}