@extends('layouts.main')
@section('css-tambahan')
    <style>
        .select2-container .select2-selection--single {
            border: none;
            background: none;
            outline: none;
            box-shadow: none;
            padding: 0;
        }

        .select2-container .select2-selection--single:focus {
            border: none;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #900c3e;
            line-height: 28px;
        }

        .select2-container .select2-selection--single .select2-selection__arrow {
            border: none;
            background: none;
        }

        .select2-container--default.select2-container--open .select2-selection--single {
            border: none;
        }

        .select2-results {
            border-bottom: 1px solid #aaa;
        }

        .select2-results__option {
            padding: 10px;
            color: #333;
            background-color: white;
        }

        .select2-container--default .select2-results>.select2-results__options .select2-results__option--highlighted {
            background-color: #900c3e !important;
            color: #fff !important;
        }
    </style>
@endsection
@section('content')
    <!-- Main Content -->
    <div class="main-content">
        <section class="section">
            <div class="row">
                <div class="col-lg-4 col-md-12 col-sm-12">
                    <div class="card card-statistic-2">
                        <div class="card-stats">
                            <div class="card-stats-title">
                                <h4>
                                    Transaksi - <select class="input" style="width: 40%;" name="filterRole" id="filterRole">
                                        <option value="1" selected>Semua</option>
                                        <option value="2">Pembeli</option>
                                        <option value="3">Penjual</option>
                                    </select>
                                </h4>
                            </div>
                            <div id="semua">
                                <div class="card-stats-items">
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countAllFinished">{{ $countAllFinished }}
                                        </div>
                                        <div class="card-stats-item-label">Selesai</div>
                                    </div>
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countAllPending">{{ $countAllPending }}</div>
                                        <div class="card-stats-item-label">Menunggu</div>
                                    </div>
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countAllProcessed">{{ $countAllProcessed }}
                                        </div>
                                        <div class="card-stats-item-label">Diproses</div>
                                    </div>
                                </div>
                                <div class="card-stats-items">
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countAllCanceled">{{ $countAllCanceled }}
                                        </div>
                                        <div class="card-stats-item-label">Gagal</div>
                                    </div>
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countAllRefund">{{ $countAllRefund }}</div>
                                        <div class="card-stats-item-label">Refund</div>
                                    </div>
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countAllIndicated">{{ $countAllIndicated }}
                                        </div>
                                        <div class="card-stats-item-label">Tertunda</div>
                                    </div>
                                </div>
                            </div>
                            <div id="pembeli" hidden>
                                <div class="card-stats-items mt-3">
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countBuyerFinished">{{ $countBuyerFinished }}
                                        </div>
                                        <div class="card-stats-item-label">Selesai</div>
                                    </div>
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countBuyerPaid">{{ $countBuyerPaid }}
                                        </div>
                                        <div class="card-stats-item-label">Dibayar</div>
                                    </div>
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countBuyerProcessed">
                                            {{ $countBuyerProcessed }}
                                        </div>
                                        <div class="card-stats-item-label">Diproses</div>
                                    </div>
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countBuyerPending">{{ $countBuyerPending }}
                                        </div>
                                        <div class="card-stats-item-label">Menunggu</div>
                                    </div>
                                </div>
                                <div class="card-stats-items">
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countBuyerCancelled">
                                            {{ $countBuyerCancelled }}</div>
                                        <div class="card-stats-item-label">Gagal</div>
                                    </div>
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countBuyerIndicated">
                                            {{ $countBuyerIndicated }}
                                        </div>
                                        <div class="card-stats-item-label">Tertunda</div>
                                    </div>
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countBuyerRefundPending">
                                            {{ $countBuyerRefundPending }}</div>
                                        <div class="card-stats-item-label">Pengajuan Refund</div>
                                    </div>
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countBuyerRefundApproved">
                                            {{ $countBuyerRefundApproved }}</div>
                                        <div class="card-stats-item-label">Disetujui</div>
                                    </div>
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countBuyerRefundDenied">
                                            {{ $countBuyerRefundDenied }}</div>
                                        <div class="card-stats-item-label">Ditolak</div>
                                    </div>
                                </div>
                            </div>
                            <div id="penjual" hidden>
                                <div class="card-stats-items mt-3">
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countSellerFinished">
                                            {{ $countSellerFinished }}</div>
                                        <div class="card-stats-item-label">selesai</div>
                                    </div>
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countSellerProcessed">
                                            {{ $countSellerProcessed }}</div>
                                        <div class="card-stats-item-label">Diproses</div>
                                    </div>
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countSellerSending">
                                            {{ $countSellerSending }}</div>
                                        <div class="card-stats-item-label">Dikirim</div>
                                    </div>
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countSellerSent">{{ $countSellerSent }}
                                        </div>
                                        <div class="card-stats-item-label">Sampai</div>
                                    </div>
                                </div>
                                <div class="card-stats-items">
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countSellerPending">
                                            {{ $countSellerPending }}</div>
                                        <div class="card-stats-item-label">Menunggu</div>
                                    </div>
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countSellerCancelled">
                                            {{ $countSellerCancelled }}</div>
                                        <div class="card-stats-item-label">Gagal</div>
                                    </div>
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countSellerRefund">
                                            {{ $countSellerRefund }}</div>
                                        <div class="card-stats-item-label">Refund</div>
                                    </div>
                                    <div class="card-stats-item">
                                        <div class="card-stats-item-count" id="countSellerIndicated">
                                            {{ $countSellerIndicated }}</div>
                                        <div class="card-stats-item-label">Tertunda</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-icon shadow-primary bg-primary">
                            <i class="fas fa-archive"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4>Jumlah Transaction</h4>
                            </div>
                            <div class="card-body" id="totalTransaction">
                                {{ $totalTransaction }} Transaksi
                            </div>
                        </div>
                        <p class="mb-0 text-muted" id="rateTransaction">
                            <span
                                class="text-{{ $rateTransaction == 0 ? 'secondary text-black-50' : ($rateTransaction > 0 ? 'success' : 'danger') }} me-2"><span
                                    class="mdi  {{ $rateTransaction == 0 ? 'mdi-equal' : ($rateTransaction > 0 ? 'mdi-arrow-up-bold' : 'mdi-arrow-down-bold') }}"></span>
                                {{ abs($rateTransaction) }}%</span>
                            <span class="text-nowrap">Dibandingkan sebelumnya</span>
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12 col-sm-12">
                    <div class="card card-statistic-2">
                        <div class="card-chart">
                            <canvas id="pemasukan-chart" height="100"></canvas>
                        </div>
                        <div class="card-icon shadow-primary bg-primary">
                            <i class="fas fa-dollar-sign"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4>Pemasukan</h4>
                            </div>
                            <div class="card-body" id="totalPemasukan">
                                Rp {{ number_format($totalPemasukan, 2, ',', '.') }}
                            </div>
                        </div>
                        <p class="mb-0 text-muted" id="ratePemasukan">
                            <span
                                class="text-{{ $ratePemasukan == 0 ? 'secondary text-black-50' : ($ratePemasukan > 0 ? 'success' : 'danger') }} me-2"><span
                                    class="mdi  {{ $ratePemasukan == 0 ? 'mdi-equal' : ($ratePemasukan > 0 ? 'mdi-arrow-up-bold' : 'mdi-arrow-down-bold') }}"></span>
                                {{ abs($ratePemasukan) }}%</span>
                            <span class="text-nowrap">Dibandingkan sebelumnya</span>
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12 col-sm-12">
                    <div class="card card-statistic-2">
                        <div class="card-chart">
                            <canvas id="pengeluaran-chart" height="100"></canvas>
                        </div>
                        <div class="card-icon shadow-primary bg-primary">
                            <i class="fas fa-shopping-bag"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4>Pengeluaran</h4>
                            </div>
                            <div class="card-body" id="totalPengeluaran">Rp
                                {{ number_format($totalPengeluaran, 2, ',', '.') }}
                            </div>
                        </div>
                        <p class="mb-0 text-muted" id="ratePengeluaran">
                            <span
                                class="text-{{ $ratePengeluaran == 0 ? 'secondary text-black-50' : ($ratePengeluaran > 0 ? 'success' : 'danger') }} me-2"><span
                                    class="mdi {{ $ratePengeluaran == 0 ? 'mdi-equal' : ($ratePengeluaran > 0 ? 'mdi-arrow-up-bold' : 'mdi-arrow-down-bold') }}"></span>
                                {{ abs($ratePengeluaran) }}%</span>
                            <span class="text-nowrap">Dibandingkan sebelumnya</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="input-group">
                        <input type="text" name="from-to" class="form-control" id="date-range">
                        <span class="input-group-text bg-primary text-white align-items-center">
                            <i class="mdi mdi-calendar-range font-13"></i>
                        </span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div id="rateProfit">
                            <div class="alert alert-{{ $rateProfit == 0 ? 'secondary text-black-50' : ($rateProfit > 0 ? 'success' : 'error') }} alert-dismissible fade show mb-3"
                                role="alert">
                                Transaksi {{ $rateProfit == 0 ? 'sama' : ($rateProfit > 0 ? 'meningkat' : 'menurun') }}
                                <span
                                    class="mdi {{ $rateProfit == 0 ? 'mdi-equal' : ($rateProfit > 0 ? 'mdi-arrow-up-bold' : 'mdi-arrow-down-bold') }}"></span>
                                {{ $rateProfit }}%
                            </div>
                        </div>
                        <div class="card-header">
                            <h4>Transaksi</h4>
                        </div>
                        <div class="card-body">
                            <canvas id="myChart" height="120"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@section('tambahan-js')
    <script>
        let dataLabel = {!! json_encode($dataLabel) !!}
        let dataChartTransaction = {{ json_encode($dataChartTransaction) }}
        let dataChartRefund = {{ json_encode($dataChartRefund) }}
        let dataChartPemasukan = {{ json_encode($dataChartPemasukan) }}
        let dataChartPengeluaran = {{ json_encode($dataChartPengeluaran) }}
    </script>
    <script>
        // Set new default font family and font color to mimic Bootstrap's default styling
        Chart.defaults.global.defaultFontFamily = 'Nunito',
            '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
        Chart.defaults.global.defaultFontColor = '#858796';

        var ctx = document.getElementById("myChart").getContext('2d');
        var myChartTransaksi = new Chart(ctx, {
            type: 'line',
            data: {
                labels: dataLabel,
                datasets: [{
                        label: 'Transaksi',
                        data: dataChartTransaction,
                        borderWidth: 2,
                        backgroundColor: 'rgba(63,82,227,.8)',
                        borderWidth: 0,
                        borderColor: 'transparent',
                        pointBorderWidth: 0,
                        pointRadius: 3.5,
                        pointBackgroundColor: 'transparent',
                        pointHoverBackgroundColor: 'rgba(63,82,227,.8)',
                    },
                    {
                        label: 'Refund',
                        data: dataChartRefund,
                        borderWidth: 2,
                        backgroundColor: 'rgba(254,86,83,.7)',
                        borderWidth: 0,
                        borderColor: 'transparent',
                        pointBorderWidth: 0,
                        pointRadius: 3.5,
                        pointBackgroundColor: 'transparent',
                        pointHoverBackgroundColor: 'rgba(254,86,83,.8)',
                    }
                ]
            },
            options: {
                layout: {
                    padding: 10,
                },
                legend: {
                    display: true,
                    labels: {
                        padding: 10,
                        fontSize: 16
                    }
                },
                scales: {
                    yAxes: [{
                        gridLines: {
                            // display: false,
                            drawBorder: false,
                            color: '#f2f2f2',
                        },
                        ticks: {
                            beginAtZero: true,
                            fontSize: 14,
                            maxTicksLimit: 6,
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Dalam Rupiah (Rp)', // Label khusus untuk sumbu Y
                            fontSize: 16 // Ukuran font untuk label sumbu Y
                        },
                    }],
                    xAxes: [{
                        gridLines: {
                            display: true,
                            tickMarkLength: 15,
                        },
                        ticks: {
                            display: false,
                            maxTicksLimit: 8,
                        },
                        offset: true,
                    }]
                },
            }
        });

        var pemasukan_chart = document.getElementById("pemasukan-chart").getContext('2d');

        var pemasukan_chart_bg_color = pemasukan_chart.createLinearGradient(0, 0, 0, 70);

        pemasukan_chart_bg_color.addColorStop(0, 'rgba(63,82,227,.2)');

        pemasukan_chart_bg_color.addColorStop(1, 'rgba(63,82,227,0)');

        var myChartPemasukan = new Chart(
            pemasukan_chart, {
                type: 'line',
                data: {
                    labels: dataLabel,
                    datasets: [{
                        label: 'Pemasukan',
                        data: dataChartPemasukan,
                        backgroundColor: pemasukan_chart_bg_color,
                        borderWidth: 3,
                        borderColor: 'rgba(63,82,227,1)',
                        pointBorderWidth: 0,
                        pointBorderColor: 'transparent',
                        pointRadius: 3,
                        pointBackgroundColor: 'transparent',
                        pointHoverBackgroundColor: 'rgba(63,82,227,1)',
                    }]
                },
                options: {
                    layout: {
                        padding: 10
                    },
                    legend: {
                        display: false
                    },
                    scales: {
                        yAxes: [{
                            gridLines: {
                                display: false,
                                drawBorder: false,
                            },
                            ticks: {
                                beginAtZero: true,
                                display: false,
                                maxTicksLimit: 4,
                            }
                        }],
                        xAxes: [{
                            gridLines: {
                                drawBorder: false,
                                display: true,
                            },
                            ticks: {
                                display: false,
                                maxTicksLimit: 8,
                            },
                            offset: true,
                        }]
                    },
                }
            });

        var pengeluaran = document.getElementById("pengeluaran-chart");
        var pengeluaran_chart = pengeluaran.getContext('2d');

        var pengeluaran_chart_bg_color = pengeluaran_chart.createLinearGradient(0, 0, 0, 80);
        pengeluaran_chart_bg_color.addColorStop(0, 'rgba(63,82,227,.2)');
        pengeluaran_chart_bg_color.addColorStop(1, 'rgba(63,82,227,0)');

        var myChartPengeluaran = new Chart(pengeluaran_chart, {
            type: 'line',
            data: {
                labels: dataLabel,
                datasets: [{
                    label: 'Pengeluaran',
                    data: dataChartPengeluaran,
                    borderWidth: 2,
                    backgroundColor: pengeluaran_chart_bg_color,
                    borderWidth: 3,
                    borderColor: 'rgba(63,82,227,1)',
                    pointBorderWidth: 0,
                    pointBorderColor: 'transparent',
                    pointRadius: 3,
                    pointBackgroundColor: 'transparent',
                    pointHoverBackgroundColor: 'rgba(63,82,227,1)',
                }]
            },
            options: {
                layout: {
                    padding: 10
                },
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        gridLines: {
                            display: false,
                            drawBorder: false,
                        },
                        ticks: {
                            beginAtZero: true,
                            display: false,
                            maxTicksLimit: 4,
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            drawBorder: false,
                            display: true,
                        },
                        ticks: {
                            display: false,
                            maxTicksLimit: 8,
                        },
                        offset: true,
                    }]
                },
            }
        });
    </script>
    <script>
        $(document).ready(function() {
            const csrfToken = $('meta[name="csrf-token"]').attr('content');
            let searchParams = new URLSearchParams(window.location.search);
            let dateInterval = searchParams.get('from-to');
            let start = moment().subtract(29, 'days');
            let end = moment();

            $('#filterRole').select2();

            $('#filterRole').change(function() {
                let id = $(this).val();

                if (id == "1") {
                    $('#semua').removeAttr('hidden');
                    $('#pembeli').attr('hidden', true);
                    $('#penjual').attr('hidden', true);
                } else if (id == "2") {
                    $('#semua').attr('hidden', true);
                    $('#pembeli').removeAttr('hidden');
                    $('#penjual').attr('hidden', true);
                } else {
                    $('#semua').attr('hidden', true);
                    $('#pembeli').attr('hidden', true);
                    $('#penjual').removeAttr('hidden');
                }
            });

            if (dateInterval) {
                dateInterval = dateInterval.split(' - ');
                start = moment(dateInterval[0]);
                end = moment(dateInterval[1]);
            }

            $('#date-range').daterangepicker({
                "showDropdowns": true,
                "showWeekNumbers": true,
                "alwaysShowCalendars": true,
                startDate: start,
                endDate: end,
                locale: {
                    format: 'YYYY-MM-DD',
                    firstDay: 1,
                },
                minDate: "2023-01-01",
                maxDate: "2025-12-31",
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf(
                        'month')],
                    'This Year': [moment().startOf('year'), moment().endOf('year')],
                    'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year')
                        .endOf(
                            'year')
                    ]
                }
            }).on('apply.daterangepicker', function(ev, picker) {
                var startDate = picker.startDate.format('YYYY-MM-DD');
                var endDate = picker.endDate.format('YYYY-MM-DD');

                Swal.fire({
                    html: '<div class="mt-3"><lord-icon src="https://cdn.lordicon.com/etwtznjn.json" trigger="loop" colors="primary:#0ab39c,secondary:#405189" style="width:120px;height:120px"></lord-icon><div class="mt-4 pt-2 fs-15"><h4>Form Anda sedang diproses!</h4><p class="text-muted mx-4 mb-0">Mohon tunggu...</p></div></div>',
                    allowEscapeKey: false,
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    }
                });

                $.ajax({
                    url: "{{ route('user.get-data-dashboard') }}",
                    type: 'GET',
                    data: {
                        startDate: startDate,
                        endDate: endDate
                    },
                    success: function(response) {
                        Swal.close();
                        myChartTransaksi.data.datasets[0].data = response.dataChartTransaction;
                        myChartTransaksi.data.datasets[1].data = response.dataChartRefund;
                        myChartTransaksi.data.labels = response.dataLabel;
                        myChartTransaksi.update();

                        myChartPemasukan.data.datasets[0].data = response.dataChartUser;
                        myChartPemasukan.data.labels = response.dataLabel;
                        myChartPemasukan.update();

                        myChartPengeluaran.data.datasets[0].data = response.dataChartUser;
                        myChartPengeluaran.data.labels = response.dataLabel;
                        myChartPengeluaran.update();

                        // Semua
                        $('#countAllFinished').html(response.countAllFinished);
                        $('#countAllPending').html(response.countAllPending);
                        $('#countAllProcessed').html(response.countAllProcessed);
                        $('#countAllCanceled').html(response.countAllCanceled);
                        $('#countAllRefund').html(response.countAllRefund);
                        $('#countAllIndicated').html(response.countAllIndicated);

                        // Pembeli
                        $('#countBuyerFinished').html(response.countBuyerFinished);
                        $('#countBuyerPaid').html(response.countBuyerPaid);
                        $('#countBuyerPending').html(response.countBuyerPending);
                        $('#countBuyerProcessed').html(response.countBuyerProcessed);
                        $('#countBuyerCancelled').html(response.countBuyerCancelled);
                        $('#countBuyerRefundPending').html(response.countBuyerRefundPending);
                        $('#countBuyerRefundApproved').html(response.countBuyerRefundApproved);
                        $('#countBuyerRefundDenied').html(response.countBuyerRefundDenied);
                        $('#countBuyerIndicated').html(response.countBuyerIndicated);

                        // Penjual
                        $('#countSellerPending').html(response.countSellerPending);
                        $('#countSellerFinished').html(response.countSellerFinished);
                        $('#countSellerProcessed').html(response.countSellerProcessed);
                        $('#countSellerSending').html(response.countSellerSending);
                        $('#countSellerSent').html(response.countSellerSent);
                        $('#countSellerCancelled').html(response.countSellerCancelled);
                        $('#countSellerRefund').html(response.countSellerRefund);
                        $('#countSellerIndicated').html(response.countSellerIndicated);

                        $('#totalTransaction').html(response.totalTransaction);

                        var activitiesRateTransaction = '';
                        var rateTransactionClass = response.rateTransaction == 0 ?
                            "secondary text-black-50" : (response.rateTransaction > 0 ?
                                "success" : "danger");
                        var rateTransactionClassIcon = response.rateTransaction == 0 ?
                            "mdi-equal" : (response.rateTransaction > 0 ?
                                "mdi-arrow-up-bold" : "mdi-arrow-down-bold");

                        activitiesRateTransaction = `
                            <span class="text-${rateTransactionClass} me-2"><span
                                    class="mdi ${rateTransactionClassIcon}"></span>
                                ${Math.abs(response.rateTransaction)}%</span>
                            <span class="text-nowrap">Dibandingkan sebelumnya</span>
                        `;

                        $('#rateTransaction').html(activitiesRateTransaction);

                        // Pemasukan
                        $('#totalPemasukan').html(response.totalPemasukan);

                        var activitiesratePemasukan = '';
                        var ratePemasukanClass = response.ratePemasukan == 0 ?
                            "secondary text-black-50" : (response.ratePemasukan > 0 ?
                                "success" : "danger");
                        var ratePemasukanClassIcon = response.ratePemasukan == 0 ?
                            "mdi-equal" : (response.ratePemasukan > 0 ?
                                "mdi-arrow-up-bold" : "mdi-arrow-down-bold");

                        activitiesratePemasukan = `
                            <span class="text-${ratePemasukanClass} me-2"><span
                                    class="mdi ${ratePemasukanClassIcon}"></span>
                                ${Math.abs(response.ratePemasukan)}%</span>
                            <span class="text-nowrap">Dibandingkan sebelumnya</span>
                        `;

                        $('#ratePemasukan').html(activitiesratePemasukan);

                        // Pengeluaran
                        $('#totalPengeluaran').html(response.totalPengeluaran);

                        var activitiesRatePengeluaran = '';
                        var ratePengeluaranClass = response.ratePengeluaran == 0 ?
                            "secondary text-black-50" : (response.ratePengeluaran > 0 ?
                                "success" : "danger");
                        var ratePengeluaranClassIcon = response.ratePengeluaran == 0 ?
                            "mdi-equal" : (response.ratePengeluaran > 0 ?
                                "mdi-arrow-up-bold" : "mdi-arrow-down-bold");

                        activitiesRatePengeluaran = `
                            <span class="text-${ratePengeluaranClass} me-2"><span
                                    class="mdi ${ratePengeluaranClassIcon}"></span>
                                ${Math.abs(response.ratePengeluaran)}%</span>
                            <span class="text-nowrap">Dibandingkan sebelumnya</span>
                        `;

                        $('#ratePengeluaran').html(activitiesRatePengeluaran);

                        // Profit
                        var activitiesRateProfit = '';
                        var rateProfitClass = response.rateProfit == 0 ?
                            "secondary text-black-50" : (response.rateProfit > 0 ?
                                "success" : "danger");
                        var rateProfitMention = response.rateProfit == 0 ? "sama" : (response
                            .rateProfit > 0 ? "meningkat" : "menurun");
                        var rateProfitClassIcon = response.rateProfit == 0 ?
                            "sama" : (response.rateProfit > 0 ?
                                "meningkat" : "menurun");

                        activitiesRateProfit = `
                            <div class="alert alert-${rateProfitClass} alert-dismissible fade show mb-3"
                                role="alert">
                                Pendapatan ${rateProfitMention}
                                <span
                                    class="mdi ${rateProfitClassIcon}"></span>
                                ${Math.abs(response.rateProfit)}%
                            </div>
                        `;

                        $('#rateProfit').html(activitiesRateProfit);
                    },
                    error: function(error) {
                        Swal.close();
                        console.log(error);
                    }
                });
            });
        });
    </script>
@endsection