@extends('layouts.user')

@section('title', 'Notifikasi')

@section('content')
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold">Notifikasi</h1>
    <form action="/user/notifications/read-all" method="POST">
        @csrf
        <button type="submit" class="text-blue-600 text-sm hover:underline">
            Tandai semua telah dibaca
        </button>
    </form>
</div>

<div class="bg-white rounded-lg shadow overflow-hidden">
    @forelse($notifications as $notif)
    <div class="p-4 border-b hover:bg-gray-50 transition {{ !$notif->is_read ? 'bg-blue-50' : '' }}">
        <div class="flex items-start justify-between">
            <div class="flex-1">
                <div class="flex items-center space-x-2 mb-1">
                    <h3 class="font-semibold">{{ $notif->title }}</h3>
                    @if(!$notif->is_read)
                    <span class="px-2 py-0.5 text-xs bg-blue-600 text-white rounded-full">Baru</span>
                    @endif
                </div>
                <p class="text-gray-600 text-sm mb-2">{{ $notif->message }}</p>
                <p class="text-xs text-gray-400">{{ $notif->created_at }}</p>
            </div>
            <div class="flex items-center space-x-2 ml-4">
                @if($notif->link)
                <a href="{{ $notif->link }}" class="text-blue-600 text-sm hover:underline">Lihat</a>
                @endif
                @if(!$notif->is_read)
                <form action="/user/notifications/read/{{ $notif->id }}" method="POST" class="inline">
                    @csrf
                    <button type="submit" class="text-gray-400 hover:text-gray-600 text-sm">Tandai dibaca</button>
                </form>
                @endif
            </div>
        </div>
    </div>
    @empty
    <div class="p-12 text-center">
        <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" 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"></path>
        </svg>
        <p class="text-gray-500">Tidak ada notifikasi</p>
    </div>
    @endforelse

    <div class="p-4">
        {{ $notifications->links() }}
    </div>
</div>
@endsection