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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Dashboard'])

    @php
        $totals = $dashboardTotals ?? ['need_action' => 0, 'expiring' => 0, 'expired' => 0, 'still_valid' => 0, 'lifetime' => 0];
        $grandTotal = array_sum($totals);
        $safeGrandTotal = max($grandTotal, 1);
        $healthPercent = $dashboardHealthPercent ?? 0;
        $safeDocuments = ($totals['still_valid'] ?? 0) + ($totals['lifetime'] ?? 0);
        $pNeed = round(($totals['need_action'] / $safeGrandTotal) * 100, 2);
        $pExpiring = round(($totals['expiring'] / $safeGrandTotal) * 100, 2);
        $pExpired = round(($totals['expired'] / $safeGrandTotal) * 100, 2);
        $pStillValid = round(($totals['still_valid'] / $safeGrandTotal) * 100, 2);
        $pLifetime = round(($totals['lifetime'] / $safeGrandTotal) * 100, 2);
        $stopNeed = $pNeed;
        $stopExpiring = $stopNeed + $pExpiring;
        $stopExpired = $stopExpiring + $pExpired;
        $stopStillValid = $stopExpired + $pStillValid;
    @endphp

    <style>
        .dash-shell {
            --dash-bg: #f4f7fb;
            --dash-surface: #ffffff;
            --dash-ink: #13233f;
            --dash-muted: #62718f;
            --dash-stroke: #dce5f2;
            --dash-blue: #2150a7;
            --dash-amber: #d08a26;
            --dash-red: #d73a49;
            --dash-teal: #14967d;
            --dash-msj-green: #028284;
            --dash-shadow: 0 15px 40px rgba(18, 42, 81, 0.08);
            background: radial-gradient(circle at 0% 0%, #e3edff 0, transparent 42%), radial-gradient(circle at 100% 100%, #dce9ff 0, transparent 36%), var(--dash-bg);
            border-radius: 24px;
            padding: 1rem;
        }

        .dash-head {
            background: linear-gradient(120deg, #016061 0%, #028284 52%, #028284 100%);
            border-radius: 18px 18px 0 0;
            color: #fff;
            padding: 1.25rem 1.4rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 16px 38px rgba(15, 58, 128, 0.28);
            border-bottom: 1px solid rgba(255, 255, 255, 0.18);
        }

        .summary-panel {
            background: var(--dash-surface);
            border: 1px solid #dbe6f8;
            border-radius: 18px;
            box-shadow: var(--dash-shadow);
            overflow: hidden;
        }

        .summary-body {
            background: var(--dash-surface);
            border: 0;
            border-radius: 0;
            margin: 0;
            padding: 1rem 1.2rem 1.2rem;
            position: relative;
            z-index: 2;
        }

        .summary-split {
            border-left: 1px solid #e4ebf7;
            padding-left: 1rem;
        }

        .summary-badge {
            border-radius: 999px;
            font-size: .73rem;
            font-weight: 700;
            letter-spacing: .02em;
            text-transform: uppercase;
            color: #0d3f8f !important;
            box-shadow: 0 8px 20px rgba(8, 42, 102, 0.16);
        }

        .dash-head::before,
        .dash-head::after {
            content: '';
            position: absolute;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.13);
        }

        .dash-head::before {
            width: 220px;
            height: 220px;
            top: -90px;
            right: -75px;
        }

        .dash-head::after {
            width: 130px;
            height: 130px;
            bottom: -48px;
            right: 185px;
        }

        .dash-overview {
            margin-top: 1rem;
        }

        .metric-card {
            background: var(--dash-surface);
            border: 1px solid var(--dash-stroke);
            border-radius: 16px;
            box-shadow: var(--dash-shadow);
            padding: .85rem 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: transform .25s ease, box-shadow .25s ease;
            animation: rise .45s ease both;
        }

        .metric-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 18px 40px rgba(26, 44, 78, 0.14);
        }

        .metric-card .kpi {
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--dash-ink);
            line-height: 1;
        }

        .metric-card .label {
            color: var(--dash-muted);
            font-size: .77rem;
            font-weight: 700;
            letter-spacing: .03em;
            text-transform: uppercase;
            margin-bottom: .2rem;
        }

        .metric-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            color: #fff;
            font-size: .95rem;
        }

        .is-action .metric-icon {
            background: linear-gradient(130deg, #2a5ec0, #2f8de3);
        }

        .is-expiring .metric-icon {
            background: linear-gradient(130deg, #b77314, #e6a840);
        }

        .is-expired .metric-icon {
            background: linear-gradient(130deg, #be2a44, #e65b6f);
        }

        .is-valid .metric-icon {
            background: linear-gradient(130deg, #0d866e, #27b59a);
        }

        .is-lifetime .metric-icon {
            background: linear-gradient(130deg, #77839b, #96a4be);
        }

        .category-card {
            background: var(--dash-surface);
            border: 1px solid var(--dash-stroke);
            border-radius: 18px;
            box-shadow: var(--dash-shadow);
        }

        .health-card {
            background: transparent;
            border: 0;
            box-shadow: none;
            padding: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .health-head {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: .65rem;
            margin-bottom: .55rem;
            text-align: left;
        }

        .chart-card {
            background: transparent;
            border: 0;
            box-shadow: none;
            padding: 0;
            height: 100%;
            min-height: 250px;
        }

        .ring-wrap {
            width: 118px;
            height: 118px;
            border-radius: 50%;
            background: #e1e8f2;
            display: grid;
            place-items: center;
            margin: 0;
        }

        .ring-inner {
            width: 88px;
            height: 88px;
            border-radius: 50%;
            background: #fff;
            display: grid;
            place-items: center;
            color: var(--dash-ink);
            font-weight: 700;
        }

        .legend-item {
            display: inline-flex;
            align-items: center;
            font-size: .82rem;
            color: var(--dash-muted);
            margin: 0;
            justify-content: center;
            white-space: nowrap;
        }

        .health-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .9rem;
            min-height: 196px;
        }

        .ranking-wrap {
            width: 100%;
            max-width: 340px;
            margin: 0 auto;
        }

        .ranking-chart {
            width: 100%;
            display: block;
        }

        .health-legend {
            width: 100%;
            max-width: 100%;
            margin: .1rem auto 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: .4rem .9rem;
        }

        .health-meta {
            margin-top: .15rem;
            font-size: .78rem;
            color: #6f7f9f;
            text-align: center;
            flex-basis: 100%;
            width: 100%;
        }

        .legend-left {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
        }

        .dot {
            width: .58rem;
            height: .58rem;
            border-radius: 50%;
            display: inline-block;
        }

        .chart-row {
            margin-bottom: .75rem;
            opacity: 0;
            transform: translateY(12px);
        }

        .chart-top {
            display: flex;
            justify-content: space-between;
            color: var(--dash-muted);
            font-size: .77rem;
            margin-bottom: .32rem;
            font-weight: 600;
        }

        .chart-track {
            height: 8px;
            background: #e8eef8;
            border-radius: 999px;
            overflow: visible;
            display: flex;
            cursor: pointer;
            position: relative;
            transition: box-shadow .35s ease;
        }

        .chart-track > span {
            position: relative;
            z-index: 1;
            border-radius: 0;
        }

        .chart-track > span.is-start {
            border-radius: 999px 0 0 999px;
        }

        .chart-track > span.is-end {
            border-radius: 0 999px 999px 0;
        }

        .chart-track > span.is-start.is-end {
            border-radius: 999px;
        }

        .seg-bubble {
            position: absolute;
            right: -1px;
            bottom: calc(100% + 8px);
            transform: translateX(50%) translateY(6px) scale(.96);
            transform-origin: center bottom;
            opacity: 0;
            transition: opacity .22s ease, transform .22s ease;
            pointer-events: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 26px;
            height: 22px;
            padding: 0 .45rem;
            border-radius: 999px;
            color: #fff;
            font-size: .71rem;
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
            box-shadow: 0 7px 16px rgba(18, 31, 57, 0.24);
        }

        .seg-bubble::after {
            content: '';
            position: absolute;
            left: 50%;
            top: calc(100% - 1px);
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 6px solid currentColor;
            filter: brightness(0.95);
        }

        .chart-track:hover .seg-bubble,
        .chart-track.is-auto-active .seg-bubble,
        .chart-track:focus-within .seg-bubble {
            opacity: 1;
            transform: translateX(50%) translateY(0) scale(1);
        }

        .seg-action .seg-bubble {
            background: #3479d6;
            color: #3479d6;
        }

        .seg-expiring .seg-bubble {
            background: #e3a13f;
            color: #e3a13f;
        }

        .seg-expired .seg-bubble {
            background: #e2555f;
            color: #e2555f;
        }

        .seg-valid .seg-bubble {
            background: #2db59b;
            color: #2db59b;
        }

        .seg-lifetime .seg-bubble {
            background: #9ba7bf;
            color: #9ba7bf;
        }

        .seg-bubble > span {
            color: #fff;
            position: relative;
            z-index: 1;
        }

        .chart-track::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            background: #e8eef8;
            z-index: 2;
            border-radius: inherit;
            pointer-events: none;
        }

        .chart-track.is-revealed::after {
            animation: trackRevealLTR 1200ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        }

        .chart-track.is-animating {
            box-shadow: 0 0 0 3px rgba(47, 121, 219, 0.08);
        }

        .seg-action { background: #3479d6; }
        .seg-expiring { background: #e3a13f; }
        .seg-expired { background: #e2555f; }
        .seg-valid { background: #2db59b; }
        .seg-lifetime { background: #9ba7bf; }

        .category-card {
            padding: 1rem;
            margin-top: .95rem;
            animation: rise .45s ease both;
        }

        .category-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: .8rem;
        }

        .category-title {
            display: inline-flex;
            align-items: center;
            gap: .65rem;
            color: var(--dash-ink);
            font-weight: 700;
            font-size: 1.06rem;
        }

        .category-title i {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            display: grid;
            place-items: center;
            background: #eef4ff;
            color: var(--dash-msj-green);
            font-size: .95rem;
        }

        .open-link {
            border: 0;
            color: #fff;
            background: linear-gradient(130deg, #028284, #028284);
            border-radius: 11px;
            padding: .4rem .65rem;
            font-size: .75rem;
            font-weight: 600;
            text-decoration: none;
            white-space: nowrap;
            cursor: pointer;
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .open-link:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 20px rgba(15, 63, 140, 0.25);
        }

        .mini-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: .55rem;
        }

        .mini-item {
            border-radius: 12px;
            background: #f6f9ff;
            padding: .55rem .65rem;
            border: 1px solid #e4ecf8;
        }

        .mini-item .mini-label {
            color: var(--dash-muted);
            font-size: .65rem;
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: .02em;
        }

        .mini-item .mini-value {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--dash-ink);
            line-height: 1.15;
        }

        .mini-item .mini-sub {
            font-size: .68rem;
            color: var(--dash-muted);
            margin-top: .12rem;
        }

        .modal-modern .modal-content {
            border: 1px solid #d8e4f6;
            border-radius: 14px;
            overflow: hidden;
        }

        .modal-modern .modal-header {
            background: linear-gradient(130deg, #026061, #028284);
            color: #fff;
            border-bottom: 0;
        }

        .modal-modern .modal-title {
            font-weight: 700;
        }

        .modal-modern .btn-close {
            filter: invert(1) grayscale(1);
        }

        .modal-modern .status-pill {
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            border-radius: 999px;
            padding: .2rem .55rem;
            font-size: .72rem;
            font-weight: 700;
            color: #fff;
        }

        .modal-modern .status-action { background: #3479d6; }
        .modal-modern .status-expiring { background: #e3a13f; }
        .modal-modern .status-expired { background: #e2555f; }
        .modal-modern .status-valid { background: #2db59b; }
        .modal-modern .status-lifetime { background: #9ba7bf; }

        .modal-modern .table-wrap {
            border: 1px solid #e3eaf6;
            border-radius: 10px;
            overflow: auto;
            max-height: 260px;
        }

        .modal-modern table {
            margin-bottom: 0;
            font-size: .82rem;
        }

        .modal-modern thead th {
            position: sticky;
            top: 0;
            background: #eff4fb;
            z-index: 1;
            font-size: .72rem;
            text-transform: uppercase;
            letter-spacing: .03em;
            color: #4f6386;
        }

        .modal-modern .empty-row {
            color: #7b8aa9;
            text-align: center;
            font-style: italic;
        }

        .modal-modern .group-search {
            min-width: 220px;
            border-radius: 999px;
            border: 1px solid #cfdcf2;
            background: #fff;
            padding: .34rem .75rem;
            font-size: .8rem;
            color: #324968;
        }

        .modal-modern .group-search:focus {
            outline: none;
            border-color: #2f79db;
            box-shadow: 0 0 0 .16rem rgba(47, 121, 219, 0.15);
        }

        .modal-modern .detail-pagination {
            margin-top: .45rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .55rem;
        }

        .modal-modern .detail-page-info {
            font-size: .73rem;
            color: #6f809f;
            font-weight: 600;
        }

        .modal-modern .detail-page-btn {
            border: 1px solid #cad8ef;
            color: #31527f;
            background: #fff;
            border-radius: 8px;
            padding: .16rem .5rem;
            font-size: .72rem;
            font-weight: 700;
            line-height: 1.25;
        }

        .modal-modern .detail-page-btn:disabled {
            opacity: .45;
            cursor: not-allowed;
        }

        .btn-row-action {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
        }

        .btn-row-action .btn {
            border: 0;
            border-radius: 9px;
            padding: .22rem .55rem;
            font-size: .7rem;
            font-weight: 700;
            letter-spacing: .01em;
            display: inline-flex;
            align-items: center;
            gap: .26rem;
            transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
        }

        .btn-row-action .btn:hover {
            transform: translateY(-1px);
            opacity: .95;
        }

        .btn-row-action .btn-view {
            color: #fff;
            background: linear-gradient(130deg, #015c5e, #028284);
            box-shadow: 0 6px 14px rgba(24, 88, 188, 0.24);
        }

        .btn-row-action .btn-edit {
            color: #fff;
            background: linear-gradient(130deg, #ed6c4c, #ed6c4c);
            box-shadow: 0 6px 14px rgba(12, 56, 130, 0.22);
        }

        .mini-track {
            margin-top: .55rem;
            height: 6px;
            border-radius: 999px;
            background: #e7eef8;
            overflow: hidden;
            display: flex;
        }

        .mini-track span {
            display: block;
            height: 100%;
        }

        @keyframes rise {
            from {
                opacity: 0;
                transform: translateY(8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes trackRevealLTR {
            from {
                width: 100%;
            }
            to {
                width: 0;
            }
        }

        @media (max-width: 991.98px) {
            .summary-split {
                border-left: 0;
                padding-left: 0;
                padding-top: .2rem;
            }

            .mini-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 575.98px) {
            .dash-shell {
                padding: .8rem;
            }

            .dash-head {
                padding: .95rem;
            }

            .summary-body {
                padding: .8rem;
            }

            .health-content {
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-height: auto;
                gap: .75rem;
            }

            .health-legend {
                width: 100%;
                max-width: 100%;
            }

            .mini-grid {
                grid-template-columns: 1fr;
            }

            .category-head {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>

    @if (!in_array('purchs', $roles))
    <div class="container-fluid py-4">
        <div class="dash-shell">
            <div class="summary-panel">
                <div class="dash-head">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <h5 class="text-white mb-1">MSJ Document Management</h5>
                            {{-- <p class="mb-0 text-white text-sm opacity-9">
                                Ringkasan status dokumen legal dan sertifikasi dalam satu dashboard.
                            </p> --}}
                        </div>
                        <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
                            <span class="badge bg-white px-3 py-2 summary-badge">
                                Total Dokumen : <strong>{{ number_format($grandTotal) }}</strong>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="summary-body">
                    <div class="row g-3 align-items-stretch">
                        <div class="col-xl-4">
                            <div class="health-card">
                        <div class="health-head">
                            <div>
                                <h6 class="mb-1">Grafik Status Dokumen</h6>
                                <p class="text-sm text-secondary mb-0">Presentase dokumen sesuai status dari total seluruh dokumen</p>
                            </div>
                            {{-- <span class="badge bg-gradient-info">{{ $healthPercent }}%</span> --}}
                        </div>

                        <div class="health-content mt-1">
                            <div class="ranking-wrap">
                                <div id="healthRankingChart"
                                    class="ranking-chart"
                                    data-need="{{ $pNeed }}"
                                    data-expiring="{{ $pExpiring }}"
                                    data-expired="{{ $pExpired }}"
                                    data-still-valid="{{ $pStillValid }}"
                                    data-lifetime="{{ $pLifetime }}"
                                    data-health="{{ $healthPercent }}"></div>
                            </div>

                            <div class="health-legend">
                                <div class="legend-item">
                                    <span class="legend-left"><span class="dot" style="background:#3479d6"></span> Perlu Diurus</span>
                                </div>
                                <div class="legend-item">
                                    <span class="legend-left"><span class="dot" style="background:#e3a13f"></span> Akan Expired</span>
                                </div>
                                <div class="legend-item">
                                    <span class="legend-left"><span class="dot" style="background:#e2555f"></span> Sudah Expired</span>
                                </div>
                                <div class="legend-item">
                                    <span class="legend-left"><span class="dot" style="background:#2db59b"></span> Masih Berlaku</span>
                                </div>
                                {{-- <div class="health-meta">
                                     Masih Berlaku: <strong>{{ number_format($safeDocuments) }}</strong> dari <strong>{{ number_format($grandTotal) }}</strong>
                                </div> --}}
                            </div>
                        </div>
                    </div>
                        </div>

                        <div class="col-xl-8 summary-split">
                            <div class="chart-card">
                        <h6 class="mb-1">Distribusi berdasarkan Tipe</h6>
                        <p class="text-sm text-secondary mb-3">Rincian persebaran status dokumen per tipe</p>

                        @foreach (($dashboardCards ?? []) as $card)
                            @php
                                $countAction = (int) ($card['need_action'] ?? 0);
                                $countExpiring = (int) ($card['expiring'] ?? 0);
                                $countExpired = (int) ($card['expired'] ?? 0);
                                $countStillValid = (int) ($card['still_valid'] ?? 0);
                                $countLifetime = (int) ($card['lifetime'] ?? 0);
                                $categoryTotal = max(((int) ($card['total'] ?? 0)), 1);
                                $pAction = round(($countAction / $categoryTotal) * 100, 2);
                                $pExpiring = round(($countExpiring / $categoryTotal) * 100, 2);
                                $pExpired = round(($countExpired / $categoryTotal) * 100, 2);
                                $pStillValid = round(($countStillValid / $categoryTotal) * 100, 2);
                                $pLifetime = round(($countLifetime / $categoryTotal) * 100, 2);
                            @endphp

                            <div class="chart-row">
                                <div class="chart-top">
                                    <span>{{ $card['title'] }}</span>
                                    <strong>{{ number_format($card['total'] ?? 0) }} Dokumen</strong>
                                </div>
                                <div class="chart-track"
                                    data-category="{{ $card['title'] ?? '-' }}">
                                    <span class="seg-action"
                                        style="width: {{ $pAction }}%"
                                        data-segment-type="action"
                                        data-segment-value="{{ $countAction }}">
                                        @if ($countAction > 0)
                                            <span class="seg-bubble"><span>{{ number_format($countAction) }}</span></span>
                                        @endif
                                    </span>
                                    <span class="seg-expiring"
                                        style="width: {{ $pExpiring }}%"
                                        data-segment-type="expiring"
                                        data-segment-value="{{ $countExpiring }}">
                                        @if ($countExpiring > 0)
                                            <span class="seg-bubble"><span>{{ number_format($countExpiring) }}</span></span>
                                        @endif
                                    </span>
                                    <span class="seg-expired"
                                        style="width: {{ $pExpired }}%"
                                        data-segment-type="expired"
                                        data-segment-value="{{ $countExpired }}">
                                        @if ($countExpired > 0)
                                            <span class="seg-bubble"><span>{{ number_format($countExpired) }}</span></span>
                                        @endif
                                    </span>
                                    <span class="seg-valid"
                                        style="width: {{ $pStillValid }}%"
                                        data-segment-type="valid"
                                        data-segment-value="{{ $countStillValid }}">
                                        @if ($countStillValid > 0)
                                            <span class="seg-bubble"><span>{{ number_format($countStillValid) }}</span></span>
                                        @endif
                                    </span>
                                    <span class="seg-lifetime"
                                        style="width: {{ $pLifetime }}%"
                                        data-segment-type="lifetime"
                                        data-segment-value="{{ $countLifetime }}">
                                        @if ($countLifetime > 0)
                                            <span class="seg-bubble"><span>{{ number_format($countLifetime) }}</span></span>
                                        @endif
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                        </div>
                    </div>
                </div>
            </div>

            @foreach (($dashboardCards ?? []) as $idx => $card)
                @php
                    $pAction = $card['percent_need_action'] ?? 0;
                    $pExpiring = $card['percent_expiring'] ?? 0;
                    $pExpired = $card['percent_expired'] ?? 0;
                    $pStillValid = $card['percent_still_valid'] ?? 0;
                    $pLifetime = $card['percent_lifetime'] ?? 0;
                    $modalId = 'modalDashboardDetail' . $idx;
                @endphp

                <section class="category-card">
                    <div class="category-head">
                        <div class="category-title">
                            <i class="fas {{ $card['icon'] }}"></i>
                            <span>{{ $card['title'] }}</span>
                        </div>
                        <button type="button" class="open-link" data-bs-toggle="modal" data-bs-target="#{{ $modalId }}">
                            Detail <i class="fas fa-arrow-right ms-1"></i>
                        </button>
                    </div>

                    <div class="mini-grid">
                        <div class="mini-item">
                            <div class="mini-label">Data Perlu Diurus</div>
                            <div class="mini-value">{{ number_format($card['need_action']) }}</div>
                            <div class="mini-sub">dokumen</div>
                        </div>
                        <div class="mini-item">
                            <div class="mini-label">Data Akan Expired</div>
                            <div class="mini-value">{{ number_format($card['expiring']) }}</div>
                            <div class="mini-sub">dokumen</div>
                        </div>
                        <div class="mini-item">
                            <div class="mini-label">Data Sudah Expired</div>
                            <div class="mini-value">{{ number_format($card['expired']) }}</div>
                            <div class="mini-sub">dokumen</div>
                        </div>
                        <div class="mini-item">
                            <div class="mini-label">Masih Berlaku</div>
                            <div class="mini-value">{{ number_format($card['still_valid']) }}</div>
                            <div class="mini-sub">dokumen</div>
                        </div>
                    </div>
                </section>

                <div class="modal fade modal-modern" id="{{ $modalId }}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-xl modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title text-white">Tipe Dokumen - {{ $card['title'] }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                @php
                                    $detailGroups = [
                                        [
                                            'title' => 'Data Perlu Diurus',
                                            'class' => 'status-action',
                                            'count' => $card['need_action'] ?? 0,
                                            'percent' => $pAction,
                                            'items' => $card['detail_need_action'] ?? collect(),
                                        ],
                                        [
                                            'title' => 'Data Akan Expired',
                                            'class' => 'status-expiring',
                                            'count' => $card['expiring'] ?? 0,
                                            'percent' => $pExpiring,
                                            'items' => $card['detail_expiring'] ?? collect(),
                                        ],
                                        [
                                            'title' => 'Data Sudah Expired',
                                            'class' => 'status-expired',
                                            'count' => $card['expired'] ?? 0,
                                            'percent' => $pExpired,
                                            'items' => $card['detail_expired'] ?? collect(),
                                        ],
                                        [
                                            'title' => 'Masih Berlaku',
                                            'class' => 'status-valid',
                                            'count' => $card['still_valid'] ?? 0,
                                            'percent' => $pStillValid,
                                            'items' => $card['detail_still_valid'] ?? collect(),
                                        ],
                                    ];
                                @endphp

                                <div class="row g-3">
                                    @foreach ($detailGroups as $groupIndex => $group)
                                        @php
                                            $tbodyId = 'detailTableBody' . $idx . '_' . $groupIndex;
                                        @endphp
                                        <div class="col-12 col-lg-6">
                                            <div class="p-3 border rounded-3 h-100" style="background:#fbfdff;border-color:#e4ecf8 !important;">
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <span class="status-pill {{ $group['class'] }}">{{ $group['title'] }}</span>
                                                    <input
                                                        type="text"
                                                        class="group-search detail-search-input"
                                                        data-target-table="{{ $tbodyId }}"
                                                        placeholder="Cari..."
                                                        aria-label="Cari data {{ $group['title'] }}">
                                                </div>

                                                <div class="table-wrap">
                                                    <table class="table table-sm table-hover align-middle">
                                                        <thead>
                                                            <tr>
                                                                <th style="min-width:170px;">Judul</th>
                                                                <th style="min-width:140px;">Kategori</th>
                                                                <th style="min-width:120px;">Tgl Expired</th>
                                                                <th style="min-width:90px;">Status</th>
                                                                <th style="min-width:150px;">Aksi</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="{{ $tbodyId }}">
                                                            @forelse ($group['items'] as $row)
                                                                @php
                                                                    $rowId = $row->id ?? null;
                                                                @endphp
                                                                <tr class="search-row">
                                                                    <td>{{ $row->judul ?? '-' }}</td>
                                                                    <td>{{ $row->nama ?? '-' }}</td>
                                                                    <td>{{ !empty($row->tanggal_expired) ? \Carbon\Carbon::parse($row->tanggal_expired)->format('d-m-Y') : '-' }}</td>
                                                                    <td>{{ $row->status ?? '-' }}</td>
                                                                    <td>
                                                                        @if (!empty($rowId))
                                                                            <div class="btn-row-action">
                                                                                <a href="{{ url($card['route'] . '/show/' . encrypt($rowId)) }}" class="btn btn-view mb-0">
                                                                                    <i class="fas fa-eye"></i> View
                                                                                </a>
                                                                                <a href="{{ url($card['route'] . '/edit/' . encrypt($rowId)) }}" class="btn btn-edit mb-0">
                                                                                    <i class="fas fa-pen-to-square"></i> Edit
                                                                                </a>
                                                                            </div>
                                                                        @else
                                                                            <span class="text-muted">-</span>
                                                                        @endif
                                                                    </td>
                                                                </tr>
                                                            @empty
                                                                <tr>
                                                                    <td colspan="5" class="empty-row" data-base-empty="1">Tidak ada data</td>
                                                                </tr>
                                                            @endforelse
                                                            <tr class="empty-row search-empty-row" style="display:none;">
                                                                <td colspan="5">Tidak ada data sesuai pencarian</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>

                                                <div class="detail-pagination" data-pagination-controls-for="{{ $tbodyId }}">
                                                    <span class="detail-page-info" data-page-info-for="{{ $tbodyId }}">Menampilkan 0 data</span>
                                                    <div class="d-inline-flex align-items-center gap-1">
                                                        <button type="button" class="detail-page-btn" data-target-table="{{ $tbodyId }}" data-action="prev">Prev</button>
                                                        <button type="button" class="detail-page-btn" data-target-table="{{ $tbodyId }}" data-action="next">Next</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="modal-footer">
                                <a href="{{ url($card['route']) }}" class="btn btn-primary btn-sm">Buka Halaman Menu</a>
                                <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">Tutup</button>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    @else
        <div class="container-fluid py-4">
            <div class="row">
                <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                    <div class="card" style="cursor: pointer;">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <h4 id="modal1" class="text-sm mb-0 text-uppercase font-weight-bold">Email
                                            Belum
                                            Dikirim
                                        </h4>
                                        <h5 class="font-weight-bolder">
                                            {{ $countpo }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4
                                        text-end">
                                    <div class="icon icon-shape bg-warning shadow-primary text-center rounded-circle">
                                        <i class="fa fa-magnifying-glass fa-bounce text-lg opacity-10"
                                            aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                    <div class="card" style="cursor: pointer;">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <div class="numbers">
                                        <h4 id="modal2" class="text-sm mb-0 text-uppercase font-weight-bold">Total
                                            Email
                                            Terkirim Hari Ini</h4>
                                        <h5 class="font-weight-bolder">
                                            {{ $emailtudei }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-warning shadow-danger text-center rounded-circle align-items-center justify-content-center">
                                        <i class="fa fa-spinner fa-pulse text-lg opacity-10" aria-hidden="true"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var normalizeTrackEdgeRounding = function() {
                document.querySelectorAll('.chart-track').forEach(function(track) {
                    var segments = Array.from(track.querySelectorAll(':scope > span'));
                    segments.forEach(function(seg) {
                        seg.classList.remove('is-start', 'is-end');
                    });

                    var visibleSegments = segments.filter(function(seg) {
                        var widthValue = parseFloat(seg.style.width || '0');
                        return !Number.isNaN(widthValue) && widthValue > 0;
                    });

                    if (!visibleSegments.length) {
                        return;
                    }

                    visibleSegments[0].classList.add('is-start');
                    visibleSegments[visibleSegments.length - 1].classList.add('is-end');
                });
            };

            var animateDistributionBars = function() {
                var rows = document.querySelectorAll('.chart-card .chart-row');
                rows.forEach(function(row, rowIndex) {
                    row.style.opacity = '0';
                    row.style.transform = 'translateY(12px)';
                    row.style.transition = 'opacity 560ms ease, transform 560ms ease';
                    row.style.transitionDelay = (rowIndex * 110) + 'ms';

                    var totalLabel = row.querySelector('.chart-top strong');
                    if (totalLabel) {
                        totalLabel.style.opacity = '0';
                        totalLabel.style.transform = 'translateX(10px)';
                        totalLabel.style.transition = 'opacity 460ms ease, transform 460ms ease';
                        totalLabel.style.transitionDelay = ((rowIndex * 110) + 160) + 'ms';
                    }
                });

                var tracks = document.querySelectorAll('.chart-track');
                tracks.forEach(function(track) {
                    track.classList.remove('is-revealed');
                    void track.offsetWidth;
                });

                setTimeout(function() {
                    rows.forEach(function(row) {
                        row.style.opacity = '1';
                        row.style.transform = 'translateY(0)';

                        var totalLabel = row.querySelector('.chart-top strong');
                        if (totalLabel) {
                            totalLabel.style.opacity = '1';
                            totalLabel.style.transform = 'translateX(0)';
                        }
                    });

                    tracks.forEach(function(track, trackIndex) {
                        setTimeout(function() {
                            track.classList.add('is-animating');
                            track.classList.add('is-revealed');
                            setTimeout(function() {
                                track.classList.remove('is-animating');
                            }, 1300);
                        }, trackIndex * 95);
                    });
                }, 90);
            };

            var initAutoBubbleCycle = function() {
                var tracks = Array.from(document.querySelectorAll('.chart-card .chart-track'));
                if (!tracks.length) {
                    return;
                }

                var activeIndex = -1;
                var isPaused = false;
                var cycleMs = 2000;

                var clearActiveTrack = function() {
                    tracks.forEach(function(track) {
                        track.classList.remove('is-auto-active');
                    });
                };

                var playNext = function() {
                    if (isPaused) {
                        return;
                    }

                    clearActiveTrack();
                    activeIndex = (activeIndex + 1) % tracks.length;
                    tracks[activeIndex].classList.add('is-auto-active');
                };

                playNext();
                setInterval(playNext, cycleMs);

                var chartCard = document.querySelector('.chart-card');
                if (chartCard) {
                    chartCard.addEventListener('mouseenter', function() {
                        isPaused = true;
                        clearActiveTrack();
                    });

                    chartCard.addEventListener('mouseleave', function() {
                        isPaused = false;
                        playNext();
                    });
                }
            };

            var rankingEl = document.getElementById('healthRankingChart');
            if (rankingEl) {
                var values = [
                    parseFloat(rankingEl.getAttribute('data-need') || '0'),
                    parseFloat(rankingEl.getAttribute('data-expiring') || '0'),
                    parseFloat(rankingEl.getAttribute('data-expired') || '0'),
                    parseFloat(rankingEl.getAttribute('data-still-valid') || '0'),
                    parseFloat(rankingEl.getAttribute('data-lifetime') || '0')
                ];
                var colors = ['#3479d6', '#e3a13f', '#e2555f', '#2db59b', '#9ba7bf'];

                var total = values.reduce(function(sum, v) {
                    return sum + (isNaN(v) ? 0 : v);
                }, 0);

                if (total <= 0) {
                    total = 100;
                    values = [100, 0, 0, 0, 0];
                }

                var size = 320;
                var cx = 160;
                var cy = 160;
                var radius = 88;
                var stroke = 32;

                var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
                svg.setAttribute('viewBox', '0 0 320 320');
                svg.setAttribute('width', '100%');
                svg.setAttribute('height', '240');

                var track = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                track.setAttribute('cx', cx);
                track.setAttribute('cy', cy);
                track.setAttribute('r', radius);
                track.setAttribute('fill', 'none');
                track.setAttribute('stroke', '#e6ecf7');
                track.setAttribute('stroke-width', stroke);
                svg.appendChild(track);

                var polar = function(centerX, centerY, r, angleDeg) {
                    var rad = (angleDeg - 90) * Math.PI / 180;
                    return {
                        x: centerX + (r * Math.cos(rad)),
                        y: centerY + (r * Math.sin(rad))
                    };
                };

                var arcPath = function(startAngle, endAngle) {
                    var start = polar(cx, cy, radius, endAngle);
                    var end = polar(cx, cy, radius, startAngle);
                    var largeArc = endAngle - startAngle <= 180 ? '0' : '1';
                    return ['M', start.x, start.y, 'A', radius, radius, 0, largeArc, 0, end.x, end.y].join(' ');
                };

                var currentAngle = 0;
                values.forEach(function(value, idx) {
                    var sweep = (value / total) * 360;
                    if (sweep <= 0) {
                        return;
                    }

                    var endAngle = currentAngle + sweep;
                    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                    path.setAttribute('d', arcPath(currentAngle, endAngle));
                    path.setAttribute('fill', 'none');
                    path.setAttribute('stroke', colors[idx]);
                    path.setAttribute('stroke-width', stroke);
                    path.setAttribute('stroke-linecap', 'butt');

                    var segLength = path.getTotalLength ? path.getTotalLength() : 0;
                    if (segLength > 0) {
                        path.style.strokeDasharray = segLength;
                        path.style.strokeDashoffset = segLength;
                        path.style.transition = 'stroke-dashoffset 760ms cubic-bezier(0.2, 0.8, 0.2, 1) ' + (idx * 120) + 'ms';
                    }

                    svg.appendChild(path);

                    var mid = currentAngle + (sweep / 2);
                    var lineStart = polar(cx, cy, radius + (stroke / 2) - 2, mid);
                    var lineEnd = polar(cx, cy, radius + (stroke / 2) + 14, mid);
                    var labelPos = polar(cx, cy, radius + (stroke / 2) + 34, mid);

                    var connector = document.createElementNS('http://www.w3.org/2000/svg', 'line');
                    connector.setAttribute('x1', lineStart.x);
                    connector.setAttribute('y1', lineStart.y);
                    connector.setAttribute('x2', lineEnd.x);
                    connector.setAttribute('y2', lineEnd.y);
                    connector.setAttribute('stroke', colors[idx]);
                    connector.setAttribute('stroke-width', '1.8');
                    connector.style.opacity = '0';
                    connector.style.transition = 'opacity 280ms ease ' + ((idx * 120) + 440) + 'ms';
                    svg.appendChild(connector);

                    var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                    text.setAttribute('x', labelPos.x);
                    text.setAttribute('y', labelPos.y);
                    text.setAttribute('fill', colors[idx]);
                    text.setAttribute('font-size', '18');
                    text.setAttribute('font-weight', '700');
                    text.setAttribute('text-anchor', labelPos.x >= cx ? 'start' : 'end');
                    text.setAttribute('dominant-baseline', 'middle');
                    text.textContent = (Math.round((value + Number.EPSILON) * 100) / 100).toFixed(2) + '%';
                    text.style.opacity = '0';
                    text.style.transition = 'opacity 280ms ease ' + ((idx * 120) + 500) + 'ms';
                    svg.appendChild(text);

                    currentAngle = endAngle;
                });

                var inner = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                inner.setAttribute('cx', cx);
                inner.setAttribute('cy', cy);
                inner.setAttribute('r', radius - (stroke / 2) + 2);
                inner.setAttribute('fill', '#fff');
                svg.appendChild(inner);

                rankingEl.innerHTML = '';
                rankingEl.appendChild(svg);

                requestAnimationFrame(function() {
                    var segIdx = 0;
                    svg.querySelectorAll('path').forEach(function(segPath) {
                        if (segPath.style.strokeDashoffset) {
                            segPath.style.strokeDashoffset = '0';
                        }

                        segIdx += 1;
                    });

                    svg.querySelectorAll('line, text').forEach(function(node) {
                        node.style.opacity = '1';
                    });
                });
            }

            normalizeTrackEdgeRounding();
            animateDistributionBars();
            setTimeout(initAutoBubbleCycle, 2000);

            var detailTableState = {};
            var detailRowsPerPage = 5;

            var renderDetailTable = function(tbodyId) {
                var tbody = document.getElementById(tbodyId);
                if (!tbody) {
                    return;
                }

                var dataRows = Array.from(tbody.querySelectorAll('tr.search-row'));
                var staticEmptyRow = tbody.querySelector('.empty-row[data-base-empty="1"]');
                var searchEmptyRow = tbody.querySelector('.search-empty-row');
                var controlsWrap = document.querySelector('[data-pagination-controls-for="' + tbodyId + '"]');
                var pageInfo = document.querySelector('[data-page-info-for="' + tbodyId + '"]');
                var prevBtn = document.querySelector('.detail-page-btn[data-target-table="' + tbodyId + '"][data-action="prev"]');
                var nextBtn = document.querySelector('.detail-page-btn[data-target-table="' + tbodyId + '"][data-action="next"]');

                if (staticEmptyRow) {
                    staticEmptyRow.style.display = '';
                    if (searchEmptyRow) {
                        searchEmptyRow.style.display = 'none';
                    }
                    if (controlsWrap) {
                        controlsWrap.style.display = 'none';
                    }
                    return;
                }

                if (controlsWrap) {
                    controlsWrap.style.display = 'flex';
                }

                if (!detailTableState[tbodyId]) {
                    detailTableState[tbodyId] = { page: 1 };
                }

                var matchedRows = dataRows.filter(function(row) {
                    return row.dataset.matches !== '0';
                });
                var matchedCount = matchedRows.length;
                var totalPages = Math.max(1, Math.ceil(matchedCount / detailRowsPerPage));
                var currentPage = detailTableState[tbodyId].page || 1;

                if (currentPage > totalPages) {
                    currentPage = totalPages;
                }
                if (currentPage < 1) {
                    currentPage = 1;
                }

                detailTableState[tbodyId].page = currentPage;

                var startIndex = (currentPage - 1) * detailRowsPerPage;
                var endIndex = startIndex + detailRowsPerPage;

                dataRows.forEach(function(row) {
                    row.style.display = 'none';
                });

                matchedRows.slice(startIndex, endIndex).forEach(function(row) {
                    row.style.display = '';
                });

                if (searchEmptyRow) {
                    searchEmptyRow.style.display = matchedCount === 0 ? '' : 'none';
                }

                if (pageInfo) {
                    if (matchedCount === 0) {
                        pageInfo.textContent = 'Tidak ada data';
                    } else {
                        var shownFrom = startIndex + 1;
                        var shownTo = Math.min(endIndex, matchedCount);
                        pageInfo.textContent = 'Menampilkan ' + shownFrom + '-' + shownTo + ' dari ' + matchedCount + ' data (Page ' + currentPage + '/' + totalPages + ')';
                    }
                }

                if (prevBtn) {
                    prevBtn.disabled = matchedCount === 0 || currentPage <= 1;
                }

                if (nextBtn) {
                    nextBtn.disabled = matchedCount === 0 || currentPage >= totalPages;
                }
            };

            var applyDetailTableFilter = function(inputEl) {
                var tbodyId = inputEl.getAttribute('data-target-table');
                if (!tbodyId) {
                    return;
                }

                var tbody = document.getElementById(tbodyId);
                if (!tbody) {
                    return;
                }

                var keyword = (inputEl.value || '').trim().toLowerCase();
                var dataRows = tbody.querySelectorAll('tr.search-row');
                var staticEmptyRow = tbody.querySelector('.empty-row[data-base-empty="1"]');

                if (staticEmptyRow) {
                    renderDetailTable(tbodyId);
                    return;
                }

                dataRows.forEach(function(row) {
                    var rowText = (row.textContent || '').toLowerCase();
                    var isVisible = keyword === '' || rowText.indexOf(keyword) !== -1;
                    row.dataset.matches = isVisible ? '1' : '0';
                });

                if (!detailTableState[tbodyId]) {
                    detailTableState[tbodyId] = { page: 1 };
                } else {
                    detailTableState[tbodyId].page = 1;
                }

                renderDetailTable(tbodyId);
            };

            document.querySelectorAll('.detail-search-input').forEach(function(inputEl) {
                inputEl.addEventListener('input', function() {
                    applyDetailTableFilter(inputEl);
                });

                applyDetailTableFilter(inputEl);
            });

            document.querySelectorAll('.detail-page-btn').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    var tbodyId = btn.getAttribute('data-target-table');
                    var action = btn.getAttribute('data-action');
                    if (!tbodyId) {
                        return;
                    }

                    if (!detailTableState[tbodyId]) {
                        detailTableState[tbodyId] = { page: 1 };
                    }

                    if (action === 'prev') {
                        detailTableState[tbodyId].page -= 1;
                    } else if (action === 'next') {
                        detailTableState[tbodyId].page += 1;
                    }

                    renderDetailTable(tbodyId);
                });
            });

        });
    </script>
@endsection