MIF_E31232094/resources/views/notifications/index.blade.php

93 lines
4.0 KiB
PHP

@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