@model IEnumerable<foundation_system.Models.Colaborador>

@{
    ViewData["Title"] = "Gestión de Colaboradores";
}

<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="h3 mb-0 text-gray-800"><i class="bi bi-people-fill me-2"></i>@ViewData["Title"]</h2>
        <a asp-action="Create" class="btn btn-primary">
            <i class="bi bi-person-plus-fill me-2"></i> Nuevo Colaborador
        </a>
    </div>

    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="colaboradoresTable">
                    <thead class="table-light">
                        <tr>
                            <th>Nombre Completo</th>
                            <th>Cargo</th>
                            <th>Tipo</th>
                            <th>DUI</th>
                            <th>Teléfono</th>
                            <th>Estado</th>
                            <th class="text-center">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-circle me-3">
                                            @item.Persona.Nombres.Substring(0, 1)@item.Persona.Apellidos.Substring(0, 1)
                                        </div>
                                        <div>
                                            <div class="fw-bold">@item.Persona.Nombres @item.Persona.Apellidos</div>
                                            <small class="text-muted">@item.Persona.Email</small>
                                        </div>
                                    </div>
                                </td>
                                 <td><span class="badge bg-info text-dark">@(item.Cargo?.Nombre ?? "Sin Cargo")</span></td>
                                <td>@item.TipoColaborador</td>
                                <td>@item.Persona.Dui</td>
                                <td>@item.Persona.Telefono</td>
                                <td>
                                    @if (item.Activo)
                                    {
                                        <span class="badge bg-success">Activo</span>
                                    }
                                    else
                                    {
                                        <span class="badge bg-danger">Inactivo</span>
                                    }
                                </td>
                                <td class="text-center">
                                    <div class="btn-group btn-group-sm">
                                        <a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-outline-primary" title="Editar">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        <button type="button" class="btn btn-outline-danger" title="Desactivar" 
                                                onclick="confirmDelete(@item.Id, '@item.Persona.Nombres @item.Persona.Apellidos')">
                                            <i class="bi bi-person-x"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
    .avatar-circle {
        width: 40px;
        height: 40px;
        background-color: #e9ecef;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: #495057;
    }
</style>

<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, name) {
            if (confirm(`¿Está seguro de que desea desactivar a "${name}"?`)) {
                document.getElementById('deleteId').value = id;
                document.getElementById('deleteForm').submit();
            }
        }
    </script>
}
