@extends('layouts.app')

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

@push('styles')
<style>
    .notification-header {
        background: linear-gradient(135deg, #696cff 0%, #8385ff 100%);
        border-radius: 1rem;
        padding: 1.5rem 2rem;
        color: white;
        margin-bottom: 1.5rem;
    }
    .notification-header h4 {
        font-weight: 700;
        margin-bottom: 0.25rem;
    }
    .notification-card {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 2px 12px rgba(0,0,0,0.04);
        overflow: hidden;
    }
    .notification-item {
        display: flex;
        align-items: flex-start;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #f1f1f1;
        transition: all 0.2s ease;
    }
    .notification-item:hover {
        background: #f8f9fa;
    }
    .notification-item.unread {
        background: rgba(105, 108, 255, 0.05);
        border-right: 3px solid #696cff;
    }
    .notification-item:last-child {
        border-bottom: none;
    }
    .notification-icon {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 1rem;
        flex-shrink: 0;
    }
    .notification-icon.primary {
        background: rgba(105, 108, 255, 0.15);
        color: #696cff;
    }
    .notification-icon.success {
        background: rgba(113, 221, 55, 0.15);
        color: #71dd37;
    }
    .notification-icon.warning {
        background: rgba(255, 171, 0, 0.15);
        color: #ffab00;
    }
    .notification-icon.danger {
        background: rgba(255, 62, 29, 0.15);
        color: #ff3e1d;
    }
    .notification-icon.info {
        background: rgba(3, 195, 236, 0.15);
        color: #03c3ec;
    }
    .notification-icon i {
        font-size: 1.25rem;
    }
    .notification-content {
        flex: 1;
        min-width: 0;
    }
    .notification-title {
        font-weight: 600;
        color: #333;
        margin-bottom: 0.25rem;
    }
    .notification-message {
        color: #697a8d;
        font-size: 0.875rem;
        line-height: 1.4;
    }
    .notification-time {
        font-size: 0.75rem;
        color: #a1acb8;
        margin-top: 0.5rem;
    }
    .notification-actions {
        display: flex;
        gap: 0.5rem;
        margin-right: 1rem;
    }
    .filter-tabs {
        display: flex;
        gap: 0.5rem;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #e9ecef;
    }
    .filter-tabs .btn {
        border-radius: 2rem;
        padding: 0.375rem 1rem;
        font-size: 0.875rem;
    }
    .filter-tabs .btn.active {
        background: #696cff;
        color: white;
        border-color: #696cff;
    }
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: #697a8d;
    }
    .empty-state i {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="notification-header">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h4><i class='bx bx-bell'></i> الإشعارات</h4>
                <p class="mb-0 opacity-75">{{ $unreadCount }} إشعار غير مقروء</p>
            </div>
            <div class="d-flex gap-2">
                @if($unreadCount > 0)
                <form action="{{ route('notifications.mark-all-read') }}" method="POST" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-light btn-sm">
                        <i class='bx bx-check-double'></i> تحديد الكل كمقروء
                    </button>
                </form>
                @endif
                <form action="{{ route('notifications.clear-read') }}" method="POST" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-outline-light btn-sm">
                        <i class='bx bx-trash'></i> حذف المقروءة
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Notifications Card -->
    <div class="notification-card">
        <!-- Filter Tabs -->
        <div class="filter-tabs">
            <a href="{{ route('notifications.index') }}" class="btn btn-outline-primary {{ !request('filter') ? 'active' : '' }}">
                الكل
            </a>
            <a href="{{ route('notifications.index', ['filter' => 'unread']) }}" class="btn btn-outline-primary {{ request('filter') === 'unread' ? 'active' : '' }}">
                غير المقروءة
            </a>
            <a href="{{ route('notifications.index', ['filter' => 'read']) }}" class="btn btn-outline-primary {{ request('filter') === 'read' ? 'active' : '' }}">
                المقروءة
            </a>
        </div>

        <!-- Notifications List -->
        @forelse($notifications as $notification)
        <div class="notification-item {{ !$notification->isRead() ? 'unread' : '' }}">
            <div class="notification-icon {{ $notification->color }}">
                <i class='bx {{ $notification->icon }}'></i>
            </div>
            <div class="notification-content">
                <div class="notification-title">{{ $notification->title }}</div>
                <div class="notification-message">{{ $notification->message }}</div>
                <div class="notification-time">
                    <i class='bx bx-time-five'></i> {{ $notification->created_at->diffForHumans() }}
                </div>
            </div>
            <div class="notification-actions">
                @if(!$notification->isRead())
                <form action="{{ route('notifications.mark-read', $notification) }}" method="POST" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-sm btn-label-primary" title="تحديد كمقروء">
                        <i class='bx bx-check'></i>
                    </button>
                </form>
                @endif
                @if($notification->link)
                <a href="{{ route('notifications.mark-read', $notification) }}" class="btn btn-sm btn-label-info" title="عرض">
                    <i class='bx bx-link-external'></i>
                </a>
                @endif
                <form action="{{ route('notifications.destroy', $notification) }}" method="POST" class="d-inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-sm btn-label-danger" title="حذف">
                        <i class='bx bx-trash'></i>
                    </button>
                </form>
            </div>
        </div>
        @empty
        <div class="empty-state">
            <i class='bx bx-bell-off'></i>
            <h5>لا توجد إشعارات</h5>
            <p class="mb-0">ستظهر هنا الإشعارات الجديدة عند وصولها</p>
        </div>
        @endforelse

        <!-- Pagination -->
        @if($notifications->hasPages())
        <div class="p-3 border-top">
            {{ $notifications->links() }}
        </div>
        @endif
    </div>
</div>
@endsection