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

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

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

        /* Line 4 - Purple */
        .ct-series-d .ct-line,
        .ct-series-d .ct-point,
        .ct-series-d .ct-area {
            stroke: #9b59b6;
            fill: rgba(155, 89, 182, 0.1);
        }
    </style>
    <style>
        /* Skeleton shimmer animation */
        @keyframes placeholderShimmer {
            0% {
                background-position: -200px 0;
            }

            100% {
                background-position: 200px 0;
            }
        }

        .placeholder-glow span.placeholder {
            display: inline-block;
            height: 1em;
            border-radius: 0.25rem;
            background-color: #e0e0e0;
            background-image: linear-gradient(90deg,
            #e0e0e0 0px,
            #f0f0f0 40px,
            #e0e0e0 80px);
            background-size: 200px 100%;
            animation: placeholderShimmer 1.5s infinite linear;
        }

        /* Optional: different widths for title/count placeholders */
        .placeholder-glow .col-6 {
            width: 60%;
        }

        .placeholder-glow .col-4 {
            width: 40%;
        }

        .ct-label.ct-horizontal.ct-end {
            transform: rotate(0deg);  /* horizontal labels */
            font-size: 10px;
            text-anchor: middle;
        }
        .line-chart-filled,
        .line-chart-filled2 {
            height: 150px;     /* fixed height */
            min-height: 200px; /* ensure it doesn't shrink */
        }
        @media (max-width: 768px) {
            .line-chart-filled,
            .line-chart-filled2 {
                height: 150px;
                min-height: 200px;
            }
        }
    </style>

@endsection
@section('main')



    <div class="row mt-2" id="count-cards-container"></div>
    <div class="row">
        <div class="card border-0 shadow">
            <div class="card-header">
                <h6>Checkbill Process</h6>
                <div class="col-md-12">
                    <div class="line-chart-filled"></div>
                </div>
            </div>

            <div class="card-header">
                <h6>Paybill Process</h6>
                <div class="col-md-12">
                    <div class="line-chart-filled2"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-12 col-xl-8">
            <div class="row">
                <div class="col-12 mb-4">
                    <div class="card border-0 shadow">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h2 class="fs-5 fw-bold mb-0">Page visits</h2>
                                </div>
                                <div class="col text-end">
                                    <a href="#" class="btn btn-sm btn-primary">See all</a>
                                </div>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table align-items-center table-flush">
                                <thead class="thead-light">
                                <tr>
                                    <th class="border-bottom" scope="col">Page name</th>
                                    <th class="border-bottom" scope="col">Page Views</th>
                                    <th class="border-bottom" scope="col">Bounce rate</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-xxl-6 mb-4">
                    <div class="card border-0 shadow">
                        <div class="p-2 border-bottom d-flex align-items-center justify-content-between">
                            <h6 class="">Team members</h6>
                            <a href="{{url('team-members-view')}}" class="btn btn-sm btn-primary">See all</a>
                        </div>
                        <div class="card-body">
                            <ul class="list-group list-group-flush list my--3" id="team-members-list">
                                <!-- AJAX-filled content -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-4">
            <div class="col-12 px-0 mb-4">
                <div class="card border-0 shadow">
                    <div class="card-header d-flex flex-row align-items-center flex-0 border-bottom">
                        <div class="d-block">
                            <div class="h6 fw-normal text-gray mb-2">Last 7 Days Summary</div>
                            <h2 class="h3 fw-extrabold">
                                <span id="total-orders">0</span>
                            </h2>
                            <div class="small mt-2">
                                <span id="trend-icon" class="fas fa-angle-up text-success"></span>
                                <span id="trend-percent" class="text-success fw-bold">0%</span>
                            </div>
                        </div>
                        <div class="d-block ms-auto">
                            <div class="d-flex align-items-center text-end mb-2">
                                <span class="dot rounded-circle bg-gray-800 me-2"></span>
                                <span class="fw-normal small">CHACKBILL</span>
                            </div>
                            <div class="d-flex align-items-center text-end">
                                <span class="dot rounded-circle bg-secondary me-2"></span>
                                <span class="fw-normal small">PAYBILL</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-2">
                        <div class="bar-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-12 px-0 mb-4">
                <div class="card border-0 shadow">
                    <div class="card-body">
                        <div>Request Summary</div>
                        <div class="card-body">
                            <div class="pie-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="theme-settings card bg-gray-800 pt-2 collapse" id="theme-settings">
        <div class="card-body bg-gray-800 text-white pt-4">
            <button type="button" class="btn-close theme-settings-close" aria-label="Close" data-bs-toggle="collapse"
                    href="#theme-settings" role="button" aria-expanded="false" aria-controls="theme-settings"></button>
            <div class="d-flex justify-content-between align-items-center mb-3">
                <p class="m-0 mb-1 me-4 fs-7">Open source <span role="img" aria-label="gratitude">💛</span></p>
                <a class="github-button" href="https://github.com/themesberg/volt-bootstrap-5-dashboard"
                   data-color-scheme="no-preference: dark; light: light; dark: light;" data-icon="octicon-star"
                   data-size="large" data-show-count="true"
                   aria-label="Star themesberg/volt-bootstrap-5-dashboard on GitHub">Star</a>
            </div>
            <a href="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard" target="_blank"
               class="btn btn-secondary d-inline-flex align-items-center justify-content-center mb-3 w-100">
                Download
                <svg class="icon icon-xs ms-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>
            </a>
            <p class="fs-7 text-gray-300 text-center">Available in the following technologies:</p>
            <div class="d-flex justify-content-center">
                <a class="me-3" href="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard"
                   target="_blank">
                    <img src="{{ asset('assets//img/technologies/bootstrap-5-logo.svg') }}" class="image image-xs">
                </a>
                <a href="https://demo.themesberg.com/volt-react-dashboard/#/" target="_blank">
                    <img src="{{ asset('assets//img/technologies/react-logo.svg') }}" class="image image-xs">
                </a>
            </div>
        </div>
    </div>
    <div class="card theme-settings bg-gray-800 theme-settings-expand" id="theme-settings-expand">
        <div class="card-body bg-gray-800 text-white rounded-top p-3 py-2">
        <span class="fw-bold d-inline-flex align-items-center h6">
            <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                      d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
                      clip-rule="evenodd"></path>
            </svg>
            Settings
        </span>
        </div>
    </div>

@endsection
@section('script')
    <script>
        var peiChat = [];
        $(document).ready(function () {
            navGraphSummary();
            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 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');

            function showSkeletonLoader() {
                container.empty();
                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">
                                    <h2 class="h6 text-muted placeholder-glow">
                                        <span class="placeholder col-6"></span>
                                    </h2>
                                    <h5 class="fw-bold mb-0 text-dark placeholder-glow">
                                        <span class="placeholder col-4"></span>
                                    </h5>
                                </div>
                            </div>
                        </div>
                    `;
                    container.append(skeletonCard);
                }
            }

            showSkeletonLoader(); // Show skeletons while loading

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

                    let totalCount = 0;
                    let index = 0;

                    $.each(response, function (key, count) {
                        const label = labelMap[key] || key;
                        const colorClass = colorClasses[index % colorClasses.length];
                        const numericCount = parseInt(count) || 0;
                        totalCount += numericCount;
                        peiChat.push(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">
                                <h2 class="h6 text-muted">${label}</h2>
                                <h5 class="fw-bold mb-0 text-dark">${numericCount.toLocaleString()}</h5>
                            </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">
                                    <h2 class="h6 text-white-50">Total (Last 24 Hours)</h2>
                                    <h5 class="fw-bold mb-0">${totalCount.toLocaleString()}</h5>
                                </div>
                            </div>
                        </div>
                    `;
                    container.append(totalCard);

                    // Render pie chart
                    var data = { series: peiChat };
                    var sum = function(a, b) { return a + b; };

                    new Chartist.Pie('.pie-chart', data, {
                        labelInterpolationFnc: function(value) {
                            return Math.round(value / data.series.reduce(sum) * 100) + '%';
                        },
                        low: 0,
                        high: 12,
                        fullWidth: false,
                        plugins: [Chartist.plugins.tooltip()]
                    });
                },
                error: function () {
                    alert('Failed to load last 24 hours data.');
                }
            });
        });

        function navGraphSummary() {
            // showLoader();

            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
                ];

                new Chartist.Line(chartSelector, {
                    labels: labelData,
                    series: seriesData
                }, {
                    axisX: {
                        labelOffset: { x: 0, y: 10 }  // adjust so labels appear nicely
                    },
                    low: 0,
                    showArea: true
                });

                chart.on('draw', function (data) {
                    if (data.type === 'point') {
                        data.group.elem('text', {
                            x: data.x,
                            y: data.y + 80,      // offset below the point
                            style: 'font-size: 10px; fill: #000;',
                            'text-anchor': 'middle'
                        }).text(Math.round(data.value.y));
                    }
                });

                hideLoader();
            }

            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);
                        hideLoader();
                    }
                });
            }

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

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

    </script>

    <script>
        $(document).ready(function() {
            const labelsdata = [];
            const series1 = [];
            const series2 = [];

            $.ajax({
                url: "{{ route('last-oneWeek-data-count') }}",
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response.length > 0) {
                        let totalChackbill = 0;
                        let totalPaybill = 0;

                        response.forEach(function(item) {
                            labelsdata.push(item.DAY_NAME);
                            const cb = parseInt(item.CHACKBILL_COUNT) || 0;
                            const pb = parseInt(item.PAYBILL_COUNT) || 0;

                            totalChackbill += cb;
                            totalPaybill += pb;

                            series1.push(cb);
                            series2.push(pb);
                        });

                        const totalOrders = totalChackbill + totalPaybill;
                        const percentChange = response.length >= 2
                            ? Math.round(((series1.at(-1) + series2.at(-1)) - (series1.at(-2) + series2.at(-2))) / (series1.at(-2) + series2.at(-2)) * 100)
                            : 0;

                        // Update summary UI
                        $("#total-orders").text(totalOrders);
                        $("#trend-percent").text(Math.abs(percentChange) + "%");

                        if (percentChange >= 0) {
                            $("#trend-icon").removeClass("fa-angle-down text-danger").addClass("fa-angle-up text-success");
                            $("#trend-percent").removeClass("text-danger").addClass("text-success");
                        } else {
                            $("#trend-icon").removeClass("fa-angle-up text-success").addClass("fa-angle-down text-danger");
                            $("#trend-percent").removeClass("text-success").addClass("text-danger");
                        }

                        // Chartist Bar Chart
                        new Chartist.Bar('.bar-chart', {
                            labels: labelsdata,
                            series: [series1, series2]
                        }, {
                            low: 0,
                            showArea: false,
                            plugins: [Chartist.plugins.tooltip()],
                            axisX: {
                                position: 'end',
                                showGrid: false,
                                showLabel: true,
                                labelInterpolationFnc: function(value) {
                                    return value;
                                }
                            },
                            axisY: {
                                onlyInteger: true,  // forces Y-axis to show only integer ticks
                                offset: 40
                            }
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching data:', error);
                    alert("Error fetching data. Please try again later.");
                }
            });
        });

        $(document).ready(function () {
            $.ajax({
                url: "{{ route('team-members') }}",
                method: "GET",
                success: function (data) {
                    let list = $('#team-members-list');
                    list.empty(); // Clear existing

                    data.forEach(member => {
                        let avatar = member.avatar_url ? member.avatar_url : "{{ asset('assets/img/team/default-avatar.png') }}";

                        // ✅ Use is_online directly from API
                        let status = member.is_online ? "Online" : "Offline";
                        let dotClass = member.is_online ? "bg-success" : "bg-danger";

                        // Optional fallback logic for in-between state
                        if (!member.is_online && member.last_login) {
                            let lastLogin = new Date(member.last_login);
                            let now = new Date();
                            let diff = (now - lastLogin) / (1000 * 60); // in minutes
                            if (diff < 60) {
                                status = "In a meeting";
                                dotClass = "bg-warning";
                            }
                        }

                        list.append(`<li class="list-group-item px-0">
                                        <div class="row align-items-center">
                                            <div class="col-auto">
                                                <a href="{{ route('chat-members') }}?user_id=${member.id}&user_name=${encodeURIComponent(member.name)}" class="avatar">
                                                    <img class="rounded" alt="Avatar" src="${avatar}">
                                                </a>
                                            </div>
                                            <div class="col-auto ms--2">
                                                <h4 class="h6 mb-0"><a href="#">${member.name}</a></h4>
                                                <div class="d-flex align-items-center">
                                                    <div class="${dotClass} dot rounded-circle me-1"></div>
                                                    <small>${status}</small>
                                                </div>
                                            </div>
                                            <div class="col text-end">
                                                <a href="{{ route('chat-members') }}?user_id=${member.id}&user_name=${encodeURIComponent(member.name)}" class="btn btn-sm btn-secondary d-inline-flex align-items-center">
                                                    <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="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z"
                                                              clip-rule="evenodd"></path>
                                                    </svg>
                                                    Message
                                                </a>
                                            </div>
                                        </div>
                                    </li>`);
                    });

                },
                error: function () {
                    alert('Failed to load team members.');
                }
            });
        });

        $(document).ready(function() {
            $.ajax({
                url: "{{ route('page-visited') }}",
                method: 'GET',
                dataType: 'json',
                success: function(data) {
                    let items = Array.isArray(data) ? data : Object.values(data);
                    let tbody = '';

                    items.forEach(item => {
                        let bounceRateNum = item.bounce_rate_percent || 0;  // number already

                        let iconColor = bounceRateNum > 40 ? 'text-danger' : 'text-success';
                        let arrowIcon = iconColor === 'text-danger' ?
                            `<svg class="icon icon-xs text-danger me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
            </svg>` :
                            `<svg class="icon icon-xs text-success me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M14.707 12.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
            </svg>`;

                        tbody += `<tr>
            <th class="text-gray-900" scope="row">${item.page}</th>
            <td class="fw-bolder text-gray-500">${item.page_views.toLocaleString()}</td>
            <td class="fw-bolder text-gray-500">
                <div class="d-flex">${arrowIcon} ${bounceRateNum.toFixed(2)}%</div>
            </td>
        </tr>`;
                    });

                    $('table tbody').html(tbody);
                },
                error: function() {
                    alert('Failed to load page visit data');
                }
            });
        });
    </script>
@endsection