@extends('portal.layouts.app')

@section('content')

    {{-- Pending Requests Status --}}
    @if ($pendingRequests->isNotEmpty())
        <div class="portal-card" style="margin-bottom: 18px; border-left: 4px solid var(--portal-accent);">
            <h2 class="portal-card__title">{{ trans('portal.notifications.pending_title') }}</h2>
            <p class="portal-card__text">{{ trans('portal.notifications.pending_description') }}</p>
            <div class="portal-list" style="margin-top: 14px;">
                @foreach ($pendingRequests as $approval)
                    <div class="portal-list__item">
                        <div>
                            <div class="portal-list__title">
                                {{ ucfirst(str_replace('_', ' ', $approval->request_type)) }}
                            </div>
                            <div class="portal-list__meta">
                                {{ trans('portal.notifications.submitted_on') }}
                                {{ $approval->submitted_at?->format('Y-m-d') ?? '—' }}
                                &bull;
                                {{ trans('portal.notifications.step_label', ['step' => $approval->current_sequence_order]) }}
                            </div>
                        </div>
                        <span class="portal-badge portal-badge--pending">
                            {{ trans('portal.requests.statuses.pending') }}
                        </span>
                    </div>
                @endforeach
            </div>
            <div class="portal-actions">
                <a class="portal-button portal-button--ghost" href="{{ route('portal.requests') }}">
                    {{ trans('portal.notifications.view_all_requests') }}
                </a>
            </div>
        </div>
    @endif

    {{-- Notifications List --}}
    <div class="portal-card">
        <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom: 14px;">
            <h2 class="portal-card__title" style="margin:0;">{{ trans('portal.notifications.list_title') }}</h2>
            @if ($notifications->isNotEmpty())
                <form method="POST" action="{{ route('portal.notifications.read-all') }}">
                    @csrf
                    <button type="submit" class="portal-button portal-button--subtle">
                        {{ trans('portal.notifications.mark_all_read') }}
                    </button>
                </form>
            @endif
        </div>

        @if ($notifications->isEmpty())
            <div class="portal-empty">
                <h3>{{ trans('portal.notifications.empty_title') }}</h3>
                <p>{{ trans('portal.notifications.empty_description') }}</p>
            </div>
        @else
            <div class="portal-list">
                @foreach ($notifications as $notification)
                    @php $n = $service->formatNotification($notification) @endphp
                    <div class="portal-list__item" style="{{ $n['is_read'] ? '' : 'background:var(--portal-primary-soft);border-radius:16px;padding:14px;' }}">
                        <div style="flex:1;">
                            <div class="portal-list__title" style="{{ $n['is_read'] ? 'font-weight:500;' : '' }}">
                                @if (!$n['is_read'])
                                    <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--portal-primary);margin-right:8px;vertical-align:middle;"></span>
                                @endif
                                {{ $n['title'] }}
                            </div>
                            @if ($n['message'])
                                <div class="portal-list__meta" style="margin-top:4px;">{{ $n['message'] }}</div>
                            @endif
                            <div class="portal-subtle" style="margin-top:6px;">{{ $n['created_at_human'] }} &bull; {{ $n['created_at'] }}</div>
                        </div>
                        <div style="display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;">
                            @if ($n['url'])
                                <a class="portal-button portal-button--ghost" href="{{ $n['url'] }}" style="padding:7px 12px;font-size:13px;">
                                    {{ trans('portal.notifications.view') }}
                                </a>
                            @endif
                            @if (!$n['is_read'])
                                <form method="POST" action="{{ route('portal.notifications.read', $n['id']) }}">
                                    @csrf
                                    <button type="submit" class="portal-button portal-button--subtle" style="padding:7px 12px;font-size:13px;">
                                        {{ trans('portal.notifications.mark_read') }}
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="portal-pagination">
                <div class="portal-subtle">
                    {{ trans('portal.notifications.pagination_summary', [
                        'from' => $notifications->firstItem(),
                        'to' => $notifications->lastItem(),
                        'total' => $notifications->total(),
                    ]) }}
                </div>
                <div class="portal-actions" style="margin-top: 0;">
                    @if ($notifications->previousPageUrl())
                        <a class="portal-button portal-button--ghost" href="{{ $notifications->previousPageUrl() }}">{{ trans('portal.requests.pagination_previous') }}</a>
                    @endif
                    @if ($notifications->nextPageUrl())
                        <a class="portal-button portal-button--ghost" href="{{ $notifications->nextPageUrl() }}">{{ trans('portal.requests.pagination_next') }}</a>
                    @endif
                </div>
            </div>
        @endif
    </div>
@endsection