@extends('layout.front.master')
@section('content')

@if(view()->exists('modules.products.frontend.partials.dynamic-header'))
    @php
        $backgroundImage = asset('cd-project/img/demos/transportation-logistic/generic/generic-1.png');
    @endphp
    @include('modules.products.frontend.partials.dynamic-header', ['backgroundImage' => $backgroundImage])
@else
    {{-- Fallback a header moderno si no existe el dinámico --}}
    <x-page-header
        :title="$pageData['title'] ?? 'Nuestros Productos'"
        :subtitle="$pageData['subtitle'] ?? 'Helados frescos y deliciosos para toda la familia'"
        :icon="isset($tag) ? 'fas fa-tag' : 'fas fa-laptop-code'"
        :breadcrumbs="$pageData['breadcrumbs'] ?? [
            ['title' => 'Inicio', 'url' => route('front.welcome')],
            ['title' => 'Productos', 'active' => true]
        ]"
        background="primary" />
@endif

{{-- Products Section using Porto shop component --}}
<section class="section section-height-3 bg-light m-0 border-0">
    <div class="container container-xl-custom">
        {{-- Mobile Filter Button --}}
        <div class="row mb-3 d-lg-none">
            <div class="col-12">
                <button class="btn btn-outline-dark btn-modern w-100 d-flex align-items-center justify-content-center products-filter-btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#productsFiltersOffcanvas" aria-controls="productsFiltersOffcanvas">
                    <i class="fas fa-filter me-2"></i>
                    <span>Filtros</span>
                    @php
                        $activeFiltersCount = 0;
                        if (request()->is('products/category/*')) $activeFiltersCount++;
                        if (request()->is('products/tag/*')) $activeFiltersCount++;
                    @endphp
                    @if($activeFiltersCount > 0)
                        <span class="badge bg-color-grey-scale-2 text-color-dark ms-2 rounded-pill">{{ $activeFiltersCount }}</span>
                    @endif
                </button>
            </div>
        </div>

        <div class="row">
            {{-- Sidebar Filters for Products (Desktop) --}}
            <div class="col-lg-3 order-lg-1 d-none d-lg-block">
                <div class="card border-0 shadow-modern rounded-lg mb-4 products-sidebar-sticky">
                    <div class="card-header bg-color-grey-scale-1 border-bottom border-color-grey-scale-2 p-4">
                        <h5 class="mb-0 font-weight-bold text-color-dark">
                            <i class="fas fa-filter me-2 text-color-grey"></i>Filtros
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        @include('modules.products.frontend.partials.filters-content')
                    </div>
                </div>
            </div>

            {{-- Mobile Offcanvas Filters --}}
            <div class="offcanvas offcanvas-start" tabindex="-1" id="productsFiltersOffcanvas" aria-labelledby="productsFiltersOffcanvasLabel">
                <div class="offcanvas-header border-bottom">
                    <h5 class="offcanvas-title font-weight-bold" id="productsFiltersOffcanvasLabel">
                        <i class="fas fa-filter me-2"></i>Filtros
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Cerrar"></button>
                </div>
                <div class="offcanvas-body p-0">
                    <div class="p-4">
                        @include('modules.products.frontend.partials.filters-content')
                    </div>
                </div>
            </div>

            {{-- Products Grid --}}
            <div class="col-lg-9 order-lg-2">
                @if(isset($products) && $products->count() > 0)
                    {{-- Results Info Bar --}}
                    <div class="row mb-3 mb-md-4">
                        <div class="col-12">
                            <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center bg-color-light p-3 p-md-4 rounded products-results-bar">
                                <div class="mb-2 mb-md-0">
                                    <h5 class="mb-1 text-color-dark products-results-title">
                                        <i class="fas fa-shopping-bag text-primary me-2"></i>
                                        <span class="d-none d-sm-inline">Productos Disponibles</span>
                                        <span class="d-sm-none">Productos</span>
                                    </h5>
                                    <p class="mb-0 text-color-grey text-3 products-results-count">
                                        <strong class="text-color-dark">{{ $products->total() }}</strong> {{ $products->total() === 1 ? 'producto encontrado' : 'productos encontrados' }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Products Grid Optimizado --}}
                    <div class="shop">
                        <div class="masonry-loader masonry-loader-showing">
                            <div class="row products product-thumb-info-list" data-plugin-masonry data-plugin-options="{'layoutMode': 'fitRows'}">
                                @foreach ($products as $product)
                                <div class="col-sm-6 col-lg-4">
                                    <div class="product mb-5">
                                        <div class="product-thumb-info border-0 mb-3">
                                            @if($product->slug)
                                            <a href="{{ route('front.products.show', $product->slug) }}">
                                            @else
                                            <a href="#" onclick="return false;" title="Producto sin slug">
                                            @endif
                                                <div class="product-thumb-info-image">
                                                    @if($product->images->count() > 0)
                                                        <div id="productCarousel{{ $product->id }}" class="carousel slide" data-bs-ride="carousel">
                                                            <div class="carousel-inner">
                                                                @foreach($product->images as $key => $image)
                                                                    <div class="carousel-item @if($key == 0) active @endif">
                                                                        <img src="{{ asset($image->image_path) }}" class="d-block w-100" alt="{{ $product->name }}">
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                            @if($product->images->count() > 1)
                                                                <button class="carousel-control-prev" type="button" data-bs-target="#productCarousel{{ $product->id }}" data-bs-slide="prev">
                                                                </button>
                                                                <button class="carousel-control-next" type="button" data-bs-target="#productCarousel{{ $product->id }}" data-bs-slide="next">
                                                                </button>
                                                            @endif
                                                        </div>
                                                    @else
                                                        <img alt="{{ $product->name }}" class="img-fluid" src="{{ asset('path_to_placeholder_image.jpg') }}">
                                                    @endif
                                                </div>
                                            </a>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <a href="#" class="d-block text-uppercase text-decoration-none text-color-default text-color-hover-primary line-height-1 text-0 mb-1">{{ $product->category->name ?? 'Category' }}</a>
                                                <h3 class="text-3-5 font-weight-medium font-alternative text-transform-none line-height-3 mb-0">
                                                    @if($product->slug)
                                                    <a href="{{ route('front.products.show', $product->slug) }}" class="text-color-dark text-color-hover-primary">{{ $product->name }}</a>
                                                    @else
                                                    <span class="text-color-dark">{{ $product->name }}</span>
                                                    @endif
                                                </h3>
                                            </div>
                                        </div>
                                        <div class="mb-2">
                                            @foreach ($product->tags as $tag)
                                                <span class="badge badge-dark badge-sm rounded-pill text-uppercase px-2 py-1 me-1">{{ $tag->name }}</span>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    {{-- Pagination for Products --}}
                    @if($products->hasPages())
                        <div class="row mt-4 mt-md-5 pagination-wrapper">
                            <div class="col-12">
                                <div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-3">
                                    {{-- Results info --}}
                                    <div class="text-color-grey text-3 pagination-info">
                                        Mostrando <strong class="text-color-dark">{{ $products->firstItem() }}</strong> a <strong class="text-color-dark">{{ $products->lastItem() }}</strong> de <strong class="text-color-dark">{{ $products->total() }}</strong> resultados
                                    </div>

                                    {{-- Pagination buttons --}}
                                    <nav aria-label="Paginación de productos">
                                        <ul class="pagination pagination-lg mb-0">
                                            {{-- Previous Button --}}
                                            <li class="page-item {{ $products->onFirstPage() ? 'disabled' : '' }}">
                                                <a class="page-link" href="{{ $products->previousPageUrl() }}" aria-label="Anterior" {{ $products->onFirstPage() ? 'tabindex="-1" aria-disabled="true"' : '' }}>
                                                    <i class="fas fa-angle-left"></i>
                                                    <span class="d-none d-sm-inline ms-1">Anterior</span>
                                                </a>
                                            </li>

                                            {{-- Page Numbers --}}
                                            @php
                                                $currentPage = $products->currentPage();
                                                $lastPage = $products->lastPage();
                                                $pagesToShow = [];

                                                // Siempre mostrar primera página
                                                $pagesToShow[] = 1;

                                                // Calcular rango alrededor de la página actual
                                                $start = max(2, $currentPage - 1);
                                                $end = min($lastPage - 1, $currentPage + 1);

                                                // Agregar páginas del rango
                                                for ($i = $start; $i <= $end; $i++) {
                                                    if ($i != 1 && $i != $lastPage && !in_array($i, $pagesToShow)) {
                                                        $pagesToShow[] = $i;
                                                    }
                                                }

                                                // Siempre mostrar última página si hay más de 1
                                                if ($lastPage > 1) {
                                                    $pagesToShow[] = $lastPage;
                                                }

                                                sort($pagesToShow);
                                            @endphp

                                            @foreach($pagesToShow as $index => $page)
                                                @if($index > 0 && $pagesToShow[$index - 1] < $page - 1)
                                                    <li class="page-item disabled">
                                                        <span class="page-link">...</span>
                                                    </li>
                                                @endif

                                                @if($page == $currentPage)
                                                    <li class="page-item active">
                                                        <span class="page-link">{{ $page }}</span>
                                                    </li>
                                                @else
                                                    <li class="page-item">
                                                        <a class="page-link" href="{{ $products->url($page) }}">{{ $page }}</a>
                                                    </li>
                                                @endif
                                            @endforeach

                                            {{-- Next Button --}}
                                            <li class="page-item {{ !$products->hasMorePages() ? 'disabled' : '' }}">
                                                <a class="page-link" href="{{ $products->nextPageUrl() }}" aria-label="Siguiente" {{ !$products->hasMorePages() ? 'tabindex="-1" aria-disabled="true"' : '' }}>
                                                    <span class="d-none d-sm-inline me-1">Siguiente</span>
                                                    <i class="fas fa-angle-right"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    @endif
                @else
                    {{-- No Results State --}}
                    <div class="row">
                        <div class="col-12">
                            <div class="card border-0 shadow-modern rounded-lg">
                                <div class="card-body text-center py-5">
                                    <i class="fas fa-shopping-bag text-primary" style="font-size: 4rem;"></i>
                                    <h4 class="font-weight-semibold mt-3 mb-3 text-color-dark">No hay productos disponibles</h4>
                                    <p class="text-color-grey mb-4">
                                        Próximamente tendremos nuevos productos para mostrar.
                                    </p>
                                    <a href="{{ route('front.contact') }}" class="btn btn-primary btn-modern">
                                        <i class="fas fa-phone me-2"></i>Contactar
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Porto animations if available
    if (typeof theme !== 'undefined' && theme.PluginAnimateViewport) {
        theme.PluginAnimateViewport.initialize();
    }

    // Cerrar offcanvas al hacer click en un filtro en mobile
    const filterLinks = document.querySelectorAll('#productsFiltersOffcanvas .products-filter-link, #productsFiltersOffcanvas .products-tag-link');
    const offcanvas = document.getElementById('productsFiltersOffcanvas');

    if (offcanvas && filterLinks.length > 0) {
        filterLinks.forEach(link => {
            link.addEventListener('click', function() {
                // Pequeño delay para permitir la navegación
                setTimeout(function() {
                    const bsOffcanvas = bootstrap.Offcanvas.getInstance(offcanvas);
                    if (bsOffcanvas) {
                        bsOffcanvas.hide();
                    }
                }, 100);
            });
        });
    }
});
</script>
@endsection

@section('css')
<link rel="stylesheet" href="{{ asset('modules/products/products.css') }}">
@endsection