{% extends 'base.html.twig' %}
{% block title %}Distributor Form - NIS{% endblock %}
{% block stylesheets %} 
	{{ parent() }}
	{{encore_entry_link_tags('mainCSS')}}
	<style>
		input:not([type]):disabled, input[type=text]:disabled {
			    color: #0089ec;
			}
		.select-wrapper input.select-dropdown:disabled { color: #0089ec; }			
		.default-input {
			display: inline;
			height: 1.5rem;
			margin: auto;
			width: auto;
			height: auto;
			box-shadow: none !important;
		}
		  .form-group {
		display: flex;
		align-items: center;
		margin-bottom: 10px; 
	}
	</style>
{% endblock %}
{% block body %}
	{{ include("mx/nav_menu.twig",{option:'distributors'}) }}
	<main>
		<div class="row">
			<form id="distributorForm" class="col-lg-10 offset-md-1 col-md-10  col-12">
				<div class="row white z-depth-1">
					<div class="container-form row">
						<h4 class="center-align">Distributor</h4>
						<div class="line orange"></div><br><br>
						<div class="col-12 col-md-6">
							{{ form_label(form.companyName) }}
							{{ form_widget(form.companyName, {'attr':{'placeholder': 'Company Name', 'class' :'no-validate' }} ) }}
						</div>
						<div class="col-12 col-md-6">
							{{ form_label(form.contactName) }}
							{{ form_widget(form.contactName, {'attr':{'placeholder': 'Contact Name' }} ) }}
						</div>
						<div class="col-12 col-md-6">
							{{ form_label(form.contactLastName) }}
							{{ form_widget(form.contactLastName, {'attr':{'placeholder': 'Contact Last Name' , 'class' :'no-validate'}} ) }}
						</div>
						<div class="col-12 col-md-6">
							{{ form_label(form.phone) }}
							{{ form_widget(form.phone, {'attr':{'placeholder': 'Phone' , 'class' :'no-validate'}} ) }}
						</div>
						<div class="col-12 col-md-6">
							{{ form_label(form.email) }}
							{{ form_widget(form.email, {'attr':{'placeholder': 'example@domain.com' }} ) }}
						</div>
						<div class="col-12 col-md-6">
							{{ form_label(form.address) }}
							{{ form_widget(form.address, {'attr':{'placeholder': 'Address', 'class' :'no-validate' }} ) }}
						</div>
						<div class="col-12 col-md-6">
							{{ form_label(form.county) }}
							{{ form_widget(form.county, {'attr':{'placeholder': 'County', 'class' :'no-validate' }} ) }}
						</div>
						<div class="col-12 col-md-6">
							{{ form_label(form.city) }}
							{{ form_widget(form.city, {'attr':{'placeholder': 'City' , 'class' :'no-validate' }} ) }}
						</div>
						<div class="col-12 col-md-6">
							{{ form_label(form.state) }}
							{{ form_widget(form.state, {'attr':{'placeholder': 'State', 'class' :'no-validate' }} ) }}
						</div>
						<div class="col-12 col-md-6">
							{{ form_label(form.postalCode) }}
							{{ form_widget(form.postalCode, {'attr':{'placeholder': 'postalCode', 'class' :'no-validate'  }} ) }}
						</div>
						<div class="col-12 col-md-6">
							{{ form_label(form.country) }}
							{{ form_widget(form.country, {'attr':{'placeholder': 'Country', 'class' :'no-validate' }} ) }}
						</div>
						<div class="col-12 col-md-6">
							{{ form_label(form.licenseNumber) }}
							{{ form_widget(form.licenseNumber, {'attr':{'placeholder': 'License Number', 'class' :'no-validate' }} ) }}
						</div>
						<div class="col-12 col-md-6">
							{{ form_label(form.website) }}
							{{ form_widget(form.website, {'attr':{'placeholder': 'https://www.example.com' , 'class' :'no-validate' }} ) }}
						</div>
						<div class="col-12 col-md-6">
							{{ form_label(form.contractDate) }}
							{{ form_widget(form.contractDate, {'attr':{'placeholder': 'mm/dd/YYYY', 'class' :'no-validate' }} ) }}
						</div>
						<div class="col-12 col-md-6">
							{{ form_label(form.typeIntermediary) }}
							{{ form_widget(form.typeIntermediary, {'attr':{'placeholder': 'Type Intermediary' }} ) }}
						</div>
						<div class="col-12 col-md-6">
							{{ form_label(form.status) }}
							{{ form_widget(form.status, {'attr':{'placeholder': 'Status' }} ) }}
						</div>
						<div class="clearfix"></div>
						{% if option =='create' %}
							<span >Create User</span>
							<div class="d-flex">
								<label class="label-header me-2">No</label> 
								<div class="form-check form-switch">
									<input class="form-check-input" type="checkbox" id="form_createUser" name="form[createUser]" >
									<label class="label-header form-check-label" for="form_createUser"></label>
								</div>
								<label class="label-header ms-2">Yes</label> 
							</div>
						{% endif %}
						<!-- Campos adicionales ocultos para usuario-->
						<div id="additionalFields"  class="row d-none">
							<div class="col-6">
								<label for="username">Username:</label>
								<input type="text" id="username" name="form[username]" class="form-control">
							</div>
							<div class="col-6">
								<label for="password">Password:</label>
								<input type="password" id="pwd" name="form[password]" class="form-control">
							</div>
						</div>
						{% if option =='create' %}
							<span >Add Products</span>
							<div class="d-flex">
								<label class="label-header me-2">No</label> 
								<div class="form-check form-switch">
									<input class="form-check-input" type="checkbox" id="form_addProducts" name="form[addProducts]" >
									<label class="label-header form-check-label" for="form_addProducts"></label>
								</div>
								<label class="label-header ms-2">Yes</label> 
							</div>
						{% endif %}
						<div id="productsFields"  class="row d-none">
							<div class="col-6">
								<label for="code">Code:</label>
								<input type="text" id="code" name="form[code]" class="form-control">
							</div>
							<div class="col-6">
								<label for="distributorLink">Distributor link:</label>
								<input type="text" id="distributorLink" name="form[distributorLink]" class="form-control">
							</div>
							
							<div class="form-group row col-12">
									<label >Products:</label><br>
									<label class="col-6 col-lg-4">
										<input type="checkbox" name="insuranceType[]" value="Tourist Auto" class="default-input">
										Tourist Auto
									</label>
									<label class="col-4">commisssion percent:</label> <input class="col-1 col-lg-3 " type="number" id="commmisionTA" name="form[commmisionTA]">
									<br>
									<label class="col-6 col-lg-4">
										<input type="checkbox" name="insuranceType[]" value="Resident Auto" class="default-input">
										Resident Auto
									</label>
									<label class="col-lg-4 col-5">commisssion percent:</label> <input type="number" id="commmisionRA" name="form[commmisionRA]" class=" col-1 col-lg-3 ">
									<br>
									<label class="col-6 col-lg-4">
										<input type="checkbox" name="insuranceType[]" value="Boat Liability" class="default-input">
										Boat Liability
									</label>
									<label class="col-lg-4 col-5">commisssion percent:</label> <input type="number" id="commmisionBL" name="form[commmisionBL]" class="col-1 col-lg-3 ">
									<br>
									<label  class="col-6 col-lg-4">
										<input type="checkbox" name="insuranceType[]" value="Health" class="default-input">
										Health
									</label>
									<label class="col-lg-4 col-5">commisssion percent:</label> <input type="number" id="commmisionHealth" name="form[commmisionHealth]" class="col-1 col-lg-3 ">
									<br>
									<label  class="col-6 col-lg-4">
										<input type="checkbox" name="insuranceType[]" value="Travel" class="default-input">
										Travel
									</label>
									<label class="col-lg-4 col-5">commisssion percent:</label> <input type="number" id="commmisionTM" name="form[commmisionTM]" class="col-1 col-lg-3 ">
							</div>
						</div>

						<div class="col-12">
							{{ form_label(form.notes) }}
							{{ form_widget(form.notes,{'attr':{ 'class' :'no-validate form-control' }} ) }}
						</div>
						<div class="clearfix"></div>
						{#<div class="col l3 m6 s12">
							{{ form_label(form.imageName1) }}
							{{ form_widget(form.imageName1) }}
						</div>
						<div class="col l3 m6 s12">
							{{ form_label(form.linkName1) }}
							{{ form_widget(form.linkName1) }}
						</div>#}
						
						<div class="clearfix"></div>

						{# {% if method != ''%}
							<input type="hidden" id="_method" name="_method" value="{{ method }}" />
						{% endif %} #}
						
						{{ form_rest(form) }}
						<div class="col-12 mt-3">
							<center>
								<button type="button" id="save-info" class="btn btn-lg btn-teal d-flex align-items-center justify-content-center mb-2">
									Save Information
									<i class="fa fa-paper-plane ps-2" aria-hidden="true"></i>
								</button>
							</center>
						</div>
					</div>
				</div>	
			</form>
		</div>
	</main>
	
{% endblock %}
{% block javascripts %}
    <!-- jQuery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>
	<script type="text/javascript" src="{{asset('js/main.js')}}" defer></script>
	<script type="text/javascript" src="{{ asset('js/libraries/jquery-validate.js') }}"></script>
	<script src="{{ asset('js/libraries/jquery-mask.js') }}" defer></script>
	<script>
		$(function(){
			
			 $('#distributorForm').validate({
				rules: {
					'form[contactName]': { required: true },
					'form[email]': {required: true	},
					'form[typeIntermediary]':{required: true},
					'form[status]':{required: true}
				},
				errorClass: 'invalid',
        		errorElement: 'span',
				ignore: '.no-validate' 
			});
				$("#save-info").on('click', function(){
					var valid = $("#distributorForm").valid();
					if(valid){
						if ($("#form_createUser").prop("checked") && $('#username').val() == '') {
							Swal.fire({
									text: 'Username is required.',
									icon: 'warning',
								});
						}else{
							var params = $("#distributorForm").serializeArray();
							params.push({name: 'form[distributorId]', value : "{{distributorId}}"});
							params.push({name: 'form[option]', value : "{{option}}"});
							var selectedInsuranceTypes = [];
							if ($("#form_addProducts").prop("checked")){
								$("input[name='insuranceType[]']:checked").each(function() {
									selectedInsuranceTypes.push($(this).val());
								});
								params.push({ name: 'form[insuranceType]', value: selectedInsuranceTypes });
								if($('#distributorLink').val() == '') {
									Swal.fire({
											text: 'distributor link is required.',
											icon: 'warning',
										});
								}
							}
							$.ajax({
								type : 'POST',
								url :`${getUrlApiByEnvironment(ENV)}/${API_SERVICE.DISTRIBUTORS}`,
								data : parameterConversionForApi(params)
							}).then(
								function(resp){
									if(resp.code == 200 && resp.status == 'success')
									redirectTo('/mx/views/distributors')
									else 
									toastError({message:resp.error, position:'center',timeout:1500});
								},
								function(err){
									const errorMessage = err.responseText.substring(0, 160);
									swalWarningMessage({message:'Error to Save Information: '+ errorMessage});
								}
							);
						}
					}
				});
				
                // Función para mostrar y ocultar los campos adicionales según el switch
				function toggleFields() {
					var createUserSwitch = document.getElementById("form_createUser");
					if (createUserSwitch.checked) {
						$('#additionalFields').removeClass('d-none'); 
						$('#username').val($('#form_email').val())
					} else {
						$('#additionalFields').addClass('d-none'); 
					}
				}
				function toggleProducts() {
					var addProductsSwitch = document.getElementById("form_addProducts");
					if (addProductsSwitch.checked) {
						$('#productsFields').removeClass('d-none'); 
						
					} else {
						$('#productsFields').addClass('d-none'); 
					}
				}
				$("#form_createUser").on('change', function() {
					toggleFields();
				});

				$("#form_addProducts").on('change', function() {
					toggleProducts();
				});

			//initForm();
			//processInfo();

			$('#form_phone').mask('(000) 000-0000');		
		});
	</script>
{% endblock %}