@extends('layouts.app')

@section('title', 'Dashboard')
@section('page_title', 'Business Overview')

@section('content')
<div class="row g-4 mb-4">
    <!-- Today Sales -->
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon bg-primary bg-opacity-10 text-primary">
                <i class="bi bi-cash"></i>
            </div>
            <h6 class="text-secondary small fw-bold">TODAY'S SALES</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ number_format($todaySales) }} <small class="fs-6 text-muted">UGX</small></h3>
            <div class="mt-2 text-success small">
                <i class="bi bi-clock-history"></i> Real-time tracking
            </div>
        </div>
    </div>
    <!-- Outstanding Debt -->
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon bg-danger bg-opacity-10 text-danger">
                <i class="bi bi-cash-stack"></i>
            </div>
            <h6 class="text-secondary small fw-bold">OUTSTANDING DEBT</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ number_format($outstandingDebt) }} <small class="fs-6 text-muted">UGX</small></h3>
            <div class="mt-2 text-danger small">
                <i class="bi bi-exclamation-triangle"></i> Action required
            </div>
        </div>
    </div>
    <!-- Monthly Profit -->
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon bg-success bg-opacity-10 text-success">
                <i class="bi bi-graph-up-arrow"></i>
            </div>
            <h6 class="text-secondary small fw-bold">ESTIMATED NET PROFIT</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ number_format($profit) }} <small class="fs-6 text-muted">UGX</small></h3>
            <div class="mt-2 text-success small">
                <i class="bi bi-arrow-up-right"></i> Sales minus expenses
            </div>
        </div>
    </div>
    <!-- Low Stock Items -->
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon bg-warning bg-opacity-10 text-warning">
                <i class="bi bi-box"></i>
            </div>
            <h6 class="text-secondary small fw-bold">LOW STOCK ALERTS</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ $lowStockItems }} <small class="fs-6 text-muted">items</small></h3>
            <div class="mt-2 {{ $lowStockItems > 0 ? 'text-warning' : 'text-success' }} small">
                <i class="bi bi-arrow-down-circle"></i> {{ $lowStockItems > 0 ? 'Reorder immediately' : 'Inventory healthy' }}
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mb-4">
    <!-- Sales Performance Graph -->
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm p-4 h-100">
            <h5 class="fw-bold mb-4 text-dark">Weekly Revenue Trend</h5>
            <div style="height: 300px; position: relative;">
                <canvas id="salesChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Debt Aging breakdown -->
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm p-4 h-100">
            <h5 class="fw-bold mb-4 text-dark">Debt Aging Buckets</h5>
            <div style="height: 200px; position: relative;" class="mb-4">
                <canvas id="debtAgingChart"></canvas>
            </div>
            <div class="small">
                <div class="d-flex justify-content-between mb-1">
                    <span class="text-secondary">Current (0 days overdue)</span>
                    <span class="fw-semibold">{{ number_format($agingBuckets['current'] ?? 0) }} UGX</span>
                </div>
                <div class="d-flex justify-content-between mb-1">
                    <span class="text-secondary">1 - 30 days overdue</span>
                    <span class="fw-semibold">{{ number_format($agingBuckets['d1_30'] ?? 0) }} UGX</span>
                </div>
                <div class="d-flex justify-content-between">
                    <span class="text-secondary">30+ days overdue</span>
                    <span class="fw-semibold text-danger">{{ number_format(($agingBuckets['d31_60'] ?? 0) + ($agingBuckets['d60_plus'] ?? 0)) }} UGX</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    <!-- Recent Invoices -->
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm p-4">
            <div class="d-flex align-items-center justify-content-between mb-3">
                <h5 class="fw-bold mb-0 text-dark">Recent Invoices</h5>
                <a href="{{ route('invoices.index') }}" class="btn btn-sm btn-light">View All</a>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Invoice #</th>
                            <th>Customer</th>
                            <th>Amount</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentInvoices as $inv)
                            <tr>
                                <td class="fw-bold">{{ $inv->invoice_number }}</td>
                                <td>{{ $inv->client->full_name }}</td>
                                <td>{{ number_format($inv->total_amount) }} UGX</td>
                                <td>
                                    <span class="badge bg-{{ $inv->status_badge }}">{{ ucfirst($inv->status) }}</span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center py-4 text-muted">No invoices generated yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Inventory / Stock Alert list -->
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm p-4">
            <div class="d-flex align-items-center justify-content-between mb-3">
                <h5 class="fw-bold mb-0 text-dark">Stock Levels</h5>
                <a href="{{ route('inventory.products') }}" class="btn btn-sm btn-light">Manage Stock</a>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Variant Name</th>
                            <th>SKU</th>
                            <th>Stock Qty</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($topVariants as $v)
                            <tr>
                                <td class="fw-semibold">{{ $v->variant_name }}</td>
                                <td><code class="small">{{ $v->sku }}</code></td>
                                <td>{{ $v->stock_qty }}</td>
                                <td>
                                    @if($v->isLowStock())
                                        <span class="badge bg-danger">Low Stock</span>
                                    @else
                                        <span class="badge bg-success">In Stock</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center py-4 text-muted">No product variants registered.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // 1. Sales Line Chart
    const salesCtx = document.getElementById('salesChart').getContext('2d');
    new Chart(salesCtx, {
        type: 'line',
        data: {
            labels: {!! json_encode($days) !!},
            datasets: [{
                label: 'Revenue (UGX)',
                data: {!! json_encode($salesTrend) !!},
                borderColor: '#2563eb',
                backgroundColor: 'rgba(37, 99, 235, 0.05)',
                borderWidth: 3,
                fill: true,
                tension: 0.3
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: {
                    grid: { color: 'rgba(0, 0, 0, 0.05)' },
                    ticks: { callback: value => value.toLocaleString() + ' UGX' }
                },
                x: { grid: { display: false } }
            }
        }
    });

    // 2. Debt Doughnut Chart
    const debtCtx = document.getElementById('debtAgingChart').getContext('2d');
    new Chart(debtCtx, {
        type: 'doughnut',
        data: {
            labels: ['Current', '1-30 Days', '31+ Days'],
            datasets: [{
                data: [
                    {{ (float)($agingBuckets['current'] ?? 0) }},
                    {{ (float)($agingBuckets['d1_30'] ?? 0) }},
                    {{ (float)(($agingBuckets['d31_60'] ?? 0) + ($agingBuckets['d60_plus'] ?? 0)) }}
                ],
                backgroundColor: ['#10b981', '#f59e0b', '#ef4444'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom' }
            }
        }
    });
</script>
@endsection