@php
    $productos = \App\Models\Product::with('images')
        ->select('products.*')
        ->leftJoin(DB::raw('(SELECT product_id, SUM(quantity) as total_vendidos FROM order_items GROUP BY product_id) as ventas'), 'products.id', '=', 'ventas.product_id')
        ->orderByDesc('ventas.total_vendidos')
        //->limit(5)
        ->get();
    $clienteAutenticado = session()->has('cliente_id');
@endphp

<section class="py-5 bg-white">
    <div class="text-end mb-4 pe-4">
        <button class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#filtroModal">
            <i class="fas fa-filter me-2"></i> Filtros
        </button>
    </div>



    <div class="container">
        <div class="row g-4">
            @foreach ($productos as $producto)
                <div class="col-6 col-sm-6 col-md-4 col-lg-3 producto-item" data-nombre="{{ Str::lower($producto->name) }}"
                    data-precio="{{ $producto->price }}">

                    <div class="card h-100 shadow-sm">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#productoModalC{{ $producto->id }}">
                            @if ($producto->images->count())
                                <img src="{{ asset('storage/' . $producto->images->first()->image_path) }}"
                                    class="card-img-top p-3 imagen-ajustada" alt="{{ $producto->name }}">

                            @endif
                        </a>

                        <div class="card-body d-flex flex-column justify-content-between">
                            <div>
                                <h6 class="card-title text-primary fw-bold mb-0.5" style="min-height: 20px;">
                                    <a href="#" data-bs-toggle="modal" data-bs-target="#productoModalC{{ $producto->id }}"
                                        class="text-decoration-none text-dark">
                                        {{ $producto->name }}
                                    </a>
                                </h6>
                                <p class="mb-0.5 text-success fw-bold fs-5">${{ number_format($producto->price, 2) }}</p>
                                <p class="text-muted small">{{ Str::limit($producto->description, 60) }}</p>
                            </div>
                            <button class="btn btn-outline-success w-100 mt-auto agregar-al-carrito"
                                data-product-id="{{ $producto->id }}">
                                <i class="fas fa-shopping-cart me-2"></i> Agregar al carrito
                            </button>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="productoModalC{{ $producto->id }}" tabindex="-1"
                    aria-labelledby="productoModalLabel{{ $producto->id }}" aria-hidden="true">
                    <div class="modal-dialog modal-xl modal-dialog-centered">
                        <div class="modal-content p-3">
                            <div class="modal-header border-0">
                                <h5 class="modal-title fw-bold">{{ $producto->name }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Cerrar"></button>
                            </div>

                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-2 d-none d-md-flex flex-column gap-2 align-items-center">
                                        @foreach ($producto->images as $index => $img)
                                            <img src="{{ asset('storage/' . $img->image_path) }}"
                                                class="img-thumbnail w-100 {{ $index === 0 ? 'border border-primary' : '' }}"
                                                style="cursor:pointer;" data-bs-target="#carouselProducto{{ $producto->id }}"
                                                data-bs-slide-to="{{ $index }}">
                                        @endforeach
                                    </div>

                                    <div class="col-md-5">
                                        <div id="carouselProducto{{ $producto->id }}" class="carousel slide"
                                            data-bs-ride="carousel">
                                            <div class="carousel-inner">
                                                @foreach ($producto->images as $index => $img)
                                                    <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                                        <img src="{{ asset('storage/' . $img->image_path) }}"
                                                            class="d-block w-100 rounded" alt="Imagen {{ $index + 1 }}">
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-5">
                                        <h4 class="text-primary">{{ $producto->name }}</h4>
                                        <p class="text-muted">{{ $producto->description }}</p>
                                        <div class="fs-4 fw-bold text-success mb-3">
                                            ${{ number_format($producto->price, 2) }}
                                        </div>
                                        <button class="btn btn-success w-100 agregar-al-carrito"
                                            data-product-id="{{ $producto->id }}">
                                            <i class="fas fa-cart-plus me-2"></i> Agregar al carrito
                                        </button>

                                        <ul class="list-unstyled mt-4 text-muted small">
                                            <li><i class="fas fa-shield-alt me-2"></i> Compra protegida</li>
                                            <li><i class="fas fa-undo me-2"></i> Devoluciones sin costo</li>
                                            <li><i class="fas fa-truck me-2"></i> Envío rápido</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<!-- Modal de Filtros -->
<div class="modal fade" id="filtroModal" tabindex="-1" aria-labelledby="filtroModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content p-3">
            <div class="modal-header">
                <h5 class="modal-title" id="filtroModalLabel">Filtrar productos</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="buscadorNombre" class="form-label">Nombre del producto</label>
                    <input type="text" id="buscadorNombre" class="form-control" placeholder="Ej. chocolate">
                </div>
                <div class="mb-3">
                    <label for="precioMin" class="form-label">Precio mínimo</label>
                    <input type="number" id="precioMin" class="form-control" min="0" placeholder="0">
                </div>
                <div class="mb-3">
                    <label for="precioMax" class="form-label">Precio máximo</label>
                    <input type="number" id="precioMax" class="form-control" min="0" placeholder="1000">
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    function filtrarProductos() {
        const nombreFiltro = document.getElementById('buscadorNombre').value.toLowerCase();
        const precioMin = parseFloat(document.getElementById('precioMin').value) || 0;
        const precioMax = parseFloat(document.getElementById('precioMax').value) || Infinity;

        document.querySelectorAll('.producto-item').forEach(item => {
            const nombre = item.dataset.nombre;
            const precio = parseFloat(item.dataset.precio);

            const coincideNombre = nombre.includes(nombreFiltro);
            const dentroRango = precio >= precioMin && precio <= precioMax;

            item.style.display = (coincideNombre && dentroRango) ? 'block' : 'none';
        });
    }

    // Escucha en tiempo real
    document.addEventListener('DOMContentLoaded', function () {
        ['buscadorNombre', 'precioMin', 'precioMax'].forEach(id => {
            document.getElementById(id).addEventListener('input', filtrarProductos);
        });
    });
</script>