@extends('layouts.app')

@section('content')
	<div class="row justify-content-center" style="margin-top:1em">
		<div class="col-10">

			<div class="card shadow p-3 mb-5 bg-body rounded">
				<div class="row justify-content-center" style="margin-top:0em;margin-bottom:0em;padding:0em">
					<div class="col-12" align="center" style="color:#222222;font-family:Soho Std;font-size:2.2em">
						Registro de Vehículos (Falta Administrativa)
					</div>
				</div>
				<hr/>
				<div class="card-body" style="padding:0em 2em 2em 2em">
					<form id="currentForm" method="POST" action="{{ route('storeVehiclesFault') }}">
					@csrf

						<div class="row justify-content-center">
							<div class="col-12">
								<a href="{{route('vehiculos')}}" style="cursor: pointer;text-decoration: none;color:darkslateblue;font-size:1.1em">
									<strong>
										<i class="fas fa-arrow-left"></i> Volver
									</strong>
								</a>
							</div>
						</div>

						<ul class="nav nav-pills" id="myTab" role="tablist" style="margin-top:1em;border-bottom:1px #4180a5 solid">
							<li class="nav-item" role="presentation">
								<button  type="button" id="tab_general_1" data-bs-target="#general_section_1" class="nav-link active" style="cursor:default">
									Generales 1
								</button>
							</li>
							<li class="nav-item" role="presentation">
								<button  type="button" id="tab_general_2" data-bs-target="#general_section_2" class="nav-link" style="cursor:default">
									Generales 2
								</button>
							</li>
						</ul>

						<div class="tab-content" id="myTabContent">

							<div id="general_section_1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tab_general_1">
								<div class="row justify-content-center" style="margin-top:1em">
									<div class="col-11">
										<div class="row justify-content-center" style="margin-top:1em">
											<div class="col-5">
												<label class="form-label">Buscar código</label>
												<input id="search_code"  name="search_code" type="text" class="form-control">
											</div>
											<div class="col-1" style="padding-top:2em" align="right">
												<button type="button" class="btn btn-primary btn-block" onclick="searchCode()">
													<i class="fas fa-search"></i>
												</button>
											</div>
											<div class="col-6">
												<label class="form-label">Código</label>
												<select id="code" name="code" class="form-control select2" onchange="getDataByCode()">
													<option value="">-- Seleccione un valor --</option>
													@foreach($codes as $item)
														<option value="{{ $item['id'] }}"
														>{{ ucfirst($item['code']) }}</option>
													@endforeach
												</select>
											</div>
										</div>
										<div class="row justify-content-center" style="margin-top:1em">
											<div class="col-11">
												<label for="element" class="form-label">Primer respondiente</label>
												<input id="element" name="element" type="text" class="form-control" disabled>
											</div>
											<div class="col-1" style="padding-top:2em" align="right">
												<button type="button" class="btn btn-primary btn-block" onclick="viewMoreData()">
													<i class="fas fa-info"></i>
												</button>
											</div>
										</div>

											@include('vehicles_fault.form1VehiclesFault')

									</div>
								</div>
							</div>

							<div id="general_section_2" class="tab-pane fade" role="tabpanel" aria-labelledby="tab_general_2">

								<div class="row justify-content-center" style="margin-top:1em">
									<div class="col-11">

											@include('vehicles_fault.form2VehiclesFault')

									</div>
								</div>
							</div>

						</div>

						<div class="row justify-content-center" style="margin-top:1.5em">
							<div class="col-6" align="left" style="padding-left:6%">
								<button id="buttonPrev" type="button" class="btn btn-primary btn-block" onclick="prevSection()">Anterior</button>
							</div>
							<div class="col-6" align="right" style="padding-right:6%">
								<button id="buttonNext" type="button" class="btn btn-primary btn-block" onclick="nextSection()">Siguiente</button>
								<button id="buttonSubmit" type="button" class="btn btn-primary btn-block" style="display:none" onclick="sendForm()">Registrar</button>
							</div>
						</div>

					</form>
				</div>
			</div>

		</div>
	</div>


	<!-- Modal -->
	<div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-xl">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title text-success" id="exampleModalLabel">Búsqueda de código por primer respondiente</h4>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-12" align="center">
							<table id="table_result"  class="table table-bordered table-hover" style="width:100%">
								<thead>
								<tr>
									<th>Código</th>
									<th>Primer respondiente</th>
									<th></th>
									<th></th>
								</tr>
								</thead>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<!-- Modal -->
	<div class="modal fade" id="errorModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title text-danger" id="exampleModalLabel">Alerta</h4>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body" style="padding-top:3em;padding-bottom:3em;">
					<div class="row">
						<div class="col-12" align="center">
							<h5>No se encontro ninguna coincidencia</h5>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

@endsection

@section('js-files')

	<script type="text/javascript">

		var currentTab = 1;
		var successModal = null;
		var errorModal = null;

		var reqFieldsTab1 = [
			'code',
			'vehicle_date',
			'vehicle_hour',
			'vehicle_type',
			'vehicle_brand',
			'vehicle_serie',
			'other_vehicle_type',
			'name_transfer_place',
            'vehicle_provenance',
            'vehicle_use'
		];

		var reqFieldsTab2 = [
			'observations',
			'institution_first_respondent',
			'first_respondent'
		];

		$( document ).ready(function() {

			document.getElementById('offenseCollapse').setAttribute("aria-expanded", true);
			document.getElementById('offense').classList.add("show");

			fillDefaultData();

			successModal = new bootstrap.Modal(document.getElementById('successModal'));
			errorModal = new bootstrap.Modal(document.getElementById('errorModal'));

			successModal = new bootstrap.Modal(document.getElementById('successModal'));
			errorModal = new bootstrap.Modal(document.getElementById('errorModal'));

		});

		function fillDefaultData(){
			document.getElementById("institution_first_respondent").value=6;
			getInfoElements();
		}


		function searchCode() {
			var word = document.getElementById("search_code").value;

			$.ajax({
				url: "{{ route('searchCode') }}",
				headers: {"X-CSRF-TOKEN": "{{ csrf_token() }}" },
				type: 'post',
				data:{ word:word },
				dataType: "json",
				success: function(response){

					if(response.result){

						$('#table_result').DataTable( {
							data: response.registers,
							columns: [
								{ data: 'code' },
								{ data: 'element' },
								{ data: 'more','className': 'dt-center' },
								{ data: 'selected','className': 'dt-center' },
							],
							language: {url: 'datatables/Spanish.json'},
							order: [ 0, "desc" ],
							dom: 'frtipl',
							searching:true,
							destroy: true,
						} );

						successModal.show();
					}
					else{
						errorModal.show();
					}
				}
			}).always( function() {
			});
		}

		function selectedResult(value) {

			document.getElementById("code").value = value;
			getDataByCode();
			successModal.hide();
		}

		function getDataByCode() {

			document.getElementById("element").value = "";

			var auxCode = document.getElementById("code").value;

			if(auxCode != ""){
				$.ajax({
					url: "{{ route('getDataByCode') }}",
					headers: {"X-CSRF-TOKEN": "{{ csrf_token() }}" },
					type: 'post',
					data:{ id:auxCode },
					dataType: "json",
					success: function(response){

						if(response.result){
							document.getElementById("element").value =
								response.registers.police_number+": "+
								response.registers.police_name+" "+
								response.registers.police_first_lastname+" "+
								response.registers.police_second_lastname;
						}
					}
				}).always( function() {
				});
			}

		}

		function viewMoreData() {
			var auxCode = document.getElementById("code").value;

			if(auxCode != ""){
				window.open("{{url('datos-generales-completos')}}"+"/"+auxCode, '_blank');
			}
		}



		function enableType() {

			if(document.getElementById("vehicle_type").value.toLowerCase() == "otro"){
				document.getElementById("other_vehicle_type").disabled = false;
			}
			else{
				document.getElementById("other_vehicle_type").value = "";
				document.getElementById("other_vehicle_type").disabled = true;
			}

		}

		function disableVehicleSerie() {

			if(document.getElementById("without_vehicle_serie").checked){
				document.getElementById("vehicle_serie").value = "";
				document.getElementById("vehicle_serie").disabled = true;
			}
			else{
				document.getElementById("vehicle_serie").disabled = false;
			}

		}

		function getInfoElements() {

			var idAux = document.getElementById("institution_first_respondent").value;
			var selectFrom = document.getElementById("first_respondent");

			document.getElementById("police_name").value = "";
			document.getElementById("police_first_lastname").value = "";
			document.getElementById("police_second_lastname").value = "";
			document.getElementById("institution").value = "";
			document.getElementById("position").value = "";
			document.getElementById("grade").value = "";

			if(idAux != ""){
				$.ajax({
					url: "{{ route('getInfoElements') }}",
					headers: {"X-CSRF-TOKEN": "{{ csrf_token() }}" },
					type: 'post',
					data:{ id:idAux },
					dataType: "json",
					success: function(response){

						if(selectFrom.length > 0){
							$('#first_respondent').empty();
						}


						var optDef = document.createElement('option');
						optDef.appendChild( document.createTextNode("-- Seleccione un valor --") );
						optDef.value = "";
						selectFrom.appendChild(optDef);

						if(response.result){

							for(x in response.registers) {

								var opt = document.createElement('option');

								opt.appendChild( document.createTextNode(
									response.registers[x].police_number+": "+
									response.registers[x].police_name+" "+response.registers[x].police_first_lastname+" "+
									response.registers[x].police_second_lastname+" - grado: "+response.registers[x].grade
								) );

								opt.value = response.registers[x].id;

								selectFrom.appendChild(opt);

							}

							selectFrom.disabled = false;
						}
					}
				});
			}
			else{
				if(selectFrom.length > 0){
					$('#first_respondent').empty();
				}

				var optDef = document.createElement('option');
				optDef.appendChild( document.createTextNode("-- Seleccione un valor --") );
				optDef.value = "";
				selectFrom.appendChild(optDef);
			}

		}

		function getInfoSpecificElements() {

			var idAux = document.getElementById("first_respondent").value;
			document.getElementById("police_name").value = "";
			document.getElementById("police_first_lastname").value = "";
			document.getElementById("police_second_lastname").value = "";
			document.getElementById("institution").value = "";
			document.getElementById("position").value = "";
			document.getElementById("grade").value = "";

			if(idAux != ""){
				$.ajax({
					url: "{{ route('getInfoSpecificElements') }}",
					headers: {"X-CSRF-TOKEN": "{{ csrf_token() }}" },
					type: 'post',
					data:{ id:idAux },
					dataType: "json",
					success: function(response){
						if(response.result){
							document.getElementById("police_name").value = response.registers.police_name;
							document.getElementById("police_first_lastname").value = response.registers.police_first_lastname;
							document.getElementById("police_second_lastname").value = response.registers.police_second_lastname;
							document.getElementById("institution").value = response.registers.institution;
							document.getElementById("position").value = response.registers.position;
							document.getElementById("grade").value = response.registers.grade;
						}
					}
				});
			}

		}

		function nextSection(){

			var tabAux = null;
			var auxField = null;
			var validNext = true;

			if(currentTab == 1){

				for(var i = 0; i < reqFieldsTab1.length; i++){

					auxField = document.getElementById(reqFieldsTab1[i]);

					if(auxField.classList.contains("is-valid")){
						auxField.classList.remove("is-valid");
					}

					if(auxField.classList.contains("is-invalid")){
						auxField.classList.remove("is-invalid");
					}

					if(auxField.value != ""){
						auxField.classList.add("is-valid");
					}
					else{
						if(auxField.disabled == false){
							auxField.classList.add("is-invalid");
							validNext = false;
						}
					}

				}

				if(validNext){
					tabAux = new bootstrap.Tab(document.querySelector('#myTab button[data-bs-target="#general_section_2"]')).show();
					currentTab++;
					document.getElementById("buttonNext").style.display = "none";
					document.getElementById("buttonSubmit").style.display = "block";
				}

			}

		}

		function prevSection(){

			var tabAux = null;

			if(currentTab == 2){
				tabAux = new bootstrap.Tab(document.querySelector('#myTab button[data-bs-target="#general_section_1"]')).show();
				currentTab--;
				document.getElementById("buttonNext").style.display = "block";
				document.getElementById("buttonSubmit").style.display = "none";
			}

		}

		function sendForm(){

			var auxField = null;
			var validSend = true;

			for(var i = 0; i < reqFieldsTab2.length; i++){

				auxField = document.getElementById(reqFieldsTab2[i]);

				if(auxField.classList.contains("is-valid")){
					auxField.classList.remove("is-valid");
				}

				if(auxField.classList.contains("is-invalid")){
					auxField.classList.remove("is-invalid");
				}

				if(auxField.value != ""){
					auxField.classList.add("is-valid");
				}
				else{
					if(auxField.disabled == false){
						auxField.classList.add("is-invalid");
						validSend = false;
					}
				}
			}

			if(validSend){
				document.getElementById("currentForm").submit();
			}
		}


	</script>

@endsection