@extends('layout.public')
@section('title', 'Dashboard')
@section('style')
    <style>
        /* ================= Chart Colors ================= */
        .ct-series-a .ct-line,
        .ct-series-a .ct-point,
        .ct-series-a .ct-area {
            stroke: #e74c3c;
            fill: rgba(231, 76, 60, 0.1);
        }

        .ct-series-b .ct-line,
        .ct-series-b .ct-point,
        .ct-series-b .ct-area {
            stroke: #3498db;
            fill: rgba(52, 152, 219, 0.1);
        }

        .ct-series-c .ct-line,
        .ct-series-c .ct-point,
        .ct-series-c .ct-area {
            stroke: #2ecc71;
            fill: rgba(46, 204, 113, 0.1);
        }

        .ct-series-d .ct-line,
        .ct-series-d .ct-point,
        .ct-series-d .ct-area {
            stroke: #9b59b6;
            fill: rgba(155, 89, 182, 0.1);
        }

        /* ================= Skeleton Animation ================= */
        @keyframes shimmer {
            0% {
                background-position: -400px 0;
            }
            100% {
                background-position: 400px 0;
            }
        }

        /* General shimmer for inline placeholders */
        .placeholder-glow span.placeholder,
        .placeholder-shimmer,
        .skeleton-row {
            display: inline-block;
            border-radius: 0.25rem;
            background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
            background-size: 400px 100%;
            animation: shimmer 1.2s infinite linear;
        }

        /* Specific widths and heights */
        .placeholder-glow .placeholder-title {
            width: 60%;
            height: 1em;
            margin-bottom: 0.5rem;
        }

        .placeholder-glow .placeholder-count {
            width: 40%;
            height: 1.5em;
        }

        .icon-shape.placeholder-shimmer {
            width: 32px;
            height: 32px;
        }

        .card .card-body {
            min-height: 80px;
        }

        /* Skeleton table/row cells */
        .skeleton-row {
            display: flex;
            width: 100%;
            padding: 0.5rem 0;
        }

        .skeleton-cell {
            height: 1em;
            border-radius: 0.25rem;
            padding: 0.5rem 0;
        }

        .skeleton-cell.group-name, .skeleton-cell.org-code {
            width: 20%;
        }

        .skeleton-cell.status {
            width: 15%;
        }

        .skeleton-cell.pending,
        .skeleton-cell.processing,
        .skeleton-cell.success,
        .skeleton-cell.fail {
            width: 10%;
        }
    </style>

@endsection
@section('main')
    <main>
        <div class="row mt-5">
            <div class="col-12">
                <div class="card border-0 shadow">
                    <div class="card-body">
                        <nav>
                            <div class="nav nav-tabs mb-4" id="nav-tab" role="tablist">
                                <a class="nav-item nav-link active" id="summary-tab" data-bs-toggle="tab"
                                   href="#nav-summary" role="tab" aria-controls="nav-summary"
                                   aria-selected="true">Summary</a>
                                <a class="nav-item nav-link" id="group-process-tab" data-bs-toggle="tab"
                                   href="#nav-group-process" role="tab" aria-controls="nav-group-process"
                                   aria-selected="false">Group Process</a>
                                <a class="nav-item nav-link" id="process-log-tab" data-bs-toggle="tab"
                                   href="#nav-process-log" role="tab" aria-controls="nav-process-log"
                                   aria-selected="false">Error Logs</a>
                                <a class="nav-item nav-link" id="graph-summary-tab" data-bs-toggle="tab"
                                   href="#nav-graph-summary" role="tab" aria-controls="nav-graph-summary"
                                   aria-selected="false">Graph Summary</a>
                                <a class="nav-item nav-link" id="org-process-tab" data-bs-toggle="tab"
                                   href="#nav-org-process" role="tab" aria-controls="nav-org-process"
                                   aria-selected="false">Org Process</a>
                            </div>
                        </nav>
                        <div class="tab-content" id="nav-tabContent">
                            {{-- <div id="page-loader" class="loader-wrapper">
                                <img src="{{ asset('assets/img/favicon/cdsl-logo.svg') }}" alt="Loading..."
                                    class="loader-logo">
                            </div> --}}
                            <div class="tab-pane fade show active" id="nav-summary" role="tabpanel"
                                 aria-labelledby="summary-tab">
                                <div class="col-12 col-xl-12 col-xxl-12 mb-4">
                                    <div class="row mt-2" id="count-cards-container"></div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="nav-group-process" role="tabpanel"
                                 aria-labelledby="group-process-tab">
                                <div class="row">
                                    <div class="col-md-6 table-responsive">
                                        <h5
                                            id="notification-badges-span-classbadge-bg-secondary-font-small-px-2-py-1-text-gray-800-ms-2-fw-boldprospan">
                                            Check Bill Groups<span
                                                class="badge bg-secondary font-small px-2 py-1 text-gray-800 ms-2 fw-bold"
                                                id="checkbill-total-records"></span></h5>
                                        <table class="table table-bordered">
                                            <thead>
                                            <tr>
                                                <th class="col-md-2">GName</th>
                                                <th class="col-md-2">Status</th>
                                                <th class="col-md-1">Pending</th>
                                                <th class="col-md-1">Processing</th>
                                                <th class="col-md-2">CB. Susc.</th>
                                                <th class="col-md-2">CB. Unsc.</th>
                                            </tr>
                                            </thead>
                                            <tbody id="checkbill-table-body"></tbody>
                                        </table>
                                    </div>
                                    <div class="col-md-6 table-responsive">
                                        <h5 id="notification-badges-span-classbadge-bg-secondary-font-small-px-2-py-1-text-gray-800-ms-2-fw-boldprospan">
                                            Pay Bill Groups
                                            <span
                                                class="badge bg-secondary font-small px-2 py-1 text-gray-800 ms-2 fw-bold"
                                                id="paybill-total-records"></span>
                                            <button
                                                class="btn btn-link text-dark dropdown-toggle dropdown-toggle-split m-0 p-1"
                                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <svg class="icon icon-sm" fill="currentColor" viewBox="0 0 20 20"
                                                     xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path>
                                                </svg>
                                                <span class="visually-hidden">Toggle Dropdown</span></button>
                                            <div class="dropdown-menu dropdown-menu-end pb-0" style=""><span
                                                    class="small ps-3 fw-bold text-dark">Show</span>
                                                <a class="dropdown-item d-flex align-items-center fw-bold" href="#">10
                                                    <svg class="icon icon-xxs ms-auto" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                                    </svg>
                                                </a>
                                                <a class="dropdown-item fw-bold" href="#">20</a>
                                                <a class="dropdown-item fw-bold rounded-bottom" href="#">30</a>
                                            </div>
                                        </h5>
                                        <table class="table table-bordered">
                                            <thead>
                                            <tr>
                                                <th class="col-md-2">GName</th>
                                                <th class="col-md-2">Status</th>
                                                <th class="col-md-1">Pending</th>
                                                <th class="col-md-1">Processing</th>
                                                <th class="col-md-2">CB. Susc.</th>
                                                <th class="col-md-2">CB. Unsc.</th>
                                            </tr>
                                            </thead>
                                            <tbody id="paybill-table-body"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade show " id="nav-process-log" role="tabpanel"
                                 aria-labelledby="process-log-tab">
                                <div class="row mt-3">
                                    <div class="col-12 col-xl-6">
                                        <div class="card notification-card border-0 shadow">
                                            <div
                                                class="p-2 border-bottom d-flex align-items-center justify-content-between">
                                                <h6 class="">Oracle Logs</h6>
                                                <a class="fw-normal d-inline-flex align-items-center" href="#">
                                                    <svg class="icon icon-xxs me-2" fill="currentColor"
                                                         viewBox="0 0 20 20"
                                                         xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
                                                        <path fill-rule="evenodd"
                                                              d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
                                                              clip-rule="evenodd"></path>
                                                    </svg>
                                                    View all
                                                </a>
                                            </div>
                                            <div class="card-body">
                                                <div class="list-group-oracle list-group-flush list-group-timeline">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-xl-6">
                                        <div class="card notification-card border-0 shadow">
                                            <div
                                                class="p-2 border-bottom d-flex align-items-center justify-content-between">
                                                <h6 class="">Biller Process Logs</h6>
                                                <a class="fw-normal d-inline-flex align-items-center" href="#">
                                                    <svg class="icon icon-xxs me-2" fill="currentColor"
                                                         viewBox="0 0 20 20"
                                                         xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
                                                        <path fill-rule="evenodd"
                                                              d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
                                                              clip-rule="evenodd"></path>
                                                    </svg>
                                                    View all
                                                </a>
                                            </div>
                                            <div class="card-body">
                                                <div class="list-group-java list-group-flush list-group-timeline">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="nav-graph-summary" role="tabpanel"
                                 aria-labelledby="process-log-tab">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="line-chart-filled"></div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="line-chart-filled2"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade show" id="nav-org-process" role="tabpanel"
                                 aria-labelledby="org-process-tab">
                                <div class="col-12 col-xl-12 col-xxl-12 mb-4">
                                    <div class="row mt-2" id="count-cards-container">ORG PRocess</div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h5
                                                id="notification-badges-span-classbadge-bg-secondary-font-small-px-2-py-1-text-gray-800-ms-2-fw-boldprospan">
                                                Check Bill Groups<span
                                                    class="badge bg-secondary font-small px-2 py-1 text-gray-800 ms-2 fw-bold"
                                                    id="orgCheckbill-total-records"></span></h5>
                                            <table class="table table-bordered">
                                                <thead>
                                                <tr>
                                                    <th class="col-md-2">Name</th>
                                                    <th class="col-md-2">Status</th>
                                                    <th class="col-md-1">Pending</th>
                                                    <th class="col-md-1">Proces</th>
                                                    <th class="col-md-2">CB. Susc.</th>
                                                    <th class="col-md-2">CB. Unsc.</th>
                                                </tr>
                                                </thead>
                                                <tbody id="orgCheckbill-table-body"></tbody>
                                            </table>
                                        </div>
                                        <div class="col-md-6">
                                            <h5
                                                id="notification-badges-span-classbadge-bg-secondary-font-small-px-2-py-1-text-gray-800-ms-2-fw-boldprospan">
                                                Pay Bill Groups<span
                                                    class="badge bg-secondary font-small px-2 py-1 text-gray-800 ms-2 fw-bold"
                                                    id="orgPaybill-total-records"></span></h5>
                                            <table class="table table-bordered">
                                                <thead>
                                                <tr>
                                                    <th class="col-md-2">Name</th>
                                                    <th class="col-md-2">Status</th>
                                                    <th class="col-md-1">Pending</th>
                                                    <th class="col-md-1">Proces</th>
                                                    <th class="col-md-2">CB. Susc.</th>
                                                    <th class="col-md-2">CB. Unsc.</th>
                                                </tr>
                                                </thead>
                                                <tbody id="orgPaybill-table-body"></tbody>
                                            </table>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

@endsection
@section('script')
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script>
        $(document).ready(function () {
            navSummary();
        });

        function navSummary() {
            $(document).ready(function () {
                const colorClasses = [
                    'bg-light',
                    'bg-light-subtle',
                    'bg-body-tertiary',
                    'bg-light border-start border-primary',
                    'bg-light border-start border-success',
                    'bg-light border-start border-info',
                    'bg-light border-start border-warning',
                    'bg-light border-start border-danger'
                ];
                const iconMap = {
                    chackbill: "bi-receipt",
                    chackbill_temp: "bi-clock-history",
                    chackbill_unscs: "bi-exclamation-triangle",
                    paybill: "bi-credit-card",
                    paybill_temp: "bi-clock",
                    paybill_unscs: "bi-x-circle",
                    payment_retry: "bi-arrow-repeat",
                    payment_temp: "bi-hourglass-split"
                };
                const labelMap = {
                    chackbill: "Check-bill",
                    chackbill_temp: "Check-bill Temp",
                    chackbill_unscs: "Check-bill Unsuccess",
                    paybill: "Pay-bill",
                    paybill_temp: "Pay-bill Temp",
                    paybill_unscs: "Pay-bill Unsuccess",
                    payment_retry: "Payment Retry",
                    payment_temp: "Payment Temp"
                };

                const container = $('#count-cards-container');
                container.empty();

                // ❗ Skeleton Loader
                for (let i = 0; i < 8; i++) {
                    const skeletonCard = `
                <div class="col-12 col-sm-6 col-xl-3 mb-3">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body placeholder-glow">
                            <h2 class="h6 text-muted"><span class="placeholder placeholder-title"></span></h2>
                            <h5 class="fw-bold mb-0 text-dark"><span class="placeholder placeholder-count"></span></h5>
                        </div>
                    </div>
                </div>
                `;

                    container.append(skeletonCard);
                }

                // ❗ Fetch real data
                $.ajax({
                    url: "{{ route('last-24Hours-data-count') }}",
                    type: 'GET',
                    dataType: 'json',
                    success: function (response) {
                        container.empty(); // remove skeletons

                        let totalCount = 0;
                        let index = 0;
                        $.each(response, function (key, count) {
                            const label = labelMap[key] || key;
                            const iconClass = iconMap[key] || "bi-bar-chart";
                            const colorClass = colorClasses[index % colorClasses.length];
                            const numericCount = parseInt(count) || 0;
                            totalCount += numericCount;

                            const card = `
                        <div class="col-12 col-sm-6 col-xl-3 mb-3">
                            <div class="card border-0 shadow-sm ${colorClass}">
                                <div class="card-body">
                                    <div class="d-flex align-items-center justify-content-between mb-2">
                                        <h2 class="h6 text-muted mb-0">${label}</h2>
                                        <i class="bi ${iconClass} fs-4 text-secondary"></i>
                                    </div>
                                    <h5 class="fw-bold mb-2 text-dark">${numericCount.toLocaleString()}</h5>
                                    <a href="/details/${key}" class="small text-primary d-inline-flex align-items-center">
                                        <i class="bi bi-eye me-1"></i> View Details
                                    </a>
                                </div>
                            </div>
                        </div>
                    `;
                            container.append(card);
                            index++;
                        });

                        // Total Card
                        const totalCard = `
                    <div class="col-12 col-sm-6 col-xl-3 mb-3">
                        <div class="card border-0 shadow-sm bg-primary text-white">
                            <div class="card-body">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <h2 class="h6 text-white-50 mb-0">Total Summary Today</h2>
                                    <i class="bi bi-bar-chart-line fs-4 text-white-50"></i>
                                </div>
                                <h5 class="fw-bold mb-2">${totalCount.toLocaleString()}</h5>
                                <a href="/details/total" class="small text-white-50 d-inline-flex align-items-center">
                                    <i class="bi bi-eye me-1"></i> View Details
                                </a>
                            </div>
                        </div>
                    </div>
                `;
                        container.append(totalCard);
                    },
                    error: function () {
                        alert('Failed to load last 24 hours data.');
                    }
                });
            });
        }
    </script>
    <script>
        const loadedTabs = {};

        function loadTabContent(tabId) {
            // const loader = document.getElementById("page-loader");
            // if (loader) loader.style.display = "flex";

            // ❌ Don't use caching if you want to load fresh data every time
            switch (tabId) {
                case '#nav-summary':
                    navSummary();
                    break;
                case '#nav-group-process':
                    navGroupProcess();
                    break;
                case '#nav-process-log':
                    navProcessLog();
                    break;
                case '#nav-graph-summary':
                    navGraphSummary();
                    break;
                case '#nav-org-process':
                    navOrgProcess();
                    break;
                default:
                    navSummary();
                    break;
            }
        }

        function navGraphSummary() {

            function renderChats(dataArray, chartSelector) {
                const container = $(chartSelector);
                container.empty();
                dataArray.sort(function (a, b) {
                    if (a.GROUP_NAME < b.GROUP_NAME) return -1;
                    if (a.GROUP_NAME > b.GROUP_NAME) return 1;
                    return 0;
                });
                let labelData = [];
                let seriesDataPENDING_COUNT = [];
                let seriesDataPROCESSING_COUNT = [];
                let seriesDataCALLBACK_COUNT_SUCCSS = [];
                let seriesDataCALLBACK_COUNT_UNSCSS = [];

                $.each(dataArray, function (index, rowData) {
                    labelData.push(rowData["GROUP_NAME"]);
                    seriesDataPENDING_COUNT.push(rowData["PENDING_COUNT"]);
                    seriesDataPROCESSING_COUNT.push(rowData["PROCESSING_COUNT"]);
                    seriesDataCALLBACK_COUNT_SUCCSS.push(rowData["CALLBACK_COUNT_SUCCSS"]);
                    seriesDataCALLBACK_COUNT_UNSCSS.push(rowData["CALLBACK_COUNT_UNSCSS"]);
                });

                const seriesData = [
                    seriesDataPENDING_COUNT,
                    seriesDataPROCESSING_COUNT,
                    seriesDataCALLBACK_COUNT_SUCCSS,
                    seriesDataCALLBACK_COUNT_UNSCSS
                ];

                const chart = new Chartist.Line(chartSelector, {
                    labels: labelData,
                    series: seriesData
                }, {
                    low: 0,
                    showArea: true
                });

                chart.on('draw', function (data) {
                    if (data.type === 'point') {
                        data.group.elem('text', {
                            x: data.x,
                            y: data.y - 10,
                            style: 'font-size: 12px; fill: #000;',
                            'text-anchor': 'middle'
                        }).text(data.value.y);
                    }
                });

            }

            function loadChatData(apiRoute, chartSelector) {
                $.ajax({
                    url: apiRoute,
                    type: 'POST',
                    dataType: 'json',
                    data: {_token: '{{ csrf_token() }}'},
                    success: function (data) {
                        console.log(data.data);
                        renderChats(data.data, chartSelector);
                    },
                    error: function (xhr) {
                        console.error('Error loading data from', apiRoute, ':', xhr.responseText);

                    }
                });
            }

            function refreshChats() {
                loadChatData("{{ route('getLVGroupCheckBillStatusSumData') }}", '.line-chart-filled'); // Chart 1
                loadChatData("{{ route('getUATGroupPayBillStatusSumData') }}", '.line-chart-filled2');  // Chart 2
            }

            refreshChats();
            setInterval(refreshChats, 5000);
        }

        function navProcessLog() {
            $(document).ready(function () {
                const errorContainerOracle = $(".list-group-oracle");
                const errorContainerJava = $(".list-group-java");

                // ❗ Add Skeleton Loaders
                function addSkeleton(container, count, type) {
                    container.empty();
                    for (let i = 0; i < count; i++) {
                        const skeleton = `
                        <div class="list-group-item border-0">
                            <div class="row ps-lg-1">
                                <div class="col-auto">
                                    <div class="icon-shape icon-xs rounded placeholder-shimmer ${type === 'oracle' ? 'bg-warning' : 'bg-primary'}"></div>
                                </div>
                                <div class="col ms-n2 mb-1">
                                    <h5 class="fs-6 fw-bold mb-1"><span class="placeholder-shimmer" style="width: 60%;"></span></h5>
                                    <p class="mb-1"><span class="placeholder-shimmer" style="width: 100%; height: 0.8em;"></span></p>
                                    <div class="d-flex align-items-center">
                                        <span class="small placeholder-shimmer" style="width: 30%; height: 0.8em;"></span>
                                    </div>
                                </div>
                            </div>
                        </div>`;
                        container.append(skeleton);
                    }
                }


                addSkeleton(errorContainerOracle, 5, 'oracle'); // 5 skeleton items for Oracle
                addSkeleton(errorContainerJava, 5, 'java');     // 5 skeleton items for Java

                // ❗ Fetch real data
                $.ajax({
                    url: 'getUATErroLogDataDasboard',
                    method: 'GET',
                    dataType: 'json',
                    success: function (response) {
                        errorContainerOracle.empty();
                        errorContainerJava.empty();

                        // Handle ORADBERRORs
                        if (response.ORADBERROR && response.ORADBERROR.data.length > 0) {
                            response.ORADBERROR.data.forEach(item => {
                                const html = `
                        <div class="list-group-item border-0">
                            <div class="row ps-lg-1">
                                <div class="col-auto">
                                    <div class="icon-shape icon-xs icon-shape-warning rounded">
                                        <svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
                                    </div>
                                </div>
                                <div class="col ms-n2 mb-1">
                                    <h5 class="fs-6 fw-bold mb-1">DB Error - ${item.PROCEDURE_TABLE}</h5>
                                    <p class="mb-1">${item.ERROR_MESSAGE}</p>
                                    <div class="d-flex align-items-center">
                                        <svg class="icon icon-xxs text-gray-400 me-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                                        </svg>
                                        <span class="small">${moment(item.ERROR_TIMESTAMP, "DD-MM-YYYY HH:mm:ss").fromNow()}</span>
                                    </div>
                                </div>
                            </div>
                        </div>`;
                                errorContainerOracle.append(html);
                            });
                        }

                        // Handle JAVAPROCESSERRORs
                        if (response.JAVAPROCESSERROR && response.JAVAPROCESSERROR.data.length > 0) {
                            response.JAVAPROCESSERROR.data.forEach(item => {
                                const html = `
                        <div class="list-group-item border-0">
                            <div class="row ps-lg-1">
                                <div class="col-auto">
                                    <div class="icon-shape icon-xs icon-shape-primary rounded">
                                        <svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z" clip-rule="evenodd"></path></svg>
                                    </div>
                                </div>
                                <div class="col ms-n2 mb-1">
                                    <h3 class="fs-6 fw-bold mb-1">Java Error - ${item.type}</h3>
                                    <small class="mb-1">${item.msg}</small>
                                    <div class="d-flex align-items-center">
                                        <svg class="icon icon-xxs text-gray-400 me-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                                        </svg>
                                        <span class="small">${moment(item.create_date, "YYYY-MM-DD HH:mm:ss").fromNow()}</span>
                                    </div>
                                </div>
                            </div>
                        </div>`;
                                errorContainerJava.append(html);
                            });
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error("Failed to fetch error log data:", error);
                    }
                });
            });
        }


        document.addEventListener("DOMContentLoaded", function () {
            // ✅ Tab event listener
            document.querySelectorAll('[data-bs-toggle="tab"]').forEach(tab => {
                tab.addEventListener('shown.bs.tab', function (e) {
                    const tabId = e.target.getAttribute("href");
                    sessionStorage.setItem("activeTab", tabId);
                    loadTabContent(tabId);
                });
            });

            // ✅ Load last visited tab or default
            const activeTabId = sessionStorage.getItem("activeTab");
            if (activeTabId) {
                const trigger = document.querySelector(`[data-bs-toggle="tab"][href="${activeTabId}"]`);
                if (trigger) new bootstrap.Tab(trigger).show();
            } else {
                const defaultTab = document.querySelector('.nav-link.active');
                if (defaultTab) {
                    loadTabContent(defaultTab.getAttribute("href"));
                }
            }
        });
    </script>
    <script>
        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 row = `
            <tr class="${rowClassMap[worstState]}">
                <td>${rowData["GROUP_NAME"]}</td>
                <td><span type="button" onclick="changeStatus('${rowData["GROUP_ID"]}')" class="badge ${actionClass}">${actionLabel}</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-total-records');
                loadTableData("{{ route('getUATGroupPayBillStatusSumData') }}", '#paybill-table-body', '#paybill-total-records');
            }

            // Initial load
            refreshTables();
            // Auto-refresh every 5 seconds
            setInterval(refreshTables, 5000);
        }
    </script>
    <script>
        function navOrgProcess() {
            window.ORG_CONFIG = {
                pending: {normal: 10, good: 20, warning: 30},
                processing: {normal: 5, good: 15, warning: 25}
            };

            const svgDown2 = '<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 svgUp2 = '<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 stateClasses2 = {
                normal: 'text-muted',
                good: 'text-success',
                warning: 'text-warning',
                danger: 'text-danger'
            };
            const rowClassMap2 = {
                normal: 'table-white',
                good: 'table-success',
                warning: 'table-warning',
                danger: 'table-danger'
            };

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

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

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

            function animateNumbers2() {
                $('.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 getFilters2() {
                return {
                    STATUS: $('#filter-status1').val(),
                    ORG_CODE: $('#filter-org-code1').val(),
                };
            }

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

            function renderTableRows2(dataArray, tableBodySelector) {
                const container = $(tableBodySelector);
                container.empty();

                $.each(dataArray, function (index, rowData) {
                    const pendingState = getState2(rowData["PENDING_COUNT"], 'pending');
                    const processingState = getState2(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_MAP_STATUS"] === "A" ? 'Activate' : 'Inactivate';
                    const actionClass = rowData["GROUP_MAP_STATUS"] === "A" ? 'bg-success' : 'bg-danger';

                    const row = `
            <tr class="${rowClassMap2[worstState]}">
                <td>${rowData["ORG_CODE"]}</td>
                <td><span type="button" onclick="changeStatus2('${rowData["GROUP_ID"]}')" class="badge ${actionClass}">${actionLabel}</span></td>
                <td>${formatWithState2(rowData["PENDING_COUNT"], 'pending')}</td>
                <td>${formatWithState2(rowData["PROCESSING_COUNT"], 'processing')}</td>
                <td>${rowData["CALLBACK_COUNT_SUCCSS"]}</td>
                <td>${rowData["CALLBACK_COUNT_UNSCSS"]}</td>
            </tr>`;
                    container.append(row);
                });
            }

            // Skeleton loader function (only for first load)
            function addTableSkeleton2(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 org-code"></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 loadTableData2(apiRoute, tableBodyId, recordCountId) {
                const filters = getFilters2();

                // Show skeleton only on first load
                if (firstLoad) addTableSkeleton2(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}`);
                        renderTableRows2(rows, tableBodyId);
                        animateNumbers2();
                        firstLoad = false; // turn off skeleton for subsequent refreshes
                    },
                    error: function (xhr) {
                        console.error('Error loading data from', apiRoute, ':', xhr.responseText);
                    }
                });
            }

            function refreshTables2() {
                loadTableData2("{{ route('getUATOrgCheckBillStatusSumData') }}", '#orgCheckbill-table-body', '#orgCheckbill-total-records');
                loadTableData2("{{ route('getUATOrgPayBillStatusSumData') }}", '#orgPaybill-table-body', '#orgPaybill-total-records');
            }

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