@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 Cards */
.week-section-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 1rem;
    padding: 2.5rem;
    margin-bottom: 3rem;
    transition: transform .3s, box-shadow .3s;
}
.week-section-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0,0,0,.4);
}

/* Section Number Badge */
.section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--pgs_primary_color, #c0392b) 0%, #a93226 100%);
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(192,57,43,.3);
}

/* Image Container */
.week-image-container {
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    background: rgba(0,0,0,.2);
}

.week-image-container img {
    transition: transform .4s ease;
}

.week-image-container:hover img {
    transform: scale(1.03);
}

/* Carousel Styling */
.carousel-control-prev,
.carousel-control-next {
    width: 45px;
    height: 45px;
    background: rgba(192,57,43,.85);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity .3s;
}

.week-image-container:hover .carousel-control-prev,
.week-image-container:hover .carousel-control-next {
    opacity: 1;
}

.carousel-control-prev {
    left: 15px;
}

.carousel-control-next {
    right: 15px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px;
    height: 20px;
}

.carousel-indicators {
    margin-bottom: .75rem;
}

.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255,255,255,.5);
    border: 0;
}

.carousel-indicators .active {
    background-color: var(--pgs_primary_color, #c0392b);
}

/* Typography */
.week-section-card h3 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
}

.week-description {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255,255,255,.85);
}

/* Caption Overlay */
.carousel-caption {
    background: linear-gradient(transparent, rgba(0,0,0,.75));
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.25rem;
}

.carousel-caption p {
    font-size: .95rem;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
    margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .week-section-card {
        padding: 2rem 1.5rem;
        margin-bottom: 2rem;
    }
    .week-section-card h3 {
        font-size: 1.5rem;
    }
}

@media (max-width: 575px) {
    .week-section-card {
        padding: 1.5rem 1.25rem;
    }
    .section-number {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
}
</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">
                    <div class="week-section-card">
                        <p class="text-white mb-0">Content will be updated soon. Please check back later.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@else

    <section class="page-content">
        <div class="container">
            @foreach($sections as $section)
                @php 
                    $carouselId = 'weekCarousel_' . $section->id;
                    $isEven = $loop->iteration % 2 === 0;
                @endphp

                <div class="week-section-card">
                    <div class="row align-items-center g-4 g-lg-5">

                        {{-- Text Content --}}
                        <div class="col-lg-6 {{ $isEven && $section->images->isNotEmpty() ? 'order-lg-2' : '' }}">
                            <div class="d-flex align-items-start gap-3 mb-3">
                                {{-- <span class="section-number">{{ $loop->iteration }}</span> --}}
                                <div>
                                    @if($section->title)
                                        <h3 class="mb-0 text-white">{{ $section->title }}</h3>
                                    @endif
                                </div>
                            </div>

                            @if($section->description)
                                <div class="week-description">
                                    {!! nl2br(e($section->description)) !!}
                                </div>
                            @endif
                        </div>

                        {{-- Image Carousel --}}
                        @if($section->images->isNotEmpty())
                            <div class="col-lg-6 {{ $isEven ? 'order-lg-1' : '' }}">
                                <div class="week-image-container">
                                    <div id="{{ $carouselId }}" class="carousel slide" data-bs-ride="carousel" data-bs-interval="4000">

                                        @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">
                                            @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 }}"
                                                       data-effect="mfp-zoom-in">
                                                        <img src="{{ asset('storage/' . $img->image_path) }}"
                                                             class="d-block w-100"
                                                             style="height:400px;object-fit:cover;"
                                                             alt="{{ $img->caption ?: ($section->title ?: 'Photo') }}">
                                                    </a>
                                                    @if($img->caption)
                                                        <div class="carousel-caption">
                                                            <p>{{ $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>
                                                <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"></span>
                                                <span class="visually-hidden">Next</span>
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endif

                    </div>
                </div>
            @endforeach
        </div>
    </section>

@endif

@endsection

@push('scripts')
<script>
(function ($) {
    // 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,
                navigateByImgClick: true,
                preload: [0,1]
            },
            image: {
                titleSrc: function(item) {
                    return item.el.find('img').attr('alt');
                }
            },
            zoom: {
                enabled: true,
                duration: 300
            }
        });
        @endif
    @endforeach
})(jQuery);
</script>
@endpush