@extends('layouts.app')

@section('title', 'Notifikasi')

@section('content')
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl sm:text-3xl font-bold text-slate-800">Notifikasi</h1>
        @if($notifikasi->total() > 0)
            <form method="POST" action="{{ route('notifikasi.baca-semua') }}">
                @csrf
                <button type="submit" class="text-sm font-semibold text-red-600 hover:text-red-700">Tandai semua dibaca</button>
            </form>
        @endif
    </div>

    <div class="space-y-3">
        @forelse($notifikasi as $n)
            <a href="{{ route('notifikasi.buka', $n->id) }}"
               class="block bg-white rounded-xl shadow-sm border p-5 hover:shadow-md transition-all {{ $n->read_at ? 'border-slate-100' : 'border-red-200 bg-red-50/30' }}">
                <div class="flex items-start gap-3">
                    <div class="w-9 h-9 rounded-full shrink-0 flex items-center justify-center
                        @if($n->tipe === 'rdp') bg-red-600 text-white
                        @elseif($n->tipe === 'tanggapan_resmi') bg-emerald-50 text-emerald-600
                        @elseif($n->tipe === 'status_aspirasi') bg-amber-50 text-amber-600
                        @else bg-slate-100 text-slate-500
                        @endif">
                        @if($n->tipe === 'rdp')
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                        @elseif($n->tipe === 'tanggapan_resmi')
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                        @elseif($n->tipe === 'status_aspirasi')
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        @else
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                        @endif
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2">
                            <p class="text-sm font-semibold text-slate-800">{{ $n->judul }}</p>
                            @unless($n->read_at)
                                <span class="w-2 h-2 rounded-full bg-red-500 shrink-0"></span>
                            @endunless
                        </div>
                        <p class="text-sm text-slate-500 mt-0.5">{{ $n->pesan }}</p>
                        <p class="text-xs text-slate-400 mt-1">{{ $n->created_at->diffForHumans() }}</p>
                    </div>
                </div>
            </a>
        @empty
            <div class="bg-white rounded-2xl border border-slate-100 p-12 text-center">
                <div class="w-16 h-16 rounded-full bg-slate-100 mx-auto mb-4 flex items-center justify-center">
                    <svg class="w-8 h-8 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                </div>
                <p class="text-slate-500">Belum ada notifikasi.</p>
                <p class="text-sm text-slate-400 mt-1">Anda akan diberi tahu saat aspirasi Anda berubah status, mendapat tanggapan, atau mencapai ambang batas RDP.</p>
            </div>
        @endforelse
    </div>

    @if($notifikasi->hasPages())
        <div class="mt-8">
            {{ $notifikasi->links() }}
        </div>
    @endif
</div>
@endsection