@extends('dashboard.user.layouts.app')
@section('content')
    <div class="page-container">

        <div class="page-title-head d-flex align-items-sm-center flex-sm-row flex-column gap-2">
            <div class="flex-grow-1">
                <h4 class="fs-18 fw-semibold mb-0">{{ $title }}</h4>
            </div>

            <div class="text-end">
                <x-dashboard.user.breadcrumbs :breadcrumbs="$breadcrumbs" />
            </div>
        </div>

        <div class="row">
            <div class="col-xl-12 col-lg-12">

                <div class="col-lg-9 mx-auto">

                    {{-- ── STATUS + DATE STRIP ── --}}
                    <div class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom flex-wrap gap-2">
                        <div class="d-flex align-items-center gap-2">
                            {{-- Unread indicator dot --}}
                            @if (!$notification->read)
                                <span class="notif-dot"></span>
                            @endif
                            @if ($notification->read)
                                <span class="badge bg-success-subtle text-success rounded-pill px-3 py-2"
                                    style="font-size:.72rem;">
                                    <i class="bi bi-check2 me-1"></i>Read
                                </span>
                            @else
                                <span class="badge bg-warning-subtle text-warning rounded-pill px-3 py-2"
                                    style="font-size:.72rem;">
                                    <i class="bi bi-bell me-1"></i>Unread
                                </span>
                            @endif
                        </div>
                        <span class="text-muted" style="font-size:.78rem;">
                            <i class="bi bi-clock me-1"></i>{{ $notification->created_at->diffForHumans() }}
                        </span>
                    </div>

                    {{-- ── TITLE ── --}}
                    <h5 class="fw-bold mb-3">{{ $notification->title }}</h5>

                    {{-- ── MESSAGE ── --}}
                    <div class="bg-light rounded-3 px-4 py-3 mb-4">
                        <p class="text-muted mb-1"
                            style="font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;">
                            Message</p>
                        <p class="mb-0" style="font-size:.92rem;line-height:1.75;">{{ $notification->description }}
                        </p>
                    </div>

                    {{-- ── ACTION ── --}}
                    <div class="pt-3 border-top">
                        <x-dashboard.user.back-button href="{{ route('user.notification.index') }}" />
                    </div>

                </div>

                <style>
                    .notif-dot {
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        background: #ffc107;
                        display: inline-block;
                        flex-shrink: 0;
                        animation: notif-pulse 2s ease-in-out infinite;
                    }

                    @keyframes notif-pulse {

                        0%,
                        100% {
                            opacity: 1;
                            transform: scale(1);
                            box-shadow: 0 0 0 0 rgba(255, 193, 7, .4);
                        }

                        50% {
                            opacity: .8;
                            transform: scale(.85);
                            box-shadow: 0 0 0 5px rgba(255, 193, 7, 0);
                        }
                    }
                </style>
            </div>
        </div>
    </div>
@endsection