@extends('layouts.website')

@section('title', $sport->name . ' - Budapest 2026')

@section('hero')
    <x-site.partials.inner-banner
        :title="$sport->name"
        :breadcrumb="[
            ['label' => 'Budapest 2026', 'url' => route('site.budapest.index')],
            ['label' => 'Sports', 'url' => route('site.budapest.sports')],
            ['label' => $sport->name],
        ]" />
@endsection

@push('styles')
<style>
.sport-carousel-img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center top;
    width: 100%;
    display: block;
}
</style>
@endpush

@section('content')

{{-- Page heading --}}
<section class="pt-5 pb-0 justify-text">
    <div class="container">
        <div class="section-title text-center">
            <h2 class="text-white mb-0">{{ $sport->name }}</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>

{{-- ── 1. INTRODUCTION ─────────────────────────────────────────────────── --}}
<section class="page-content justify-text   ">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">

                {{-- @if($sport->icon_class)
                    <div class="text-center mb-4">
                        <span class="text-primary" style="font-size:2.5rem;">
                            <i class="{{ $sport->icon_class }}"></i>
                        </span>
                    </div>
                @endif --}}

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

            </div>
        </div>

        {{-- ── 2. IMAGE SLIDER ─────────────────────────────────────────────────── --}}
        @if($sport->images->isNotEmpty())
            <div class="row justify-content-center mt-4">
                <div class="col-lg-8">
                    <div class="week-carousel-wrap">

                        <div id="sportCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">

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

                            {{-- Slides --}}
                            <div class="carousel-inner">
                                @foreach($sport->images as $index => $img)
                                    <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                                        <a href="{{ asset('storage/' . $img->image_path) }}" class="sport-gallery-link">
                                            <img src="{{ asset('storage/' . $img->image_path) }}"
                                                 class="d-block w-100 sport-carousel-img"
                                                 alt="{{ $img->caption ?: $sport->name }}">
                                        </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>

                        </div>

                    </div>
                </div>
            </div>
       

        {{-- ── 3. GAME RULES ───────────────────────────────────────────────────── --}}

           <div class="row justify-content-center mt-4">
            <div class="col-8">
                {{-- <p class="text-white mb-4">Download official result PDFs.</p> --}}

                 @switch($sport->id)
                    @case(1)
                               <div class="mb-3">
                        <a class="d-flex align-items-center justify-content-between text-decoration-none p-3 bg-dark rounded"
                           href="{{ asset('website/games-rules/Athletics-Rules-2026.pdf') }}" target="_blank" rel="noopener">
                            <div class=" fw-semibold">
                                 Rules — {{ $sport->name }}
                            </div>
                            <span class="btn btn-sm btn-primary">Download</span>
                        </a>
                    </div>
                        @break
                    @case(2)
                              <div class="mb-3">
                        <a class="d-flex align-items-center justify-content-between text-decoration-none p-3 bg-dark rounded"
                           href="{{ asset('website/games-rules/Specifics-Basketball.pdf') }}" target="_blank" rel="noopener">
                            <div class=" fw-semibold">
                                 Rules — {{ $sport->name }}
                            </div>
                            <span class="btn btn-sm btn-primary">Download</span>
                        </a>
                    </div>
                        @break
                        @case(3)
                    <div class="mb-3">
                        <a class="d-flex align-items-center justify-content-between text-decoration-none p-3 bg-dark rounded"
                           href="{{ asset('website/games-rules/Specifics-Futsal.pdf') }}" target="_blank" rel="noopener">
                            <div class=" fw-semibold">
                                 Rules — {{ $sport->name }}
                            </div>
                            <span class="btn btn-sm btn-primary">Download</span>
                        </a>
                    </div>
                        @break
                            @case(4)
                      <div class="mb-3">
                        <a class="d-flex align-items-center justify-content-between text-decoration-none p-3 bg-dark rounded"
                           href="{{ asset('website/games-rules/Swimming-Rules-2026.pdf') }}" target="_blank" rel="noopener">
                            <div class=" fw-semibold">
                                 Rules — {{ $sport->name }}
                            </div>
                            <span class="btn btn-sm btn-primary">Download</span>
                        </a>
                    </div>                        @break
                            @case(5)
                            <div class="mb-3">
                        <a class="d-flex align-items-center justify-content-between text-decoration-none p-3 bg-dark rounded"
                           href="{{ asset('website/games-rules/Table-Tennis-Rules-2026.pdf') }}" target="_blank" rel="noopener">
                            <div class=" fw-semibold">
                                 Rules — {{ $sport->name }}
                            </div>
                            <span class="btn btn-sm btn-primary">Download</span>
                        </a>
                    </div>
                    @break
                            @case(6)
                            <div class="mb-3">
                        <a class="d-flex align-items-center justify-content-between text-decoration-none p-3 bg-dark rounded"
                           href="{{ asset('website/games-rules/Specifics-Volleyball-2026.pdf') }}" target="_blank" rel="noopener">
                            <div class=" fw-semibold">
                                 Rules — {{ $sport->name }}
                            </div>
                            <span class="btn btn-sm btn-primary">Download</span>
                        </a>
                    </div>
                    @break
                    @default
                                    
                    @endswitch 
            </div>
        </div>
 @endif
        {{-- @if($sport->rules) --}}
            {{-- <div class="row justify-content-center mt-4">
                <div class="col-lg-8 text-center">

                    <button class="btn btn-primary btn-lg px-5 mb-4"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#rulesCollapse"
                            aria-expanded="false"
                            aria-controls="rulesCollapse"
                            id="rulesBtn">
                        <i class="fas fa-book-open me-2"></i> View Game Rules
                    </button>

                    <div class="collapse" id="rulesCollapse">
                        <div class="card border-0 shadow-sm text-start bg-dark">
                            <div class="card-header bg-primary d-flex align-items-center justify-content-between">
                                <h5 class="text-white mb-0">
                                    <i class="fas fa-book-open me-2"></i> Rules — {{ $sport->name }}
                                </h5>
                                <button class="btn btn-sm btn-outline-light"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#rulesCollapse">
                                    Close
                                </button>
                            </div>
                            <div class="card-body p-3 text-start text-dark bg-light" style="line-height:1.9; white-space:pre-line;">
                                {{ $sport->rules }}
                            </div>
                        </div>
                    </div>

                </div>
            </div> --}}
        {{-- @endif --}}

    </div>
</section>

@endsection

@push('styles')
<style>
.week-carousel-wrap {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .5rem;
    overflow: hidden;
}
.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);
}
</style>
@endpush

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

    /* Magnific Popup on carousel images */
    if ($.fn.magnificPopup && $('.sport-gallery-link').length) {
        var links = [];
        $('.sport-gallery-link').each(function () {
            links.push({ src: $(this).attr('href') });
        });
        $('.sport-gallery-link').each(function (i) {
            $(this).on('click', function (e) {
                e.preventDefault();
                $.magnificPopup.open({ items: links, gallery: { enabled: true }, type: 'image', startAt: i });
            });
        });
    }

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

    /* Sync thumbnail highlight when carousel slides by other means */
    $('#sportCarousel').on('slid.bs.carousel', function (e) {
        $('.sport-thumb').removeClass('active-thumb');
        $('.sport-thumb[data-index="' + e.to + '"]').addClass('active-thumb');
    });

    /* Toggle rules button label */
    $('#rulesCollapse').on('show.bs.collapse', function () {
        $('#rulesBtn').html('<i class="fas fa-times me-2"></i> Hide Game Rules');
    }).on('hide.bs.collapse', function () {
        $('#rulesBtn').html('<i class="fas fa-book-open me-2"></i> View Game Rules');
    });

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