{% set layout = userData.role != 'ROLE_DISTRIBUTOR' ? 'base.html.twig' : 'layout-distributors.html.twig' %}
{% extends layout %}
{% block title %}Customer Form - NIS
{% endblock %}
{% block stylesheets %}
	<style>
		.card-container {
			margin-top: 28px;
		}
		.tabs .tab a {
			color: #0d47a1;
		}
		.tabs .tab a:hover {
			color: #1e88e5;
		}
		.tabs .indicator {
			background-color: #1e88e5;
		}
		input[type=text]:not(.browser-default) {
			margin-bottom: 0;
		}
		.hidde{
			display: none;
		}
		.input-field {
			margin-bottom: 10px;
		}
		.myReadOnly{color: rgba(0,0,0,0.42);}
	</style>
{% endblock %}
{% block body %}
{% if userData.role != 'ROLE_DISTRIBUTOR' %}
	{{ include("mx/nav_menu.twig", {option:'customers'}) }}
{% else %}
	{{ include("distributors/nav_menu.twig", {option:'addClient'}) }}
{% endif %}
	<main>
		<div class="row card-container justify-content-center">
			<form id="customerForm" name="customerForm" class="col-10">
				<div class="row card z-depth-1">
					<div class="container-form">
					{% if userData.role == "ROLE_DISTRIBUTOR" %}
						{% if disabledOnEdit %}
						<div class='right-align'><a href="/distributors/customer-profile/{{customerId}}" class='btn btn-orange'><i class='fa-solid fa-arrow-left'></i></a></div>
							<h4 class="center-align">View Client </h4>		
						{% else %}
							<h4 class="center-align">Add Client </h4>
						{% endif %}		
					{% else %}					
						<h4 class="text-center">Customer</h4>
					{% endif %}
						<div class="line orange"></div>

						{# loader por si existe el customerId #}
						<div data-loader="loader" class="d-flex justify-content-center align-items-center {% if customerId is null %} d-none {% endif %}" style="min-height:70vh">
							<div class="spinner-border text-secondary" style="width: 3rem; height: 3rem" role="status">
								<span class="visually-hidden">Loading...</span>
							</div>
						</div>
						
						<div data-loader="content" class="row {% if customerId is not null %} d-none {% endif %}">
							<div class="col-12 col-md-6">
								<label class="form-label" for="form_ownerType">Owner Type</label>
								{% if disabledOnEdit == false or userData.role !='ROLE_DISTRIBUTOR'  %}
									{{ form_widget(form.ownerType) }}
								{% else %}
									<input type="text" id="form_ownerType" name="form[ownerType]" value="" class="myReadOnly" readonly>
								{% endif %}
							</div>
							<div class="col-12 col-md-6 contractingName">
								<label class="form-label" for="form_contractingName">Contracting Name</label>
								{{ form_widget(form.contractingName, {'attr': {class: 'form-control', 'placeholder':'Contracting Name'}}) }}
							</div>
						
							<div class="col-12 col-md-6 person">
								<label class="form-label" for="form_firstName">Insured First Name*</label>
								{{ form_widget(form.firstName,{'attr': {class: 'form-control', 'placeholder':'First Name'}}) }}
							</div>
							<div class="col-12 col-md-6 person">
								<label class="form-label" for="form_lastName">Insured Father's Last Name*</label>
								{{ form_widget(form.lastName,{'attr': {class: 'form-control', 'placeholder':"Father's Last Name"}}) }}
							</div>
							<div class="col-12 col-md-6 person">
								<label class="form-label" for="form_secondLastName">Insured Mother's Last Name</label>
								{{ form_widget(form.secondLastName,{'attr':{class: 'form-control', 'placeholder':"Mother's Last Name"}}) }}
							</div>
							<div class="col-12 col-md-6 company">
								<label class="form-label" for="form_company">Company Name</label>
								{{ form_widget(form.company,{'attr': {class: 'form-control', 'placeholder':'Company'}}) }}
							</div>
							<div class="col-12 col-md-6">
								<label class="form-label" for="form_otherInsured">Other Insured Name</label>
								{{ form_widget(form.otherInsured, {'attr':{class: 'form-control', 'placeholder':"Other Insured Name"}}) }}
							</div>
							<div class="col-12 col-md-6">
								<label class="form-label" for="form_birthday">Birthday<span id="dateByOwnerType"></span>(mm/dd/YYYY)</label>
								{{ form_widget(form.birthday,{'attr': {class: 'form-control', 'placeholder':'mm/dd/YYYY', 'maxlength' : '10'}}) }}
							</div>
							<div class="col-12 col-md-6">
								<label class="form-label" for="form_email" data-error="Wrong Email" data-success="Correct">Email*</label>
								{{ form_widget(form.email,{'attr': {class: 'form-control', 'placeholder':'example@company.com', 'class':'validate'}}) }}
							</div>
							<div class="col-12 col-md-6">
								<label class="form-label" for="form_nationality" id="nationalityByOwnerType">Client Nationality*</label>
								{{ form_widget(form.nationality,{'attr': {'class':'validate'}}) }}
							</div>
							<div class="col-12 col-md-6 person">
								<label class="form-label" for="form_gender">Client Gender*</label>
								{{ form_widget(form.gender,{'attr': {'class':'validate'}}) }}
							</div>
							<div class="col-12 col-md-6">
								<label class="form-label" for="form_phone">Phone*</label>
								{{ form_widget(form.phone,{'attr': {class: 'form-control phone-format', 'placeholder':'Ex. 322-123-4567'}}) }}
							</div>
							<div class="col-12 col-md-6">
								<label class="form-label" for="form_phone2">Work Phone</label>
								{{ form_widget(form.phone2,{'attr': {class: 'form-control phone-format', 'placeholder':'Ex. 332-789-525'}}) }}
							</div>
							<div class="col-12 col-md-6">
								<label class="form-label" for="form_occupation">Occupation</label>
								{{ form_widget(form.occupation,{'attr': {class: 'form-control', 'placeholder':'Occupation'}}) }}
							</div>
							<div class="col-12 col-md-6">
								<label class="form-label" for="form_rfc">R.F.C.</label>
								{{ form_widget(form.rfc,{'attr': {class: 'form-control', 'placeholder':'RFC'}}) }}
							</div>
							<div class="col-12 col-md-6 reference">
								{{ form_widget(form.reference) }}
								<label class="form-label" for="form_aboutUsList">How do you hear about us?</label>
								{{ form_widget(form.aboutUsList) }}
							</div>

							<div class="col-12 col-md-6 d-none">
								<label class="form-label" for="form_auxAboutUs">Specify your reference</label>
								{{ form_widget(form.auxAboutUs, {attr: {class: 'form-control'}}) }}
							</div>
						
							<div class="col-12 col-md-6 d-none">
								<label class="form-label" for="form_saleChannel">Sale channel</label>
								{{ form_widget(form.saleChannel, {attr: {class: 'form-control'}})}}
							</div>
							<div class="col-12 col-md-6 d-none">
								<label class="form-label" for="form_salePerson">Sale person</label>
								{{ form_widget(form.salePerson,{'attr': {class: 'form-control', 'placeholder':'Client, Distributor link, Executive Name'}}) }}
							</div>
							<div class="col-12">
								<label class="form-label" for="form_comments">Comments</label>
								{{ form_widget(form.comments,{'attr':{'class':' form-control', 'length':'120', 'rows':'2'}})}}
							</div>
						
							<!--Address Fields-->
							<div class="col-12 col-md-6">
								<label class="form-label" for="form_address">Address</label>
								{{ form_widget(form.address,{'attr': {class: 'form-control', 'placeholder':'Address'}}) }}
							</div>
							<div class="col-12 col-md-6">
								<label class="form-label" for="form_postalCode">Zip Code</label>
								{{ form_widget(form.postalCode,{'attr': {class: 'form-control', 'placeholder':'Ex. 40668'}}) }}
							</div>
						
							<div class="col-12 col-md-6 county">
									<label class="form-label" for="form_county">County | Neighborhood</label>
									{{ form_widget(form.county,{'attr': {class: 'form-control', 'placeholder':'County or Neighborhood', 'class' : 'autocomplete'}}) }}
							</div>
							<div class="col-12 col-md-6">
								<label class="form-label" for="form_city">City</label>
								{{ form_widget(form.city, {'attr': {class: 'form-control', 'placeholder':'Ex. Puerto Vallarta'}}) }}
							</div>
							<div class="col-12 col-md-6">
								<label class="form-label" for="form_state">State</label>
								{{ form_widget(form.state, {'attr': {class: 'form-control', 'placeholder':'Ex. Jalisco'}}) }}
							</div>
							<div class="col-12 col-md-6">
									<label class="form-label" for="form_country">Country</label>
								{% if disabledOnEdit == false or userData.role !='ROLE_DISTRIBUTOR' %}
									{{ form_widget(form.country, {'attr': {'placeholder':'México'}}) }}
								{% else %}
									<input type="text" id="form_country" name="form[country]" value="" class="myReadOnly" readonly>
								{% endif %}
							</div>
							
							<div class="col-12 mt-3">
								<center>
									<button type="button" id="save" class="btn btn-lg btn-teal d-flex align-items-center justify-content-center ">
										Save Information
										<i class="fa fa-paper-plane ps-2" aria-hidden="true"></i>
									</button>
								</center>
							</div>
						</div>
					</div>
				</div>
				<input type="hidden" name="form[option]" value="BasicInformation">
				<input type="hidden" id="agent_code" name="form[agentCode]" value="">
				<input type="hidden" id="customerId" name="form[id_client]" value="{{ customerId }}">
				<input type="hidden" id="DataToSearchInSicas" name="form[DataToSearchInSicas]" value="">
				{{ form_widget(form.statusOfRecord) }}
			</form>
		</div>
	</main>
{% endblock %}
{% block javascripts %}
	{% if userData.role !='ROLE_DISTRIBUTOR'  %}<script src="{{ asset('js/main.js') }}" defer></script> {% endif %}
	<script src="{{ asset('js/libraries/jquery-validate.js') }}" defer></script>
	<script src="{{ asset('js/libraries/jquery-mask.js') }}" defer></script>
	<script src="{{ asset('js/complements/about-us-list.js') }}" defer></script>
	<script src="{{ asset('js/pages/customer-form.js') }}" defer></script>
{% endblock %}