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

@php
    // Detectar si el demo activo es demo-photography-3 o demo-architecture-2 para personalizar la vista
    $activeDemo = get_active_demo();
    $isPhotography3 = ($activeDemo === 'demo-photography-3');
    $isArchitecture2 = ($activeDemo === 'demo-architecture-2');
    $useFullscreenLayout = $isPhotography3 || $isArchitecture2;
    // Determinar clases CSS según si hay sidebar o no
    $sidebarColClass = $useFullscreenLayout ? 'd-none' : 'col-lg-3 order-lg-1 d-none d-lg-block';
    $contentColClass = $useFullscreenLayout ? 'col-12' : 'col-lg-9 order-lg-2';
@endphp

@if($isArchitecture2)
    {{-- Layout especial para Architecture 2: Fullscreen con sidebar --}}
    <div role="main" class="main" id="main" style="padding: 0 !important; margin: 0 !important; overflow: hidden; position: relative;">
        {{-- Slider Fullscreen con imágenes de productos --}}
        @if(isset($products) && $products->count() > 0)
            <div class="slider-container rev_slider_wrapper" style="height: 100vh;">
                <div id="revolutionSlider" class="slider rev_slider manual" data-version="5.4.8">
                    <ul>
                        @php
                            $slideIndex = 0;
                        @endphp
                        @foreach($products as $product)
                            @if($product->images->count() > 0)
                                @foreach($product->images as $image)
                                    @php
                                        $imageUrl = filter_var($image->image_path, FILTER_VALIDATE_URL)
                                            ? $image->image_path
                                            : asset($image->image_path);
                                        $slideTitle = $product->name;
                                    @endphp
                                    <li data-transition="fade" data-index="rs-{{ $slideIndex }}">
                                        <img src="{{ $imageUrl }}"
                                             alt="{{ $slideTitle }}"
                                             data-bgposition="center center"
                                             data-bgfit="cover"
                                             data-bgrepeat="no-repeat"
                                             class="rev-slidebg">

                                        <div class="tp-caption tp-caption-photo-label"
                                            data-x="['left','left','left','left']"
                                            data-hoffset="['28','28','28','28']"
                                            data-y="['bottom','bottom','bottom','bottom']"
                                            data-voffset="['80','80','60','40']"
                                            data-start="500"
                                            data-end="9400"
                                            data-splitin="none"
                                            data-splitout="none"
                                            data-basealign="slide"
                                            data-transform_in="y:[-300%];opacity:0;s:500;e:Power2.easeOut"
                                            data-transform_out="opacity:0;y:50;s:300;e:Power2.easeIn">
                                            {{ $slideTitle }}
                                            @if($product->category)
                                                <span class="d-block text-2 mt-1 opacity-7">{{ $product->category->name }}</span>
                                            @endif
                                        </div>
                                    </li>
                                    @php
                                        $slideIndex++;
                                    @endphp
                                @endforeach
                            @endif
                        @endforeach
                    </ul>
                </div>
            </div>
        @else
            {{-- Sin productos: mostrar mensaje --}}
            <div class="d-flex align-items-center justify-content-center" style="height: 100vh; background-color: var(--secondary);">
                <div class="text-center">
                    <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">
                        @if(isset($category) && $category)
                            No hay productos en la categoría "{{ $category->name }}".
                        @else
                            Próximamente tendremos nuevos productos para mostrar.
                        @endif
                    </p>
                    @if(isset($category) && $category)
                        <a href="{{ route('front.products.index') }}" class="btn btn-primary btn-modern">
                            <i class="fas fa-arrow-left me-2"></i>Ver Todos los Productos
                        </a>
                    @endif
                </div>
            </div>
        @endif
    </div>
@else
    {{-- Layout normal para otros demos --}}
    @if(view()->exists('modules.products.frontend.partials.dynamic-header'))
        @php
            // Sin imagen de fondo - usar color sólido
            $backgroundImage = null;
        @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 Modelos'"
            :subtitle="$pageData['subtitle'] ?? config('site.modules.products.page_header.subtitle', 'Sitios web profesionales diseñados para tu industria')"
            :icon="isset($tag) ? 'fas fa-tag' : 'fas fa-cogs'"
            :breadcrumbs="$pageData['breadcrumbs'] ?? [
                ['title' => 'Inicio', 'url' => route('front.welcome')],
                ['title' => 'Modelos', 'active' => true]
            ]"
            background="primary" />
    @endif

    {{-- Products Section using Porto shop component --}}
    <section class="section section-height-3 m-0 border-0" style="background-color: var(--secondary);">
    <div class="container container-xl-custom">
        {{-- Mobile Filter Button (oculto en demo-photography-3 y architecture-2) --}}
        @if(!$useFullscreenLayout)
        <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-0">{{ $activeFiltersCount }}</span>
                    @endif
                </button>
            </div>
        </div>
        @endif

        <div class="row">
            {{-- Sidebar Filters for Products (oculto en demo-photography-3 y architecture-2) --}}
            @if(!$useFullscreenLayout)
            <div class="{{ $sidebarColClass }}">
                <div class="card border-0 shadow-modern rounded-0 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 (oculto en demo-photography-3) --}}
            <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>
            @endif

            {{-- Products Grid --}}
            <div class="{{ $contentColClass }}">
                @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">Modelos 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">
                                                            <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-0 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-0">
                                <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>
@endif

<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') }}">
@if($isArchitecture2)
{{-- Revolution Slider CSS para architecture-2 --}}
<link rel="stylesheet" href="{{ asset('template/vendor/rs-plugin/css/settings.css') }}">
<link rel="stylesheet" href="{{ asset('template/vendor/rs-plugin/css/layers.css') }}">
<link rel="stylesheet" href="{{ asset('template/vendor/rs-plugin/css/navigation.css') }}">
<style>
html.architecture-demo-2-products #main {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    position: relative;
    height: 100vh;
}
html.architecture-demo-2-products .slider-container {
    height: 100vh !important;
}
/* Asegurar que el título del slide sea visible */
html.architecture-demo-2-products .tp-caption-photo-label {
    color: var(--light) !important;
    font-size: 18px !important;
    text-transform: uppercase !important;
    padding: 10px 0 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.3) !important;
    z-index: 1000 !important;
    position: relative !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    display: block !important;
}

html.architecture-demo-2-products .tp-caption-photo-label .text-2 {
    font-size: 14px !important;
    margin-top: 5px !important;
    opacity: 0.85 !important;
    display: block !important;
    white-space: nowrap !important;
}

/* Asegurar que los captions anteriores se oculten correctamente */
html.architecture-demo-2-products .tp-caption.tp-hidden-caption {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
</style>
@endif
@endsection

@if($isArchitecture2)
@section('scripts')
{{-- Revolution Slider JS para architecture-2 --}}
<script src="{{ asset('template/vendor/rs-plugin/js/jquery.themepunch.tools.min.js') }}"></script>
<script src="{{ asset('template/vendor/rs-plugin/js/jquery.themepunch.revolution.min.js') }}"></script>
{{-- Usar el JS de photography para inicializar el slider --}}
<script src="{{ asset('template/js/demos/demo-photography.js') }}"></script>
@endsection
@endif