<?php $__env->startSection('title', 'Analytics'); ?>
<?php $__env->startSection('heading', 'تحليلات Public Beta'); ?>
<?php $__env->startSection('subheading', 'DAU، أحداث، واشتراكات'); ?>

<?php $__env->startSection('content'); ?>
    <div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm font-medium text-zinc-500">DAU اليوم</p>
            <p class="mt-2 text-3xl font-bold text-teal-700"><?php echo e(number_format($dauToday)); ?></p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm font-medium text-zinc-500">مستخدمون فريدون (7 أيام)</p>
            <p class="mt-2 text-3xl font-bold text-madar-950"><?php echo e(number_format($dauWeekUnique)); ?></p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm font-medium text-zinc-500">مستخدمون جدد (7 أيام)</p>
            <p class="mt-2 text-3xl font-bold text-violet-700"><?php echo e(number_format($newUsersWeek)); ?></p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm font-medium text-zinc-500">إجمالي المستخدمين</p>
            <p class="mt-2 text-3xl font-bold text-zinc-800"><?php echo e(number_format($usersTotal)); ?></p>
        </div>
    </div>

    <div class="mb-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm text-zinc-500">طلبات AI (الشهر)</p>
            <p class="mt-2 text-2xl font-bold"><?php echo e(number_format($aiMonth)); ?></p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm text-zinc-500">توليد صور (الشهر)</p>
            <p class="mt-2 text-2xl font-bold"><?php echo e(number_format($imagesMonth)); ?></p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm text-zinc-500">ملفات مرفوعة (إجمالي)</p>
            <p class="mt-2 text-2xl font-bold"><?php echo e(number_format($filesTotal)); ?></p>
        </div>
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
            <p class="text-sm text-zinc-500">اشتراكات نشطة</p>
            <p class="mt-2 text-2xl font-bold"><?php echo e(number_format($subsActive)); ?></p>
        </div>
    </div>

    <div class="mb-6 rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
        <p class="text-sm font-medium text-zinc-500">ملاحظات مستخدمين (7 أيام)</p>
        <p class="mt-2 text-2xl font-bold"><?php echo e(number_format($feedbackWeek)); ?></p>
    </div>

    <div class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm">
        <h3 class="text-lg font-bold text-madar-950">أكثر الأحداث (14 يوماً)</h3>
        <?php
            $labels = $topEvents->pluck('name')->map(fn ($n) => (string) $n)->values()->all();
            $values = $topEvents->pluck('c')->map(fn ($v) => (int) $v)->values()->all();
        ?>
        <?php if(count($labels) > 0): ?>
            <canvas id="evChart" height="120" class="mt-4 max-h-72"></canvas>
            <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
            <script>
                const ctx = document.getElementById('evChart');
                if (ctx) {
                    new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: <?php echo json_encode($labels, 15, 512) ?>,
                            datasets: [{
                                label: 'عدد الأحداث',
                                data: <?php echo json_encode($values, 15, 512) ?>,
                                backgroundColor: 'rgba(20, 184, 166, 0.55)',
                                borderRadius: 8,
                            }]
                        },
                        options: {
                            responsive: true,
                            plugins: { legend: { display: false } },
                            scales: {
                                x: { ticks: { maxRotation: 45, minRotation: 0 } },
                                y: { beginAtZero: true }
                            }
                        }
                    });
                }
            </script>
        <?php else: ?>
            <p class="mt-4 text-sm text-zinc-500">لا توجد أحداث مسجّلة بعد — سيظهر الرسم عند بدء إرسال التطبيق لـ <code class="rounded bg-zinc-100 px-1">analytics/event</code>.</p>
        <?php endif; ?>
    </div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\wamp64\www\madar-backend\resources\views\admin\analytics.blade.php ENDPATH**/ ?>