@section('seo')
    @include('layouts._front_includes._seo', ['seo' => $page->seo])
@endsection

@extends('layouts.frontend_master')

@section('content')
    @include('web._partials.page-banner', ['is_gallery' => true])

    <section>
        @if (!empty($page->gallery_image))
            @php
                // Filter gallery images where on_cover is 0
                $filteredImages = collect($page->gallery_image)
                    ->filter(function ($image) {
                        return $image->on_cover == 0;
                    })
                    ->values(); // Re-index the array
            @endphp

            @if ($filteredImages->count() > 0)
                <div class="container my-5 py-4 bg-white">
                    <div class="row g-3">
                        <!-- Row 1: Left-to-Right -->
                        @if (isset($filteredImages[0]))
                            <div class="col-md-6 col-12" style="margin-bottom: 20px;">
                                <div class="img-hover-wrap rounded-3 overflow-hidden" style="height: 600px;">
                                    <img class="img-fluid w-100 h-100" src="{{ $filteredImages[0]->getPath() }}"
                                        alt="{{ $filteredImages[0]->alt }}" style="object-fit: cover;" />
                                    <div class="hover-caption">
                                        {{ $filteredImages[0]->alt }}
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if (isset($filteredImages[1]) || isset($filteredImages[2]))
                            <div class="col-md-6 col-12" style="margin-bottom: 20px;">
                                <div class="row" style="height: 600px; gap: 20px;">
                                    @if (isset($filteredImages[1]))
                                        <div class="col-12" style="height: calc(50% - 10px);">
                                            <div class="img-hover-wrap rounded-3 overflow-hidden h-100">
                                                <img class="img-fluid w-100 h-100" src="{{ $filteredImages[1]->getPath() }}"
                                                    alt="{{ $filteredImages[1]->alt }}" style="object-fit: cover;" />
                                                <div class="hover-caption">
                                                    {{ $filteredImages[1]->alt }}
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    @if (isset($filteredImages[2]))
                                        <div class="col-12" style="height: calc(50% - 10px);">
                                            <div class="img-hover-wrap rounded-3 overflow-hidden h-100">
                                                <img class="img-fluid w-100 h-100" src="{{ $filteredImages[2]->getPath() }}"
                                                    alt="{{ $filteredImages[2]->alt }}" style="object-fit: cover;" />
                                                <div class="hover-caption">
                                                    {{ $filteredImages[2]->alt }}
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endif

                        <!-- Row 2 -->
                        <div class="col-md-4 col-12" style="margin-bottom: 20px;">
                            <div class="row" style="height: 600px; gap: 20px;">
                                @if (isset($filteredImages[3]))
                                    <div class="col-12" style="height: calc(50% - 10px);">
                                        <div class="img-hover-wrap rounded-3 overflow-hidden h-100">
                                            <img class="img-fluid w-100 h-100" src="{{ $filteredImages[3]->getPath() }}"
                                                alt="{{ $filteredImages[3]->alt }}" style="object-fit: cover;" />
                                            <div class="hover-caption">
                                                {{ $filteredImages[3]->alt }}
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                @if (isset($filteredImages[4]))
                                    <div class="col-12" style="height: calc(50% - 10px);">
                                        <div class="img-hover-wrap rounded-3 overflow-hidden h-100">
                                            <img class="img-fluid w-100 h-100" src="{{ $filteredImages[4]->getPath() }}"
                                                alt="{{ $filteredImages[4]->alt }}" style="object-fit: cover;" />
                                            <div class="hover-caption">
                                                {{ $filteredImages[4]->alt }}
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>

                        @if (isset($filteredImages[5]))
                            <div class="col-md-4 col-12" style="margin-bottom: 20px;">
                                <div class="img-hover-wrap rounded-3 overflow-hidden" style="height: 600px;">
                                    <img class="img-fluid w-100 h-100" src="{{ $filteredImages[5]->getPath() }}"
                                        alt="{{ $filteredImages[5]->alt }}" style="object-fit: cover;" />
                                    <div class="hover-caption">
                                        {{ $filteredImages[5]->alt }}
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="col-md-4 col-12" style="margin-bottom: 20px;">
                            <div class="row" style="height: 600px; gap: 20px;">
                                @if (isset($filteredImages[6]))
                                    <div class="col-12" style="height: calc(50% - 10px);">
                                        <div class="img-hover-wrap rounded-3 overflow-hidden h-100">
                                            <img class="img-fluid w-100 h-100" src="{{ $filteredImages[6]->getPath() }}"
                                                alt="{{ $filteredImages[6]->alt }}" style="object-fit: cover;" />
                                            <div class="hover-caption">
                                                {{ $filteredImages[6]->alt }}
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                @if (isset($filteredImages[7]))
                                    <div class="col-12" style="height: calc(50% - 10px);">
                                        <div class="img-hover-wrap rounded-3 overflow-hidden h-100">
                                            <img class="img-fluid w-100 h-100" src="{{ $filteredImages[7]->getPath() }}"
                                                alt="{{ $filteredImages[7]->alt }}" style="object-fit: cover;" />
                                            <div class="hover-caption">
                                                {{ $filteredImages[7]->alt }}
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <!-- Row 3 -->
                        <div class="col-md-6 col-12" style="margin-bottom: 20px;">
                            <div class="row" style="height: 600px; gap: 20px;">
                                @if (isset($filteredImages[8]))
                                    <div class="col-12" style="height: calc(50% - 10px);">
                                        <div class="img-hover-wrap rounded-3 overflow-hidden h-100">
                                            <img class="img-fluid w-100 h-100" src="{{ $filteredImages[8]->getPath() }}"
                                                alt="{{ $filteredImages[8]->alt }}" style="object-fit: cover;" />
                                            <div class="hover-caption">
                                                {{ $filteredImages[8]->alt }}
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                @if (isset($filteredImages[9]))
                                    <div class="col-12" style="height: calc(50% - 10px);">
                                        <div class="img-hover-wrap rounded-3 overflow-hidden h-100">
                                            <img class="img-fluid w-100 h-100" src="{{ $filteredImages[9]->getPath() }}"
                                                alt="{{ $filteredImages[9]->alt }}" style="object-fit: cover;" />
                                            <div class="hover-caption">
                                                {{ $filteredImages[9]->alt }}
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>

                        @if (isset($filteredImages[10]))
                            <div class="col-md-6 col-12" style="margin-bottom: 20px;">
                                <div class="img-hover-wrap rounded-3 overflow-hidden" style="height: 600px;">
                                    <img class="img-fluid w-100 h-100" src="{{ $filteredImages[10]->getPath() }}"
                                        alt="{{ $filteredImages[10]->alt }}" style="object-fit: cover;" />
                                    <div class="hover-caption">
                                        {{ $filteredImages[10]->alt }}
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- Row 4 -->
                        @if (isset($filteredImages[11]))
                            <div class="col-md-4 col-12" style="margin-bottom: 20px;">
                                <div class="img-hover-wrap rounded-3 overflow-hidden" style="height: 600px;">
                                    <img class="img-fluid w-100 h-100" src="{{ $filteredImages[11]->getPath() }}"
                                        alt="{{ $filteredImages[11]->alt }}" style="object-fit: cover;" />
                                    <div class="hover-caption">
                                        {{ $filteredImages[11]->alt }}
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if (isset($filteredImages[12]))
                            <div class="col-md-4 col-12" style="margin-bottom: 20px;">
                                <div class="img-hover-wrap rounded-3 overflow-hidden" style="height: 600px;">
                                    <img class="img-fluid w-100 h-100" src="{{ $filteredImages[12]->getPath() }}"
                                        alt="{{ $filteredImages[12]->alt }}" style="object-fit: cover;" />
                                    <div class="hover-caption">
                                        {{ $filteredImages[12]->alt }}
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="col-md-4 col-12" style="margin-bottom: 20px;">
                            <div class="row" style="height: 600px; gap: 20px;">
                                @if (isset($filteredImages[13]))
                                    <div class="col-12" style="height: calc(50% - 10px);">
                                        <div class="img-hover-wrap rounded-3 overflow-hidden h-100">
                                            <img class="img-fluid w-100 h-100" src="{{ $filteredImages[13]->getPath() }}"
                                                alt="{{ $filteredImages[13]->alt }}" style="object-fit: cover;" />
                                            <div class="hover-caption">
                                                {{ $filteredImages[13]->alt }}
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                @if (isset($filteredImages[14]))
                                    <div class="col-12" style="height: calc(50% - 10px);">
                                        <div class="img-hover-wrap rounded-3 overflow-hidden h-100">
                                            <img class="img-fluid w-100 h-100" src="{{ $filteredImages[14]->getPath() }}"
                                                alt="{{ $filteredImages[14]->alt }}" style="object-fit: cover;" />
                                            <div class="hover-caption">
                                                {{ $filteredImages[14]->alt }}
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <!-- Continue for more images if they exist -->
                        @for ($i = 15; $i < count($filteredImages); $i++)
                            <div class="col-md-4 col-12" style="margin-bottom: 20px;">
                                <div class="img-hover-wrap rounded-3 overflow-hidden" style="height: 600px;">
                                    <img class="img-fluid w-100 h-100" src="{{ $filteredImages[$i]->getPath() }}"
                                        alt="{{ $filteredImages[$i]->alt }}" style="object-fit: cover;" />
                                    <div class="hover-caption">
                                        {{ $filteredImages[$i]->alt }}
                                    </div>
                                </div>
                            </div>
                        @endfor
                    </div>
                </div>
            @endif
        @endif
    </section>
@endsection