@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">
                        <li class="btn btn-outline-primary m-1 active" data-filter="*">Tous</li>
                        <li class="btn btn-outline-primary m-1" data-filter=".residential">Résidentiel</li>
                        <li class="btn btn-outline-primary m-1" data-filter=".commercial">Commercial</li>
                        <li class="btn btn-outline-primary m-1" data-filter=".industrial">Industriel</li>
                    </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 {{ $project->category ?? 'residential' }}">
                    <div class="position-relative portfolio-box">
                        <img class="img-fluid w-100" src="{{ asset($project->cover_image) }}" alt="{{ $project->title }}">
                        <a class="portfolio-title shadow-sm" href="{{ route('projects.show', $project->slug) }}">
                            <p class="h4 text-uppercase">{{ $project->title }}</p>
                            {{-- <span class="text-body"><i
                                    class="fa fa-map-marker-alt text-primary me-2"></i>Localisation</span> --}}
                        </a>
                        <a class="portfolio-btn" href="{{ asset($project->image) }}" data-lightbox="portfolio">
                            <i class="bi bi-plus text-white"></i>
                        </a>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center">
                    <p>Aucun projet trouvé.</p>
                </div>
            @endforelse
        </div>
    </div>
    <!-- Projects End -->
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            var portfolioIsotope = $('.portfolio-container').isotope({
                itemSelector: '.portfolio-item',
                layoutMode: 'fitRows'
            });

            $('.portfolio-container').imagesLoaded().progress(function() {
                portfolioIsotope.isotope('layout');
            });

            $('.list-inline li').on('click', function() {
                $('.list-inline li').removeClass('active');
                $(this).addClass('active');

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