<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
     <?php $__env->slot('header', null, []); ?> 
        <div>
            <h1 class="text-lg font-semibold text-gray-800">Dashboard</h1>
            <p class="text-xs text-gray-400 mt-0.5">Overview of your invoicing activity</p>
        </div>
     <?php $__env->endSlot(); ?>

    <div class="space-y-6">
        <?php if(\App\Models\Business::current()?->is_sandbox): ?>
            <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 flex items-center justify-between shadow-sm">
                <div class="flex items-center gap-3">
                    <span class="w-8 h-8 rounded-lg bg-amber-100 flex items-center justify-center text-amber-700">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                    </span>
                    <div>
                        <h4 class="text-sm font-semibold text-amber-800">Sandbox Testing Mode Active</h4>
                        <p class="text-xs text-amber-600 mt-0.5">All invoices are synced with the FBR Sandbox endpoint for testing purposes only. Change to Production in Business Settings when ready to go live.</p>
                    </div>
                </div>
                <a href="<?php echo e(route('businesses.edit', \App\Models\Business::currentId() ?? 1)); ?>"
                   class="shrink-0 px-3.5 py-1.5 rounded-lg border border-amber-200 hover:bg-amber-100/50 text-amber-700 text-xs font-semibold transition">
                    Configure Mode
                </a>
            </div>
        <?php endif; ?>

        <?php $__currentLoopData = $limitAlerts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $alert): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="bg-red-50 border border-red-200 rounded-xl p-4 flex items-center justify-between shadow-sm">
                <div class="flex items-center gap-3">
                    <span class="w-8 h-8 rounded-lg bg-red-100 flex items-center justify-center text-red-700">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                    </span>
                    <div>
                        <h4 class="text-sm font-semibold text-red-800"><?php echo e($alert['title']); ?></h4>
                        <p class="text-xs text-red-600 mt-0.5"><?php echo e($alert['message']); ?></p>
                    </div>
                </div>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        <div class="lg:hidden">
            <h1 class="text-xl font-bold text-gray-900">Dashboard</h1>
            <p class="text-sm text-gray-500">Overview of your invoicing activity</p>
        </div>

        
        <?php if(auth()->user()->onboarding()->inProgress()): ?>
            <?php
                $percent = auth()->user()->onboarding()->percentageCompleted();
            ?>
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
                <div class="flex items-center justify-between mb-1">
                    <h3 class="font-semibold text-gray-800 text-sm">Complete these steps to unlock full access</h3>
                    <span class="text-xs font-semibold text-indigo-600"><?php echo e(round($percent)); ?>%</span>
                </div>

                <div class="w-full h-2 bg-gray-100 rounded-full overflow-hidden mb-5 mt-3">
                    <div class="h-full bg-gradient-to-r from-indigo-500 to-indigo-600 rounded-full transition-all duration-500"
                         style="width: <?php echo e($percent); ?>%"></div>
                </div>

                <ul class="space-y-2">
                    <?php $__currentLoopData = auth()->user()->onboarding()->steps(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $step): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <li>
                            <?php if($step->complete()): ?>
                                <div class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-green-50/60">
                                    <span class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
                                        <svg class="w-3.5 h-3.5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                                        </svg>
                                    </span>
                                    <span class="text-sm font-medium text-gray-500 line-through"><?php echo e($step->title); ?></span>
                                </div>
                            <?php else: ?>
                                <a href="<?php echo e($step->link); ?>"
                                   class="flex items-center justify-between gap-3 px-3 py-2.5 rounded-lg hover:bg-gray-50 transition group">
                                    <div class="flex items-center gap-3">
                                        <span class="w-6 h-6 rounded-full border-2 border-gray-200 flex-shrink-0 group-hover:border-indigo-400 transition"></span>
                                        <span class="text-sm font-medium text-gray-700"><?php echo e($step->title); ?></span>
                                    </div>
                                    <span class="text-xs font-medium text-indigo-600 bg-indigo-50 px-2.5 py-1 rounded-full whitespace-nowrap group-hover:bg-indigo-100 transition">
                                        <?php echo e($step->cta); ?>

                                    </span>
                                </a>
                            <?php endif; ?>
                        </li>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </ul>
            </div>
        <?php endif; ?>

        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">

            <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm">
                <div class="flex items-center justify-between mb-3">
                    <span class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center">
                        <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                    </span>
                    <?php $growth = $invoiceGrowthPercent ?? 0; ?>
                    <span class="text-xs font-medium <?php echo e($growth >= 0 ? 'text-green-600 bg-green-50' : 'text-red-600 bg-red-50'); ?> px-2 py-0.5 rounded-full">
                        <?php echo e($growth >= 0 ? '+' : ''); ?><?php echo e($growth); ?>%
                    </span>
                </div>
                <p class="text-2xl font-bold text-gray-900"><?php echo e($totalInvoices ?? '0'); ?></p>
                <p class="text-sm text-gray-400 mt-0.5">Total Invoices</p>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm">
                <div class="flex items-center justify-between mb-3">
                    <span class="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center">
                        <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </span>
                </div>
                <p class="text-2xl font-bold text-gray-900"><?php echo e($fbrSubmitted ?? '0'); ?></p>
                <p class="text-sm text-gray-400 mt-0.5">FBR Submitted</p>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm">
                <div class="flex items-center justify-between mb-3">
                    <span class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center">
                        <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </span>
                </div>
                <p class="text-2xl font-bold text-gray-900"><?php echo e($pendingSync ?? '0'); ?></p>
                <p class="text-sm text-gray-400 mt-0.5">Pending Sync</p>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm">
                <div class="flex items-center justify-between mb-3">
                    <span class="w-10 h-10 rounded-lg bg-violet-50 flex items-center justify-center">
                        <svg class="w-5 h-5 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z"/>
                        </svg>
                    </span>
                </div>
                <p class="text-2xl font-bold text-gray-900">Rs. <?php echo e(number_format($totalRevenue ?? 0)); ?></p>
                <p class="text-sm text-gray-400 mt-0.5">Total Revenue</p>
            </div>
        </div>

        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            
            <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 shadow-sm p-5">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h2 class="font-semibold text-gray-800 text-sm">Revenue & Invoice Trend</h2>
                        <p class="text-xs text-gray-400 mt-0.5">Last 6 months</p>
                    </div>
                    <div class="flex items-center gap-4 text-xs">
                        <span class="flex items-center gap-1.5 text-gray-500">
                            <span class="w-2.5 h-2.5 rounded-full bg-indigo-500"></span> Revenue
                        </span>
                        <span class="flex items-center gap-1.5 text-gray-500">
                            <span class="w-2.5 h-2.5 rounded-full bg-violet-300"></span> Invoices
                        </span>
                    </div>
                </div>
                <div class="relative" style="height: 280px;">
                    <canvas id="revenueTrendChart"></canvas>
                </div>
            </div>

            
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
                <h2 class="font-semibold text-gray-800 text-sm mb-1">Sync Status</h2>
                <p class="text-xs text-gray-400 mb-4">Current invoice sync breakdown</p>
                <div class="relative" style="height: 220px;">
                    <canvas id="syncStatusChart"></canvas>
                </div>
                <div id="syncStatusLegend" class="mt-4 space-y-1.5"></div>
            </div>
        </div>

        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            
            <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 shadow-sm">
                <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
                    <h2 class="font-semibold text-gray-800 text-sm">Recent Invoices</h2>
                    <a href="<?php echo e(Route::has('invoices.index') ? route('invoices.index') : '#'); ?>" class="text-xs font-medium text-indigo-600 hover:text-indigo-700">View all</a>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="text-left text-gray-400 text-xs uppercase tracking-wide">
                                <th class="px-5 py-3 font-medium">Invoice #</th>
                                <th class="px-5 py-3 font-medium">Customer</th>
                                <th class="px-5 py-3 font-medium">Amount</th>
                                <th class="px-5 py-3 font-medium">FBR Status</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50">
                            <?php $__empty_1 = true; $__currentLoopData = ($recentInvoices ?? []); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $invoice): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <tr class="hover:bg-gray-50/60">
                                    <td class="px-5 py-3.5 font-medium text-gray-700"><?php echo e($invoice->invoice_number); ?></td>
                                    <td class="px-5 py-3.5 text-gray-500"><?php echo e($invoice->customer->name ?? '—'); ?></td>
                                    <td class="px-5 py-3.5 text-gray-700">Rs. <?php echo e(number_format($invoice->total ?? 0)); ?></td>
                                    <td class="px-5 py-3.5">
                                        <?php
                                            $status = $invoice->fbr_status ?? 'pending';
                                            $badge = match ($status) {
                                                'submitted' => 'bg-green-50 text-green-700',
                                                'failed' => 'bg-red-50 text-red-700',
                                                default => 'bg-amber-50 text-amber-700',
                                            };
                                        ?>
                                        <span class="text-xs font-medium px-2 py-0.5 rounded-full <?php echo e($badge); ?>"><?php echo e(ucfirst($status)); ?></span>
                                    </td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <tr>
                                    <td colspan="4" class="px-5 py-10 text-center text-gray-400 text-sm">No invoices yet</td>
                                </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>

            
            <div class="space-y-6">
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
                    <h2 class="font-semibold text-gray-800 text-sm mb-4">Quick Actions</h2>
                    <div class="space-y-2">
                        <a href="<?php echo e(Route::has('invoices.create') ? route('invoices.create') : '#'); ?>"
                           class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                            Create Invoice
                        </a>
                        <a href="<?php echo e(Route::has('notes.create') ? route('notes.create') : '#'); ?>"
                           class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                            New Credit/Debit Note
                        </a>
                        <a href="<?php echo e(Route::has('customers.create') ? route('customers.create') : '#'); ?>"
                           class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
                            Add Customer
                        </a>
                        <a href="<?php echo e(Route::has('fbr.sync') ? route('fbr.sync') : '#'); ?>"
                           class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                            Sync with FBR
                        </a>
                    </div>
                </div>

                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5">
                    <h2 class="font-semibold text-gray-800 text-sm mb-1">Invoice Types</h2>
                    <p class="text-xs text-gray-400 mb-4">Distribution by document type</p>
                    <div class="relative" style="height: 160px;">
                        <canvas id="invoiceTypeChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <?php $__env->startPush('scripts'); ?>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {

                const trendLabels = <?php echo json_encode($trendLabels ?? [], 15, 512) ?>;
                const trendRevenue = <?php echo json_encode($trendRevenue ?? [], 15, 512) ?>;
                const trendInvoiceCount = <?php echo json_encode($trendInvoiceCount ?? [], 15, 512) ?>;
                const syncStatusCounts = <?php echo json_encode($syncStatusCounts ?? [], 15, 512) ?>;
                const invoiceTypeCounts = <?php echo json_encode($invoiceTypeCounts ?? [], 15, 512) ?>;

                // ---- Revenue & Invoice Trend (combo chart) ----
                new Chart(document.getElementById('revenueTrendChart'), {
                    type: 'bar',
                    data: {
                        labels: trendLabels,
                        datasets: [
                            {
                                type: 'line',
                                label: 'Revenue',
                                data: trendRevenue,
                                borderColor: '#6366f1',
                                backgroundColor: 'rgba(99,102,241,0.08)',
                                borderWidth: 2,
                                tension: 0.35,
                                fill: true,
                                pointRadius: 3,
                                pointBackgroundColor: '#6366f1',
                                yAxisID: 'y',
                            },
                            {
                                type: 'bar',
                                label: 'Invoices',
                                data: trendInvoiceCount,
                                backgroundColor: 'rgba(196,181,253,0.6)',
                                borderRadius: 6,
                                barThickness: 18,
                                yAxisID: 'y1',
                            },
                        ],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        interaction: { mode: 'index', intersect: false },
                        plugins: { legend: { display: false } },
                        scales: {
                            y: {
                                position: 'left',
                                grid: { color: '#f3f4f6' },
                                ticks: {
                                    callback: (v) => 'Rs. ' + (v >= 1000 ? (v / 1000) + 'k' : v),
                                    color: '#9ca3af',
                                    font: { size: 11 },
                                },
                            },
                            y1: {
                                position: 'right',
                                grid: { display: false },
                                ticks: { color: '#9ca3af', font: { size: 11 }, precision: 0 },
                            },
                            x: {
                                grid: { display: false },
                                ticks: { color: '#9ca3af', font: { size: 11 } },
                            },
                        },
                    },
                });

                // ---- Sync Status Doughnut ----
                const statusLabels = Object.keys(syncStatusCounts);
                const statusValues = Object.values(syncStatusCounts);
                const statusColors = {
                    'Synced': '#22c55e',
                    'Draft': '#94a3b8',
                    'Pending': '#f59e0b',
                    'Failed': '#ef4444',
                };
                const statusColorList = statusLabels.map(l => statusColors[l] || '#c4b5fd');

                new Chart(document.getElementById('syncStatusChart'), {
                    type: 'doughnut',
                    data: {
                        labels: statusLabels,
                        datasets: [{
                            data: statusValues,
                            backgroundColor: statusColorList,
                            borderWidth: 0,
                        }],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        cutout: '70%',
                        plugins: { legend: { display: false } },
                    },
                });

                // Custom legend for sync status
                const legendEl = document.getElementById('syncStatusLegend');
                statusLabels.forEach((label, i) => {
                    const row = document.createElement('div');
                    row.className = 'flex items-center justify-between text-xs';
                    row.innerHTML = `
                        <span class="flex items-center gap-2 text-gray-500">
                            <span class="w-2.5 h-2.5 rounded-full" style="background:${statusColorList[i]}"></span>
                            ${label}
                        </span>
                        <span class="font-semibold text-gray-700">${statusValues[i]}</span>
                    `;
                    legendEl.appendChild(row);
                });

                // ---- Invoice Type mini bar chart ----
                const typeLabels = Object.keys(invoiceTypeCounts);
                const typeValues = Object.values(invoiceTypeCounts);

                new Chart(document.getElementById('invoiceTypeChart'), {
                    type: 'bar',
                    data: {
                        labels: typeLabels,
                        datasets: [{
                            data: typeValues,
                            backgroundColor: '#818cf8',
                            borderRadius: 6,
                            barThickness: 16,
                        }],
                    },
                    options: {
                        indexAxis: 'y',
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: { legend: { display: false } },
                        scales: {
                            x: { grid: { color: '#f3f4f6' }, ticks: { color: '#9ca3af', font: { size: 11 }, precision: 0 } },
                            y: { grid: { display: false }, ticks: { color: '#6b7280', font: { size: 11 } } },
                        },
                    },
                });
            });
        </script>
    <?php $__env->stopPush(); ?>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?><?php /**PATH /home/iris/public_html/resources/views/dashboard.blade.php ENDPATH**/ ?>