@php use Illuminate\Support\Carbon; @endphp
@extends('layouts.app')

@section('title', 'الإشعارات')
@section('content')
<div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-display font-bold text-text">🔔 الإشعارات</h1>
    <div class="flex gap-2">
        <a href="{{ route('notifications.markAllRead') }}" class="px-4 py-2 text-sm bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors">تحديد الكل كمقروء</a>
        @php
            $role = auth()->user()->role ?? 'admin';
            $dashboardRoutes = [
                'admin'        => 'admin.dashboard',
                'sales'        => 'sales.pipeline',
                'sales_manager' => 'sales.pipeline',
                'finance'      => 'finance.dashboard',
                'operations'   => 'operations.dashboard',
                'applications' => 'admission.pipeline',
                'hr'           => 'hr.dashboard',
                'admission'    => 'admission.pipeline',
            ];
            $dashboardRoute = route($dashboardRoutes[$role] ?? 'admin.dashboard');
        @endphp
        <a href="{{ $dashboardRoute }}" class="px-4 py-2 text-sm bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition-colors">العودة</a>
    </div>
</div>

<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    @if (is_object($notifications) && $notifications->count() > 0)
        @foreach ($notifications as $n)
        <div class="flex items-start gap-4 px-6 py-4 border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer {{ $n->is_read ? '' : 'bg-primary-50/30' }}" onclick="markReadAndNavigate({{ $n->id }}, '{{ $n->link ?? '#' }}')">
            <div class="w-10 h-10 rounded-full flex items-center justify-center text-lg shrink-0 {{ $n->is_read ? 'bg-gray-100' : 'bg-accent-100' }}">
                @switch($n->type)
                    @case('lead_assigned') 💼 @break
                    @case('lead_status') 🔄 @break
                    @case('commission') 💰 @break
                    @case('reminder') 🔔 @break
                    @case('admission') 📋 @break
                    @case('payroll') 📄 @break
                    @case('warning') ⚠️ @break
                    @case('teacher_payout') 🎓 @break
                    @default 📌
                @endswitch
            </div>
            <div class="flex-1 min-w-0">
                <div class="flex items-center justify-between gap-2">
                    <h3 class="font-semibold text-sm {{ $n->is_read ? 'text-gray-600' : 'text-text' }}">{{ $n->title }}</h3>
                    <span class="text-xs text-muted shrink-0">{{ Carbon::parse($n->created_at)->diffForHumans() }}</span>
                </div>
                @if ($n->message)
                    <p class="text-sm text-muted mt-0.5 line-clamp-2">{{ $n->message }}</p>
                @endif
            </div>
            @if (!$n->is_read)
                <span class="w-2 h-2 rounded-full bg-accent-500 shrink-0 mt-2"></span>
            @endif
        </div>
        @endforeach
        <div class="px-6 py-4">
            {{ $notifications->links() }}
        </div>
    @else
        <div class="text-center py-16 text-muted">
            <div class="text-5xl mb-4">🔕</div>
            <p class="text-lg font-medium">لا توجد إشعارات</p>
            <p class="text-sm mt-1">ستظهر هنا الإشعارات الجديدة عند ورودها</p>
        </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
function markReadAndNavigate(id, link) {
    fetch('/notifications/' + id + '/read', { method: 'POST', headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' } })
        .then(() => { if (link && link !== '#') window.location.href = link; });
}
</script>
@endpush