@model Rs_system.Models.ViewModels.PaginatedViewModel<Rs_system.Models.ViewModels.MiembroViewModel>
@{
    ViewData["Title"] = "Miembros de la Iglesia";
}

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="mb-1">Miembros en Propiedad</h4>
        <p class="text-muted mb-0">Gestión de miembros de la congregación</p>
    </div>
    <div>
        <a asp-action="Importar" class="btn btn-outline-success me-2">
            <i class="bi bi-file-earmark-spreadsheet me-1"></i> Importar CSV
        </a>
        <a asp-action="Create" class="btn btn-primary-custom">
            <i class="bi bi-plus-lg me-1"></i> Nuevo Miembro
        </a>
    </div>
</div>

<!-- Search and Page Size Controls -->
<div class="card-custom mb-3">
    <form method="get" asp-action="Index" id="searchForm" class="row g-3 align-items-end">
        <div class="col-md-6">
            <label for="search" class="form-label">Buscar Miembro</label>
            <input type="text" 
                   class="form-control" 
                   id="search" 
                   name="search" 
                   value="@Model.SearchQuery" 
                   placeholder="Buscar por nombre o apellido...">
        </div>
        <div class="col-md-3">
            <label for="pageSize" class="form-label">Registros por página</label>
            <select class="form-select" 
                    id="pageSize" 
                    asp-for="PageSize" 
                    onchange="document.getElementById('searchForm').submit();">
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
        </div>
        <div class="col-md-3">
            <button type="submit" class="btn btn-primary w-100">
                <i class="bi bi-search me-1"></i> Buscar
            </button>
        </div>
        <input type="hidden" name="page" value="1" />
    </form>
</div>

<!-- Summary Cards -->
<div class="row mb-4">
    <div class="col-md-4">
        <div class="card-custom text-center">
            <h6 class="text-muted mb-2">Total Miembros</h6>
            <h3 class="text-primary mb-0">@Model.TotalItems</h3>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card-custom text-center">
            <h6 class="text-muted mb-2">Bautizados en el Espíritu Santo</h6>
            <h3 class="text-success mb-0">@Model.Items.Count(m => m.BautizadoEspirituSanto)</h3>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card-custom text-center">
            <h6 class="text-muted mb-2">Grupos de Trabajo</h6>
            <h3 class="text-info mb-0">@Model.Items.Where(m => m.GrupoTrabajoId.HasValue).GroupBy(m => m.GrupoTrabajoId).Count()</h3>
        </div>
    </div>
</div>

<!-- Members Table -->
<div class="card-custom">
    <div class="table-responsive">
        <table class="table-custom">
            <thead>
                <tr>
                    <th>Foto</th>
                    <th>Nombre Completo</th>
                    <th>Fecha de Nacimiento</th>
                    <th>Grupo de Trabajo</th>
                    <th class="text-center">Bautizado E.S.</th>
                    <th>Teléfono</th>
                    <th>Fecha Ingreso</th>
                    <th class="text-center">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @if (!Model.Items.Any())
                {
                    <tr>
                        <td colspan="8" class="text-center text-muted py-4">
                            <i class="bi bi-people fs-1 d-block mb-2"></i>
                            @if (!string.IsNullOrWhiteSpace(Model.SearchQuery))
                            {
                                <text>No se encontraron miembros con el criterio de búsqueda "@Model.SearchQuery"</text>
                            }
                            else
                            {
                                <text>No hay miembros registrados</text>
                            }
                        </td>
                    </tr>
                }
                @foreach (var miembro in Model.Items)
                {
                    <tr>
                        <td class="text-center">
                            @if (!string.IsNullOrEmpty(miembro.FotoUrl))
                            {
                                <img src="/@miembro.FotoUrl" alt="@miembro.NombreCompleto" class="img-thumbnail" style="width: 40px; height: 40px; object-fit: cover;" />
                            }
                            else
                            {
                                <i class="bi bi-person-circle text-muted" style="font-size: 2rem;"></i>
                            }
                        </td>
                        <td>
                            <strong>@miembro.NombreCompleto</strong>
                        </td>
                        <td>
                            @if (miembro.FechaNacimiento.HasValue)
                            {
                                <span>@miembro.FechaNacimiento.Value.ToString("dd/MM/yyyy")</span>
                                <br>
                                <small class="text-muted">
                                    @{
                                        var edad = DateTime.Today.Year - miembro.FechaNacimiento.Value.Year;
                                        if (miembro.FechaNacimiento.Value.ToDateTime(TimeOnly.MinValue) > DateTime.Today.AddYears(-edad))
                                            edad--;
                                    }
                                    @edad años
                                </small>
                            }
                            else
                            {
                                <span class="text-muted">-</span>
                            }
                        </td>
                        <td>
                            @if (!string.IsNullOrEmpty(miembro.GrupoTrabajoNombre))
                            {
                                <span class="badge bg-primary">@miembro.GrupoTrabajoNombre</span>
                            }
                            else
                            {
                                <span class="text-muted">Sin grupo</span>
                            }
                        </td>
                        <td class="text-center">
                            @if (miembro.BautizadoEspirituSanto)
                            {
                                <i class="bi bi-check-circle-fill text-success" title="Sí"></i>
                            }
                            else
                            {
                                <i class="bi bi-x-circle text-muted" title="No"></i>
                            }
                        </td>
                        <td>
                            @if (!string.IsNullOrEmpty(miembro.Telefono))
                            {
                                <span>@miembro.Telefono</span>
                            }
                            else
                            {
                                <span class="text-muted">-</span>
                            }
                        </td>
                        <td>
                            @if (miembro.FechaIngresoCongregacion.HasValue)
                            {
                                <span>@miembro.FechaIngresoCongregacion.Value.ToString("dd/MM/yyyy")</span>
                            }
                            else
                            {
                                <span class="text-muted">-</span>
                            }
                        </td>
                        <td class="text-center">
                            <a asp-action="Details" asp-route-id="@miembro.Id" class="btn btn-sm btn-outline-primary" title="Ver detalles">
                                <i class="bi bi-eye"></i>
                            </a>
                            <a asp-action="Edit" asp-route-id="@miembro.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" onclick="confirmDelete(@miembro.Id)" title="Eliminar">
                                <i class="bi bi-trash"></i>
                            </button>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
    
    <!-- Pagination Controls -->
    @if (Model.TotalPages > 1)
    {
        <div class="d-flex justify-content-between align-items-center mt-3 px-3 pb-3">
            <div class="text-muted">
                Mostrando @((Model.CurrentPage - 1) * Model.PageSize + 1) a @(Math.Min(Model.CurrentPage * Model.PageSize, Model.TotalItems)) de @Model.TotalItems registros
            </div>
            <nav aria-label="Paginación de miembros">
                <ul class="pagination mb-0">
                    <!-- Previous Button -->
                    <li class="page-item @(!Model.HasPreviousPage ? "disabled" : "")">
                        <a class="page-link" 
                           href="@Url.Action("Index", new { page = Model.CurrentPage - 1, pageSize = Model.PageSize, search = Model.SearchQuery })"
                           aria-label="Anterior">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>

                    @{
                        var startPage = Math.Max(1, Model.CurrentPage - 2);
                        var endPage = Math.Min(Model.TotalPages, Model.CurrentPage + 2);
                        
                        if (startPage > 1)
                        {
                            <li class="page-item">
                                <a class="page-link" href="@Url.Action("Index", new { page = 1, pageSize = Model.PageSize, search = Model.SearchQuery })">1</a>
                            </li>
                            if (startPage > 2)
                            {
                                <li class="page-item disabled"><span class="page-link">...</span></li>
                            }
                        }

                        for (int i = startPage; i <= endPage; i++)
                        {
                            <li class="page-item @(i == Model.CurrentPage ? "active" : "")">
                                <a class="page-link" href="@Url.Action("Index", new { page = i, pageSize = Model.PageSize, search = Model.SearchQuery })">@i</a>
                            </li>
                        }

                        if (endPage < Model.TotalPages)
                        {
                            if (endPage < Model.TotalPages - 1)
                            {
                                <li class="page-item disabled"><span class="page-link">...</span></li>
                            }
                            <li class="page-item">
                                <a class="page-link" href="@Url.Action("Index", new { page = Model.TotalPages, pageSize = Model.PageSize, search = Model.SearchQuery })">@Model.TotalPages</a>
                            </li>
                        }
                    }

                    <!-- Next Button -->
                    <li class="page-item @(!Model.HasNextPage ? "disabled" : "")">
                        <a class="page-link" 
                           href="@Url.Action("Index", new { page = Model.CurrentPage + 1, pageSize = Model.PageSize, search = Model.SearchQuery })"
                           aria-label="Siguiente">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    }
</div>

<!-- Delete Form -->
<form id="deleteForm" asp-action="Delete" method="post" style="display: none;">
    <input type="hidden" name="id" id="deleteId" />
</form>

@section Scripts {
    <script>
        function confirmDelete(id) {
            Swal.fire({
                title: '¿Eliminar miembro?',
                text: 'Esta acción no se puede deshacer.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('deleteId').value = id;
                    document.getElementById('deleteForm').submit();
                }
            });
        }

        // Show success/error messages
        @if (TempData["SuccessMessage"] != null)
        {
            <text>
            toastr.success('@TempData["SuccessMessage"]');
            </text>
        }
        @if (TempData["ErrorMessage"] != null)
        {
            <text>
            toastr.error('@TempData["ErrorMessage"]');
            </text>
        }
    </script>
}