@extends('layouts.vpm-dashboard', ['active' => 'notifications', 'area' => 'admin'])

@section('title', 'Notifications')

@section('content')
<div class="vpm-page vpm-admin-notifications-page">
    <x-vpm.page-intro
        title="Notifications"
        description="Configure email alerts when clients take action, send in-app notifications, and review past announcements."
    />

    <x-vpm.admin-email-alerts-form
        :action="route('admin.notifications.email-alerts')"
        :fields="$emailAlertFields"
        :values="$emailAlertValues"
        :description="$emailAlertDescription"
    />

    <section class="vpm-panel" style="margin-top:24px;">
        <div class="vpm-panel__head">
            <h2 class="vpm-panel__title">In-app notifications</h2>
        </div>

        <button
            type="button"
            class="vpm-btn vpm-btn--primary vpm-admin-notifications-page__send"
            data-vpm-dialog-open="send-notification-dialog"
        >
            Send notification
        </button>

        @if ($notifications->isEmpty())
            <p class="vpm-admin-notifications-empty">You have no notifications yet</p>
        @else
            <ul class="vpm-admin-notifications__list">
                @foreach ($notifications as $notification)
                    <li class="vpm-admin-notification-item">
                        <div class="vpm-admin-notification-item__body">
                            <h3 class="vpm-admin-notification-item__title">{{ $notification->title }}</h3>
                            <p class="vpm-admin-notification-item__message">{{ $notification->body }}</p>
                            <p class="vpm-admin-notification-item__meta">
                                {{ $notification->audienceLabel() }}
                                · {{ $notification->created_at->format('D, d M Y H:i') }}
                            </p>
                        </div>
                    </li>
                @endforeach
            </ul>
        @endif
    </section>
</div>

<x-vpm.admin-send-notification-dialog :clients="$clients" />

@if ($errors->any() && old('_notification') === 'send')
    @push('scripts')
        <script>document.body.dataset.vpmReopenDialog = 'send-notification-dialog';</script>
    @endpush
@endif
@endsection