@extends('layouts.app', ['header_image' => false, 'header' => true, 'close_button' => false])

@section('content')
    @include('include.leaderboard.event-header', ['collection' => $challenge, 'score' => $userScore])
    <section class="comments-round-list-sec">
        <div class="leaderboard-round-list">
            <div class="lb-round-list-main">
                <div class="lb-round-list-box">
                    <div class="lb-round-list-inner round-video">
                        <!-- Video container -->
                        <div id="owl-carousel" class="owl-carousel owl-theme">       
                            @forelse ($userScore->userScoreRound as $key=>$round)
                                    @php
                                        ++$key;
                                    @endphp
                                    <div class="item">
                                        <div class="video-slider-wrapper">
                                            <img src="{{ asset('images/round' . $key . '-badge.svg') }}" alt=""
                                            class="leaderboard-round-list-badge">
                                            <div class="video-container mt-3">
                                                <video class="video video-{{ ++$key }} object-contain" controls >
                                                    <source
                                                        src= "{{ Storage::url($round->video_path) }}">
                                                </video>
                                            </div>
                                        </div>
                                    </div>
                            @empty
                                <center>
                                    <p>No video found</p>
                                </center>
                            @endforelse

                        </div>
                    </div>
                    <div class="round-video-btns mt-2">
                        <a href="{{ route('guest.leaderboard.challenge.user.score', ['userScore' => $userScore->id ,'division_type' => $division_type ,'leaderboard' => request()->leaderboard]) }}"
                            class="button primary-btn full-btn orange-outline"> Go to Scores Page</a>
                        <a href="{{ route('guest.leaderboard.challenge.details', ['userScore' => $userScore->id , 'division_type' => $division_type , 'leaderboard' => request()->leaderboard]) }}"
                            class="button primary-btn full-btn"> Go to Photos Page</a>
                    </div>
                </div>
            </div>
        </div>
        </div>
        </div>
    </section>
@endsection
@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
    <script>
        $('#owl-carousel').owlCarousel({
            loop: false,
            margin: 10,
            dots: false,
            nav: true,
            items: 1,
        })
    </script>
@endpush