@extends('layouts.master')

@section('title')
    Tipos de beca
@endsection

@section('css')
<style>
.config-module .card-title { font-size: 1rem; }
.config-module .form-label { font-size: 0.8rem; }
.config-module .form-control, .config-module .form-select { font-size: 0.85rem; padding: 0.35rem 0.65rem; }
.config-module .table { font-size: 0.85rem; }
.config-module h4 { font-size: 1.1rem; }
</style>
@endsection

@section('content')
<div class="row config-module">
    <div class="col-12">
        {{-- Encabezado de la sección --}}
        <h4 class="mb-0 text-primary fw-semibold" style="color: #020f82 !important;">Tipos de beca</h4>
        <hr class="my-3">

        {{-- Dos columnas: pequeño navegador (izq) y contenido (der) --}}
        <div class="row">
            {{-- Div izquierdo: pequeño navegador --}}
            <div class="col-12 col-md-4 col-lg-3 mb-3 mb-md-0">
                <div class="card h-70">
                    <div class="card-body p-0">
                        <div class="p-3 bg-primary text-white fw-semibold">Administración y Finanzas</div>
                        <nav class="nav flex-column">
                            <a href="{{ route('config.informacion-fiscal') }}" class="nav-link py-2 px-3 border-start border-3 border-transparent">Información fiscal</a>
                            <a href="{{ route('config.tipos-beca') }}" class="nav-link py-2 px-3 border-start border-3 border-primary bg-light text-dark">Tipos de beca</a>
                            <a href="{{ route('config.asociacion-ingresos') }}" class="nav-link py-2 px-3 border-start border-3 border-transparent">Asociación de ingresos</a>
                            <a href="{{ route('config.usuarios') }}" class="nav-link py-2 px-3 border-start border-3 border-transparent">Registro de usuarios</a>
                        </nav>
                    </div>
                </div>
            </div>

            {{-- Div derecho: contenido del apartado --}}
            <div class="col-12 col-md-8 col-lg-9">
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted mb-4">Usa el siguiente formulario para mostrar los tipos de becas registrados en la aplicación.</p>
                        <div class="row align-items-end g-3 mb-4">
                            <div class="col-md-5 col-lg-4">
                                <label for="nombre-tipo-beca" class="form-label">Nombre del tipo de beca</label>
                                <input type="text" class="form-control" id="nombre-tipo-beca" name="nombre" placeholder="">
                            </div>
                            <div class="col-md-5 col-lg-4">
                                <label for="estatus-beca" class="form-label">Estatus</label>
                                <select class="form-select" id="estatus-beca" name="estatus">
                                    <option value="activo" selected>Activo</option>
                                    <option value="inactivo">Inactivo</option>
                                </select>
                            </div>
                        </div>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-primary btn-sm px-4 rounded btn-border">
                                <i class="ri-search-line align-middle me-1"></i> Buscar
                            </button>
                            <button type="button" class="btn btn-warning text-white btn-sm px-4 rounded btn-border" data-bs-toggle="modal" data-bs-target="#modalAgregarTipoBeca">
                                <i class="ri-add-line align-middle me-1"></i> Registrar
                            </button>
                        </div>
                    </div>
                </div>

                <div class="card mt-3">
                    <div class="card-body">
                        <div class="text-center py-5">
                            <div class="avatar-xl mx-auto mb-2">
                                <div class="avatar-title bg-dark-subtle rounded-circle d-inline-flex align-items-center justify-content-center">
                                    <i class="ri-information-line text-white fs-1"></i>
                                </div>
                            </div>
                            <p class="text-muted mb-0">Usa los filtros para realizar una búsqueda.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Agregar tipo de beca --}}
<div class="modal fade" id="modalAgregarTipoBeca" tabindex="-1" aria-labelledby="modalAgregarTipoBecaLabel" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white" id="modalAgregarTipoBecaLabel">Agregar tipo de beca</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted mb-4">Usa el siguiente formulario para registrar un nuevo tipo de beca</p>
                <form id="form-tipo-beca">
                    <div class="d-flex flex-wrap align-items-end gap-3 mb-4">
                        <div class="flex-grow-1" style="min-width: 200px;">
                            <label for="tipo-beca-nombre" class="form-label">* Nombre del tipo de beca</label>
                            <input type="text" class="form-control" id="tipo-beca-nombre" name="nombre" placeholder="" required>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <label class="form-label mb-0">Activo</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="tipo-beca-activo" name="activo" checked>
                                <label class="form-check-label" for="tipo-beca-activo"></label>
                            </div>
                        </div>
                    </div>
                    <h6 class="text-primary mb-2">Configuración de día límite para beca</h6>
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm align-middle mb-0">
                            <thead class="table-primary">
                                <tr>
                                    <th class="text-white">Mes</th>
                                    <th class="text-white">Día límite</th>
                                    <th class="text-white">Días hábiles</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
                                @endphp
                                @foreach($meses as $i => $mes)
                                <tr class="{{ $i % 2 === 0 ? 'table-light' : '' }}">
                                    <td>{{ $mes }}</td>
                                    <td>
                                        <input type="number" class="form-control form-control-sm" name="dia_limite_{{ $i }}" value="0" min="0" max="31" style="max-width: 5rem;">
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-light border" title="Días hábiles"><i class="ri-close-line"></i></button>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </form>
                <p class="text-muted small mt-3 mb-0">Nota: Llenar campos obligatorios (*).</p>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-success">
                    <i class="ri-save-line align-middle me-1"></i> Guardar
                </button>
            </div>
        </div>
    </div>
</div>
@endsection