@extends('layouts.app')

@section('title', 'Réalisations')

@section('content')
    <!-- Page Header Start -->
    <div class="container-fluid page-header">
        <h1 class="display-3 text-uppercase text-white mb-3">Réalisations</h1>
        <div class="d-inline-flex text-white">
            <h6 class="text-uppercase m-0"><a href="{{ route('home') }}">Accueil</a></h6>
            <h6 class="text-white m-0 px-3">/</h6>
            <h6 class="text-uppercase text-white m-0">Réalisations</h6>
        </div>
    </div>
    <!-- Page Header End -->

    <!-- Projects Start -->
    <div class="container-fluid py-6 px-5">
        <div class="text-center mx-auto mb-5" style="max-width: 600px;">
            <h1 class="display-5 text-uppercase mb-4">Découvrez nos <span class="text-primary">projets</span> réalisés</h1>
        </div>
        <div class="row gx-5">
            <div class="col-12 text-center">
                <div class="d-inline-block mb-5">
                    <ul class="list-inline mb-0" id="portfolio-filters">
                        <li class="btn btn-outline-primary m-1 active" data-filter="*">Tous</li>
                        @foreach($categories as $category)
                            <li class="btn btn-outline-primary m-1" data-filter=".category-{{ $category->id }}">{{ $category->name }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
        <div class="row g-5 portfolio-container">
            @forelse($projects as $project)
                <div class="col-xl-4 col-lg-6 col-md-6 portfolio-item category-{{ $project->category_id ?? 'uncategorized' }}">
                    <div class="position-relative portfolio-box">
                        <img class="img-fluid w-100" 
                             src="{{ $project->cover_image_url }}" 
                             alt="{{ $project->title }}" 
                             style="height: 250px; object-fit: cover;"
                             onerror="this.src='{{ asset('assets/img/portfolio-1.jpg') }}'">
                        <a class="portfolio-title shadow-sm" href="{{ route('projects.show', $project->slug) }}">
                            <p class="h4 text-uppercase">{{ $project->title }}</p>
                            @if($project->category)
                                <span class="text-body"><i class="fa fa-tag text-primary me-2"></i>{{ $project->category->name }}</span>
                            @endif
                        </a>
                        <a class="portfolio-btn" 
                           href="{{ $project->cover_image_url }}" 
                           data-lightbox="portfolio-{{ $project->id }}"
                           data-title="{{ $project->title }}">
                            <i class="bi bi-plus text-white"></i>
                        </a>
                        
                        {{-- Images supplémentaires cachées pour la lightbox --}}
                        @if($project->projectFiles && $project->projectFiles->count() > 0)
                            @foreach($project->projectFiles->where('file_type', 'image') as $file)
                                <a href="{{ \App\Helpers\ImageHelper::getImageUrl($file->file_path) }}" 
                                   data-lightbox="portfolio-{{ $project->id }}"
                                   data-title="{{ $file->caption ?: $project->title }}"
                                   style="position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;"
                                   class="hidden-lightbox-link"></a>
                            @endforeach
                        @endif
                    </div>
                </div>
            @empty
                <div class="col-12 text-center">
                    <p>Aucun projet trouvé.</p>
                </div>
            @endforelse
        </div>
    </div>
    <!-- Projects End -->
@endsection

@push('scripts')
    <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
    <script>
        $(document).ready(function() {
            // Configuration de Lightbox
            lightbox.option({
                'resizeDuration': 200,
                'wrapAround': true,
                'albumLabel': "Image %1 sur %2",
                'fadeDuration': 300,
                'imageFadeDuration': 300,
                'disableScrolling': true
            });

            // Forcer Lightbox à détecter tous les liens (y compris cachés)
            setTimeout(function() {
                // Réinitialiser Lightbox pour détecter tous les nouveaux liens
                lightbox.init();
                
                // Debug : afficher le nombre de liens lightbox par projet
                $('[data-lightbox^="portfolio-"]').each(function() {
                    var group = $(this).data('lightbox');
                    var count = $('[data-lightbox="' + group + '"]').length;
                    console.log('Groupe ' + group + ': ' + count + ' images');
                    
                    if (count > 1) {
                        console.log('URLs du groupe ' + group + ':');
                        $('[data-lightbox="' + group + '"]').each(function(index) {
                            console.log('  Image ' + (index + 1) + ': ' + $(this).attr('href'));
                        });
                    }
                });
            }, 500);

            // Configuration d'Isotope pour le filtrage
            var portfolioIsotope = $('.portfolio-container').isotope({
                itemSelector: '.portfolio-item',
                layoutMode: 'fitRows'
            });

            // Attendre que les images soient chargées avant de relancer le layout
            $('.portfolio-container').imagesLoaded().progress(function() {
                portfolioIsotope.isotope('layout');
            });

            // Gestionnaire de clic pour les filtres
            $('#portfolio-filters li').on('click', function() {
                $('#portfolio-filters li').removeClass('active');
                $(this).addClass('active');

                portfolioIsotope.isotope({
                    filter: $(this).data('filter')
                });
            });
        });
    </script>
@endpush