<?php $__env->startSection('content'); ?>
    <div class="row mt-2 d-flex justify-content-center">
        <div class="col-3 bg-success bg-gradient  mx-5 rounded p-5">
            <h1><?php echo e(__('lang.active')); ?> <?php echo e(__('lang.clients')); ?></h1>
            <span class="text-center fw-bold fs-1"><?php echo e($activeClients); ?></span>
            <i class="bi bi-person fs-2 fw-bold text-black d-flex justify-content-end align-items-start"></i>
        </div>
        <div class="col-3 bg-danger bg-gradient  mx-5 rounded p-5">
            <h1><?php echo e(__('lang.inactive')); ?> <?php echo e(__('lang.clients')); ?></h1>
            <span class="text-center fw-bold fs-1"><?php echo e($inactiveClients); ?></span>
            <i class="bi bi-person fs-2 fw-bold text-black d-flex justify-content-end align-items-start"></i>
        </div>
        <div class="col-3 bg-info bg-gradient  mx-5 rounded p-5">
            <h1> <?php echo e(__('lang.clients')); ?></h1>
            <span class="text-center fw-bold fs-1"><?php echo e($clients); ?></span>
            <i class="bi bi-person fs-2 fw-bold text-black d-flex justify-content-end align-items-start"></i>
        </div>
        <div class="col-3 bg-success bg-gradient  mx-5 my-2 rounded p-5">
            <h1><?php echo e(__('lang.incoming_auctions')); ?> </h1>
            <span class="text-center fw-bold fs-1"><?php echo e($incoming_auctions); ?></span>
            <i class="bi bi-hammer  fs-2 fw-bold text-black d-flex justify-content-end align-items-start"></i>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <div class="row mt-2">
        <canvas id="auctionChart" width="400" height="200"></canvas>
    </div>

    <script>
        const rawData = <?php echo json_encode($auctions_data, 15, 512) ?>;
        const local = "<?php echo e(app()->getLocale()); ?>";

        function formatMonthYear(key) {
            const [year, month] = key.split("-");
            if (local == 'en') {
                var monthNames = {
                    "01": "Jan",
                    "02": "Feb",
                    "03": "Mar",
                    "04": "Apr",
                    "05": "May",
                    "06": "Jun",
                    "07": "Jul",
                    "08": "Aug",
                    "09": "Sep",
                    "10": "Oct",
                    "11": "Nov",
                    "12": "Dec"
                };
            } else {
                var monthNames = {
                    "01": "يناير",
                    "02": "فبراير",
                    "03": "مارس",
                    "04": "أبريل",
                    "05": "مايو",
                    "06": "يونيو",
                    "07": "يوليو",
                    "08": "أغسطس",
                    "09": "سبتمبر",
                    "10": "أكتوبر",
                    "11": "نوفمبر",
                    "12": "ديسمبر"
                };
            }

            return `${monthNames[month]} ${year}`;
        }

        const sortedKeys = Object.keys(rawData).sort();
        const labels = sortedKeys.map(k => formatMonthYear(k));
        const counts = sortedKeys.map(k => rawData[k]);

        const ctx = document.getElementById('auctionChart').getContext('2d');
        const chart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: '<?php echo e(__('lang.incoming_auctions')); ?>',
                    data: counts,
                    backgroundColor: 'rgba(54, 162, 235, 0.6)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1,
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('AdminPanel.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/oday/public_html/mazdashboard.alialzahabia.com/resources/views/welcome.blade.php ENDPATH**/ ?>