@extends('layouts.app')

@php
    $pageTitle = 'Dashboard';
    $pageNavAlign = 'left';

    $percent = $completionPercent ?? 0;
    $meterState = $percent >= 100 ? 'good' : ($percent > 0 ? 'warning' : 'flat');
    $attentionItems = $needsAttention['items'] ?? [];
    $attentionTotal = $needsAttention['total'] ?? 0;
@endphp

@section('page-nav')
    <a
        href="{{ route('dashboard.index', ['grade_level' => '11']) }}"
        class="page-nav-link text-decoration-none {{ ($selectedGradeParam ?? '11') === '11' ? 'active' : '' }}"
    >
        Grade 11
    </a>
    <a
        href="{{ route('dashboard.index', ['grade_level' => '12']) }}"
        class="page-nav-link text-decoration-none {{ ($selectedGradeParam ?? '11') === '12' ? 'active' : '' }}"
    >
        Grade 12
    </a>
@endsection

@section('content')

    <div class="dash-header mb-3">
        <div class="dash-eyebrow">
            {{ strtoupper($selectedGradeLabel ?? 'Grade 11') }} OVERVIEW
            <span class="dash-eyebrow-sep">&bull;</span>
            {{ $activeSchoolYear?->name ?? 'No School Year' }}
            <span class="dash-eyebrow-sep">&bull;</span>
            {{ $activeSchoolTerm?->name ?? 'No Term' }}
        </div>

        <div class="attention-wrap">
            <button type="button" class="attention-btn" id="attentionBtn" aria-expanded="false" aria-controls="attentionPanel">
                <i class="bi bi-bell"></i>
                <span>Needs Attention</span>
                @if ($attentionTotal > 0)
                    <span class="attention-badge">{{ $attentionTotal > 99 ? '99+' : $attentionTotal }}</span>
                @endif
            </button>

            <div class="attention-panel" id="attentionPanel">
                <div class="attention-panel-head">
                    <span>Needs Attention</span>
                    <span class="text-muted">{{ $attentionTotal }} item{{ $attentionTotal === 1 ? '' : 's' }}</span>
                </div>

                <div class="attention-panel-body">
                    @forelse ($attentionItems as $item)
                        <a href="{{ $item['url'] }}" class="attention-item">
                            <span class="attention-item-icon attention-item-icon-{{ $item['severity'] }}">
                                <i class="bi {{ $item['icon'] }}"></i>
                            </span>
                            <span class="attention-item-text">
                                <span class="attention-item-title">{{ $item['title'] }}</span>
                                <span class="attention-item-message">{{ $item['message'] }}</span>
                            </span>
                            <i class="bi bi-chevron-right attention-item-chevron"></i>
                        </a>
                    @empty
                        <div class="attention-empty">
                            <i class="bi bi-check-circle"></i>
                            <span>Nothing needs attention right now.</span>
                        </div>
                    @endforelse
                </div>

                @if ($attentionTotal > count($attentionItems))
                    <div class="attention-panel-foot">
                        <a href="{{ route('reports.index', ['report_type' => 'scheduling_readiness']) }}">
                            View all {{ $attentionTotal }} items
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="stat-grid mb-3">
        <div class="stat-card">
            <div class="stat-card-icon stat-card-icon-success"><i class="bi bi-check2-circle"></i></div>
            <div class="stat-card-value">{{ $percent }}%</div>
            <div class="stat-card-label">Completion</div>
        </div>

        <div class="stat-card">
            <div class="stat-card-icon stat-card-icon-primary"><i class="bi bi-diagram-3"></i></div>
            <div class="stat-card-value">{{ $totalSections ?? 0 }}</div>
            <div class="stat-card-label">Sections</div>
        </div>

        <div class="stat-card">
            <div class="stat-card-icon stat-card-icon-info"><i class="bi bi-person-check"></i></div>
            <div class="stat-card-value">{{ $totalTeachers ?? 0 }}</div>
            <div class="stat-card-label">Teachers</div>
        </div>

        <div class="stat-card">
            <div class="stat-card-icon stat-card-icon-purple"><i class="bi bi-door-open"></i></div>
            <div class="stat-card-value">{{ $totalRooms ?? 0 }}</div>
            <div class="stat-card-label">Rooms Used</div>
        </div>

        <div class="stat-card">
            <div class="stat-card-icon stat-card-icon-warning"><i class="bi bi-calendar2-check"></i></div>
            <div class="stat-card-value">{{ $totalSchedules ?? 0 }}</div>
            <div class="stat-card-label">Classes</div>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-12 col-xl-5">
            <div class="card content-card h-100">
                <div class="card-body p-3 p-md-4">
                    <h6 class="dash-card-title mb-2">Schedule Completion</h6>
                    <div class="completion-chart-wrap">
                        <div class="chart-container-fixed chart-container-donut">
                            <canvas id="completionDonutChart"></canvas>
                        </div>
                        <div class="completion-chart-center">
                            <div class="completion-chart-value">{{ $percent }}%</div>
                            <div class="completion-chart-label">complete</div>
                        </div>
                    </div>
                    <div class="dash-caption text-center">
                        <span class="fw-semibold text-dark">{{ $completedSections ?? 0 }}</span> of
                        <span class="fw-semibold text-dark">{{ $totalSections ?? 0 }}</span> sections fully scheduled
                        @if (($incompleteSchedules ?? 0) > 0)
                            &middot; <span class="text-warning-emphasis fw-semibold">{{ $incompleteSchedules }}</span> incomplete
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-7">
            <div class="card content-card h-100">
                <div class="card-body p-3 p-md-4">
                    <h6 class="dash-card-title mb-1">Grade 11 vs Grade 12</h6>
                    <div class="dash-subtext mb-2">Completion across the whole school.</div>
                    <div class="chart-container-fixed">
                        <canvas id="gradeComparisonChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-12">
            <div class="card content-card">
                <div class="card-body p-3 p-md-4">
                    <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-2">
                        <h6 class="dash-card-title mb-0">System Status</h6>
                        @if ($readinessSummary)
                            <a href="{{ route('reports.index', ['report_type' => 'scheduling_readiness']) }}" class="dash-link">
                                View full breakdown
                            </a>
                        @endif
                    </div>

                    <div class="status-grid">
                        <div class="status-tile">
                            <div class="status-tile-icon"><i class="bi bi-signpost-split"></i></div>
                            <div class="status-tile-label">Pathways</div>
                            <div class="status-tile-value">
                                {{ ($configuredPathwayCount ?? 0) > 0 ? $configuredPathwayCount . ' configured' : 'None yet' }}
                            </div>
                        </div>

                        <div class="status-tile">
                            <div class="status-tile-icon"><i class="bi bi-clock-history"></i></div>
                            <div class="status-tile-label">Shift Setup</div>
                            <div class="status-tile-value">
                                {{ ($configuredShiftCount ?? 0) > 0 ? $configuredShiftCount . ' in use' : 'None yet' }}
                            </div>
                        </div>

                        <div class="status-tile">
                            <div class="status-tile-icon"><i class="bi bi-person-check"></i></div>
                            <div class="status-tile-label">Teacher Coverage</div>
                            <div class="status-tile-value {{ $teacherAssignmentCoverage >= $teachableSubjectsCount ? 'text-success' : 'text-warning' }}">
                                {{ $teacherAssignmentCoverage }} / {{ $teachableSubjectsCount }} subjects
                            </div>
                        </div>

                        <div class="status-tile">
                            <div class="status-tile-icon"><i class="bi bi-speedometer2"></i></div>
                            <div class="status-tile-label">Teacher Load</div>
                            <div class="status-tile-value {{ $unassignedTeacherCount > 0 ? 'text-warning' : 'text-success' }}">
                                {{ $unassignedTeacherCount > 0 ? $unassignedTeacherCount . ' idle' : 'All assigned' }}
                            </div>
                        </div>

                        @if ($readinessSummary)
                            <div class="status-tile">
                                <div class="status-tile-icon"><i class="bi bi-person-x"></i></div>
                                <div class="status-tile-label">Subject Coverage</div>
                                <div class="status-tile-value {{ $readinessSummary['subjects_no_teacher'] > 0 ? 'text-danger' : 'text-success' }}">
                                    {{ $readinessSummary['subjects_no_teacher'] > 0 ? $readinessSummary['subjects_no_teacher'] . ' uncovered' : 'All covered' }}
                                </div>
                            </div>

                            <div class="status-tile">
                                <div class="status-tile-icon"><i class="bi bi-door-open"></i></div>
                                <div class="status-tile-label">Specialized Rooms</div>
                                <div class="status-tile-value {{ $readinessSummary['room_shortfall'] ? 'text-warning' : 'text-success' }}">
                                    {{ $readinessSummary['room_shortfall'] ? 'Short on capacity' : 'Sufficient' }}
                                </div>
                            </div>

                            <div class="status-tile">
                                <div class="status-tile-icon"><i class="bi bi-grid-3x3-gap"></i></div>
                                <div class="status-tile-label">Grid Capacity</div>
                                <div class="status-tile-value {{ $readinessSummary['sections_grid_blocked'] > 0 ? 'text-danger' : 'text-success' }}">
                                    {{ $readinessSummary['sections_grid_blocked'] > 0 ? $readinessSummary['sections_grid_blocked'] . ' blocked' : 'All schedulable' }}
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-12">
            <div class="card content-card">
                <div class="card-body p-3 p-md-4">
                    <h6 class="dash-card-title mb-3">Quick Actions</h6>

                    <div class="row g-2 g-md-3">
                        <div class="col-6 col-lg-3">
                            <a href="{{ route('academic-setup.index') }}" class="quick-action-tile">
                                <div class="quick-action-icon"><i class="bi bi-mortarboard"></i></div>
                                <div>
                                    <div class="quick-action-title">Academic Setup</div>
                                    <div class="quick-action-subtitle">Tracks, subjects &amp; rooms</div>
                                </div>
                            </a>
                        </div>

                        <div class="col-6 col-lg-3">
                            <a href="{{ route('teachers.index') }}" class="quick-action-tile">
                                <div class="quick-action-icon"><i class="bi bi-person-workspace"></i></div>
                                <div>
                                    <div class="quick-action-title">Teachers</div>
                                    <div class="quick-action-subtitle">Directory &amp; load</div>
                                </div>
                            </a>
                        </div>

                        <div class="col-6 col-lg-3">
                            <a href="{{ route('scheduling.index') }}" class="quick-action-tile">
                                <div class="quick-action-icon"><i class="bi bi-calendar2-week"></i></div>
                                <div>
                                    <div class="quick-action-title">Scheduling</div>
                                    <div class="quick-action-subtitle">Build timetables</div>
                                </div>
                            </a>
                        </div>

                        <div class="col-6 col-lg-3">
                            <a href="{{ route('reports.index') }}" class="quick-action-tile">
                                <div class="quick-action-icon"><i class="bi bi-file-earmark-bar-graph"></i></div>
                                <div>
                                    <div class="quick-action-title">Reports</div>
                                    <div class="quick-action-subtitle">Section &amp; teacher data</div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        :root {
            --dash-text-lg: clamp(0.95rem, 0.85rem + 0.4vw, 1.05rem);
            --dash-text-md: clamp(0.78rem, 0.72rem + 0.25vw, 0.85rem);
            --dash-text-sm: clamp(0.7rem, 0.66rem + 0.15vw, 0.78rem);
            --dash-text-xs: clamp(0.62rem, 0.6rem + 0.1vw, 0.7rem);
        }

        .dash-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }

        .dash-eyebrow {
            font-size: var(--dash-text-xs);
            font-weight: 600;
            letter-spacing: 0.06em;
            color: #898781;
            text-transform: uppercase;
            padding-top: 8px;
        }

        .dash-eyebrow-sep {
            margin: 0 6px;
            color: #d1d0c9;
        }

        .dash-card-title {
            font-size: var(--dash-text-lg);
            font-weight: 600;
            color: #111827;
        }

        .dash-subtext {
            font-size: var(--dash-text-sm);
            color: #6b7280;
        }

        .dash-caption {
            font-size: var(--dash-text-sm);
            color: #6b7280;
        }

        .dash-link {
            font-size: var(--dash-text-sm);
            font-weight: 500;
            text-decoration: none;
        }

        /* Needs Attention */
        .attention-wrap {
            position: relative;
        }

        .attention-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid #e5e7eb;
            background: #fff;
            border-radius: 999px;
            padding: 8px 14px;
            font-size: var(--dash-text-sm);
            font-weight: 500;
            color: #374151;
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }

        .attention-btn:hover {
            border-color: #d1d5db;
        }

        .attention-btn.active {
            border-color: #2563eb;
            color: #2563eb;
        }

        .attention-btn i.bi-bell {
            font-size: 1rem;
        }

        .attention-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            border-radius: 999px;
            background: #dc3545;
            color: #fff;
            font-size: 0.65rem;
            font-weight: 700;
            line-height: 1;
        }

        .attention-panel {
            display: none;
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            width: min(380px, 90vw);
            max-height: 420px;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
            z-index: 1030;
            overflow: hidden;
            flex-direction: column;
        }

        .attention-panel.show {
            display: flex;
        }

        .attention-panel-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid #f1f3f6;
            font-size: var(--dash-text-md);
            font-weight: 600;
            color: #111827;
            flex-shrink: 0;
        }

        .attention-panel-body {
            overflow-y: auto;
            padding: 4px;
        }

        .attention-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 10px;
            text-decoration: none;
            color: inherit;
            transition: background 0.12s ease;
        }

        .attention-item:hover {
            background: #f5f7fb;
        }

        .attention-item-icon {
            width: 32px;
            height: 32px;
            border-radius: 9px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            flex-shrink: 0;
        }

        .attention-item-icon-danger { background: #fdecea; color: #dc3545; }
        .attention-item-icon-warning { background: #fef3e2; color: #d97706; }

        .attention-item-text {
            flex-grow: 1;
            min-width: 0;
        }

        .attention-item-title {
            display: block;
            font-size: var(--dash-text-sm);
            font-weight: 600;
            color: #111827;
        }

        .attention-item-message {
            display: block;
            font-size: var(--dash-text-xs);
            color: #6b7280;
        }

        .attention-item-chevron {
            align-self: center;
            color: #c1c5cc;
            font-size: 0.75rem;
            flex-shrink: 0;
        }

        .attention-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 28px 12px;
            color: #6b7280;
            font-size: var(--dash-text-sm);
        }

        .attention-empty i {
            font-size: 1.5rem;
            color: #0ca30c;
        }

        .attention-panel-foot {
            border-top: 1px solid #f1f3f6;
            padding: 10px 16px;
            text-align: center;
            flex-shrink: 0;
        }

        .attention-panel-foot a {
            font-size: var(--dash-text-sm);
            font-weight: 500;
            text-decoration: none;
        }

        /* Compact stat tiles */
        .stat-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
        }

        .stat-card {
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
            padding: 12px 14px;
        }

        .stat-card-icon {
            width: 30px;
            height: 30px;
            border-radius: 9px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            margin-bottom: 8px;
        }

        .stat-card-icon-success { background: #e7f8e7; color: #0ca30c; }
        .stat-card-icon-primary { background: #e8eefc; color: #2563eb; }
        .stat-card-icon-info { background: #e0f7fa; color: #0891b2; }
        .stat-card-icon-purple { background: #f1e9fe; color: #7c3aed; }
        .stat-card-icon-warning { background: #fef3e2; color: #d97706; }

        .stat-card-value {
            font-size: var(--dash-text-lg);
            font-weight: 700;
            color: #111827;
            line-height: 1.15;
        }

        .stat-card-label {
            font-size: var(--dash-text-xs);
            color: #6b7280;
            margin-top: 1px;
        }

        @media (max-width: 991.98px) {
            .stat-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 575.98px) {
            .stat-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .attention-btn span {
                display: none;
            }

            .attention-btn {
                padding: 8px 10px;
            }
        }

        .chart-container-fixed {
            position: relative;
            height: 190px;
            width: 100%;
        }

        .chart-container-donut {
            height: 150px;
        }

        .completion-chart-wrap {
            position: relative;
        }

        .completion-chart-center {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 150px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }

        .completion-chart-value {
            font-size: 1.6rem;
            font-weight: 700;
            color: #111827;
            line-height: 1.1;
        }

        .completion-chart-label {
            font-size: var(--dash-text-xs);
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        /* Compact system status grid */
        .status-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

        .status-tile {
            border: 1px solid #eef0f3;
            border-radius: 12px;
            padding: 10px 12px;
        }

        .status-tile-icon {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            background: #f5f7fb;
            color: #4b5563;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            margin-bottom: 6px;
        }

        .status-tile-label {
            font-size: var(--dash-text-xs);
            color: #6b7280;
        }

        .status-tile-value {
            font-size: var(--dash-text-sm);
            font-weight: 600;
            color: #111827;
        }

        @media (max-width: 767.98px) {
            .status-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .quick-action-tile {
            display: flex;
            align-items: center;
            gap: 10px;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            padding: 12px;
            height: 100%;
            text-decoration: none;
            transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
        }

        .quick-action-tile:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
            border-color: #d1d5db;
        }

        .quick-action-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
            background: #e8eefc;
            color: #2563eb;
        }

        .quick-action-title {
            font-size: var(--dash-text-sm);
            font-weight: 600;
            color: #111827;
        }

        .quick-action-subtitle {
            font-size: var(--dash-text-xs);
            color: #6b7280;
        }
    </style>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const gradeLabels = @json(collect($gradeComparison ?? [])->pluck('label'));
    const gradeCompleted = @json(collect($gradeComparison ?? [])->pluck('completed'));
    const gradeIncomplete = @json(collect($gradeComparison ?? [])->pluck('incomplete'));

    const barCtx = document.getElementById('gradeComparisonChart');
    if (barCtx) {
        new Chart(barCtx, {
            type: 'bar',
            data: {
                labels: gradeLabels,
                datasets: [
                    {
                        label: 'Completed',
                        data: gradeCompleted,
                        backgroundColor: '#0ca30c',
                        borderRadius: 8,
                        borderSkipped: false,
                        maxBarThickness: 28,
                    },
                    {
                        label: 'Incomplete',
                        data: gradeIncomplete,
                        backgroundColor: '#d97706',
                        borderRadius: 8,
                        borderSkipped: false,
                        maxBarThickness: 28,
                    },
                ],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                categoryPercentage: 0.45,
                barPercentage: 0.9,
                scales: {
                    x: {
                        stacked: true,
                        grid: { display: false },
                        border: { color: '#e1e0d9' },
                        ticks: { color: '#52514e', font: { size: 11 } },
                    },
                    y: {
                        stacked: true,
                        beginAtZero: true,
                        ticks: { precision: 0, color: '#898781', font: { size: 11 } },
                        grid: { color: '#e1e0d9', drawTicks: false },
                        border: { display: false },
                    },
                },
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: { boxWidth: 8, boxHeight: 8, usePointStyle: true, pointStyle: 'circle', color: '#52514e', padding: 14, font: { size: 11 } },
                    },
                    tooltip: {
                        backgroundColor: '#0b0b0b',
                        padding: 10,
                        cornerRadius: 8,
                        titleFont: { weight: '600' },
                    },
                },
            },
        });
    }

    const donutCtx = document.getElementById('completionDonutChart');
    if (donutCtx) {
        const completed = {{ (int) ($completedSections ?? 0) }};
        const remaining = Math.max(0, {{ (int) ($totalSections ?? 0) }} - completed);

        new Chart(donutCtx, {
            type: 'doughnut',
            data: {
                labels: ['Completed', 'Remaining'],
                datasets: [{
                    data: remaining > 0 || completed > 0 ? [completed, remaining] : [1],
                    backgroundColor: remaining > 0 || completed > 0 ? ['#0ca30c', '#eef0f3'] : ['#eef0f3'],
                    borderWidth: 0,
                    borderRadius: 6,
                    spacing: 2,
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '75%',
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        enabled: remaining > 0 || completed > 0,
                        backgroundColor: '#0b0b0b',
                        padding: 10,
                        cornerRadius: 8,
                    },
                },
            },
        });
    }

    const attentionBtn = document.getElementById('attentionBtn');
    const attentionPanel = document.getElementById('attentionPanel');

    if (attentionBtn && attentionPanel) {
        attentionBtn.addEventListener('click', function (event) {
            event.stopPropagation();
            const willShow = !attentionPanel.classList.contains('show');
            attentionPanel.classList.toggle('show', willShow);
            attentionBtn.classList.toggle('active', willShow);
            attentionBtn.setAttribute('aria-expanded', willShow ? 'true' : 'false');
        });

        document.addEventListener('click', function (event) {
            if (!attentionPanel.contains(event.target) && event.target !== attentionBtn) {
                attentionPanel.classList.remove('show');
                attentionBtn.classList.remove('active');
                attentionBtn.setAttribute('aria-expanded', 'false');
            }
        });

        document.addEventListener('keydown', function (event) {
            if (event.key === 'Escape') {
                attentionPanel.classList.remove('show');
                attentionBtn.classList.remove('active');
                attentionBtn.setAttribute('aria-expanded', 'false');
            }
        });
    }
});
</script>
@endpush