<!doctype html>
<html lang="ms">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Admin – Laporan Data</title>
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
    <style>
        body{ margin:0; font-family:Figtree,sans-serif; background:radial-gradient(circle at top,#1d4ed8,#020617); color:#e5e7eb; }
        .wrap{ min-height:100vh; padding:22px 18px 26px; display:flex; justify-content:center; }
        .card{ width:100%; max-width:900px; background:rgba(15,23,42,.96); border-radius:22px; border:1px solid rgba(148,163,184,.4); box-shadow:0 24px 80px rgba(15,23,42,1); padding:20px 24px; }
        h1{ margin:0 0 4px; font-size:20px; }
        .subtitle{ margin:0 0 18px; font-size:13px; color:#9ca3af; }
        .status{ margin-bottom:10px; font-size:12px; color:#bbf7d0; }
        .badge{ display:inline-flex; padding:2px 8px; border-radius:999px; font-size:11px; }
        .badge-baru{ background:rgba(59,130,246,.3); color:#93c5fd; }
        .badge-dibaca{ background:rgba(148,163,184,.3); color:#cbd5e1; }
        .badge-selesai{ background:rgba(34,197,94,.3); color:#86efac; }
        .report-item{ border:1px solid rgba(55,65,81,.9); border-radius:12px; padding:14px 16px; margin-bottom:12px; background:rgba(15,23,42,.6); }
        .report-meta{ font-size:12px; color:#9ca3af; margin-bottom:8px; }
        .report-mesej{ font-size:13px; line-height:1.5; white-space:pre-wrap; margin:8px 0 12px; }
        .report-actions{ display:flex; gap:8px; flex-wrap:wrap; }
        .report-actions form{ display:inline; }
        .link{ font-size:12px; color:#93c5fd; text-decoration:none; cursor:pointer; background:none; border:none; padding:4px 8px; }
        .link:hover{ text-decoration:underline; }
        .empty{ color:#9ca3af; padding:16px 0; }
        .filter{ margin-bottom:16px; }
        .filter a{ margin-right:10px; font-size:13px; color:#93c5fd; text-decoration:none; }
        .filter a.active{ font-weight:600; text-decoration:underline; }
    </style>
</head>
<body>
<div class="wrap">
    <div class="card">
        @include('admin.partials.nav')

        <h1>Laporan Data</h1>
        <p class="subtitle">Maklumat daripada pengguna melalui chatbot. @if($unreadCount > 0)<strong style="color:#fbbf24;">{{ $unreadCount }} belum dibaca</strong>@endif</p>

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

        <div class="filter">
            <a href="{{ route('admin.feedback.index') }}" class="{{ !request('status') ? 'active' : '' }}">Semua</a>
            <a href="{{ route('admin.feedback.index', ['status'=>'baru']) }}" class="{{ request('status') === 'baru' ? 'active' : '' }}">Baru</a>
            <a href="{{ route('admin.feedback.index', ['status'=>'dibaca']) }}" class="{{ request('status') === 'dibaca' ? 'active' : '' }}">Dibaca</a>
            <a href="{{ route('admin.feedback.index', ['status'=>'selesai']) }}" class="{{ request('status') === 'selesai' ? 'active' : '' }}">Selesai</a>
        </div>

        @forelse($reports as $r)
            <div class="report-item">
                <div class="report-meta">
                    {{ $r->nama ?: 'Tanpa nama' }} · {{ $r->emel ?: 'Tiada emel' }} · {{ $r->created_at->format('d/m/Y H:i') }}
                    <span class="badge badge-{{ $r->status }}">{{ $r->status }}</span>
                </div>
                @if($r->halaman_url)
                    <div class="report-meta">Halaman: {{ $r->halaman_url }}</div>
                @endif
                <div class="report-mesej">{{ $r->mesej }}</div>
                @if($r->status !== 'selesai')
                    <div class="report-actions">
                        @if($r->status === 'baru')
                            <form method="post" action="{{ route('admin.feedback.markRead', $r->id) }}">
                                @csrf
                                <button type="submit" class="link">Tandakan dibaca</button>
                            </form>
                        @endif
                        <form method="post" action="{{ route('admin.feedback.markResolved', $r->id) }}">
                            @csrf
                            <button type="submit" class="link">Tandakan selesai</button>
                        </form>
                    </div>
                @endif
            </div>
        @empty
            <div class="empty">Tiada laporan.</div>
        @endforelse

        <div style="margin-top:16px;">{{ $reports->withQueryString()->links() }}</div>
    </div>
</div>
</body>
</html>
