@extends('layouts.dashboard')

@section('content')
@php
/**
 * Contact-form enquiries: read, answer, remove.
 *
 * @var array $messages  enquiry rows for this page
 * @var int   $unread    unanswered-or-unopened count across the whole list
 * @var array $pager     pagination metadata
 * @var array $replied   ids that already have an answer on record
 * @var bool  $canSend   whether outbound mail is configured
 */
$replied = $replied ?? [];
$canSend = $canSend ?? false;
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
<div class="qm-card">
    <div class="qm-ops-head">
        <div class="d-flex align-items-center gap-2">
            <h2 class="mb-0">{{ t_raw('admin.messages.list_heading') }}</h2>
            @if ($unread > 0)<span class="qm-pill qm-pill-amber">{{ t_raw('notif.unread_count', [':count' => (int) $unread]) }}</span>@endif
        </div>
    </div>
    @if ($messages && !$canSend)
    <p class="qm-hint"><i class="fas fa-info-circle me-1" aria-hidden="true"></i> {{ t_raw('admin.messages.mail_off_hint') }} <a href="{{ route('admin.settings') . '#email' }}">{{ t_raw('admin.messages.mail_off_link') }}</a></p>
    @endif
    @if ($messages)
    <div class="table-responsive">
    @php /* Subject cell also carries the free-text message body, and Received renders via
              fmt_datetime(), which Date.parse() can't read - both th's carry no data-sort. */
@endphp
    <table class="qm-table" data-sortable>
        <thead><tr><th data-sort="text">{{ t_raw('admin.messages.col_from') }}</th><th>{{ t_raw('admin.messages.col_subject') }}</th><th>{{ t_raw('admin.messages.col_received') }}</th><th class="text-end">{{ t_raw('common.actions') }}</th></tr></thead>
        <tbody>
            @foreach ($messages as $m)
@php $mid = (int) $m['id']; $hasReply = isset($replied[$mid]); @endphp
            <tr{!! ((int) $m['is_read'] === 0) ? ' class="qm-row-unread"' : '' !!}>
                <td>
                    <div class="qm-tbl-id">
                        {!! brandmark_html(null, (string) ($m['name'] ?? t_raw('admin.messages.fallback_sender_name')), 'md', 'qm-brandmark--round') !!}
                        <div class="qm-tbl-id-text">
                            <strong>{{ $m['name'] }}</strong>
                            @if (!empty($m['email']))<small><a href="mailto:{{ $m['email'] }}">{{ $m['email'] }}</a></small>@endif
                        </div>
                    </div>
                </td>
                <td class="qm-maxw-480">
                    @if (!empty($m['subject']))<div class="qm-fw-600">{{ $m['subject'] }}</div>@endif
                    <div class="qm-cell-body">{{ $m['message'] }}</div>
                    @if ($hasReply)<span class="qm-pill qm-pill-green mt-2"><i class="fas fa-reply me-1" aria-hidden="true"></i>{{ t_raw('admin.messages.badge_answered') }}</span>@endif
                </td>
                <td class="qm-cell-body qm-nowrap">{!! fmt_datetime($m['created_at']) !!}</td>
                <td class="qm-actions-cell">
                    @partial('row-actions', ['actions' => [
                        [
                            'label' => t_raw('admin.messages.action_reply'),
                            'icon'  => 'fa-reply',
                            'primary' => true,
                            'disabled' => !$canSend || empty($m['email']),
                            'attrs' => [
                                'data-bs-toggle' => 'modal',
                                'data-bs-target' => '#messageReplyModal',
                                'data-reply-open' => '1',
                                'data-id'      => (string) $mid,
                                'data-name'    => (string) ($m['name'] ?? ''),
                                'data-email'   => (string) ($m['email'] ?? ''),
                                'data-subject' => (string) ($m['subject'] ?? ''),
                                'data-message' => (string) $m['message'],
                            ],
                        ],
                        (int) $m['is_read'] === 0 ? [
                            'label' => t_raw('admin.messages.action_mark_read'),
                            'icon'  => 'fa-envelope-open',
                            'form'  => ['action' => '/admin/messages/read', 'fields' => ['id' => $mid]],
                        ] : null,
                        [
                            'label'  => t_raw('common.delete'),
                            'icon'   => 'fa-trash-alt',
                            'danger' => true,
                            'form'   => ['action' => '/admin/messages/delete', 'fields' => ['id' => $mid], 'confirm' => t_raw('admin.messages.confirm_delete')],
                        ],
                    ]])
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    </div>
    @partial('table-toolbar', ['pager' => $pager, 'base' => '/admin/messages'])
    @else
    <div class="qm-empty"><i class="fas fa-inbox d-block" aria-hidden="true"></i><p>{{ t_raw('admin.messages.empty') }}</p></div>
    @endif
</div>

@if ($messages && $canSend)
@php // Reply composer. The enquiry it answers is shown above the box, and repeated at the
      // foot of the sent email, so the sender never has to guess what is being answered.
@endphp
<div class="modal fade" id="messageReplyModal" tabindex="-1" aria-labelledby="messageReplyLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <form class="modal-content" method="post" action="{{ route('admin.messages.reply') }}">
            @csrf
            <input type="hidden" name="id" id="mr-id" value="">
            <div class="modal-header">
                <h2 class="modal-title h5" id="messageReplyLabel">{{ t_raw('admin.messages.reply_modal_title') }}</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t_raw('common.close') }}"></button>
            </div>
            <div class="modal-body">
                <p class="qm-hint">{{ t_raw('admin.messages.reply_to_label') }} <strong id="mr-to"></strong></p>
                <div class="qm-hint mb-3"><strong>{{ t_raw('admin.messages.reply_quote_heading') }}</strong><div class="qm-cell-body mt-1" id="mr-original"></div></div>
                <div class="mb-3">
                    <label class="form-label" for="mr-subject">{{ t_raw('admin.messages.reply_subject_label') }}</label>
                    <input type="text" class="form-control" id="mr-subject" name="subject" maxlength="200" placeholder="{{ t_raw('common.placeholder_subject') }}">
                </div>
                <div class="mb-0">
                    <label class="form-label" for="mr-body">{{ t_raw('admin.messages.reply_body_label') }}</label>
                    <textarea class="form-control" id="mr-body" name="body" rows="8" required placeholder="{{ t_raw('admin.messages.reply_body_placeholder') }}"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="qm-btn qm-btn-outline" data-bs-dismiss="modal">{{ t_raw('common.cancel') }}</button>
                <button type="submit" class="qm-btn"><i class="fas fa-paper-plane me-1" aria-hidden="true"></i> {{ t_raw('admin.messages.reply_send_btn') }}</button>
            </div>
        </form>
    </div>
</div>

<script>
/* Fill the composer from the row that opened it. */
(function () {
    document.addEventListener('click', function (e) {
        var btn = e.target.closest('[data-reply-open]');
        if (!btn) { return; }
        var get = function (k) { return btn.getAttribute('data-' + k) || ''; };
        document.getElementById('mr-id').value = get('id');
        document.getElementById('mr-to').textContent = get('name') + ' <' + get('email') + '>';
        document.getElementById('mr-original').textContent = get('message');
        var subject = get('subject');
        document.getElementById('mr-subject').value = subject ? {!! json_encode(t_raw('admin.messages.reply_subject_re', [':subject' => '@@']), JSON_UNESCAPED_UNICODE) !!}.replace('@@', subject) : '';
        document.getElementById('mr-body').value = '';
    });
})();
</script>
@endif

</div>@php /* /.qm-d2 */
@endphp
@endsection