<?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 class="dashboard-page-header">
            <div>
                <h2 class="dashboard-title-main">Dashboard</h2>
            </div>
            <div class="dashboard-header-actions">
                <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('customer.create')): ?>
                    <a href="<?php echo e(route('admin.customers.create')); ?>" class="dashboard-header-btn dashboard-header-btn-light">
                        <i data-feather="user-plus"></i>
                        <span>New Customer</span>
                    </a>
                <?php endif; ?>
                <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('billing.view')): ?>
                    <a href="<?php echo e(route('admin.billings.index')); ?>" class="dashboard-header-btn dashboard-header-btn-primary">
                        <i data-feather="credit-card"></i>
                        <span>Collect Payment</span>
                    </a>
                <?php endif; ?>
            </div>
        </div>
     <?php $__env->endSlot(); ?>

    <?php
        $currency = app(\App\Services\CurrencyService::class);
        $stats = [
            ['title' => 'Total Customers', 'value' => number_format($totalCustomers), 'icon' => 'users', 'tone' => 'blue'],
            ['title' => 'Active Customers', 'value' => number_format($activeCustomers), 'icon' => 'user-check', 'tone' => 'green'],
            ['title' => 'Inactive Customers', 'value' => number_format($inactiveCustomers), 'icon' => 'user-x', 'tone' => 'red'],
            ['title' => "Today's Collection", 'value' => $currency->format($todayCollection), 'icon' => 'dollar-sign', 'tone' => 'cyan'],
            ['title' => 'Total Due', 'value' => $currency->format($totalDue), 'icon' => 'alert-circle', 'tone' => 'amber'],
            ['title' => 'Connected Routers', 'value' => number_format($connectedRouters), 'icon' => 'server', 'tone' => 'violet'],
        ];

        if(auth()->user()->can('sms.view')) {
            $stats[] = ['title' => 'SMS Balance', 'value' => $currency->format($smsBalance), 'icon' => 'message-square', 'tone' => 'slate'];
        }
    ?>

    <div class="simple-dashboard">
        <section class="dashboard-stat-grid">
            <?php $__currentLoopData = $stats; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $stat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <article class="dashboard-stat-card">
                    <span class="stat-icon stat-<?php echo e($stat['tone']); ?>">
                        <i data-feather="<?php echo e($stat['icon']); ?>"></i>
                    </span>
                    <div class="stat-content">
                        <span><?php echo e($stat['title']); ?></span>
                        <strong><?php echo e($stat['value']); ?></strong>
                    </div>
                </article>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </section>

        <?php if(! auth()->user()->isEntryOperator()): ?>
            <section class="dashboard-router-panel">
                <div class="panel-title-row">
                    <div>
                        <h3>Router Status</h3>
                    </div>
                    <div class="router-panel-note">
                        <?php if(! $mikrotikCustomers['available']): ?>
                            <span class="status-pill status-pill-muted">No snapshot available</span>
                        <?php elseif($mikrotikCustomers['is_stale']): ?>
                            <span class="status-pill status-pill-warning">Router snapshot available, currently disconnected</span>
                        <?php else: ?>
                            <span class="status-pill status-pill-success">Cached live snapshot</span>
                        <?php endif; ?>
                    </div>
                </div>

                <div class="router-card-grid">
                    <?php $__empty_1 = true; $__currentLoopData = $routerSummaries; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $router): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <a href="<?php echo e(route('admin.mikrotik-secrets.index', ['mikrotik_id' => $router['id']])); ?>" class="router-card-link">
                            <article class="router-card">
                                <div class="router-card-top">
                                    <div>
                                        <h4><?php echo e($router['name']); ?></h4>
                                        <small><?php echo e($router['ip_address'] ?: 'No IP saved'); ?></small>
                                    </div>
                                    <span class="router-connection <?php echo e($router['connected'] ? 'is-online' : 'is-offline'); ?>">
                                        <i></i><?php echo e($router['connected'] ? 'Connected' : 'Disconnected'); ?>

                                    </span>
                                </div>

                                <div class="router-metric-grid">
                                    <div>
                                        <span>Online</span>
                                        <strong><?php echo e(number_format($router['online'])); ?></strong>
                                    </div>
                                    <div>
                                        <span>Offline</span>
                                        <strong><?php echo e(number_format($router['offline'])); ?></strong>
                                    </div>
                                    <div>
                                        <span>Enabled</span>
                                        <strong><?php echo e(number_format($router['enabled'])); ?></strong>
                                    </div>
                                    <div>
                                        <span>Disabled</span>
                                        <strong><?php echo e(number_format($router['disabled'])); ?></strong>
                                    </div>
                                </div>

                                <div class="router-card-footer">
                                    <span>
                                        <?php if($router['synced_at']): ?>
                                            Updated <?php echo e(\Illuminate\Support\Carbon::parse($router['synced_at'])->diffForHumans()); ?>

                                        <?php elseif($router['has_snapshot']): ?>
                                            Snapshot available
                                        <?php else: ?>
                                            No router snapshot yet
                                        <?php endif; ?>
                                    </span>
                                    <strong>Open secret list</strong>
                                </div>
                            </article>
                        </a>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <div class="dashboard-empty-state">
                            <span><i data-feather="server"></i></span>
                            <strong>No MikroTik router found</strong>
                        </div>
                    <?php endif; ?>
                </div>
            </section>
        <?php endif; ?>

        <div class="dashboard-bottom-grid graph-layout">
            <section class="dashboard-panel chart-panel">
                <div class="panel-title-row">
                    <div>
                        <h3>Business Overview</h3>
                    </div>
                </div>

                <div id="businessOverviewChart" class="business-chart-canvas"></div>
            </section>

            <aside class="dashboard-panel chart-side-panel">
                <div class="panel-title-row">
                    <div>
                        <h3>This Month</h3>
                    </div>
                </div>

                <?php
                    $thisMonthCustomers = $businessChart['customers'][count($businessChart['customers']) - 1] ?? 0;
                    $lastMonthCustomers = $businessChart['customers'][count($businessChart['customers']) - 2] ?? 0;
                    $customerGrowth = max(0, $thisMonthCustomers - $lastMonthCustomers);
                    $thisMonthCollection = $businessChart['collections'][count($businessChart['collections']) - 1] ?? 0;
                    $thisMonthDue = $businessChart['dues'][count($businessChart['dues']) - 1] ?? 0;
                    $currencyCode = strtoupper(app(\App\Services\SettingService::class)->get('currency.code', 'BDT'));
                    $currencySymbol = app(\App\Services\SettingService::class)->get('currency.symbol', $currency->symbols()[$currencyCode] ?? $currencyCode);
                ?>

                <div class="insight-stack">
                    <article class="insight-card insight-purple">
                        <span>Monthly collection</span>
                        <strong><?php echo e($currency->format($thisMonthCollection)); ?></strong>
                    </article>

                    <article class="insight-card insight-orange">
                        <span>Monthly due</span>
                        <strong><?php echo e($currency->format($thisMonthDue)); ?></strong>
                    </article>

                    <article class="insight-card insight-cyan">
                        <span>Customer growth</span>
                        <strong><?php echo e(number_format($customerGrowth)); ?></strong>
                    </article>
                </div>
            </aside>
        </div>
    </div>

    <?php $__env->startPush('scripts'); ?>
        <style>
            .simple-dashboard{display:grid;gap:1rem}
            .dashboard-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
            .dashboard-date{display:block;font-size:.73rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#7b8796}
            .dashboard-title-main{margin:.2rem 0 0;font-size:1.55rem;font-weight:800;color:#162334}
            .dashboard-header-actions{display:flex;gap:.65rem;flex-wrap:wrap}
            .dashboard-header-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:42px;padding:.65rem .95rem;border-radius:12px;border:1px solid #d9e1ea;font-size:.82rem;font-weight:700;text-decoration:none;transition:.18s}
            .dashboard-header-btn svg{width:16px;height:16px}
            .dashboard-header-btn-light{background:#fff;color:#1f3043}
            .dashboard-header-btn-light:hover{background:#f7f9fc;color:#1f3043}
            .dashboard-header-btn-primary{background:#4f46e5;border-color:#4f46e5;color:#fff}
            .dashboard-header-btn-primary:hover{background:#4338ca;color:#fff}
            .dashboard-summary-strip,.dashboard-panel,.dashboard-router-panel{background:#fff;border:1px solid #e7edf4;border-radius:20px;box-shadow:0 10px 30px rgba(15,23,42,.04)}
            .dashboard-summary-strip{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.35rem}
            .summary-label,.panel-kicker{display:block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#7b8796}
            .dashboard-summary-strip h3{margin:.2rem 0;font-size:1.25rem;font-weight:800;color:#162334}
            .dashboard-summary-strip p{margin:0;color:#708093}
            .summary-inline-stats{display:flex;gap:.75rem;flex-wrap:wrap}
            .summary-inline-stats>div{min-width:120px;padding:.9rem 1rem;border-radius:16px;background:#f7f9fc;border:1px solid #e7edf4}
            .summary-inline-stats span{display:block;font-size:.72rem;color:#7d8997}
            .summary-inline-stats strong{display:block;margin-top:.2rem;font-size:1.4rem;color:#152233}
            .dashboard-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
            .dashboard-stat-card{display:flex;align-items:center;gap:.9rem;padding:1rem 1.05rem;background:#fff;border:1px solid #e7edf4;border-radius:18px;box-shadow:0 8px 24px rgba(15,23,42,.035)}
            .stat-icon{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:14px}
            .stat-icon svg{width:20px;height:20px}
            .stat-content{min-width:0}
            .stat-content span{display:block;font-size:.76rem;color:#76869a}
            .stat-content strong{display:block;margin-top:.15rem;font-size:1.15rem;color:#162334;overflow-wrap:anywhere}
            .stat-blue{color:#275fb2;background:#ebf2ff}.stat-green{color:#1f8b63;background:#e8f7f0}.stat-red{color:#c24d4d;background:#fdeeee}.stat-cyan{color:#11849f;background:#e8f7fb}.stat-amber{color:#b97819;background:#fff4e4}.stat-violet{color:#7554c7;background:#f1edff}.stat-slate{color:#54657b;background:#eef2f6}
            .dashboard-router-panel,.dashboard-panel{padding:1.2rem}
            .panel-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
            .panel-title-row h3{margin:.15rem 0 0;font-size:1.02rem;font-weight:800;color:#17263a}
            .status-pill{display:inline-flex;align-items:center;padding:.45rem .75rem;border-radius:999px;font-size:.72rem;font-weight:700}
            .status-pill-success{color:#0f7a55;background:#eaf7f1}
            .status-pill-warning{color:#a56a12;background:#fff6e6}
            .status-pill-muted{color:#687789;background:#f2f5f8}
            .router-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
            .router-card-link{text-decoration:none}
            .router-card{height:100%;padding:1rem;border:1px solid #e7edf4;border-radius:18px;background:#fbfcfe;transition:.18s}
            .router-card:hover{transform:translateY(-2px);border-color:#cfd9e6;box-shadow:0 10px 26px rgba(15,23,42,.06)}
            .router-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:1rem}
            .router-card-top h4{margin:0;font-size:1rem;font-weight:800;color:#162334}
            .router-card-top small{color:#76869a}
            .router-connection{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;border-radius:999px;font-size:.72rem;font-weight:700}
            .router-connection i{width:8px;height:8px;border-radius:50%;background:currentColor}
            .router-connection.is-online{color:#0f7a55;background:#eaf7f1}
            .router-connection.is-offline{color:#b84f4f;background:#fdeeee}
            .router-metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
            .router-metric-grid>div{padding:.85rem .9rem;border:1px solid #e6ecf2;border-radius:14px;background:#fff}
            .router-metric-grid span{display:block;font-size:.72rem;color:#7b8899}
            .router-metric-grid strong{display:block;margin-top:.18rem;font-size:1.1rem;color:#152233}
            .router-card-footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:1rem;padding-top:.85rem;border-top:1px solid #e8edf4}
            .router-card-footer span{font-size:.72rem;color:#7b8796}
            .router-card-footer strong{font-size:.76rem;color:#4f46e5}
            .dashboard-bottom-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.9fr);gap:1rem}
            .graph-layout{align-items:stretch}
            .chart-panel,.chart-side-panel{min-height:100%}
            .business-chart-canvas{min-height:360px}
            .insight-stack{display:grid;gap:.9rem}
            .insight-card{padding:1.05rem 1rem;border-radius:18px;color:#fff;box-shadow:0 16px 28px rgba(15,23,42,.08)}
            .insight-card span,.insight-card strong,.insight-card small{display:block}
            .insight-card span{font-size:.78rem;opacity:.88}
            .insight-card strong{margin:.25rem 0;font-size:1.45rem;font-weight:800;letter-spacing:-.02em}
            .insight-card small{opacity:.86}
            .insight-purple{background:linear-gradient(135deg,#5b4bff 0%,#7c68ff 100%)}
            .insight-orange{background:linear-gradient(135deg,#ff8a00 0%,#ffb347 100%)}
            .insight-cyan{background:linear-gradient(135deg,#06b6d4 0%,#3b82f6 100%)}
            .dashboard-empty-state{display:grid;place-items:center;text-align:center;min-height:220px;padding:1rem;color:#7e8a99}
            .dashboard-empty-state.compact{min-height:180px}
            .dashboard-empty-state span{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:#f2f5f8;margin-bottom:.8rem}
            .dashboard-empty-state svg{width:22px;height:22px}
            .dashboard-empty-state strong{display:block;color:#243447}
            .dashboard-empty-state p{margin:.2rem 0 0}
            @media(max-width:1199.98px){.dashboard-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
            @media(max-width:991.98px){.dashboard-summary-strip,.dashboard-page-header,.panel-title-row{flex-direction:column;align-items:flex-start}.dashboard-stat-grid,.router-card-grid,.dashboard-bottom-grid{grid-template-columns:1fr 1fr}.dashboard-bottom-grid{grid-template-columns:1fr}}
            @media(max-width:767.98px){.dashboard-title-main{font-size:1.35rem}.dashboard-header-actions{width:100%}.dashboard-header-btn{flex:1;justify-content:center}.dashboard-stat-grid,.router-card-grid{grid-template-columns:1fr}.summary-inline-stats{width:100%}.summary-inline-stats>div{flex:1}}
            @media(max-width:479.98px){.dashboard-header-btn span{font-size:.76rem}.router-card-top,.router-card-footer,.activity-row-head{flex-direction:column;align-items:flex-start}.router-metric-grid{grid-template-columns:1fr 1fr}}
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const chartElement = document.querySelector('#businessOverviewChart');
                if (!chartElement || typeof ApexCharts === 'undefined') return;

                const businessChart = <?php echo json_encode($businessChart, 15, 512) ?>;
                const currencySymbol = <?php echo json_encode($currencySymbol, 15, 512) ?>;
                const isDark = document.documentElement.getAttribute('data-theme') === 'dark' || document.body.getAttribute('data-theme') === 'dark';

                const chart = new ApexCharts(chartElement, {
                    chart: {
                        type: 'line',
                        height: 360,
                        toolbar: { show: false },
                        foreColor: isDark ? '#cbd5e1' : '#64748b',
                        fontFamily: 'inherit'
                    },
                    series: [
                        {
                            name: 'Collection',
                            type: 'area',
                            data: businessChart.collections
                        },
                        {
                            name: 'Due',
                            type: 'area',
                            data: businessChart.dues
                        },
                        {
                            name: 'Customers',
                            type: 'line',
                            data: businessChart.customers
                        }
                    ],
                    stroke: {
                        curve: 'smooth',
                        width: [3, 3, 4]
                    },
                    fill: {
                        type: ['gradient', 'gradient', 'solid'],
                        gradient: {
                            shadeIntensity: 1,
                            opacityFrom: 0.32,
                            opacityTo: 0.02,
                            stops: [0, 95, 100]
                        }
                    },
                    colors: ['#5b4bff', '#ff9f43', '#06b6d4'],
                    labels: businessChart.labels,
                    markers: {
                        size: 4,
                        strokeWidth: 0,
                        hover: { size: 6 }
                    },
                    dataLabels: { enabled: false },
                    grid: {
                        borderColor: isDark ? 'rgba(148,163,184,.16)' : '#edf2f7',
                        strokeDashArray: 4
                    },
                    xaxis: {
                        categories: businessChart.labels,
                        axisBorder: { show: false },
                        axisTicks: { show: false }
                    },
                    yaxis: [
                        {
                            labels: {
                                formatter: function (value) {
                                    return currencySymbol + Number(value).toFixed(0);
                                }
                            }
                        },
                        {
                            opposite: true,
                            labels: {
                                formatter: function (value) {
                                    return Number(value).toFixed(0);
                                }
                            }
                        }
                    ],
                    tooltip: {
                        shared: true,
                        intersect: false,
                        theme: isDark ? 'dark' : 'light',
                        y: [
                            {
                                formatter: function (value) {
                                    return currencySymbol + Number(value).toFixed(2);
                                }
                            },
                            {
                                formatter: function (value) {
                                    return currencySymbol + Number(value).toFixed(2);
                                }
                            },
                            {
                                formatter: function (value) {
                                    return Number(value).toFixed(0) + ' customers';
                                }
                            }
                        ]
                    },
                    legend: {
                        position: 'top',
                        horizontalAlign: 'left'
                    }
                });

                chart.render();
            });
        </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 D:\herd\billing\laravel-app\resources\views\admin\dashboard.blade.php ENDPATH**/ ?>