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

@section('back_button')
    <a href="{{ route('member.leaderboard.division.type.select' , ['event' => jsencode_userdata($event->id) , 'token' => request()->token]) }} " class="back-btn-back">
        <i class="fa-solid fa-chevron-left"></i>
    </a>
@endsection

@section('content')
    <section class="host-leaderboard">
        <div class="lb-round-list-main mb-3">
            <div class="lb-round-list-box host-by-box">
                <div class="lb-round-list-inner">
                    <div class="challenge-hosted-by d-flex justify-space-between gap-3 align-items-center">
                        <div class="hosted-logo">
                           @if($event->eventLogo->first())
                                <img src="{{ Storage::url($event->eventLogo->first()->path) }}" width="76px" height="71"
                                alt="">
                           @endif
                        </div>
                        <div class="hostedBy-text">
                            <h5><span>Hosted by</h5>
                            <h5>{{ $event->hosted_by ?? 'The czar' }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- show header --}}
    @include('include.leaderboard.event-header', ['collection' => $event, 'score' => false , 'event' => $event])
    
    {{-- search leaderboard --}}
    @include('include.search.search-leaderboard' ,  ['filter_parameter' => $filter_parameter])

    <div class="championship-leader">
        @forelse ($data as $key => $value)
            {{-- show top three ranks of each division --}}
            @include('include.leaderboard.top-three-rank', ['value' => $value , 'for' => false , 'flags' => true ])
        @empty
            <center><p>No data found</p></center>
        @endforelse
    </div>
@endsection


@push('scripts')
    <script src="{{ asset('custom-js/search-leaderboard.js') }}"></script>
@endpush