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

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

						<div class="row justify-content-center">
							<div class="col-12">
								<a href="{{route('elementos-policiacos')}}" 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>

						<div class="row justify-content-center" style="margin-top:1em">
							<div class="col-12" align="center" style="color:red;font-size:1.3em">
								<strong>
									Si realmente desea eliminar el elemento, verifique que los datos sean correctos y 
									presione el botón "Eliminar elemento" para finalizar la acción
								</strong>
							</div>
						</div>
						<div class="row justify-content-center" style="margin-top:0.5em">
							<div class="col-6" align="center">
								<label for="name" class="form-label"><strong>Nombre(s)</strong></label>
								<p>
									{{ isset($police->police_name) ? $police->police_name : '' }}
								</p>
							</div>
							<div class="col-6" align="center">
								<label for="name" class="form-label"><strong>Apellido Paterno</strong></label>
								<p>
									{{ isset($police->police_first_lastname) ? $police->police_first_lastname : '' }}
								</p>
							</div>
						</div>
						<div class="row justify-content-start" style="margin-top:0.5em">
							<div class="col-6" align="center">
								<label for="name" class="form-label"><strong>Apellido Materno</strong></label>
								<p>
									{{ isset($police->police_second_lastname) ? $police->police_second_lastname : '' }}
								</p>
							</div>
							<div class="col-6" align="center">
								<label for="name" class="form-label"><strong>Institución</strong></label>
								<p>
									{{ isset($police->institution) ? $police->institution : '' }}
								</p>
							</div>
						</div>
						<div class="row justify-content-start" style="margin-top:0.5em">
							<div class="col-6" align="center">
								<label for="name" class="form-label"><strong>ID elemento</strong></label>
								<p>
									{{ isset($police->police_number) ? $police->police_number : '' }}
								</p>
							</div>
							<div class="col-6" align="center">
								<label for="name" class="form-label"><strong>Municipio</strong></label>
								<p>
									{{ isset($police->township) ? $police->township . ' - ' . $police->state : '' }}
								</p>
							</div>
						</div>
						<div class="row justify-content-center" style="margin-top:0.5em">
							<div class="col-6" align="center">
								<label for="name" class="form-label"><strong>Cargo</strong></label>
								<p>
									{{ isset($police->position) ? $police->position : '' }}
								</p>
							</div>
							<div class="col-6" align="center">
								<label for="name" class="form-label"><strong>Grado</strong></label>
								<p>
									{{ isset($police->grade) ? $police->grade : '' }}
								</p>
							</div>
						</div>

						<div class="row justify-content-center" style="margin-top:0.5em">
							<div class="col-12" align="right">
								<button type="submit" class="btn btn-danger btn-block">Eliminar elemento</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");
		});

	</script>

@endsection