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

@section('content')
@php
    $relation = checkEventInstance($collection) ? 'event_rounds' : 'challenge_round';
    $routeVar1 = checkEventInstance($collection) ? 'member' : 'guest';
    $routeVar2 = checkEventInstance($collection) ? 'event' : 'challenge';
@endphp
    @include('include.leaderboard.event-header', ['collection' => $collection, '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">
                        <div class="border-line-top"></div>
                        <!-- 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 }}" controls>
                                                    <!-- Video source -->
                                                    <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($routeVar1.'.leaderboard.'.$routeVar2.'.user.score', ['userScore' => $userScore->id , 'division_type' => request()->division_type , 'token' => request()->token]) }}"
                            class="button primary-btn full-btn orange-outline"> Go to Scores Page</a>
                        <a href="{{ route($routeVar1.'.leaderboard.'.$routeVar2.'.details', ['userScore' => $userScore->id , 'division_type' => request()->division_type  , 'token' => request()->token]) }}"
                            class="button primary-btn full-btn"> Go to Photos Page</a>
                    </div>
                </div>

            </div>
        </div>
        </div>
        </div>
    </section>
@endsection
@push('scripts')
    <!-- <script src="{{ asset('js/custom-video.js') }}"></script> -->
    <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