@extends('layouts.app')
@section('title', 'Notifikasi')
@section('content')
    <div class="mb-6">
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Notifikasi Siswa</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Daftar notifikasi akun Anda.</p>
    </div>

    <div class="bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
        <x-data-table>
            <x-slot:heading>
                <th class="px-4 py-3">Waktu</th>
                <th class="px-4 py-3">Judul</th>
                <th class="px-4 py-3">Pesan</th>
                <th class="px-4 py-3">Kategori</th>
            </x-slot:heading>
            <x-slot:body>
                @forelse($notifications as $notification)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400">
                            {{ $notification->created_at?->format('d M Y H:i') }}
                        </td>
                        <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">
                            {{ $notification->data['title'] ?? 'Notifikasi' }}
                        </td>
                        <td class="px-4 py-3 text-xs text-gray-600 dark:text-gray-300">
                            {{ $notification->data['message'] ?? '-' }}
                        </td>
                        <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400">
                            {{ $notification->data['category'] ?? '-' }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="px-4 py-8 text-center text-gray-400">Belum ada notifikasi.</td>
                    </tr>
                @endforelse
            </x-slot:body>
            @if (method_exists($notifications, 'hasPages') && $notifications->hasPages())
                <x-slot:pagination>{{ $notifications->links() }}</x-slot:pagination>
            @endif
        </x-data-table>
    </div>
@endsection