@model IEnumerable<Rs_system.Models.ViewModels.ArticuloViewModel>
@{
    ViewData["Title"] = "Inventario de Artículos";
}

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="mb-1">Inventario de Artículos</h4>
        <p class="text-muted mb-0">Gestión de bienes y activos fijos</p>
    </div>
    <a asp-action="Create" class="btn btn-primary-custom">
        <i class="bi bi-plus-lg me-1"></i> Nuevo Artículo
    </a>
</div>

<!-- Filters Card -->
<div class="card-custom mb-4">
    <div class="card-body py-3">
        <form asp-action="Index" method="get" class="row g-3">
            <div class="col-md-3">
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0"><i class="bi bi-search"></i></span>
                    <input type="text" name="search" class="form-control border-start-0" placeholder="Buscar por nombre, código..." value="@ViewBag.CurrentSearch">
                </div>
            </div>
            <div class="col-md-3">
                <select name="categoriaId" class="form-select" asp-items="ViewBag.Categorias">
                    <option value="">Todas las Categorías</option>
                </select>
            </div>
            <div class="col-md-3">
                <select name="ubicacionId" class="form-select" asp-items="ViewBag.Ubicaciones">
                    <option value="">Todas las Ubicaciones</option>
                </select>
            </div>
            <div class="col-md-2">
                <select name="estadoId" class="form-select" asp-items="ViewBag.Estados">
                    <option value="">Todos los Estados</option>
                </select>
            </div>
            <div class="col-md-1 d-grid">
                <button type="submit" class="btn btn-secondary" title="Filtrar">
                    <i class="bi bi-funnel"></i>
                </button>
            </div>
        </form>
    </div>
</div>

<div class="card-custom">
    <div class="table-responsive">
        <table class="table-custom align-middle">
            <thead>
                <tr>
                    <th style="width: 60px;">Img</th>
                    <th>Código</th>
                    <th>Nombre / Marca</th>
                    <th>Ubicación</th>
                    <th>Categoría</th>
                    <th class="text-center">Estado</th>
                    <th class="text-center">Acciones</th>
                </tr>
            </thead>
            <tbody>
                @if (!Model.Any())
                {
                    <tr>
                        <td colspan="7" class="text-center text-muted py-5">
                            <i class="bi bi-box-seam fs-1 d-block mb-2"></i>
                            No se encontraron artículos
                        </td>
                    </tr>
                }
                else
                {
                    @foreach (var item in Model)
                {
                    <tr>
                        <td class="text-center">
                            @if (!string.IsNullOrEmpty(item.ImagenUrl))
                            {
                                <img src="@item.ImagenUrl" alt="Img" class="rounded" style="width: 40px; height: 40px; object-fit: cover;" />
                            }
                            else
                            {
                                <div class="rounded bg-light d-flex align-items-center justify-content-center text-muted" style="width: 40px; height: 40px;">
                                    <i class="bi bi-image"></i>
                                </div>
                            }
                        </td>
                        <td>
                            <span class="badge bg-light text-dark border">@item.Codigo</span>
                        </td>
                        <td>
                            <div class="fw-bold">@item.Nombre</div>
                            @if (!string.IsNullOrEmpty(item.Marca))
                            {
                                <small class="text-muted">@item.Marca @item.Modelo</small>
                            }
                        </td>
                        <td>
                            <i class="bi bi-geo-alt-fill text-muted me-1" style="font-size: 0.8rem;"></i>
                            @item.UbicacionNombre
                        </td>
                        <td>@item.CategoriaNombre</td>
                        <td class="text-center">
                            <span class="badge bg-@(item.EstadoColor ?? "secondary")">
                                @item.EstadoNombre
                            </span>
                        </td>
                        <td class="text-center">
                            <div class="btn-group">
                                <a asp-action="Details" asp-route-id="@item.Id" class="btn btn-sm btn-outline-primary" title="Ver Ficha Técnica">
                                    <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>
                            </div>
                        </td>
                    </tr>
                }
                }
                
            </tbody>
        </table>
    </div>
</div>

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