@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 Elementos Policiacos
					</div>
				</div>
				<hr/>
				<div class="card-body" style="padding:0em 2em 2em 2em">
					<form method="POST" action="{{ route('storePoliceElements') }}">
					@csrf

						<input type="hidden" id="modal" name="modal" value="0">

						@include('police_elements.formPoliceElements')

						<div class="row justify-content-center" style="margin-top:2em">
							<div class="col-12" align="right" style="padding-right:5%">
								<button type="submit" class="btn btn-primary btn-block">Registrar</button>
							</div>
						</div>

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

		</div>
	</div>
@endsection

@section('js-files')

	<script type="text/javascript">

		$( document ).ready(function() {
			document.getElementById('myCollapse').setAttribute("aria-expanded", true);
			document.getElementById('layouts').classList.add("show");
			fillDefaultData();
		});

		function fillDefaultData(){
			document.getElementById("institution").value=6;
			document.getElementById("township").value=28;
            $('#township').trigger('change');
		}

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

					if(response.result){

						$('#institution').empty();

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

						for(x in response.registers) {
							var opt = document.createElement('option');
							opt.appendChild(
								document.createTextNode(response.registers[x].institution)
							);
							opt.value = response.registers[x].id;
							document.getElementById("institution").appendChild(opt);
						}
					}

				}
			});
		}

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

					if(response.result){

						$('#township').empty();

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

						for(x in response.registers) {
							var opt = document.createElement('option');
							opt.appendChild(
								document.createTextNode(response.registers[x].township+' - '+response.registers[x].state)
							);
							opt.value = response.registers[x].id;
							document.getElementById("township").appendChild(opt);
						}
					}

				}
			});
		}

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

					if(response.result){

						$('#position').empty();

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

						for(x in response.registers) {
							var opt = document.createElement('option');
							opt.appendChild(
								document.createTextNode(response.registers[x].position)
							);
							opt.value = response.registers[x].id;
							document.getElementById("position").appendChild(opt);
						}
					}

				}
			});
		}

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

					if(response.result){

						$('#grade').empty();

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

						for(x in response.registers) {
							var opt = document.createElement('option');
							opt.appendChild(
								document.createTextNode(response.registers[x].grade)
							);
							opt.value = response.registers[x].id;
							document.getElementById("grade").appendChild(opt);
						}
					}

				}
			});
		}

	</script>

@endsection