@extends('layouts.account', ['title' => 'الإشعارات | RaseedNow'])

@section('account_content')
    <div class="kd-page-head">
        <h1>الإشعارات</h1>
    </div>

    <section class="kd-card">
        <div class="kd-card-head wrap">
            <div class="kd-tabs">
                <a href="{{ route('account.notifications') }}" @class(['is-active' => $filter !== 'unread'])>الكل</a>
                <a href="{{ route('account.notifications', ['filter' => 'unread']) }}" @class(['is-active' => $filter === 'unread'])>غير مقروء</a>
            </div>
            <form method="POST" action="{{ route('account.notifications.read') }}">
                @csrf
                <button class="kd-secondary" type="submit">تحديث كمقروء</button>
            </form>
        </div>
        <div class="kd-list">
            @forelse($notifications as $notification)
                <a href="{{ $notification->order ? route('orders.show', $notification->order) : '#' }}" @class(['kd-list-row', 'stacked', 'is-unread' => ! $notification->read_at])>
                    <strong>{{ $notification->title }}</strong>
                    <span>{{ $notification->body }}</span>
                    <em>{{ $notification->created_at->format('Y-m-d H:i') }}</em>
                </a>
            @empty
                <div class="kd-empty"><h3>لا توجد إشعارات</h3><p>ليس لديك أي إشعارات بعد.</p></div>
            @endforelse
        </div>
        {{ $notifications->links() }}
    </section>
@endsection