{% extends 'base.html.twig' %}
{% block title %}Policy{% endblock %}
{% block stylesheets %}
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<style type="text/css">
		.browser-default{border-bottom: 1px solid #9e9e9e;}
		#cancellation-date-container{display: none;}
		#boat-hidden{display:none;}
		#tourist-hidden{display:none;}
		#home-hidden{display:none;}
		#address-hidden{display:none;}
		#ana-hidden{display:none;}
		#tourism-hidden{display:none;}
		#tender{display:none;} 
		#tender-2{display:none;} 
		#tender-3{display:none;} 
		#resident-auto-info-hidden{display:none;}
		#resident-auto-address-hidden{display:none;}		
		#touris-auto-qualitas-ws-hidden{display: none;}
		.divider{height:1px; background-color:#e0e0e0;}
		label{font-size:12px;}
		.custom-input, .custom-select {
			border: none;
			border-bottom: 2px solid #ccc;
			border-radius: 0;
			box-shadow: none;
			transition: border-color 0.3s ease;
		}
		.custom-input:focus, .custom-select:focus {
			border-bottom-color: #42a5f5; 
			box-shadow: none;
		}
		.red-text{color:#F44336 }
		.hide{display:none}
	</style>
{% endblock %}
{% block body %}
	{{ include('./components/full-loader-container.html.twig') }}
	{{ include('mx/nav_menu.twig',{option:''}) }}
	<main>
		<div class="row">			
			<form id="policyInfoForm" class=" col-sm-12 p-2 mb-2">
				<div class="row bg-white border rounded  p-2 p-md-5 shadow-sm">
					{# <div class="container-form" style="margin-top:0px;"> #}
					 <div name="PolicyInformationAndAccounting">
							 <div class="col-12">
								<h5 class="text-blue-darken text-center">Policy Information</h5>
								<div class="divider my-3"></div>
							</div>
						<div class="row">
							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="" class="form-label">Issuing Date</label>
								{{ form_widget(form.issuingDate, {'attr': {'placeholder': 'Date', 'class': 'form-control custom-input datepicker'}}) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.typePolicy.vars.id }}" class="form-label">Type Policy*</label>
								{{ form_widget(form.typePolicy, {'attr': {'class': 'form-select custom-select'}}) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.insuranceCompany.vars.id }}" class="form-label">Insurance Company*</label>
								{{ form_widget(form.insuranceCompany, {'attr': {'class': 'form-select custom-select'}}) }}
							</div>
						
							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="" class="form-label">Certificate No.*</label>
								{{ form_widget(form.certificateNumber,{'attr':{'class':'validate form-control custom-input', 'placeholder' : 'MX00TACA000500'}}) }}
							</div>
						
							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.policyNumber.vars.id }}" class="form-label">Policy Number</label>
								{{ form_widget(form.policyNumber,{'attr':{'class':'form-control custom-input validate', 'placeholder' : '0/11783 - A9000'}}) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.term.vars.id }}" class="form-label">Term*</label>
								{{ form_widget(form.term, {'attr': {'class': 'form-select custom-select'}}) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.startDate.vars.id }}" class="form-label">Start Date*</label>
								{{ form_widget(form.startDate,{'attr':{'placeholder':'Date','class':'form-control custom-input datepicker'}}) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.endDate.vars.id }}" class="form-label">End Date*</label>
								{{ form_widget(form.endDate,{'attr':{'placeholder':'Date','class':'form-control custom-input datepicker'}}) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.currency.vars.id }}" class="form-label">Currency*</label>
								{{ form_widget(form.currency, {'attr': {'class': 'form-select custom-select'}}) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.netPremium.vars.id }}" class="form-label">Net Premium*</label>
								{{ form_widget(form.netPremium,{'attr': {'class':'form-control custom-input number-format', 'placeholder' : '0.00'} } ) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.financialSurcharge.vars.id }}" class="form-label">Financial Surcharge*</label>
								{{ form_widget(form.financialSurcharge,{'attr': {'class':'form-control custom-input number-format', 'placeholder' : '0.00'} }) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.policyFee.vars.id }}" class="form-label">Policy Fee*</label>
								{{ form_widget(form.policyFee,{'attr': {'class':'form-control custom-input number-format', 'placeholder' : '0.00'} }) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label class="form-label"> Tax*</label>
								{{ form_widget(form.tax,{'attr': {'class':' form-control custom-input  number-format', 'placeholder' : '0.00'} }) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label class="form-label" >Total Premium*</label>
								{{ form_widget(form.totalPremium,{'attr': {'class':'form-control custom-input number-format','placeholder' : '0.00'} }) }}
							</div>
							{% if canModifySalePerson %}							
							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="form_salePerson" class="form-label">Sale channel</label>
								{{ form_widget(form.saleChannel,{'attr': {'class':'form-select custom-select'}}) }}
							</div>
							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="form_salePerson" class="form-label">Sale person</label>
								{{ form_widget(form.salePerson,{'attr': {'class':'form-control custom-input','placeholder':'Distributor link, Executive Name'}}) }}
							</div>
							{% endif %}
							<div class="col-lg-3 col-md-3 col-sm-12 aboutUs d-none">
								<label for="{{ form.aboutUsList.vars.id }}" class="form-label">About us*</label>
								{{ form_widget(form.aboutUsList, {'attr': {'class': 'form-select custom-select'}}) }}
								{{ form_widget(form.aboutUs, {'attr': {'class': 'form-control custom-input'}}) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 d-none">
								<label for="{{ form.auxAboutUs.vars.id }}" class="form-label">Specify your reference*</label>
								{{ form_widget(form.auxAboutUs, {'attr': {'class': 'form-control custom-input'}}) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3 issuingMode">
								<label for="{{ form.issuingMode.vars.id }}" class="form-label">Issuing mode</label>
								{{ form_widget(form.issuingMode, {'attr': {'class': 'form-control custom-input', 'placeholder':'ws / novamar'}}) }}
							</div>
						</div>
					
							<div class="clearfix"></div>
							<br>

							<h5 class="text-blue-darken text-center">Accounting Information</h5>
							<div class="my-3"><hr></div>
							<br>
						<div class="row">
							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.commission.vars.id }}" class="form-label">Commission. %</label>
								{{ form_widget(form.commission, {'attr': {'class': 'form-control custom-input', 'placeholder' : '0.00'}}) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.totalCommissionAmount.vars.id }}" class="form-label">Total Commission Amount</label>
								{{ form_widget(form.totalCommissionAmount, {'attr': {'class': 'form-control custom-input number-format', 'placeholder' : '0.00'}}) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.commissionToday.vars.id }}" class="form-label">Commission Today</label>
								{{ form_widget(form.commissionToday, {'attr': {'class': 'form-control custom-input number-format', 'placeholder' : '0.00'}}) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.paymentDay.vars.id }}" class="form-label">Payment Day</label>
								{{ form_widget(form.paymentDay, {'attr': {'class': 'form-control custom-input datepicker', 'placeholder' : 'Date'}}) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.paymentForm.vars.id }}" class="form-label">Payment Form</label>
								{{ form_widget(form.paymentForm, {'attr': {'class': 'form-select custom-select'}}) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.paymentType.vars.id }}" class="form-label">Type Payment</label>
								{{ form_widget(form.paymentType, {'attr': {'class': 'form-select custom-select'}}) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.mount.vars.id }}" class="form-label">Amount Paid</label>
								{{ form_widget(form.mount, {'attr': {'class': 'form-control custom-input number-format', 'placeholder' : '0.00'}}) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.paymentStatus.vars.id }}" class="form-label">Payment Status</label>
								{{ form_widget(form.paymentStatus, {'attr': {'class': 'form-select custom-select'}}) }}
							</div>

							<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.policyStatus.vars.id }}" class="form-label">Policy Status</label>
								{{ form_widget(form.policyStatus, {'attr': {'class': 'form-select custom-select'}}) }}
							</div>

							<div id="cancellation-date-container" class="col-lg-3 col-md-3 col-sm-12 mb-3">
								<label for="{{ form.cancellationDate.vars.id }}" class="form-label">Cancellation Date</label>
								{{ form_widget(form.cancellationDate, {'attr': {'class': 'form-control custom-input datepicker', 'placeholder' : 'mm/dd/YYYY'}}) }}
							</div>

							<div class="col-sm-12 mb-3">
								<label for="{{ form.comments.vars.id }}" class="form-label">Comments</label>
								{{ form_widget(form.comments, {'attr': {'class': 'form-control custom-input', 'placeholder' : 'Write your notes (Max. 300 characters)'}}) }}
							</div>
						</div>
					</div>
						<div id="address-hidden" class="col-12" name="AddressLiability">
							<div class="clearfix"></div><br>
							<h5 class="text-blue-darken text-center">Address Policy Information</h5>
							<div class="divider"></div><br>
							<div class="row">
								<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
									<label for="{{ addressform.address.vars.id }}" class="form-label">Address</label>
									{{ form_widget(addressform.address, {'attr': {'class': 'form-control custom-input'}}) }}
								</div>

								<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
									<label for="{{ addressform.postalCode.vars.id }}" class="form-label">Postal Code</label>
									{{ form_widget(addressform.postalCode, {'attr': {'class': 'form-control custom-input'}}) }}
								</div>

								<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
									<label for="{{ addressform.city.vars.id }}" class="form-label">City</label>
									{{ form_widget(addressform.city, {'attr': {'class': 'form-control custom-input'}}) }}
								</div>

								<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
									<label for="{{ addressform.state.vars.id }}" class="form-label">State</label>
									{{ form_widget(addressform.state, {'attr': {'class': 'form-control custom-input'}}) }}
								</div>

								<div class="col-lg-3 col-md-3 col-sm-12 mb-3">
									<label for="{{ addressform.country.vars.id }}" class="form-label">Country</label>
									{{ form_widget(addressform.country, {'attr': {'class': 'form-control custom-input'}}) }}
								</div>
							</div>
						</div>
						{# {% include 'mx/partialForms/medical_tourism.html.twig' %} #}
						{% include 'mx/partialForms/autoana.html.twig' %}
						{% include 'mx/partialForms/homeinfo.html.twig' %} 
						{% include 'mx/partialForms/autoinfo.html.twig' %}
						{% include 'mx/partialForms/boatinfo.html.twig' %}
						{% include 'mx/partialForms/residentAutoInfo.html.twig' %}					
						{% include 'mx/partialForms/touristAutoQualitasWsInfo.html.twig' %}					

						<div name="ExtraParams">
							{% if canModifySalePerson == false %}<input type="hidden" name="form[salePerson]" value='{{ salePerson }}'>{% endif %}		
							<input type="hidden" name="form[id_liability]" value="{{ id_liability }}"></input>
							<input type="hidden" name="form[action]" value="{{ action }}"></input>
							<input type="hidden" name="form[id_client]" value="{{ id_client }}"></input>
							<input type="hidden" name="form[idPolicy]" value="{{ id_policy }}"></input>
							<input type="hidden" name="form[option]" value="PolicyInformation"></input>
							<input type="hidden" name="form[no_info]" value="{{ no_info }}"></input>
							<input type="hidden" id="agent_code" name="Form[agentCode]" value="{{ agentCode }}"> 
							<input type="hidden" name="form[uniqId]" value="{{ uniqId }}"></input>
						</div>
						<div class="clearfix"></div><br><br>
						<div class="col-sm-12 ">
							<div class="text-center">
								<button type="button" id="save-information" class="btn btn-primary btn-lg">
									Save Information <i class="fas fa-paper-plane"></i>
								</button><br>
								<div id="container-preloader">
									<div class="preloader-wrapper big active">
										<div class="spinner-layer spinner-blue-only">
											<div class="circle-clipper left">
												<div class="circle"></div>
											</div>
											<div class="gap-patch">
												<div class="circle"></div>
											</div>
											<div class="circle-clipper right">
												<div class="circle"></div>
											</div>
										</div>
									</div><br>
									<b class="color-text-teal">Loading...</b>
								</div>	
							</div>					
						</div>
					{# </div><!-- Finish container Form --> #}
				</div>
			</form>
		</div>		
	</main>
	
{% 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 src="{{asset('/js/complements/jquery-number.js')}}" defer></script>
    <script  type="text/javascript" src="{{asset('js/main.js')}}" defer></script>
	<script  type="text/javascript" src="{{asset('js/complements/about-us-list.js')}}" defer></script>
	<script  type="text/javascript" src="{{asset('js/products/homeowners-add-policy.js')}}" defer></script>
	<script  type="text/javascript" src="{{asset('js/products/torist-auto-qualitas-ws-add-policy.js')}}" defer></script>
	<script  type="text/javascript" src="{{asset('js/products/resident-auto-add-policy.js')}}" defer></script>
	<script  type="text/javascript" src="{{asset('js/complements/account.js')}}" defer></script>
	<script  type="text/javascript" src="{{asset('js/pages/policy-action.js')}}" defer></script>
	{# <script>
		document.addEventListener('DOMContentLoaded', function() {
					// Elimina el parámetro 'policy_update' de la URL
					const url = new URL(window.location.href);
					url.searchParams.delete('policy_update');
					window.history.replaceState({}, document.title, url);
				});
	</script> #}
	<script>
    	var aux = {};
		//  datos de Twig a JavaScript
		{% for key, element in arrayToObjectJs %}
			aux.{{ key }} = "{{ element }}";
		{% endfor %}
	</script>
{% endblock %}