@section('title', __('site.page_messages_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_4')],
    ];

    $abas = [
        ['type' => null, 'label' => __('site.page_messages_item_1'), 'count' => $countAll],
        ['type' => 'pending', 'label' => __('site.page_messages_item_2'), 'count' => $countPend],
        ['type' => 'approved', 'label' => __('site.page_messages_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_messages_h1') }}</h1>
            <p class="page-sub">{{ __('site.page_messages_sub') }}</p>
        </div>

        @if($allMessages->count() > 0)
            <div class="page-head__acts">
                <a class="btn btn--ghost"
                   href="{{ route('site.messages.exportCsv', array_merge(['type' => request()->route('type')], request()->query())) }}">
                    <i class="fa-solid fa-file-csv"></i> {{ __('site.page_messages_export') }}
                </a>
            </div>
        @endif
    </header>

    <div class="ltabs inbox__tabs">
        @foreach($abas as $aba)
            <a class="ltab {{ $atual === $aba['type'] ? 'is-on' : '' }}"
               href="{{ $aba['type'] ? route('site.messages.r', $aba['type']) : route('site.messages.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($allMessages->count() == 0)
        <div class="inbox__empty">
            <i class="fa-solid fa-envelope-open"></i>
            <p>{{ __('site.page_messages_norec') }}</p>
        </div>
    @else
        <div class="inbox" data-remove-url="{{ route('site.messages.d') }}"
             data-approve-url="{{ route('site.messages.u') }}"
             data-reply-url="{{ route('site.messages.reply') }}"
             data-reply-remove-url="{{ route('site.messages.reply.d') }}">

            @foreach($allMessages as $message)
                @php $resposta = $replies[$message->id] ?? null; @endphp

                <article class="card {{ $message->status == '1' ? 'is-approved' : 'is-pending' }}" id="mes-{{ $message->id }}">
                    <header class="card__head">
                        <div class="card__who">
                            <span class="card__avatar">{{ mb_strtoupper(mb_substr($message->name, 0, 1)) }}</span>
                            <div>
                                <h2 class="card__name">
                                    {{ $message->name }}
                                    <span class="card__tag">{{ __($message->status == '1' ? 'site.page_messages_tag_approved' : 'site.page_messages_tag_pending') }}</span>
                                </h2>
                                <p class="card__meta">
                                    @if($message->city)<span>{{ $message->city }}@if($message->state) - {{ $message->state }}@endif</span>@endif
                                    @if($message->email)<span>{{ $message->email }}</span>@endif
                                    <span>{{ DateShort($message->created_at) }}</span>
                                    <span class="card__ip">IP {{ $message->ip }}</span>
                                </p>
                            </div>
                        </div>

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

                            @if($repliesOn)
                                {{-- a resposta sai no site junto do recado: so depois de aprovado --}}
                                <button class="btn btn--ghost btn--sm card__reply" type="button" data-id="{{ $message->id }}"
                                        @if($message->status != '1') hidden @endif>
                                    <i class="fa-solid fa-reply"></i> {{ $resposta ? __('site.page_messages_reply_edit') : __('site.page_messages_reply_btn') }}
                                </button>
                            @endif

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

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

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

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

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

                            <textarea class="input replyform__text" id="reply-{{ $message->id }}" rows="3"
                                      maxlength="{{ $replyMax }}"
                                      placeholder="{{ __('site.page_messages_reply_place') }}">{{ $resposta->reply ?? '' }}</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="{{ $message->id }}">
                                        @include('includes.spinner')
                                        <span class="btn__label">{{ __('site.action_save') }}</span>
                                    </button>
                                </span>
                            </div>
                        </form>
                    @endif
                </article>
            @endforeach
        </div>

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

    @unless($repliesOn)
        <p class="inbox__note">
            <i class="fa-solid fa-circle-info"></i> {{ __('site.page_messages_reply_off') }}
        </p>
    @endunless

</main>

@section('scripts')
    <script>
        window.INBOX = {
            replyMax: {{ (int) $replyMax }},
            txt: {
                removeAsk: @json(__('site.page_messages_alert_title')),
                removeDo: @json(__('site.btn_remove')),
                removeError: @json(__('site.page_inbox_remove_error')),
                approveError: @json(__('site.page_messages_approve_error')),
                replyBtn: @json(__('site.page_messages_reply_btn')),
                replyEdit: @json(__('site.page_messages_reply_edit')),
                replyBy: @json(__('site.page_messages_reply_by', ['name' => '%name%'])),
                replyEmpty: @json(__('site.page_messages_reply_empty')),
                replyError: @json(__('site.page_messages_reply_error')),
                replyLeft: @json(__('site.page_messages_reply_left', ['n' => '%n%'])),
                replyDropAsk: @json(__('site.page_messages_reply_drop_ask')),
                replyDropDo: @json(__('site.page_messages_reply_remove')),
                approved: @json(__('site.page_messages_tag_approved'))
            }
        };
    </script>
    <script src="{{ assetv('/assets/js/site-inbox.js') }}"></script>
@endsection

@include('includes/footer-novo')