@extends('layouts.master')

@section('page-title', 'Leaderboards')

@section('meta_description', 'Check the standings of the competition at the No Agenda Art Generator.')

@section('page-top')
<section class="inner-page-banner bg-2 bg-image">
    <div class="container">
        <div class="inner text-center">
            <h1 class="title">Leaderboards</h1>
            <nav class="mt-4">
                <ol class="breadcrumb justify-content-center">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active">Leaderboards</li>
                </ol>
            </nav>
        </div>
    </div>
</section>
@endsection
@section('page-content')
<section class="pt-120 pb-90">
    <div class="container">
        <div class="row">
            <ul class="nav custom-tabs mb-4">
                <li><a class="active" data-bs-toggle="tab" href="#all-time">All Time</a></li>
                <li><a data-bs-toggle="tab" href="#rolling-annual">Rolling Annual</a></li>
                <li><a data-bs-toggle="tab" href="#rolling-six-months">Rolling Six Months</a></li>
                <li><a data-bs-toggle="tab" href="#rolling-ninety-days">Rolling 90 Days</a></li>
                {{--<li><a data-bs-toggle="tab" href="#by-year">By Year</a></li>--}}
            </ul>
        </div>
    </div>
    <div class="container tab-content">
        <div class="tab-pane fade show active" id="all-time">
            <div class="row">
                @foreach($leaderboardAllTime as $leaderboardArtist)
                    @include('home.leaderboard.card')
                @endforeach
            </div>
        </div>
        <div class="tab-pane fade" id="rolling-annual">
            <div class="row">
                @foreach($leaderboardPastTwelveMonths as $leaderboardArtist)
                    @include('home.leaderboard.card')
                @endforeach
            </div>
        </div>
        <div class="tab-pane fade" id="rolling-six-months">
            <div class="row">
                @foreach($leaderboardRollingSixMonths as $leaderboardArtist)
                    @include('home.leaderboard.card')
                @endforeach
            </div>
        </div>
        <div class="tab-pane fade" id="rolling-ninety-days">
            <div class="row">
                @foreach($leaderboardRollingNinetyDays as $leaderboardArtist)
                    @include('home.leaderboard.card')
                @endforeach
            </div>
        </div>
        {{--<div class="tab-pane fade" id="by-year">
            <div class="row">
                <ul class="nav nav-pills custom-pills mb-4" role="tablist">
                    @foreach ($leaderboardYears as $year)
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" data-bs-toggle="tab" href="#leaderboard-year-{{ $year }}">{{ $year }}</a>
                        </li>
                    @endforeach
                </ul>
            </div>
            <div class="container tab-content">
                @foreach ($leaderboardYears as $year)
                    <div class="tab-pane fade" id="leaderboard-year-{{ $year }}">
                        <div class="row">
                            <h4>{{ $year }} Leaderboard</h4>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>--}}
    </div>
</section>
@endsection