@extends('layouts.app')

@section('title', __('messaging::messages.outbox.title'))

@section('content')
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
        <div>
            <h1 class="px-title">{{ __('messaging::messages.outbox.title') }}</h1>
            <p class="px-subtitle">{{ __('messaging::messages.outbox.subtitle') }}</p>
        </div>
    </div>

    {{--
        Said plainly, before anything else on the page. A clinic that believes
        its reminders are reaching patients when they are being written to a log
        file is worse off than one that knows it has none.
    --}}
    @if ($liveChannels === [])
        <div class="px-advice px-advice--caution mb-4">
            <span class="fw-semibold">{{ __('messaging::messages.outbox.not_live_title') }}</span>
            <p class="small text-body-secondary mb-0 mt-1">{{ __('messaging::messages.outbox.not_live_text') }}</p>
        </div>
    @endif

    <div class="px-metrics mb-4">
        @foreach (['sent' => 'green', 'queued' => 'grey', 'failed' => 'red', 'suppressed' => 'amber'] as $key => $tone)
            <div class="px-metric">
                <span class="px-metric__label">{{ __('messaging::messages.outbox.tally.'.$key) }}</span>
                <span class="px-metric__value">{{ number_format($tally[$key]) }}</span>
            </div>
        @endforeach
    </div>

    <div class="px-panel p-3 p-md-4 mb-4">
        <form method="GET" action="{{ route('messaging.outbox.index') }}" data-clinic-filter class="row g-3 align-items-end">
            <div class="col-12 col-md-6 col-xl-4">
                <label for="search" class="px-field-label">{{ __('common.search') }}</label>
                <div class="px-search">
                    <i class="bi bi-search" aria-hidden="true"></i>
                    <input type="search" id="search" name="search" class="form-control px-input"
                           value="{{ $filters['search'] }}"
                           placeholder="{{ __('messaging::messages.outbox.search_placeholder') }}">
                </div>
            </div>

            <div class="col-6 col-md-3 col-xl-2">
                <label for="status" class="px-field-label">{{ __('common.status') }}</label>
                <select id="status" name="status" class="form-select px-select">
                    <option value="">{{ __('common.all') }}</option>
                    @foreach ($statuses as $value => $label)
                        <option value="{{ $value }}" @selected($filters['status'] === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-6 col-md-3 col-xl-2">
                <label for="channel" class="px-field-label">{{ __('messaging::messages.outbox.channel') }}</label>
                <select id="channel" name="channel" class="form-select px-select">
                    <option value="">{{ __('common.all') }}</option>
                    @foreach ($channels as $value => $label)
                        <option value="{{ $value }}" @selected($filters['channel'] === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        </form>
    </div>

    <x-results>
        <div class="px-panel overflow-hidden">
            @if ($messages->isEmpty())
                <div class="px-empty">
                    <div class="px-empty__art" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                             stroke-linecap="round" stroke-linejoin="round">
                            <path d="m3 11 18-8-8 18-2-7-8-3Z" />
                        </svg>
                    </div>

                    <p class="px-empty__title">{{ __('messaging::messages.outbox.empty_title') }}</p>
                    <p class="px-empty__text">{{ __('messaging::messages.outbox.empty_text') }}</p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table px-table px-table--cards align-middle">
                        <thead>
                            <tr>
                                <th scope="col">{{ __('messaging::messages.outbox.recipient') }}</th>
                                <th scope="col">{{ __('messaging::messages.outbox.message') }}</th>
                                <th scope="col">{{ __('messaging::messages.outbox.channel') }}</th>
                                <th scope="col">{{ __('common.status') }}</th>
                                <th scope="col">{{ __('messaging::messages.outbox.when') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($messages as $message)
                                @php($patient = $patients[$message->patient_id] ?? null)

                                <tr>
                                    <td data-label="{{ __('messaging::messages.outbox.recipient') }}">
                                        <span class="fw-semibold d-block">
                                            {{ $patient?->name ?? __('messaging::messages.outbox.no_patient') }}
                                        </span>
                                        {{-- Enough to confirm the right number, not enough to
                                             be a contact list on a shared screen. --}}
                                        <span class="px-hint font-monospace">{{ $message->maskedNumber() }}</span>
                                    </td>

                                    <td data-label="{{ __('messaging::messages.outbox.message') }}">
                                        <span class="small d-block">{{ Str::limit($message->body, 90) }}</span>
                                        <span class="px-hint">{{ $message->template_key }}</span>
                                    </td>

                                    <td data-label="{{ __('messaging::messages.outbox.channel') }}">
                                        <span class="px-pill px-pill--grey">
                                            <i class="{{ $message->channel->icon() }}" aria-hidden="true"></i>
                                            {{ $message->channel->label() }}
                                        </span>
                                    </td>

                                    <td data-label="{{ __('common.status') }}">
                                        <span class="px-pill {{ $message->status->pill() }}">
                                            <span class="px-dot" aria-hidden="true"></span>
                                            {{ $message->status->label() }}
                                        </span>

                                        {{-- The reason a message was not sent is the answer
                                             somebody actually came to this screen for. --}}
                                        @if ($message->suppression_reason)
                                            <span class="px-hint">{{ $message->suppression_reason->label() }}</span>
                                        @elseif ($message->error)
                                            <span class="px-hint">{{ Str::limit($message->error, 70) }}</span>
                                        @endif
                                    </td>

                                    <td data-label="{{ __('messaging::messages.outbox.when') }}" class="small">
                                        {{ ($message->sent_at ?? $message->created_at)?->format('d M Y, H:i') }}
                                        @if ($message->attempts > 1)
                                            <span class="px-hint">
                                                {{ trans_choice('messaging::messages.outbox.attempts', $message->attempts, ['count' => $message->attempts]) }}
                                            </span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                @if ($messages->hasPages())
                    <div class="px-pagination d-flex justify-content-center justify-content-md-end px-3 px-md-4 py-3 border-top"
                         style="border-color: var(--px-border) !important;">
                        {{ $messages->links() }}
                    </div>
                @endif
            @endif
        </div>
    </x-results>
@endsection