WebVenta/WebVentaCoche/Views/Home/ProductsHome.cshtml

@model IEnumerable<WebVentaCoche.Models.Product>
@{
    ViewData["Title"] = "Nuestros Productos";
}

<!-- 1) Estilos específicos para grid y tarjetas -->
<style>
    /* El tbody como grid de 2 columnas */
    #productsTable tbody {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
        gap: 1rem; /* espacio entre teselas */
    }
    /* Cada <tr> no interfiere con el grid */
    #productsTable tr {
        display: contents;
    }
    /* Eliminamos bordes/paddings de celdas */
    #productsTable td {
        border: none;
        padding: 0;
    }
    /* Estilo “card” translúcida */
    .card-transparent {
        background-color: rgba(255, 255, 255, 0.8);
        border: none;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
</style>

<div class="container my-4">
    <h2 class="text-center mb-4">@ViewData["Title"]</h2>

    <div class="row">
        <!-- Sidebar de filtros -->
        <aside class="col-md-3 mb-4">
            <div class="card card-transparent p-3">
                <h5>Filtros</h5>
                <div class="mb-3">
                    <label for="filterName" class="form-label">Nombre</label>
                    <input type="text" id="filterName" class="form-control" placeholder="Buscar nombre..." />
                </div>
                <div class="mb-3">
                    <label class="form-label">Precio</label>
                    <div class="input-group mb-2">
                        <span class="input-group-text">Min</span>
                        <input type="number" id="filterPriceMin" class="form-control" placeholder="0" min="0" />
                    </div>
                    <div class="input-group">
                        <span class="input-group-text">Max</span>
                        <input type="number" id="filterPriceMax" class="form-control" placeholder="999" min="0" />
                    </div>
                </div>
                <button id="btnClearFilters" class="btn btn-sm btn-secondary w-100 mt-3">
                    📋 Quitar filtros
                </button>
            </div>
        </aside>

        <!-- Tabla de productos -->
        <section class="col-md-9">
            <table id="productsTable" class="table table-borderless">
                <thead class="d-none">
                    <tr><th></th></tr>
                </thead>
                <tbody>
                    @foreach (var p in Model)
                    {
                        <tr>
                            <td>
                                <div class="card card-transparent">
                                    <div class="card-body d-flex">
                                        <div class="me-3" style="width:100px;">
                                            <img src="@(string.IsNullOrEmpty(p.ImagePath) ? "/images/default.png" : p.ImagePath)"
                                                 class="img-fluid rounded" style="max-height:80px;" />
                                        </div>
                                        <div>
                                            <h5 class="card-title">@p.Name</h5>
                                            <p class="card-text">@p.ShortDescription</p>
                                            <p class="card-text"><strong>@p.Price.ToString("0.00") €</strong></p>
                                            <a asp-action="ProductsDetailsHome"
                                               asp-controller="Home"
                                               asp-route-id="@p.Id"
                                               class="btn btn-sm btn-primary">
                                                Más detalles
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </section>
    </div>
</div>

@section Scripts {
    <script>
        $(function () {
            // 1) Inicializa DataTable sin su buscador integrado (dom:'lrtip')
            var table = $('#productsTable').DataTable({
                dom: 'lrtip',
                paging: true,
                ordering: true,
                lengthChange: false,
                pageLength: 8,      // 8 productos / página
                order: [],     // sin orden inicial
                language: { url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/es-ES.json' },
                columnDefs: [{ orderable: false, targets: [0] }]
            });

            // 2) Filtro de precio
            $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
                if (settings.nTable.id !== 'productsTable') return true;
                var row = table.row(dataIndex).node();
                var precioTxt = $('p.card-text strong', row).first().text()
                    .replace(' €', '').replace(',', '.');
                var precio = parseFloat(precioTxt) || 0;
                var min = parseFloat($('#filterPriceMin').val()) || 0;
                var max = parseFloat($('#filterPriceMax').val()) || Infinity;
                return precio >= min && precio <= max;
            });

            // 3) Filtro por nombre usando DataTables.search()
            $('#filterName').on('input', function () {
                table.search(this.value).draw();
            });

            // 4) Al cambiar precio, redraw para reaplicar ext.search
            $('#filterPriceMin, #filterPriceMax').on('input change', function () {
                table.draw();
            });

            // 5) Botón Quitar filtros
            $('#btnClearFilters').on('click', function () {
                $('#filterName, #filterPriceMin, #filterPriceMax').val('');
                table.search('').draw();
            });
        });
    </script>
}