@extends('layouts.stampcard_default')


@section('script')
    <script defer>
        getLeaderboardAJAX();
        getRecentWinnerAJAX();
    </script>

@endsection


@section('menu')

@endsection

@section('content')

    <div class='content-container' id="container_bingo" mode='bingo' style='display: block;'>
        <div class="page-wrap">
            <ul class="tabs-list leaderboard_page">
                <li class="active"><a href="leaderboard_cards">{{ __('stampcard.titleLeaderboard') }} <span style="white-space: nowrap">({{ __('stampcard.labelTop10') }})</span></a></li>
                <li ><a href="recent_cards">{{ __('stampcard.labelRecentWinners') }}</a></li>
            </ul>


            <div tab_id="leaderboard_cards" id="leaderboard_cards" class="tab active">
                <div class="leaderboard_card" card_id="template">
                    <div class="leaderboard_card-img">
                        🐮
                        {{--            <img src="assets/images/afp/stampcard/user.svg" width="100%">--}}
                    </div>
                    <div class="leaderboard_card-content ">
                        <div class="leaderboard_card-content-item">
                            <h4 class="leaderboard_card-content-title">{{ __('heading.title_user') }}</h6>
                            <small class="leaderboard_card-content-id"><span style="white-space: nowrap">{{ __('stampcard.labelNoOfStarsCollected') }}: <span class="stars_collected">6</span></span> · <span style="white-space: nowrap">{{ __('stampcard.labelNoOfCompletedCards') }}: <span class="cards_completed">3</span></span></small>

                        </div>
                    </div>
                    <div class="leaderboard_card-medal"></div>
                </div>
            </div>

            <div tab_id="recent_cards" id="recent_cards" class="tab">
                <div class="recent_card" card_id="template">
                    <div class="recent_card-img">

                        🐮
                        {{--            <img src="assets/images/afp/stampcard/user.svg" width="100%">--}}
                    </div>
                    <div class="recent_card-content">
                        <div class="recent_card-content-item">
                            <h6><span class="recent_card-content-title">{{ __('heading.title_user') }}</span></h6>
                            <small class="recent_card-content-id">
                                <span>Won a <span class="reward_name"></span></span> on their
                                <span><span class="card_id"></span> {{ __('stampcard.labelCard') }} </span>
                                <span><span class="grid_id"></span> {{ __('stampcard.labelGrid') }} </span>
                            </small>
                            <small class="created_at" style="opacity: .5;"></small>

                        </div>
                    </div>
                    <div class="recent_card-reward">
                        <img src="https://dreamwithanchor.growthdesk.com/assets/images/afp/Prizes/Cooler.png"/>
                    </div>
                </div>
            </div>

            <p class="text-center">{{ __('stampcard.labelUnblockGridInfo') }}</p>
            <small class="text-center">{{ __('stampcard.labelLeaderboardDisclaimer') }}</small>



        </div>
    </div>
@endsection