@extends($activeTemplate . 'layouts.frontend')
@section('content')
    @php
        $content = getContent('banner.content', true);

        $banners = [];

        foreach ($bannerImage as $b) {
            $banners[] = getImage(
                getFilePath('banner') . '/' . $b->banner_image,
                getFileSize('banner'),
            );
        }
    @endphp

    <style>
        /* Hero Section and Carousel Styling */
        .hero-section {
            padding: 0 !important;
            /* margin-top: 95px; */
            /* Account for navbar height */
        }

        .hero-carousel {
            height: 100vh;
            /* Full viewport height */
        }

        .hero-carousel .carousel-inner {
            height: 100%;
        }

        .hero-carousel .carousel-item img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            /* Fill area while maintaining aspect ratio */
        }

        /* Mobile Adjustments */
        @media (max-width: 768px) {
            .hero-carousel {
                height: auto;
                /* Let carousel height adapt to content */
            }

            .hero-carousel .carousel-item img {
                height: auto;
                /* Maintain aspect ratio */
                width: 100%;
            }
        }
    </style>

    <section class="hero-section">
        <div id="heroCarousel" class="carousel slide hero-carousel" data-bs-ride="carousel">
            <div class="carousel-indicators">
                @foreach ($banners as $index => $banner)
                    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="{{ $index }}"
                        class="{{ $index == 0 ? 'active' : '' }}" aria-current="{{ $index == 0 ? 'true' : 'false' }}"
                        aria-label="Slide {{ $index + 1 }}"></button>
                @endforeach
            </div>
            <div class="carousel-inner">
                @foreach ($banners as $index => $banner)
                    <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                        <img src="{{ $banner }}" class="d-block w-100" alt="Slide {{ $index + 1 }}">
                    </div>
                @endforeach
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" 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="#heroCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </section>

    @if ($sections->secs != null)
        @foreach (json_decode($sections->secs) as $sec)
            @include($activeTemplate . 'sections.' . $sec)
        @endforeach
    @endif
@endsection
