@section('title', __('site.page_comments_title'))

@section('head')
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/siteconfig.css') }}">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/siteinbox.css') }}">
@endsection

@php
    $breadcrumb = [
        ['label' => __('site.menu_item_5')],
        ['label' => __('site.menu_item_5_sub_5')],
    ];

    $abas = [
        ['type' => null, 'label' => __('site.page_comments_item_1'), 'count' => $countAll],
        ['type' => 'pending', 'label' => __('site.page_comments_item_2'), 'count' => $countPend],
        ['type' => 'approved', 'label' => __('site.page_comments_item_3'), 'count' => $countAppr],
    ];

    $atual = $type === 'all' ? null : $type;
@endphp

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

    @include('includes.flash')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ __('site.page_comments_h1') }}</h1>
            <p class="page-sub">{{ __('site.page_comments_sub') }}</p>
        </div>
    </header>

    <div class="ltabs inbox__tabs">
        @foreach($abas as $aba)
            <a class="ltab {{ $atual === $aba['type'] ? 'is-on' : '' }}"
               href="{{ $aba['type'] ? route('site.comments.r', $aba['type']) : route('site.comments.r') }}">
                {{ $aba['label'] }} <span class="ltab__count">{{ $aba['count'] }}</span>
            </a>
        @endforeach
    </div>

    @if($apiError)
        <div class="apierr">
            <span class="apierr__ico"><i class="fa-solid fa-plug-circle-xmark"></i></span>
            <p class="apierr__text">{{ $apiError }}</p>
        </div>
    @elseif($allComments->count() == 0)
        <div class="inbox__empty">
            <i class="fa-solid fa-comment-dots"></i>
            <p>{{ __('site.page_comments_norec') }}</p>
        </div>
    @else
        <div class="inbox" data-remove-url="{{ route('site.comments.d') }}"
             data-approve-url="{{ route('site.comments.u') }}"
             data-reply-url="{{ route('site.comments.c') }}"
             data-reply-remove-url="{{ route('site.comments.d.reply') }}">

            @foreach($allComments as $comment)
                @php
                    $resposta = $replies[$comment->id] ?? null;
                    $post = $comment->source === 'post' ? ($posts[$comment->source_id] ?? null) : null;
                @endphp

                <article class="card {{ $comment->status == '1' ? 'is-approved' : 'is-pending' }}" id="com-{{ $comment->id }}">
                    <header class="card__head">
                        <div class="card__who">
                            <span class="card__avatar">{{ mb_strtoupper(mb_substr($comment->name, 0, 1)) }}</span>
                            <div>
                                <h2 class="card__name">
                                    {{ $comment->name }}
                                    <span class="card__tag">{{ __($comment->status == '1' ? 'site.page_comments_tag_approved' : 'site.page_comments_tag_pending') }}</span>
                                </h2>
                                <p class="card__meta">
                                    <span class="card__where">
                                        <i class="fa-solid fa-{{ $post ? 'newspaper' : 'link' }}"></i>
                                        @if($post)
                                            <a href="https://{{ $siteData->domain }}/post/{{ $post->id }}/{{ $post->slug }}"
                                               target="_blank" rel="noopener">{{ $post->title }}</a>
                                        @else
                                            {{ $comment->source }}
                                        @endif
                                    </span>
                                    <span>{{ DateShort($comment->created_at) }}</span>
                                    <span class="card__ip">IP {{ $comment->ip }}</span>
                                </p>
                            </div>
                        </div>

                        <div class="card__acts">
                            <button class="btn btn--primary btn--sm card__approve" type="button" data-id="{{ $comment->id }}"
                                    @if($comment->status == '1') hidden @endif>
                                <i class="fa-solid fa-check"></i> {{ __('site.btn_approve') }}
                            </button>

                            <button class="btn btn--ghost btn--sm card__reply" type="button" data-id="{{ $comment->id }}">
                                <i class="fa-solid fa-reply"></i> {{ $resposta ? __('site.page_comments_reply_edit') : __('site.page_comments_btn_answer') }}
                            </button>

                            <button class="btn btn--ghost btn--sm card__remove" type="button"
                                    data-id="{{ $comment->id }}" data-status="{{ $comment->status }}">
                                <i class="fa-solid fa-trash"></i> {{ __('site.btn_remove') }}
                            </button>
                        </div>
                    </header>

                    <p class="card__text">{{ $comment->message }}</p>

                    <div class="reply" @if(! $resposta) hidden @endif>
                        <div class="reply__head">
                            <span class="reply__by">
                                <i class="fa-solid fa-reply"></i>
                                {{ __('site.page_comments_reply_by', ['name' => $resposta->admin_name ?? '']) }}
                            </span>
                            <span class="reply__when">{{ $resposta ? DateShort($resposta->created_at) : '' }}</span>
                            <button class="reply__drop" type="button" data-id="{{ $comment->id }}">
                                <i class="fa-solid fa-trash"></i> {{ __('site.page_comments_reply_remove') }}
                            </button>
                        </div>

                        <p class="reply__text">{{ $resposta->message ?? '' }}</p>
                    </div>

                    <form class="replyform" hidden>
                        <label class="replyform__label" for="reply-{{ $comment->id }}">{{ __('site.page_comments_reply_label') }}</label>

                        <textarea class="input replyform__text" id="reply-{{ $comment->id }}" rows="3"
                                  maxlength="{{ $replyMax }}"
                                  placeholder="{{ __('site.page_comments_reply_place') }}">{{ $resposta->message ?? '' }}</textarea>

                        <p class="replyform__error" hidden></p>

                        <div class="replyform__foot">
                            <span class="replyform__left" data-max="{{ $replyMax }}"></span>

                            <span class="replyform__acts">
                                <button class="btn btn--ghost btn--sm replyform__cancel" type="button">{{ __('site.btn_cancel') }}</button>
                                <button class="btn btn--primary btn--sm replyform__save" type="submit" data-id="{{ $comment->id }}">
                                    @include('includes.spinner')
                                    <span class="btn__label">{{ __('site.action_save') }}</span>
                                </button>
                            </span>
                        </div>
                    </form>
                </article>
            @endforeach
        </div>

        <div class="inbox__pages">{{ $allComments->links('vendor.pagination.painel') }}</div>
    @endif

</main>

@section('scripts')
    <script>
        window.INBOX = {
            replyMax: {{ (int) $replyMax }},
            txt: {
                removeAsk: @json(__('site.page_comments_alert_title')),
                removeDo: @json(__('site.btn_remove')),
                removeError: @json(__('site.page_inbox_remove_error')),
                approveError: @json(__('site.page_comments_approve_error')),
                replyBtn: @json(__('site.page_comments_btn_answer')),
                replyEdit: @json(__('site.page_comments_reply_edit')),
                replyBy: @json(__('site.page_comments_reply_by', ['name' => '%name%'])),
                replyEmpty: @json(__('site.page_comments_reply_empty')),
                replyError: @json(__('site.page_comments_reply_error')),
                replyLeft: @json(__('site.page_messages_reply_left', ['n' => '%n%'])),
                replyDropAsk: @json(__('site.page_comments_reply_drop_ask')),
                replyDropDo: @json(__('site.page_comments_reply_remove')),
                approved: @json(__('site.page_comments_tag_approved'))
            }
        };
    </script>
    <script src="{{ assetv('/assets/js/site-inbox.js') }}"></script>
@endsection

@include('includes/footer-novo')