@extends('layouts.app', ['header' => 'event', 'header_image' => false, 'close_button' => false, 'specific_url' => route('member.userscore.delete', ['score_id' => jsencode_userdata($userScore->id)])])

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

@section('content')
    @inject('events', 'App\Models\Event')

    <form id="submitRoundDataForm"
        action="{{ route('member.events.final.submit', ['userScore' => jsencode_userdata($userScore->id), 'token' => request()->token]) }}">
        @csrf

        {{-- input hidden division type selected --}}
        <input type="hidden" name='division_type' value="{{ request()->type }}">
        <input type="hidden" name="division_id" value="{{ jsencode_userdata($division->id) }}">

        <section class="leaderboard-round-list-sec challange-round-list-sec">
            <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">
                                <div class="live-badge">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="7" height="6" viewBox="0 0 7 6"
                                        fill="none">
                                        <circle cx="3.42336" cy="3.3705" r="2.63625" fill="white"></circle>
                                    </svg>
                                    Live
                                </div>
                                <h3>Host Code :</h3>
                                <span>{{ $event->event_code }}</span>
                            </div>
                            <div class="challenge-no d-flex justify-content-center align-items-center gap-2">
                                <img src="{{ asset('images/date-icon.svg') }}" width="15" height="15" alt="">
                                <h3>Date :</h3>
                                <p>{{ getEventDateFormat($event->start_date) }} thru
                                    {{ getEventDateFormat($event->end_date) }}
                                </p>
                            </div>
                        </div>
                    </label>
                    <div class="customPistol-div">
                        <h5>{{ $division->code }} - {{ $division->name }}</h5>
                    </div>
                </div>
            </div>

            <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'>0</h6>
                                    <p>of</p>
                                    <h6 class='total-round'>{{ $event->event_rounds->count() }}</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

            </div>
        </section>


        <section class="weeks-rules-sec challange-round-list-sec number-of-round-info">
            <div class="container">
                <div
                    class="division-main-box align-items-center position-relative justify-content-between three-final-button-challenge">
                    <img src="{{ asset('images/final-score.svg') }}" alt=""
                        class="leaderboard-round-list-badge final_score">

                    <div>
                        <a href="#"
                            class="upload-target-main {{ $event->image_required ? '' : 'disable-video-icon' }}"
                            id='upload-target-file' uploaded="{{ $verifyTarget ? 'true' : 'false' }}"
                            event-id="{{ $event->id }}"

                            upload-url="{{ route('member.events.target.upload.image', ['userScore' => $userScore->id]) }}"

                            reset-url="{{ route('member.events.media.reset', ['round_id' => $event->id, 'type' => 'image' ,'userScore' => $userScore->id]) }}"

                            p-multiple-upload-url="{{ route('member.challenge.multiple.play.target.upload.image', ['score_id' => $userScore->id]) }}"
                            p-multiple-reset-url="{{ route('member.challenge.multiple.play.media.reset', ['score_id' => $userScore->id, 'round_id' => 1, 'type' => 'image']) }}">
                            <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 <span class='img-text-upload'>
                                        @if ($verifyTarget)
                                            uploaded
                                        @else
                                            upload
                                        @endif
                                    </span></h4>
                            </div>
                        </a>
                        <div class="vid-req-sm">
                            <p>Required</p>
                            <span>{{ $event->image_required ? 'Y' : 'N' }} </span>
                        </div>
                    </div>

                    <a href="#" class="division-box position-relative">
                        <div class="division-inner">
                            <h4 class='show-final-score'>

                            </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' => $event , 'division'=>$division ])
    <!---- add photo modal end-->
    <!----add video modal-->
    @include('member.event-join.upload-video-modal')
    <!---- add video modal end-->

    {{-- VERIFY EVENT HAS ENDED OR NOT --}}
    @include('include.expire-event-modal')

    {{-- CROPPING MODAL  --}}
    @include('host.event-new-flow.modal.image-cropper')
@endsection


@push('scripts')
    @include('validations.js_event_join')
    @include('challenge-event-js', ['userScore' => $userScore])
@endpush