@extends('layouts.master')
@section('body_id', 'gallery_page')
@section('content')

    <section class="breadcrumb_main_area margin-bottom-80">
        <div class="container-fluid">
            <div class="row">
                <div class="breadcrumb_main nice_title">
                    <h2>Gallery</h2>
                    <div class="special_offer_main">
                        <div class="container">
                            <div class="special_offer_sub">
                                <img src="{{ asset('assets/img/special-offer-yellow-main.png') }}" alt="img">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="other_room_area">
        <div class="container">
            <div class="row">
                <div class="other_room">
                    <div class="accomodation_single_room">
                        <div class="container">
                            
                            @php
                                $allRoomImages = collect();

                                // Sabhi rooms ki array/json images ko single collection me compile karna
                                foreach($rooms as $room) {
                                    if (is_array($room->images)) {
                                        $roomImages = $room->images;
                                    } else {
                                        $roomImages = json_decode($room->images, true);
                                    }

                                    if(!empty($roomImages) && is_array($roomImages)) {
                                        foreach($roomImages as $img) {
                                            $allRoomImages->push((object)[
                                                'image_path' => ltrim($img, '/'),
                                                'room_name'  => $room->room_name ?? $room->room_type
                                            ]);
                                        }
                                    }
                                }
                            @endphp

                            @if($allRoomImages->count() > 0)
                                <div class="row display-flex-wrap">
                                    
                                    {{-- Layout Section: Main Carousel (Pehli 5 Images) --}}
                                    @if($allRoomImages->count() >= 2)
                                        <div class="col-lg-12 col-md-12">
                                            <div class="row">
                                                {{-- Slider Block --}}
                                                <div class="col-lg-8 col-md-8 col-sm-12 margin-bottom-30">
                                                    <div class="clearfix demo">
                                                        <div class="slider">
                                                            <div id="gallery_main_slider" class="carousel slide" data-ride="carousel">
                                                                <div class="carousel-inner" role="listbox">
                                                                    @foreach($allRoomImages->take(5) as $index => $item)
                                                                        <div class="item {{ $index == 0 ? 'active' : '' }}">
                                                                            <div class="single_item">
                                                                                <img src="{{ asset($item->image_path) }}" alt="{{ $item->room_name }}" class="gallery-crop-img" style="height: 450px;">
                                                                            </div>
                                                                        </div>
                                                                    @endforeach
                                                                </div>
                                                                <a class="slider_ctrl left" href="#gallery_main_slider" role="button" data-slide="prev">
                                                                    <i class="fa fa-angle-left"></i>
                                                                    <span class="sr-only">Previous</span>
                                                                </a>
                                                                <a class="slider_ctrl right" href="#gallery_main_slider" role="button" data-slide="next">
                                                                    <i class="fa fa-angle-right"></i>
                                                                    <span class="sr-only">Next</span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                {{-- Side Medium Images Block (Next 2 Images) --}}
                                                <div class="col-lg-4 col-md-4 col-sm-12 margin-bottom-30">
                                                    <div class="row">
                                                        @foreach($allRoomImages->skip(5)->take(2) as $item)
                                                            <div class="col-lg-12 col-md-12 col-sm-6 margin-bottom-30">
                                                                <div class="single_room_wrapper clearfix">
                                                                    <div class="room_wrapper">
                                                                        <div class="dif_room_media">
                                                                            <a href="{{ route('room_details', $room->slug) }}" data-uk-lightbox="{group:'hotel-gallery'}" title="{{ $item->room_name }}">
                                                                                <figure class="uk-overlay uk-overlay-hover">
                                                                                    <img src="{{ asset($item->image_path) }}" alt="img" class="gallery-crop-img" style="height: 210px;">
                                                                                    <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon"></div>
                                                                                </figure>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Remaining Images Grid (7th Image ke baad ki saari images) --}}
                                        @foreach($allRoomImages->skip(7) as $item)
                                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 margin-bottom-30">
                                                <div class="single_room_wrapper clearfix">
                                                    <div class="room_wrapper">
                                                        <div class="room_media">
                                                            <a href="{{ route('room_details', $room->slug) }}" data-uk-lightbox="{group:'hotel-gallery'}" title="{{ $item->room_name }}">
                                                                <figure class="uk-overlay uk-overlay-hover">
                                                                    <img src="{{ asset($item->image_path) }}" alt="img" class="gallery-crop-img" style="height: 200px;">
                                                                    <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon"></div>
                                                                </figure>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach

                                    {{-- Agar images 2 se kam hain toh simple grid layout --}}
                                    @else
                                        @foreach($allRoomImages as $item)
                                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 margin-bottom-30">
                                                <div class="single_room_wrapper clearfix">
                                                    <div class="room_wrapper">
                                                        <div class="room_media">
                                                            <a href="{{ asset($item->image_path) }}" data-uk-lightbox="{group:'hotel-gallery'}" title="{{ $item->room_name }}">
                                                                <figure class="uk-overlay uk-overlay-hover">
                                                                    <img src="{{ asset($item->image_path) }}" alt="img" class="gallery-crop-img" style="height: 200px;">
                                                                    <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon"></div>
                                                                </figure>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif

                                </div>
                            @else
                                <div class="row">
                                    <div class="col-xs-12 text-center" style="padding: 80px 0; color: #777;">
                                        <i class="fa fa-picture-o" style="font-size: 36px; margin-bottom: 10px;"></i>
                                        <p>No images found in the system rooms directory.</p>
                                    </div>
                                </div>
                            @endif

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Styling to keep design uniform and prevent layout overlapping --}}
    <style>
        .display-flex-wrap {
            display: flex;
            flex-wrap: wrap;
        }
        .gallery-crop-img {
            width: 100% !important;
            object-fit: cover !important;
            object-position: center !important;
            display: block;
        }
        /* Overlap fixes for UIKit structures */
        .room_media figure, .dif_room_media figure {
            margin: 0 !important;
            overflow: hidden;
        }
    </style>
@endsection