{{--
    components/banner-slider.blade.php
    Rasio 9:4 (1080×480 px), lebar penuh, tanpa panah, auto-scroll 4 s, swipe, titik indikator.
--}}
<div class="bs-wrap">
@if(isset($banners) && $banners->count() > 0)

<div class="bs-root" id="bsRoot" role="region" aria-label="Banner promosi" aria-roledescription="carousel">
    <div class="bs-track" id="bsTrack" aria-live="off">
        @foreach($banners as $banner)
        <div class="bs-slide" role="group" aria-roledescription="slide" aria-label="{{ $loop->iteration }} dari {{ $banners->count() }}">
            @if($banner->link)
                <a href="{{ $banner->link }}" target="_blank" rel="noopener noreferrer" tabindex="-1">
                    <img src="{{ \Illuminate\Support\Facades\Storage::url($banner->image) }}"
                         alt="{{ $banner->title ?: '' }}"
                         class="bs-img"
                         width="1080" height="480"
                         draggable="false"
                         @if($loop->first) fetchpriority="high" @else loading="lazy" @endif>
                </a>
            @else
                <img src="{{ \Illuminate\Support\Facades\Storage::url($banner->image) }}"
                     alt="{{ $banner->title ?: '' }}"
                     class="bs-img"
                     width="1080" height="480"
                     draggable="false"
                     @if($loop->first) fetchpriority="high" @else loading="lazy" @endif>
            @endif
        </div>
        @endforeach
    </div>

    @if($banners->count() > 1)
    <div class="bs-dots" id="bsDots" role="tablist" aria-label="Pilih banner">
        @foreach($banners as $banner)
        <button class="bs-dot {{ $loop->first ? 'active' : '' }}"
                type="button"
                role="tab"
                aria-selected="{{ $loop->first ? 'true' : 'false' }}"
                onclick="bsGoTo({{ $loop->index }})"
                aria-label="Banner {{ $loop->iteration }}"></button>
        @endforeach
    </div>
    @endif
</div>

@else
{{-- Fallback jika belum ada banner --}}
<div class="bs-welcome">
    <div>
        @auth
        <div class="bs-welcome-hello">Halo, {{ auth()->user()->name ?? 'Pengguna' }}</div>
        @else
        <div class="bs-welcome-hello">Halo</div>
        @endauth
        <div class="bs-welcome-title">{{ \App\Models\Setting::getValue('site_name', config('app.name')) }}</div>
    </div>
    @auth
    <a href="{{ route('deposit') }}" class="bs-welcome-btn">Isi saldo</a>
    @else
    <a href="{{ route('topup.index') }}" class="bs-welcome-btn">Top up game</a>
    @endauth
</div>
@endif
</div>

<style>
.bs-wrap { margin-bottom: 0 }

/* Rasio 9:4 sesuai ukuran unggah banner 1080×480 px. */
.bs-root {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 4;
    overflow: hidden;
    background: var(--elevated);
}

/* Tidak ada border-radius — banner menyentuh tepi layar penuh. */
.bs-track {
    display: flex;
    height: 100%;
    transition: transform .38s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}
.bs-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    height: 100%;
}
.bs-slide a {
    display: block;
    width: 100%;
    height: 100%;
}
.bs-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Titik indikator — tidak ada panah sesuai wireframe. */
.bs-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 5;
}
.bs-dot {
    /* Tap target 44×44 dipertahankan dengan display flex + pseudo-element visual */
    width: 24px;
    height: 24px;
    border: none;
    cursor: pointer;
    padding: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.bs-dot::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    transition: width .2s, background .2s;
}
.bs-dot.active::after {
    background: #fff;
    width: 20px;
    border-radius: 4px;
}

/* Fallback welcome card */
.bs-welcome {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.bs-welcome-hello { font-size: 13px; color: var(--text2); margin-bottom: 3px }
.bs-welcome-title { font-size: 16px; font-weight: 700; color: var(--text) }
.bs-welcome-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
</style>

<script>
(function () {
    var cur   = 0;
    var total = {{ isset($banners) ? $banners->count() : 0 }};
    if (total <= 1) return;

    var autoTimer = null;
    var INTERVAL  = 4000; /* 4 detik */

    function goTo(idx) {
        cur = (idx + total) % total;
        var track = document.getElementById('bsTrack');
        if (track) track.style.transform = 'translateX(-' + cur * 100 + '%)';
        document.querySelectorAll('.bs-dot').forEach(function (d, i) {
            d.classList.toggle('active', i === cur);
            d.setAttribute('aria-selected', i === cur ? 'true' : 'false');
        });
    }

    function startAuto() {
        clearInterval(autoTimer);
        autoTimer = setInterval(function () { goTo(cur + 1); }, INTERVAL);
    }

    function resetAuto() {
        /* Reset timer setelah interaksi manual supaya tidak loncat terlalu cepat */
        clearInterval(autoTimer);
        startAuto();
    }

    /* Ekspos global agar dot onclick bisa memanggil */
    window.bsGoTo = function (idx) { goTo(idx); resetAuto(); };
    window.bsMove = function (dir) { goTo(cur + dir); resetAuto(); };

    /* Swipe touch */
    var root   = document.getElementById('bsRoot');
    var startX = 0;
    if (root) {
        root.addEventListener('touchstart', function (e) {
            startX = e.touches[0].clientX;
            clearInterval(autoTimer); /* Jeda saat disentuh */
        }, { passive: true });
        root.addEventListener('touchend', function (e) {
            var dx = startX - e.changedTouches[0].clientX;
            if (Math.abs(dx) > 40) { goTo(cur + (dx > 0 ? 1 : -1)); }
            startAuto(); /* Lanjut setelah lepas */
        }, { passive: true });
    }

    /* Jeda auto-scroll saat tab/window tidak aktif (hemat baterai) */
    document.addEventListener('visibilitychange', function () {
        if (document.hidden) { clearInterval(autoTimer); }
        else { startAuto(); }
    });

    startAuto();
})();
</script>