@extends('layouts.admin')  
@section ('contenido')

<!-- row => fila del sistema de grillas de Bootstrap
     justify-content-center => centra horizontalmente el contenido dentro de la fila
     align-items-center => centra verticalmente los elementos dentro de la fila -->
<div class="row justify-content-center align-items-center">
    <!-- col-lg-11 col-md-11 col-sm-11 col-xs-11 => 
         la columna ocupa 11/12 partes del ancho en todos los tamaños de pantalla -->
    <div class="col-lg-11 col-md-11 col-sm-11 col-xs-11">
        <h3>Nuevo Expediente</h3>
    </div>
</div>
<div class="row">
  <div class="col-md-10">

    <!-- Includes de Blade para mensajes de éxito y errores -->
    @include('compartido.mensajes') 
    @include('compartido.errores') 
  </div>
</div>
</br>

<!-- Formulario para crear un nuevo expediente -->
<form method="post" action="{{ route('expedientes.store') }}" enctype="multipart/form-data">
    @csrf
   
    <!-- row => agrupa los primeros campos en una fila -->
    <div class="row">
        <!-- form-group => separa cada campo del formulario con márgenes
             col-md-4 => ocupa 4/12 columnas en pantallas medianas hacia arriba -->
        <div class="form-group col-md-4">
            <!-- form-check-label => clase de Bootstrap que estiliza etiquetas de formulario -->
            <label for="id_detenido" class="form-check-label">ID Detenido (*)</label>
            <!-- form-control => aplica estilos consistentes al input -->
            <input type="number" name="id_detenido" id="id_detenido" value="{{ old('id_detenido') }}" required class="form-control">
        </div>

        <div class="form-group col-md-4">
            <label for="fecha_ingreso" class="form-check-label">Fecha de Ingreso (*)</label>
            <input type="date" name="fecha_ingreso" id="fecha_ingreso" value="{{ old('fecha_ingreso') }}" required class="form-control">
        </div>

        <div class="form-group col-md-4">
            <label for="estado" class="form-check-label">Estado (*)</label>
            <input type="text" name="estado" id="estado" value="{{ old('estado') }}" required class="form-control">
        </div>
    </div>

    <!-- row => agrupa el resto de los campos en una segunda fila -->
    <div class="row mt-3">
        <div class="form-group col-md-4">
            <label for="fecha_egreso" class="form-check-label">Fecha de Egreso</label>
            <input type="date" name="fecha_egreso" id="fecha_egreso" value="{{ old('fecha_egreso') }}" class="form-control">
        </div>

        <div class="form-group col-md-4">
            <label for="fecha_traslado" class="form-check-label">Fecha de Traslado</label>
            <input type="date" name="fecha_traslado" id="fecha_traslado" value="{{ old('fecha_traslado') }}" class="form-control">
        </div>

        <div class="form-group col-md-4">
            <label for="motivo_detencion" class="form-check-label">Motivo de Detención (*)</label>
            <textarea name="motivo_detencion" id="motivo_detencion" rows="1" required class="form-control">{{ old('motivo_detencion') }}</textarea>
        </div>
    </div>

    <!-- row justify-content-center align-items-center => 
         crea una fila y centra horizontal y verticalmente los botones -->
    <div class="row justify-content-center align-items-center mt-4">
        <div class="col-md-2">
            <!-- btn => botón base de Bootstrap
                 btn-success => color verde
                 btn-block => ocupa todo el ancho de la columna
                 btn-lg => tamaño grande -->
            <button class="btn btn-success btn-block btn-lg">Guardar</button>
        </div>
        <div class="col-md-2">
            <!-- btn-primary => color azul
                 title="Salir" => muestra tooltip al pasar el mouse -->
            <a href="{{ route('expedientes.index') }}" class="btn btn-primary btn-block btn-lg" title="Salir">Salir</a>
        </div>
    </div>
</form>

@endsection

@push('scripts')
    <script>
        // Aquí puedes agregar código JavaScript específico para esta vista
    </script>
@endpush