@extends('layouts.game')

@section('content')
<style>
    @media only screen and (max-width: 600px) {
            #mobilePromotions {
        margin-top: 40px
    }
    }
</style>
<div class="container py-5" id="mobilePromotions">
    <h1 class="text-warning text-center fw-bold mb-4">Promotions</h1>

    @if($promotions->count())
        <div id="promotionsCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="4000">
            <div class="carousel-inner">

                @php
                    $chunks = $promotions->chunk(3); // 3 cards per slide
                @endphp

                @foreach($chunks as $key => $chunk)
                    <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                        <div class="row justify-content-center g-4">
                            @foreach($chunk as $promo)
                                <div class="col-md-4">
                                    <div class="card shadow-lg border-0 h-100">
                                        @if($promo->image)
                                            <img src="{{ asset( $promo->image) }}" class="card-img-top" alt="{{ $promo->title }}">
                                        @endif
                                        <div class="card-body text-center">
                                            <h5 class="card-title text-warning">{{ $promo->title }}</h5>
                                            <p class="card-text text-secondary">{{ $promo->description }}</p>
                                            <p class="text-white small">
                                                Valid: {{ \Carbon\Carbon::parse($promo->start_date)->format('d M Y') }} - {{ \Carbon\Carbon::parse($promo->end_date)->format('d M Y') }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach

            </div>

            <!-- Controls -->
            <button class="carousel-control-prev" type="button" data-bs-target="#promotionsCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon bg-dark rounded-circle p-3" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#promotionsCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon bg-dark rounded-circle p-3" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>

            <!-- Indicators -->
            <div class="carousel-indicators mt-3">
                @foreach($chunks as $key => $chunk)
                    <button type="button" data-bs-target="#promotionsCarousel" data-bs-slide-to="{{ $key }}" class="{{ $key == 0 ? 'active' : '' }}" aria-current="{{ $key == 0 ? 'true' : 'false' }}" aria-label="Slide {{ $key+1 }}"></button>
                @endforeach
            </div>
        </div>
    @else
        <p class="text-center text-secondary">No promotions available at the moment.</p>
    @endif
</div>
@endsection