@extends('layouts.app')
@section('title', 'Notifikasi')
@section('page-title', 'Notifikasi')

@section('content')
<style>
    .notification-page .notification-item {
        border: 1px solid #edf0f5;
        border-radius: 10px;
        padding: 14px 16px;
        background: #fff;
    }
    .notification-page .notification-item.unread {
        border-color: #fde68a;
        background: #fffbeb;
    }
    .notification-page .notification-message {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .notification-page .empty-state {
        border: 1px dashed #d8dde8;
        border-radius: 10px;
        padding: 28px 16px;
        background: #fafbff;
    }
    .notification-page .empty-state svg,
    .notification-page .empty-state img,
    .notification-page .pagination svg {
        max-width: 18px;
        width: 18px;
        height: 18px;
    }
</style>

<div class="card p-4 notification-page">
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
        <div>
            <h6 class="fw-bold mb-1">Daftar Notifikasi</h6>
            <div class="text-muted small">
                {{ $notifikasis->total() ? 'Menampilkan notifikasi terbaru Anda.' : 'Belum ada notifikasi untuk akun ini.' }}
            </div>
        </div>
        @if($notifikasis->total() > 0)
            <div class="d-flex flex-wrap gap-2">
                <form action="{{ route('notifikasi.read-all') }}" method="POST">
                    @csrf
                    <button class="btn btn-primary btn-sm">Tandai Semua Dibaca</button>
                </form>
                <form action="{{ route('notifikasi.destroy-all') }}" method="POST" onsubmit="return confirm('Hapus semua notifikasi Anda?')">
                    @csrf @method('DELETE')
                    <button class="btn btn-outline-danger btn-sm">Hapus Semua</button>
                </form>
            </div>
        @endif
    </div>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if($notifikasis->count() > 0)
        <div class="d-grid gap-3">
            @foreach($notifikasis as $notifikasi)
                @php
                    $unread = $notifikasi->status === 'belum';
                    $statusLabel = $unread ? 'Belum dibaca' : 'Dibaca';
                @endphp
                <div class="notification-item {{ $unread ? 'unread' : '' }}">
                    <div class="d-flex flex-column flex-md-row justify-content-between gap-3">
                        <a href="{{ route('notifikasi.read', $notifikasi->id) }}" class="text-decoration-none text-dark flex-grow-1">
                            <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
                                <div class="fw-bold notification-message">{{ $notifikasi->judul ?: 'Notifikasi' }}</div>
                                <span class="badge bg-{{ $unread ? 'warning text-dark' : 'secondary' }}">{{ $statusLabel }}</span>
                            </div>
                            <div class="text-muted small notification-message">{{ $notifikasi->pesan ?: '-' }}</div>
                            <div class="text-muted small mt-2">
                                {{ optional($notifikasi->created_at)->timezone(config('app.timezone'))->format('d/m/Y H:i') }}
                            </div>
                        </a>
                        <div class="text-md-end">
                            <form action="{{ route('notifikasi.destroy', $notifikasi->id) }}" method="POST" onsubmit="return confirm('Hapus notifikasi ini?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger">Hapus</button>
                            </form>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="mt-4">
            {{ $notifikasis->links('pagination::bootstrap-5') }}
        </div>
    @else
        <div class="empty-state text-center text-muted">
            Belum ada notifikasi.
        </div>
    @endif
</div>
@endsection