@extends('layouts.website')

@section('title', 'A Week in a Glance')

@section('hero')
    <x-site.partials.inner-banner
        title="The FISEC Games"
        :breadcrumb="[
            ['label' => 'The FISEC Games', 'url' => route('site.games.index')],
            ['label' => 'A Week in a Glance'],
        ]" />
@endsection

@push('styles')
<style>
.week-section { border-bottom: 1px solid rgba(255,255,255,.08); }
.week-section:last-child { border-bottom: none; }
.week-section .section-number {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--pgs_primary_color, #c0392b);
    color: #fff; font-weight: 700; font-size: .95rem; flex-shrink: 0;
}
.week-thumb {
    width: 72px; height: 52px; object-fit: cover;
    border-radius: .25rem; cursor: pointer;
    opacity: .55; transition: opacity .2s, border-color .2s;
    border: 2px solid transparent;
}
.week-thumb.active-thumb {
    opacity: 1;
    border-color: var(--pgs_primary_color, #c0392b);
}
.week-carousel-wrap {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .5rem;
    overflow: hidden;
}
</style>
@endpush

@section('content')

{{-- Page heading --}}
<section class="pt-5 pb-0">
    <div class="container">
        <div class="section-title text-center">
            <h2 class="text-white mb-0">A Week in a Glance</h2>
            <div class="mt-3 mx-auto" style="width:60px;height:3px;background:var(--pgs_primary_color,#c0392b);border-radius:2px;"></div>
        </div>
    </div>
</section>

@if($sections->isEmpty())
    <section class="page-content">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center">
                    <p class="text-white">Content will be updated soon. Please check back later.</p>
                </div>
            </div>
        </div>
    </section>
@else
<section class="page-content week-section py-2">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-">
                <p class="text-white mb-3">Experience the vibrant atmosphere of the FISEC Games through our "Week in a Glance" section, where we share captivating photos and highlights from each day of the event. Relive the excitement, camaraderie, and unforgettable moments that make the FISEC Games a truly unique and memorable experience for all participants.</p>

                <p class="text-white mb-3">The FISEC Games are more than just a sports tournament. They provide enormous opportunities for young people around the world to meet. Social and cultural goals are even important as sportive achievements.</p>

                <p class="text-white mb-0">The games start with an opening ceremony in which all delegations, standing up behind their flags, are welcomed. The organising country presents itself with cultural performances, followed by the official opening of the games.</p>
            </div>
        </div>
    </div>
</section>
    {{-- Sections --}}
    @foreach($sections as $section)
        @php $carouselId = 'weekCarousel_' . $section->id; @endphp

        <section class="page-content week-section py-4">
            <div class="container">
                {{-- ── Photo slider ── --}}
                @if($section->images->isNotEmpty())
                    <div class="row justify-content-center">
                        <div class="col-lg-8">
                            <div class="week-carousel-wrap">

                                <div id="{{ $carouselId }}" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">

                                    @if($section->images->count() > 1)
                                    <div class="carousel-indicators">
                                        @foreach($section->images as $idx => $img)
                                            <button type="button"
                                                    data-bs-target="#{{ $carouselId }}"
                                                    data-bs-slide-to="{{ $idx }}"
                                                    class="{{ $idx === 0 ? 'active' : '' }}"
                                                    aria-label="Photo {{ $idx + 1 }}"></button>
                                        @endforeach
                                    </div>
                                    @endif

                                    <div class="carousel-inner" style="max-height:30%;">
                                        @foreach($section->images as $idx => $img)
                                            <div class="carousel-item {{ $idx === 0 ? 'active' : '' }}">
                                                <a href="{{ asset('storage/' . $img->image_path) }}"
                                                   class="week-gallery-link-{{ $section->id }}">
                                                    <img src="{{ asset('storage/' . $img->image_path) }}"
                                                         class="d-block w-100"
                                                         style="max-height:30%;object-fit:cover;"
                                                         alt="{{ $img->caption ?: ($section->title ?: 'Photo') }}">
                                                </a>
                                                @if($img->caption)
                                                    <div class="carousel-caption d-none d-md-block">
                                                        <p class="mb-0 bg-dark bg-opacity-50 px-3 py-1 rounded d-inline-block">
                                                            {{ $img->caption }}
                                                        </p>
                                                    </div>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>

                                    {{-- @if($section->images->count() > 1)
                                        <button class="carousel-control-prev" type="button"
                                                data-bs-target="#{{ $carouselId }}" data-bs-slide="prev">
                                            <span class="carousel-control-prev-icon"></span>
                                        </button>
                                        <button class="carousel-control-next" type="button"
                                                data-bs-target="#{{ $carouselId }}" data-bs-slide="next">
                                            <span class="carousel-control-next-icon"></span>
                                        </button>
                                    @endif
                                </div>

                                @if($section->images->count() > 1)
                                    <div class="d-flex gap-2 p-3 overflow-auto flex-wrap justify-content-center">
                                        @foreach($section->images as $idx => $img)
                                            <img src="{{ asset('storage/' . $img->image_path) }}"
                                                 class="week-thumb {{ $idx === 0 ? 'active-thumb' : '' }}"
                                                 data-carousel="{{ $carouselId }}"
                                                 data-index="{{ $idx }}"
                                                 alt="">
                                        @endforeach
                                    </div>
                                @endif --}}

                            </div>
                        </div>
                    </div>
                                    {{-- ── Section title + description ── --}}

             <div class="row justify-content-center mb-4">
                    <div class="col-lg-8">
                        <div class="d-flex align-items-center gap-3 mb-3">
                            {{-- <span class="section-number">{{ $loop->iteration }}</span> --}}
                            @if($section->title)
                                <h3 class="mb-0 text-white">{{ $section->title }}</h3>
                            @endif
                        </div>

                        @if($section->description)
                            <div class="text-white" style="line-height:1.9; font-size:1.05rem;">
                                {!! $section->description !!}
                            </div>
                        @endif
                    </div>
                </div>
                @endif

            </div>
        </section>
    @endforeach

@endif

@endsection

@push('scripts')
<script>
(function ($) {

    // Thumbnail → advance carousel + highlight
    $(document).on('click', '.week-thumb', function () {
        var carouselId = $(this).data('carousel');
        var idx        = parseInt($(this).data('index'));
        bootstrap.Carousel.getOrCreateInstance(document.getElementById(carouselId)).to(idx);
        $('[data-carousel="' + carouselId + '"]').removeClass('active-thumb');
        $(this).addClass('active-thumb');
    });

    // Sync thumbnails on carousel slide
    $('[id^="weekCarousel_"]').each(function () {
        var id = this.id;
        $(this).on('slid.bs.carousel', function (e) {
            $('[data-carousel="' + id + '"]').removeClass('active-thumb').eq(e.to).addClass('active-thumb');
        });
    });

    // Magnific Popup lightbox — one gallery per section
    @foreach($sections as $section)
        @if($section->images->isNotEmpty())
        $('.week-gallery-link-{{ $section->id }}').magnificPopup({
            type: 'image',
            gallery: { enabled: true },
        });
        @endif
    @endforeach

})(jQuery);
</script>
@endpush