@include('admin.dash.layout.header')

<!-- Chart.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>

<style>
    .chart-container {
        position: relative;
        height: 300px;
        margin: 15px 0;
    }
    .chart-card {
        background: white;
        border-radius: 10px;
        padding: 20px;
        margin: 15px 0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        border: 1px solid #e5e9f2;
    }
    .chart-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #364a63;
        margin-bottom: 15px;
        text-align: center;
    }
    .kpi-trend {
        display: flex;
        align-items: center;
        margin-top: 8px;
    }
    .trend-up {
        color: #28a745;
        font-size: 12px;
    }
    .trend-down {
        color: #dc3545;
        font-size: 12px;
    }
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        margin: 30px 0;
    }
</style>

<!-- content @s -->
<div class="nk-content ">
    <div class="container-fluid">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                <div class="nk-block-head nk-block-head-sm">
                    <div class="nk-block-between">
                        <div class="nk-block-head-content">
                            <h3 class="nk-block-title page-title">Dashboard</h3>
                            <div class="nk-block-des text-soft">
                                <p>Welcome to stizee admin Dashboard.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Enhanced KPI Cards with Trends -->
                <div class="nk-block">
                    <div class="row g-gs">
                        <div class="col-xxl-6">
                            <div class="row g-gs">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="nk-ecwg nk-ecwg3">
                                            <div class="card-inner pb-0">
                                                <div class="card-title-group">
                                                    <div class="card-title">
                                                        <h6 class="title">Total Users</h6>
                                                    </div>
                                                </div>
                                                <div class="data">
                                                    <div class="data-group">
                                                        <div class="amount fw-normal">{{number_format(DB::table("users")->count())}}</div>
                                                        <div class="kpi-trend">
                                                            @php
                                                                $currentUsers = DB::table("users")->whereMonth('created_at', now()->month)->count();
                                                                $lastMonthUsers = DB::table("users")->whereMonth('created_at', now()->subMonth()->month)->count();
                                                                $growth = $lastMonthUsers > 0 ? (($currentUsers - $lastMonthUsers) / $lastMonthUsers) * 100 : 0;
                                                            @endphp
                                                            <span class="trend-{{ $growth >= 0 ? 'up' : 'down' }}">
                                                                {{ $growth >= 0 ? '↗' : '↘' }} {{ number_format(abs($growth), 1) }}% this month
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="nk-ecwg nk-ecwg3">
                                            <div class="card-inner pb-0">
                                                <div class="card-title-group">
                                                    <div class="card-title">
                                                        <h6 class="title">Total Merchants</h6>
                                                    </div>
                                                </div>
                                                <div class="data">
                                                    <div class="data-group">
                                                        <div class="amount fw-normal">{{number_format(DB::table("users")->where(["is_merchant"=>1])->count())}}</div>
                                                        <div class="kpi-trend">
                                                            <span class="trend-up">↗ Active merchants</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="nk-ecwg nk-ecwg3">
                                            <div class="card-inner pb-0">
                                                <div class="card-title-group">
                                                    <div class="card-title">
                                                        <h6 class="title">Total Products</h6>
                                                    </div>
                                                </div>
                                                <div class="data">
                                                    <div class="data-group">
                                                        <div class="amount fw-normal">{{number_format(DB::table("products")->count())}}</div>
                                                        <div class="kpi-trend">
                                                            <span class="trend-up">↗ Products listed</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="nk-ecwg nk-ecwg3">
                                            <div class="card-inner pb-0">
                                                <div class="card-title-group">
                                                    <div class="card-title">
                                                        <h6 class="title">Total Orders</h6>
                                                    </div>
                                                </div>
                                                <div class="data">
                                                    <div class="data-group">
                                                        <div class="amount fw-normal">{{number_format(DB::table("orders")->count())}}</div>
                                                        <div class="kpi-trend">
                                                            <span class="trend-up">↗ All time orders</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="nk-ecwg nk-ecwg3">
                                            <div class="card-inner pb-0">
                                                <div class="card-title-group">
                                                    <div class="card-title">
                                                        <h6 class="title">Pending Orders</h6>
                                                    </div>
                                                </div>
                                                <div class="data">
                                                    <div class="data-group">
                                                        <div class="amount fw-normal">{{number_format(DB::table("orders")->where(["status"=>"pending"])->count())}}</div>
                                                        <div class="kpi-trend">
                                                            <span class="trend-{{ DB::table('orders')->where('status', 'pending')->count() > 0 ? 'down' : 'up' }}">
                                                                Needs attention
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="nk-ecwg nk-ecwg3">
                                            <div class="card-inner pb-0">
                                                <div class="card-title-group">
                                                    <div class="card-title">
                                                        <h6 class="title">Total Revenue</h6>
                                                    </div>
                                                </div>
                                                <div class="data">
                                                    <div class="data-group">
                                                        <div class="amount fw-normal">
                                                            GHS {{number_format(DB::table("orders")->sum('total_amount'))}}
                                                        </div>
                                                        <div class="kpi-trend">
                                                            <span class="trend-up">↗ Total earnings</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                      
                    </div>
                </div>

                <!-- NEW CHARTS SECTION -->
                <div class="nk-block">
                    <div class="stats-grid">
                        <!-- Orders Over Time Chart -->
                        <div class="chart-card">
                            <div class="chart-title">Orders Over Time (Last 7 Days)</div>
                            <div class="chart-container">
                                <canvas id="ordersTimeChart"></canvas>
                            </div>
                        </div>

                        <!-- Revenue Trend Chart -->
                        <div class="chart-card">
                            <div class="chart-title">Daily Revenue Trend</div>
                            <div class="chart-container">
                                <canvas id="revenueChart"></canvas>
                            </div>
                        </div>

                        <!-- Top Categories -->
                        <div class="chart-card">
                            <div class="chart-title">Product Categories</div>
                            <div class="chart-container">
                                <canvas id="categoriesChart"></canvas>
                            </div>
                        </div>

                        <!-- Order Status Distribution -->
                        <div class="chart-card">
                            <div class="chart-title">Order Status Distribution</div>
                            <div class="chart-container">
                                <canvas id="orderStatusChart"></canvas>
                            </div>
                        </div>

                        <!-- User Registration Trend -->
                        <div class="chart-card">
                            <div class="chart-title">User Registrations (Last 6 Months)</div>
                            <div class="chart-container">
                                <canvas id="userGrowthChart"></canvas>
                            </div>
                        </div>

                        <!-- Transaction Volume -->
                        <div class="chart-card">
                            <div class="chart-title">Transaction Types</div>
                            <div class="chart-container">
                                <canvas id="transactionChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                  <!-- Recent Orders Section -->
                        <div>
                            <div class="card card-full">
                                <div class="card-inner-group">
                                    <div class="card-inner">
                                        <div class="card-title-group">
                                            <div class="card-title">
                                                <h6 class="title">Recent Orders</h6>
                                            </div>
                                            <div class="card-tools">
                                                <a href="/admin/orders" class="link">View All</a>
                                            </div>
                                        </div>
                                    </div>
                                    @foreach(DB::table("orders")->leftJoin("products","products.id","orders.product_id")->select("orders.*","products.title","products.image","products.price")->latest('orders.order_date')->limit(4)->get() as $order)
                                    <div class="card-inner card-inner-md">
                                        <div class="review-item d-flex justify-content-between">
                                            <div class="user-card">
                                                <div class="user-avatar bg-primary-dim">
                                                    @if($order->image)
                                                        <img src="{{$order->image}}" style="width: 40px; height: 40px; object-fit: cover;"/>
                                                    @else
                                                        <span>{{substr($order->title ?? 'Photo Order', 0, 2)}}</span>
                                                    @endif
                                                </div>
                                                <div class="user-info">
                                                    <span class="lead-text">{{$order->title ?? 'Photo Print Order'}}</span>
                                                    <span class="sub-text">GHS {{number_format($order->total_amount, 2)}}</span>
                                                </div>
                                            </div>
                                            <div class="review-status">
                                                <span class="badge badge-{{ $order->status == 'delivered' ? 'success' : ($order->status == 'pending' ? 'warning' : 'info') }}">
                                                    {{ucfirst($order->status)}}
                                                </span>
                                                <div class="review-count">{{date('M d', strtotime($order->order_date))}}</div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

            </div>
        </div>
    </div>
</div>
<!-- Replace this line -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>

<!-- With this -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script>
// Chart Colors
const chartColors = {
    primary: '#6366f1',
    success: '#10b981',
    warning: '#f59e0b',
    danger: '#ef4444',
    info: '#06b6d4',
    purple: '#8b5cf6'
};

// Real data from your database
const dashboardData = {
    // Orders data (last 7 days)
    ordersLast7Days: {!! json_encode(DB::table('orders')->selectRaw('DATE(order_date) as date, COUNT(*) as count')->where('order_date', '>=', now()->subDays(7))->groupBy('date')->orderBy('date')->pluck('count')->toArray()) !!},
    ordersDates: {!! json_encode(DB::table('orders')->selectRaw('DATE(order_date) as date')->where('order_date', '>=', now()->subDays(7))->groupBy('date')->orderBy('date')->pluck('date')->toArray()) !!},
    
    // Revenue data (last 7 days)
    revenueData: {!! json_encode(DB::table('orders')->selectRaw('DATE(order_date) as date, SUM(total_amount) as revenue')->where('order_date', '>=', now()->subDays(7))->groupBy('date')->orderBy('date')->pluck('revenue')->toArray()) !!},
    
    // Categories data
    categoryNames: {!! json_encode(DB::table('category')->pluck('title')->toArray()) !!},
    categoryData: {!! json_encode(DB::table('products')->join('category', 'category.id', '=', 'products.category')->selectRaw('category.title, COUNT(*) as count')->groupBy('category.title')->pluck('count')->toArray()) !!},
    
    // Order status data
    orderStatuses: [
        {{ DB::table('orders')->where('status', 'delivered')->count() }},
        {{ DB::table('orders')->where('status', 'pending')->count() }},
        {{ DB::table('orders')->where('status', 'processing')->count() }},
        {{ DB::table('orders')->where('status', 'cancelled')->count() }}
    ],
    
    // User growth (last 6 months)
    userGrowth: {!! json_encode(DB::table('users')->selectRaw('MONTH(created_at) as month, COUNT(*) as count')->where('created_at', '>=', now()->subMonths(6))->groupBy('month')->orderBy('month')->pluck('count')->toArray()) !!},
    
    // Transaction types
    transactionEarnings: {{ DB::table('transactions')->where('type', 'earning')->count() }},
    transactionWithdrawals: {{ DB::table('transactions')->where('type', 'Withdrawal')->count() }}
};

// Orders Over Time Chart
new Chart(document.getElementById('ordersTimeChart'), {
    type: 'line',
    data: {
        labels: dashboardData.ordersDates.length ? dashboardData.ordersDates : ['No data'],
        datasets: [{
            label: 'Orders',
            data: dashboardData.ordersLast7Days.length ? dashboardData.ordersLast7Days : [0],
            borderColor: chartColors.primary,
            backgroundColor: chartColors.primary + '20',
            fill: true,
            tension: 0.4,
            borderWidth: 3
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: true, grid: { color: '#f1f5f9' } },
            x: { grid: { display: false } }
        }
    }
});

// Revenue Chart
new Chart(document.getElementById('revenueChart'), {
    type: 'bar',
    data: {
        labels: dashboardData.ordersDates.length ? dashboardData.ordersDates : ['No data'],
        datasets: [{
            label: 'Revenue (GHS)',
            data: dashboardData.revenueData.length ? dashboardData.revenueData : [0],
            backgroundColor: chartColors.success + '80',
            borderColor: chartColors.success,
            borderWidth: 2,
            borderRadius: 6
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            y: { 
                beginAtZero: true, 
                grid: { color: '#f1f5f9' },
                ticks: { callback: value => 'GHS ' + value.toLocaleString() }
            },
            x: { grid: { display: false } }
        }
    }
});

// Categories Chart
new Chart(document.getElementById('categoriesChart'), {
    type: 'pie',
    data: {
        labels: dashboardData.categoryNames.length ? dashboardData.categoryNames : ['No categories'],
        datasets: [{
            data: dashboardData.categoryData.length ? dashboardData.categoryData : [1],
            backgroundColor: [
                chartColors.primary,
                chartColors.success,
                chartColors.warning,
                chartColors.info,
                chartColors.purple,
                chartColors.danger
            ],
            borderWidth: 2,
            borderColor: '#fff'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { position: 'bottom', labels: { padding: 15 } }
        }
    }
});

// Order Status Chart
new Chart(document.getElementById('orderStatusChart'), {
    type: 'doughnut',
    data: {
        labels: ['Delivered', 'Pending', 'Processing', 'Cancelled'],
        datasets: [{
            data: dashboardData.orderStatuses,
            backgroundColor: [chartColors.success, chartColors.warning, chartColors.info, chartColors.danger],
            borderWidth: 3,
            borderColor: '#fff'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { position: 'bottom', labels: { padding: 15 } }
        }
    }
});

// User Growth Chart
new Chart(document.getElementById('userGrowthChart'), {
    type: 'line',
    data: {
        labels: ['Month 1', 'Month 2', 'Month 3', 'Month 4', 'Month 5', 'Month 6'],
        datasets: [{
            label: 'New Users',
            data: dashboardData.userGrowth.length ? dashboardData.userGrowth : [0, 0, 0, 0, 0, 0],
            borderColor: chartColors.purple,
            backgroundColor: chartColors.purple + '20',
            fill: true,
            tension: 0.4,
            borderWidth: 3
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: true, grid: { color: '#f1f5f9' } },
            x: { grid: { display: false } }
        }
    }
});

// Transaction Chart
new Chart(document.getElementById('transactionChart'), {
    type: 'bar',
    data: {
        labels: ['Earnings', 'Withdrawals'],
        datasets: [{
            label: 'Transactions',
            data: [dashboardData.transactionEarnings, dashboardData.transactionWithdrawals],
            backgroundColor: [chartColors.success + '80', chartColors.warning + '80'],
            borderColor: [chartColors.success, chartColors.warning],
            borderWidth: 2,
            borderRadius: 6
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: true, grid: { color: '#f1f5f9' } },
            x: { grid: { display: false } }
        }
    }
});
</script>

@include('admin.dash.layout.footer')