@extends('layout.dashboard_layout')

@section('content')

    {{-- ════════════════════════════════════════════════════════════
     CUSTOM STYLES
════════════════════════════════════════════════════════════ --}}
    <style>
        :root {
            --g-50: #f0faf4;
            --g-100: #d6f0e0;
            --g-200: #aadfc2;
            --g-400: #5cba89;
            --g-500: #38a169;
            --g-600: #2d8557;
            --g-700: #1f6840;
            --g-800: #14502f;
            --g-900: #0c3620;
            --card-radius: 14px;
            --shadow-card: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .dsh-wrap {
            font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
            background: #f5f7f5;
            min-height: 100vh;
            padding: 28px 24px 48px;
        }

        /* ── TOPBAR ── */
        .dsh-topbar {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
            margin-bottom: 28px;
        }

        .dsh-topbar h1 {
            font-size: 22px;
            font-weight: 700;
            color: var(--g-800);
            letter-spacing: -.3px;
        }

        .dsh-topbar p {
            font-size: 13px;
            color: #6b7280;
            margin-top: 3px;
        }

        .dsh-badge-live {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--g-50);
            border: 1px solid var(--g-200);
            color: var(--g-700);
            font-size: 12px;
            font-weight: 600;
            border-radius: 20px;
            padding: 4px 10px;
            margin-top: 6px;
        }

        .dsh-badge-live span {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--g-500);
            animation: pulse 1.8s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1
            }

            50% {
                opacity: .4
            }
        }

        /* ── FILTER ── */
        .dsh-filter {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .dsh-filter select {
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 13px;
            padding: 8px 12px;
            background: #fff;
            color: #374151;
            outline: none;
            transition: border .15s;
        }

        .dsh-filter select:focus {
            border-color: var(--g-500);
        }

        .dsh-filter button {
            background: var(--g-600);
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            border: none;
            border-radius: 8px;
            padding: 8px 18px;
            cursor: pointer;
            transition: background .15s;
        }

        .dsh-filter button:hover {
            background: var(--g-700);
        }

        /* ── STAT CARDS ── */
        .dsh-stats {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 14px;
            margin-bottom: 24px;
        }

        .stat-card {
            background: #fff;
            border-radius: var(--card-radius);
            border: 1px solid #e9ede9;
            padding: 18px 16px;
            box-shadow: var(--shadow-card);
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
        }

        .stat-card.green::before {
            background: var(--g-500);
        }

        .stat-card.indigo::before {
            background: #6366f1;
        }

        .stat-card.emerald::before {
            background: #10b981;
        }

        .stat-card.amber::before {
            background: #f59e0b;
        }

        .stat-card.red::before {
            background: #ef4444;
        }

        .stat-card.slate::before {
            background: #64748b;
        }

        .stat-card.teal::before {
            background: #14b8a6;
        }

        .stat-card .sc-label {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .6px;
            text-transform: uppercase;
            color: #9ca3af;
            margin-bottom: 8px;
        }

        .stat-card .sc-value {
            font-size: 32px;
            font-weight: 700;
            line-height: 1;
        }

        .stat-card.green .sc-value {
            color: var(--g-600);
        }

        .stat-card.indigo .sc-value {
            color: #6366f1;
        }

        .stat-card.emerald .sc-value {
            color: #059669;
        }

        .stat-card.amber .sc-value {
            color: #d97706;
        }

        .stat-card.red .sc-value {
            color: #dc2626;
        }

        .stat-card.slate .sc-value {
            color: #475569;
        }

        .stat-card.teal .sc-value {
            color: #0d9488;
        }

        .stat-card .sc-icon {
            position: absolute;
            bottom: 12px;
            right: 14px;
            font-size: 28px;
            opacity: .08;
        }

        /* ── ALERT ── */
        .dsh-alert {
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: var(--card-radius);
            padding: 16px 18px;
            margin-bottom: 24px;
        }

        .dsh-alert-head {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }

        .dsh-alert-head svg {
            color: #d97706;
            flex-shrink: 0;
        }

        .dsh-alert-head span {
            font-size: 13px;
            font-weight: 700;
            color: #92400e;
        }

        .dsh-alert-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #fff;
            border-radius: 8px;
            padding: 10px 14px;
            border: 1px solid #fde68a;
            margin-bottom: 6px;
        }

        .dsh-alert-row:last-child {
            margin-bottom: 0;
        }

        .dsh-alert-row .ar-info {
            font-size: 13px;
        }

        .dsh-alert-row .ar-info strong {
            color: #374151;
            font-weight: 600;
        }

        .dsh-alert-row .ar-info span {
            color: #9ca3af;
        }

        .dsh-alert-row .ar-due {
            font-size: 11px;
            font-weight: 700;
            color: #dc2626;
            background: #fee2e2;
            padding: 3px 10px;
            border-radius: 20px;
        }

        /* ── GRID MAIN ── */
        .dsh-main {
            display: grid;
            grid-template-columns: 1fr 340px;
            gap: 20px;
            margin-bottom: 24px;
        }

        @media(max-width: 960px) {
            .dsh-main {
                grid-template-columns: 1fr;
            }
        }

        /* ── CARDS SHARED ── */
        .dsh-card {
            background: #fff;
            border-radius: var(--card-radius);
            border: 1px solid #e9ede9;
            box-shadow: var(--shadow-card);
            overflow: hidden;
        }

        .dsh-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid #f3f4f6;
        }

        .dsh-card-head h2 {
            font-size: 14px;
            font-weight: 700;
            color: #1f2937;
        }

        .dsh-card-head a {
            font-size: 12px;
            color: var(--g-600);
            text-decoration: none;
            font-weight: 600;
        }

        .dsh-card-head a:hover {
            color: var(--g-700);
        }

        /* ── TABLE ── */
        .dsh-table-wrap {
            overflow-x: auto;
        }

        table.dsh-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        table.dsh-table thead th {
            background: #f9fafb;
            color: #6b7280;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
            padding: 10px 16px;
            text-align: left;
            border-bottom: 1px solid #f3f4f6;
        }

        table.dsh-table tbody tr {
            border-bottom: 1px solid #f9fafb;
            transition: background .1s;
        }

        table.dsh-table tbody tr:hover {
            background: #f9fafb;
        }

        table.dsh-table tbody tr:last-child {
            border-bottom: none;
        }

        table.dsh-table td {
            padding: 10px 16px;
            color: #4b5563;
            vertical-align: middle;
        }

        table.dsh-table td.td-name {
            font-weight: 600;
            color: #111827;
        }

        table.dsh-table td.td-muted {
            color: #9ca3af;
            font-size: 12px;
        }

        /* ── BADGES ── */
        .badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            white-space: nowrap;
        }

        .badge-green {
            background: #d1fae5;
            color: #065f46;
        }

        .badge-yellow {
            background: #fef3c7;
            color: #92400e;
        }

        .badge-red {
            background: #fee2e2;
            color: #991b1b;
        }

        .badge-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }

        .badge-green .badge-dot {
            background: #059669;
        }

        .badge-yellow .badge-dot {
            background: #d97706;
        }

        .badge-red .badge-dot {
            background: #dc2626;
        }

        /* ── SIDEBAR CARDS ── */
        .dsh-sidebar {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .worker-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px solid #f3f4f6;
        }

        .worker-row:last-child {
            border-bottom: none;
        }

        .worker-rank {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--g-50);
            color: var(--g-700);
            font-size: 12px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .worker-rank.rank-1 {
            background: #fef3c7;
            color: #92400e;
        }

        .worker-rank.rank-2 {
            background: #f3f4f6;
            color: #374151;
        }

        .worker-rank.rank-3 {
            background: #fed7aa;
            color: #92400e;
        }

        .worker-info {
            flex: 1;
            min-width: 0;
        }

        .worker-info p {
            font-size: 13px;
            font-weight: 600;
            color: #111827;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .worker-info span {
            font-size: 11px;
            color: #9ca3af;
        }

        .worker-count {
            font-size: 14px;
            font-weight: 700;
            color: var(--g-700);
        }

        /* ── PROGRESS BAR ── */
        .jenis-row {
            margin-bottom: 14px;
        }

        .jenis-row:last-child {
            margin-bottom: 0;
        }

        .jenis-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }

        .jenis-meta span {
            font-size: 13px;
            color: #374151;
            font-weight: 500;
        }

        .jenis-meta strong {
            font-size: 13px;
            font-weight: 700;
            color: #111827;
        }

        .prog-track {
            height: 6px;
            background: #f0faf4;
            border-radius: 99px;
            overflow: hidden;
        }

        .prog-fill {
            height: 6px;
            background: linear-gradient(90deg, var(--g-400), var(--g-600));
            border-radius: 99px;
            transition: width .6s ease;
        }

        /* ── BLOCK TABLE ── */
        .pct-bar {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .pct-track {
            flex: 1;
            height: 5px;
            background: #f0faf4;
            border-radius: 99px;
            overflow: hidden;
        }

        .pct-fill {
            height: 5px;
            border-radius: 99px;
        }

        .pct-fill.full {
            background: #059669;
        }

        .pct-fill.part {
            background: var(--g-500);
        }

        .pct-label {
            font-size: 11px;
            color: #9ca3af;
            min-width: 28px;
            text-align: right;
        }

        /* ── CHART AREA ── */
        .dsh-chart-area {
            padding: 20px;
        }

        /* ── VERIFIKASI ── */
        .ver-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            padding: 14px 20px;
            border-bottom: 1px solid #f3f4f6;
        }

        .ver-row:last-child {
            border-bottom: none;
        }

        .ver-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--g-400);
            flex-shrink: 0;
            margin-top: 5px;
        }

        .ver-info {
            flex: 1;
            min-width: 0;
        }

        .ver-info h3 {
            font-size: 13px;
            font-weight: 600;
            color: #111827;
        }

        .ver-info p {
            font-size: 12px;
            color: #9ca3af;
            margin-top: 2px;
        }

        .ver-stats {
            text-align: right;
            font-size: 12px;
            color: #9ca3af;
            flex-shrink: 0;
        }

        .ver-stats span {
            display: block;
        }

        .ver-stats .vs-dead {
            color: #dc2626;
            font-weight: 600;
        }

        .ver-stats .vs-alive {
            color: #059669;
            font-weight: 600;
        }

        /* ── EMPTY ── */
        .dsh-empty {
            padding: 36px;
            text-align: center;
            color: #d1d5db;
            font-size: 13px;
        }

        /* ── SECTION HEADER ── */
        .dsh-section-title {
            font-size: 14px;
            font-weight: 700;
            color: #374151;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .dsh-section-title::before {
            content: '';
            width: 3px;
            height: 16px;
            background: var(--g-500);
            border-radius: 2px;
            display: inline-block;
        }

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

            .dsh-topbar {
                flex-direction: column;
                align-items: flex-start;
            }

            .dsh-wrap {
                padding: 16px 14px 48px;
            }
        }
    </style>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap"
        rel="stylesheet">

    <div class="dsh-wrap">

        {{-- ── TOPBAR ────────────────────────────────────────── --}}
        <div class="dsh-topbar">
            <div>
                <h1>Dashboard Spraying</h1>
                <p>Data per {{ now()->translatedFormat('d F Y') }}</p>
                <div class="dsh-badge-live"><span></span> Live</div>
            </div>
            <form method="GET" action="{{ route('dashboard') }}" class="dsh-filter">
                <select name="bulan">
                    @foreach (range(1, 12) as $m)
                        <option value="{{ $m }}" {{ $filterBulan == $m ? 'selected' : '' }}>
                            {{ \Carbon\Carbon::create()->month($m)->translatedFormat('F') }}
                        </option>
                    @endforeach
                </select>
                <select name="tahun">
                    @foreach (range(now()->year - 2, now()->year) as $y)
                        <option value="{{ $y }}" {{ $filterTahun == $y ? 'selected' : '' }}>{{ $y }}
                        </option>
                    @endforeach
                </select>
                <button type="submit">Filter</button>
            </form>
        </div>

        {{-- ── STAT CARDS ─────────────────────────────────────── --}}
        <div class="dsh-stats">
            <div class="stat-card green">
                <div class="sc-label">Spraying Hari Ini</div>
                <div class="sc-value">{{ $totalSprayingHariIni }}</div>
                <div class="sc-icon">🌿</div>
            </div>
            <div class="stat-card indigo">
                <div class="sc-label">Bulan Ini</div>
                <div class="sc-value">{{ $totalSprayingBulanIni }}</div>
                <div class="sc-icon">📅</div>
            </div>
            <div class="stat-card emerald">
                <div class="sc-label">Sudah Verifikasi</div>
                <div class="sc-value">{{ $totalSudahVerifikasi }}</div>
                <div class="sc-icon">✓</div>
            </div>
            <div class="stat-card amber">
                <div class="sc-label">Belum Verifikasi</div>
                <div class="sc-value">{{ $totalBelumVerifikasi }}</div>
                <div class="sc-icon">⏳</div>
            </div>
            <div class="stat-card red">
                <div class="sc-label">Overdue Verifikasi</div>
                <div class="sc-value">{{ $totalOverdue }}</div>
                <div class="sc-icon">⚠</div>
            </div>
            <div class="stat-card slate">
                <div class="sc-label">Total Block</div>
                <div class="sc-value">{{ $totalBlock }}</div>
                <div class="sc-icon">🗺</div>
            </div>
            <div class="stat-card teal">
                <div class="sc-label">Pekerja Aktif</div>
                <div class="sc-value">{{ $totalWorker }}</div>
                <div class="sc-icon">👷</div>
            </div>
        </div>

        {{-- ── ALERT MENDEKATI DUE DATE ─────────────────────── --}}
        @if ($mendekatiDueDate->count() > 0)
            <div class="dsh-alert">
                <div class="dsh-alert-head">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
                    </svg>
                    <span>{{ $mendekatiDueDate->count() }} spraying mendekati batas verifikasi (≤ 7 hari)</span>
                </div>
                @foreach ($mendekatiDueDate as $item)
                    <div class="dsh-alert-row">
                        <div class="ar-info">
                            <strong>{{ $item->block->block_name ?? '-' }}</strong>
                            <span> · {{ $item->jenis_semprot }} · Baris {{ $item->baris }}</span>
                        </div>
                        <div class="ar-due">Due {{ $item->verification_due_date->diffForHumans() }}</div>
                    </div>
                @endforeach
            </div>
        @endif

        {{-- ── MAIN GRID ────────────────────────────────────── --}}
        <div class="dsh-main">

            {{-- LEFT: Spraying Terbaru --}}
            <div class="dsh-card">
                <div class="dsh-card-head">
                    <h2>Spraying Terbaru</h2>
                    <a href="">Lihat semua →</a>
                </div>
                <div class="dsh-table-wrap">
                    <table class="dsh-table">
                        <thead>
                            <tr>
                                <th>Tanggal</th>
                                <th>Block</th>
                                <th>Jenis</th>
                                <th>Baris</th>
                                <th>Mandor</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($sprayingTerbaru as $spraying)
                                <tr>
                                    <td class="td-muted">{{ $spraying->spray_datetime->format('d/m/Y H:i') }}</td>
                                    <td>
                                        <span class="td-name">{{ $spraying->block->block_name ?? '-' }}</span>
                                        <span class="td-muted"> {{ $spraying->block->afd ?? '' }}</span>
                                    </td>
                                    <td>{{ $spraying->jenis_semprot }}</td>
                                    <td>{{ $spraying->baris }}</td>
                                    <td>{{ $spraying->creator->name ?? '-' }}</td>
                                    <td>
                                        @if ($spraying->verification)
                                            <span class="badge badge-green"><span
                                                    class="badge-dot"></span>Terverifikasi</span>
                                        @elseif($spraying->verification_due_date && $spraying->verification_due_date->isPast())
                                            <span class="badge badge-red"><span class="badge-dot"></span>Overdue</span>
                                        @else
                                            <span class="badge badge-yellow"><span class="badge-dot"></span>Pending</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="dsh-empty">Belum ada data spraying.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- RIGHT: Sidebar --}}
            <div class="dsh-sidebar">

                {{-- Top 5 Pekerja --}}
                <div class="dsh-card">
                    <div class="dsh-card-head">
                        <h2>Top Pekerja Bulan Ini</h2>
                    </div>
                    <div style="padding: 8px 16px 14px;">
                        @forelse($topWorker as $i => $worker)
                            <div class="worker-row">
                                <div
                                    class="worker-rank {{ $i == 0 ? 'rank-1' : ($i == 1 ? 'rank-2' : ($i == 2 ? 'rank-3' : '')) }}">
                                    {{ $i + 1 }}
                                </div>
                                <div class="worker-info">
                                    <p>{{ $worker->nama_pekerja }}</p>
                                    <span>{{ $worker->pekerja_code }}</span>
                                </div>
                                <div class="worker-count">{{ $worker->total_spraying_bulan_ini }}×</div>
                            </div>
                        @empty
                            <div class="dsh-empty">Belum ada data.</div>
                        @endforelse
                    </div>
                </div>

                {{-- Jenis Semprot --}}
                <div class="dsh-card">
                    <div class="dsh-card-head">
                        <h2>
                            Jenis Semprot
                            <span style="font-size:11px;color:#9ca3af;font-weight:500;margin-left:4px;">
                                {{ \Carbon\Carbon::create()->month($filterBulan)->translatedFormat('M') }}
                                {{ $filterTahun }}
                            </span>
                        </h2>
                    </div>
                    <div style="padding: 14px 16px 16px;">
                        @forelse($rekapJenisSemprot as $rekap)
                            @php $pctJ = $rekapJenisSemprot->sum('total') > 0 ? round(($rekap->total / $rekapJenisSemprot->sum('total')) * 100) : 0; @endphp
                            <div class="jenis-row">
                                <div class="jenis-meta">
                                    <span>{{ $rekap->jenis_semprot }}</span>
                                    <strong>{{ $rekap->total }}</strong>
                                </div>
                                <div class="prog-track">
                                    <div class="prog-fill" style="width:{{ $pctJ }}%;"></div>
                                </div>
                            </div>
                        @empty
                            <div class="dsh-empty">Belum ada data.</div>
                        @endforelse
                    </div>
                </div>

            </div>
        </div>

        {{-- ── REKAP PER BLOCK ────────────────────────────── --}}
        <div class="dsh-card" style="margin-bottom: 24px;">
            <div class="dsh-card-head">
                <h2>Rekap Per Block</h2>
            </div>
            <div class="dsh-table-wrap">
                <table class="dsh-table">
                    <thead>
                        <tr>
                            <th>AFD</th>
                            <th>Block</th>
                            <th style="text-align:center">Total</th>
                            <th style="text-align:center">Terverifikasi</th>
                            <th style="text-align:center">Pending</th>
                            <th>Progress</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($rekapPerBlock as $block)
                            @php $pctB = $block->total_spraying > 0 ? round(($block->spraying_terverifikasi / $block->total_spraying) * 100) : 0; @endphp
                            <tr>
                                <td class="td-muted">{{ $block->afd }}</td>
                                <td class="td-name">{{ $block->block_name }}</td>
                                <td style="text-align:center;font-weight:600;color:#374151">{{ $block->total_spraying }}
                                </td>
                                <td style="text-align:center"><span
                                        style="color:#059669;font-weight:600">{{ $block->spraying_terverifikasi }}</span>
                                </td>
                                <td style="text-align:center">
                                    <span
                                        style="{{ $block->spraying_belum_verifikasi > 0 ? 'color:#d97706' : 'color:#d1d5db' }};font-weight:600">
                                        {{ $block->spraying_belum_verifikasi }}
                                    </span>
                                </td>
                                <td>
                                    <div class="pct-bar">
                                        <div class="pct-track">
                                            <div class="pct-fill {{ $pctB == 100 ? 'full' : 'part' }}"
                                                style="width:{{ $pctB }}%"></div>
                                        </div>
                                        <span class="pct-label">{{ $pctB }}%</span>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="dsh-empty">Belum ada data block.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- ── TREND CHART ─────────────────────────────────── --}}
        <div class="dsh-card" style="margin-bottom: 24px;">
            <div class="dsh-card-head">
                <h2>Trend Spraying 6 Bulan Terakhir</h2>
            </div>
            <div class="dsh-chart-area">
                <canvas id="trendChart" height="90"></canvas>
            </div>
        </div>

        {{-- ── VERIFIKASI TERBARU ──────────────────────────── --}}
        <div class="dsh-card">
            <div class="dsh-card-head">
                <h2>Verifikasi Terbaru</h2>
            </div>
            @forelse($verifikasiTerbaru as $ver)
                <div class="ver-row">
                    <div class="ver-dot"></div>
                    <div class="ver-info">
                        <h3>
                            {{ $ver->spraying->block->block_name ?? '-' }}
                            <span style="color:#9ca3af;font-weight:400"> ·
                                {{ $ver->spraying->jenis_semprot ?? '' }}</span>
                        </h3>
                        <p>Oleh <strong style="color:#374151">{{ $ver->verifier->name ?? '-' }}</strong> ·
                            {{ $ver->verified_at?->diffForHumans() }}</p>
                    </div>
                    <div class="ver-stats">
                        <span>Pokok: <strong style="color:#374151">{{ $ver->total_pokok }}</strong></span>
                        <span class="vs-dead">Mati: {{ $ver->total_mati }}</span>
                        <span class="vs-alive">Hidup: {{ $ver->total_tidak_mati }}</span>
                    </div>
                </div>
            @empty
                <div class="dsh-empty">Belum ada verifikasi.</div>
            @endforelse
        </div>

    </div>

    {{-- ── CHART.JS ───────────────────────────────────────────── --}}
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <script>
        const labels = @json($trendBulanan->pluck('label'));
        const totals = @json($trendBulanan->pluck('total'));
        const verified = @json($trendBulanan->pluck('verified'));

        new Chart(document.getElementById('trendChart'), {
            type: 'bar',
            data: {
                labels,
                datasets: [{
                        label: 'Total Spraying',
                        data: totals,
                        backgroundColor: 'rgba(56,161,105,.12)',
                        borderColor: 'rgba(56,161,105,.7)',
                        borderWidth: 1.5,
                        borderRadius: 5,
                        order: 2,
                    },
                    {
                        label: 'Terverifikasi',
                        data: verified,
                        type: 'line',
                        borderColor: '#38a169',
                        backgroundColor: 'rgba(56,161,105,.08)',
                        borderWidth: 2,
                        pointBackgroundColor: '#38a169',
                        pointRadius: 4,
                        pointHoverRadius: 6,
                        fill: true,
                        tension: .35,
                        order: 1,
                    }
                ]
            },
            options: {
                responsive: true,
                interaction: {
                    mode: 'index',
                    intersect: false
                },
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            font: {
                                size: 12,
                                family: "'Plus Jakarta Sans',sans-serif"
                            },
                            boxWidth: 12,
                            padding: 16
                        }
                    },
                    tooltip: {
                        backgroundColor: '#fff',
                        titleColor: '#111827',
                        bodyColor: '#6b7280',
                        borderColor: '#e5e7eb',
                        borderWidth: 1,
                        padding: 12,
                        cornerRadius: 8,
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1,
                            font: {
                                size: 11,
                                family: "'Plus Jakarta Sans',sans-serif"
                            },
                            color: '#9ca3af'
                        },
                        grid: {
                            color: 'rgba(0,0,0,.04)'
                        },
                        border: {
                            dash: [4, 4]
                        }
                    },
                    x: {
                        ticks: {
                            font: {
                                size: 11,
                                family: "'Plus Jakarta Sans',sans-serif"
                            },
                            color: '#9ca3af'
                        },
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });
    </script>

@endsection