@php
$items = collect($section->items ?? []); // flat array of {thumbnail, mobile_thumbnail, keyword}
$layout = $section->layout ?? 1;
$carouselId = 'banner-carousel-' . $section->id;

/**
* Distribute items round-robin into $n column buckets.
* e.g. 5 items, n=2 → [[0,2,4], [1,3]]
*/
$distribute = function(int $n) use ($items) {
$buckets = array_fill(0, $n, []);
foreach ($items->values() as $i => $banner) {
$buckets[$i % $n][] = $banner;
}
return $buckets; // array of arrays
};
@endphp

@if($layout == 1)
{{-- ── Layout 1: Full-width single carousel ── --}}
<div id="{{ $carouselId }}" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        @foreach($items as $i => $banner)
        @php
            $bKeyword = data_get($banner, 'keyword');
            $bThumb = data_get($banner, 'thumbnail');
            $bMobileThumb = data_get($banner, 'mobile_thumbnail');
            $bThumbUrl = $bThumb ? uploadedAsset($bThumb) : null;
            $bMobileUrl = $bMobileThumb ? uploadedAsset($bMobileThumb) : null;
            $finalUrl = $bKeyword ? route('frontend.product_list', ['q' => $bKeyword]) : null;
        @endphp
        <div class="carousel-item {{ $i === 0 ? 'active' : '' }}" data-bs-interval="3000">
            @if($finalUrl)
                <a href="{{ $finalUrl }}" style="display:block;">
                    @if($bMobileUrl)
                        <img src="{{ $bMobileUrl }}" class="d-block d-md-none w-100" alt="{{ $bKeyword ?? '' }}" style="object-fit:cover;">
                        <img src="{{ $bThumbUrl }}" class="d-none d-md-block w-100" alt="{{ $bKeyword ?? '' }}" style="object-fit:cover;">
                    @else
                        <img src="{{ $bThumbUrl }}" class="d-block w-100" alt="{{ $bKeyword ?? '' }}" style="object-fit:cover;">
                    @endif
                </a>
            @else
                @if($bMobileUrl)
                    <img src="{{ $bMobileUrl }}" class="d-block d-md-none w-100" alt="{{ $bKeyword ?? '' }}" style="object-fit:cover;">
                    <img src="{{ $bThumbUrl }}" class="d-none d-md-block w-100" alt="{{ $bKeyword ?? '' }}" style="object-fit:cover;">
                @else
                    <img src="{{ $bThumbUrl }}" class="d-block w-100" alt="{{ $bKeyword ?? '' }}" style="object-fit:cover;">
                @endif
            @endif
        </div>
        @endforeach
    </div>
    @if($items->count() > 1)
    <button class="carousel-control-prev" type="button"
        data-bs-target="#{{ $carouselId }}" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button"
        data-bs-target="#{{ $carouselId }}" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
    @endif
</div>

@elseif($layout == 2)
{{-- ── Layout 2: Two carousels side-by-side (col-md-6 each) ── --}}
@php $columns = $distribute(2); @endphp
<section class="my-3">
    <div class="container-fluid px-2 px-lg-5">
        <div class="row row-cols-1 row-cols-md-2 g-4">
            @foreach($columns as $colIdx => $group)
            @if(count($group))
            @php $cid = $carouselId . '-c' . $colIdx; @endphp
            <div class="col-md-6">
                <div id="{{ $cid }}" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner carousel-inner-banner-2">
                        @foreach($group as $bi => $banner)
                        @php
                            $bKeyword = data_get($banner, 'keyword');
                            $bThumb = data_get($banner, 'thumbnail');
                            $bMobileThumb = data_get($banner, 'mobile_thumbnail');
                            $bThumbUrl = $bThumb ? uploadedAsset($bThumb) : null;
                            $bMobileUrl = $bMobileThumb ? uploadedAsset($bMobileThumb) : null;
                            $finalUrl = $bKeyword ? route('frontend.product_list', ['q' => $bKeyword]) : null;
                        @endphp
                        <div class="carousel-item {{ $bi === 0 ? 'active' : '' }}" data-bs-interval="2000">
                            @if($finalUrl)
                                <a href="{{ $finalUrl }}" style="display:block;">
                                    @if($bMobileUrl)
                                        <img src="{{ $bMobileUrl }}" class="d-block d-md-none banner-img-small w-100" alt="{{ $bKeyword ?? '' }}">
                                        <img src="{{ $bThumbUrl }}" class="d-none d-md-block banner-img-small w-100" alt="{{ $bKeyword ?? '' }}">
                                    @else
                                        <img src="{{ $bThumbUrl }}" class="d-block banner-img-small w-100" alt="{{ $bKeyword ?? '' }}">
                                    @endif
                                </a>
                            @else
                                @if($bMobileUrl)
                                    <img src="{{ $bMobileUrl }}" class="d-block d-md-none banner-img-small w-100" alt="{{ $bKeyword ?? '' }}">
                                    <img src="{{ $bThumbUrl }}" class="d-none d-md-block banner-img-small w-100" alt="{{ $bKeyword ?? '' }}">
                                @else
                                    <img src="{{ $bThumbUrl }}" class="d-block banner-img-small w-100" alt="{{ $bKeyword ?? '' }}">
                                @endif
                            @endif
                        </div>
                        @endforeach
                    </div>
                    @if(count($group) > 1)
                    <button class="carousel-control-prev" type="button"
                        data-bs-target="#{{ $cid }}" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button"
                        data-bs-target="#{{ $cid }}" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                    @endif
                </div>
            </div>
            @endif
            @endforeach
        </div>
    </div>
</section>

@elseif($layout == 3)
{{-- ── Layout 3: Three carousels side-by-side (col-md-4 each) ── --}}
@php $columns = $distribute(3); @endphp
<section class="my-3">
    <div class="container-fluid px-2 px-lg-5">
        <div class="row row-cols-1 row-cols-md-3 g-4">
            @foreach($columns as $colIdx => $group)
            @if(count($group))
            @php $cid = $carouselId . '-c' . $colIdx; @endphp
            <div class="col-md-4">
                <div id="{{ $cid }}" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner carousel-inner-banner-2">
                        @foreach($group as $bi => $banner)
                        @php
                            $bKeyword = data_get($banner, 'keyword');
                            $bThumb = data_get($banner, 'thumbnail');
                            $bMobileThumb = data_get($banner, 'mobile_thumbnail');
                            $bThumbUrl = $bThumb ? uploadedAsset($bThumb) : null;
                            $bMobileUrl = $bMobileThumb ? uploadedAsset($bMobileThumb) : null;
                            $finalUrl = $bKeyword ? route('frontend.product_list', ['q' => $bKeyword]) : null;
                        @endphp
                        <div class="carousel-item {{ $bi === 0 ? 'active' : '' }}" data-bs-interval="2500">
                            @if($finalUrl)
                                <a href="{{ $finalUrl }}" style="display:block;">
                                    @if($bMobileUrl)
                                        <img src="{{ $bMobileUrl }}" class="d-block d-md-none banner-img-small w-100" alt="{{ $bKeyword ?? '' }}">
                                        <img src="{{ $bThumbUrl }}" class="d-none d-md-block banner-img-small w-100" alt="{{ $bKeyword ?? '' }}">
                                    @else
                                        <img src="{{ $bThumbUrl }}" class="d-block banner-img-small w-100" alt="{{ $bKeyword ?? '' }}">
                                    @endif
                                </a>
                            @else
                                @if($bMobileUrl)
                                    <img src="{{ $bMobileUrl }}" class="d-block d-md-none banner-img-small w-100" alt="{{ $bKeyword ?? '' }}">
                                    <img src="{{ $bThumbUrl }}" class="d-none d-md-block banner-img-small w-100" alt="{{ $bKeyword ?? '' }}">
                                @else
                                    <img src="{{ $bThumbUrl }}" class="d-block banner-img-small w-100" alt="{{ $bKeyword ?? '' }}">
                                @endif
                            @endif
                        </div>
                        @endforeach
                    </div>
                    @if(count($group) > 1)
                    <button class="carousel-control-prev" type="button"
                        data-bs-target="#{{ $cid }}" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button"
                        data-bs-target="#{{ $cid }}" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                    @endif
                </div>
            </div>
            @endif
            @endforeach
        </div>
    </div>
</section>

@elseif($layout == 4)
{{-- ── Layout 4: Four carousels side-by-side (col-md-3 each) ── --}}
@php $columns = $distribute(4); @endphp
<section class="my-3">
    <div class="container-fluid px-2 px-lg-5">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            @foreach($columns as $colIdx => $group)
            @if(count($group))
            @php $cid = $carouselId . '-c' . $colIdx; @endphp
            <div class="col-md-3">
                <div id="{{ $cid }}" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner carousel-inner-banner-2">
                        @foreach($group as $bi => $banner)
                        @php
                            $bKeyword = data_get($banner, 'keyword');
                            $bThumb = data_get($banner, 'thumbnail');
                            $bMobileThumb = data_get($banner, 'mobile_thumbnail');
                            $bThumbUrl = $bThumb ? uploadedAsset($bThumb) : null;
                            $bMobileUrl = $bMobileThumb ? uploadedAsset($bMobileThumb) : null;
                            $finalUrl = $bKeyword ? route('frontend.product_list', ['q' => $bKeyword]) : null;
                        @endphp
                        <div class="carousel-item {{ $bi === 0 ? 'active' : '' }}" data-bs-interval="2000">
                            @if($finalUrl)
                                <a href="{{ $finalUrl }}" style="display:block;">
                                    @if($bMobileUrl)
                                        <img src="{{ $bMobileUrl }}" class="d-block d-md-none banner-img-small w-100" alt="{{ $bKeyword ?? '' }}">
                                        <img src="{{ $bThumbUrl }}" class="d-none d-md-block banner-img-small w-100" alt="{{ $bKeyword ?? '' }}">
                                    @else
                                        <img src="{{ $bThumbUrl }}" class="d-block banner-img-small w-100" alt="{{ $bKeyword ?? '' }}">
                                    @endif
                                </a>
                            @else
                                @if($bMobileUrl)
                                    <img src="{{ $bMobileUrl }}" class="d-block d-md-none banner-img-small w-100" alt="{{ $bKeyword ?? '' }}">
                                    <img src="{{ $bThumbUrl }}" class="d-none d-md-block banner-img-small w-100" alt="{{ $bKeyword ?? '' }}">
                                @else
                                    <img src="{{ $bThumbUrl }}" class="d-block banner-img-small w-100" alt="{{ $bKeyword ?? '' }}">
                                @endif
                            @endif
                        </div>
                        @endforeach
                    </div>
                    @if(count($group) > 1)
                    <button class="carousel-control-prev" type="button"
                        data-bs-target="#{{ $cid }}" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button"
                        data-bs-target="#{{ $cid }}" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                    @endif
                </div>
            </div>
            @endif
            @endforeach
        </div>
    </div>
</section>

@endif