{{-- resources/views/storefront/notifications.blade.php --}}
@extends('storefront.layout')

@section('title', trans_key('storefront.pageTitles.notifications').' - '.config('app.name', 'FreshMart'))

@section('content')
<style>
.fm-notifications {
    padding: 12px 0 80px;
}

.fm-notifications-header {
    margin-bottom: 16px;
}

.fm-notifications-header h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--fm-text, #1a1a2e);
    margin: 0 0 2px;
}

.fm-notifications-header p {
    font-size: 13px;
    color: var(--fm-text-secondary, #6b7280);
    margin: 0;
}

.fm-notification {
    background: var(--fm-card-bg, #ffffff);
    border-radius: var(--fm-radius, 10px);
    padding: 14px 16px;
    box-shadow: var(--fm-shadow, 0 2px 8px rgba(0,0,0,0.06));
    margin-bottom: 6px;
}

.fm-notification strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--fm-text, #1a1a2e);
    display: block;
}

.fm-notification span {
    font-size: 11px;
    color: var(--fm-text-light, #9ca3af);
}

.fm-notification p {
    font-size: 13px;
    color: var(--fm-text-secondary, #6b7280);
    margin: 4px 0 0;
}

.fm-notification.is-unread {
    border-left: 3px solid var(--fm-primary, #2daa37);
}
</style>

<div class="fm-notifications">
    <div class="fm-notifications-header">
        <h1>Notifications</h1>
        <p>All recent storefront alerts.</p>
    </div>

    @if($notifications->count())
        @foreach($notifications as $notification)
            @php
                $isUnread = !($notification->read_at);
            @endphp
            <div class="fm-notification {{ $isUnread ? 'is-unread' : '' }}">
                <strong>{{ $notification->title ?? data_get($notification->data, 'title', 'Notification') }}</strong>
                <span>{{ optional($notification->created_at)->diffForHumans() }}</span>
                <p>{{ $notification->message ?? data_get($notification->data, 'message') }}</p>
            </div>
        @endforeach
        <div style="margin-top:12px;">{{ $notifications->withQueryString()->links('storefront.partials.pagination') }}</div>
    @else
        <div style="text-align:center;padding:60px 0;background:var(--fm-card-bg,#ffffff);border-radius:var(--fm-radius,10px);box-shadow:var(--fm-shadow,0 2px 8px rgba(0,0,0,0.06));">
            <svg viewBox="0 0 24 24" aria-hidden="true" width="48" height="48" fill="none" stroke="var(--fm-text-light,#9ca3af)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
                <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
            </svg>
            <h3 style="font-size:16px;font-weight:700;margin:12px 0 4px;color:var(--fm-text,#1a1a2e);">No notifications</h3>
            <p style="font-size:13px;color:var(--fm-text-secondary,#6b7280);margin:0;">You are all caught up.</p>
        </div>
    @endif
</div>
@endsection