@extends('admin.layouts.app')

@section('title', 'Notifications')

@section('content')
@push('styles')
<link rel="stylesheet" href="{{ asset('admin/css/notificationadmin.css') }}">
@endpush


<div class="notifications-page">
    <div class="notifications-wrap">

        <div class="notifications-head">
            <div class="notifications-title">
                <h1>Notifications</h1>

                <p>
                    @if($unreadCount > 0)
                        {{ $unreadCount }}
                        unread notification{{ $unreadCount > 1 ? 's' : '' }}
                    @else
                        You're all caught up
                    @endif
                </p>
            </div>

            @if($unreadCount > 0)
                <form method="POST" action="{{ route('notifications.read-all') }}">
                    @csrf

                    <button type="submit" class="mark-all-btn">
                        ✓ Mark all as read
                    </button>
                </form>
            @endif
        </div>

        @if(session('success'))
            <div style="
                padding:9px 11px;
                margin-bottom:10px;
                border-radius:9px;
                background:#eaf8f0;
                border:1px solid #ccebd9;
                color:#287646;
                font-size:8px;
                font-weight:700;
            ">
                {{ session('success') }}
            </div>
        @endif

        <div class="notification-list">

            @forelse($notifications as $notification)

                @php
                    $data = $notification->data ?? [];

                    $level = data_get($data, 'level', 'info');

                    if (!in_array(
                        $level,
                        ['success', 'warning', 'error', 'info'],
                        true
                    )) {
                        $level = 'info';
                    }

                    $title = data_get(
                        $data,
                        'title',
                        'Notification'
                    );

                    $message = data_get(
                        $data,
                        'message',
                        ''
                    );

                    $loanId = data_get(
                        $data,
                        'loan_id'
                    );

                    $loanNumber = data_get(
                        $data,
                        'loan_number'
                    );
                @endphp

                <div class="notification-card {{ $notification->read_at ? 'read' : 'unread' }}">

                    <div class="notification-dot"></div>

                    <div class="notification-content">

                        <div class="notification-title-row">

                            <div class="notification-title">
                                {{ $title }}
                            </div>

                            <span class="notification-level level-{{ $level }}">
                                {{ $level }}
                            </span>

                        </div>

                        <div class="notification-message">
                            {{ $message }}
                        </div>

                        <div class="notification-meta">
                            {{ $notification->created_at?->format('d M Y, h:i A') ?? '' }}

                            @if($loanNumber)
                                · {{ $loanNumber }}
                            @endif
                        </div>

                    </div>

                    @if(!$notification->read_at || $loanId)

                        <div class="notification-action">

                            <form
                                method="POST"
                                action="{{ route('notifications.read', $notification->id) }}"
                            >
                                @csrf

                                <button type="submit">
                                    {{ $notification->read_at ? 'View' : 'Open' }}
                                </button>
                            </form>

                        </div>

                    @endif

                </div>

            @empty

                <div class="empty-notifications">
                    <strong>🔔 No notifications</strong>
                    New loan and payment updates will appear here.
                </div>

            @endforelse

        </div>

        @if($notifications->hasPages())
            <div class="pagination">
                {{ $notifications->onEachSide(1)->links() }}
            </div>
        @endif

    </div>
</div>

@endsection