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

@section('back_button')
    <a href="{{ route('guest.leaderboard.challenge.user.score' , ['userScore' => $userScore->id , 'division_type' => request()->division_type , 'leaderboard' => request()->leaderboard]) }}" class="back-btn-back">
        <i class="fa-solid fa-chevron-left"></i>
    </a>
@endsection

@section('content')

{{-- show challenge header --}}
@include('include.leaderboard.event-header' , ['collection' => $challenge , 'score' => $userScore])

<section class="member-sec p-0">
    <div class="container">
        <div class="leaderboard-traget-board p-0 mb-3 leaderboard-traget-board-new">
            @if($userScore->target_path)
                <img src="{{ Storage::url($userScore->target_path) }}" alt="" style="aspect-ratio:{{ @$userScore->challenge->selectedTarget->aspect_ratio ?? 'fit-content' }}">
            @else
                <img src="{{ Storage::url($challenge->selectedTarget->file_path) }}" alt="" style="aspect-ratio:{{ @$userScore->challenge->selectedTarget->aspect_ratio ?? 'fit-content' }}">
            @endif
            <img src="{{ asset('images/official-target-badge.png') }}" alt=""
            class="leaderboard-traget-top-badge">
        </div>
    </div>
</section>

{{-- challenge details  --}}
@include('include.leaderboard.event-challenge-details' ,['collection' => $challenge ])

@endsection

@push('scripts')
    <script>
        jQuery(document).ready(function(){
                //show official rules
                jQuery('.show-challenge-rules').click(function(){
                    let pdfUrl = "{{$challenge->challenge_rules_url ? $challenge->challenge_rules_url : '#' }}"

                    jQuery('#title').text('Challenge official rules')
                    // jQuery('#pdf-preview').attr('src' , pdfUrl + '#toolbar=0&navpanes=0')
                    previewPdf(pdfUrl , jQuery('#pdf-preview'))
                    jQuery('#pdf-preview-modal').modal('show');
                });
        });
    </script>
@endpush