{% set layout = userData.role != 'ROLE_DISTRIBUTOR' ? 'base.html.twig' : 'layout-distributors.html.twig' %}
{% extends layout %}
{% block title %}Resident Auto WS - Qualitas - NIS{% endblock %}
{% block stylesheets %} 
	{{ parent() }}
    {{encore_entry_link_tags('mainCSS')}}
	{{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 %}
		h5.summary{
			background: #336699;
	    	color: #fff;
	    	padding: 5px;
	    	margin-bottom: 0px;
		}
		#customerInformation, #addressInformation, #vehicleInformation{
			padding-left: 10px;
			background-color: #f9f9f9;
		}
		table td{
			text-align: left !important;
		}
		tbody td{
			font-weight: normal !important;
		}.history > thead > tr > td:last-child{
			border-right: 0px solid #ccc;
		}.history > thead > tr > td{
			background-color: #f7f7f7;
			border-right: 1px solid #ccc;
			font-size: 14px;
			text-align: center !important;
		}.history > tbody > tr > td{
			text-align: center !important;
			font-size: 14px;
		}.history > tbody{
			border-bottom: 1px solid #ccc;
		}
		.labelByOwnerType{
			font-size: .8rem;
    		color: #9e9e9e;
		}
		.inspectionCarImage{
            max-height: 70px;
        }.buttonUploadImage{
        	width: 100%;
            font-size: 13px;
            font-weight: bold;
            color: #000;
            background: #f7f7f7;
            padding: 10px;
            border: 1px solid #ccc;
            cursor: pointer;
        }.buttonUploadImage.uploaded{
            color: #289728;
            border: 1px solid #31bf31;
        }.buttonUploadImage.error {
            color: #d11919;
            border: 1px solid #ff4d4d;
        }#uploadResponse{
            padding: 2px;
            color: #d11919;
            font-weight: bold;
        }.validFormat{
            font-size: 12px;
            font-weight: bold;
        }.previewPicture{
            width: 100%;
            background: #f3f2f2;
            border: 1px solid #dddddd;
            border-bottom: 2px solid #ccc;
            margin-top: 3px;
            padding-top: 5px;
            padding-bottom: 5px;
        }#fullLoading{
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 9999;
            top: 0;
            background-color: rgba(0,0,0,0.4);
            padding-top: 49vh;
            text-align: center;
        }#fullLoading > img{
            background-color: #f7f7f7;
            padding: 10px;
            border-radius: 50px;
            box-shadow: 1px 1px 100px 1px;
        }#btnYesContinue{
        	background-color: #d95b5b;
        	margin-top: 10px;
        }.bordeTop{
        	border-top:1px solid #ccc;
        	padding-top:20px !important;
        }.successDiscount{
        	padding: 8px;
        	font-size: 15px;
        	margin-bottom: 5px;
        	color: #3e3d3d;
			background-color: #c7e5bd;
			border: 1px solid #a4dfa6;
        }.warningDiscount{
        	padding: 8px;
		    font-size: 15px;
		    margin-bottom: 5px;
		    color: #856404;
		    background-color: #fff3cd;
		    border: 1px solid #ffeeba;
        }.label-coverage{
        	color: #000;
        	font-size: 14px;
        	font-weight: bold;
        }.label-coverage > span{
		    font-size: 14px;
		    font-weight: normal;
		    color: #424242;
        }td > input{
        	margin-bottom: 0px !important;
        }.totalTr{
        	background-color: #fff !important;        
    	}.totalTr > .totalTd{
    		border-bottom: 1px solid #ccc;
    	}.divider{
    		width: 100%;
    		background-color: #f2f2f2;
    		margin-bottom: 12px;
    		padding: 10px;
    		height: auto;
    		font-weight: bold;
    		border-bottom: 1px solid #369;
    	}.presetPack{
    		width: 100%;
    		background-color: #f7f7f7;
    		border: 1px solid #f0f0f0;
    		cursor: pointer;
    		padding: 5px;
    		margin-bottom: 12px;    	
    		text-align: center;
    		font-size: 16px;
			color: #000;
    	}.presetPack:hover{
    		border: 1px solid #ccc;
		}.presetPack.active{
			border: 2px solid #336699;
		    background: #336699;
		    color: #ffffff !important;
		    font-weight: bold;
		    font-size: 18px;
		    border-bottom: 3px solid #10a923;
    	}.virtualCheck{
    		background: #fff;
    		cursor: pointer;
    		text-align: center;
    		border-bottom: 0px;
    	}.virtualCheck.active{
    		background: #58b548 !important;
    		color:#fff;
    		font-weight: bold;
    	}.virtualCheck:hover{
    		background: #e9e9e9 !important;
    	}.virtualCheck.active:hover{
    		background: #58b548 !important;
    	}#btn_section_special_coverages{
    		cursor: pointer;    		
    	}#btn_section_special_coverages:hover{
    		background-color: #e9e9e9;
    	}.checkImg{
    		text-align: center;
    		width: 30px;
    	}.customLabelTotals{
    		text-align: center;
    	}.customTotalPremiumLabel{
    		font-size: 20px;
    		font-weight: bold !important;
    	}.customTotalPremiumData{
    		font-size: 20px;
    	}#customQuoteSetupSumAssuredError{
    		color:#F44336;
    	}.customQuoteError{
    		text-align: center !important;
			background: #f9e4e4;
			border: 1px solid #e93d3d;
			color: #bb0000;
			font-weight: bold !important;
    	}.textRight{
    		text-align: right !important;
    	}#custom-policy-summary #labels b{
    		font-size: 18px;
    	}.customEndPrice{
    		padding-left: 20px;
    	}#quoteMessageContainer{
    		color: #856404;
			background-color: #fff3cd;
			border-color: #ffeeba;
			padding: 10px;
			margin-bottom: 5px;
    	}.fakeField{
    		background-color: rgba(255,255,255,0.9);
			width: 100%;
			padding: 5px;
			border: 1px solid #f2f2f2;
			border-radius: 2px;
			height: 3rem;
			padding-top: 8px;
    	}#searchVin{
    		margin-top: 32px;
    	}#quoteMessageContainer.sup{
    		border-bottom: 4px solid #e7b152;
    	}.itemAtention{
    		border: 1px solid #369;
		    background-color: #fff;
		    padding: 3px;
		    border-radius: 10px;
		    margin-left: 10px;
		    font-weight: normal;
		    font-size: 13px;
    	}.renewal-reference-component.inactive{
    		display: none !important;
    	}
    	#quoteMessageContainer.danger{
    		background-color: #e24444;
    		color: #fff;
    	}#sendQuoteRenovationButton{
    		background-color: #a126a7;
    	}.errorField{
    		background-color: #e1505021 !important;
    		border: 1px solid #ffd8d8 !important;
    		padding-left: 6px !important;
    	}#errorRenovationFields{
    		background: #ffc165;
    		color: #000000;
    	}#receiptQualitasPDFMessage{
    		color: #ce3030;
		    text-align: center;
		    background: #ffcbcb;
		    padding:20px;
		    width: 40%;
		    position: relative;
		}.errorField{
			background: rgb(251, 227, 228);
			border: 1px solid #fbc2c4;
			color: #8a1f11;
		}
	</style>	
{% endblock %}
{% block body %}
	{% if userData.role == "ROLE_USER" or userData.role == "ROLE_ADMIN" %}
		{{ include("mx/nav_menu.twig", {option:''}) }}
		{% set class = "col-lg-10 offset-lg-1" %}
		{% set returnButton = "" %}
	{% elseif userData.role == "ROLE_DISTRIBUTOR" %}
			{% set class = "col-lg-12" %}
			{{ include("distributors/nav_menu.twig",{option:''}) }}
			{% set returnButton = "" %}
	{% 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 mx-2'></i>Back Home</a></div>" %}
	{% endif %}
	<div id="fullLoading" class="d-none">
		<img class="activator" src="{{asset('/images/load75x75.gif')}}">
	</div>
	<main>
		<div class="row">
			<div  class="{{ class }}  col-sm-12 ">
				{{ returnButton|raw }}
				<div class="white z-depth-1 mt-2">
					<div class="container-form row">						
						<div class="col-md-4 col-sm-12  text-md-end text-center" >
							<img src="{{ asset('/images/companies/qualitas.svg') }}" height="75" style="margin-top:20px; margin-bottom:20px;">
						</div>											
						<div class="col-md-8 col-sm-12">						
							<h3 class="blue-text" style="margin-top:35px;">Resident Auto WS Qualitas</h3>
						</div>	
						<div class="table-responsive">											
							<table class="history w-100">
								<thead>
									<tr>
										<td>Insured name</td>
										<td>Certificate to renew</td>
										<td>Policy to renew</td>
										<td>Previous coverage</td>
										<td>Previous price</td>
										<td>Selected coverage</td>
										<td>Selected price</td>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>{{ insuredLabel }}</td>
										<td id="certificetToRenew">-</td>
										<td id="policyToRenew">-</td>
										<td id="previousCoverage" class="blue-text">-</td>
										<td id="previousPrice">-</td>
										<td id="currentCoverage" class="blue-text">-</td>
										<td id="quote-price">-</td>
									</tr>
								</tbody>
							</table>
						</div>						
						<div class="clearfix"></div><br>
						<form id="resident-auto-form" name="residentAutoForm" >
							<fieldset title="STEP 1" class="row">
								<legend class="center-align d-none">Quoted</legend>
								<div class="divider quoteInformation">Quote information</div>
								<div class="col-12" id="quoteMessageContainer">
									<span id="quoteMessageContainerText"></span>
								</div>
								<div class="clearfix"></div>
								<div class="col-lg-2 col-md-4 col-sm-12">
									{{ form_label(form.quoteType) }}
									{{ form_widget(form.quoteType) }}
									{{ form_errors(form.quoteType) }}
								</div>
								<div class="col-lg-2 col-md-4 col-sm-12 label-vehicleUse">
									{{ form_label(form.vehicleUse) }}
									{{ form_widget(form.vehicleUse) }}
									{{ form_errors(form.vehicleUse) }}
								</div>
								<div class="col-lg-2 col-md-4 col-sm-12 label-vehicleType">																		
									{{ form_label(form.vehicleType) }}
									{{ form_widget(form.vehicleType) }}										
									{{ form_errors(form.vehicleType) }} 
								</div>
								<div class="col-lg-2 col-md-4  col-sm-12 nadaVinContainer">
									<label class="required">Search V.I.N. (Write and press <b>Enter</b> to search)</label>
									{{ form_widget(form.nadaVin) }}
									{{ form_errors(form.nadaVin) }} 
								</div>
								<div class="col-lg-3 col-md-4  col-sm-12 nadaVinContainer">
									<label class="required">Sum assured</label>
									<input type="text" id="form_sumAssuredNadaGuide" name="form[sumAssuredNadaGuide]" readonly>
								</div>
								<div class="col-lg-2 col-md-3 col-sm-12 label-modelYear">										
									{{ form_label(form.modelYear) }}
									{{ form_widget(form.modelYear) }}																		
									{{ form_errors(form.modelYear) }} 
								</div>
								<div class="col-lg-2 col-md-5 col-sm-12 label-brand">
									{{ form_label(form.brand) }}
									{{ form_widget(form.brand) }}	
									{{ form_errors(form.brand) }} 									
								</div>									
								<div class="col-lg-2 col-md-4 col-sm-12 label-subBrand">
									{{ form_label(form.subBrand) }}
									{{ form_widget(form.subBrand) }}
									{{ form_errors(form.subBrand) }} 
								</div>
								<div class="col-lg-12 col-md-8 col-sm-12 label-version">
									{{ form_label(form.version) }}
									{{ form_widget(form.version) }}
									{{ form_errors(form.version) }} 
								</div>
								<div class="col-md-4 col-sm-12 label-applyInspection">									
									<label class="required">Add discount by providing the vehicle documentation</label> 
									{{ form_widget(form.applyInspection) }}
									{{ form_errors(form.applyInspection) }} 
								</div>
								<div class=" col-md-4 col-sm-12 label-postalCode">
	                        		{{ form_label(form.postalCode) }} 		                                
	                                {{ form_widget(form.postalCode) }}										
									{{ form_errors(form.postalCode) }} 
	                        	</div>
								<div class="col-md-4 col-sm-12 label-state">
									{{ form_label(form.state) }}
									{{ form_widget(form.state) }}
									{{ form_errors(form.state) }} 
								</div>									
								<div class="col-md-6 col-sm-12">
									{{ form_label(form.entranceDate) }} 
									{{ form_widget(form.entranceDate, {'attr':{'placeholder':'mm/dd/YYYY', 'class':'productsDatePicker'}}) }}
								</div>
								<div class="divider custom customQuoteSetup label-quoteSetup">Quote setup</div>
								<div class="col-lg-3 col-sm-12 custom customQuoteSetup">
									{{ form_label(form.months) }}
									{{ form_widget(form.months, {'attr' : {'class' : 'customQuoteField'}} ) }}
									{{ form_errors(form.months) }}
								</div>
								<div class="col-lg-3 col-sm-12 custom customQuoteSetup">
									{{ form_label(form.sumAssuredType) }}
									{{ form_widget(form.sumAssuredType, {'attr' : {'class' : 'customQuoteField'}} ) }}
									{{ form_errors(form.sumAssuredType) }}
								</div>
								<div class="col-lg-3 col-sm-12 custom customQuoteSetup">
									{{ form_label(form.sumAssured) }}
									{{ form_widget(form.sumAssured, {'attr' : {'class' : 'customQuoteField'}} ) }}
									<span for="form_sumAssured" id="customQuoteSetupSumAssuredError"></span>
								</div>
								<div class="col-lg-3 col-sm-12 custom customQuoteSetup">
									{{ form_label(form.paymentType) }}
									{{ form_widget(form.paymentType, {'attr' : {'class' : 'customQuoteField'}} ) }}
									{{ form_errors(form.paymentType) }}
								</div>
								<div class="divider custom customQuoteSetup renewal-reference-component" id="renewalReferenceTitle">Renewal references</div>
								<div class="col-lg-5 col-sm-12 custom customQuoteSetup renewal-reference-component">
									<label class="required">Previous policy of <b>Qualitas</b> in SICAS (Do not use certificate number) (Optional)</label>
									<input type="text" class="customQuoteField" id="form_auxRenovation" name="form[auxRenovation]" placeholder="No policy entered">
								</div>
								<div class="col-md-4 col-sm-12 custom customQuoteSetup renewal-reference-component">
									<label class="required">Serial number</label>
									<input type="text" class="customQuoteField" id="form_auxSerialNumber" name="form[auxSerialNumber]">
								</div>
								<div class="divider custom customPresetPacks">Preset packs avaibles</div>
								<div class="col-md-4 col-sm-12 custom customPresetPacks">
									<div class="presetPack" id="fullCoveragePresetPack">
										Full Coverage
									</div>
								</div>
								<div class="col-md-4 col-sm-12 custom customPresetPacks">
									<div class="presetPack" id="limitedCoveragePresetPack">
										Limited Coverage
									</div>
								</div>
								<div class="col-md-4 col-sm-12 custom customPresetPacks">
									<div class="presetPack" id="liabilityCoveragePresetPack">
										Liability Coverage
									</div>
								</div>								
								<div class="divider custom customCoverageList">Basic coverages</div>
                            	<table class="striped custom coveragesTable customCoverageList">
                            		<thead>
                            			<tr>
                            				<td width="10%">Coverage</td>
                            				<td width="40%"></td>
                            				<td width="20%">Sum assured</td>
                            				<td width="15%">Deductible</td>
                            				<td plans to send or downloadd width="15%">Premium</td>
                            			</tr>
                            		</thead>
                            		<tbody>
                        				<tr id="DANIOS_MATERIALES">
                        					<td>
                        						<center ><img src="{{asset('/images/check.webp')}}" class="checkImg"></center>
                        						<input class="customQuoteField" type="hidden" id="form_coverage_on_danios_materiales" name="form[coverage_on_danios_materiales]">
                        					</td>
                        					<td>
												<label class="label-coverage">Material damage<br><span>Daños materiales</span></label>
											</td>
											<td>
												<input class="customQuoteField" type="text" id="form_coverage_sa_danios_materiales" name="form[coverage_sa_danios_materiales]" readonly>
											</td>
											<td>
												<select class="browser-default customQuoteField" id="form_coverage_de_danios_materiales" name="form[coverage_de_danios_materiales]">
												</select>
											</td>
											<td>
												<span class="netPremiumCoverage"></span>
											</td>
										</tr>
										<tr id="ROBO_TOTAL">
											<td>
												<center><img src="{{asset('/images/check.webp')}}"  class="checkImg"></center>
                        						<input class="customQuoteField" type="hidden" id="form_coverage_on_robo_total" name="form[coverage_on_robo_total]">
                        					</td>
                        					<td>
												<label class="label-coverage">Total theft<br><span>Robo total</span></label>
											</td>
											<td>
												<input class="customQuoteField" type="text" id="form_coverage_sa_robo_total" name="form[coverage_sa_robo_total]" readonly>
											</td>
											<td>
												<select class="browser-default customQuoteField" id="form_coverage_de_robo_total" name="form[coverage_de_robo_total]">
												</select>
											</td>
											<td>
												<span class="netPremiumCoverage"></span>
											</td>
										</tr>
										<tr id="RESPONSABILIDAD_CIVIL">
											<td>
												<center><img src="{{asset('/images/check.webp')}}"  class="checkImg"></center>
											</td>
                        					<td>
												<label class="label-coverage">Third party liability<br><span>Responsabilidad civil</span></label>
											</td>
											<td>
												<select class="browser-default customQuoteField" id="form_coverage_sa_responsabilidad_civil" name="form[coverage_sa_responsabilidad_civil]"></select>
											</td>
											<td>
												<select class="browser-default customQuoteField" id="form_coverage_de_responsabilidad_civil" name="form[coverage_de_responsabilidad_civil]">
												</select>
											</td>
											<td>
												<span class="netPremiumCoverage"></span>
											</td>
										</tr>
										<tr id="GASTOS_MEDICOS">
											<td>
												<center id="coverage_check_gastos_medicos"><img src="{{asset('/images/check.webp')}}"  class="checkImg"></center>
												<input class="customQuoteField virtualCheck" type="text" id="form_coverage_on_gastos_medicos" name="form[coverage_on_gastos_medicos]" readonly>
											</td>
                        					<td>
												<label class="label-coverage">Medical expenses for passengers<br><span>Gastós médicos ocupantes</span></label>
											</td>
											<td>
												<select class="browser-default customQuoteField" id="form_coverage_sa_gastos_medicos" name="form[coverage_sa_gastos_medicos]">
												</select>
											</td>
											<td></td>
											<td>
												<span class="netPremiumCoverage"></span>
											</td>
										</tr>
										<tr id="MUERTE_CONDUCTOR">
											<td>
												<center id="coverage_check_muerte_conductor"><img src="{{asset('/images/check.webp')}}"  class="checkImg"></center>
												<input class="customQuoteField virtualCheck" type="text" id="form_coverage_on_muerte_conductor" name="form[coverage_on_muerte_conductor]" readonly>
											</td>
                        					<td>
												<label class="label-coverage">Death to the driver<br><span>Muerte al conductor</span></label>
											</td>
											<td>
												<select class="browser-default customQuoteField" id="form_coverage_sa_muerte_conductor" name="form[coverage_sa_muerte_conductor]">
												</select>
											</td>
											<td></td>
											<td>
												<span class="netPremiumCoverage"></span>
											</td>
										</tr>
										<tr id="ASISTENCIA_LEGAL">
											<td>
												<center id="coverage_check_asistencia_legal"><img src="{{asset('/images/check.webp')}}"  class="checkImg"></center>
												<input class="customQuoteField virtualCheck" type="text" id="form_coverage_on_asistencia_legal" name="form[coverage_on_asistencia_legal]" readonly>
											</td>
                        					<td>
												<label class="label-coverage">Legal assistance<br><span>Gastos legales</span></label>
											</td>
											<td>
												Included
											</td>
											<td></td>
											<td>
												<span class="netPremiumCoverage"></span>
											</td>
										</tr>
										<tr id="ASISTENCIA_VIAL">
											<td>
												<center id="coverage_check_asistencia_vial"><img src="{{asset('/images/check.webp')}}"  class="checkImg"></center>
												<input class="customQuoteField virtualCheck" type="text" id="form_coverage_on_asistencia_vial" name="form[coverage_on_asistencia_vial]" readonly>
											</td>
                        					<td>
												<label class="label-coverage">Road side assistance<br><span>Asistencia vial</span></label>
											</td>
											<td>
												Included{#  - ( AV Plus  #}<input class="customQuoteField virtualCheck" type="hidden" id="form_coverage_sa_asistencia_vial" name="form[coverage_sa_asistencia_vial]" style="width:25%" readonly>{#  ) #}
											</td>
											<td></td>
											<td>
												<span class="netPremiumCoverage"></span>
											</td>
										</tr>
										<tr id="RC_USA">
											<td>
												<center><img src="{{asset('/images/check.webp')}}"  class="checkImg"></center>
											</td>
                        					<td>
												<label class="label-coverage">USA Liability<br><span>Responsabilidad civil en los Estados Unidos</span></label>
											</td>
											<td>
												Included
											</td>
											<td></td>
											<td>
												<span class="netPremiumCoverage"></span>
											</td>
										</tr>
										<tr id="EXTENCION_RC">
											<td>
                        						<input class="customQuoteField virtualCheck" type="text" id="form_coverage_on_extencion_rc" name="form[coverage_on_extencion_rc]" readonly>
                        					</td>
                        					<td>
												<label class="label-coverage">Driver's liability Extension<br><span>Ext. de RC, GL, GM y AV</span></label>
											</td>
											<td>
												Included
											</td>
											<td></td>
											<td>
												<span class="netPremiumCoverage"></span>
											</td>
										</tr>
										<tr id="ROBO_PARCIAL">
											<td>
                        						<input class="customQuoteField virtualCheck" type="text" id="form_coverage_on_robo_parcial" name="form[coverage_on_robo_parcial]" readonly>
                        					</td>
                        					<td>
												<label class="label-coverage">Partial Theft<br><span>Robo parcial</span></label>
											</td>
											<td>
												<input class="customQuoteField" id="form_coverage_sa_robo_parcial" name="form[coverage_sa_robo_parcial]" readonly>
											</td>
											<td>
												<div class="fakeField">25%</div>
											</td>
											<td>
												<span class="netPremiumCoverage"></span>
											</td>
										</tr>
										<tr id="GASTOS_TRANSPORTE">
											<td>
                        						<input class="customQuoteField virtualCheck" type="text" id="form_coverage_on_gastos_transporte" name="form[coverage_on_gastos_transporte]" readonly>
                        					</td>
                        					<td>
												<label class="label-coverage">Transportation expenses<br><span>Gastos de transporte por perdida total</span></label>
											</td>
											<td>
												Included
											</td>
											<td></td>
											<td>
												<span class="netPremiumCoverage"></span>
											</td>
										</tr>
										<tr id="RC_OCUPANTES">
											<td>
                        						<input class="customQuoteField virtualCheck" type="text" id="form_coverage_on_rc_ocupantes" name="form[coverage_on_rc_ocupantes]" readonly>
                        					</td>
                        					<td>
												<label class="label-coverage">Third party Liability for damage to occupants<br><span>RC Daños a ocupantes</span></label>
											</td>
											<td>
												Included
											</td>
											<td></td>
											<td>
												<span class="netPremiumCoverage"></span>
											</td>
										</tr>
										<tr id="CADE">
											<td>
                        						<input class="customQuoteField virtualCheck" type="text" id="form_coverage_on_cade" name="form[coverage_on_cade]" readonly>
                        					</td>
                        					<td>
												<label class="label-coverage">Elimination of deductible for total loss and partial damage due to colision<br><span>CADE</span></label>
											</td>
											<td>
												Included
											</td>
											<td></td>
											<td>
												<span class="netPremiumCoverage"></span>
											</td>
										</tr>
										<tr id="RC_COMPLEMENTARIA">
											<td>
                        						<input class="customQuoteField virtualCheck" type="text" id="form_coverage_on_rc_complementaria" name="form[coverage_on_rc_complementaria]" readonly>
                        					</td>
                        					<td>
												<label class="label-coverage">Complementary liability<br><span>Responsabilidad civil complementaria</span></label>
											</td>
											<td>
												<select class="browser-default customQuoteField" id="form_coverage_sa_rc_complementaria" name="form[coverage_sa_rc_complementaria]"></select>
											</td>
											<td></td>
											<td>
												<span class="netPremiumCoverage"></span>
											</td>
										</tr>
										<tr id="AUTO_AGENCIA">
											<td>
                        						<input class="customQuoteField virtualCheck" type="text" id="form_coverage_on_auto_agencia" name="form[coverage_on_auto_agencia]" readonly>
                        					</td>
                        					<td>                           						
												<label class="label-coverage">Agency repair<br><span>Reparación de agencia</span></label>
											</td>
											<td>
												Included
											</td>
											<td></td>
											<td>
												<span class="netPremiumCoverage"></span>
											</td>
										</tr>
										<tr id="AUTO_SUSTITUTO">
											<td>
                        						<input class="customQuoteField virtualCheck" type="text" id="form_coverage_on_auto_sustituto" name="form[coverage_on_auto_sustituto]" readonly>
                        					</td>
                        					<td>
												<label class="label-coverage">Automobile substitute<br><span>Auto sustituto</span></label>
											</td>
											<td>
												<select class="browser-default customQuoteField" id="form_coverage_sa_auto_sustituto" name="form[coverage_sa_auto_sustituto]"></select>
											</td>
											<td></td>
											<td>
												<span class="netPremiumCoverage"></span>
											</td>
										</tr>
									</tbody>
								</table>
								<table class="striped custom coveragesTable customCoverageList">
									<tbody>
										<tr class="totalTr">
											<td width="70%" colspan="3"></td>
                        					<td width="15%" class="totalTd">Technical bonus (%)</td>
											<td width="15%" class="totalTd">
												{{ form_widget(form.technicalBonus, {'attr' : {'class' : 'customQuoteField'}} ) }}
												{{ form_errors(form.technicalBonus) }}
											</td>
										</tr>
										<tr class="totalTr">											
											<td width="10%"></td>
											<td width="40%" id="customQuoteError"></td>
											<td width="20%"></td>
                        					<td width="15%" class="totalTd">Net premium</td>
											<td width="15%" class="totalTd"><span id="customNetPremium" class="customLabelTotals"></span></td>
										</tr>
										<tr class="totalTr">
											<td width="70%" colspan="3"></td>
                        					<td width="15%" class="totalTd">Surcharges</td>
											<td width="15%" class="totalTd"><span id="customSurcharge" class="customLabelTotals"></span></td>
										</tr>
										<tr class="totalTr">																								
											<td width="70%" colspan="3"></td>
                        					<td width="15%" class="totalTd">Fee</td>
											<td width="15%" class="totalTd"><span id="customFee" class="customLabelTotals"></span></td>
										</tr>
										<tr class="totalTr">
                        					<td width="50%" colspan="2"></td>
											<td width="20%">
												<center>
													<button type="button" class="btn btn-teal" id="customSaveChanges">
														<i class="material-icons right">autorenew</i>
														Save changes
													</button>
												</center>
											</td>
                        					<td width="15%" class="totalTd">I.V.A.</td>
											<td width="15%" class="totalTd"><span id="customTax" class="customLabelTotals"></span></td>
										</tr>
										<tr class="totalTr">
                        					<td width="50%" colspan="2"></td>
											<td width="20%">
												<center>
													<button type="button" class="btn " id="customExportQuoteOptionsButton"  data-bs-toggle="modal"  title="Open" data-bs-target="#modalExportQuoteOptions">
														<i class="material-icons right">import_export</i>
														Export
													</button>
												</center>
											</td>
                        					<td width="15%" class="totalTd customTotalPremiumLabel">Total premium</td>
											<td width="15%" class="totalTd"><span id="customTotalPremium" class="customLabelTotals customTotalPremiumData"></span></td>
										</tr>
										<tr class="totalTr">																								
											<td width="85%" colspan="4"></td>
											<td width="15%">
												<button type="button" class="btn btn-primary" id="customBtnContinue">Continue</button>
											</td>
										</tr>
                            		</tbody>	                            		
                            	</table>
	                        	<div class="clearfix"></div>
	                            <div class="loadingQuote container d-none">
	                            	<center>
	                            		<img class="activator" src="{{asset('/images/load75x75.gif')}}">
	                            	</center>                            	
	                            </div>
	                            <div class="clearfix"></div>
								<div id="prices" class="row">
									<div class="col-md-4 col-sm-12">
										<div class="package">
											<div class="card">
												<div class="card-img-top">
													<a class="modal-trigger" href="#modalFullCoverage" data-bs-toggle="modal" data-bs-target="#modalFullCoverage">
														<img class="activator img-fluid" src="{{ asset('/images/cards/full-coverage.jpg') }}" alt="Full Coverage">
													</a>
												</div>
												<div class="card-body">
													<h5 class="card-title text-dark">Full Coverage</h5>
													<span id="fullCoverageSpan" class="total-premium">$ 0.00</span><br>
													<b>MXN for 1 Year</b><br>
													<button type="button" id="fullCoverageBtn" class="btn btn-primary mt-2 btn-buy">Select</button><br>
													<a class="modal-trigger" href="#modalFullCoverage" data-bs-toggle="modal" data-bs-target="#modalFullCoverage">View Coverages</a>
												</div>
												<div class="card-footer">
													<span id="fullCoverageError" class="text-danger"></span>
												</div>
											</div>
										</div>
									</div>
									
									<div class="col-md-4 col-sm-12">
										<div class="package">
											<div class="card">
												<div class="card-img-top">
													<a class="modal-trigger" href="#modalLimitedCoverage" data-bs-toggle="modal" data-bs-target="#modalLimitedCoverage">
														<img class="activator img-fluid" src="{{ asset('/images/cards/limited.jpg') }}" alt="Limited Coverage">
													</a>
												</div>
												<div class="card-body">
													<h5 class="card-title text-dark">Limited Coverage</h5>
													<span id="limitedCoverageSpan" class="total-premium">$ 0.00</span><br>
													<b>MXN for 1 Year</b><br>
													<button type="button" id="limitedCoverageBtn" class="btn btn-primary mt-2 btn-buy">Select</button><br>
													<a class="modal-trigger" href="#modalLimitedCoverage" data-bs-toggle="modal" data-bs-target="#modalLimitedCoverage">View Coverages</a>
												</div>
												<div class="card-footer">
													<span id="limitedCoverageError" class="text-danger"></span>
												</div>
											</div>
										</div>
									</div>
									
									<div class="col-md-4 col-sm-12">
										<div class="package">
											<div class="card">
												<div class="card-img-top">
													<a class="modal-trigger" href="#modalLiabilityCoverage" data-bs-toggle="modal" data-bs-target="#modalLiabilityCoverage">
														<img class="activator img-fluid" src="{{ asset('/images/cards/liability.jpg') }}" alt="Liability Coverage">
													</a>
												</div>
												<div class="card-body">
													<h5 class="card-title text-dark">Liability Coverage</h5>
													<span id="liabilityCoverageSpan" class="total-premium">$ 0.00</span><br>
													<b>MXN for 1 Year</b><br>
													<button type="button" id="liabilityCoverageBtn" class="btn btn-primary mt-2 btn-buy">Select</button><br>
													<a class="modal-trigger" href="#modalLiabilityCoverage" data-bs-toggle="modal" data-bs-target="#modalLiabilityCoverage">View Coverages</a>
												</div>
												<div class="card-footer">
													<span id="liabilityCoverageError" class="text-danger"></span>
												</div>
											</div>
										</div>
									</div>
	                                <div class="clearfix"></div>
	                                <br>
	                                <div class="col-md-6 s6 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-4 col-md-3 col-sm-12 text-center">
										<a class="btn btn-teal btn-lg" data-bs-toggle="modal"  title="Open" id="exportQuoteOptionsButton" data-bs-target="#modalExportQuoteOptions"><i class="fa-solid fa-file-export"></i>Export quote</a>
			    		    		</div>
	                            </div> 
							</fieldset>
							<fieldset title="STEP 2" class="row">
								<legend>Insured Information</legend>
								<h6 class="blue-text companyElement">
									<b>Representative information</b> - This information can be found on your tax ID.
								</h6>
								<div class="col-md-4 col-sm-12 companyElement">
									{{ form_label(form.apoderadoLegal, 'Legal representative name') }} 
                                    {{ form_errors(form.apoderadoLegal) }}                                     
                                    {{ form_widget(form.apoderadoLegal) }}
								</div>					
								<div class="col-md-4 col-sm-12 companyElement">
									{{ form_label(form.fechaNacimientoApoderadoLegal, 'Date of birth') }} 
                                    {{ form_errors(form.fechaNacimientoApoderadoLegal) }}                                     
                                    {{ form_widget(form.fechaNacimientoApoderadoLegal, {'attr':{'class':'form-control', 'placeholder': 'mm/dd/YYYY'}} ) }}
								</div>	
								<div class="col-md-4 col-sm-12">
									<span class="labelByOwnerType label"></span>{{ form_label(form.nationality) }}
									{{ form_errors(form.nationality) }}
									{{ form_widget(form.nationality) }}
								</div>
								<div class="col-md-4 col-sm-12 d-none" id="content_person_id">
									{{ form_label(form.personRfc, 'Insured RFC') }}
									{{ form_errors(form.personRfc) }}
									{{ form_widget(form.personRfc) }} 
								</div>
								<div class="col-md-4 col-sm-12 personElement">
									{{ form_label(form.countryOfBirth) }}
									{{ form_errors(form.countryOfBirth) }}
									{{ form_widget(form.countryOfBirth) }}
								</div>
								<div class="col-md-4 col-sm-12 label-state-of-birth">
									<span class="labelByOwnerType label"></span>{{ form_label(form.stateOfBirth) }}
									{{ form_errors(form.stateOfBirth) }}
									{{ form_widget(form.stateOfBirth) }}
								</div>
								<div class="col-md-4 col-sm-12">
									<span class="labelByOwnerType label"></span>{{ form_label(form.identificationType) }} 
									{{ form_errors(form.identificationType) }} 
									{{ form_widget(form.identificationType) }}
								</div>								
								<div class="col-md-4 col-sm-12">
									<span class="labelByOwnerType label"></span>{{ form_label(form.identificationNumber) }} 
									{{ form_errors(form.identificationNumber) }} 
									{{ form_widget(form.identificationNumber) }}
								</div>								
								<div class="clearfix"></div> 
								<div class="d-none personElement row" id="personContainer">
									<div class="col-md-3 col-sm-12">
										{{ form_label(form.residenceType) }} 
										{{ form_errors(form.residenceType) }} 
										{{ form_widget(form.residenceType) }}
									</div>
									<div class="col-md-3 col-sm-12">
										{{ form_label(form.gender) }} 
										{{ form_errors(form.gender) }} 
										{{ form_widget(form.gender) }}
									</div>
									<div class="col-md-3 col-sm-12">
										{{ form_label(form.occupation) }} 
										{{ form_errors(form.occupation) }} 
										{{ form_widget(form.occupation) }}
									</div>
								</div>
								<div class="clearfix"></div> 
								<div class="d-none companyElement row" id="companyContainer">
									<h6 class="blue-text companyElement"><b>Company information</b></h6>
									<div class="col-md-3 col-sm-12">
										{{ form_label(form.companyName) }} 
                                        {{ form_errors(form.companyName) }}                                     
                                        {{ form_widget(form.companyName, {'attr':{'readonly': true}} ) }}
									</div>					
									<div class="col-md-3 col-sm-12">
										{{ form_label(form.turningCompany, 'Type of Company') }} 
                                        {{ form_errors(form.turningCompany) }}                                     
                                        {{ form_widget(form.turningCompany) }}
									</div>									
									<div class="col-md-3 col-sm-12">
										{{ form_label(form.nacionalidadSociedad, 'Company Nationality') }} 
                                        {{ form_errors(form.nacionalidadSociedad) }}                                     
                                        {{ form_widget(form.nacionalidadSociedad) }}
									</div>					
									<div class="col-md-3 col-sm-12">
										{{ form_label(form.companyRfc) }} 
                                        {{ form_errors(form.companyRfc) }}                                     
                                        {{ form_widget(form.companyRfc) }}
									</div>					
									<div class="col-md-3 col-sm-12">
										{{ form_label(form.objetoSocial, 'Social Object') }} 
                                        {{ form_errors(form.objetoSocial) }}                                     
                                        {{ form_widget(form.objetoSocial) }}
									</div>					
									<div class="col-md-3 col-sm-12">
										{{ form_label(form.fechaConstitucion, 'Constitution date') }} 
                                        {{ form_errors(form.fechaConstitucion) }}                                     
                                        {{ form_widget(form.fechaConstitucion, {'attr':{'class':'form-control', 'placeholder': 'mm/dd/YYYY'}} ) }}
									</div>					
									<div class="col-md-3 col-sm-12">
										{{ form_label(form.folioMercantil, 'Business folio') }} 
                                        {{ form_errors(form.folioMercantil) }}                                     
                                        {{ form_widget(form.folioMercantil) }}
									</div>									
								</div>
								<div class="clearfix"></div> 
								<h6 class="blue-text"><b>Mexican address</b></h6>
								<div class="col-md-4 col-sm-12">
									<label for="form_auxState">State</label>
									<input type="text" id="form_auxState" readonly="true">
								</div>
								<div class="col-md-4 col-sm-12 label-city">
									{{ form_label(form.city) }}
									{{ form_errors(form.city) }}
									{{ form_widget(form.city) }}
								</div>					
								<div class="col-md-4 col-sm-12 label-neighborhood">	                        	
	                        		<label class="required">Neighborhood</label> 
	                                {{ form_errors(form.neighborhood) }} 
	                                {{ form_widget(form.neighborhood) }}
	                        	</div>
	                        	<div class="col-md-4 col-sm-12">
	                        		{{ form_label(form.address) }} 
	                                {{ form_errors(form.address) }} 
	                                {{ form_widget(form.address) }}
	                        	</div>
	                        	<div class="col-md-4 col-sm-12">
	                        		{{ form_label(form.buildingNumber) }} 
	                                {{ form_errors(form.buildingNumber) }} 
	                                {{ form_widget(form.buildingNumber, {'attr':{'placeholder':'The default value will be "SN"'}}) }}
	                        	</div>
	                        	<div class="col-md-4 col-sm-12">
	                        		{{ form_label(form.unitNumber) }} 
	                                {{ form_errors(form.unitNumber) }} 
	                                {{ form_widget(form.unitNumber) }}
	                        	</div>		                    	                            	
								<div class="clearfix"></div> 
								<h6 class="blue-text"><b>Second driver</b></h6>
								<div class="col-md-3 col-sm-12">
                            		{{ form_label(form.secondDriver, "Add second driver (Optional)") }} 
                                    {{ form_errors(form.secondDriver) }}
                                	{{ form_widget(form.secondDriver) }}
                            	</div>
								<div class="col-md-3 col-sm-12 d-none">
                                	<label>How did you hear about us?</label>
                            		{{form_widget(form.aboutUsList)}}
                                	{{ form_widget(form.reference) }}
                            	</div>
								<div class="col-md-3 col-sm-12 d-none">
									<label for="form_auxAboutUs">Specify your reference</label>
									{{form_widget(form.auxAboutUs, {'attr': {'disabled':'disabled'}})}}
                            	</div>
								<div class="clearfix"></div> 
								<div class="clearfix"></div> 
								<h6 class="blue-text"><b>Vehicle Information</b></h6>
								<div class="col-md-3 col-sm-12">
									<label>Engine number*</label> 
                                	{{ form_widget(form.engine) }}
								</div>
								<div class="col-md-3 col-sm-12">
									<label>Serial number / VIN*</label> 
                                	{{ form_widget(form.serialNumber, {'attr':{'maxlength' : "17"}} ) }}
								</div>
								<div class="col-md-3 col-sm-12">
									{{ form_label(form.plates) }} 
	                                {{ form_errors(form.plates) }} 
	                                {{ form_widget(form.plates) }}
								</div>
								<div class="col-md-3 col-sm-12">
									{{ form_label(form.color) }} 
	                                {{ form_errors(form.color) }} 
	                                {{ form_widget(form.color) }}
								</div>
								<div class="clearfix vehicleInspectionContainer"></div> 
								<h6 class="blue-text vehicleInspectionContainer"><b>Vehicle inspection</b></h6>
								<div class="col-12  vehicleInspectionContainer">
                                    <label>Please upload the next pictures. <i class="validFormat">JPG or PNG format.</i></label><br>
                                    <label class="font-weight-bold">Of your vehicle like each representation.</label>
                                    {# <img src="{{ app.asset_path }}/assets/img/load75x75.gif" alt="Loading icon" width="30" id="uploadLoading" class="d-none"> #}
                                    <br>
                                    <span id="uploadResponse" class="d-none alert alert-danger"></span>
                                </div>
								<div class="col-md-3 col-sm-12 vehicleInspectionContainer">
                                    <button type="button" class="buttonUploadImage" title="Upload left side" id="btn_ladoIzquierdo">
                                        {# <img src="{{ app.root }}/web/assets/img/icons/resident-auto-qualitas/lado_izquierdo.png" class="inspectionCarImage"> #}
                                        <br>
                                        Left side
                                        <i class="material-icons uploadIcon">file_upload</i>
                                        <i class="material-icons d-none checkIcon">check</i>
                                    </button>
                                    <br>
                                    <button class="previewPicture d-none" type="button" id="btn_preview_ladoIzquierdo">Preview</button>
                                </div>
                                <div class="col-md-3 col-sm-12 vehicleInspectionContainer">
                                    <button type="button" class="buttonUploadImage" title="Upload front side" id="btn_frente">
                                        {# <img src="{{ app.root }}/web/assets/img/icons/resident-auto-qualitas/frente.png" class="inspectionCarImage"> #}
                                        <br>
                                        Front side
                                        <i class="material-icons uploadIcon">file_upload</i>
                                        <i class="material-icons d-none checkIcon">check</i>
                                    </button>
                                    <br>
                                    <button type="button" class="previewPicture d-none" id="btn_preview_frente">Preview</button>
                                </div>
                                <div class="col-md-3 col-sm-12 vehicleInspectionContainer">
                                    <button type="button" class="buttonUploadImage" title="Upload right side" id="btn_ladoDerecho">
                                        {# <img src="{{ app.root }}/web/assets/img/icons/resident-auto-qualitas/lado_derecho.png" class="inspectionCarImage"> #}
                                        <br>
                                        Right side
                                        <i class="material-icons uploadIcon">file_upload</i>
                                        <i class="material-icons d-none checkIcon">check</i>
                                    </button>
                                    <br>
                                    <button type="button" class="previewPicture d-none" id="btn_preview_ladoDerecho">Preview</button>
                                </div>
                                <div class="col-md-3 col-sm-12 vehicleInspectionContainer">
                                    <button type="button" class="buttonUploadImage" title="Upload rear side" id="btn_trasera">
                                        {# <img src="{{ app.root }}/web/assets/img/icons/resident-auto-qualitas/trasera.png" class="inspectionCarImage"> #}
                                        <br>
                                        Rear side
                                        <i class="material-icons uploadIcon">file_upload</i>
                                        <i class="material-icons d-none checkIcon">check</i>
                                    </button>
                                    <br>
                                    <button type="button" class="previewPicture d-none" id="btn_preview_trasera">Preview</button>
                                </div>
                                <div class="clearfix vehicleInspectionContainer"></div>								
                                <div class="col-md-3 col-sm-12 vehicleInspectionContainer">
                                    <label class="font-weight-bold">Registration car of your vehicle or Factura.</label>
                                    <button type="button" class="buttonUploadImage center-align" title="Upload picture" id="btn_registrationFactura">
                                        Upload document or picture
                                        <i class="material-icons uploadIcon">file_upload</i>
                                        <i class="material-icons d-none checkIcon">check</i>
                                    </button>
                                    <br>
                                    <button type="button" class="previewPicture d-none" id="btn_preview_registrationFactura">Preview</button>
                                </div>
								<div class="clearfix"></div>								
								<h6 class="blue-text"><b>Term</b></h6>
								<div class="col-md-6 col-sm-12">
									{{ form_label(form.endDate) }} 
                                	{{ form_widget(form.endDate) }}
								</div>
								<div class="clearfix"></div> 
								{# Este bloque solo aplica para ejecutivos #}
								<h6 class="blue-text references"><b>References</b></h6>
								{% if distributorId is not defined %}
									<div class="select-field col-md-6 col-sm-12">
										<label class="black-text label-header">Simulate as: <span class="red-text">(Only if you need to refer a distributor)</span></label>
										{{ form_widget(form.simulateDistributorId) }}
									</div>
								{% endif %}
								<div class="clearfix references"></div> 
								{# Este bloque solo aplica para ejecutivos #}
							</fieldset>
							<fieldset title="STEP 3">
								<legend>Review Information</legend>
								 <ul class="collapsible popout" data-collapsible="accordion">
									<li>
										<div class="collapsible-header"><i class="material-icons">badge</i>Customer Information</div>
										<div class="collapsible-body">
												<div class="row" id="content_name">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Name:</b></div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_name"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_apoderadoLegal">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Legal Representative Name:</b></div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_apoderadoLegal"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_fechaNacimientoApoderadoLegal">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Legal Representative Date of Birth:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_fechaNacimientoApoderadoLegal"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_birthday">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Birthday:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_birthday"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_email">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Email:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_email"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_phone">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Phone:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_phone"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_nationality">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Nationality:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_nationality"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_countryOfBirth">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Country of Birth:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_countryOfBirth"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_stateOfBirth">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>State of Birth:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_stateOfBirth"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_residenceType">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Residence Type:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_residenceType"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_gender">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Gender:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_gender"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_idType">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Identification type:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_idType"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_idNumber">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Identification #:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_idNumber"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_occupation">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Occupation:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_occupation"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_personRfc">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>RFC:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_personRfc"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_reference">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Reference:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_reference"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_turningCompany">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Type of Company:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_turningCompany"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_companyRfc">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Company RFC:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_companyRfc"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_objetoSocial">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Social Object:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_objetoSocial"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_fechaConstitucion">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Constitution Date:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_fechaConstitucion"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_nacionalidadSociedad">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Nationality of the company:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_nacionalidadSociedad"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_folioMercantil">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Business folio:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_folioMercantil"></span> </div>
                                                </div>
												<div class="clearfix"></div>
                                                <div class="row" id="content_secondDriver">
                                                    <div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Second Driver:</b> </div>
                                                    <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_secondDriver"></span> </div>
                                                </div>
												<div class="clearfix"></div>
										</div>
									</li>
									<li>
										<div class="collapsible-header"><i class="material-icons">feed</i>Address Information</div>
										<div class="collapsible-body">
											<div class="row">
												<div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Postal code:</b></div>
                                            	<div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_postalCode"></span> </div>
											</div>
                                            <div class="clearfix"></div>
											<div class="row">
												<div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Address:</b> </div>
    	                                        <div class="col-lg-9 col-md-8 col-sm-12 row-info"> <span id="show_address"></span> </div>
											</div>
                                            <div class="clearfix"></div>
											<div class="row">
												<div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Building #:</b> </div>
                                            	<div class="col-lg-9 col-md-8 col-sm-12 row-info"> <span id="show_buildingNumber"></span> </div>
											</div>
                                            <div class="clearfix"></div>
											<div class="row">
												<div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Unit #:</b> </div>
                                            	<div class="col-lg-9 col-md-8 col-sm-12 row-info"> <span id="show_unitNumber"></span> </div>
											</div>
                                            <div class="clearfix"></div>
											<div class="row">
												<div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Neighborhood:</b> </div>
                                            	<div class="col-lg-9 col-md-8 col-sm-12 row-info"> <span id="show_neighborhood"></span> </div>
											</div>
                                            <div class="clearfix"></div>
											<div class="row">
												<div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>City:</b> </div>
	                                            <div class="col-lg-9 col-md-8 col-sm-12 row-info"> <span id="show_city"></span> </div>
											</div>
                                            <div class="clearfix"></div>
											<div class="row">
												<div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>State:</b> </div>
	                                            <div class="col-lg-9 col-md-8 col-sm-12 row-info"> <span id="show_state"></span> </div>
											</div>
                                            <div class="clearfix"></div>
										</div>
									</li>
									<li>
										<div class="collapsible-header"><i class="material-icons">directions_car</i>Vehicle Information</div>
										<div class="collapsible-body">
											<div class="row">
												<div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Vehicle use:</b></div>
	                                            <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_vehicleUse"></span> </div>
											</div>
                                            <div class="clearfix"></div>
											<div class="row">
												<div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Vehicle Type:</b></div>
	                                            <div class="col-lg-3 col-md-8 col-sm-12 row-info"> <span id="show_vehicleType"></span> </div>
											</div>
                                            <div class="clearfix"></div>
											<div class="row">
												<div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Year model:</b> </div>
	                                            <div class="col-lg-9 col-md-8 col-sm-12 row-info"> <span id="show_modelYear"></span> </div>
											</div>
                                            <div class="clearfix"></div>
											<div class="row">
												<div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Brand:</b> </div>
    	                                        <div class="col-lg-9 col-md-8 col-sm-12 row-info"> <span id="show_brand"></span> </div>
											</div>
                                            <div class="clearfix"></div>
											<div class="row">
												<div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Sub brand:</b> </div>
	                                            <div class="col-lg-9 col-md-8 col-sm-12 row-info"> <span id="show_subBrand"></span> </div>
											</div>
                                            <div class="clearfix"></div>
											<div class="row">
												<div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Version:</b> </div>
	                                            <div class="col-lg-9 col-md-8 col-sm-12 row-info"> <span id="show_version"></span> </div>
											</div>
                                            <div class="clearfix"></div>
											<div class="row">
												<div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Engine #:</b> </div>
	                                            <div class="col-lg-9 col-md-8 col-sm-12 row-info"> <span id="show_engine"></span> </div>
											</div>
                                            <div class="clearfix"></div>
											<div class="row">
												<div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>VIN:</b> </div>
	                                            <div class="col-lg-9 col-md-8 col-sm-12 row-info"> <span id="show_serialNumber"></span> </div>
											</div>
                                            <div class="clearfix"></div>
											<div class="row">
												<div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Plates:</b> </div>
	                                            <div class="col-lg-9 col-md-8 col-sm-12 row-info"> <span id="show_plates"></span> </div>
											</div>
                                            <div class="clearfix"></div>
											<div class="row">
												<div class="col-lg-3 col-md-4  col-sm-12 row-info"> <b>Color:</b> </div>
	                                            <div class="col-lg-9 col-md-8 col-sm-12 row-info"> <span id="show_color"></span> </div>
											</div>
                                            <div class="clearfix"></div>
										</div>
									</li>
								</ul>
								<div class="clearfix"></div>
							</fieldset>
							<fieldset title="STEP 4" class="row">
								<legend>Purchase</legend>
								<div class="col-3 bordeTop">
									<center>
										<div id="policy-summary" class="text-center">
											<div><img src="{{ asset('/images/companies/qualitas.svg') }}" width="150"></div>
											<label id="policy-coverage" style="color:#084A7A;"></label><br> 
											<label class="purchase-price"><span id="policy-price">00.00</span></label><br> 
											<div class="" id="discountLabel"></div>
											<span id="car-description" class="description"></span>
										</div>
									</center>		                                
									<div id="custom-policy-summary">
										<div><img src="{{ asset('/images/companies/qualitas.svg') }}" width="150"></div>
										<div id="labels"></div>
									</div>
	                            </div>
	                            <div class="col-md-9 bordeTop row">
									<div class="col-12 col-md-4">
										<label>Card holder name</label>
										{{ form_widget(form.cardFullName) }}
									</div>
									<div class="col-12 col-md-4"> 
										<label>Carrier</label> 
										{{ form_widget(form.cardType) }}
									</div>										
									<div class="col-12 col-md-4">
										<label>Credit card number</label>
										{{ form_widget(form.cardNumber) }}
									</div>
									<div class="col-12 col-md-4"> 
										<label>Security code</label>
										{{ form_widget(form.cardCcv) }}
									</div>									
									<div class="col-12 col-md-4">
										<label>Expiration month</label>
										{{ form_widget(form.cardExpirationMonth) }}
									</div>
									<div class="col-12 col-md-4">
										<label>Expiration year</label>
										{{ form_widget(form.cardExpirationYear) }}
									</div>
									<div class="col-12 col-md-6">
										<button id="pay-policy" type="button" class="btn orange">Pay Policy</button>
									</div>
									<div class="col-12 col-md-6 text-end">
										<button id="issue-policy-and-pay-in-cash-open" type="button" class="btn d-none text-end btn-primary">
											Issue &amp; Pay in cash
										</button>
										<button id="issue-policy-and-pay-in-cash-confirm" type="button" class="btn d-none text-end" style="background: #336699;">
											Confirm
										</button>
									</div>
	                                <center>
	                                	<div class="loadingIssue d-none">
		                                	<img class="activator" src="{{asset('/images/load75x75.gif')}}">
			                            </div>
	                                </center>
	                            </div>
								<div class="clearfix"></div>
							</fieldset>
							{{ form_rest(form) }}
							<input type="hidden" name="form[salePerson]" id="form_salePerson" value="{{ salePerson }}">
							<input type="hidden" name="form[uniqId]" id="form_uniqId" value="{{ uniqid }}">
							<div class="clearfix"></div>
							{# modal de aviso #}
							<div id="avisoModal" class="modal fade">
								<div class="modal-dialog">
									<div class="modal-content">
										<h4 class="center" id="h4AvisoModal"></h4>
										<p class="center" id="pAvisoModal"></p>
										<div class="modal-footer">
											<button type="button" class="btn btn-teal" data-bs-dismiss="modal" aria-label="Close">close</button>
										</div>
									</div>
								</div>
							</div>
							<div id="previewPictureModal" class="modal fade">
								<div class="modal-dialog">
									<div class="modal-content" style="padding: 24px !important;">
										<center>
											<img src="" id="previewPictureImg" style="max-height: 250px;">
										</center>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-teal" data-bs-dismiss="modal" aria-label="Close">close</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>	
			</div>
		</div>
		
	</main>
	<div id="modalExportQuoteOptions" class="modal fade p-5" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
				<div class="modal-content" style="padding:24px;">
					<h4 id="titleExportQuoteSelection">Select plans to send or download</h4>	
					<form id="exportQuoteForm">
						<div class="row">
							<div class="col-md-3 col-sm-12 coveragePackExportQuoteSelection">
								<div class="card-panel">
									<input type="checkbox" class="filled-in default-input" id="fullCoverageOptionQuote" name="form[fullCoverageOptionQuote]">
									<label for="fullCoverageOptionQuote">Full Coverage</label>
								</div>
							</div>						
							<div class="col-md-3 col-sm-12 coveragePackExportQuoteSelection">
								<div class="card-panel">
									<input type="checkbox" class="filled-in default-input" id="limitedCoverageOptionQuote" name="form[limitedCoverageOptionQuote]">
									<label for="limitedCoverageOptionQuote">Limited Coverage</label>
								</div>
							</div>						
							<div class="col-md-3 col-sm-12 coveragePackExportQuoteSelection">
								<div class="card-panel">
									<input type="checkbox" class="filled-in default-input" id="liabilityCoverageOptionQuote" name="form[liabilityCoverageOptionQuote]">
									<label for="liabilityCoverageOptionQuote">Liability Coverage</label>
								</div>
							</div>						
							<div class="clearfix"></div>
							<div class="col-12col-sm-12">
								<div class="card-panel">
									<label>Client email</label><br>
									{{client_email}}
								</div>
								<div class="col-12 m12">
									<label for="form_notificationLang" class="required">Notification language</label>
									<select id="form_notificationLang" name="form[notificationLang]" class="browser-default">
										<option value="en">English</option>
										<option value="es">Español</option>
									</select>
								</div>
								<a class="btn btn-teal" title="Send to client" id="sendQuoteButton">
									{# <i class="material-icons">send</i> #}
									<i class="material-icons">email</i>
								</a>    		    					
								<a class="btn btn-teal" title="Download PDF" id="downloadQuoteButton">
									{# <i class="material-icons">file_download</i> #}
									<i class="material-icons">picture_as_pdf</i>
								</a>
								<a class="btn btn-teal d-none" title="Send renovation quote email" id="sendQuoteRenovationButton">
									<i class="material-icons">send</i>
									<i class="material-icons">refresh</i>
									<i class="material-icons">email</i>
								</a>    		    					
							</div>
							<div class="clearfix"></div>
							<div class="col-12">
								<div class="card-panel d-none" id="errorRenovationFields"></div>
							</div>
						</div>
					</form>
					<div class="modal-footer">
                          <button type="button" class="btn btn-teal" data-bs-dismiss="modal">Close</button>
                    </div>
				</div>
			</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>	
	{# 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') }}
	<div id="questionWithoutVehicularInspectionModal" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content" style="padding:24px;">			
				<p>
					<strong>Attention</strong><br>
					Are you sure to continue without the vehicle inspection?<br>
					If you continue. The current discount will be removed.
				</p>		
				<button class="btn" onclick="catchResponseWithoutVehicularInspection('');">No, I want to complete the vehicle inspection</button>
				<br>
				<button class="btn" id="btnYesContinue" onclick="catchResponseWithoutVehicularInspection('yes');">Yes, Continue</button>
			</div>
		</div>
	</div>
	<div id="receiptQualitas" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content" style="padding:15px;">
				<center>
					<img src="{{asset('/images/companies/qualitas.svg')}}" height="130"><br><br>
					<a class="btn " href="" id="receiptQualitasPDFlink" target="_blank">Download Receipt of payment</a>
					<div id="receiptQualitasPDFMessage" class="d-none"></div>
					<br><br>
					<button class="btn" id="receiptQualitasContinue" type="button">Continue to thank you</button>
				</center>
			</div>
		</div>
	</div>
	{{ include('mx/modals/resident-auto.twig') }}
	{# {{ include('mx/modals/purchase-terms-conditions.html.twig') }} #}
	<input class="form-contol d-none" name="form[ladoIzquierdo]" id="form_ladoIzquierdo" type="file" accept="image/png, image/jpeg">
	<input class="form-contol d-none" name="form[frente]" id="form_frente" type="file" accept="image/png, image/jpeg">
	<input class="form-contol d-none" name="form[ladoDerecho]" id="form_ladoDerecho" type="file" accept="image/png, image/jpeg">
	<input class="form-contol d-none" name="form[trasera]" id="form_trasera" type="file" accept="image/png, image/jpeg">
	<input class="form-contol d-none" name="form[registrationFactura]" id="form_registrationFactura" type="file" accept="application/pdf, image/png, image/jpeg">
{% endblock %}
{% block javascripts %}		
	<script>
		var urlImgDescuento = "{{ asset('/images/icons/resident-auto-qualitas/descuento.png')}}";
		var email = "{{client_email}}"
		var aux = {{arrayToObjectJs|raw}} ?? {};
		//seteo de variable del producto para la funcion de actualizar la informacion del cliente
		product = 'ra qualitas';
		validServOwnerType = $("#form_ownerType").val() == '1' ? 'Person' : 'Company';
	</script>
	<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.js"></script>
    {% endif %}
    {% if userData.role !='ROLE_DISTRIBUTOR'  %}<script src="{{ asset('js/main.js') }}" defer></script> {% endif %}
	<!--Validate-->	
	<script  type="text/javascript" src="{{asset('js/libraries/jquery-validate.js')}}" defer></script>
	<script type="text/javascript" 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-ws-qualitas.js')}}" defer></script>		
	<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyArJXJ0pSlScH82NkwMdz5rwJs1fKZWYps" async defer></script>
	<script src="{{asset('js/libraries/jquery-mask.js')}}" defer></script>
{% endblock %}