@extends('layouts.app')

@section('title', 'Notifikasi')
@section('page-title', 'Notifikasi')

@section('content')

<!-- Tombol kembali -->
<div class="mb-4">
    <a href="{{ route('dashboard') }}"
       class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition"
       style="background:#f0fdf4;color:#2d6a4f;border:1.5px solid #b7ddc4;"
       onmouseover="this.style.background='#d8f3dc'" onmouseout="this.style.background='#f0fdf4'">
        <i class="fas fa-arrow-left text-xs"></i> Kembali ke Dashboard
    </a>
</div>

<div class="bg-white rounded-2xl border border-[#ede8df]" style="box-shadow:0 4px 16px rgba(26,58,42,.08);">

    <!-- Header -->
    <div class="flex items-center justify-between p-6" style="border-bottom:1px solid #ede8df;">
        <h3 class="text-lg font-bold" style="font-family:'Playfair Display',serif;color:#1a3a2a;">
            Semua Notifikasi
            @if($notifications->where('is_read', false)->count() > 0)
                <span class="ml-2 px-2 py-0.5 rounded-full text-xs font-bold text-white" style="background:#2d6a4f;">
                    {{ $notifications->where('is_read', false)->count() }} baru
                </span>
            @endif
        </h3>
        @if($notifications->count() > 0)
        <form method="POST" action="{{ route('notifications.destroyAll') }}">
            @csrf
            @method('DELETE')
            <button type="submit" class="text-sm px-4 py-2 rounded-xl border transition"
                style="color:#dc2626;border-color:#fca5a5;"
                onclick="return confirm('Hapus semua notifikasi?')">
                <i class="fas fa-trash-alt mr-1"></i> Hapus Semua
            </button>
        </form>
        @endif
    </div>

    <!-- List -->
    @if($notifications->count() === 0)
        <div class="text-center py-16">
            <i class="fas fa-bell-slash text-4xl mb-4" style="color:#c8d8cc;"></i>
            <p style="color:#8fa89a;">Belum ada notifikasi</p>
        </div>
    @else
        @foreach($notifications as $notif)
        <div class="flex items-start gap-4 p-5 transition hover:bg-[#f8f4ee]"
             style="border-bottom:1px solid #f0ece5;{{ !$notif->is_read ? 'background:#f0fdf4;' : '' }}">

            <!-- Icon -->
            <div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 mt-1"
                 style="background:{{
                    $notif->type === 'diagnosis' ? '#d8f3dc' :
                    ($notif->type === 'reminder' ? '#e0f0ff' : '#f0e8ff')
                 }}">
                <i class="fas {{
                    $notif->type === 'diagnosis' ? 'fa-stethoscope' :
                    ($notif->type === 'reminder' ? 'fa-bell' : 'fa-info-circle')
                }} text-sm" style="color:{{
                    $notif->type === 'diagnosis' ? '#2d6a4f' :
                    ($notif->type === 'reminder' ? '#2563eb' : '#7c3aed')
                }}"></i>
            </div>

            <!-- Content -->
            <div class="flex-1">
                <div class="flex items-center gap-2 mb-1">
                    <p class="font-semibold text-sm" style="color:#1a3a2a;">{{ $notif->title }}</p>
                    @if(!$notif->is_read)
                        <span class="w-2 h-2 rounded-full flex-shrink-0" style="background:#2d6a4f;"></span>
                    @endif
                </div>
                <p class="text-sm" style="color:#5a7a67;">{{ $notif->message }}</p>
                <p class="text-xs mt-1" style="color:#a0b4a8;">{{ $notif->created_at->diffForHumans() }}</p>
            </div>

            <!-- Delete -->
            <form method="POST" action="{{ route('notifications.destroy', $notif->id) }}">
                @csrf
                @method('DELETE')
                <button type="submit" class="text-sm mt-1 hover:text-red-500 transition" style="color:#c8d8cc;">
                    <i class="fas fa-times"></i>
                </button>
            </form>
        </div>
        @endforeach
    @endif
</div>
@endsection