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

@section('back_button')
    @php
        if(!isset(request()->for)){
            $for = false;
        } else{
            $for = request()->for;
        }
    @endphp
    
    @if($for && $for == 'old-challenge' )
        <a href="{{ route('guest.leaderboard.user.performance', ['userScore' => $userScore->id ,  'for' => $for , 'division_type' => request()->division_type ]) }}"
            class="back-btn-back">
            <i class="fa-solid fa-chevron-left"></i>
        </a>
    @else
        <a href="@if (checkEventInstance($collection))
                        {{ route('member.leaderboard.event.user.score', ['userScore' => $userScore->id , 'token' => request()->token , 'division_type' => request()->division_type  ]) }}
                 @else
                        {{ route('guest.leaderboard.challenge.user.score', ['userScore' => $userScore->id, 'token' => request()->token , 'division_type' => request()->division_type , 'leaderboard' => request()->leaderboard ]) }}
                 @endif"
            class="back-btn-back">
            <i class="fa-solid fa-chevron-left"></i>
        </a>
    @endif
@endsection

@section('content')
    {{-- <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">
                        <div class="live-badge">${{ $collection->event_fee ?? ''}} </div> <img src="{{ asset('images/chall-binner.svg')}}" width="15" height="15" alt="">
                        <h3>Host code:</h3>
                        <span>{{ $collection->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>{{\Carbon\Carbon::parse($collection->start_date)->format('F j, Y') }} to {{ \Carbon\Carbon::parse($collection->end_date)->format('F j, Y')
                        }}</p>
                    </div>
                </div>
            </label>
            <div class="customPistol-div">
                <h5>{{$userScore->divisions->code}}-{{$userScore->divisions->name}}</h5>
            </div>
        </div>
    </div>
</section> --}}
    @include('include.leaderboard.event-header', ['collection' => $collection, 'score' => $userScore])
    <section class="comments-round-list-sec">
        <div class="leaderboard-round-list">
            <div class="lb-round-list-main">
                <div class="lb-round-list-box">
                    <div class="lb-round-list-inner comments-tabs">
                        <nav>
                            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                <button class="nav-link active" id="nav-top-tab" data-bs-toggle="tab"
                                    data-bs-target="#nav-top" type="button" role="tab" aria-controls="nav-top"
                                    aria-selected="true">TOP</button>
                                <button class="nav-link" id="nav-newest-tab" data-bs-toggle="tab"
                                    data-bs-target="#nav-newest" type="button" role="tab" aria-controls="nav-newest"
                                    aria-selected="false">NEWEST</button>
                            </div>
                        </nav>
                    </div>
                </div>
                <img src="{{ asset('images/comment-badge.svg') }}" alt="" class="leaderboard-round-list-badge">
            </div>
        </div>

        <div class="comments-list-inner-tabs">
            @forelse($comments as $comment)
                <div class="comments-list-innerColumn " >
                    <div class="lb-round-list-inner">
                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade active show" id="nav-top" role="tabpanel"
                                aria-labelledby="nav-top-tab">
                                <div class="comments-list-box">
                                    <div class="comment-content-box">
                                        <div class="comment-avtar">
                                            <img src="{{ showProfileImage($comment->commentedByUser) }}"
                                                width="44" height="44" alt="">
                                        </div>
                                        <div class="comment-content">
                                            <h4 class="reported-on">{{ '@' . $comment->commentedByUser->username ?? '' }}
                                            </h4>
                                            <p>{{ $comment->comment }}</p>
                                        </div>
                                    </div>
                                    <div class="comment-dd"> <a href="#" class="report-comment" commentby="{{ $comment->commentedByUser->username }}" data-id="{{ $comment->id }}"><img
                                                src="{{ asset('images/dotted-icon.svg') }}" width="20"
                                                height="20"></a>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="nav-newest" role="tabpanel" aria-labelledby="nav-newest-tab">
                                <div class="comments-list-box">
                                    <div class="comment-content-box">
                                        <div class="comment-avtar">
                                            <img src="{{ showProfileImage($comment->commentedByUser) }}"
                                                width="44" height="44" alt="">
                                        </div>
                                        <div class="comment-content">
                                            <h4 class="reported-on">{{ '@' . $comment->commentedByUser->username ?? '' }}
                                            </h4>
                                            <p>{{ $comment->comment }}</p>
                                        </div>
                                    </div>
                                    <div class="comment-dd">
                                        <a href="#" class="report-comment" data-id="{{ $comment->id }}"><img
                                                src="{{ asset('images/dotted-icon.svg') }}" width="20"
                                                height="20"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <center>
                    <p>No comments found</p>
                </center>
            @endforelse

        </div>
        @auth
            <div class="write-comment">
                <div class="write-comment-inner d-flex justify-content-between align-items-center">
                    <form
                        action="{{ route('member.comment.store', ['type' => $type, 'userId' => jsencode_userdata($user->id), 'collectionId' => jsencode_userdata($collection->id)  , 'divisionId' => $division->id , 'division_type' => request()->division_type  , 'token' => request()->token]) }}"
                        method="post">
                        @csrf
                        <div class="w-100">
                            <img src="{{ showProfileImage(auth()->user())}}"
                                width="44" height="44">
                            <input id="comment" type="text" placeholder="Add a comment..." name="comment">
                        </div>
                        <button id="commentButton" class="d-none"> <img src="{{ asset('images/send-coment.svg') }}"
                                width="18" height="18"></button>
                    </form>
                </div>
            </div>
        @endauth

        </div>
    </section>



    {{-- reporting comment modal --}}
    <div class="modal fade error-alert-modal report-popup-modal" id="report-comment-modal" tabindex="-1" data-bs-backdrop="static"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body modal-custm-body">
                    <a href="#" class="modal-cross" data-bs-dismiss="modal" aria-label="Close"><img src="/images/cross-icon.svg" alt=""></a>
                    {{-- <div type='button' data-bs-toggle="modal">close</div> --}}
                    <form id='commentReportForm'>
                        <div class="comman-modal-box">
                            <h3>Comment Reporting </h3>
                            <div class="form-group">
                                <label for="">Reported on</label>
                                <div class="formfileld">
                                    <input type='text' class="form-control" name="reported_on">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="">Reported by</label>
                                <div class="formfileld">
                                    <input type='text' class="form-control" name="reported_by">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="">Reason</label>
                                <div class="formfileld">
                                    <input type='text' class="form-control" name="reason">
                                </div>
                            </div>
                        </div>
                        <button id='commentReportSubmit' class='button primary-btn float-end'>Report</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        jQuery(document).ready(function() {
            jQuery('#comment').on('input', function() {
                var textLength = jQuery('#comment').val().length;
                if (textLength > 0) {
                    jQuery('#commentButton').removeClass('d-none');
                } else {
                    jQuery('#commentButton').addClass('d-none');
                }
            });


            // Report comment
            jQuery('.report-comment').click(function(e) {
                let clickedElement = jQuery(this);
                let parentDiv = jQuery(this).closest('.comments-list-innerColumn');
                let commentId = clickedElement.attr('data-id');
                let url = "{{ route('member.comment.report', ['comment' => 'commentId']) }}".replace(
                    'commentId', commentId);

                // report button html
                let html = `<div class='report-comment-outer'>
                                <div>
                                        <img src="{{ asset('images/brown-flag-icon.svg')}}" alt="">
                                    Comment
                                </div>
                                <button type="button" class='button primary-btn report-button report-button-${commentId}' data-toggle="modal" data-target="#report-comment-modal">Report</button>
                            </div>`;


                //remove comment button

                //toggle report html
                if (parentDiv.find('.report-comment-outer').length > 0) {
                    jQuery('.report-comment-outer').remove();
                    return;
                }

                if (jQuery('.report-comment').find('.report-comment-outer').length > 0) {
                    jQuery('.report-comment-outer').remove();
                    jQuery(html).insertAfter(parentDiv.children().first());
                    return;
                }

                //append button html after comment
                jQuery(html).insertAfter(parentDiv.children().first());

                //report comment into database
                jQuery(document).off('click').on('click', ".report-button-" + commentId, function() {

                    let reportedOn = '@' + clickedElement.attr('commentby');
                    let reportedBy = '@'+"{{ auth()->user()->username ?? 'guest' }}";

                    jQuery('input[name="reported_on"]').val(reportedOn);
                    jQuery('input[name="reported_by"]').val(reportedBy);
                    jQuery('input[name="reason"]').val(' ');

                    //show reporting modal
                    jQuery('#report-comment-modal').modal('show')

                    //submit report reason
                    jQuery(document).off('submit').on('submit', "#commentReportForm", function(e) {
                        e.preventDefault();
                        let formData = new FormData(jQuery('#commentReportForm')[0]);
                        let response = ajaxCall(url, 'post', formData)
                        response.then((responseData) => {
                            if(responseData.status){
                                //hide modal
                                jQuery('#report-comment-modal').modal('hide');

                                //show message modal
                                errorShow('Success' , responseData.message , 'Ok');
                            }else{
                                errorShow('Error' , responseData.message , 'Try again later');
                            }
                        })
                    });

                })
            })
        });
    </script>
@endpush