{% set layout = userData.role != 'ROLE_DISTRIBUTOR' ? 'base.html.twig' : 'layout-distributors.html.twig' %}
{% extends layout %}
{% block title %}Resident Auto WS - Ana Seguros - NIS{% endblock %}
{% block stylesheets %}
	{{encore_entry_link_tags('stepyCSS')}}
	{{encore_entry_link_tags('residentAutoCSS')}}
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

	<style type="text/css">
	{% if is_granted("ROLE_USER_US") %}
		main{padding-left: 0px !important;}
	{% endif %}
		#customerInformation, #addressInformation, #vehicleInformation{
			padding-left: 10px;
			background-color: #f9f9f9;
		}
		.card-panel{
			padding: 10px !important;
		}#exportQuoteOptionsButton{
			margin-bottom:10px;
			margin-top: 7px;
		}.errorField{
			background: rgb(251, 227, 228) !important;
			border: 1px solid #fbc2c4 !important;
			color: #8a1f11;
		}
	</style>
{% endblock %}
{% block body %}
	{% if userData.role == "ROLE_USER" or userData.role == "ROLE_ADMIN" %}
		{{ include("mx/nav_menu.twig", {option:''}) }}
		{% set returnButton = "" %}
	{% elseif userData.role == "ROLE_DISTRIBUTOR" %}
			{% set class = "col-lg-12" %}
			{{ include("distributors/nav_menu.twig",{option:''}) }}
			{% set returnButton = "<div class='right-align'><a href='/distributors/customer-profile/" ~ id_client ~ "' class='btn btn-orange'><i class='fa-solid fa-arrow-left'></i></a></div>" %}
	{% else %}
		{% set class = "col-lg-8 offset-lg-2" %}
		{% set returnButton = "<div class='right-align'><a href='/' class='btn blue'><i class='fa-solid fa-arrow-left'></i>Back Homepage</a></div>" %}
	{% endif %}
	<main> 
		<div class="row justify-content-center">
			<div  class="col-10 mt-3">
				<div class="card z-depth-1">
					<div class="container-form row">
					{{ returnButton|raw }}
						<h4 class="blue-text text-center">Resident Auto</h4>
						<table class="responsive-table">
						    <thead>
						        <tr>
						            <th>Insured name</th>
						            <th>Owner type</th>
						            <th>Certificate number</th>
						            <th>Current coverage</th>
						            <th>Policy price</th>
						        </tr>
						    </thead>
						    <tbody>
						        <tr>
						            <td style="font-weight: normal !important;">
						                {% if ownerType == 'Company' %}
						                	{{ company }}
						                {% else %}
						                	{{ firstName }} {{ lastName }}
							                {% if secondLastName != "-" %}
							                	{{ secondLastName }}
							                {% endif %}
						                {% endif %}
						            </td>
						            <td style="font-weight: normal !important;">
						                {{ ownerType }}
						            </td>
						            <td style="font-weight: normal !important;">
						                {% if certificate_number != 'start' %}
						                	{{ certificate_number }}
						                {% else %}
						                	New
						                {% endif %}
						            </td>
						            <td style="font-weight: normal !important;" id="currentCoverage" class="blue-text">-</td>
						            <td style="font-weight: normal !important;" id="quote-price">-</td>
						        </tr>
						    </tbody>
						</table>
						
						<div class="clearfix"></div><br>
						<form id="resident-auto-form" name="residentAutoForm"  >								
								<fieldset title="STEP 1" class="row">
									<legend class="center-align">Quoted</legend>
									<div class="col-lg-3 col-md-4 col-sm-12 label-vehicleType">								
										{{ form_label(form.vehicleType) }}
										{{ form_widget(form.vehicleType) }}
									</div>
									<div class="col-lg-2 col-md-3 col-sm-12 label-yearModel">
										{{ form_label(form.modelYear) }}
										{{ form_widget(form.modelYear) }}								
									</div>
									<div class="col-lg-4 col-md-5 col-sm-12 label-brand">
										{{ form_label(form.brand) }}
										{{ form_widget(form.brand) }}
									</div>									
									<div class="col-lg-3 col-md-4 col-sm-12 label-subBrand">
										{{ form_label(form.subBrand) }}
										{{ form_widget(form.subBrand) }}
									</div>
									<div class="col-lg-12 col-md-8 col-sm-12 label-version">
										{{ form_label(form.version) }}
										{{ form_widget(form.version) }}
									</div>
									<div class="col-md-6 col-sm-12 label-state">
										{{ form_label(form.state) }}
										{{ form_widget(form.state) }}
									</div>
									<div class="col-md-6 col-sm-12 label-city">
										{{ form_label(form.city) }}
										{{ form_widget(form.city) }}
									</div>										
		                            <div class="loadingQuote container d-none">
		                            	<center>
											<img class="activator" src="{{asset('/images/load75x75.gif')}}">
		                            	</center>                            	
		                            </div>
									<div id="prices" class="col-12  d-none row">										
		                                <div class="col-md-4 col-sm-12">
		                                    <div class="package">
		                                    	<div class="card">
												    <div class="card-image waves-effect waves-block waves-light">
												    	<a class="modal-trigger" href="#modalFullCoverage" data-bs-toggle="modal" data-target="#modalFullCoverage">
												       <img class="activator img-fluid" src="{{ asset('/images/cards/full-coverage.jpg') }}" alt="Full Coverage"></a>
												    </div>
												    <div class="card-content">
												        <span class="card-title activator grey-text text-darken-4">Full Coverage{#<i class="material-icons right">more_vert</i>#}</span>
												         <span id="fullCoverage" class="total-premium">$ 0.00</span><br> <b>MXN for 1 Year</b><br> <button type="button" id="fullCoverageBtn" class="btn btn-teal js-plan-select">Select</button><br> <a class="modal-trigger" href="#modalFullCoverage" data-bs-toggle="modal" data-target="#modalFullCoverage">View Coverages</a>
												    </div>
												    <div class="card-content">
												    	<span id="fullCoverageError"></span>
												    </div>
												</div>
		                                    </div>
		                                </div>
		                                <div class="col-md-4 col-sm-12">
		                                    <div class="package">
		                                    	<div class="card">
												    <div class="card-image waves-effect waves-block waves-light">
												    	<a class="modal-trigger" href="#modalLimitedCoverage" data-bs-toggle="modal" data-target="#modalLimitedCoverage">
												        <img class="activator img-fluid" src="{{ asset('/images/cards/limited.jpg') }}" alt="Limited Coverage"></a>
												    </div>
												    <div class="card-content">
												        <span class="card-title activator grey-text text-darken-4">Limited Coverage{#<i class="material-icons right">more_vert</i>#}</span>
												        <span id="limitedCoverage" class="total-premium">$ 0.00</span><br> <b>MXN for 1 Year</b><br> <button type="button" id="limitedCoverage" class="btn btn-teal js-plan-select">Select</button><br> <a class="modal-trigger" href="#modalLimitedCoverage" data-bs-toggle="modal" data-target="#modalLimitedCoverage">View Coverages</a>
												    </div>
												    <div class="card-content">
												    	<span id="limitedCoverageError"></span>
												    </div>
												    {#<div class="card-reveal">
												        <span class="card-title grey-text text-darken-4"><h3 class="text-info"></h3><i class="material-icons right">close</i></span>
												        <p>Here is some more information about this product that is only revealed once clicked on.</p>
												    </div>#}
												</div>
		                                    </div>
		                                </div>
		                                <div class="col-md-4 col-sm-12">
		                                    <div class="package">
		                                    	<div class="card">
												    <div class="card-image waves-effect waves-block waves-light">
												    	<a class="modal-trigger" href="#modalLiabilityCoverage" data-bs-toggle="modal" data-target="#modalLiabilityCoverage">
												        <img class="activator img-fluid" src="{{ asset('/images/cards/liability.jpg') }}" alt="Liability Coverage"></a>
												    </div>
												    <div class="card-content">
												        <span class="card-title activator grey-text text-darken-4">Liability Coverage{#<i class="material-icons right">more_vert</i>#}</span>
												         <span id="liabilityCoverage" class="total-premium">$ 0.00</span><br> <b>MXN for 1 Year</b><br> <button type="button" id="liabilityCoverage" class="btn btn-teal js-plan-select">Select</button><br> <a class="modal-trigger" href="#modalLiabilityCoverage" data-bs-toggle="modal" data-target="#modalLiabilityCoverage">View Coverages</a>
												    </div>
												    <div class="card-content">
												    	<span id="liabilityCoverageError"></span>
												    </div>
												    {#<div class="card-reveal">
												        <span class="card-title grey-text text-darken-4"><h3 class="text-info"></h3><i class="material-icons right">close</i></span>
												        <p>Here is some more information about this product that is only revealed once clicked on.</p>
												    </div>#}
												</div>
											</div>
		                                </div>
		                                <div class="clearfix"></div>
		                                <br>
		                                <div class="col-6 white-text">                                	
		                                	<div class="card-panel teal p-2">              
		                                		<img src="{{asset('/images/visa_mcard.jpg')}}" /><br>
		                                		<strong>BEFORE ISSUE THE POLICY</strong><br>
										        Please advise your credit card company the transaction for this purchase will be through
										        a Mexican bank. Otherwise your bank may put a hold on your credit card while charging 
										        and services in Mexico.
									        </div>
		                                </div>
		                                <div class="col-lg-3 col-md-2 col-sm-12">
											<button type="button" class="btn btn-teal" data-bs-toggle="modal" data-bs-target="#modalExportQuoteOptions"><i class="fa-solid fa-file-export"></i>Export quote</button>
			    		    			</div>
		                            </div>
								</fieldset>
								<fieldset title="STEP 2" class="row">
									<legend>Insured Information</legend>
									<h6 class="blue-text">Address Information</h6>																										
		                        	<div class="col-12 col-md-6 label-postalCode">
		                        		{{ form_label(form.postalCode) }} 
		                                {{ form_errors(form.postalCode) }} 
		                                {{ form_widget(form.postalCode) }}
		                        	</div>
		                        	<div class="col-12 col-md-6 label-municipality">
		                        		<label class="required">Neighborhood</label> 
		                                {{ form_errors(form.municipality) }} 
		                                {{ form_widget(form.municipality) }}
		                        	</div>
		                        	<div class="col-12 col-md-6">
		                        		{{ form_label(form.address) }} 
		                                {{ form_errors(form.address) }} 
		                                {{ form_widget(form.address) }}
		                        	</div>
		                        	<div class="col-12 col-md-6">
		                        		{{ form_label(form.buildingNumber) }} 
		                                {{ form_errors(form.buildingNumber) }} 
		                                {{ form_widget(form.buildingNumber) }}
		                        	</div>
		                        	<div class="col-12 col-md-6">
		                        		{{ form_label(form.unitNumber) }} 
		                                {{ form_errors(form.unitNumber) }} 
		                                {{ form_widget(form.unitNumber) }}
		                        	</div>	
									<div class="col-12 col-md-6 d-none">
										<label>How did you hear about us?</label>
										{{form_widget(form.aboutUsList)}}
										{{ form_errors(form.aboutUsList) }}
										{{ form_widget(form.aboutUs) }}
									</div>
									<div class="col-12 col-md-6 d-none">
										<label for="form_auxAboutUs">Specify your reference</label>
										{{form_widget(form.auxAboutUs, {'attr': {'disabled':'disabled'}})}}
										{{ form_errors(form.auxAboutUs) }}
									</div>	                    	
									<div class="clearfix"></div>
									<div id="personContainer" class="row">
										<h6 class="blue-text">Person Information</h6>							
										<div class="col-12 col-md-6">
											{{ form_label(form.nationality) }} 
		                                    {{ form_errors(form.nationality) }} 
		                                    {{ form_widget(form.nationality) }}
										</div>
										<div class="col-12 col-md-6">
											{{ form_label(form.gender) }} 
		                                    {{ form_errors(form.gender) }} 
		                                    {{ form_widget(form.gender) }}
										</div>
										<div class="col-12 col-md-6">
											{{ form_label(form.curp, 'CURP') }} 
		                                    {{ form_errors(form.curp) }} 
		                                    {{ form_widget(form.curp, {'attr':{'disabled':'true'}} ) }}
										</div>
										<div class="col-12 col-md-6">
											{{ form_label(form.rfc, 'R.F.C.') }} 
		                                    {{ form_errors(form.rfc) }} 
		                                    {{ form_widget(form.rfc, {'attr':{'disabled': 'true'}} ) }}
										</div>
										<div class="col-12 col-md-6">
											{{ form_label(form.identificationType, 'Identification Type') }} 
		                                    {{ form_errors(form.identificationType) }} 
		                                    {{ form_widget(form.identificationType) }}
										</div>
										<div class="col-12 col-md-6">
											{{ form_label(form.identificationNumber, 'Identification Number') }} 
		                                    {{ form_errors(form.identificationNumber) }} 
		                                    {{ form_widget(form.identificationNumber) }}		                                    
										</div>
										<div class="col-12 col-md-6">
											{{ form_label(form.occupation) }} 
		                                    {{ form_errors(form.occupation) }} 
		                                    {{ form_widget(form.occupation) }}
										</div>
									</div>
									<div id="companyContainer" class="row">
										<h6 class="blue-text">Company Information</h6>	
										<div class="col-12 col-md-6"> 
											{{ form_label(form.rfcCompany, 'R.F.C.') }} 
											{{ form_errors(form.rfcCompany) }}
											{{ form_widget(form.rfcCompany) }}
										</div> 
										<div class="col-12 col-md-6">
											{{ form_label(form.representativeName, 'Legal representative name') }} 
		                                    {{ form_errors(form.representativeName) }} 
		                                    {{ form_widget(form.representativeName) }}
										</div>
										<div class="col-12 col-md-6">
											{{ form_label(form.nationalityRepresentative, 'Representative nationality') }} 
		                                    {{ form_errors(form.nationalityRepresentative) }} 
		                                    {{ form_widget(form.nationalityRepresentative) }}
										</div>
										<div class=" col-12 col-md-6">
											{{ form_label(form.turningCompany, 'Type of company') }} 
		                            	{{ form_errors(form.turningCompany) }} 
		                            	{{ form_widget(form.turningCompany) }}
										</div>	
									</div>
									<div class="clearfix"></div> 
									<div class="col-12 col-md-3" id="content_second_driver">
										{{ form_label(form.secondDriver, 'Add a second driver (optional)') }} 
										{{ form_errors(form.secondDriver) }} 
										{{ form_widget(form.secondDriver) }}
									</div>
									<div class="clearfix"></div> 
									<h6 class="blue-text">Vehicle Information</h6>
									<div class="col-12 col-md-6">
										<label>Engine Number*</label> 
	                                	{{ form_widget(form.engine) }}
									</div>
									<div class="col-12 col-md-6">
										<label>Serial Number / VIN*</label> 
	                                	{{ form_widget(form.serialNumber, {'attr':{'maxlength' : "17"}} ) }}
									</div>
									<div class="col-12 col-md-6">
										{{ form_label(form.plates) }} 
		                                {{ form_errors(form.plates) }} 
		                                {{ form_widget(form.plates) }}
									</div>
									<div class="clearfix"></div>
									<h6 class="blue-text">Term</h6>
									<div class="col-12 col-md-6">
										{{ form_label(form.startDate) }} 
										{{ form_widget(form.startDate, {'attr':{'placeholder':'mm/dd/YYYY', 'class':'productsDatePicker'}}) }}	                                	
									</div>
									<div class="col-12 col-md-6">
										{{ form_label(form.endDate) }} 
	                                	{{ form_widget(form.endDate) }}
									</div>
									<div class="clearfix"></div> 
								</fieldset>
								<fieldset title="Step 3">
									<legend>Review Information</legend>									
									<div class="reviewInformation">
										<ul class="collapsible popout" data-collapsible="accordion">
											<li>
												<div class="collapsible-header"><i class="fa fa-address-card left" aria-hidden="true"></i><span>Customer Information</span></div>
												<div class="collapsible-body">
													<div id="customerInformation"></div>	
													<div id="review_second_driver"></div><br>
												</div>
											</li>
											<li>
												<div class="collapsible-header"><i class="fa fa-map-marker left" aria-hidden="true"></i><span>Address Information</span></div>
												<div class="collapsible-body">
													<div id="addressInformation"></div><br>
												</div>
											</li>
											<li>
												<div class="collapsible-header"><i class="fa fa-car left" aria-hidden="true"></i><span>Vehicle Information</span></div>
												<div class="collapsible-body">
													<div id="vehicleInformation"></div>
												</div>
											</li>
										</ul>																
									</div>
									<div class="clearfix"></div>		                            
								</fieldset>
								<fieldset title="Step 4" class="row">
									<legend>Purchase</legend>
									<div class="col-lg-3">
		                                <div id="policy-summary" class="text-center">
		                                    <div> <img src="{{ asset('/images/companies/ana-seguros-logo.jpg') }}"></div> <br> 
		                                    <label id="policy-coverage" style="color:#084A7A;"></label><br> 
		                                    <label class="purchase-price"><span id="policy-price">00.00</span> MXN/Year</label><br> 
		                                    <span id="car-description" class="description"></span>
		                                </div>
		                            </div>
		                            <div class="col-lg-9 row">
		                                <h4>Credit Card Information</h4>
		                                <div class="form-group col-12 col-md-5"> 
		                                	<label>Card Holder Name</label> 
		                                	<input type="text" name="form[cardFullName]" id="cardFullName" required="required">
		                                </div>
		                                <div class="form-group col-12 col-md-4"> 
		                                	<label>Credit Card Number</label> 
		                                	<input type="text" name="form[cardNumber]" id="cardNumber" maxlength="16" required="required">
		                                </div>
		                                <div class="form-group col-12 col-md-3"> 
		                                	<label>Security Code:</label> 
		                                	<input type="text" id="cardCcv" name="form[cardCcv]" required="required" maxlength="4">
		                                </div>
		                                <div class="clearfix"></div>
		                                <div class="form-group col-12 row"> 
		                                	<label>Expiration Date</label>
		                                    <div class="clearfix">
		                                    </div>
		                                    <div class="form-group col-6"> 
		                                    	<select id="cardExpirationMonth" name="form[cardExpirationMonth]" required="required">
		                                            <option>Month</option>
		                                            <option value="01">Jan</option>
		                                            <option value="02">Feb</option>
		                                            <option value="03">Mar</option>
		                                            <option value="04">Apr</option>
		                                            <option value="05">May</option>
		                                            <option value="06">Jun</option>
		                                            <option value="07">Jul</option>
		                                            <option value="08">Aug</option>
		                                            <option value="09">Sep</option>
		                                            <option value="10">Oct</option>
		                                            <option value="11">Nov</option>
		                                            <option value="12">Dec</option>
		                                        </select></div>
		                                    <div class="form-group col-6"> 
		                                    	<select id="cardExpirationYear" name="form[cardExpirationYear]" required="required">
		                                            <option>Year</option>
		                                            <option value="24">2024</option>
		                                            <option value="25">2025</option>
		                                            <option value="26">2026</option>
		                                            <option value="27">2027</option>
		                                            <option value="28">2028</option>
		                                            <option value="29">2029</option>
		                                            <option value="30">2030</option>
		                                            <option value="31">2031</option>
		                                            <option value="32">2032</option>
		                                            <option value="33">2033</option>
		                                            <option value="34">2034</option>
		                                            <option value="35">2035</option>
		                                            <option value="36">2036</option>
		                                            <option value="37">2037</option>
		                                            <option value="38">2038</option>
		                                        </select>
		                                    </div>
		                                </div>
		                                <div class="clearfix"></div><br><br>
		                                <center>
		                                	<button id="pay-policy" type="button" class="btn waves-effect waves-light orange">Pay Policy</button>
		                                	<div class="loadingIssue d-none">
			                                	<img class="activator" src="{{asset('/images/load75x75.gif')}}">
				                            </div>
		                                </center>		                                
		                            </div>
									<div class="clearfix"></div>
								</fieldset>
								<input type="hidden" name="form[product]" value="Resident Auto" id="form_product">
								<input type="hidden" id="form_policyNumber" name="form[policyNumber]" value="{{ policyNumber }}">
								<input type="hidden" id="form_policyLink" name="form[policyLink]" value="">								
								<input type="hidden" name="form[whitOutCharge]" id="form_whitOutCharge" value="{{ whitOutCharge }}">								
								<input type="hidden" name="form[salePerson]" id="form_salePerson" value="{{ salePerson }}">
				    			{{ form_rest(form) }}
								<div class="clearfix"></div>							
						</form>
					</div>
				</div>	
			</div>
		</div>
		<section><div id="container-text" class="d-none col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-sm-12 col-xs-12"><h3>Mexican License Plates</h3><p> Along with <b>ANA SEGUROS</b>, a leading company in Mexico vehicle insurance and specializing in Auto &amp; the Expats, we have designed the ANA Novamar <strong>Mx Auto License Plates Policy</strong>, a unique <strong>Auto Policy for Expats</strong> with <strong>Mx License vehicles</strong>.</p><h5>Full Coverage offers more protection</h5><ul><li>Material Damage</li><li>Comprehensive</li><li>Total Loss</li><li>Robbery</li><li>Third Party Liability</li><li>Medical per passenger</li><li>Road side assistance</li><li>Legal aid</li></ul><h5>Additional Benefits</h5><p> Here are the additional benefits of this great Policy that has Premiums up to 35% lower than the rest of the market.</p><ul><li>All processing will be handled by the ANA Seguros bilingual staff specialized in the expat community in Mexico.</li><li>Locksmith Service if you lose your keys or they are left inside of the vehicle.</li><li>Damage to vehicle due to overheating</li><li>Road Side assistance including gasoline help</li><li>Rental Car expenses for material damage or total loss (additional cost)</li><li>In case of a total loss you will receive $15,000,00 pesos additional of the car value</li><li>Drivers under 18 years are covered for Liability</li><li>Passengers Liability.</li><li>Medical expenses for the insured when traveling in other vehicles as in the car or hurt as a pedestrian</li><li>Liability extension including Medical for passengers when driving in other vehicles</li><li>Liability extension for your Motorcycle as well.</li><li>Liability for trailers, caravans and for objects transported in the vehicle; caused by the insured.</li><li>Tire coverage</li><li>Discounts in premium and deductible when the vehicle has security devices installed</li><li>Towing services even when the policy has only the Liability coverage</li><li>USA and Canada liability coverage</li><li>English speaking staff to answer your calls</li></ul><h5>ANA Claims Services</h5><ul><li>Adjuster assistance in English</li><li>All claims handled by the Tourist Auto Department of ANA to ensure that an English spoken person is in charge of the claim.</li><li>Down payment of 50% of the claim in 72hrs.</li></ul><p>Use the field above to get a free online quote for vehicle insurance in Mexico today.</p><div class="text-center"> <img src="{{ asset('/images/companies/ana-seguros-logo.jpg') }}" alt="Ana Seguros"></div> <br><br><p> If you have any questions, please <a href=""><b>contact us</b></a></p></div></div></div></div></div> <br> <br> <br>
		</section>
	</main>
	<div id="modalExportQuoteOptions" class="modal fade" tabindex="-1" aria-labelledby="modalExportQuoteOptionslabel">
		<div class="modal-dialog modal-dialog-centered modal-lg">
			<div class="modal-content" style="padding:24px;">
				<h4>Select plans to send or download</h4>	
				<form id="exportQuoteForm">
					<div class="row">
						<div class="col-12 col-md-4">
							<div class="card-panel row align-items-center">
								<input type="checkbox" class="filled-in default-input col-2" id="fullCoverageOptionQuote" name="form[fullCoverageOptionQuote]">
								<label class="col-10" for="fullCoverageOptionQuote">Full Coverage</label>
							</div>
						</div>						
						<div class="col-12 col-md-4">
							<div class="card-panel row">
								<input type="checkbox" class="filled-in default-input col-2" id="limitedCoverageOptionQuote" name="form[limitedCoverageOptionQuote]">
								<label class="col-10" for="limitedCoverageOptionQuote">Limited Coverage</label>
							</div>
						</div>						
						<div class="col-12 col-md-4">
						<div class="card-panel row">
								<input type="checkbox" class="filled-in default-input col-2" id="liabilityCoverageOptionQuote" name="form[liabilityCoverageOptionQuote]">
								<label class="col-10" for="liabilityCoverageOptionQuote">Liability Coverage</label>
							</div>
						</div>						
						<div class="clearfix"></div>
						<div class="col-12">
							<div class="card-panel">
								<label>Client email</label><br>
								{{client_email}}
							</div>
							<a class="btn btn-teal" title="Send to client" id="sendQuoteButton">
								<i class="fa-solid fa-envelope"></i>
							</a>    		    					
							<a class="btn btn-teal" title="Download PDF" id="downloadQuoteButton">
								<i class="fa-solid fa-file-arrow-down"></i>
							</a>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div id="modalRequestQuoteForm" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content" style="padding:24px;">			
				<p>
					<strong>Attention</strong><br>
					Models <span id="yearRangeOut"></span> cannot be quoted here<br>
					Do you want to request this quote to the executive in charge?
				</p>
				<label class="font-weight-bold" for="form_specialQuoteRequestInvoiceValue">Please enter the Invoice value of your vehicle</label>
				<br>
				<input type="text" name="form[specialQuoteRequestInvoiceValue]" id="form_specialQuoteRequestInvoiceValue" class="form-control" placeholder="$ MXN">
				<button class="btn btn-teal" id="specialQuoteRequestButton">Request special quote</button>
			</div>
		</div>
	</div>	
	{{ include('mx/modals/resident-auto.twig') }}
	{# modal para la verificacion de los datos del cliente #}
	{{ include('mx/modals/validate-client-info-modal.html.twig') }}
	 {{ include('mx/modals/incorrect-renewal-alert-modal.twig') }} 
			{# {{ include('mx/modals/purchase-terms-conditions.html.twig') }}  #}
{% endblock %}
{% block javascripts %}		
   {% if userData.role !='ROLE_DISTRIBUTOR'  %}<script src="{{ asset('js/main.js') }}" defer></script> {% endif %}
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" defer></script>
	<script src="{{asset('js/libraries/jquery-validate.js')}}" defer></script>
|	<script src="{{asset('js/libraries/jquery-mask.js') }}" defer></script>
	<script src="{{asset('js/complements/jquery.stepy.min.js')}}" defer></script>	
	<script src="{{asset('js/complements/validInformationService.js')}}" defer></script>
	<script src="{{asset('js/complements/about-us-list.js')}}" defer></script>
	<script src="{{asset('js/products/resident-auto.js')}}" defer></script>		

	<script type="text/javascript">
		var email = "{{client_email}}"
		var aux = {{arrayToObjectJs|raw}} ?? {};
		//seteo de variable del producto para la funcion de actualizar la informacion del cliente
		product = 'ra ana';
		validServOwnerType = $("#form_ownerType").val() == '1' ? 'Person' : 'Company';
	</script>
{% endblock %}