@extends('crudbooster::admin_template')

@section('content')
<link rel="stylesheet" type="text/css" href="{{ asset('css/application_backend.css') }}">

<style>
    .cus-statistic-section .small-box h3{
        font-size: 28px;
    }

    .cus-statistic-section .small-box .icon{
        font-size: 80px;
    }

    .cus-statistic-section  .small-box:hover .icon {
        font-size: 86px;
    }
    .chart-section {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .bg-white-with-shadow {
        background-color: #fff;
        border-radius: 5px;
        padding: 15px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        height: 100%;
    }

    .chart-canvas-wrapper .bg-white-with-shadow canvas {
        max-height: 322px;
    }

    .table-container .table-wrapper{
        height: 292px;
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
    }

    .chart-section .table-container .table {
        margin-bottom: 0px;
    }

    .chart-section .table-container .table thead {
        position: relative;
        z-index: 1;
    }

    .chart-section .table-container .table thead>tr {
        background-color: #f2f2f2;
        position: sticky;
        top: 0;
    }
    div.chart-container {
        position: relative;
    }

    .latest-order-tbody,
    .latest-users-tbody,
    .latest-api-order-tbody{
        visibility: hidden;
    }

    div.chart-container i.fa-spin,
    #latest-orders-table i.fa-spin,
    #latest-users-table i.fa-spin,
    #latest-api-order-table > i.fa-spin{
        font-size: 35px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .users-table-data-container{
        position: relative;
        cursor: default;
    } 
    .users-table-data-container:hover .custom-tooltip{
        visibility: visible;
        opacity: 1;
    }

    .custom-tooltip{
        position: absolute;
        top: 25px;
        left: 0;
        background-color: rgb(60, 60, 60);
        color: #fff;
        padding: 5px;
        border-radius: 5px;
        font-size: 12px;
        White-space: nowrap;
        visibility: hidden;
        opacity: 0;
        transition: all .4s ease;
    }

    span.custom-tooltip::after {
        content: " ";
        position: absolute;
        top: -12px;
        left: 10px;
        border-width: 6px;
        border-style: solid;
        border-color: rgb(60, 60, 60) transparent transparent transparent;
        transform: rotate(180deg);
    }

    @media only screen and (max-width: 1800px) {
        .table-container .table-wrapper{
            overflow-x: auto;
        }
    } 

    @media only screen and (max-width: 1440px) {
        .chart-section .chart-canvas-wrapper,
        .chart-section .chart-canvas-wrapper + .col-sm-4 {
            width: 50%;
        }
    }

    @media only screen and (max-width: 1199px) {
        .chart-section {
            flex-direction: column;
        }
        .chart-section .chart-canvas-wrapper {
            margin-bottom: 20px;
        }
        .chart-section .chart-canvas-wrapper,
        .chart-section .chart-canvas-wrapper + .col-sm-4 {
            width: 100%;
        }
    }
    .avatar {
        /* width: 150px;
        height: 100px; */
        /* background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1689055/profile/profile-80.jpg"); */
        /* background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        border-radius: 2px;
        box-shadow: 0 0 0 2px #66cc33;
        width: auto;
        height: auto;
        max-width: 200px;
        float: left;
        margin-right: 10px;
        padding: 5px; */
    }
    .profile {
        width: auto;
        max-width: 300px;
        margin: 0 auto;
    }
    .profile button {
        background: transparent;
        border: 0 none;
        color: rgba(6, 108, 21, 0.732);
        font: bold 11px arial, tahoma, sans-serif;
        cursor: pointer;
        padding: 0px;
    }
    .profile button i {
        width: 6px;
        height: 6px;
        background: #66cc33;
        display: inline-block;
        position: relative;
        top: -1px;
        border-radius: 100%;
        margin-right: 5px;
    }
    .profile button span {
        display: inline-block;
    }
</style>

<div id="statistic-area">

    <div class="statistic-row cus-statistic-section row">
        <div id="area1" class="col-sm-4 connectedSortable ui-sortable">

            <div id="ad753ec2439a12760948586e65e1b42b" class="border-box">

                <div class="small-box bg-green">
                    <div class="inner inner-box total_user">
                        <h3>0</h3>
                        <p>Total User</p>
                        <p>Active-> <span id="live">0</span></p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-users"></i>
                    </div>
                    <a href="{{CRUDBooster::mainpath('users-list')}}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
        </div>
        <div id="area4" class="col-sm-4 connectedSortable ui-sortable">

            <div id="5627d83c6c2d11afdc6d43b9fdcc2df4" class="border-box">

                <div class="small-box bg-yellow">
                    <div class="inner inner-box total_therapist">
                        <h3>0</h3>
                        <p>Total Therapist</p>
                        <p>Active-> <span id="live">0</span></p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-users"></i>
                    </div>
                    <a href="{{CRUDBooster::mainpath('users-list')."?type=Therapist"}}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
        </div>

        <div id="area3" class="col-sm-4 connectedSortable ui-sortable">

            <div id="5d295331afbe68d6eab0cd3897edba9c" class="border-box">

                <div class="small-box bg-aqua">
                    <div class="inner inner-box total_admin">
                        <h3>0</h3>
                        <p>Total Admin</p>
                        <p>Active-> <span id="live">0</span></p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-users"></i>
                    </div>
                    <a href="{{CRUDBooster::mainpath('users-list')."?type=Admin"}}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
        </div>
        <div id="area2" class="col-sm-4 connectedSortable ui-sortable">

            <div id="8c99913276409a478428a5e9d576cbde" class="border-box">

                <div class="small-box bg-red">
                    <div class="inner inner-box total_subusers">
                        <h3>0</h3>
                        <p>Total Subuser</p>
                        <p>Active-> <span id="live">0</span></p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-users"></i>
                    </div>
                    <a href="{{CRUDBooster::adminpath('users-list')."?type=Sub_User"}}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
        </div>
        <div id="area5" class="col-sm-4 connectedSortable ui-sortable">

            <div id="8c99913276409a478428a5e9d576cbde" class="border-box">

                <div class="small-box bg-purple">
                    <div class="inner inner-box total_demo_users">
                        <h3>0</h3>
                        <p>Total Demo User</p>
                        <p>Active-> <span id="live">0</span></p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-users"></i>
                    </div>
                    <a href="{{CRUDBooster::adminpath('users-list')."?type=Demo"}}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
        </div>
        <div id="area6" class="col-sm-4 connectedSortable ui-sortable">

            <div id="8c99913276409a478428a5e9d576cbde" class="border-box">

                <div class="small-box bg-maroon">
                    <div class="inner inner-box total_staff">
                        <h3>0</h3>
                        <p>Total Staff</p>
                        <p>Active-> <span id="live">0</span></p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-users"></i>
                    </div>
                    <a href="{{CRUDBooster::adminpath('users-list')."?type=Staff"}}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
        </div>

    </div>
    {{-- Hourly active users report --}}
    <div class="chart-section row">
        <div class="chart-canvas-wrapper col-md-12">
            <div class="bg-white-with-shadow chart-container" id="HourlyReportChartContainer">
                <div class="form-group col-md-3" id="form-date">
                    <div class="col-sm-8">
                        <input class="form-control" type="date" id="dateInput" value="{{ now() }}">
                    </div>
                </div>
                
                
                <canvas id="chartContainer"></canvas>
                <i class="fa fa-spin fa-spinner"></i>
            </div>
        </div>
    </div>


    {{-- latest users chart sections start --}}
    <div class="chart-section row">
        <div class="chart-canvas-wrapper col-sm-8">
            <div class="bg-white-with-shadow chart-container"  id="usersChartContainer">
                <canvas style="display: none" id="usersChart"></canvas>
                <i class="fa fa-spin fa-spinner"></i>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="table-container bg-white-with-shadow">
                <h4 class="text-center" style="margin-top: 0px;font-weight: bold;">Online Users</h4>
                <div class="table-wrapper" id="latest-users-table">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Username</th>
                                <th>Email</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody class="latest-users-tbody">
                            
                        </tbody>
                    </table>
                    <i class="fa fa-spin fa-spinner"></i>
                </div>
            </div>
        </div>
    </div>
    {{-- latest users  sections end --}}

    {{-- latest orders chart sections start --}}
    <div class="chart-section row">
        <div class="chart-canvas-wrapper col-sm-8">
            <div class="bg-white-with-shadow chart-container" id="ordersChartContainer">
                <canvas style="display: none" id="ordersChart"></canvas>
                <i class="fa fa-spin fa-spinner"></i>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="table-container bg-white-with-shadow">
                <h4 class="text-center" style="margin-top: 0px;font-weight: bold;">Latest Orders</h4>
                <div class="table-wrapper" id="latest-orders-table">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Username</th>
                                <th>Email</th>
                                <th>From</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody class="latest-order-tbody">
                        </tbody>
                    </table>
                    <i class="fa fa-spin fa-spinner"></i>
                </div>
            </div>
        </div>
    </div>
    {{-- latest orders chart sections end --}}


    {{-- latest users chart sections start --}}
    <div class="chart-section row">
        <div class="chart-canvas-wrapper col-sm-8">
            <div class="bg-white-with-shadow chart-container" id="apiChartContainer">
                <canvas style="display: none" id="doughnutChart"></canvas>
                <i class="fa fa-spin fa-spinner"></i>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="table-container bg-white-with-shadow">
                <h4 class="text-center" style="margin-top: 0px;font-weight: bold;">API Orders</h4>
                <div class="table-wrapper" id="latest-api-order-table">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Email</th>
                                <th>Order Key</th>
                                <th>Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody class="latest-api-order-tbody">

                        </tbody>
                    </table>
                    <i class="fa fa-spin fa-spinner"></i>
                </div>
            </div>
        </div>
    </div>
        
    @push('bottom')
        <script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.2/dist/chart.min.js"></script>
        {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script> --}}

        <script type="text/javascript">
            // get dates
            const currentDate = new Date();
            const getDate = currentDate.getDate();
            let days = [];
            // Define a variable to store the current chart instance
            let onlineuser = null;

            // Charts Colors
            const barChartBgColor = ['rgba(255, 99, 132, 0.4)', 'rgba(255, 159, 64, 0.4)', 'rgba(255, 205, 86, 0.4)', 'rgba(75, 192, 192, 0.4)', 'rgba(54, 162, 235, 0.4)', 'rgba(153, 102, 255, 0.4)', 'rgba(201, 203, 207, 0.4)'];
            const doughnutChartBgColor = ['rgba(4, 170, 109, 1)', 'rgba(255, 102, 102, 1)'];
            const borderColors = ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)'];

            //api orders label
            const apiOrderLables = ["Activate Orders", "Deactivate Orders"]

            $(document).ready(function () {

                days = getDayNames();
                
                (async () => {
                    await getUsers();
                })();
                
                // Set the value of the date input to the formatted date
                document.getElementById('dateInput').value = new Date().toISOString().slice(0, 10);

                (async () => {
                    await getActiveUserCount();
                })();
                

                
            });

            // Update the chart when the date input field changes
            $("#dateInput").change(function() {
                // Get the selected date as a string (e.g., "YYYY-MM-DD")
                const selectedDate = new Date($(this).val());
                const currentDate = new Date();
                const daysDifference = Math.floor((currentDate - selectedDate) / (1000 * 60 * 60 * 24));
    
                getActiveUserCount(daysDifference);
            });

            async function getActiveUserCount(targetDay = null) {
                try {
                    // Check if there's an existing chart instance and destroy it
                    if (onlineuser) {
                        onlineuser.destroy();
                    }
                    // Show a loading spinner while fetching data
                    $('div#HourlyReportChartContainer i.fa-spin').show();

                    // Get the selected date, either from the function parameter or the input element
                    var remoteurl = (targetDay) ? '{{CRUDBooster::adminpath("users-list/hourly-report") }}' + "?day=" + targetDay : '{{CRUDBooster::adminpath("users-list/hourly-report") }}';

                    // Fetch the data for the selected date using an AJAX call
                    const response = await fetch(remoteurl, {
                        method: 'GET',
                        // Add any necessary headers or parameters for your API request
                    });

                    if (!response.ok) {
                        throw new Error('Failed to fetch data');
                    }

                    const data = await response.json();
                    let chartData = data.chartData;

                    // Create a configuration object for the chart
                    var chartConfig = {
                        type: 'line',
                        data: {
                            labels: Object.keys(chartData),
                            datasets: [{
                                label: '24 Hour Report',
                                data: chartData
                            }]
                        },
                        options: {
                            responsive: true,
                            title: {
                                display: true,
                                text: '24 Hour Report'
                            }
                        }
                    };

                    // Delay the chart creation process until after the existing chart is destroyed
                    setTimeout(() => {
                        // Create a chart on the canvas element with ID 'chartContainer'
                        var ctx = document.getElementById('chartContainer').getContext('2d');
                        onlineuser = new Chart(ctx, chartConfig);

                        // Hide the loading spinner
                        $('div#HourlyReportChartContainer i.fa-spin').fadeOut("slow");
                    }, 100); // You can adjust the delay as needed

                } catch (error) {
                    // Hide the loading spinner and display an error message
                    $('div#HourlyReportChartContainer i.fa-spin').hide();
                    console.error('Error fetching data:', error);

                    // Optionally, display an error message to the user
                    // You can update your UI to provide feedback to the user here
                    // Example: $('#errorMessage').text('Failed to fetch data. Please try again.');
                }
            }




            function getDayNames() {
                const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
                const today = new Date().getDay(); // Get today's day of the week (0 for Sunday, 1 for Monday, etc.)

                const dayObjects = [];
                for (let i = 0; i < 7; i++) {
                    const index = (today - i + 7) % 7; // Ensure that the index wraps around for days earlier in the week
                    dayObjects.unshift(dayNames[index]); // Add each day name to the beginning of the array
                }

                return dayObjects;
            }

            async function getUsers() {
                
                // Load users chart data
                $.get({
                    url: "{{CRUDBooster::adminpath('users-list/users-count') }}",
                    dataType: 'json',
                    beforeSend: function(){
                        $('.inner #live').html("<i class='fa fa-spin fa-spinner'></i>") 
                        $('.inner h3').html("<i class='fa fa-spin fa-spinner'></i>")
                    },                    
                    success: function(data) {
                        $('.total_subusers h3').html(data.total_subusers)
                        $('.total_user h3').html(data.total_user)
                        $('.total_therapist h3').html(data.total_therapist)
                        $('.total_admin h3').html(data.total_admin)
                        $('.total_demo_users h3').html(data.total_demo_users)
                        $('.total_staff h3').html(data.total_staff)
                        
                        $('.total_subusers p>#live').html(data.a_total_subusers)
                        $('.total_user p>#live').html(data.a_total_user)
                        $('.total_therapist p>#live').html(data.a_total_therapist)
                        $('.total_admin p>#live').html(data.a_total_admin)
                        $('.total_demo_users p>#live').html(data.a_total_demo_users)
                        $('.total_staff p>#live').html(data.a_total_staff)

                        const usersCountData = [data.first_day_user_count, data.second_day_user_count, data.third_day_user_count, data.fourth_day_user_count, data.fifth_day_user_count, data.sixth_day_user_count, data.seventh_day_user_count];
                        const datas = data.all_users_data;

                        let lineChartParamsData = ['usersChart','line', 'Latest Users', usersCountData, barChartBgColor, 3, "#ff6384", days];
                        
                        createNewChart(lineChartParamsData);
                        $('#usersChart').fadeIn("slow");
                        $('div#usersChartContainer i.fa-spin').fadeOut("slow");
                        
                        // dynamic data for tables
                        const datasObjectArray = Object.entries(datas);

                        datasObjectArray.forEach(([key, value]) => {
                            createUsersTableRow(value);
                        });

                        $('.latest-users-tbody').css("visibility","visible");
                        $('#latest-users-table i.fa-spin').fadeOut("fast");
                    }
                }).done(function(response) {
                    // Code to be executed when the AJAX request is successful
                    (async () => {
                        await getOrders();
                    })();
                });
            }

            async function getOrders(){
                // Load orders chart data
                $.ajax({
                    type: "GET",
                    url: "{{CRUDBooster::adminpath('users-list/orders-count') }}",
                    success: function(data) {
                        const ordersCountData = [data.day_0_order_count, data.day_1_order_count, data.day_2_order_count, data.day_3_order_count, data.day_4_order_count, data.day_5_order_count, data.day_7_order_count];
                        const datas = data.all_orders_data;

                        let barChartParamsData = ['ordersChart','bar', 'Latest Orders', ordersCountData, barChartBgColor, 1, borderColors, days];

                        createNewChart(barChartParamsData);
                        $('#ordersChart').fadeIn("slow");
                        $('div#ordersChartContainer i.fa-spin').fadeOut("slow");

                        // dynamic data for tables
                        datas.forEach((item, index)=>{
                            createOrdersTableRow(item);
                        });

                        $('.latest-order-tbody, .latest-api-order-tbody').css("visibility","visible");
                        $('#latest-orders-table i.fa-spin, #latest-api-order-table i.fa-spin').fadeOut("fast");
                        

                    }
                }).done(function(response) {
                    // Code to be executed when the AJAX request is successful
                    (async () => {
                        await getApiOrders();
                    })();
                });  
            }

            async function getApiOrders(){
                // Load API Orders chart data
                $.ajax({
                    type: "GET",
                    url: "{{CRUDBooster::adminpath('users-list/api-orders-count') }}",
                    success: function(data) {
                        const apiOrdersCountData = [data.activateOrders, data.deactivateOrders];

                        let doughnutChartParamsData = ['doughnutChart','doughnut', 'API Orders', apiOrdersCountData, doughnutChartBgColor, 0, null, apiOrderLables];
                        
                        createNewChart(doughnutChartParamsData);
                        // dynamic data for tables
                        data.orders.forEach((item, index)=>{
                            createApiOrdersTableRow(item);
                        });

                        $('#doughnutChart').fadeIn("slow");
                        $('div#apiChartContainer i.fa-spin').fadeOut("slow");
                    }
                });
            }

            function createOrdersTableRow(tableData) {
                let userName = tableData.name;
                let userEmail = tableData.email;
                let orderStatus = tableData.order_status;
                let apiOrderId = tableData.api_order_id;
                
                if (userEmail !== "") {
                    userEmail = tableData.email;
                }else {
                    userEmail = "N/A";
                }

                if (apiOrderId > 0) {
                    apiOrderId = '<i class="fa fa-wordpress" aria-hidden="true"></i>';
                }else{
                    apiOrderId = '<i class="fa fa-home fa-6" aria-hidden="true"></i>';
                }

                if (orderStatus == 1) {
                    orderStatus = "Activate";
                }else{
                    orderStatus = "Deactivate";
                }

                const singleTableRow = `<tr>
                                <td>${userName}</td>
                                <td>${userEmail}</td>
                                <td>${apiOrderId}</td>
                                <td>${orderStatus}</td>
                            </tr>`;

                $(".latest-order-tbody").append(singleTableRow);        
            }

            function createUsersTableRow(tableData) {
                const rolles = { 0: 'Sub_User', 1: 'Admin', 2: 'Therapist', 4: 'Staff', 9: 'Demo' };

                const { first_name, last_name, email, user_status, id, live, user_type } = tableData;
                 
                const userName = `${first_name} ${last_name}`;
                const userEmail = email || "N/A";
                const userStatus = user_status ? '<span class="badge bg-success">Active</span>' : '<span class="badge bg-warning">Removed</span>';
                const userType = '<span class="badge bg-danger">'+ rolles[user_type] + '</span>';
                const userId = id;
                const loginUrl = `<a href="{{CRUDBooster::adminpath('users-list/login/${userId}')}}" class="btn btn-sm btn-primary"><i class="fa fa-sign-in" style="margin-right: 5px;"></i>Login</a>`;

                const userNameDisplay = userName.length > 10 ? `${userName.substring(0, 10)}...` : userName;
                const emailDisplay = userEmail.length > 20 ? `${userEmail.substring(0, 20)}...` : userEmail;
                const onlineStatusColor = live ? 'color: #f39c12 !important; background: #f39c12;' : '';

                const user_name = `
                    <div class="profile">
                        <div class="avatar">
                            <span>${userNameDisplay}</span>
                        </div>                                    
                            <button id="status" ${(tableData.live == false)?'style="color: #f39c12 !important;"':""} >
                                <i ${(tableData.live == false)?'style="color: #f39c12 !important;background: #f39c12;"':""}></i>${(tableData.live)?'<span>Online</span>':'<span>Offline</span>'} 
                            </button>
                    </div>
                `;

                const singleTableRow = `
                    <tr>
                        <td>${user_name}</td>
                        <td>
                            <div class="users-table-data-container">
                                <span>${emailDisplay}</span>
                                <span class="custom-tooltip">${userEmail}</span>
                            </div>
                        </td>
                        <td>${userStatus}</br>${userType}</td>
                        <td>${loginUrl}</td>
                    </tr>
                `;

                $(".latest-users-tbody").append(singleTableRow);
            }


            function createApiOrdersTableRow(tableData) {
                const userDataJson = tableData.user_data;

                // Parse the JSON string into a JavaScript object
                const userData = JSON.parse(userDataJson);

                // Get the email property from the object
                const email = userData.email;

                let userEmail = email;
                let orderKey = tableData.order_key;
                
                // Create a new Date object from the timestamp string
                const timestampDate = new Date(tableData.created_at);

                // Extract the date components
                const year = timestampDate.getFullYear(); // 2023
                const month = timestampDate.getMonth() + 1; // 2 (months are zero-based)
                const day = timestampDate.getDate(); // 2

                // Create a string in 'YYYY-MM-DD' format
                const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;

                let orderDate = formattedDate;
                const id = tableData.id;
                const apiOrderId = tableData.api_order_id;
                let apiOrdersRow = "";
                let emailDots;
                let orderKeyDots;

                if (userEmail !== "") {
                    userEmail = email;
                }else {
                    userEmail = "N/A";
                }

                if (userEmail.length > 20) {
                    emailDots = "...";
                }else{
                    emailDots = "";
                } 
                
                if (orderKey.length > 10) {
                    orderKeyDots = "...";
                }else{
                    orderKeyDots = "";
                }

                if (apiOrderId > 0) {
                    apiOrdersRow = `
                    <tr>
                        <td>
                            <div class="users-table-data-container">
                                <span>${userEmail.substring(0, 20)}${emailDots}</span>
                                <span class="custom-tooltip">${userEmail}</span>
                            </div>
                        </td>
                        <td>
                            <div class="users-table-data-container">
                                <span>${orderKey.substring(0, 10)}${orderKeyDots}</span>
                                <span class="custom-tooltip">${orderKey}</span>
                            </div>
                        </td>
                        <td>${orderDate}</td>
                        <td>
                            <button class="btn btn-sm btn-warning order-sync-${id}" data-api="${apiOrderId}" title="Sync Order"><i class="fa fa-sm fa-refresh text-success" style="margin-right: 5px;">&NonBreakingSpace;</i>SYNC</button>
                        </td>
                    </tr>`;
                }

                const singleTableRow = apiOrdersRow;

                $(".latest-api-order-tbody").append(singleTableRow);

                // order sync
                $(`.order-sync-${id}`).on('click',function(event){
                    event.preventDefault();
                    swal({
                        title:'Are you sure want sync ?',
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: 'rgb(56, 174, 86)',
                        confirmButtonText: 'Yes!',
                        cancelButtonText:'No',
                        closeOnConfirm: false },
                        function(){
                            let url = '';
                            $(`.order-sync-${id}`).find('i').addClass('fa-spin');
                            $('[value="Submit"]').addClass('hide')
                            swal.close();
                            let apiid = $(`.order-sync-${id}`).data('api');
                            $.ajax({
                                type:"post",
                                url:'{{ CRUDBooster::mainpath("sync") }}',
                                data:{id:apiid},
                                success:function(msg){
                                $('[value="Submit"]').removeClass('hide')
                                    if(msg.success){
                                        swal({
                                            title:'Success!',
                                            text: "Sync Successfully Done",
                                            type: 'success',
                                            timer: 3000
                                        })
                                        window.location.reload();
                                    }else{
                                        swal({
                                            title:'Warning!',
                                            text: "Something Wrong",
                                            type: 'warning',
                                            timer: 3000
                                        })
                                    }
                                },
                                error:function(msg){
                                    console.log(msg);
                                }
                            })

                        })
                })
            }

            // Create new chart
            function createNewChart(...array) {
                const selector = array[0][0];
                const chartType = array[0][1];
                const chartCaption = array[0][2];
                const chartValue = array[0][3];
                const chartBg = array[0][4];
                const chartBorderWidth = array[0][5];
                const chartBorderColor = array[0][6];
                const chartlable = array[0][7];


                const ctx = document.getElementById(`${selector}`).getContext('2d');
                let delayed;
                
                const chartData = {
                    labels: chartlable,
                    datasets: [
                        {
                            hoverOffset: 4,
                            label: chartCaption,
                            data: chartValue,
                            borderWidth: chartBorderWidth,
                            borderColor: chartBorderColor,
                            pointRadius: 5,
                            pointHoverRadius: 8,
                            pointBackgroundColor: "#ff6384",
                            backgroundColor: chartBg,
                            maxBarThickness: 80,
                            fill: false,
                            tension: 0.1,
                        }
                    ]
                };


                const config = {
                    type: chartType,
                    data: chartData,
                    options: {
                        responsive: true,
                        animation: {
                            onComplete: () => {
                                delayed = true;
                            },
                            delay: (context) => {
                                let delay = 0;
                                if (context.type === 'data' && context.mode === 'default' && !delayed) {
                                delay = context.dataIndex * 300 + context.datasetIndex * 100;
                                }
                                return delay;
                            }, 
                        },
                    }
                }

                const lineChart = new Chart(ctx, config);
            }
        </script>

    @endpush
@endsection