@extends('layouts.master')

@section('head')
    <style>
        /* ============================================================
           Notifications — v2 aesthetic
           ============================================================ */

        .dashboard-v2 {
            --dv-bg: #f6f7f9;
            --dv-surface: #ffffff;
            --dv-ink: inherit;
            --dv-ink-soft: inherit;
            --dv-muted: #6b7280;
            --dv-border: #e5e7eb;
            --dv-border-soft: #eef0f3;
            --dv-accent: #66bf97;
            --dv-accent-strong: #2f7a55;
            --dv-accent-soft: rgba(102, 191, 151, .12);
            --dv-warn: #d97706;
            --dv-danger: #dc2626;
            --dv-success: #16a34a;
            --dv-radius: 14px;
            --dv-radius-sm: 10px;
            --dv-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .04);
            --dv-shadow-lift: 0 8px 24px rgba(15, 23, 42, .08);
            background-color: var(--dv-bg);
        }
        .dashboard-v2 a { color: var(--dv-accent-strong); }
        .dashboard-v2 a:hover { color: var(--dv-accent); }

        /* Welcome strip */
        .dv-welcome {
            padding: 28px 0 22px;
            background:
                radial-gradient(900px 280px at 0% 0%, var(--dv-accent-soft), transparent 60%),
                linear-gradient(180deg, #ffffff 0%, var(--dv-bg) 100%);
            border-bottom: 1px solid var(--dv-border-soft);
        }
        .dv-welcome__head {
            display: flex; align-items: center; justify-content: space-between;
            gap: 24px; flex-wrap: wrap;
        }
        .dv-tagline {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 11px; font-weight: 600;
            letter-spacing: .12em; text-transform: uppercase;
            color: var(--dv-accent-strong); margin-bottom: 10px;
        }
        .dv-tagline__dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--dv-accent);
            box-shadow: 0 0 0 4px var(--dv-accent-soft);
            animation: dv-pulse 2.4s ease-in-out infinite;
        }
        @keyframes dv-pulse {
            0%, 100% { box-shadow: 0 0 0 4px var(--dv-accent-soft); }
            50%      { box-shadow: 0 0 0 8px rgba(102, 191, 151, .04); }
        }
        .dv-title {
            font-size: 30px; font-weight: 700;
            letter-spacing: -0.02em; line-height: 1.15;
            margin: 0 0 8px;
        }
        .dv-sub {
            color: var(--dv-muted); font-size: 14px;
            line-height: 1.55; max-width: 580px; margin: 0;
        }

        /* Counter pill */
        .dv-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 12px;
            background: var(--dv-accent-soft);
            color: var(--dv-accent-strong);
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .04em;
        }
        .dv-pill .pill-dot {
            width: 6px; height: 6px; border-radius: 50%;
            background: var(--dv-accent);
        }

        /* Main + cards */
        .dv-main { padding: 24px 0 48px; }
        .dv-card {
            background: var(--dv-surface);
            border: 1px solid var(--dv-border);
            border-radius: var(--dv-radius);
            box-shadow: var(--dv-shadow);
            overflow: hidden;
            transition: box-shadow .2s ease;
        }
        .dv-card__head {
            display: flex; align-items: flex-start; justify-content: space-between;
            gap: 16px; padding: 16px 22px 12px;
            border-bottom: 1px solid var(--dv-border-soft);
        }
        .dv-card__title {
            font-size: 16px; font-weight: 700;
            letter-spacing: -0.01em; margin: 0;
        }
        .dv-card__sub {
            font-size: 13px; color: var(--dv-muted); margin: 4px 0 0;
        }
        .dv-card__body--flush { padding: 0; }

        /* Notification list */
        .dashboard-v2 .faq-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .dashboard-v2 .faq-list li {
            list-style: none;
            border-bottom: 1px solid var(--dv-border-soft);
            margin: 0;
            padding: 0;
            transition: background-color .15s ease;
        }
        .dashboard-v2 .faq-list li:last-child { border-bottom: 0; }
        .dashboard-v2 .faq-list li:hover { background: #fafbfc; }

        .dashboard-v2 .faq-list .question {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px 22px;
            cursor: pointer;
            user-select: none;
            position: relative;
        }
        .dashboard-v2 .faq-list .question > div:nth-child(2) {
            flex: 1;
            min-width: 0;
            font-size: 15px;
            font-weight: 700;
            color: #0f172a;
            letter-spacing: -0.01em;
            line-height: 1.35;
        }
        .dashboard-v2 .faq-list .question small {
            flex-shrink: 0;
            font-size: 12px;
            color: var(--dv-muted);
            font-weight: 500;
        }
        .dashboard-v2 .faq-list .question::after {
            content: "\f078";
            font-family: "Font Awesome 5 Free", "FontAwesome";
            font-weight: 900;
            font-size: 11px;
            color: var(--dv-muted);
            margin-left: 4px;
            transition: transform .2s ease;
        }
        .dashboard-v2 .faq-list li.expanded .question::after {
            transform: rotate(180deg);
        }

        /* Read/unread indicator — CSS-rendered so it works regardless of FA Light/Solid availability */
        .dashboard-v2 .faq-list .question > .un-read {
            flex-shrink: 0;
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            font-size: 0 !important;
            line-height: 0 !important;
            transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
        }
        /* Unread: solid green dot with soft halo */
        .dashboard-v2 .faq-list .question > .un-read.fas {
            background: var(--dv-accent-strong);
            border: 0;
            box-shadow: 0 0 0 4px rgba(102, 191, 151, .22);
        }
        /* Read: hollow gray ring */
        .dashboard-v2 .faq-list .question > .un-read.fal {
            background: var(--dv-surface);
            border: 1.5px solid var(--dv-border);
            box-shadow: none;
        }
        /* Hide the underlying FontAwesome glyph in case it renders — only our CSS shape shows */
        .dashboard-v2 .faq-list .question > .un-read::before {
            content: none !important;
        }

        /* Unread row gets an accent left bar + slight tint */
        .dashboard-v2 .faq-list li:has(.un-read.fas) {
            background: linear-gradient(90deg, var(--dv-accent-soft) 0%, transparent 60%);
        }
        .dashboard-v2 .faq-list li:has(.un-read.fas)::before {
            content: '';
            position: absolute;
            top: 0; bottom: 0; left: 0;
            width: 3px;
            background: var(--dv-accent);
        }
        .dashboard-v2 .faq-list li { position: relative; }

        /* Body — expanded message lives in a soft panel so it's visually distinct from the title row */
        .dashboard-v2 .faq-list .answer {
            display: none;
            margin: 0 22px 18px 50px;
            padding: 14px 16px;
            background: #fafbfc;
            border: 1px solid var(--dv-border-soft);
            border-left: 3px solid var(--dv-accent);
            border-radius: var(--dv-radius-sm);
            font-size: 13px;
            line-height: 1.6;
            color: #4a5568;
            font-weight: 400;
        }
        .dashboard-v2 .faq-list li.expanded .answer { display: block; }
        .dashboard-v2 .faq-list .answer p { margin: 0; }
        .dashboard-v2 .faq-list .answer p + p { margin-top: 8px; }
        .dashboard-v2 .faq-list .answer strong,
        .dashboard-v2 .faq-list .answer b {
            color: #0f172a;
            font-weight: 700;
        }

        /* Defensive: kill any pseudo-element arrow that the global FAQ stylesheet
           may inject on .question — we render our own chevron via .question::after */
        .dashboard-v2 .faq-list .question::before { display: none !important; content: none !important; }

        /* Empty state */
        .dv-empty {
            padding: 60px 22px;
            text-align: center;
            color: var(--dv-muted);
        }
        .dv-empty__icon {
            width: 56px; height: 56px;
            border-radius: 50%;
            background: var(--dv-accent-soft);
            color: var(--dv-accent-strong);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            margin: 0 auto 14px;
        }
        .dv-empty__title {
            font-size: 15px;
            font-weight: 700;
            color: #1a1a1a;
            margin: 0 0 4px;
        }
        .dv-empty__sub {
            font-size: 13px;
            color: var(--dv-muted);
            margin: 0;
        }

        /* Pagination — Laravel default styling overrides */
        .dashboard-v2 .pagination {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .dashboard-v2 .pagination li { list-style: none; }
        .dashboard-v2 .pagination a,
        .dashboard-v2 .pagination span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 34px;
            padding: 0 10px;
            border-radius: 8px;
            border: 1px solid var(--dv-border);
            background: var(--dv-surface);
            color: #1a1a1a !important;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            transition: background-color .15s ease, color .15s ease, border-color .15s ease;
        }
        .dashboard-v2 .pagination a:hover {
            border-color: var(--dv-accent);
            color: var(--dv-accent-strong) !important;
            background: var(--dv-accent-soft);
        }
        .dashboard-v2 .pagination .active span,
        .dashboard-v2 .pagination .active a {
            background: var(--dv-accent);
            border-color: var(--dv-accent);
            color: #ffffff !important;
        }
        .dashboard-v2 .pagination .disabled span {
            color: var(--dv-muted) !important;
            background: #fafbfc;
            cursor: not-allowed;
        }

        @media (max-width: 540px) {
            .dv-title { font-size: 24px; }
            .dashboard-v2 .faq-list .question {
                flex-wrap: wrap;
                gap: 8px;
                padding: 14px 16px;
            }
            .dashboard-v2 .faq-list .question small { width: 100%; padding-left: 22px; }
            .dashboard-v2 .faq-list .answer { padding: 0 16px 16px 38px; }
        }
    </style>
@endsection

@section('content')

    @php
        $unread_count = $notifications->where('marked_as_read', false)->count();
    @endphp

    <main class="dashboard-v2">

        {{-- Welcome strip --}}
        <section class="dv-welcome">
            <div class="container">
                <div class="dv-welcome__head">
                    <div>
                        <span class="dv-tagline"><span class="dv-tagline__dot"></span> Notifications</span>
                        <h1 class="dv-title">Notifications</h1>
                        <p class="dv-sub">Updates, alerts, and announcements about your store, account, and the app.</p>
                    </div>
                    @if($unread_count > 0)
                        <div>
                            <span class="dv-pill"><span class="pill-dot"></span> {{ $unread_count }} unread</span>
                        </div>
                    @endif
                </div>
            </div>
        </section>

        <section class="dv-main">
            <div class="container">
                <article class="dv-card">
                    @if(count($notifications) > 0)
                        <ul class="faq-list notification">
                            @foreach($notifications as $notification)
                                <li class="mark-as-read-notification">
                                    <div class="question" data-target-action="{{ route('notification.marked_as_read',$notification->id) }}">
                                        <i class="un-read {{ $notification->marked_as_read ? 'fal' : 'fas' }} fa-circle text-success"></i>
                                        <div>{{ $notification->notification_title }}</div>
                                        <small class="text-muted">{{ $notification->updated_at }}</small>
                                    </div>
                                    <div class="answer">
                                        <p>{!! $notification->notification_body !!}</p>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <div class="dv-empty">
                            <div class="dv-empty__icon"><i class="fas fa-bell"></i></div>
                            <h3 class="dv-empty__title">You're all caught up</h3>
                            <p class="dv-empty__sub">No notifications right now. We'll let you know when something needs your attention.</p>
                        </div>
                    @endif
                </article>

                @if($notifications->hasPages())
                    <div class="d-flex justify-content-center pt-4">
                        {{ $notifications->links() }}
                    </div>
                @endif
            </div>
        </section>
    </main>
@endsection

@section('last_scripts')
    <script type="text/javascript">
        // Mark as read when a notification is clicked + toggle expanded
        $(document).on('click', '.faq-list .question', function (e) {
            e.preventDefault();
            $(this).parent().toggleClass('expanded');

            var url = $(this).attr('data-target-action');
            if (!url) return;

            var $icon = $(this).children('.un-read');
            // Only fire the AJAX if it was unread
            if (!$icon.hasClass('fas')) return;

            $.ajax({
                url: url,
                type: 'GET',
                data: { _method: 'GET', _token: "