@extends('layouts.admin')

@section('title', 'Notification Center')
@section('page-title', 'Notification Center')

@section('content')
<div class="row mb-4">
    <div class="col-md-6">
        <p class="text-muted">Operations / Notifications</p>
    </div>
    <div class="col-md-6 text-md-end">
        <a href="{{ route('admin.notifications.create') }}" class="btn btn-primary rounded-3 px-4">
            <i class="bi bi-chat-right-text-fill me-1"></i> Send Announcement
        </a>
    </div>
</div>

<div class="admin-card">
    <div class="table-responsive">
        <table class="table align-middle hover-table mb-0">
            <thead>
                <tr class="text-muted small" style="border-bottom: 2px solid var(--border-color);">
                    <th class="py-3">Details</th>
                    <th class="py-3">Category</th>
                    <th class="py-3">Target Audience</th>
                    <th class="py-3">Scheduled At</th>
                    <th class="py-3 text-center">Delivery Logs</th>
                    <th class="py-3 text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($notifications as $notif)
                    <tr style="border-bottom: 1px solid var(--border-color);">
                        <td class="py-3">
                            <span class="fw-semibold text-dark d-block mb-1">{{ $notif->title }}</span>
                            <small class="text-muted d-block text-wrap" style="max-width: 320px;">{{ Str::limit($notif->description, 100) }}</small>
                            @if($notif->attachment_path)
                                <span class="small text-danger d-inline-block mt-1"><i class="bi bi-file-earmark-pdf"></i> Attachment Uploaded</span>
                            @endif
                        </td>
                        <td class="py-3">
                            <span class="kids-badge badge-{{ strtolower($notif->category) == 'emergency' ? 'danger-accent' : (strtolower($notif->category) == 'ptm' ? 'warning-accent' : 'info-accent') }}">
                                {{ $notif->category }}
                            </span>
                        </td>
                        <td class="py-3 text-secondary">
                            <span class="text-uppercase small fw-bold">{{ $notif->target_type }}</span>
                        </td>
                        <td class="py-3 text-secondary">
                            {{ $notif->scheduled_at ? \Carbon\Carbon::parse($notif->scheduled_at)->format('d M Y - h:i A') : 'Immediate' }}
                        </td>
                        <td class="py-3 text-center">
                            <a href="{{ route('admin.notifications.logs', $notif->id) }}" class="btn btn-sm btn-light border fw-semibold rounded-3 text-primary">
                                <i class="bi bi-journal-text me-1"></i> View Logs
                            </a>
                        </td>
                        <td class="py-3">
                            <div class="d-flex justify-content-end align-items-center gap-2">
                                <a href="{{ route('admin.notifications.edit', $notif->id) }}" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-pencil-fill"></i>
                                </a>
                                <form action="{{ route('admin.notifications.destroy', $notif->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this notification and clear all delivery logs?');" class="m-0">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger">
                                        <i class="bi bi-trash-fill"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center py-4 text-muted">No announcements posted. Click "Send Announcement" to create one.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection