@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')

    <header class="header-global">
        <nav id="navbar-main" aria-label="Primary navigation"
             class="navbar navbar-main navbar-expand-lg navbar-theme-primary pt-4 navbar-dark">
            <div class="container position-relative">
                <div class="navbar-collapse collapse me-auto" id="navbar_global">
                    <div class="navbar-collapse-header">
                        <div class="row">
                            <div class="col-6 collapse-brand"><a href="{{url('/')}}"><img
                                        src="{{ asset('assets/img/favicon/cdsl-logo.svg') }}" alt="cdsl-logo"></a></div>
                            <div class="col-6 collapse-close">
                                <a href="#navbar_global" class="fas fa-times" data-toggle="collapse"
                                   data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false"
                                   title="close" aria-label="Toggle navigation"></a>
                            </div>
                        </div>
                    </div>
                    <ul class="navbar-nav navbar-nav-hover align-items-lg-center">
                        <li class="nav-item me-2"><a href="{{url('/')}}" class="nav-link">Dashboard</a></li>
                        @auth
                            <li class="nav-item"><a href="{{url('lock')}}" class="nav-link">Lock</a></li>
                        @endauth
                    </ul>
                </div>
                @auth
                    <div class="d-flex align-items-center ms-auto">
                        <a href="{{url('home')}}" target="_blank"
                           class="btn btn-outline-white d-inline-flex align-items-center me-md-3">
                            <svg class="icon icon-xxs me-2" fill="currentColor" viewBox="0 0 20 20"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
                                      d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z"
                                      clip-rule="evenodd"></path>
                            </svg>
                            Visit Dashbord
                        </a>
                    </div>
                @else
                    <div class="d-flex align-items-center ms-auto">
                        <a href="{{ url('home') }}" target="_blank"
                           class="btn btn-outline-white d-inline-flex align-items-center me-md-3">
                            <!-- Login icon (arrow into door style) -->
                            <svg class="icon icon-xxs me-2" fill="currentColor" viewBox="0 0 24 24"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="M10.09 16.59L11.5 18l5-5-5-5-1.41 1.41L12.67 12H3v2h9.67l-2.58 2.59z" />
                                <path
                                    d="M19 3H5c-1.1 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
                            </svg>
                            Login
                        </a>
                    </div>
                @endauth
            </div>
        </nav>
    </header>
    <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></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>
        $(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 src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></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('getUATGroupCheckBillStatusSumData') }}", '.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('getUATGroupCheckBillStatusSumData') }}", '#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