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

@section('back_button')
    <a href="{{ url()->previous() }}" class="back-btn-back">
        <i class="fa-solid fa-chevron-left"></i>
    </a>
@endsection



@section('content')
    @inject('challenges', 'App\Models\Challenge' )
    @php
        // check image is already uploaded or not for showing uploaded image icon
        //startss
        $verifyTarget = false;

        $userScore = auth()->user()->userScore->where('challenge_id', $challenge->id)->first();
     
        if ($userScore) {
            $verifyTarget = $userScore->target_path ? true : false;
        }
        //ends
        $division = $userScore->divisions;
    @endphp
    <form id="submitRoundDataForm" action="{{ route('member.challenge.final.submit', ['id' => $challenge->id]) }}">
        @csrf
            
            @include('include.leaderboard.event-header' , ['collection' => $challenge , 'score' => $userScore])
    
            <div class="leaderboard-round-list">
                <div class="lb-round-list-main">
                    <div class="lb-round-list-box">
                        <div class="lb-round-list-inner">
                            <div class="challenge-hosted-by d-flex justify-content-between gap-2 align-items-center">
                                <div class="hosted-logo">
                                    <h4>
                                        Number of Round Completed:
                                    </h4>
                                </div>
                                <div class="hostedBy-text d-flex gap-2 align-items-center">
                                    <h6 class='current-round'>4</h6>
                                    <p>of</p>
                                    <h6 class='total-round'>4</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- round details  starts --}}
                @include('member.event-join.round-details', ['event' => $challenge])
                {{-- round details ends  --}}

            </div>
        </section>

       
        <section class="weeks-rules-sec challange-round-list-sec">
            <div class="container">
                <div class="division-main-box align-items-center position-relative justify-content-between">
                    <img src="{{ asset('images/final-score.svg') }}" alt=""
                        class="leaderboard-round-list-badge final_score">
                    {{-- <a href="#" class="upload-target-main" data-bs-target="#add-photo" data-bs-toggle="modal">
                    <div class="upload-final-target">
                        <img src="{{ asset('images/final-target-uploaded.svg') }}" width="30" height="30"
                            alt="">
                        <h4>Final target <br> photo uploaded </h4>
                    </div>
                </a> --}}
                 
                        <div>
                            <a href="#" class="upload-target-main" id='upload-target-file' event-id="{{ $challenge->id }}">
                                <div class="upload-final-target">
                                    <img src="@if ($verifyTarget) {{ asset('images/final-target-uploaded.svg') }} @else{{ asset('images/upload-target-img.svg') }} @endif"
                                        width="30" height="30" alt="">
                                    <h4>Final target <br> photo uploaded </h4>
                                </div>
                            </a>
                            <div class="vid-req-sm">
                                <p>Required</p>
                                <span>{{ $challenge->video_required ? 'Y' : 'N' }}</span>
                            </div>
                        </div>
                        
                    

                    <a href="#" class="division-box position-relative">
                        <div class="division-inner">
                            <h4 class='show-final-score'>
                                @if($userScore){{ $userScore->total_score }}@endif
                            </h4>
                        </div>
                    </a>
                    <a href="#" class="upload-target-main" id='addScoreModal'>
                        <div class="upload-final-target">
                            <h4>Enter Data</h4>
                        </div>
                    </a>
                </div>
                <div class="final-score-text text-center mt-2">
                    <h5 class=" mb-2">
                        <svg width="15" height="15" viewBox="0 0 13 13" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M6.07813 0.0859375C4.89144 0.0859375 3.7314 0.437831 2.74471 1.09712C1.75801 1.75641 0.988976 2.69348 0.534851 3.78984C0.0807247 4.88619 -0.0380953 6.09259 0.193416 7.25648C0.424927 8.42037 0.996372 9.48946 1.83549 10.3286C2.6746 11.1677 3.7437 11.7391 4.90759 11.9706C6.07147 12.2022 7.27787 12.0833 8.37423 11.6292C9.47058 11.1751 10.4077 10.4061 11.0669 9.41936C11.7262 8.43266 12.0781 7.27263 12.0781 6.08594C12.0781 4.49464 11.446 2.96851 10.3208 1.8433C9.19555 0.718078 7.66943 0.0859375 6.07813 0.0859375ZM6.07813 11.0859C5.08922 11.0859 4.12252 10.7927 3.30028 10.2433C2.47803 9.69388 1.83717 8.91298 1.45873 7.99935C1.08029 7.08572 0.981275 6.08039 1.1742 5.11049C1.36713 4.14058 1.84333 3.24967 2.54259 2.5504C3.24186 1.85114 4.13277 1.37494 5.10268 1.18201C6.07258 0.989085 7.07791 1.0881 7.99154 1.46654C8.90518 1.84498 9.68607 2.48584 10.2355 3.30809C10.7849 4.13033 11.0781 5.09703 11.0781 6.08594C11.0781 7.41202 10.5513 8.68379 9.61366 9.62147C8.67598 10.5592 7.40421 11.0859 6.07813 11.0859Z"
                                fill="#B06741" />
                            <path
                                d="M6.07812 4.93609C5.94551 4.93609 5.81833 4.98877 5.72457 5.08253C5.6308 5.1763 5.57812 5.30348 5.57812 5.43609V8.83609C5.57812 8.9687 5.6308 9.09587 5.72457 9.18964C5.81833 9.28341 5.94551 9.33609 6.07812 9.33609C6.21073 9.33609 6.3379 9.28341 6.43167 9.18964C6.52544 9.09587 6.57812 8.9687 6.57812 8.83609V5.43609C6.57812 5.30348 6.52544 5.1763 6.43167 5.08253C6.3379 4.98877 6.21073 4.93609 6.07812 4.93609ZM6.07812 2.88609C5.94276 2.89118 5.81449 2.9479 5.71964 3.0446C5.6248 3.14131 5.57058 3.27066 5.56812 3.40609V3.48609C5.56788 3.55132 5.58123 3.6159 5.60731 3.67569C5.63339 3.73549 5.67163 3.7892 5.71961 3.83341C5.76758 3.87762 5.82423 3.91136 5.88595 3.93248C5.94767 3.9536 6.01312 3.96164 6.07812 3.95609C6.20915 3.95114 6.33347 3.89687 6.42618 3.80415C6.5189 3.71144 6.57317 3.58712 6.57812 3.45609V3.33609C6.57851 3.27254 6.56544 3.20963 6.53977 3.1515C6.51409 3.09337 6.4764 3.04133 6.42916 2.99882C6.38193 2.95631 6.32622 2.92428 6.26571 2.90485C6.20521 2.88542 6.14127 2.87903 6.07812 2.88609Z"
                                fill="#B06741" />
                        </svg>
                        <input type="hidden" name='final_score' id='final_score'>
                        Final score = Σ (Points / Time) for each round
                    </h5>
                    <button type='submit' class="button primary-btn full-btn" id='submitFormData'>Submit data
                        <div class="spinner-border d-none" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </button>
                </div>
            </div>
        </section>
    </form>
    {{-- add scores modal --}}
    @include('member.event-join.add-score-modal')
    <!----score modal end-->
    <!----add photo modal-->
    @include('member.event-join.upload-target-modal', ['event' => $challenge])
    <!---- add photo modal end-->
    <!----add video modal-->
    @include('member.event-join.upload-video-modal')
    <!---- add video modal end-->
@endsection

@push('scripts')
    @include('validations.js_event_join')
    @include('challenge-event-js')
    {{-- <script src="{{ asset('js/custom-video.js') }}"></script> --}}
@endpush