@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @php
        $gedung_alias_path = [
            'OFFICE' => 'trsoff',
            'A' => 'trsgda',
            'B' => 'trsgdb',
            'C' => 'trsgdc',
            'E' => 'trsgde',
            'F' => 'trsgdf',
        ];
        $topology_path_by_gedung = function ($code) use ($gedung_alias_path) {
            $key = strtoupper((string) $code);
            return $gedung_alias_path[$key] ?? 'trssrv';
        };
    @endphp
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <style>
        /* ── Dashboard Stat Cards ── */
        .dash-stat {
            border-radius: 1rem;
            padding: 1.25rem 1.5rem;
            color: #fff;
            position: relative;
            overflow: hidden;
            min-height: 120px;
            transition: transform .2s;
        }
        .dash-stat:hover { transform: translateY(-3px); }
        .dash-stat .stat-icon {
            position: absolute;
            right: 18px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 2.8rem;
            opacity: .2;
        }
        .dash-stat .stat-value {
            font-size: 2rem;
            font-weight: 800;
            line-height: 1.1;
        }
        .dash-stat .stat-label {
            font-size: .78rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .5px;
            opacity: .85;
            margin-bottom: 4px;
        }
        .bg-dash-total   { background: linear-gradient(135deg, #5e72e4, #825ee4); }
        .bg-dash-server  { background: linear-gradient(135deg, #2dce89, #1fa86d); }
        .bg-dash-switch  { background: linear-gradient(135deg, #fb6340, #f5365c); }
        .bg-dash-cpu     { background: linear-gradient(135deg, #11cdef, #1171ef); }
        .bg-dash-other   { background: linear-gradient(135deg, #8965e0, #bc65e0); }

        /* ── Gedung Cards ── */
        .gedung-card {
            border-radius: .875rem;
            border: 1px solid #e9ecef;
            transition: all .2s;
            cursor: pointer;
            text-decoration: none !important;
        }
        .gedung-card:hover {
            border-color: #5e72e4;
            box-shadow: 0 4px 18px rgba(94,114,228,.15);
            transform: translateY(-2px);
        }
        .gedung-card .gedung-code {
            width: 44px;
            height: 44px;
            border-radius: .75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.1rem;
            color: #fff;
        }
        .gedung-colors-A { background: linear-gradient(135deg, #5e72e4, #825ee4); }
        .gedung-colors-B { background: linear-gradient(135deg, #2dce89, #1fa86d); }
        .gedung-colors-C { background: linear-gradient(135deg, #fb6340, #f5365c); }
        .gedung-colors-E { background: linear-gradient(135deg, #11cdef, #1171ef); }
        .gedung-colors-F { background: linear-gradient(135deg, #f5365c, #f56036); }
        .gedung-colors-OFFICE { background: linear-gradient(135deg, #028284, #2dcecc); }

        /* ── Kategori Bar ── */
        .kat-bar-wrap {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .kat-bar-label {
            min-width: 80px;
            font-size: .82rem;
            font-weight: 600;
            text-align: right;
            color: #344767;
        }
        .kat-bar-track {
            flex: 1;
            height: 22px;
            background: #f0f2f5;
            border-radius: 6px;
            overflow: hidden;
        }
        .kat-bar-fill {
            height: 100%;
            border-radius: 6px;
            background: linear-gradient(90deg, #5e72e4, #825ee4);
            display: flex;
            align-items: center;
            padding-left: 8px;
            font-size: .72rem;
            font-weight: 700;
            color: #fff;
            min-width: 28px;
            transition: width .6s ease;
        }
        .kat-bar-fill.kat-switch  { background: linear-gradient(90deg, #fb6340, #f5365c); }
        .kat-bar-fill.kat-cpu     { background: linear-gradient(90deg, #11cdef, #1171ef); }
        .kat-bar-fill.kat-printer { background: linear-gradient(90deg, #2dce89, #1fa86d); }
        .kat-bar-fill.kat-scanner { background: linear-gradient(90deg, #f5365c, #f56036); }
        .kat-bar-fill.kat-monitor { background: linear-gradient(90deg, #8965e0, #bc65e0); }
        .kat-bar-fill.kat-router  { background: linear-gradient(90deg, #ffd600, #f7b924); }

        /* ── Master Card ── */
        .master-card {
            border-radius: .875rem;
            border: 1px solid #e9ecef;
            transition: all .2s;
        }
        .master-card:hover {
            box-shadow: 0 4px 18px rgba(94,114,228,.12);
        }
        .master-icon {
            width: 40px;
            height: 40px;
            border-radius: .65rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            color: #fff;
        }

        /* ── Comparison Bar ── */
        .kat-comparison {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }
        .kat-comp-label {
            min-width: 80px;
            font-size: .82rem;
            font-weight: 600;
            text-align: right;
            color: #344767;
        }
        .kat-comp-bar-wrap {
            flex: 1;
        }
        .kat-comp-track {
            height: 22px;
            background: #f0f2f5;
            border-radius: 6px;
            overflow: hidden;
            position: relative;
        }
        .kat-comp-fill {
            height: 100%;
            border-radius: 6px;
            display: flex;
            align-items: center;
            padding-left: 8px;
            font-size: .72rem;
            font-weight: 700;
            color: #fff;
            min-width: 28px;
            transition: width .6s ease;
        }
        .kat-comp-info {
            display: flex;
            justify-content: space-between;
            margin-top: 3px;
            font-size: .7rem;
            color: #8392ab;
        }
        .kat-comp-info .trs-label { color: #5e72e4; font-weight: 600; }
        .kat-comp-info .mst-label { color: #8392ab; font-weight: 600; }

        /* ── Recent Table ── */
        .recent-table th {
            font-size: .7rem;
            text-transform: uppercase;
            letter-spacing: .5px;
            color: #8392ab;
            border-bottom: 2px solid #e9ecef;
            padding: .6rem .75rem;
        }
        .recent-table td {
            font-size: .82rem;
            padding: .55rem .75rem;
            vertical-align: middle;
            border-bottom: 1px solid #f0f2f5;
        }
        .recent-table tr:hover td { background: #f8f9fe; }
        .device-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: 6px;
            font-size: .72rem;
            font-weight: 600;
        }
        .badge-server  { background: #e8f5e9; color: #2e7d32; }
        .badge-switch  { background: #fff3e0; color: #e65100; }
        .badge-cpu     { background: #e3f2fd; color: #1565c0; }
        .badge-printer { background: #f3e5f5; color: #7b1fa2; }
        .badge-scanner { background: #fce4ec; color: #c62828; }
        .badge-monitor { background: #ede7f6; color: #4527a0; }
        .badge-router  { background: #fff8e1; color: #f57f17; }
        .badge-default { background: #eceff1; color: #455a64; }

        /* ── Equal Bottom Alignment (Desktop) ── */
        @media (min-width: 992px) {
            .dashboard-main-row {
                align-items: stretch;
            }

            .dashboard-left-stack {
                display: flex;
                flex-direction: column;
                height: 100%;
            }

            .dashboard-right-stack {
                display: flex;
                flex-direction: column;
                height: 100%;
            }

            .dashboard-recent-card {
                flex: 1 1 auto;
                display: flex;
                flex-direction: column;
                min-height: 0;
                overflow: hidden;
            }

            .dashboard-recent-card .card-body {
                flex: 1 1 auto;
                display: flex;
                flex-direction: column;
                min-height: 0;
            }

            .dashboard-recent-card .table-responsive {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
            }
        }
    </style>

    <div class="container-fluid py-4">

        {{-- ── Stats Cards ── --}}
        <div class="row mb-4">
            <div class="col-xl col-sm-6 mb-xl-0 mb-3">
                <div class="dash-stat bg-dash-total">
                    <div class="stat-label">Total Perangkat</div>
                    <div class="stat-value">{{ $stat_total }}</div>
                    <div class="stat-icon"><i class="fas fa-microchip"></i></div>
                </div>
            </div>
            <div class="col-xl col-sm-6 mb-xl-0 mb-3">
                <div class="dash-stat bg-dash-server">
                    <div class="stat-label">Printer / Scanner</div>
                    <div class="stat-value">{{ $stat_printer }}</div>
                    <div class="stat-icon"><i class="fas fa-print"></i></div>
                </div>
            </div>
            <div class="col-xl col-sm-6 mb-xl-0 mb-3">
                <div class="dash-stat bg-dash-switch">
                    <div class="stat-label">Switch</div>
                    <div class="stat-value">{{ $stat_switch }}</div>
                    <div class="stat-icon"><i class="fas fa-network-wired"></i></div>
                </div>
            </div>
            <div class="col-xl col-sm-6 mb-xl-0 mb-3">
                <div class="dash-stat bg-dash-cpu">
                    <div class="stat-label">CPU / PC</div>
                    <div class="stat-value">{{ $stat_cpu }}</div>
                    <div class="stat-icon"><i class="fas fa-desktop"></i></div>
                </div>
            </div>
            <div class="col-xl col-sm-6 mb-xl-0 mb-3">
                <div class="dash-stat bg-dash-other">
                    <div class="stat-label">Lainnya</div>
                    <div class="stat-value">{{ $stat_other }}</div>
                    <div class="stat-icon"><i class="fas fa-ellipsis-h"></i></div>
                </div>
            </div>
        </div>

        <div class="row dashboard-main-row">
            {{-- ── Left Column ── --}}
            <div class="col-lg-8 mb-4 mb-lg-0 dashboard-left-stack">
                {{-- Gedung Overview --}}
                @if (!($is_teknisi ?? false))
                {{-- Master Asset Overview --}}
                <div class="card mb-4">
                    <div class="card-header pb-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="mb-0"><i class="fas fa-database me-2 text-success"></i>Aset Perangkat </h6>
                            <span class="badge bg-gradient-success">Total: {{ $master_total }}</span>
                        </div>
                    </div>
                    <div class="card-body pt-2">
                        <div class="row">
                            @php
                                $masterIcons = [
                                    'switch'  => ['icon' => 'fa-network-wired', 'bg' => 'bg-dash-switch'],
                                    'cpu'     => ['icon' => 'fa-desktop',        'bg' => 'bg-dash-cpu'],
                                    'printer' => ['icon' => 'fa-print',          'bg' => 'bg-dash-server'],
                                    'scanner' => ['icon' => 'fa-barcode',        'bg' => 'bg-dash-other'],
                                    'monitor' => ['icon' => 'fa-tv',             'bg' => 'bg-dash-total'],
                                ];
                            @endphp
                            @foreach ($master_counts as $mKey => $mCount)
                            <div class="col-xl col-md-4 col-6 mb-3">
                                <div class="master-card card h-100">
                                    <div class="card-body p-3 d-flex align-items-center gap-3">
                                        <div class="master-icon {{ $masterIcons[$mKey]['bg'] ?? 'bg-dash-total' }}">
                                            <i class="fas {{ $masterIcons[$mKey]['icon'] ?? 'fa-microchip' }}"></i>
                                        </div>
                                        <div>
                                            <div class="text-xs text-muted font-weight-bold text-uppercase">{{ ucfirst($mKey) }}</div>
                                            <div class="h5 mb-0 font-weight-bolder">{{ $mCount }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="card mb-4">
                    <div class="card-header pb-2">
                        <h6 class="mb-0"><i class="fas fa-building me-2 text-primary"></i>Perangkat per Gedung</h6>
                    </div>
                    <div class="card-body pt-2">
                        <div class="row">
                            @foreach ($gedung_stats as $gs)
                            <div class="col-xl col-md-4 col-6 mb-3">
                                <a href="{{ url($topology_path_by_gedung($gs['code'])) }}" class="gedung-card card h-100">
                                    <div class="card-body p-3 d-flex align-items-center gap-3">
                                        <div class="gedung-code gedung-colors-{{ $gs['code'] }}">
                                            @if (strtoupper((string) $gs['code']) === 'OFFICE')
                                                <i class="fas fa-building text-white"></i>
                                            @else
                                                {{ $gs['code'] }}
                                            @endif
                                        </div>
                                        <div>
                                            <div class="text-xs text-muted font-weight-bold text-uppercase">{{ $gs['name'] }}</div>
                                            <div class="h5 mb-0 font-weight-bolder">{{ $gs['total'] }}</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                @endif

                
                {{-- Recent Devices --}}
                <div class="card dashboard-recent-card">
                    <div class="card-header pb-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="mb-0"><i class="fas fa-history me-2 text-primary"></i>Perangkat Terakhir Diupdate</h6>
                            @if ($is_teknisi ?? false)
                                <span class="badge bg-gradient-info">{{ $gedung_map[$user_gedung] ?? '' }}</span>
                            @endif
                        </div>
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive">
                            <table class="table recent-table mb-0">
                                <thead>
                                    <tr>
                                        <th>Perangkat</th>
                                        <th>Kategori</th>
                                        <th>Gedung</th>
                                        <th>Area</th>
                                        @if (!($is_teknisi ?? false))
                                        <th>IP Address</th>
                                        @endif
                                        <th>Aktivitas</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($recent_devices as $rd)
                                    @php
                                        $katLower = strtolower($rd->nama_kategori ?? '');
                                        $badgeClass = 'badge-default';
                                        $badgeIcon = 'fa-microchip';
                                        if (str_contains($katLower, 'server'))       { $badgeClass = 'badge-server';  $badgeIcon = 'fa-server'; }
                                        elseif (str_contains($katLower, 'switch'))   { $badgeClass = 'badge-switch';  $badgeIcon = 'fa-network-wired'; }
                                        elseif (str_contains($katLower, 'cpu'))      { $badgeClass = 'badge-cpu';     $badgeIcon = 'fa-desktop'; }
                                        elseif (str_contains($katLower, 'printer'))  { $badgeClass = 'badge-printer'; $badgeIcon = 'fa-print'; }
                                        elseif (str_contains($katLower, 'scanner'))  { $badgeClass = 'badge-scanner'; $badgeIcon = 'fa-barcode'; }
                                        elseif (str_contains($katLower, 'monitor'))  { $badgeClass = 'badge-monitor'; $badgeIcon = 'fa-tv'; }
                                        elseif (str_contains($katLower, 'router'))   { $badgeClass = 'badge-router';  $badgeIcon = 'fa-route'; }
                                    @endphp
                                    <tr>
                                        <td class="font-weight-bold">{{ $rd->nama_perangkat }}</td>
                                        <td>
                                            <span class="device-badge {{ $badgeClass }}">
                                                <i class="fas {{ $badgeIcon }} text-xs"></i>
                                                {{ $rd->nama_kategori ?? '-' }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge bg-light text-dark">{{ $gedung_map[$rd->gedung] ?? $rd->gedung ?? '-' }}</span>
                                        </td>
                                        <td class="text-sm">{{ data_get($rd, 'location') ?? data_get($rd, 'area') ?? '-' }}</td>
                                        @if (!($is_teknisi ?? false))
                                        <td class="text-sm text-muted">{{ $rd->ip_address ?? '-' }}</td>
                                        @endif
                                        <td>
                                            <small class="text-muted">
                                                {{ $rd->activity_at ? \Carbon\Carbon::parse($rd->activity_at)->diffForHumans() : '-' }}
                                            </small>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="{{ ($is_teknisi ?? false) ? 5 : 6 }}" class="text-center text-muted py-4">
                                            <i class="fas fa-inbox fa-2x mb-2 d-block" style="opacity:.3;"></i>
                                            Belum ada perangkat
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Right Column ── --}}
            <div class="col-lg-4 dashboard-right-stack">
                {{-- Kategori Breakdown (Transaksi vs Master) --}}
                <div class="card mb-4">
                    <div class="card-header pb-2">
                        <h6 class="mb-0"><i class="fas fa-chart-bar me-2 text-primary"></i>Distribusi Perangkat</h6>
                        <p class="text-xs text-muted mb-0 mt-1">Perbandingan Jumlah Terpakai dan Tersedia</p>
                    </div>
                    <div class="card-body pt-2">
                        @php
                            $katColorMap = [
                                'server'  => 'linear-gradient(90deg, #5e72e4, #825ee4)',
                                'switch'  => 'linear-gradient(90deg, #fb6340, #f5365c)',
                                'cpu'     => 'linear-gradient(90deg, #11cdef, #1171ef)',
                                'printer' => 'linear-gradient(90deg, #2dce89, #1fa86d)',
                                'scanner' => 'linear-gradient(90deg, #f5365c, #f56036)',
                                'monitor' => 'linear-gradient(90deg, #8965e0, #bc65e0)',
                                'router'  => 'linear-gradient(90deg, #ffd600, #f7b924)',
                            ];
                        @endphp
                        @forelse ($kategori_stats as $ks)
                        @php
                            $trsCount = $ks['total'];
                            $mstCount = $ks['master_total'] ?? 0;
                            // Bar width = transaksi / master * 100, capped at 100%
                            $maxVal = max($mstCount, $trsCount, 1);
                            $pct = round(($trsCount / $maxVal) * 100);
                            if ($pct < 5 && $trsCount > 0) $pct = 5; // minimum visible width

                            $bgColor = 'linear-gradient(90deg, #5e72e4, #825ee4)';
                            foreach ($katColorMap as $key => $gradient) {
                                if (str_contains(strtolower($ks['name']), $key)) { $bgColor = $gradient; break; }
                            }
                        @endphp
                        <div class="kat-comparison">
                            <div class="kat-comp-label">{{ $ks['name'] }}</div>
                            <div class="kat-comp-bar-wrap">
                                <div class="kat-comp-track">
                                    <div class="kat-comp-fill" style="width: {{ $pct }}%; background: {{ $bgColor }};">
                                        {{ $trsCount }}
                                    </div>
                                </div>
                                <div class="kat-comp-info">
                                    <span class="trs-label"><i class="fas fa-circle text-xs me-1"></i>Transaksi: {{ $trsCount }}</span>
                                    <span class="mst-label"><i class="fas fa-circle text-xs me-1"></i>Master: {{ $mstCount }}</span>
                                </div>
                            </div>
                        </div>
                        @empty
                        <p class="text-muted text-center text-sm mb-0">Belum ada data</p>
                        @endforelse
                        {{-- Legend --}}
                        <div class="border-top pt-2 mt-2">
                            <div class="d-flex justify-content-center gap-4">
                                <small class="text-muted"><i class="fas fa-square me-1" style="color:#5e72e4;"></i> Terdaftar (Transaksi)</small>
                                <small class="text-muted"><i class="far fa-square me-1"></i> Total Master (Asset)</small>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Quick Links --}}
                <div class="card mb-4">
                    <div class="card-header pb-2">
                        <h6 class="mb-0"><i class="fas fa-bolt me-2 text-warning"></i>Akses Cepat</h6>
                    </div>
                    <div class="card-body pt-1">
                        <div class="list-group list-group-flush">
                            @if ($is_teknisi ?? false)
                                <a href="{{ url($topology_path_by_gedung($user_gedung)) }}" class="list-group-item list-group-item-action border-0 px-0 py-2">
                                    <div class="d-flex align-items-center">
                                        <div class="icon icon-shape icon-sm bg-gradient-primary shadow text-center rounded-circle me-3">
                                            <i class="fas fa-sitemap text-white text-xs"></i>
                                        </div>
                                        <div>
                                            <h6 class="mb-0 text-sm">Topologi {{ $gedung_map[$user_gedung] ?? '' }}</h6>
                                            <span class="text-xs text-muted">Lihat diagram jaringan</span>
                                        </div>
                                        <i class="fas fa-chevron-right ms-auto text-xs text-muted"></i>
                                    </div>
                                </a>
                            @else
                                <a href="{{ url('trssrv') }}" class="list-group-item list-group-item-action border-0 px-0 py-2">
                                    <div class="d-flex align-items-center">
                                        <div class="icon icon-shape icon-sm bg-gradient-primary shadow text-center rounded-circle me-3">
                                            <i class="fas fa-globe text-white text-xs"></i>
                                        </div>
                                        <div>
                                            <h6 class="mb-0 text-sm">Global Server</h6>
                                            <span class="text-xs text-muted">Lihat seluruh topologi</span>
                                        </div>
                                        <i class="fas fa-chevron-right ms-auto text-xs text-muted"></i>
                                    </div>
                                </a>
                                @foreach ($gedung_stats as $gs)
                                <a href="{{ url($topology_path_by_gedung($gs['code'])) }}" class="list-group-item list-group-item-action border-0 px-0 py-2">
                                    <div class="d-flex align-items-center">
                                        <div class="icon icon-shape icon-sm shadow text-center rounded-circle me-3 gedung-colors-{{ $gs['code'] }}">
                                            @if (strtoupper((string) $gs['code']) === 'OFFICE')
                                                <i class="fas fa-building text-white text-xs"></i>
                                            @else
                                                <span class="text-white text-xs font-weight-bold">{{ $gs['code'] }}</span>
                                            @endif
                                        </div>
                                        <div>
                                            <h6 class="mb-0 text-sm">{{ $gs['name'] }}</h6>
                                            <span class="text-xs text-muted">{{ $gs['total'] }} perangkat</span>
                                        </div>
                                        <i class="fas fa-chevron-right ms-auto text-xs text-muted"></i>
                                    </div>
                                </a>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>

                {{-- Tutorial Center --}}
                <div class="card">
                    <div class="card-header pb-2">
                        <h6 class="mb-0"><i class="fas fa-book-reader me-2 text-info"></i>Pusat Panduan & Tutorial</h6>
                    </div>
                    <div class="card-body pt-1">
                        <div class="list-group list-group-flush">
                            @forelse ($tutorials as $tutorial)
                            <a href="{{ url('tutors/show/' . encrypt($tutorial->id)) }}" class="list-group-item list-group-item-action border-0 px-0 py-2">
                                <div class="d-flex align-items-center">
                                    <div class="icon icon-shape icon-sm bg-gradient-info shadow text-center rounded-circle me-3">
                                        <i class="fas fa-book-open text-white text-xs"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 text-sm">{{ $tutorial->judul }}</h6>
                                        <span class="text-xs text-muted">{{ \Illuminate\Support\Str::limit($tutorial->keterangan, 72) }}</span>
                                    </div>
                                    <i class="fas fa-chevron-right ms-auto text-xs text-muted"></i>
                                </div>
                            </a>
                            @empty
                            <div class="text-center text-muted text-sm py-3">
                                Belum ada tutorial aktif
                            </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
    (function() {
        let syncTimer = null;

        function syncDashboardRecentCardHeight() {
            const row = document.querySelector('.dashboard-main-row');
            const leftCol = row ? row.querySelector('.dashboard-left-stack') : null;
            const rightCol = row ? row.querySelector('.dashboard-right-stack') : null;
            const recentCard = leftCol ? leftCol.querySelector('.dashboard-recent-card') : null;

            if (!row || !leftCol || !rightCol || !recentCard) return;

            recentCard.style.minHeight = '';
            recentCard.style.height = '';

            if (window.innerWidth < 992) return;

            const rightHeight = rightCol.getBoundingClientRect().height;
            const leftTop = leftCol.getBoundingClientRect().top;
            const recentTop = recentCard.getBoundingClientRect().top;
            const requiredRecentHeight = rightHeight - (recentTop - leftTop);

            if (requiredRecentHeight > 0) {
                recentCard.style.height = `${Math.ceil(requiredRecentHeight)}px`;
            }
        }

        function queueSyncDashboardRecentCardHeight() {
            if (syncTimer) {
                clearTimeout(syncTimer);
            }

            syncTimer = setTimeout(() => {
                syncDashboardRecentCardHeight();
            }, 80);
        }

        document.addEventListener('DOMContentLoaded', queueSyncDashboardRecentCardHeight);
        window.addEventListener('load', queueSyncDashboardRecentCardHeight);
        window.addEventListener('resize', queueSyncDashboardRecentCardHeight);
    })();
</script>
@endpush