<div class="ml-[280px] min-h-screen space-y-10 px-6 pt-6">

    <!-- ================= HERO SUMMARY (PREMIUM) ================= -->
    <section
        class="relative rounded-[32px]
           bg-[#f38121]
           px-10 md:px-16 py-12 md:py-14
           text-white
           shadow-[0_35px_80px_-40px_rgba(243,129,33,0.9)]
           overflow-hidden">

        <!-- soft inner glow -->
        <div class="absolute inset-0 bg-white/6 rounded-[32px] pointer-events-none"></div>

        <!-- subtle top sheet line -->
        <div class="absolute inset-x-0 top-0 h-px bg-white/30"></div>

        <!-- subtle bottom accent -->
        <div class="absolute inset-x-0 bottom-0 h-[2px] bg-white/40"></div>

        <div class="relative z-10 max-w-4xl">

            <!-- MICRO LABEL -->
            <p class="text-[10px] uppercase tracking-[0.45em] opacity-80">
                Welcome back
            </p>

            <!-- TITLE -->
            <h1 class="text-[32px] md:text-[36px] font-semibold mt-4 leading-tight tracking-tight">
                EggFirst Admin Dashboard
            </h1>

            <!-- SUBTITLE -->
            <p class="mt-4 text-[15px] md:text-[16px] opacity-90 max-w-2xl">
                Monitor performance, manage content, and oversee platform activity ¡ª
                all in one centralized view.
            </p>

            <!-- META INFO -->
            <div class="mt-10 flex flex-wrap gap-5">

                <!-- DATE -->
                <div
                    class="rounded-2xl bg-white/15 backdrop-blur
                       px-6 py-4 text-sm
                       border border-white/25">
                    <p class="opacity-70 text-[10px] uppercase tracking-widest">
                        Today
                    </p>
                    <p class="font-medium mt-0.5">
                        10 Jan 2026
                    </p>
                </div>

                <!-- STATUS -->
                <div
                    class="rounded-2xl bg-white/15 backdrop-blur
                       px-6 py-4 text-sm
                       border border-white/25">
                    <p class="opacity-70 text-[10px] uppercase tracking-widest">
                        System Status
                    </p>
                    <p class="font-medium mt-0.5 flex items-center gap-2">
                        <span class="w-2 h-2 rounded-full bg-emerald-300"></span>
                        All Systems Operational
                    </p>
                </div>

            </div>
        </div>
    </section>


 <!-- ================= STATS CARDS (PREMIUM KPI) ================= -->
<section class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-8">

    <!-- TOTAL SUBMISSIONS -->
    <div class="relative bg-white rounded-[28px] p-8 border border-gray-100 shadow-[0_20px_45px_-28px_rgba(0,0,0,0.2)]
                overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:scale-[1.01]">
        <div class="absolute inset-x-0 top-0 h-px bg-gray-200/70"></div>
        <div class="absolute inset-x-0 bottom-0 h-[2px] bg-[#f38121]/70"></div>

        <div class="flex items-center justify-between">
            <p class="text-[10px] uppercase tracking-[0.35em] text-gray-400">Total Submissions</p>
            <div class="w-10 h-10 rounded-xl bg-[#f38121]/10 flex items-center justify-center">
                <i data-lucide="clipboard-list" class="w-4 h-4 text-[#f38121]"></i>
            </div>
        </div>

        <p class="text-[42px] font-semibold mt-6 text-gray-900 tracking-tight">
            <?php echo e(number_format($totalSubmissions)); ?>

        </p>

        <div class="mt-4 flex items-center justify-between text-xs">
            <span class="text-emerald-600 font-medium">+<?php echo e($submissionsGrowth); ?>%</span>
            <span class="text-gray-400">vs last month</span>
        </div>

        <div class="mt-3 h-1.5 rounded-full bg-gray-100">
            <div class="h-1.5 rounded-full bg-[#f38121]" style="width:<?php echo e($submissionsGrowth); ?>%"></div>
        </div>
    </div>

    <!-- BLOGS -->
    <div class="relative bg-white rounded-[28px] p-8 border border-gray-100 shadow-[0_20px_45px_-28px_rgba(0,0,0,0.2)]
                overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:scale-[1.01]">
        <div class="absolute inset-x-0 top-0 h-px bg-gray-200/70"></div>
        <div class="absolute inset-x-0 bottom-0 h-[2px] bg-[#f38121]/70"></div>

        <div class="flex items-center justify-between">
            <p class="text-[10px] uppercase tracking-[0.35em] text-gray-400">Blogs Published</p>
            <div class="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center">
                <i data-lucide="file-text" class="w-4 h-4 text-blue-500"></i>
            </div>
        </div>

        <p class="text-[42px] font-semibold mt-6 text-gray-900 tracking-tight">
            <?php echo e(number_format($totalBlogs)); ?>

        </p>

        <div class="mt-4 flex items-center justify-between text-xs">
            <span class="text-blue-600 font-medium">+<?php echo e($monthlyBlogs); ?></span>
            <span class="text-gray-400">this month</span>
        </div>

        <div class="mt-3 h-1.5 rounded-full bg-gray-100">
            <div class="h-1.5 rounded-full bg-blue-500" style="width:<?php echo e(min(100, $monthlyBlogs * 10)); ?>%"></div>
        </div>
    </div>

    <!-- WORK -->
    <div class="relative bg-white rounded-[28px] p-8 border border-gray-100 shadow-[0_20px_45px_-28px_rgba(0,0,0,0.2)]
                overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:scale-[1.01]">
        <div class="absolute inset-x-0 top-0 h-px bg-gray-200/70"></div>
        <div class="absolute inset-x-0 bottom-0 h-[2px] bg-[#f38121]/70"></div>

        <div class="flex items-center justify-between">
            <p class="text-[10px] uppercase tracking-[0.35em] text-gray-400">Total Work</p>
            <div class="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center">
                <i data-lucide="briefcase" class="w-4 h-4 text-emerald-600"></i>
            </div>
        </div>

        <p class="text-[42px] font-semibold mt-6 text-gray-900 tracking-tight">
            <?php echo e(number_format($totalWorks)); ?>

        </p>

        <div class="mt-4 flex items-center justify-between text-xs">
            <span class="text-gray-600">Active & Archived</span>
            <span class="text-emerald-600 font-medium">Stable</span>
        </div>

        <div class="mt-3 h-1.5 rounded-full bg-gray-100">
            <div class="h-1.5 rounded-full bg-emerald-500" style="width:64%"></div>
        </div>
    </div>

    <!-- PAGES -->
    <div class="relative bg-white rounded-[28px] p-8 border border-gray-100 shadow-[0_20px_45px_-28px_rgba(0,0,0,0.2)]
                overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:scale-[1.01]">
        <div class="absolute inset-x-0 top-0 h-px bg-gray-200/70"></div>
        <div class="absolute inset-x-0 bottom-0 h-[2px] bg-[#f38121]/70"></div>

        <div class="flex items-center justify-between">
            <p class="text-[10px] uppercase tracking-[0.35em] text-gray-400">Total Pages</p>
            <div class="w-10 h-10 rounded-xl bg-amber-500/10 flex items-center justify-center">
                <i data-lucide="book-open" class="w-4 h-4 text-amber-600"></i>
            </div>
        </div>

        <p class="text-[42px] font-semibold mt-6 text-gray-900 tracking-tight">
            <?php echo e(number_format($totalPages)); ?>

        </p>

        <div class="mt-4 flex items-center justify-between text-xs">
            <span class="text-amber-600 font-medium"><?php echo e($pendingPages); ?> pending</span>
            <span class="text-gray-400">review</span>
        </div>

        <div class="mt-3 h-1.5 rounded-full bg-gray-100">
            <div class="h-1.5 rounded-full bg-amber-500" style="width:<?php echo e(min(100, $pendingPages * 10)); ?>%"></div>
        </div>
    </div>

</section>



    <!-- ================= ANALYTICS ================= -->
    <section class="grid grid-cols-1 xl:grid-cols-3 gap-8">

        <!-- ================= MAIN CHART ================= -->
        <div
            class="relative xl:col-span-2 bg-white rounded-[28px] p-10
               border border-gray-100
               shadow-[0_20px_45px_-28px_rgba(0,0,0,0.2)]
               overflow-hidden">

            <!-- top subtle sheet line -->
            <div class="absolute inset-x-0 top-0 h-px bg-gray-200/70"></div>

            <!-- bottom accent line (premium touch) -->
            <div class="absolute inset-x-0 bottom-0 h-[2px] bg-[#f38121]/70"></div>

            <!-- HEADER -->
            <div class="flex items-start justify-between mb-8">
                <div>
                    <p class="text-[11px] uppercase tracking-[0.35em] text-gray-400 mb-1">
                        Analytics Overview
                    </p>
                    <h3 class="text-[18px] font-semibold text-gray-900 leading-tight">
                        Platform Analytics
                    </h3>
                    <p class="text-sm text-gray-400 mt-1">
                        Forms ¡¤ Blogs ¡¤ Work ¡¤ Pages
                    </p>
                </div>

                <select
                    class="text-sm rounded-xl border border-gray-200 px-4 py-2
                       focus:outline-none
                       focus:ring-2 focus:ring-[#f38121]/30
                       bg-white">
                    <option>This Month</option>
                    <option>Last Month</option>
                </select>
            </div>

            <div class="h-[300px]">
                <canvas id="analyticsChart"></canvas>
            </div>


        </div>


        <!-- ================= KEY METRICS (PREMIUM) ================= -->
        <div
            class="relative bg-white rounded-[28px] p-10
           border border-gray-100
           shadow-[0_20px_45px_-28px_rgba(0,0,0,0.2)]
           overflow-hidden">

            <!-- top sheet line -->
            <div class="absolute inset-x-0 top-0 h-px bg-gray-200/70"></div>

            <!-- bottom accent line -->
            <div class="absolute inset-x-0 bottom-0 h-[2px] bg-[#f38121]/70"></div>

            <!-- HEADER -->
            <div class="mb-10">
                <p class="text-[10px] uppercase tracking-[0.45em] text-gray-400 mb-1">
                    Performance
                </p>
                <h3 class="text-[18px] font-semibold text-gray-900 tracking-tight">
                    Key Metrics
                </h3>
            </div>

            <!-- METRICS LIST -->
            <div class="space-y-8">

                <!-- Conversion Rate -->
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-500">Conversion Rate</p>
                        <p class="text-[11px] uppercase tracking-widest text-gray-400">
                            Last 30 days
                        </p>
                    </div>

                    <div class="text-right">
                        <p class="text-[20px] font-semibold text-gray-900 tracking-tight">
                            <?php echo e($conversionRate); ?>%
                        </p>
                        <p class="text-xs text-emerald-600">
                            Based on total leads
                        </p>
                    </div>
                </div>

                <div class="h-px bg-gray-200/60"></div>

                <!-- Avg Response Time -->
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-500">Avg Response Time</p>
                        <p class="text-[11px] uppercase tracking-widest text-gray-400">
                            Server Avg
                        </p>
                    </div>

                    <div class="text-right">
                        <p class="text-[20px] font-semibold text-gray-900 tracking-tight">
                            <?php echo e($avgResponseTime); ?>s
                        </p>
                        <p class="text-xs text-emerald-600">
                            Stable
                        </p>
                    </div>
                </div>

                <div class="h-px bg-gray-200/60"></div>

                <!-- Active Content -->
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-500">Active Content</p>
                        <p class="text-[11px] uppercase tracking-widest text-gray-400">
                            Published
                        </p>
                    </div>

                    <div class="text-right">
                        <p class="text-[20px] font-semibold text-gray-900 tracking-tight">
                            <?php echo e($activeContent); ?>

                        </p>
                        <p class="text-xs text-blue-600">
                            +<?php echo e($monthlyContent); ?> items
                        </p>
                    </div>
                </div>

            </div>
        </div>



    </section>



    <!-- ================= RECENT ACTIVITY (PREMIUM) ================= -->
    <!-- ================= RECENT ACTIVITY (PREMIUM) ================= -->
    <section
        class="relative bg-white rounded-[28px] p-10
       border border-gray-100
       shadow-[0_20px_45px_-28px_rgba(0,0,0,0.2)]
       overflow-hidden">

        <div class="absolute inset-x-0 top-0 h-px bg-gray-200/70"></div>
        <div class="absolute inset-x-0 bottom-0 h-[2px] bg-[#f38121]/70"></div>

        <div class="mb-10">
            <p class="text-[10px] uppercase tracking-[0.45em] text-gray-400 mb-1">
                Activity Log
            </p>
            <h3 class="text-[18px] font-semibold text-gray-900 tracking-tight">
                Recent Activity
            </h3>
        </div>

        <ul class="space-y-7">
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $activities; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $activity): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <li class="flex items-start justify-between gap-6">

                    <div class="flex items-start gap-4">
                        <div
                            class="mt-1 w-9 h-9 rounded-xl
                        <?php if($activity['color'] == 'orange'): ?> bg-[#f38121]/10 <?php endif; ?>
                        <?php if($activity['color'] == 'blue'): ?> bg-blue-500/10 <?php endif; ?>
                        <?php if($activity['color'] == 'emerald'): ?> bg-emerald-500/10 <?php endif; ?>
                        flex items-center justify-center">

                            <i data-lucide="<?php echo e($activity['icon']); ?>"
                                class="w-4 h-4
                            <?php if($activity['color'] == 'orange'): ?> text-[#f38121] <?php endif; ?>
                            <?php if($activity['color'] == 'blue'): ?> text-blue-500 <?php endif; ?>
                            <?php if($activity['color'] == 'emerald'): ?> text-emerald-500 <?php endif; ?>">
                            </i>
                        </div>

                        <div>
                            <p class="text-sm font-medium text-gray-900">
                                <?php echo e($activity['title']); ?>

                            </p>
                            <p class="text-xs text-gray-400 mt-1">
                                <?php echo e($activity['subtitle']); ?>

                            </p>
                        </div>
                    </div>

                    <span class="text-xs text-gray-400 whitespace-nowrap">
                        <?php echo e(\Carbon\Carbon::parse($activity['time'])->diffForHumans()); ?>

                    </span>
                </li>

                <div class="h-px bg-gray-200/60"></div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        </ul>
    </section>




</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const chartEl = document.getElementById('analyticsChart');
        if (!chartEl) return;

        const ctx = chartEl.getContext('2d');

        const labels = <?php echo json_encode($chartLabels ?? [], 15, 512) ?>;
        const data = <?php echo json_encode($chartData ?? [], 15, 512) ?>;

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Total Activity',
                    data: data,
                    borderWidth: 3,
                    tension: 0.4,
                    fill: true,
                    backgroundColor: 'rgba(243,129,33,0.08)',
                    borderColor: '#f38121',
                    pointBackgroundColor: '#f38121',
                    pointRadius: 5,
                    pointHoverRadius: 7,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            color: '#6b7280'
                        }
                    },
                    y: {
                        grid: {
                            color: '#e5e7eb'
                        },
                        ticks: {
                            color: '#6b7280'
                        }
                    }
                }
            }
        });
    });
</script>
<?php /**PATH /home/eggfirst/public_html/resources/views/livewire/admin/dashboard.blade.php ENDPATH**/ ?>