@extends('layouts.app')
@section('content')
    @php
        $banner = !empty($pageDetails->szBannerImage)
            ? asset('uploads/abouts/' . $pageDetails->szBannerImage)
            : asset('uploads/abouts/brief.jpg');
    @endphp
    <section class="page-banner position-relative d-flex align-items-end" style="background-image:url('{{ $banner }}');
               background-position:center;
               background-size:cover;
               background-repeat:no-repeat;
               min-height:450px;">
        <div class="position-absolute top-0 start-0 w-100 h-100 banner-overlay"></div>

        <div class="container position-relative text-white pb-5">

            <span class="page-tag">

            </span>

            <h1 class="display-3 fw-bold mb-3">
                {{ __('messages.image_gallery') }}
            </h1>

            <nav>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ url('/') }}" class="text-white text-decoration-none">
                            {{ __('messages.home') }}
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="#" class="text-white text-decoration-none">
                            {{ __('messages.bsi') }}
                        </a>
                    </li>


                </ol>
            </nav>

        </div>

    </section>


   <section class="background-section py-5">

    <div class="container-fluid">

        <section class="gl-05">

            <div class="gl-05__gallery">

                @php

                    // Available row layouts
                    $layouts = [
                        [1.8, 0.9, 1.4],
                        [0.9, 1.7],
                        [1.1, 0.8, 1.6, 1.0],
                        [1.6, 1.2, 0.9],
                        [1.2, 1.2, 1.2],
                        [1.5, 0.8, 0.8, 1.4],
                        [1.0, 1.4, 1.0],
                    ];

                    $images = $galleryImages->values();
                    $pointer = 0;

                @endphp

                @while($pointer < $images->count())

                    @php
                        // Pick a random layout for each row
                        $layout = $layouts[array_rand($layouts)];
                    @endphp

                    <div class="gl-05__row">

                        @foreach($layout as $ratio)

                            @if(isset($images[$pointer]))

                                @php
                                    $image = $images[$pointer];
                                    $pointer++;

                                    $imagePath = asset('uploads/gallery/' . $image->szImageName);
                                @endphp

                                <figure class="gl-05__item" style="--r:{{ $ratio }}">

                                    <a href="{{ $imagePath }}" data-fancybox="gallery">

                                        <img src="{{ $imagePath }}"
                                            alt="{{ lang($image->szImageAlt, $image->szImageAltHindi) }}">

                                        <div class="gallery-info">

                                            <span>
                                                  {{ html_entity_decode(html_entity_decode(lang($image->szImageAlt, $image->szImageAltHindi))) }}
                                            </span>

                                            <h4>
                                            {{ html_entity_decode(html_entity_decode(lang($image->szImageCaption, $image->szImageCaptionHindi))) }}
                                               
                                            </h4>

                                        </div>

                                    </a>

                                </figure>

                            @endif

                        @endforeach

                    </div>

                @endwhile

            </div>

        </section>

        <div class="text-end mt-4">

            <a href="javascript:history.back()" class="btn btn-success">

                <i class="fas fa-arrow-left me-2"></i>

                {{ __('messages.previous') }}

            </a>

        </div>

    </div>

</section>
@endsection