@extends('layouts.front-layout')
@section('title') {{ $pageData['Gallery']['top_banner_title'] ?? '' }} @endsection
@section('content')
    <style>
        .gallery {
            padding: 60px 10px;
            background-color: #f9f9f9;
        }

        .gallery-header {
            margin-bottom: 40px;
        }

        .gallery-title {
            font-size: 32px;
            font-weight: bold;
            color: #333;
        }

        .gallery-subtitle {
            font-size: 18px;
            color: #666;
        }

        .galleryImgs .gallery-item {
            display: block;
            transition: all 0.3s ease-in-out;
            text-align: center;
        }

        .gallery-item:hover {
            transform: translateY(-10px);
        }

        .gallery-figure {
            margin: 10px;
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .gallery-img {
            width: 100%;
            height: auto;
            transition: transform 0.3s ease-in-out;
        }

        .gallery-item:hover .gallery-img {
            transform: scale(1.05);
        }

        .no-data {
            font-size: 20px;
            color: #888;
            font-weight: bold;
        }

        @media (max-width: 768px) {
            .gallery-title {
                font-size: 28px;
            }

            .gallery-subtitle {
                font-size: 16px;
            }

            .galleryImgs .col-md-4 {
                flex: 0 0 50%;
                max-width: 50%;
            }

            .galleryImgs .col-sm-6 {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }

    </style>
<section class="inner-banner">
    <div class="container">
        <h2>{{ $pageData['Gallery']['top_banner_title'] ?? '' }}</h2>
    </div>
</section>

    <section class="gallery">
        <div class="container">
            <div class="gallery-header text-center mb-4">
                <h2 class="gallery-title">Our Product Gallery</h2>
                <p class="gallery-subtitle">Explore our range of products with premium quality</p>
            </div>
            <div class="galleryImgs">
                <div class="row g-4">
                        @php
                        $meetImagesChunks = $meetImages->chunk(2); 
                        $vegImagesChunks = $vegImages->chunk(2); 
                        $totalChunks = max(count($meetImagesChunks), count($vegImagesChunks)); 
                    @endphp
                    
                    @for($i = 0; $i < $totalChunks; $i++)
                        <div class="row">
                          
                            @if(isset($meetImagesChunks[$i]))
                                @foreach($meetImagesChunks[$i] as $meetImage)
                                    <div class="col-md-3 col-sm-6">
                                        <a href="{{ route('product.detail', ['slug' => $meetImage->slug ?: '']) }}" class="gallery-item">
                                            <figure class="gallery-figure">
                                                <img src="{{ $meetImage->getFirstMediaUrl('product_image') ?: asset('placeholder.jpg') }}"
                                                     class="img-fluid gallery-img"
                                                     alt="{{ $meetImage->name }}">
                                            </figure>
                                        </a>
                                    </div>
                                @endforeach
                            @endif
                
                        
                            @if(isset($vegImagesChunks[$i]))
                                @foreach($vegImagesChunks[$i] as $vegImage)
                                    <div class="col-md-3 col-sm-6">
                                        <a href="{{ route('product.detail', ['slug' => $vegImage->slug ?: '']) }}" class="gallery-item">
                                            <figure class="gallery-figure">
                                                <img src="{{ $vegImage->getFirstMediaUrl('product_image') ?: asset('placeholder.jpg') }}"
                                                     class="img-fluid gallery-img"
                                                     alt="{{ $vegImage->name }}">
                                            </figure>
                                        </a>
                                    </div>
                                @endforeach
                            @endif
                
                         
                            @if(count($meetImages) < 2 && isset($vegImagesChunks[$i]) && count($vegImagesChunks[$i]) == 1)
                                @for($j = count($vegImagesChunks[$i]); $j < 2; $j++) 
                                    @if(isset($vegImagesChunks[$i][$j]))
                                        <div class="col-md-3 col-sm-6">
                                            <a href="{{ route('product.detail', ['slug' => $vegImagesChunks[$i][$j]->slug ?: '']) }}" class="gallery-item">
                                                <figure class="gallery-figure">
                                                    <img src="{{ $vegImagesChunks[$i][$j]->getFirstMediaUrl('product_image') ?: asset('placeholder.jpg') }}"
                                                         class="img-fluid gallery-img"
                                                         alt="{{ $vegImagesChunks[$i][$j]->name }}">
                                                </figure>
                                            </a>
                                        </div>
                                    @endif
                                @endfor
                            @endif
                        </div>
                    @endfor
                
                    {{-- Show message when both meet and veg images are empty --}}
                    @if(count($vegImages) == 0 && count($meetImages) == 0)
                        <div class="col-12 text-center">
                            <h3 class="no-data">Gallery Data Not Available</h3>
                        </div>
                    @endif
                </div>
                
                
                
                
                
                
            </div>
            
        </div>
    </section>


@endsection