@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">
						Edición de Datos Generales (Falta Administrativa)
					</div>
				</div>
				<hr/>
				<div class="card-body" style="padding:0em 2em 2em 2em">
					<form id="currentForm" method="POST" action="{{ route('updateGeneralDataFault') }}">
					@csrf

						<input type="hidden" id="id" value="{{ $id }}" name="id">

						<div class="row justify-content-center">
							<div class="col-12">
								<a href="{{route('datos-generales')}}" 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" data-bs-target="#general_section" class="nav-link active" style="cursor:default">
									Generales
								</button>
							</li>
							<li class="nav-item" role="presentation">
								<button  type="button" id="tab_narrative" data-bs-target="#narrative_section" class="nav-link" style="cursor:default">
									Narrativa de los hechos
								</button>
							</li>
						</ul>

						@include('general_data_fault.formGeneralDataFault')

						<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()">Actualizar</button>
							</div>
						</div>

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

		</div>
	</div>
@endsection

@section('js-files')
	<script src="{{ asset('assets/js/minimap.js') }}"></script>
	<script type="text/javascript">
		var currentTab = 1;

		var offenseFields = [
			'request_means',
			'number_mean'
		];

		var reqFieldsTab1 = [
			'log_sheet_id',
			'arrival_date',
			'arrival_hour',
			'rn_edo',
			'rn_inst',
			'rn_gob',
			'rn_mpio',
			'rn_day',
			'rn_month',
			'rn_year',
			'rn_hour',
			'institution_first_respondent',
			'first_respondent',
			'arrival_unit',
			'unit_name',
			'request_means',
			'other_mean'
		];

		var reqFieldsTab2 = [
			'lat',
			'lng',
			'description'
		];

		var initialConf = true;

		$( document ).ready(function() {

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

      document.getElementById('log_sheet_id').value="{{$data->log_sheet_id}}";
      document.getElementById('arrival_date').value="{{$data->arrival_date}}";
			document.getElementById('arrival_hour').value="{{$data->arrival_hour}}";
			document.getElementById('rn_edo').value="{{isset($data->reference_number[0])?$data->reference_number[0]:''}}"+"{{isset($data->reference_number[1])?$data->reference_number[1]:''}}";
			document.getElementById('rn_inst').value="{{isset($data->reference_number[2])?$data->reference_number[2]:''}}"+"{{isset($data->reference_number[3])?$data->reference_number[3]:''}}";
			document.getElementById('rn_gob').value="{{isset($data->reference_number[4])?$data->reference_number[4]:''}}"+"{{isset($data->reference_number[5])?$data->reference_number[5]:''}}";
			document.getElementById('rn_mpio').value="{{isset($data->reference_number[6])?$data->reference_number[6]:''}}"+"{{isset($data->reference_number[7])?$data->reference_number[7]:''}}"+"{{isset($data->reference_number[8])?$data->reference_number[8]:''}}";
			document.getElementById('rn_day').value="{{isset($data->reference_number[9])?$data->reference_number[9]:''}}"+"{{isset($data->reference_number[10])?$data->reference_number[10]:''}}";
			document.getElementById('rn_month').value="{{isset($data->reference_number[11])?$data->reference_number[11]:''}}"+"{{isset($data->reference_number[12])?$data->reference_number[12]:''}}";
			document.getElementById('rn_year').value="{{isset($data->reference_number[13])?$data->reference_number[13]:''}}"+"{{isset($data->reference_number[14])?$data->reference_number[14]:''}}"+"{{isset($data->reference_number[15])?$data->reference_number[15]:''}}"+"{{isset($data->reference_number[16])?$data->reference_number[16]:''}}";
			document.getElementById('rn_hour').value="{{isset($data->reference_number[17])?$data->reference_number[17]:''}}"+"{{isset($data->reference_number[18])?$data->reference_number[18]:''}}"+"{{isset($data->reference_number[19])?$data->reference_number[19]:''}}"+"{{isset($data->reference_number[20])?$data->reference_number[20]:''}}";

			document.getElementById('institution_first_respondent').value="{{$data->institutions_id}}";
			getInfoElements();

			document.getElementById('arrival_unit').value="{{$data->arrival_unit}}";
			document.getElementById('unit_name').value="{{$data->unit_name}}";
			enableUnit();
			document.getElementById('lat').value="{{$data->lat}}";
			document.getElementById('lng').value="{{$data->lng}}";
			setPointer();
			document.getElementById('street').value="{{$data->street}}";
			document.getElementById('exterior_number').value="{{$data->exterior_number}}";
			document.getElementById('interior_number').value="{{$data->interior_number}}";
			document.getElementById('postal_code').value="{{$data->postal_code}}";
			document.getElementById('colony').value="{{$data->colony}}";
			document.getElementById('general_township').value="{{$data->general_township}}";
			document.getElementById('general_state').value="{{$data->general_state}}";
			document.getElementById('general_references').value=`{!!$data->general_references!!}`;
			document.getElementById('description').value=`{!!$data->description!!}`;
			document.getElementById('request_means').value="{{$data->request_means_id}}";



			enableMean();
			document.getElementById('number_mean').value="{{$data->number_mean}}";
			document.getElementById('other_mean').value="{{$data->other_mean}}";

		});

		function fillDateOnReferenceNumber(){
			document.getElementById('arrival_date').onchange = function(){
				let date = new Date(document.getElementById('arrival_date').value);
				date.setMinutes(date.getMinutes() + date.getTimezoneOffset());
				document.getElementById('rn_day').value = ("0" + date.getDate()).slice(-2);
				document.getElementById('rn_month').value = ("0" + (date.getMonth() + 1)).slice(-2);
				document.getElementById('rn_year').value = date.getFullYear();
			}

			document.getElementById('arrival_hour').onchange = function(){
				let hour =  document.getElementById('arrival_hour').value;
				hour = hour.replace(/[^0-9]/g,'');
				document.getElementById('rn_hour').value = hour;
			}
		}

		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);

							}
						}
					}
				})
				.always( function() {
					if(initialConf){
						document.getElementById('first_respondent').value="{{$data->police_elements_id}}";
						getInfoSpecificElements();

						if("{{$data->element_institutions_id}}" == ""){
							initialConf = 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 enableUnit() {

			if(document.getElementById("arrival_unit").value.toLowerCase() == "si"){
				document.getElementById("unit_name").disabled = false;
			}
			else{
				document.getElementById("unit_name").value = "";
				document.getElementById("unit_name").disabled = true;
			}

		}

		function enableMean() {

			var validTextOpt = document.getElementById("request_means").options[
					document.getElementById("request_means").selectedIndex
				].text.toLowerCase();

			document.getElementById("other_mean").value = "";
			document.getElementById("other_mean").disabled = true;
			document.getElementById("number_mean").value = "";
			document.getElementById("number_mean").disabled = true;

			if( validTextOpt == "otro" ){
				document.getElementById("other_mean").disabled = false;
			}
			else if( validTextOpt == "llamada de emergencia" ){
				document.getElementById("number_mean").disabled = false;
			}

		}

		function nextSection(){

			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.style.display != "none"){
							auxField.classList.add("is-invalid");
							validNext = false;
						}
					}
				}

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

			}
			else if(currentTab == 2){

				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.style.display != "none"){
							auxField.classList.add("is-invalid");
							validNext = false;
						}
					}
				}

			}

		}

		function prevSection(){

			if(currentTab == 2){
				new bootstrap.Tab(document.querySelector('#myTab button[data-bs-target="#general_section"]')).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{
					auxField.classList.add("is-invalid");
					validSend = false;
				}
			}

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


	</script>

@endsection