@extends('layout.public')
@php
    $activeEnv = session('env', 'uat'); // default UAT
@endphp
@section('title')
    {{ strtoupper($activeEnv) }} Group Process Dashboard
@endsection

@section('style')
    <style>
        /* ═══════════════════════════════════════════
           DESIGN TOKENS — ENV-AWARE
        ═══════════════════════════════════════════ */
        :root {
            --font-main: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
            --font-mono: 'JetBrains Mono', monospace;
            --radius: 10px;
            --radius-sm: 6px;
            --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.07);
            --transition: .18s ease;
        }

        /* UAT THEME — Cool slate */
        [data-env="uat"] {
            --env-color:       #f59e0b;
            --env-color-soft:  rgba(245,158,11,.12);
            --env-color-border:rgba(245,158,11,.3);
            --env-label:       "UAT";

            --header-bg:       #0f172a;
            --header-border:   rgba(245,158,11,.2);
            --header-glow:     rgba(245,158,11,.06);

            --accent:          #3b82f6;
            --accent-soft:     rgba(59,130,246,.12);
            --accent-border:   rgba(59,130,246,.3);

            --body-bg:         #f1f5f9;
            --surface:         #ffffff;
            --surface-2:       #f8fafc;
            --border:          #e2e8f0;
            --text:            #0f172a;
            --text-muted:      #64748b;
            --text-light:      #94a3b8;

            --nav-text:        #94a3b8;
            --nav-active-text: #f59e0b;
            --nav-active-bg:   rgba(245,158,11,.1);
            --nav-hover-bg:    rgba(255,255,255,.06);
            --nav-hover-text:  #e2e8f0;
        }

        /* LIVE THEME — Deep emerald authority */
        [data-env="live"] {
            --env-color:       #22c55e;
            --env-color-soft:  rgba(34,197,94,.12);
            --env-color-border:rgba(34,197,94,.3);

            --header-bg:       #041a0f;
            --header-border:   rgba(34,197,94,.25);
            --header-glow:     rgba(34,197,94,.06);

            --accent:          #22c55e;
            --accent-soft:     rgba(34,197,94,.12);
            --accent-border:   rgba(34,197,94,.3);

            --body-bg:         #f0fdf4;
            --surface:         #ffffff;
            --surface-2:       #f0fdf4;
            --border:          #d1fae5;
            --text:            #052e16;
            --text-muted:      #166534;
            --text-light:      #4ade80;

            --nav-text:        rgba(134,239,172,.7);
            --nav-active-text: #4ade80;
            --nav-active-bg:   rgba(34,197,94,.14);
            --nav-hover-bg:    rgba(255,255,255,.06);
            --nav-hover-text:  #bbf7d0;
        }

        /* ═══════════════════════════════════════════
           BASE
        ═══════════════════════════════════════════ */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { font-size: 14px; }
        body {
            font-family: var(--font-main);
            background: var(--body-bg);
            color: var(--text);
            min-height: 100vh;
            transition: background var(--transition), color var(--transition);
        }

        /* ═══════════════════════════════════════════
           HEADER
        ═══════════════════════════════════════════ */
        .cdsl-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: var(--header-bg);
            border-bottom: 1px solid var(--header-border);
            box-shadow: 0 2px 30px rgba(0,0,0,.35), 0 0 0 0 var(--header-glow);
            transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
        }

        /* Env stripe — thin colored top bar */
        .cdsl-header::before {
            content: '';
            display: block;
            height: 3px;
            background: linear-gradient(90deg, var(--env-color), transparent 80%);
            transition: background .35s ease;
        }

        .cdsl-container {
            display: flex;
            align-items: center;
            gap: 8px;
            height: 58px;
            max-width: 1440px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Brand */
        .cdsl-brand {
            display: flex;
            align-items: center;
            gap: 9px;
            text-decoration: none;
            flex-shrink: 0;
            transition: opacity var(--transition);
        }
        .cdsl-brand:hover { opacity: .85; }
        .brand-mark {
            width: 34px; height: 34px;
            border-radius: 8px;
            background: linear-gradient(135deg, var(--env-color) 0%, color-mix(in srgb, var(--env-color) 60%, #000) 100%);
            display: flex; align-items: center; justify-content: center;
            font-weight: 800; font-size: 14px; color: #fff;
            transition: background .35s ease;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,.25);
        }
        .brand-name {
            font-size: 15px;
            font-weight: 800;
            color: #fff;
            letter-spacing: -.02em;
        }
        .brand-name em {
            font-style: normal;
            color: var(--env-color);
            transition: color .35s ease;
        }

        /* Nav */
        .cdsl-nav {
            display: flex;
            align-items: center;
            list-style: none;
            gap: 2px;
            margin: 0 auto;
            padding: 0;
        }
        .cdsl-nav-link {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 6px 12px;
            font-size: 12.5px;
            font-weight: 600;
            color: var(--nav-text);
            text-decoration: none;
            border-radius: var(--radius-sm);
            white-space: nowrap;
            transition: color .16s, background .16s;
            position: relative;
        }
        .cdsl-nav-link:hover { color: var(--nav-hover-text); background: var(--nav-hover-bg); }
        .cdsl-nav-link.active { color: var(--nav-active-text); background: var(--nav-active-bg); }
        .cdsl-nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -3px; left: 12px; right: 12px;
            height: 2px;
            background: var(--env-color);
            border-radius: 2px 2px 0 0;
            transition: background .35s ease;
        }

        /* Actions */
        .cdsl-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        /* ENV pill */
        .env-pill {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,.05);
            border: 1px solid var(--env-color-border);
            border-radius: 20px;
            padding: 4px 10px 4px 6px;
            transition: border-color .35s ease;
        }
        .env-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: var(--env-color);
            box-shadow: 0 0 6px var(--env-color);
            animation: pulse-dot 2s infinite;
            transition: background .35s ease, box-shadow .35s ease;
            flex-shrink: 0;
        }
        @keyframes pulse-dot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: .7; transform: scale(1.3); }
        }
        .env-label-text {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .1em;
            color: var(--env-color);
            font-family: var(--font-mono);
            transition: color .35s ease;
            min-width: 28px;
        }

        /* Toggle */
        .toggle-switch { cursor: pointer; display: flex; align-items: center; }
        .toggle-switch input { display: none; }
        .toggle-track {
            width: 34px; height: 18px;
            border-radius: 9px;
            background: rgba(255,255,255,.1);
            border: 1px solid rgba(255,255,255,.15);
            position: relative;
            transition: background .25s, border-color .25s;
        }
        .toggle-switch input:checked ~ .toggle-track {
            background: var(--env-color);
            border-color: var(--env-color);
        }
        .toggle-thumb {
            position: absolute;
            top: 2px; left: 2px;
            width: 12px; height: 12px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0,0,0,.3);
            transition: transform .22s cubic-bezier(.4,0,.2,1);
        }
        .toggle-switch input:checked ~ .toggle-track .toggle-thumb { transform: translateX(16px); }

        /* Buttons */
        .cdsl-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 13px;
            font-size: 12.5px;
            font-weight: 600;
            font-family: var(--font-main);
            border-radius: var(--radius-sm);
            border: 1px solid transparent;
            cursor: pointer;
            text-decoration: none;
            transition: all .16s;
            white-space: nowrap;
            line-height: 1.4;
        }
        .btn-outline {
            background: transparent;
            border-color: rgba(255,255,255,.14);
            color: rgba(255,255,255,.8);
        }
        .btn-outline:hover {
            background: rgba(255,255,255,.08);
            border-color: rgba(255,255,255,.25);
            color: #fff;
        }
        .btn-danger {
            background: rgba(239,68,68,.1);
            border-color: rgba(239,68,68,.25);
            color: #ef4444;
        }
        .btn-danger:hover {
            background: rgba(239,68,68,.2);
            border-color: rgba(239,68,68,.5);
        }

        /* Hamburger */
        .cdsl-hamburger {
            display: none;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            width: 36px; height: 36px;
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.1);
            border-radius: var(--radius-sm);
            padding: 8px 9px;
            cursor: pointer;
            margin-left: auto;
            flex-shrink: 0;
        }
        .cdsl-hamburger span {
            display: block; height: 2px;
            background: rgba(255,255,255,.6);
            border-radius: 2px;
            transition: transform .22s, opacity .2s;
            width: 100%;
        }
        .cdsl-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .cdsl-hamburger.open span:nth-child(2) { opacity: 0; }
        .cdsl-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

        /* Mobile menu */
        .cdsl-mobile-menu {
            display: none;
            background: var(--header-bg);
            border-top: 1px solid rgba(255,255,255,.06);
            padding: 12px 16px 16px;
            flex-direction: column;
            gap: 6px;
            transition: background .35s;
        }
        .cdsl-mobile-menu.open { display: flex; }
        .mobile-nav { display: flex; flex-direction: column; gap: 2px; }
        .mobile-nav-link {
            padding: 9px 12px;
            font-size: 13px; font-weight: 600;
            color: var(--nav-text);
            text-decoration: none;
            border-radius: var(--radius-sm);
            transition: background .14s, color .14s;
        }
        .mobile-nav-link:hover { background: var(--nav-hover-bg); color: var(--nav-hover-text); }
        .mobile-env-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: rgba(255,255,255,.04);
            border-radius: var(--radius-sm);
            border: 1px solid rgba(255,255,255,.06);
            margin-bottom: 4px;
        }
        .mobile-env-row span { font-size: 12px; color: rgba(255,255,255,.5); }
        .mobile-action-row {
            display: flex; gap: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(255,255,255,.06);
            margin-top: 2px;
        }
        .mobile-action-row .cdsl-btn { flex: 1; justify-content: center; }

        @media (max-width: 1024px) {
            .cdsl-nav { display: none; }
            .cdsl-actions { display: none; }
            .cdsl-hamburger { display: flex; }
        }
        @media (min-width: 1025px) {
            .cdsl-mobile-menu { display: none !important; }
        }

        /* ═══════════════════════════════════════════
           BODY / PAGE LAYOUT
        ═══════════════════════════════════════════ */
        .page-wrapper {
            max-width: 1440px;
            margin: 0 auto;
            padding: 24px 20px 40px;
        }

        /* Page header bar */
        .page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }
        .page-title {
            font-size: 18px;
            font-weight: 800;
            color: var(--text);
            letter-spacing: -.02em;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .page-title .env-chip {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .08em;
            padding: 3px 9px;
            border-radius: 20px;
            background: var(--env-color-soft);
            color: var(--env-color);
            border: 1px solid var(--env-color-border);
            font-family: var(--font-mono);
            transition: all .35s;
        }
        .page-subtitle {
            font-size: 12.5px;
            color: var(--text-muted);
            margin-top: 2px;
        }

        /* Grid layout */
        .dashboard-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }
        @media (max-width: 768px) {
            .dashboard-grid { grid-template-columns: 1fr; }
        }

        /* Card */
        .cdsl-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-card);
            overflow: hidden;
            transition: background var(--transition), border-color var(--transition);
        }
        .card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px 12px;
            border-bottom: 1px solid var(--border);
            gap: 8px;
            flex-wrap: wrap;
        }
        .card-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 8px;
            letter-spacing: -.01em;
        }
        .card-title-icon {
            width: 26px; height: 26px;
            border-radius: 6px;
            background: var(--accent-soft);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            transition: background .35s;
        }
        .card-title-icon svg { color: var(--accent); transition: color .35s; }
        .count-badge {
            font-size: 10px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 12px;
            background: var(--surface-2);
            border: 1px solid var(--border);
            color: var(--text-muted);
            font-family: var(--font-mono);
        }

        /* Table */
        .cdsl-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12.5px;
        }
        .cdsl-table thead th {
            padding: 9px 12px;
            text-align: left;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--text-light);
            background: var(--surface-2);
            border-bottom: 1px solid var(--border);
            white-space: nowrap;
        }
        .cdsl-table tbody tr {
            border-bottom: 1px solid var(--border);
            transition: background .1s;
        }
        .cdsl-table tbody tr:last-child { border-bottom: none; }
        .cdsl-table tbody tr:hover { background: var(--surface-2); }
        .cdsl-table td {
            padding: 9px 12px;
            color: var(--text);
            vertical-align: middle;
        }

        /* Status badge */
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10.5px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 12px;
            cursor: pointer;
            transition: opacity .15s;
        }
        .status-badge:hover { opacity: .8; }
        .status-badge.active { background: rgba(34,197,94,.1); color: #16a34a; border: 1px solid rgba(34,197,94,.25); }
        .status-badge.inactive { background: rgba(239,68,68,.1); color: #dc2626; border: 1px solid rgba(239,68,68,.25); }

        /* Count cells */
        .count-cell { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
        .count-cell.warn { color: #d97706; }
        .count-cell.danger { color: #dc2626; }
        .count-cell.good { color: #16a34a; }
        .count-cell.muted { color: var(--text-muted); }

        /* Skeleton shimmer */
        @keyframes shimmer {
            0% { background-position: -600px 0; }
            100% { background-position: 600px 0; }
        }
        .skeleton {
            border-radius: 4px;
            background: linear-gradient(90deg, var(--border) 25%, color-mix(in srgb, var(--border) 50%, #fff) 50%, var(--border) 75%);
            background-size: 600px 100%;
            animation: shimmer 1.3s infinite linear;
            display: inline-block;
            height: 12px;
        }

        /* Refresh indicator */
        .refresh-dot {
            width: 7px; height: 7px;
            border-radius: 50%;
            background: var(--accent);
            animation: blink 1.8s infinite;
        }
        @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

        /* Empty state */
        .empty-state {
            padding: 32px 20px;
            text-align: center;
            color: var(--text-muted);
            font-size: 13px;
        }

        /* Responsive table wrapper */
        .table-wrapper { overflow-x: auto; }

        /* ENV transition overlay — flashes on switch */
        .env-transition-flash {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 9999;
            background: var(--env-color);
            opacity: 0;
            transition: opacity .08s;
        }
        .env-transition-flash.flash { animation: env-flash .4s ease; }
        @keyframes env-flash {
            0% { opacity: 0; }
            30% { opacity: .08; }
            100% { opacity: 0; }
        }
    </style>
@endsection

@section('main')
    <!-- ══════════ PAGE BODY ══════════ -->
    <div class="page-wrapper">

        <div class="page-header">
            <div>
                <div class="page-title">
                    Group Process Dashboard
                    <span class="env-chip" id="pageEnvChip">UAT</span>
                </div>
                <div class="page-subtitle">Real-time bill group processing status · Auto-refreshes every 5s</div>
            </div>
            <div style="display:flex;align-items:center;gap:8px;">
                <span class="refresh-dot" id="refreshDot" style="opacity:0"></span>
                <span style="font-size:11.5px;color:var(--text-muted);font-family:var(--font-mono)" id="lastRefreshLabel">—</span>
            </div>
        </div>

        <div class="dashboard-grid">
            <!-- Check Bill Card -->
            <div class="cdsl-card">
                <div class="card-header">
                    <div class="card-title">
                        <div class="card-title-icon">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
                            </svg>
                        </div>
                        Check Bill Groups
                    </div>
                    <span class="count-badge" id="checkbill-count">Total: —</span>
                </div>
                <div class="table-wrapper">
                    <table class="cdsl-table">
                        <thead>
                        <tr>
                            <th>Group Name</th>
                            <th>Status</th>
                            <th>Pending</th>
                            <th>Processing</th>
                            <th>CB. Success</th>
                            <th>CB. Fail</th>
                        </tr>
                        </thead>
                        <tbody id="checkbill-table-body">
                        <!-- skeleton rows -->
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- Pay Bill Card -->
            <div class="cdsl-card">
                <div class="card-header">
                    <div class="card-title">
                        <div class="card-title-icon">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/>
                            </svg>
                        </div>
                        Pay Bill Groups
                    </div>
                    <span class="count-badge" id="paybill-count">Total: —</span>
                </div>
                <div class="table-wrapper">
                    <table class="cdsl-table">
                        <thead>
                        <tr>
                            <th>Group Name</th>
                            <th>Status</th>
                            <th>Pending</th>
                            <th>Processing</th>
                            <th>CB. Success</th>
                            <th>CB. Fail</th>
                        </tr>
                        </thead>
                        <tbody id="paybill-table-body">
                        <!-- skeleton rows -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function () {
            navGroupProcess();
        });
        function navGroupProcess() {
            window.GROUP_CONFIG = {
                pending: {normal: 10, good: 20, warning: 30},
                processing: {normal: 5, good: 15, warning: 25}
            };

            const svgDown = '<svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>';
            const svgUp = '<svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>';

            const stateClasses = {
                normal: 'text-muted',
                good: 'text-success',
                warning: 'text-warning',
                danger: 'text-danger'
            };
            const rowClassMap = {
                normal: 'table-white',
                good: 'table-success',
                warning: 'table-warning',
                danger: 'table-danger'
            };

            let firstLoad = true; // <--- track first load

            function getState(count, configType) {
                const thresholds = window.GROUP_CONFIG[configType];
                if (count <= thresholds.normal) return 'normal';
                if (count <= thresholds.good) return 'good';
                if (count <= thresholds.warning) return 'warning';
                return 'danger';
            }

            function formatWithState(count, state) {
                const icon = (state === 'good' || state === 'normal') ? svgDown : svgUp;
                return `<span class="${stateClasses[state]} fw-bold">${icon}<span class="animated-number" data-value="${count}">${count}</span></span>`;
            }

            function animateNumbers() {
                $('.animated-number').each(function () {
                    const $this = $(this);
                    const target = parseInt($this.data('value'));
                    const current = parseInt($this.text());
                    if (isNaN(target) || target === current) return;

                    $({val: current}).animate({val: target}, {
                        duration: 500,
                        easing: 'swing',
                        step: function (now) {
                            $this.text(Math.floor(now));
                        },
                        complete: function () {
                            $this.text(target);
                        }
                    });
                });
            }

            function getFilters() {
                return {
                    STATUS: $('#filter-status1').val(),
                    ORG_CODE: $('#filter-org-code1').val(),
                };
            }

            function changeStatus(groupId) {
                alert("Change status for group ID: " + groupId);
            }

            function renderTableRows(dataArray, tableBodySelector) {
                const container = $(tableBodySelector);
                container.empty();
                $.each(dataArray, function (index, rowData) {
                    const pendingState = getState(rowData["PENDING_COUNT"], 'pending');
                    const processingState = getState(rowData["PROCESSING_COUNT"], 'processing');
                    const statePriority = {normal: 0, good: 1, warning: 2, danger: 3};
                    const worstState = statePriority[processingState] > statePriority[pendingState] ? processingState : pendingState;
                    const actionLabel = rowData["GROUP_STATUS"] === "A" ? 'Activate' : 'Inactivate';
                    const actionClass = rowData["GROUP_STATUS"] === "A" ? 'bg-success' : 'bg-danger';
                    const isActive = rowData.GROUP_STATUS === 'A';
                    const row = `
            <tr class="${rowClassMap[worstState]}">
                <td>${rowData["GROUP_NAME"]}</td>
                <td><span class="status-badge ${isActive ? 'active' : 'inactive'}">${isActive ? 'Active' : 'Inactive'}</span></td>

                <td>${formatWithState(rowData["PENDING_COUNT"], 'pending')}</td>
                <td>${formatWithState(rowData["PROCESSING_COUNT"], 'processing')}</td>
                <td>${rowData["CALLBACK_COUNT_SUCCSS"]}</td>
                <td>${rowData["CALLBACK_COUNT_UNSCSS"]}</td>
            </tr>`;
                    container.append(row);
                });
            }

            function addTableSkeleton(tableBodySelector, rowCount = 5) {
                const container = $(tableBodySelector);
                container.empty();
                for (let i = 0; i < rowCount; i++) {
                    const row = `
            <tr>
                <td><div class="skeleton-row skeleton-cell group-name"></div></td>
                <td><div class="skeleton-row skeleton-cell status"></div></td>
                <td><div class="skeleton-row skeleton-cell pending"></div></td>
                <td><div class="skeleton-row skeleton-cell processing"></div></td>
                <td><div class="skeleton-row skeleton-cell success"></div></td>
                <td><div class="skeleton-row skeleton-cell fail"></div></td>
            </tr>`;
                    container.append(row);
                }
            }

            function loadTableData(apiRoute, tableBodyId, recordCountId) {
                const filters = getFilters();

                // Show skeleton only on first load
                if (firstLoad) addTableSkeleton(tableBodyId);

                $.ajax({
                    url: apiRoute,
                    type: 'POST',
                    dataType: 'json',
                    data: {filters: filters, _token: '{{ csrf_token() }}'},
                    success: function (data) {
                        const rows = data.data || [];
                        $(recordCountId).text(`Total Group: ${rows.length}`);
                        renderTableRows(rows, tableBodyId);
                        animateNumbers();
                        firstLoad = false; // disable skeleton for future refreshes
                    },
                    error: function (xhr) {
                        console.error('Error loading data from', apiRoute, ':', xhr.responseText);
                    }
                });
            }

            function refreshTables() {
                loadTableData("{{ route('getLVGroupCheckBillStatusSumData') }}", '#checkbill-table-body', '#checkbill-count');
                loadTableData("{{ route('getUATGroupPayBillStatusSumData') }}", '#paybill-table-body', '#paybill-count');
            }

            // Initial load
            refreshTables();
            // Auto-refresh every 5 seconds
            setInterval(refreshTables, 5000);
        }
    </script>
@endsection