{{-- notifications/index.blade.php --}}
@extends('patient.layouts.app')
@section('title','الإشعارات')
@section('content')

<div class="d-flex align-items-center justify-content-between mb-3">
    <h6 class="fw-bold mb-0">الإشعارات</h6>
    @if($notifications->isNotEmpty())
    <form method="POST" action="{{ route('patient.notifications.readAll') }}">
        @csrf
        <button type="submit" style="background:none;border:none;color:#7c3aed;font-size:.8rem;font-weight:600;cursor:pointer">
            تحديد الكل كمقروء
        </button>
    </form>
    @endif
</div>

@forelse($notifications as $notif)
<div class="p-card mb-2 {{ !$notif->is_read ? 'border-start border-primary border-3' : '' }}">
    <div class="notif-item" style="border:none;padding:0">
        <div class="notif-icon" style="background:{{ !$notif->is_read ? '#f5f3ff' : '#f8faff' }}">
            {{ $notif->icon }}
        </div>
        <div class="flex-grow-1">
            <div class="fw-semibold small {{ !$notif->is_read ? 'text-dark' : 'text-muted' }}">{{ $notif->title }}</div>
            <div style="font-size:.8rem;color:#64748b">{{ $notif->body }}</div>
            <div style="font-size:.68rem;color:#94a3b8;margin-top:3px">{{ $notif->created_at->diffForHumans() }}</div>
        </div>
        @if(!$notif->is_read)
        <span style="width:8px;height:8px;background:#7c3aed;border-radius:50%;flex-shrink:0;margin-top:4px"></span>
        @endif
    </div>
</div>
@empty
<div class="p-card text-center py-5 text-muted">
    <i class="bi bi-bell-slash fs-2 d-block mb-2"></i>
    لا توجد إشعارات
</div>
@endforelse

@if($notifications->hasPages())
<div class="d-flex justify-content-center mt-2">{{ $notifications->links('pagination::bootstrap-5') }}</div>
@endif
@endsection