

<?php $__env->startSection('content'); ?>

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="col-lg-12 mb-4 order-0">
    </div>

    <div class=" mt-4">
        <h4 class="page-title">Transaksi Hari Ini</h4>
        <div class="row mt-2">
            <div class="col-md-6 col-xl-3 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="flex-grow-1">
                                <span class="text-muted text-uppercase fs-12 fw-bold">TOTAL TRANSAKSI</span>
                                <h3 class="mb-0">Rp. <?php echo e(number_format($total_pembelian, 0, '.', ',')); ?></h3>
                                <small>Dengan total <?php echo e($banyak_pembelian); ?>x pemesanan</small>
                            </div>
                            <div class="align-self-center flex-shrink-0">
                                <span class="icon-lg icon-dual-primary" data-feather="shopping-bag"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xl-3 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="flex-grow-1">
                                <span class="text-muted text-uppercase fs-12 fw-bold">TRANSAKSI BERHASIL</span>
                                <h3 class="mb-0">Rp. <?php echo e(number_format($total_pembelian_success, 0, '.', ',')); ?></h3>
                                <small>Dengan total <?php echo e($banyak_pembelian_success); ?>x pemesanan</small>
                            </div>
                            <div class="align-self-center flex-shrink-0">
                                <span class="icon-lg icon-dual-success" data-feather="check-circle"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xl-3 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="flex-grow-1">
                                <span class="text-muted text-uppercase fs-12 fw-bold">TRANSAKSI PENDING</span>
                                <h3 class="mb-0">Rp. <?php echo e(number_format($total_pembelian_pending, 0, '.', ',')); ?></h3>
                                <small>Dengan total <?php echo e($banyak_pembelian_pending); ?>x pemesanan</small>
                            </div>
                            <div class="align-self-center flex-shrink-0">
                                <span class="icon-lg icon-dual-info" data-feather="clock"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xl-3 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="flex-grow-1">
                                <span class="text-muted text-uppercase fs-12 fw-bold">TRANSAKSI BATAL</span>
                                <h3 class="mb-0">Rp. <?php echo e(number_format($total_pembelian_batal, 0, '.', ',')); ?></h3>
                                <small>Dengan total <?php echo e($banyak_pembelian_batal); ?>x pemesanan</small>
                            </div>
                            <div class="align-self-center flex-shrink-0">
                                <span class="icon-lg icon-dual-danger" data-feather="x-circle"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="page-title">Laporan Keseluruhan</h4>
        <div class="row mt-2">
            <div class="col-md-6 col-xl-3 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="flex-grow-1">
                                <span class="text-muted text-uppercase fs-12 fw-bold">TOTAL SELURUH TRANSAKSI</span>
                                <h3 class="mb-0">Rp. <?php echo e(number_format($total_keseluruhan_pembelian, 0, '.', ',')); ?></h3>
                                <small>Dengan total <?php echo e($banyak_keseluruhan_pembelian); ?>x pemesanan</small>
                            </div>
                            <div class="align-self-center flex-shrink-0">
                                <span class="icon-lg icon-dual-primary" data-feather="shopping-bag"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xl-3 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="flex-grow-1">
                                <span class="text-muted text-uppercase fs-12 fw-bold">TOTAL SELURUH TRANSAKSI BERHASIL</span>
                                <h3 class="mb-0">Rp. <?php echo e(number_format($total_keseluruhan_pembelian_berhasil, 0, '.', ',')); ?></h3>
                                <small>Dengan total <?php echo e($banyak_keseluruhan_pembelian_berhasil); ?>x pemesanan</small>
                            </div>
                            <div class="align-self-center flex-shrink-0">
                                <span class="icon-lg icon-dual-success" data-feather="check-circle"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xl-3 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="flex-grow-1">
                                <span class="text-muted text-uppercase fs-12 fw-bold">TOTAL SELURUH TRANSAKSI PENDING</span>
                                <h3 class="mb-0">Rp. <?php echo e(number_format($total_keseluruhan_pembelian_pending, 0, '.', ',')); ?></h3>
                                <small>Dengan total <?php echo e($banyak_keseluruhan_pembelian_pending); ?>x pemesanan</small>
                            </div>
                            <div class="align-self-center flex-shrink-0">
                                <span class="icon-lg icon-dual-info" data-feather="clock"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xl-3 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="flex-grow-1">
                                <span class="text-muted text-uppercase fs-12 fw-bold">TOTAL SELURUH TRANSAKSI BATAL</span>
                                <h3 class="mb-0">Rp. <?php echo e(number_format($total_keseluruhan_pembelian_batal, 0, '.', ',')); ?></h3>
                                <small>Dengan total <?php echo e($banyak_keseluruhan_pembelian_batal); ?>x pemesanan</small>
                            </div>
                            <div class="align-self-center flex-shrink-0">
                                <span class="icon-lg icon-dual-danger" data-feather="x-circle"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xl-3 mb-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="flex-grow-1">
                                <span class="text-muted text-uppercase fs-12 fw-bold">TOTAL KEUNTUNGAN BERSIH</span>
                                <h3 class="mb-0">Rp. <?php echo e(number_format($keuntungan_bersih, 0, '.', ',')); ?></h3>
                                <script>
                                    document.write(new Date().getFullYear());
                                </script>
                            </div>
                            <div class="align-self-center flex-shrink-0">
                                <span class="icon-lg icon-dual-info" data-feather="trending-up"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- Feather Icons CDN -->
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
    feather.replace();
</script>

<style>
    .morris-hover-row-label {
        font-size: 14px;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
    }

    .morris-hover-point {
        font-size: 12px;
        color: #666;
    }
</style>

    <!-- Grafik Pesanan -->
    <div class="col-12 mx-auto order-2 mb-4">
        <div class="card">
            <h5 class="card-header m-0 me-2 pb-3"><div class="mt-3">
       <button onclick="window.print()" class="btn-sm btn-primary">Cetak Laporan</button>
           </div>GRAFIK PESANAN 7 HARI TERAKHIR</h5>
            <div class="card-body">
                <div id="order-chart"></div>
            </div>
        </div>
        
    </div>
  <div class="row">
    <div class="col-lg-6 mb-4">
    <!-- Card total pengguna -->
    <div class="card">
        <h5 class="card-header m-0 me-2 pb-3">
            <div class="d-flex align-items-center">
                <span class="me-2">
                    <i class="icon-lg" data-feather="users"></i>
                </span>
                Total Pengguna
            </div>
        </h5>
        <div class="card-body">
            <h3><?php echo e($total_users); ?></h3>
        </div>
    </div>
</div>

<div class="col-lg-6 mb-4">
    <!-- Card total layanan -->
    <div class="card">
        <h5 class="card-header m-0 me-2 pb-3">
            <div class="d-flex align-items-center">
                <span class="me-2">
                    <i class="icon-lg" data-feather="briefcase"></i>
                </span>
                Total Layanan Tersedia
            </div>
        </h5>
        <div class="card-body">
            <h3><?php echo e($total_services); ?></h3>
        </div>
    </div>
</div>

<div class="col-lg-6 mb-4">
    <!-- Card total kategori game -->
    <div class="card">
        <h5 class="card-header m-0 me-2 pb-3">
            <div class="d-flex align-items-center">
                <span class="me-2">
                    <i class="icon-lg" data-feather="grid"></i>
                </span>
                Total Kategori Game
            </div>
        </h5>
        <div class="card-body">
            <h3><?php echo e($total_games); ?></h3>
        </div>
    </div>
</div>

   
</div>

<div class="row">
    <div class="col-12 mx-auto order-2 mb-4">
        <div class="card">
            <h5 class="card-header m-0 me-2 pb-3">
                <div class="mt-3">Grafik pengguna</div>
            </h5>
            <div class="card-body">
                <div id="user-chart"></div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12 mx-auto order-2 mb-4">
        <!-- Card untuk Grafik Pengunjung -->
        <div class="card">
            <h5 class="card-header m-0 me-2 pb-3">
                <div class="mt-3">Grafik Pengunjung</div>
            </h5>
            <div class="card-body">
                <div id="visitor-chart"></div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        var grafikData = <?php echo $grafik_chart; ?>; 
        var visitorData = <?php echo $visitor_chart; ?>;
        
        // grafik pengguna
        new Morris.Area({
            element: 'user-chart',
            data: grafikData,
            xkey: 'tanggal',
            ykeys: ['pengguna'],
            labels: ['Pengguna Terdaftar'],
            lineColors: ['#3498db'],
            pointSize: 3,
            lineWidth: 2,
            fillOpacity: 0.3,
            behaveLikeLine: true,
            smooth: true,
            gridTextSize: 12,
            gridTextColor: '#888',
            hideHover: 'auto',
            resize: true,
            parseTime: false,
            hoverCallback: function (index, options, content, row) {
                var date = new Date(row.tanggal);
                var month = date.toLocaleString('default', { month: 'long' });
                return '<div class="morris-hover-row-label">' + month + ' ' + date.getDate() + '</div>' +
                    '<div class="morris-hover-point">Pengguna: ' + row.pengguna + '</div>';
            }
        });

        grafik pengunjung
        new Morris.Area({
            element: 'visitor-chart',
            data: visitorData,
            xkey: 'tanggal',
            ykeys: ['pengunjung'],
            labels: ['Pengunjung'],
            lineColors: ['#e74c3c'],
            pointSize: 3,
            lineWidth: 2,
            fillOpacity: 0.3,
            behaveLikeLine: true,
            smooth: true,
            gridTextSize: 12,
            gridTextColor: '#888',
            hideHover: 'auto',
            resize: true,
            parseTime: false,
            hoverCallback: function (index, options, content, row) {
                var date = new Date(row.tanggal);
                var month = date.toLocaleString('default', { month: 'long' });
                return '<div class="morris-hover-row-label">' + month + ' ' + date.getDate() + '</div>' +
                    '<div class="morris-hover-point">Pengunjung: ' + row.pengunjung + '</div>';
            }
        });
    });
</script>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
    <script>
        $(function () {
            var grafikData = <?php echo $morris_data; ?>; 

            // grafik
            new Morris.Area({
                element: 'order-chart',
                data: grafikData,
                xkey: 'y',
                ykeys: ['a'],
                labels: ['Pesanan'],
                lineColors: ['#3d9970'],
                pointSize: 3,
                lineWidth: 2,
                fillOpacity: 0.3,
                behaveLikeLine: true,
                smooth: true,
                gridTextSize: 12,
                gridTextColor: '#888',
                hideHover: 'auto',
                resize: true,
                parseTime: false,
                hoverCallback: function (index, options, content, row) {
                    return '<div class="morris-hover-row-label">' + row.y + '</div>' +
                           '<div class="morris-hover-point">Pesanan: ' + row.a + '</div>';
                }
            });
        });
    </script>

    <style>
        .morris-hover-row-label {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }

        .morris-hover-point {
            font-size: 12px;
            color: #666;
        }
    </style>

</div>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('main-admin', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/u870822285/domains/ramstopup.id/public_html/project/resources/views/components/admin/dashboard.blade.php ENDPATH**/ ?>