{% extends "base.html.twig" %}
{% block title %}Health - NIS{% endblock %}
{% block stylesheets %} 
	{{ parent() }}
    {{encore_entry_link_tags('mainCSS')}}
	{{encore_entry_link_tags('healthCSS')}}
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

	<style type="text/css">
		{% if userData.role =='ROLE_USER_US' %}
			main{padding-left: 0px !important;}
		{% endif %}
	</style>
{% endblock %}
{% block body %}
	{% if  userData.role == "ROLE_USER" or userData.role =='ROLE_ADMIN'  %}
		{{ include("mx/nav_menu.twig", {option:''}) }}
		{% set class = "lg-10 offset-lg-1" %}
		{% set returnButton = "" %}
	{% else %}
		{% set class = "lg-8 offset-lg-2" %}
		{% set returnButton = "<div class='text-end'><a href='/' class='btn blue'><i class='fa-solid fa-arrow-left'></i>Back Homepage</a></div>" %}
	{% endif %}
    <main id="main">
        <div class="row">
            <div class="col-{{class}} col-12">
                {{ returnButton|raw }}
                <div class="white z-depth-1">
                    <div class="container-form" id="content_health_form">
                        <form id="health_form" name="healthForm">
                           	<div class="clearfix"></div><br>
                            <div class="row" id="content_header_form">
								<div class="content-client-name col-md-3 col-sm-12 ">
									<h5 class="verde-comun"><b>Client: </b></h5>
									<Span>{{firstName ~ ' ' ~ lastName ~ ' ' ~ secondLastName}}</Span><br><br>
								</div>
								<div class=" col-md-6 col-sm-12">
									<h3 class="blue-text text-center">Health</h3>
								</div>
								<div class="col-md-3 col-sm-12"></div>
							</div>
							<div class="clearfix"></div><br>
							<div id="makeYourQuoteLabel"class="col-12 text-center" >
								<legend class="quote-title">Make your Quote</legend>
							</div>
							<div class="clearfix"></div><br>
                            <div id="addInsuredSection">
								<div v-for="(insured, key, index) in dataInsureds" :key="insured[key]">
									<div :id="'content_insured_' + key" style="position: relative;"  class="row">
										<h6 :id="'adittional_insured_' + key">
											<span v-if="key == 0"><b>Main Insured</b></span>
											<span v-if="key != 0"><b>Adittional Insured [[key]]</b></span>
											<span></span>
										</h6>
										<div class="clearfix"></div><br>
										<div class="clearfix"></div><br>
										<div class="col-md-4 col-sm-12">
											<label style="color:#333;">Name</label>
											<input type="text" :name="'firstName_insured_'+ key" :id="'firstName_insured_' + key" v-model="insured.firstName_insured" required>
										</div>
										<div class="col-md-4 col-sm-12">
											<label style="color:#333;">Father last name</label>
											<input type="text" :name="'lastName_insured_' + key" :id="'lastName_insured_' + key" v-model="insured.lastName_insured" required>
										</div>
										<div class="col-md-4 col-sm-12">
											<label style="color:#333;">Mother last name</label>
											<input type="text" :name="'secondLastName_insured_' + key" :id="'secondLastName_insured_' + key" v-model="insured.secondLastName_insured">
										</div>
										<div class="col-md-4 col-sm-12">
											<label style="color:#333;">Birthday</label>
											<input type="text" :name="'birthday_insured_' + key" :id="'datepicker_health_' + key" v-model="insured.datepicker_health" class="datepicker" required>
										</div>
										<div class="col-md-4 col-sm-12">
											<label style="color:#333;">Age</label>
											<input type="text" :name="'age_insured_' + key" :id="'age_insured_' + key" readonly v-model="insured.age_insured" required>
										</div>
										<div class="col-md-4 col-sm-12">
											<label style="color:#333;">Gender</label>
											<select :name="'gender_insured_' + key" :id="'gender_insured_' + key" class="browser-default" v-model="insured.gender_insured" style="border-bottom: 1px solid #9e9e9e" required>
												<option value="">Select</option>
												<option value="male">Male</option>
												<option value="female">Female</option>
											</select>
										</div>
										<div class="clearfix" style="margin-bottom: 10px"></div><br>
										<button type="button" v-if="key != 0" class="btn btn-ptimary" :id="'remove_insured_' + key" @click="removeInsured(key)" style="position: absolute; right: 0; bottom: 0">Remove Insured
											<i class="fa-solid fa-xmark"></i>
										</button>
										<div class="clearfix"></div><br>
									</div>
								</div>
								<div class="col-12">
									<a class="btn-floating btn-large " id="add_insured_btn" @click="addInsured()"><i class="fa-solid fa-plus"></i></a>
								</div>
                            </div>
							<div class="clearfix"></div><br>
							<div class="col-12" style="display:flex; justify-content: center; align-items:center; position:relative;" id="content_forma_pago">
								<div class="">
									<label style="color:#333;">Forma de Pago</label>
									<select name="formaPago" id="formaPago" class="browser-default" required>
										<option value="">Select</option>
										<option value="ANUAL">ANUAL</option>
										<option value="SEMESTRAL">SEMESTRAL</option>
										<option value="TRIMESTRAL">TRIMESTRAL</option>
										<option value="BIMESTRAL">BIMESTRAL</option>
										<option value="MENSUAL">MENSUAL</option>
									</select>
								</div>
							</div>
							<div class="clearfix"></div><br>
							<div class="col-12" style="display:flex; justify-content: center; align-items:center; position:relative;" id="card_to_quote">
								<div class="row">
									<div class="col-12 col-md-6">
										<div class="card" style="position: relative; overflow:hidden;">
											<div class="card-content" id="card_vumi">
												<span class="card-title text-center">Vumi Group Quote</span>
												<div class="card-image">
													<img src="{{ asset('/images/companies/vumi.png')}}" alt="" class="img-fluid">
												</div>
											</div>
											<div class="row p-2">
												<input class="check col-5" type="checkbox" name="vumi_check" id="vumi_check" @change="handleChangeCheck('vumi_check','vumi')"/>
												<label for="vumi_check" class="col-5">Quote with Vumi</label>
											</div>
										</div>
									</div>
									<div class="col-12 col-md-6">
										<div class="card" style="position: relative; overflow:hidden;">
											<div class="card-content" id="card_bxmas">
												<span class="card-title text-center">Bx+ Quote</span>
												<div class="content-inputs-bxmas row">
													<div class="col-lg-6 col-sm-12">
														<label style="color:#333;">Tipo de cotizacion:</label>
														<select name="tipoCotizacion" id="tipoCotizacion" @change="typeBxMasPacket()" class="browser-default" disabled>
															<option value="">Select</option>
															<option value="packet">Packet</option>
															<option value="custom">Custom</option>
														</select>
													</div>
													<div class="clearfix"></div><br>
													<div class="col-lg-6 col-sm-12 libre">
														<label style="color:#333;">Nivel Hospitalario</label>
														<select name="nivelHospitalario" id="nivelHospitalario" class="browser-default">
															<option value="">Select</option>
															<option value="ELITE">Elite</option>
															<option value="PLUS">Plus</option>
															<option value="ESTANDAR">Estandar</option>
														</select>
													</div>
													<div class="col-lg-6 col-sm-12 paquete">
														<label style="color:#333;">Estado</label>
														<select name="estado" id="estado" class="browser-default">
															<option value="">Select</option>
															<option value="AGUASCALIENTES">AGUASCALIENTES</option>
															<option value="BAJA CALIFORNIA NORTE">BAJA CALIFORNIA NORTE</option>
															<option value="BAJA CALIFORNIA SUR">BAJA CALIFORNIA SUR</option>
															<option value="CAMPECHE">CAMPECHE</option>
															<option value="CHIAPAS">CHIAPAS</option>
															<option value="CHIHUAHUA">CHIHUAHUA</option>
															<option value="CIUDAD DE MEXICO">CIUDAD DE MEXICO</option>
															<option value="COAHUILA">COAHUILA</option>
															<option value="COLIMA">COLIMA</option>
															<option value="DURANGO">DURANGO</option>
															<option value="ESTADO DE MEXICO">ESTADO DE MEXICO</option>
															<option value="GUANAJUATO">GUANAJUATO</option>
															<option value="GUERRERO">GUERRERO</option>
															<option value="HIDALGO">HIDALGO</option>
															<option value="JALISCO 1(GUADALAJARA Y ALEDAÑOS)">JALISCO 1(GUADALAJARA Y ALEDAÑOS)</option>
															<option value="JALISCO 2 ( RESTO JALISCO)">JALISCO 2 ( RESTO JALISCO)</option>
															<option value="MICHOACAN">MICHOACAN</option>
															<option value="MORELOS">MORELOS</option>
															<option value="NAYARIT">NAYARIT</option>
															<option value="NUEVO LEON">NUEVO LEON</option>
															<option value="OAXACA">OAXACA</option>
															<option value="PUEBLA">PUEBLA</option>
															<option value="QUERETARO">QUERETARO</option>
															<option value="QUINTANA ROO">QUINTANA ROO</option>
															<option value="SAN LUIS POTOSI">SAN LUIS POTOSI</option>
															<option value="SINALOA">SINALOA</option>
															<option value="SONORA">SONORA</option>
															<option value="TABASCO">TABASCO</option>
															<option value="TAMAULIPAS">TAMAULIPAS</option>
															<option value="TLAXCALA">TLAXCALA</option>
															<option value="VERACRUZ">VERACRUZ</option>
															<option value="YUCATAN">YUCATAN</option>
															<option value="ZACATECAS">ZACATECAS</option>
															<option value="EXTRANJERO">EXTRANJERO</option>
														</select>
													</div>
													<div class="col-lg-6 col-sm-12 libre">
														<label style="color:#333;">Tabulador de Honorarios</label>
														<select name="tabuladorHonorarios" id="tabuladorHonorarios" class="browser-default">
															<option value="">Select</option>
															<option value="PLATA- 50,000">PLATA- 50,000</option>
															<option value="PALADIO-60,000">PALADIO-60,000</option>
															<option value="OSMIO-80,000">OSMIO-80,000</option>
															<option value="IRIDIO-90,000">IRIDIO-90,000</option>
															<option value="ORO-110,000">ORO-110,000</option>
															<option value="PLATINO-120,000">PLATINO-120,000</option>
														</select>
													</div>
													<div class="col-lg-6 col-sm-12 libre">
														<label style="color:#333;">Suma Asegurada</label>
														<select name="sumaAsegurada" id="sumaAsegurada" class="browser-default">
															<option value="">Select</option>
															<option value="2,000,000">2,000,000</option>
															<option value="5,000,000">5,000,000</option>
															<option value="10,000,000">10,000,000</option>
															<option value="30,000,000">30,000,000</option>
															<option value="50,000,000">50,000,000</option>
															<option value="125,000,000">125,000,000</option>
														</select>
													</div>
													<div class="col-lg-6 col-sm-12 libre">
														<label style="color:#333;">Deducible</label>
														<select name="deductible" id="deductible" class="browser-default">
															<option value="">Select</option>
															<option value="10,000">10,000</option>
															<option value="15,000">15,000</option>
															<option value="20,000">20,000</option>
															<option value="25,000">25,000</option>
															<option value="30,000">30,000</option>
															<option value="35,000">35,000</option>
															<option value="40,000">40,000</option>
															<option value="45,000">45,000</option>
															<option value="50,000">50,000</option>
															<option value="75,000">75,000</option>
															<option value="100,000">100,000</option>
														</select>
													</div>
													<div class="col-lg-6 col-sm-12 libre">
														<label style="color:#333;">Coaseguro</label>
														<select name="coaseguro" id="coaseguro" class="browser-default">
															<option value="">Select</option>
															<option value="10%">10%</option>
															<option value="15%">15%</option>
															<option value="20%">20%</option>
															<option value="25%">25%</option>
															<option value="30%">30%</option>
														</select>
													</div>
													<div class="col-12 libre">
														<label style="color:#333;">Incluir eliminacion de deducible:</label>
														<select name="eliminarDeducible" id="eliminarDeducible" class="browser-default">
															<option value="">Select</option>
															<option value="Yes">Yes</option>
															<option value="No">No</option>
														</select>
													</div>
													
												</div>
											</div>
											<div class="row p-2">
												<input  class="check col-5" type="checkbox" name="bxmas_check" id="bxmas_check" @change="handleChangeCheck('bxmas_check', 'bx+')"/>
												<label class="col-5" for="bxmas_check">Quote with BxMas</label>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="clearfix"></div><br>
							<div class="col-12 row" id="show_companies_rates" style="position:relative;">
								<div class="col-12 text-center">
									<h6 class="blue-text" style="font-size: 30px; text-align:center;">Select the plans you want to export:</h6>
								</div>
								<div class="col-md-6 col-12" v-for="(company, key, index) in companiesRates" :key="company[key]">
									<div class="row">
										<div class="col-12">
											<h6 v-if="key == 'vumi'"class="text-center plan_section_titles verde-comun">Vumi Plans</h6>
											<h6 v-if="key == 'bx+'"class="text-center plan_section_titles verde-comun">Bx+ Plans</h6>
										</div>
										<div class="clearfix"></div><br>
										<div class="row">
											<div class="card col-12" style="position: relative;" v-for="(rates, keyR, indexR) in company.rates">
												<div class="card-content" style="margin: 0 !important; padding: 20px 0 !important">
													<div class="row" id="content_card_information">
														<div class="col l6 m12 s12">
															<div class="quote-card-logo">
																<img v-if="key == 'vumi'" src="{{ asset('/images/companies/vumi.png')}}" alt="">
																<img v-if="key == 'bx+'" src="{{ asset('/images/companies/bxmas.png')}}" alt="">
															</div>
														</div>
														<div class="col-lg-6 col-12">
															<h6 class="card-title text-center verde-comun" style="text-align:center;">Deductible: [[rates.name]]</h6>
															<div class="clearfix"></div>
															<div class="row"style="margin:0;">
																<div class="col-12">
																	<span class="text-center"><b>Total Premium:</b></span><span class="text-center">[[rates.rates.totalPremium]] [[rates.rates.currency]]</span>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class="card-action row">
													<div class="col-12" style="display: flex; justify-content: center;">
														<input type="checkbox" :class="'check_select_quote' + (key == 'bx+' ? 'bxmas': key) + keyR + ' col-4'" :name="'check_select_quote' + key + keyR" :id="'check_select_quote' + rates.id" @click="selectQuote(key, rates.id, 'check')"/>
														<label :for="'check_select_quote' + rates.id" class="col-5">Export this Quote</label>
													</div>
													{# <div class="col s6" style="display: flex; justify-content: center;">
														<button type="button" class="btn animated bounceIn check_select_btn orange" :id="'btn_select_plan' + rates.id" @click="selectPlan(key, rates.id, 'check')">Select this plan</button>
														<i class="material-icons orange-text small animated bounceIn hide check_circle_btn" :id="'checked_circle_plan' + rates.id" @click="selectPlan(key, rates.id, 'unCheck')">check_circle</i>
													</div> #}
												</div>
											</div>
										</div>
										<div class="clearfix"></div><br>
									</div>
								</div>
								<div class="clearfix"></div><br>
								<div class="row">
									<div class="col-12" style="display:flex; justify-content: center; align-items:center;">
										<a class=" btn btn-primary p-3"  @click="showExportModal()" disabled><i class="fa-solid fa-file-export"></i>Export</a>
									</div>
									{# <div class="col s6" style="display:flex; justify-content: center; align-items:center;">
										<a class="waves-effect waves-light btn" id="btn_continue_to_form" @click="showIframe()" disabled><i class="material-icons left">feed</i>Continue to the company form</a>
									</div> #}
								</div>
								<div class="section_btn_recalculate">
									<a class="waves-effect waves-light btn" @click="recalculate()"><i class="fas fa-redo"></i>Recalculate</a>
								</div>
							</div>
							<div class="col-12 text-center" id="content_btn_quote">
								<a class="btn btn btn-lg btn-teal " @click="quote()"><i class="fas fa-file-alt "></i> Quote </a>
							</div>
							<input type="hidden" id="arrWithQuote" value='{{arrWithQuote}}'>
							{{ form_rest(form) }}
                        </form>
                        <div class="clearfix"></div><br>
                    </div>
					{# iframe for vumi #}
					{# <div class="hide" id="content_vumi_iframe" v-if="iframeCompany == ''">
						<iframe src="{{ path('product_health_vumi_form', {'id_client' : id_client, 'certificate_number' : certificate_number }) }}" scrolling="no"></iframe>
					</div> #}
                </div>
            </div>
        </div>
		<div id="modal_export_quotes" class="modal fade p-5" >
			<div class="modal-dialog modal-lg ">
				<div class="modal-content p-3">
					<h4>Export Your Quotes</h4>
					<div class="row">
						<div class="col-12" style="margin: 10px 0">
							<div>
								<label class="mb-2" for="">Your selected plans:</label><br>
								<span v-if="!selectedQuotes.length">No plans selected!</span>
								<span id="your_select_plan" v-for="(quote, key, index) in selectedQuotes" :key="quote[key]">[[quote]]</span>
							</div>
						</div>
						<div class="col-lg-6 col-12" style="margin: 0 5px">
							<div class="card-panel">
								<label style="font-size: 1rem !important;" for="">Client Email:</label><br>
								[[constractorData.email]]
							</div>
						</div>
						<div class="col-12">
							<a class="btn btn-teal" title="Send to client" id="sendQuoteButton" @click="exportQuote('send')">
								<i class="fa fa-paper-plane left" aria-hidden="true"></i>
								<i class="fa fa-envelope" aria-hidden="true"></i>
							</a>    		    					
							<a class="btn btn-teal" title="Download PDF" id="downloadQuoteButton" @click="exportQuote('download')">
								<i class="fa fa-download left" aria-hidden="true"></i>
								<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
							</a>
						</div>
					</div>
					<div class="modal-footer">
						<a href="#!" class="btn btn-teal" data-bs-dismiss="modal">Close</a>
					</div>
				</div>
			</div>
		</div>
		<input type="hidden" id="form_id_client" value="{{id_client}}">    
    </main>
{# modal para la verificacion de los datos del cliente #}
{{ include('mx/modals/validate-client-info-modal.html.twig') }}
{% endblock %}
{% block javascripts %}
	<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 %}

	<script  type="text/javascript" src="{{asset('js/main.js')}}" defer></script>
	<!--Validate-->	
	<script  type="text/javascript" src="{{asset('js/libraries/jquery-validate.js')}}" defer></script>
	<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')}}"></script>
	<script src="{{asset('js/products/health.js')}}" defer></script>
{% endblock %}