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

@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')
    <div class="col-12 col-xl-12 col-xxl-12 mb-4">
        <div class="row mt-2" id="count-cards-container"></div>
    </div>
@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>
@endsection