Producto vista index

@model IEnumerable<ejemplo_crud_MVC_sqlServer.Models.Producto>

@{
    ViewData["Title"] = "Productos";
}

<!-- Mensajes de éxito y error -->
@if (TempData["SuccessMessage"] != null)
{
    <div class="alert alert-success">
        @TempData["SuccessMessage"]
    </div>
}

@if (TempData["ErrorMessage"] != null)
{
    <div class="alert alert-danger">
        @TempData["ErrorMessage"]
    </div>
}

<div class="d-flex justify-content-between align-items-center">
    <h2>Productos</h2>
    <!-- Botón para agregar un nuevo producto -->
    <a asp-action="CrearOEditar" class="btn btn-success">Agregar Producto</a>
</div>

<!-- Tabla de productos -->
<table class="table table-striped">
    <thead class="table-dark">
        <tr>
            <th>Nombre</th>
            <th>Categoría</th>
            <th>Descripción</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody>
        @if (Model != null && Model.Any())
        {
            @foreach (var producto in Model)
            {
                <tr>
                    <td>@producto.nombreProducto</td>
                    <td>@producto.Categoria?.nombreCategoria</td>
                    <td>@producto.descripcion</td>
                    <td>
                        <!-- Botón para editar -->
                        <a asp-action="CrearOEditar" asp-route-id="@producto.idProducto" class="btn btn-primary btn-sm">
                            Actualizar
                        </a>
                        <!-- Botón para eliminar -->
                        <button class="btn btn-danger btn-sm" onclick="eliminarProducto(@producto.idProducto)">
                            Eliminar
                        </button>
                    </td>
                </tr>
            }
        }
        else
        {
            <tr>
                <td colspan="4" class="text-center">No hay productos disponibles.</td>
            </tr>
        }
    </tbody>
</table>

<!-- Paginación -->
<div class="d-flex justify-content-center mt-4">
    @if (ViewBag.TotalPaginas > 1)
    {
        <ul class="pagination">
            <!-- Primera página -->
            <li class="page-item @(ViewBag.PaginaActual == 1 ? "disabled" : "")">
                <a class="page-link" href="@Url.Action("Index", new { pagina = 1, tamañoPagina = 10 })">Primera</a>
            </li>

            <!-- Páginas anteriores y siguientes -->
            @for (int i = 1; i <= ViewBag.TotalPaginas; i++)
            {
                <li class="page-item @(ViewBag.PaginaActual == i ? "active" : "")">
                    <a class="page-link" href="@Url.Action("Index", new { pagina = i, tamañoPagina = 10 })">@i</a>
                </li>
            }

            <!-- Última página -->
            <li class="page-item @(ViewBag.PaginaActual == ViewBag.TotalPaginas ? "disabled" : "")">
                <a class="page-link" href="@Url.Action("Index", new { pagina = ViewBag.TotalPaginas, tamañoPagina = 10 })">Última</a>
            </li>
        </ul>
    }
</div>

<!-- Modal para confirmar la eliminación del producto -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmDeleteModalLabel">Confirmar Eliminación</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                ¿Estás seguro de que deseas eliminar este producto?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteButton">Eliminar</button>
            </div>
        </div>
    </div>
</div>

<!-- Script para confirmar la eliminación con modal -->
<script>
    let productDeleteModal;

    document.addEventListener('DOMContentLoaded', function () {
        productDeleteModal = new bootstrap.Modal(document.getElementById('confirmDeleteModal'));
    });

    function eliminarProducto(id) {
        document.getElementById('confirmDeleteButton').onclick = function () {
            window.location.href = '/Productos/Eliminar/' + id;
        };
        productDeleteModal.show();
    }
</script>