@extends('admin._layout')

@section('title', 'الإشعارات')

@push('head')
<style>
    .notif-item {
        display: flex; gap: .85rem; padding: 1rem;
        border-bottom: 1px solid #f1f5f9;
        transition: background .12s;
    }
    .notif-item:hover { background: #f8fafc; }
    .notif-item.is-unread { background: #eff6ff; border-right: 3px solid #0ea5e9; }
    .notif-icon {
        width: 40px; height: 40px; border-radius: .55rem;
        display: inline-flex; align-items: center; justify-content: center;
        flex-shrink: 0; font-size: 1.1rem;
    }
    .notif-icon.bg-info-lt { background: #dbeafe; color: #1e40af; }
    .notif-icon.bg-success-lt { background: #dcfce7; color: #15803d; }
    .notif-icon.bg-warning-lt { background: #fef3c7; color: #b45309; }
    .notif-icon.bg-danger-lt { background: #fee2e2; color: #b91c1c; }
    .notif-meta { flex: 1; min-width: 0; }
    .notif-meta .title { font-weight: 600; }
    .notif-meta .body { color: #64748b; font-size: .88rem; margin-top: .15rem; }
    .notif-time { color: #94a3b8; font-size: .78rem; white-space: nowrap; }
</style>
@endpush

@php
    $iconFor = fn ($type) => match ($type) {
        'success' => 'check',
        'warning' => 'alert-triangle',
        'danger' => 'alert-octagon',
        default => 'info-circle',
    };
@endphp

@section('content')
<div class="page-header">
    <div class="row align-items-center">
        <div class="col">
            <h2 class="page-title mb-1">الإشعارات</h2>
            <div class="text-muted small">{{ $notifications->total() }} إشعار</div>
        </div>
        <div class="col-auto">
            <button class="btn btn-outline-primary" onclick="markAllRead()">
                <i class="ti ti-checks me-1"></i> تعليم الكل كمقروء
            </button>
        </div>
    </div>
</div>

<div class="card">
    @if($notifications->isEmpty())
        <div class="card-body text-center py-5">
            <i class="ti ti-bell-off" style="font-size:3rem;color:#cbd5e1;"></i>
            <h3 class="mt-2 mb-1">لا توجد إشعارات</h3>
            <p class="text-muted">سيظهر هنا أي حدث مهم في النظام (إنشاء عيادة، انتهاء اشتراك، …).</p>
        </div>
    @else
        @foreach($notifications as $n)
            <div class="notif-item {{ $n->read_at ? '' : 'is-unread' }}"
                 data-id="{{ $n->id }}">
                <span class="notif-icon bg-{{ $n->type }}-lt">
                    <i class="ti ti-{{ $iconFor($n->type) }}"></i>
                </span>
                <div class="notif-meta">
                    <div class="d-flex justify-content-between align-items-start gap-2">
                        @if($n->action_url)
                            <a href="{{ $n->action_url }}" class="text-reset text-decoration-none title">{{ $n->title }}</a>
                        @else
                            <div class="title">{{ $n->title }}</div>
                        @endif
                        <span class="notif-time">{{ $n->created_at->diffForHumans() }}</span>
                    </div>
                    @if($n->body)
                        <div class="body">{{ $n->body }}</div>
                    @endif
                </div>
            </div>
        @endforeach
        @if($notifications->hasPages())
            <div class="card-footer">
                {{ $notifications->links() }}
            </div>
        @endif
    @endif
</div>
@endsection

@push('scripts')
<script>
function markAllRead() {
    fetch(`${APP_BASE_URL}/admin/notifications/mark-all-read`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json',
        },
    }).then(() => window.location.reload());
}
</script>
@endpush