@extends('layouts.superadmin')

@section('title', 'جميع الإشعارات')
@section('page-title', 'جميع الإشعارات')

@section('content')
<div class="space-y-6">
    
    <!-- Header Actions -->
    <div class="flex items-center justify-between flex-wrap gap-4">
        <div>
            <h2 class="text-2xl font-bold text-gray-800">إدارة الإشعارات</h2>
            <p class="text-gray-600 mt-1">عرض وإدارة جميع إشعارات النظام</p>
        </div>
        
        <div class="flex items-center gap-3">
            @if($unreadNotifications->count() > 0)
                <button onclick="markAllAsRead()" 
                        class="px-6 py-3 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-xl hover:shadow-lg transition-all duration-300 flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    وضع الكل كمقروء
                </button>
            @endif
            
            @if($readNotifications->count() > 0)
                <button onclick="confirmClearRead()" 
                        class="px-6 py-3 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-xl hover:shadow-lg transition-all duration-300 flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                    </svg>
                    حذف المقروءة
                </button>
            @endif
        </div>
    </div>

    <!-- إحصائيات سريعة -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- إجمالي الإشعارات -->
        <div class="glass-effect rounded-2xl p-6 border border-blue-100 hover:shadow-lg transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 mb-1">إجمالي الإشعارات</p>
                    <h3 class="text-3xl font-bold text-blue-600">{{ $unreadNotifications->count() + $readNotifications->total() }}</h3>
                </div>
                <div class="w-14 h-14 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center shadow-lg">
                    <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5-5V9a7 7 0 10-14 0v3l-5 5h5m14 0v1a3 3 0 01-3 3H9a3 3 0 01-3-3v-1m12 0H6"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- غير المقروءة -->
        <div class="glass-effect rounded-2xl p-6 border border-orange-100 hover:shadow-lg transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 mb-1">غير المقروءة</p>
                    <h3 class="text-3xl font-bold text-orange-600">{{ $unreadNotifications->count() }}</h3>
                </div>
                <div class="w-14 h-14 bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl flex items-center justify-center shadow-lg">
                    <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- المقروءة -->
        <div class="glass-effect rounded-2xl p-6 border border-green-100 hover:shadow-lg transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 mb-1">المقروءة</p>
                    <h3 class="text-3xl font-bold text-green-600">{{ $readNotifications->total() }}</h3>
                </div>
                <div class="w-14 h-14 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl flex items-center justify-center shadow-lg">
                    <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- اليوم -->
        <div class="glass-effect rounded-2xl p-6 border border-purple-100 hover:shadow-lg transition-all duration-300">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 mb-1">إشعارات اليوم</p>
                    <h3 class="text-3xl font-bold text-purple-600">{{ $unreadNotifications->where('created_at', '>=', today())->count() + $readNotifications->where('created_at', '>=', today())->count() }}</h3>
                </div>
                <div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-lg">
                    <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- الإشعارات غير المقروءة -->
    @if($unreadNotifications->count() > 0)
    <div class="glass-effect rounded-2xl border border-white/20 overflow-hidden">
        <div class="bg-gradient-to-r from-orange-500 to-orange-600 px-6 py-4">
            <h3 class="text-lg font-bold text-white flex items-center gap-2">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                الإشعارات غير المقروءة ({{ $unreadNotifications->count() }})
            </h3>
        </div>
        
        <div class="divide-y divide-gray-100">
            @foreach($unreadNotifications as $notification)
            <div class="p-6 hover:bg-orange-50/50 transition-all duration-200 bg-orange-50/30" id="notification-{{ $notification->id }}">
                <div class="flex items-start gap-4">
                    <!-- Icon -->
                    <div class="flex-shrink-0 mt-1">
                        <div class="w-12 h-12 rounded-xl flex items-center justify-center shadow-md
                            {{ $notification->type === 'success' ? 'bg-gradient-to-br from-green-500 to-green-600' : '' }}
                            {{ $notification->type === 'info' ? 'bg-gradient-to-br from-blue-500 to-blue-600' : '' }}
                            {{ $notification->type === 'warning' ? 'bg-gradient-to-br from-yellow-500 to-yellow-600' : '' }}
                            {{ $notification->type === 'danger' ? 'bg-gradient-to-br from-red-500 to-red-600' : '' }}">
                            @if($notification->icon)
                                <i class="fas fa-{{ $notification->icon }} text-white text-lg"></i>
                            @else
                                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 9a1 1 0 012 0v4a1 1 0 11-2 0V9zm1-4a1 1 0 100 2 1 1 0 000-2z"/>
                                </svg>
                            @endif
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="flex-1 min-w-0">
                        <div class="flex items-start justify-between gap-4 mb-2">
                            <p class="text-base text-gray-800 font-semibold">{{ $notification->message }}</p>
                            <span class="px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap
                                {{ $notification->type === 'success' ? 'bg-green-100 text-green-700' : '' }}
                                {{ $notification->type === 'info' ? 'bg-blue-100 text-blue-700' : '' }}
                                {{ $notification->type === 'warning' ? 'bg-yellow-100 text-yellow-700' : '' }}
                                {{ $notification->type === 'danger' ? 'bg-red-100 text-red-700' : '' }}">
                                {{ $notification->type }}
                            </span>
                        </div>
                        
                        <p class="text-sm text-gray-500 mb-3">
                            <svg class="w-4 h-4 inline ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            {{ $notification->created_at->diffForHumans() }}
                        </p>

                        <!-- Actions -->
                        <div class="flex items-center gap-3">
                            @if($notification->action_url)
                                <a href="{{ $notification->action_url }}" 
                                   onclick="markAsRead({{ $notification->id }})"
                                   class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-all text-sm font-medium">
                                    <svg class="w-4 h-4 inline ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                    </svg>
                                    عرض التفاصيل
                                </a>
                            @endif
                            
                            <button onclick="markAsRead({{ $notification->id }})" 
                                    class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-all text-sm font-medium">
                                <svg class="w-4 h-4 inline ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                وضع كمقروء
                            </button>
                            
                            <button onclick="deleteNotification({{ $notification->id }})" 
                                    class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-all text-sm font-medium">
                                <svg class="w-4 h-4 inline ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                </svg>
                                حذف
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- الإشعارات المقروءة -->
    @if($readNotifications->count() > 0)
    <div class="glass-effect rounded-2xl border border-white/20 overflow-hidden">
        <div class="bg-gradient-to-r from-green-500 to-green-600 px-6 py-4">
            <h3 class="text-lg font-bold text-white flex items-center gap-2">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                الإشعارات المقروءة ({{ $readNotifications->total() }})
            </h3>
        </div>
        
        <div class="divide-y divide-gray-100">
            @foreach($readNotifications as $notification)
            <div class="p-6 hover:bg-gray-50 transition-all duration-200" id="notification-{{ $notification->id }}">
                <div class="flex items-start gap-4">
                    <!-- Icon -->
                    <div class="flex-shrink-0 mt-1 opacity-60">
                        <div class="w-12 h-12 rounded-xl flex items-center justify-center
                            {{ $notification->type === 'success' ? 'bg-green-100 text-green-600' : '' }}
                            {{ $notification->type === 'info' ? 'bg-blue-100 text-blue-600' : '' }}
                            {{ $notification->type === 'warning' ? 'bg-yellow-100 text-yellow-600' : '' }}
                            {{ $notification->type === 'danger' ? 'bg-red-100 text-red-600' : '' }}">
                            @if($notification->icon)
                                <i class="fas fa-{{ $notification->icon }} text-lg"></i>
                            @else
                                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 9a1 1 0 012 0v4a1 1 0 11-2 0V9zm1-4a1 1 0 100 2 1 1 0 000-2z"/>
                                </svg>
                            @endif
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="flex-1 min-w-0">
                        <div class="flex items-start justify-between gap-4 mb-2">
                            <p class="text-base text-gray-600">{{ $notification->message }}</p>
                            <span class="px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap
                                {{ $notification->type === 'success' ? 'bg-green-50 text-green-600' : '' }}
                                {{ $notification->type === 'info' ? 'bg-blue-50 text-blue-600' : '' }}
                                {{ $notification->type === 'warning' ? 'bg-yellow-50 text-yellow-600' : '' }}
                                {{ $notification->type === 'danger' ? 'bg-red-50 text-red-600' : '' }}">
                                {{ $notification->type }}
                            </span>
                        </div>
                        
                        <p class="text-sm text-gray-400 mb-3">
                            <svg class="w-4 h-4 inline ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            {{ $notification->created_at->diffForHumans() }}
                        </p>

                        <!-- Actions -->
                        <div class="flex items-center gap-3">
                            @if($notification->action_url)
                                <a href="{{ $notification->action_url }}" 
                                   class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-all text-sm font-medium">
                                    <svg class="w-4 h-4 inline ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                    </svg>
                                    عرض التفاصيل
                                </a>
                            @endif
                            
                            <button onclick="deleteNotification({{ $notification->id }})" 
                                    class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-all text-sm font-medium">
                                <svg class="w-4 h-4 inline ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                </svg>
                                حذف
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <!-- Pagination -->
        @if($readNotifications->hasPages())
        <div class="px-6 py-4 border-t border-gray-200">
            {{ $readNotifications->links() }}
        </div>
        @endif
    </div>
    @else
    <div class="glass-effect rounded-2xl p-12 text-center border border-white/20">
        <svg class="mx-auto h-16 w-16 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
        </svg>
        <h3 class="text-xl font-semibold text-gray-700 mb-2">لا توجد إشعارات مقروءة</h3>
        <p class="text-gray-500">جميع الإشعارات غير مقروءة</p>
    </div>
    @endif

    <!-- رسالة عدم وجود إشعارات -->
    @if($unreadNotifications->count() === 0 && $readNotifications->count() === 0)
    <div class="glass-effect rounded-2xl p-16 text-center border border-white/20">
        <div class="w-24 h-24 bg-gradient-to-br from-blue-100 to-blue-200 rounded-full flex items-center justify-center mx-auto mb-6">
            <svg class="w-12 h-12 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5-5V9a7 7 0 10-14 0v3l-5 5h5m14 0v1a3 3 0 01-3 3H9a3 3 0 01-3-3v-1m12 0H6"/>
            </svg>
        </div>
        <h3 class="text-2xl font-bold text-gray-800 mb-3">لا توجد إشعارات</h3>
        <p class="text-gray-600 text-lg">لم يتم إنشاء أي إشعارات بعد</p>
    </div>
    @endif

</div>

<!-- Forms -->
<form id="delete-form" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>

<form id="clear-read-form" action="{{ route('superadmin.notifications.clear-read') }}" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>

@endsection

<script>
function markAsRead(notificationId) {
    fetch(`/superadmin/notifications/${notificationId}/read`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        }
    })
    .catch(error => console.error('خطأ:', error));
}

function markAllAsRead() {
    if (!confirm('هل تريد وضع علامة مقروء على جميع الإشعارات؟')) return;
    
    fetch('/superadmin/notifications/mark-all-read', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        }
    })
    .catch(error => console.error('خطأ:', error));
}

function deleteNotification(notificationId) {
    if (!confirm('هل أنت متأكد من حذف هذا الإشعار؟')) return;
    
    const form = document.getElementById('delete-form');
    form.action = `/superadmin/notifications/${notificationId}`;
    form.submit();
}

function confirmClearRead() {
    if (!confirm('هل أنت متأكد من حذف جميع الإشعارات المقروءة؟ لا يمكن التراجع عن هذا الإجراء.')) return;
    
    document.getElementById('clear-read-form').submit();
}
</script>