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


@section('back_button')
    {{-- ONLY FOR CHAMPIONSHIP FLOW --}}
    <a href="@if (request()->route('for') == 'old-challenge') {{ route('guest.leaderboard.division.type.select', ['for' => 'old-challenge', 'event_challenge_id' => $challenge, 'type' => 'challenge']) }}
             @else
             {{-- FOR LIVE CHALLENGE LEADERBOARD FLOW --}}
                 {{ route('guest.leaderboard.division.type.select', ['for' => 'last-week-challenge', 'event_challenge_id' => getLastWeekChallenge()?->id, 'division_type' => $division_type]) }} @endif"
        class="back-btn-back">
        <i class="fa-solid fa-chevron-left"></i>
    </a>
@endsection
@section('content')
    <section>
        <div class="guest-leaderboard-banner mb-3">
            @if ($challenge->challengeSponsorBy)
                {{-- <img src="{{ asset('images/abc-group-banner.jpg') }}" alt=""> --}}
                <img src="{{ Storage::url($challenge->challengeSponsorBy->banner_path) }}" alt="" width="100%">
            @endif
        </div>
    </section>

    {{-- show challenge header  --}}
    @if (request()->route('for') == 'old-challenge')
        <section class="leaderboard-round-list-sec guest-leaderboard-banner">
            <div class="container">
                <div class="memeber-price-box">
                    <label for="memeber-price-card">
                        <div class="memeber-price-details-outer d-block">
                            <div class="challenge-no d-flex justify-content-center align-items-center gap-2">
                                <p>Division leaders - week ending </p>
                                <img src="{{ asset('images/date-icon.svg') }}" width="15" height="15" alt="">
                                <h3>Date :</h3>
                                <p> {{ \Carbon\Carbon::parse(getWeekEndingDate())->format('F j, Y') }}</p>
                            </div>
                        </div>
                    </label>
                </div>
            </div>
        </section>
    @else
        <section class="leaderboard-round-list-sec guest-leaderboard-banner">
            <div class="container">
                <div class="memeber-price-box">
                    <label for="memeber-price-card">
                        <div class="memeber-price-details-outer d-block">
                            <div class="challenge-no d-flex justify-content-center align-items-center gap-2 mb-2">
                                    <h3>Challenge Number:</h3>
                                    <span>{{ $challenge?->challenge_code ?? ''}}</span>
                            </div>
                            <div class="challenge-no d-flex justify-content-center align-items-center gap-2">
                                <p>Division Winners - week ending </p>
                                <img src="{{ asset('images/date-icon.svg') }}" width="15" height="15" alt="">
                                <h3>Date :</h3>
                                <p> {{ \Carbon\Carbon::parse($challenge?->end_date)->format('F j, Y') }}</p>
                            </div>
                        </div>
                    </label>
                </div>
            </div>
        </section>
        {{-- @include('include.leaderboard.event-header', ['collection' => $challenge, 'score' => false]) --}}
    @endif


    <div class="championship-leader">
        @forelse ($data as $key => $value)
            {{-- show top three user of each division --}}
            @include('include.leaderboard.top-three-rank', [
                'value' => $value,
                'for' => isset($for) ? $for : false,
                'flags' => true,
                'type' => $type,
            ])
        @empty
            <div class="no-user-box">
                <span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"
                        fill="none">
                        <rect width="100" height="100" fill="transparent" />
                        <path
                            d="M17 26C17 22.6863 19.6863 20 23 20H67.5714C70.8851 20 73.5714 22.6863 73.5714 26V63.9714C73.5714 67.2851 70.8851 69.9714 67.5714 69.9714H23C19.6863 69.9714 17 67.2851 17 63.9714V26Z"
                            fill="white" stroke="#C06C3F" stroke-width="2" stroke-linejoin="round" />
                        <path
                            d="M26.4277 35.4282C26.4277 32.1145 29.114 29.4282 32.4277 29.4282H76.9992C80.3129 29.4282 82.9992 32.1145 82.9992 35.4282V73.3997C82.9992 76.7134 80.3129 79.3997 76.9992 79.3997H32.4277C29.114 79.3997 26.4277 76.7134 26.4277 73.3997V35.4282Z"
                            fill="white" stroke="#C06C3F" stroke-width="2" stroke-linejoin="round" />
                        <mask id="path-4-inside-1_835_1648" fill="white">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M69.2302 50.9166C69.2302 53.9324 66.7854 56.3772 63.7696 56.3772C60.7538 56.3772 58.309 53.9324 58.309 50.9166C58.309 47.9008 60.7538 45.4561 63.7696 45.4561C66.7854 45.4561 69.2302 47.9008 69.2302 50.9166ZM59.0007 59.2764C55.1343 59.2764 52 62.4108 52 66.2772C52 67.4371 52.9403 68.3774 54.1002 68.3774H73.5622C74.7222 68.3774 75.6625 67.4371 75.6625 66.2772C75.6625 62.4108 72.5282 59.2764 68.6618 59.2764H63.8312H59.0007Z" />
                        </mask>
                        <path
                            d="M63.7696 58.3772C67.89 58.3772 71.2302 55.037 71.2302 50.9166H67.2302C67.2302 52.8278 65.6808 54.3772 63.7696 54.3772V58.3772ZM56.309 50.9166C56.309 55.037 59.6493 58.3772 63.7696 58.3772V54.3772C61.8584 54.3772 60.309 52.8278 60.309 50.9166H56.309ZM63.7696 43.4561C59.6493 43.4561 56.309 46.7963 56.309 50.9166H60.309C60.309 49.0054 61.8584 47.4561 63.7696 47.4561V43.4561ZM71.2302 50.9166C71.2302 46.7963 67.89 43.4561 63.7696 43.4561V47.4561C65.6808 47.4561 67.2302 49.0054 67.2302 50.9166H71.2302ZM54 66.2772C54 63.5153 56.2389 61.2764 59.0007 61.2764V57.2764C54.0297 57.2764 50 61.3062 50 66.2772H54ZM54.1002 66.3774C54.0449 66.3774 54 66.3325 54 66.2772H50C50 68.5416 51.8357 70.3774 54.1002 70.3774V66.3774ZM73.5622 66.3774H54.1002V70.3774H73.5622V66.3774ZM73.6625 66.2772C73.6625 66.3325 73.6176 66.3774 73.5622 66.3774V70.3774C75.8267 70.3774 77.6625 68.5416 77.6625 66.2772H73.6625ZM68.6618 61.2764C71.4236 61.2764 73.6625 63.5153 73.6625 66.2772H77.6625C77.6625 61.3062 73.6328 57.2764 68.6618 57.2764V61.2764ZM63.8312 61.2764H68.6618V57.2764H63.8312V61.2764ZM59.0007 61.2764H63.8312V57.2764H59.0007V61.2764Z"
                            fill="#C06C3F" mask="url(#path-4-inside-1_835_1648)" />
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M56.0557 46.7604C56.0557 50.6057 52.9385 53.723 49.0931 53.723C45.2478 53.723 42.1306 50.6057 42.1306 46.7604C42.1306 42.9151 45.2478 39.7979 49.0931 39.7979C52.9385 39.7979 56.0557 42.9151 56.0557 46.7604ZM43.0103 57.422C38.0804 57.422 34.084 61.4185 34.084 66.3484C34.084 67.8273 35.2829 69.0263 36.7619 69.0263H61.5772C63.0562 69.0263 64.2551 67.8273 64.2551 66.3484C64.2551 61.4185 60.2587 57.422 55.3288 57.422H49.1695H43.0103Z"
                            fill="#C06C3F" />
                        <path
                            d="M14.6346 79.2695C13.7318 79.2695 13 78.5377 13 77.6349V77.6349C13 76.7322 13.7318 76.0004 14.6346 76.0004L20.0544 76.0004C20.9572 76.0004 21.689 76.7322 21.689 77.6349V77.6349C21.689 78.5377 20.9572 79.2695 20.0544 79.2695L14.6346 79.2695Z"
                            stroke="#C06C3F" stroke-width="2" stroke-linejoin="round" />
                        <path
                            d="M84.4103 18.7344C85.3131 18.7344 86.0449 19.4662 86.0449 20.369V20.369C86.0449 21.2717 85.3131 22.0036 84.4103 22.0036L78.9905 22.0036C78.0878 22.0036 77.3559 21.2717 77.3559 20.369V20.369C77.3559 19.4662 78.0878 18.7344 78.9905 18.7344L84.4103 18.7344Z"
                            stroke="#C06C3F" stroke-width="2" stroke-linejoin="round" />
                        <circle cx="23" cy="27" r="13" fill="white" stroke="#C06C3F" stroke-width="2" />
                        <path
                            d="M21.5 20.5C21.5 19.6716 22.1716 19 23 19V19C23.8284 19 24.5 19.6716 24.5 20.5V26.5C24.5 27.3284 23.8284 28 23 28V28C22.1716 28 21.5 27.3284 21.5 26.5V20.5Z"
                            stroke="#C06C3F" stroke-width="2" stroke-linejoin="round" />
                        <path
                            d="M21.5 33.5C21.5 34.3284 22.1716 35 23 35V35C23.8284 35 24.5 34.3284 24.5 33.5V33.5C24.5 32.6716 23.8284 32 23 32V32C22.1716 32 21.5 32.6716 21.5 33.5V33.5Z"
                            stroke="#C06C3F" stroke-width="2" stroke-linejoin="round" />
                    </svg>
                </span>
                <p>No user found</p>
            </div>
        @endforelse
    </div>

    {{-- search leaderboard --}}
    @include('include.search.search-leaderboard', ['filter_parameter' => $filter_parameter])

    {{-- @if (request()->route('for') == 'live-challenge' && getLiveChallenge())
        <div class="fixed-btn">
            <a href="{{ route('member.challenge.joins') }}" class="button primary-btn full-btn show-anchor-disable" >ENTER CHALLENGE <br> <span>(Members Only)</span></a>
        </div>
    @endif --}}
@endsection

@push('scripts')

    {{-- search user --}}
    @if (isset($challenge))
        <script>
            //search user
            // jQuery('#search_user').click(function(e) {
            //     e.preventDefault();

            //     jQuery(this).addClass('d-none');

            //     //show input field
            //     jQuery('input[name=search_by_name]').removeClass('d-none');
            //     jQuery('#search_button').removeClass('d-none');
            //     jQuery('input[name=search_by_name]').focus();


            //     jQuery('#search_button').click(function() {
            //         let searchValue = jQuery('input[name="search_by_name"]').val();
            //         let url = window.location.href;

            //         let newUrl = new URL(url);

            //         // Add or update the parameter
            //         newUrl.searchParams.set('search_by_name', searchValue);

            //         window.location.href = newUrl.href;
            //     })
            // });
        </script>
    @endif
@endpush