@model IEnumerable<foundation_system.Models.Nino>
@{
    ViewData["Title"] = "Expedientes de Niños";
}

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="mb-1">Expedientes</h2>
        <p class="text-muted small mb-0">Gestión de registros y expedientes de los niños de la fundación.</p>
    </div>
    <a asp-action="Create" class="btn btn-primary-custom">
        <i class="bi bi-person-plus-fill me-2"></i>Nuevo Expediente
    </a>
</div>

<div class="card-custom mb-4">
    <form asp-action="Index" method="get" class="row g-3 align-items-center">
        <div class="col-md-10">
            <div class="input-group">
                <span class="input-group-text bg-white border-end-0">
                    <i class="bi bi-search text-muted"></i>
                </span>
                <input type="text" name="search" class="form-control border-start-0 ps-0" 
                       placeholder="Buscar por código, nombre o DUI..." value="@ViewBag.Search" />
            </div>
        </div>
        <div class="col-md-2 d-grid">
            <button type="submit" class="btn btn-primary">Buscar</button>
        </div>
    </form>
</div>

<div class="card-custom">
    <div class="table-responsive">
        <table class="table-custom">
            <thead>
                <tr>
                    <th>Código</th>
                    <th>Nombre Completo</th>
                    <th>Edad</th>
                    <th>Grado/Nivel</th>
                    <th>Fecha Inscripción</th>
                    <th>Estado</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @if (!Model.Any())
                {
                    <tr>
                        <td colspan="6" class="text-center py-4 text-muted">No hay expedientes registrados.</td>
                    </tr>
                }
                @foreach (var item in Model)
                {
                    <tr>
                        <td class="fw-bold">@item.CodigoInscripcion</td>
                        <td>@item.Persona.NombreCompleto</td>
                        <td>
                            @{
                                if (item.Persona.FechaNacimiento.HasValue)
                                {
                                    var today = DateOnly.FromDateTime(DateTime.Now);
                                    var age = today.Year - item.Persona.FechaNacimiento.Value.Year;
                                    if (item.Persona.FechaNacimiento.Value > today.AddYears(-age)) age--;
                                    @age @(age == 1 ? "año" : "años")
                                }
                                else
                                {
                                    <span class="text-muted">N/A</span>
                                }
                            }
                        </td>
                        <td>@item.NivelGrado</td>
                        <td>@item.FechaInscripcion.ToShortDateString()</td>
                        <td>
                            <span class="badge @(item.Estado == "ACTIVO" ? "bg-success" : "bg-secondary")">
                                @item.Estado
                            </span>
                        </td>
                        <td>
                            <div class="btn-group">
                                <a asp-action="Details" asp-route-id="@item.Id" class="btn btn-sm btn-outline-info" title="Ver Detalle">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-sm btn-outline-secondary" title="Editar">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <button type="button" class="btn btn-sm btn-outline-danger" title="Desactivar" 
                                        onclick="confirmarDesactivacion(@item.Id, '@item.Persona.NombreCompleto')">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>

    @if (ViewBag.TotalPages > 1)
    {
        <div class="d-flex justify-content-between align-items-center mt-4">
            <div class="text-muted small">
                Mostrando página @ViewBag.CurrentPage de @ViewBag.TotalPages
            </div>
            <nav aria-label="Page navigation">
                <ul class="pagination pagination-sm mb-0">
                    <li class="page-item @(!ViewBag.HasPreviousPage ? "disabled" : "")">
                        <a class="page-link" asp-action="Index" 
                           asp-route-page="@(ViewBag.CurrentPage - 1)" 
                           asp-route-search="@ViewBag.Search">
                            <i class="bi bi-chevron-left"></i>
                        </a>
                    </li>

                    @for (int i = 1; i <= ViewBag.TotalPages; i++)
                    {
                        <li class="page-item @(i == ViewBag.CurrentPage ? "active" : "")">
                            <a class="page-link" asp-action="Index" 
                               asp-route-page="@i" 
                               asp-route-search="@ViewBag.Search">@i</a>
                        </li>
                    }

                    <li class="page-item @(!ViewBag.HasNextPage ? "disabled" : "")">
                        <a class="page-link" asp-action="Index" 
                           asp-route-page="@(ViewBag.CurrentPage + 1)" 
                           asp-route-search="@ViewBag.Search">
                            <i class="bi bi-chevron-right"></i>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    }
</div>

<!-- Modal de Confirmación -->
<div class="modal fade" id="modalDesactivar" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmar Desactivación</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                ¿Está seguro que desea desactivar el expediente de <strong id="nombreNino"></strong>?
                <p class="text-muted small mt-2">Esta acción cambiará el estado a INACTIVO y no aparecerá en el listado principal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <form id="formDesactivar" asp-action="Desactivar" method="post">
                    @Html.AntiForgeryToken()
                    <input type="hidden" name="id" id="ninoIdDesactivar" />
                    <button type="submit" class="btn btn-danger">Desactivar</button>
                </form>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        function confirmarDesactivacion(id, nombre) {
            document.getElementById('nombreNino').innerText = nombre;
            document.getElementById('ninoIdDesactivar').value = id;
            new bootstrap.Modal(document.getElementById('modalDesactivar')).show();
        }
    </script>
}

