@extends('layouts.app')

@section('content')

<section class="portada denuncia col-12 my-4">
    <div class="container">
        <div class="row">
			<div class="col-12 text-justify my-5">
				<div class="title">
					<h1 class="text-blue text-center my-5">Solicitud de Atención Psicológica Temprana</h1>
				</div>


				@if (session('status'))
					<div class="col-12 alert alert-success mb-5 text-center">
						{{ session('status') }}
					</div>
            	@endif

				<form action="{{route('solicitud-atencion')}}" class="shadow-lg denuncia-apt" method="POST">
                    @csrf

					<div class="tab tab-01 show-me">
						<p class="">En cumplimiento de la Ley N°21.643, el Ministerio ha dispuesto el acceso voluntario a la Atención Psicológica Temprana (APT) para aquellas personas que presenten una denuncia. Para acceder a este apoyo, es necesario completar el presente formulario.</p>
						<p>Una vez enviado, el Departamento de Gestión y Desarrollo de las Personas (DGDP) se pondrá en contacto con usted y coordinará con el organismo administrador correspondiente, conforme a lo establecido en la Ley N°16.744.</p>
						
                        <div class="mb-3 form-check acepto">
					    	<input type="checkbox" class="form-check-input acepto-condiciones" name="acepto" id="acepto">
					    	<label class="form-check-label" for="acepto">Sí, requiero atención psicológica temprana.</label>
							
							<div class="invalid-feedback">
						      Para continuar debe aceptar los términos y condiciones
						    </div>
					  	</div>

						<div class="box-botonera">
							<div class="step step-01 active next-button" data-step="step-02">
								Siguiente
							</div>
						</div>

					</div>	

					<div class="tab tab-02 d-none">

						<h3 class="text-blue">Información personal:</h3>

                        <div class="mb-3 form-check acepto">
                            <label class="form-check-label" for="acepto">Nombre</label>
                            <input type="text" class="form-control" name="name" id="name">
					    	
						    <div id="emailHelp" class="form-text">
						    	Indica tu nombre y apellidos.
						    </div>
					  	</div>

						<div class="form-check my-3">
							<label for="rut" class="form-label">Cédula de Identidad</label>
					   		<input type="text" class="form-control" name="identification" id="rut" value="">
							
							<div id="emailHelp" class="form-text">
						    	Usa el formato 11111111-1
						    </div>
					  	</div>

						<div class="form-check my-3">
							<label for="birthdate" class="form-label">Fecha de nacimiento</label>
					   		<input type="text" class="form-control" name="birthdate" id="birthdate" value="">
							<div id="birthdateHelp" class="form-text">Usa el formato de dd-mm-aaaa</div>
					  	</div>

						<div class="form-check my-3">
							<label for="genero" class="form-label">¿Cómo te identificas en términos de género?</label>
					   		<select class="form-select" id="genero" aria-describedby="genero" name="genero">
						      	<option selected disabled value="0">Seleccione su género</option>
								<option value="Mujer">Mujer</option>
								<option value="Hombre">Hombre</option>
								<option value="No binario">No binario</option>
								<option value="Prefiero no responder">Prefiero no responder</option>
						    </select>
					  	</div>

						<div class="form-check my-3">
							<label for="phone" class="form-label">Teléfono</label>
					   		<input type="number" class="form-control" id="phone" name="phone" value="">
							
							<div id="emailHelp" class="form-text">
						     	El teléfono se solicita para generar el contacto con la persona denunciante.
						    </div>
					  	</div>

						<div class="mb-3 form-check acepto">
                            <label class="form-check-label" for="acepto">Correo de contacto</label>
                            <input type="email" class="form-control" name="email" id="email">
					    	
						    <div id="emailHelp" class="form-text">
						     	El correo se solicita para notificar y generar el contacto con la persona denunciante.
						    </div>
					  	</div>

						<div class="form-check my-3">
							<label for="cargo-funcion" class="form-label">Cargo o Función</label>
					   		<input type="text" class="form-control" name="cargo" id="cargo-funcion" value="">
					  	</div>

						<div class="form-check my-3">
							<label for="division" class="form-label">División a la que perteneces (centro de trabajo)</label>
					   		<select class="form-select" id="division" aria-describedby="division" name="division">
						      	<option selected disabled value="0">Seleccione la división en la que se desempeña</option>
								@foreach($divisiones as $division) 
									<option value="{{$division->id}}">{{$division->name}}</option>
								@endforeach
						    </select>
					  	</div>

						<div class="tipo-caso invalid-feedback alert alert-danger text-center">Seleccione una opción para continuar.</div>

						<div class="privacidad">
							<div class="invalid-feedback alert alert-danger text-center">Complete todos los campos para continuar.</div>
						</div>

						<div class="box-botonera">
							<div class="step back-button" data-step="step-01">
								Volver
							</div>

							<div class="step active next-button" data-step="step-03">
								Siguiente
							</div>
						</div>
					</div>	

					<div class="tab tab-03 d-none">

						<h3 class="text-blue">Información del tipo de caso:</h3>

						<div class="form-check my-3">
							<p>Por favor, elija el tipo de categoría de su denuncia</p>
							<p class="small text-center alert alert-warning">Recuerde que debe seleccionar al menos una opción.</p>
							@foreach($casos as $caso) 
								<div class="mb-3 form-check {{$caso->slug}}">
									<input type="checkbox" class="form-check-input" name="tipo_caso[]" value="{{$caso->id}}" id="{{$caso->slug}}">
									<label class="form-check-label" for="{{$caso->slug}}">{{$caso->name}}</label>
									<small>{{$caso->description}}</small>
								</div>

							@endforeach

						</div>

						<div class="my-3">
							<label for="descripcioncaso" class="form-label">Descripción breve del incidente:</label>
							<textarea class="form-control" id="descripcioncaso" name="descripcioncaso" rows="3"></textarea>
							<small>Por favor sea lo más descriptivo posible al completar estas preguntas. Le recomendamos utilizar nombres propios (en lugar de él o ella), términos y eventos descriptivos. Entre más datos recuerde, mejor se podrá realizar la investigación. Por ejemplo: Juan López (Jefe de Administración) grabó la base de datos de los clientes y se la vendió a una institución de cobranza el 6 de enero de 2016.</small>
						</div>

						<div class="my-3">
							<label for="dondesucedio" class="form-label">¿Dónde sucedió?</label>
							<textarea class="form-control" id="dondesucedio" name="dondesucedio" rows="3"></textarea>
							<small>Indique si fue en las instalaciones de la institución o en sectores aledaños a la institución, u otros. Señale la mayor cantidad de detalles posibles para su investigación.</small>
						</div>

						<div class="info-caso">
							<div class="invalid-feedback alert alert-danger text-center">Complete todos los campos para terminar.</div>
						</div>

						<div class="box-botonera">
							<div class="step back-button" data-step="step-02">
								Volver
							</div>

							<div class="step active next-button" data-step="step-04">
								Siguiente
							</div>
						</div>
					
					</div>
						
					<div class="tab tab-04 d-none">
							<h3 class="text-blue">Confirmación:</h3>

							<p class="mt-3">Ha terminado de ingresar los datos de su caso.</p>
							<p>Con los datos registrados, se enviará un correo solicitando la atención psicológica temprana. Pronto será contactado.</p>

							<div class="box-botonera">
								<div class="step back-button" data-step="step-03">
									Volver
								</div>
							</div>

							<div class="mb-3 form-check acepto">
								<button type="submit" class="form-control bg-blue text-white" data-step="step-end">Enviar</button>
							</div>

					</div>

                        

					</div>	

				</form>
			</div>
		</div>
    </div>
</section>
@endsection