@extends('layout.front.master')

@php
    $projectsTitle = config('site.modules.projects.page_header.title', __('Proyectos'));
    $projectsDescription = config('site.modules.projects.page_header.subtitle', __('Portfolio de proyectos de') . ' ' . config('site.name'));
@endphp
@section('title', $projectsTitle)
@section('description', $projectsDescription)
@section('keywords', config('site.seo.keywords') . ', proyectos, portfolio, obras')

{{-- Open Graph Meta Tags --}}
@section('og_title', $projectsTitle . ' | ' . config('site.name'))
@section('og_description', $projectsDescription)
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', $projectsTitle . ' | ' . config('site.name'))
@section('twitter_description', $projectsDescription)
@section('twitter_image', brand_og_image())

@section('content')

{{-- Dynamic Header --}}
@include('modules.projects.frontend.partials.dynamic-header')

{{-- Shop Section using Porto shop component --}}
<section class="section section-height-auto m-0 border-0 py-5" style="background-color: var(--secondary);">
    <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 projects-filter-btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#projectsFiltersOffcanvas" aria-controls="projectsFiltersOffcanvas">
                    <i class="fas fa-filter me-2"></i>
                    <span>Filtros</span>
                    @php
                        $activeFiltersCount = 0;
                        if (request()->is('projects/category/*')) $activeFiltersCount++;
                        if (request()->is('projects/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>

        <div class="row">
            {{-- Sidebar Filters for Projects (Desktop) --}}
            <div class="col-lg-3 order-lg-1 d-none d-lg-block">
                <div class="card border-0 rounded-0 mb-4 projects-sidebar-sticky" style="background-color: var(--dark); border: 1px solid var(--primary-rgba-10) !important;">
                    <div class="card-header p-4" style="background-color: var(--secondary); border-bottom: 1px solid var(--primary-rgba-10);">
                        <h5 class="mb-0 font-weight-bold" style="color: var(--light);">
                            <i class="fas fa-filter me-2 text-color-grey"></i>Filtros
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        @include('modules.projects.frontend.partials.filters-content')
                    </div>
                </div>
            </div>

            {{-- Mobile Offcanvas Filters --}}
            <div class="offcanvas offcanvas-start" tabindex="-1" id="projectsFiltersOffcanvas" aria-labelledby="projectsFiltersOffcanvasLabel">
                <div class="offcanvas-header border-bottom">
                    <h5 class="offcanvas-title font-weight-bold" id="projectsFiltersOffcanvasLabel">
                        <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.projects.frontend.partials.filters-content')
                    </div>
                </div>
            </div>

            {{-- Projects Grid --}}
            <div class="col-lg-9 order-lg-2">
                @if(isset($projects) && $projects->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 p-3 p-md-4 rounded projects-results-bar" style="background-color: var(--dark); border: 1px solid var(--primary-rgba-10);">
                                <div class="mb-2 mb-md-0">
                                    <h5 class="mb-1 projects-results-title" style="color: var(--light);">
                                        <i class="fas fa-project-diagram text-primary me-2"></i>
                                        <span class="d-none d-sm-inline">Proyectos Disponibles</span>
                                        <span class="d-sm-none">Proyectos</span>
                                    </h5>
                                    <p class="mb-0 text-3 projects-results-count" style="color: var(--quaternary);">
                                        @php $projectsTotal = method_exists($projects, 'total') ? $projects->total() : $projects->count(); @endphp
                                        <strong style="color: var(--light);">{{ $projectsTotal }}</strong> {{ $projectsTotal === 1 ? 'proyecto encontrado' : 'proyectos encontrados' }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Projects Grid Optimizado --}}
                    <div class="shop">
                        <div class="products row">
                            @foreach($projects as $index => $project)
                                <div class="col-12 col-md-6 col-lg-4 mb-4 appear-animation project-card-wrapper"
                                     data-appear-animation="fadeInUpShorterPlus"
                                     data-appear-animation-delay="{{ 200 + ($index * 100) }}"
                                     data-plugin-animate-viewport="true">
                                    <div class="card border-0 project-card h-100" style="background-color: var(--dark); border: 1px solid var(--primary-rgba-10) !important;">
                                        @if($project->image)
                                            <div class="card-img-top position-relative overflow-hidden project-image-wrapper" style="aspect-ratio: 16/9;">
                                                <a href="{{ route('frontend.projects.show', $project->slug) }}" class="text-decoration-none">
                                                    <img src="{{ filter_var($project->image, FILTER_VALIDATE_URL) ? $project->image : asset($project->image) }}"
                                                         alt="{{ $project->title }}"
                                                         class="img-fluid w-100 h-100 project-image"
                                                         style="object-fit: cover; transition: transform 0.4s ease;">
                                                </a>
                                                <div class="position-absolute top-0 end-0 m-3">
                                                    @if($project->url)
                                                        <span class="badge bg-success text-white">
                                                            <i class="fas fa-external-link-alt me-1"></i>Online
                                                        </span>
                                                    @endif
                                                </div>
                                            </div>
                                        @endif
                                        <div class="card-body p-4 d-flex flex-column">
                                            {{-- Categories & Tags --}}
                                            @if($project->categories && $project->categories->count() > 0 || $project->tags && $project->tags->count() > 0)
                                                <div class="mb-3">
                                                    @if($project->categories && $project->categories->count() > 0)
                                                        @foreach($project->categories->take(2) as $category)
                                                            <a href="{{ route('frontend.projects.category', $category->slug) }}"
                                                               class="badge me-1 mb-1 px-2 py-1 text-decoration-none project-badge" style="background-color: var(--secondary); color: var(--primary);">
                                                                {{ $category->name }}
                                                            </a>
                                                        @endforeach
                                                    @endif
                                                    @if($project->tags && $project->tags->count() > 0)
                                                        @foreach($project->tags->take(2) as $tag)
                                                            <a href="{{ route('frontend.projects.tag', $tag->slug) }}"
                                                               class="badge me-1 mb-1 px-2 py-1 text-decoration-none project-tag" style="background-color: var(--secondary); color: var(--quaternary);">
                                                                {{ $tag->name }}
                                                            </a>
                                                        @endforeach
                                                    @endif
                                                </div>
                                            @endif

                                            <h5 class="card-title font-weight-bold mb-3 flex-grow-1" style="font-size: 1.15rem; line-height: 1.4; min-height: 3rem; color: var(--light);">
                                                <a href="{{ route('frontend.projects.show', $project->slug) }}"
                                                   class="text-decoration-none" style="color: var(--light);">
                                                    {{ $project->title ?? 'Proyecto' }}
                                                </a>
                                            </h5>

                                            @if($project->description)
                                                <p class="mb-3 text-3" style="line-height: 1.6; color: var(--quaternary);">{{ \Illuminate\Support\Str::limit(strip_tags($project->description), 100) }}</p>
                                            @endif

                                            <div class="mt-auto pt-3" style="border-top: 1px solid rgba(240, 240, 245, 0.1);">
                                                <a href="{{ route('frontend.projects.show', $project->slug) }}"
                                                   class="custom-view-more d-inline-flex align-items-center font-weight-medium text-decoration-none" style="color: var(--primary);">
                                                    Ver Detalles
                                                    <i class="fas fa-arrow-right ms-2"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- Pagination for Projects --}}
                    @if(method_exists($projects, 'hasPages') && $projects->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-3 pagination-info" style="color: var(--quaternary);">
                                        Mostrando <strong style="color: var(--light);">{{ $projects->firstItem() }}</strong> a <strong style="color: var(--light);">{{ $projects->lastItem() }}</strong> de <strong style="color: var(--light);">{{ $projects->total() }}</strong> resultados
                                    </div>

                                    {{-- Pagination buttons --}}
                                    <nav aria-label="Paginación de proyectos">
                                        <ul class="pagination pagination-lg mb-0">
                                            {{-- Previous Button --}}
                                            <li class="page-item {{ $projects->onFirstPage() ? 'disabled' : '' }}">
                                                <a class="page-link" href="{{ $projects->previousPageUrl() }}" aria-label="Anterior" {{ $projects->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 = $projects->currentPage();
                                                $lastPage = $projects->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="{{ $projects->url($page) }}">{{ $page }}</a>
                                                    </li>
                                                @endif
                                            @endforeach

                                            {{-- Next Button --}}
                                            <li class="page-item {{ !$projects->hasMorePages() ? 'disabled' : '' }}">
                                                <a class="page-link" href="{{ $projects->nextPageUrl() }}" aria-label="Siguiente" {{ !$projects->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 rounded-0" style="background-color: var(--dark); border: 1px solid var(--primary-rgba-10) !important;">
                                <div class="card-body text-center py-5">
                                    <i class="fas fa-project-diagram" style="font-size: 4rem; color: var(--primary);"></i>
                                    <h4 class="font-weight-semibold mt-3 mb-3" style="color: var(--light);">No hay proyectos disponibles</h4>
                                    <p class="mb-4" style="color: var(--quaternary);">
                                        Próximamente tendremos nuevos proyectos para mostrar.
                                    </p>
                                    <a href="{{ route('front.contact') }}" class="btn btn-primary btn-modern">
                                        <i class="fas fa-phone me-2"></i>Contactar Asesor
                                    </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('#projectsFiltersOffcanvas .projects-filter-link, #projectsFiltersOffcanvas .projects-tag-link');
    const offcanvas = document.getElementById('projectsFiltersOffcanvas');

    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