<x-website.layout>
    <!-- start banner -->
    <!-- start banner -->
    @foreach ($sections as $section)
        @if ($section->key == 'projects')
            @include('Website.partials._banner', ['page_title' => $project->name])
        @endif
    @endforeach
    <!-- end banner -->
    <section class="project-details-section py-5 animate-section" id="projectDetails">
        <div class="container-fluid px-md-5 px-3 py-md-5">
            <div class="row g-5 align-items-start">
                <div class="col-lg-6">
                    <div class="project-image overflow-hidden shadow-lg">
                        <img src="{{ $project->image_path }}" alt="{{ $project->name }}" class="w-100 h-100" />
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="project-content">
                        <span
                            class="badge bg-dark-subtle text-dark px-3 py-2 mb-3 rounded-0">{{ $project->category->name }}</span>
                        <h2 class="fw-bold text-second mb-3">{{ $project->name }}</h2>

                        <p class="text-black-50 fs-6 mb-4">
                            {!! $project->long_desc !!}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Project Images Gallery Section -->
    @php
        $projectImages = $project->images;
        $allImages = collect();
        
        // Add main project image if exists
        if($project->image_path && $project->image_path != asset('assets/dashboard/images/noimage.png')) {
            $allImages->push($project->image_path);
        }
        
        // Add additional project images
        foreach($projectImages as $img) {
            $imgUrl = $img->image;
            if($imgUrl && $imgUrl != asset('assets/dashboard/images/noimage.png') && !$allImages->contains($imgUrl)) {
                $allImages->push($imgUrl);
            }
        }
    @endphp
    
    @if($allImages->count() > 0)
    <section class="project-gallery-section py-5">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h3 class="text-center mb-4">{{ __('website.project_images') ?? 'Project Gallery' }}</h3>
                    
                    <div class="row g-3">
                        @foreach($allImages as $index => $imagePath)
                            <div class="col-6 col-md-4 col-lg-3">
                                <a href="{{ $imagePath }}" 
                                   data-fancybox="project-gallery"
                                   data-caption="{{ $project->name }} - {{ $index + 1 }}">
                                    <img src="{{ $imagePath }}" 
                                         class="w-100 rounded-1" 
                                         alt="{{ $project->name }} - {{ $index + 1 }}"
                                         style="height: 250px; object-fit: cover; cursor: pointer;">
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

    @push('styles')
        <!-- Fancybox CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
        
        <style>
            .project-gallery-section {
                background: var(--bg-light, #F8F9FA);
            }
            
            .project-gallery-section a {
                display: block;
                overflow: hidden;
                border-radius: 8px;
                transition: all 0.3s ease;
            }
            
            .project-gallery-section a:hover {
                transform: translateY(-5px);
                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
            }
            
            .project-gallery-section a img {
                transition: transform 0.3s ease;
            }
            
            .project-gallery-section a:hover img {
                transform: scale(1.1);
            }
        </style>
    @endpush

    @push('scripts')
        <!-- Fancybox JS -->
        <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
        
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Initialize Fancybox for project gallery images
                Fancybox.bind("[data-fancybox='project-gallery']", {
                    Toolbar: {
                        display: {
                            left: ["infobar"],
                            middle: [],
                            right: ["slideshow", "download", "thumbs", "close"],
                        },
                    },
                    Thumbs: {
                        autoStart: false,
                    },
                });
            });
        </script>
    @endpush

</x-website.layout>
