@push('title') Dashboard @endpush

<x-app-layout>
<div class="">

    {{-- Page Header --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1">Business Dashboard</h4>
            <p class="text-muted mb-0 small">Welcome back, {{ auth()->user()->name }} — here's what's happening today.</p>
        </div>
        <div class="text-muted small"><i class='bx bx-calendar me-1'></i>{{ now()->format('l, d M Y') }}</div>
    </div>

    {{-- ═══════════════════════════════════════════════════════════════════ --}}
    {{-- KPI ROW 1 — Revenue, Profit, Debt, Returns                         --}}
    {{-- ═══════════════════════════════════════════════════════════════════ --}}
    <div class="row g-4 mb-4">

        <div class="col-xl-3 col-sm-6">
            <div class="card" style="height: -webkit-fill-available;">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-muted small fw-semibold text-uppercase">Today's Revenue</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2">LKR {{ number_format($salesToday, 2) }}</h4>
                            </div>
                            <small class="text-muted">Sales made today</small>
                        </div>
                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-primary p-2">
                                <i class='bx bx-dollar-circle bx-sm'></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6">
            <div class="card" style="height: -webkit-fill-available;">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-muted small fw-semibold text-uppercase">Monthly Revenue</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2">LKR {{ number_format($salesThisMonth, 2) }}</h4>
                            </div>
                            <small class="{{ $salesGrowth >= 0 ? 'text-success' : 'text-danger' }}">
                                <i class='bx {{ $salesGrowth >= 0 ? "bx-trending-up" : "bx-trending-down" }}'></i>
                                {{ abs($salesGrowth) }}% vs last month
                            </small>
                        </div>
                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-info p-2">
                                <i class='bx bx-line-chart bx-sm'></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6">
            <div class="card" style="height: -webkit-fill-available;">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-muted small fw-semibold text-uppercase">Monthly Profit</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2 text-success">LKR {{ number_format($profitThisMonth, 2) }}</h4>
                            </div>
                            <small class="text-muted">Net after discounts</small>
                        </div>
                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-success p-2">
                                <i class='bx bx-coin-stack bx-sm'></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6">
            <div class="card" style="height: -webkit-fill-available;">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-muted small fw-semibold text-uppercase">Outstanding Debt</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2 text-danger">LKR {{ number_format($totalDueAmount, 2) }}</h4>
                            </div>
                            <small class="text-muted">Total from customers</small>
                        </div>
                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-danger p-2">
                                <i class='bx bx-user-minus bx-sm'></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6">
            <div class="card" style="height: -webkit-fill-available;">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-muted small fw-semibold text-uppercase">Supplier Outstanding</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2 text-warning" style="color: #ff9f43 !important;">LKR {{ number_format($totalSupplierOutstanding, 2) }}</h4>
                            </div>
                            <small class="text-muted">Total payable to vendors</small>
                        </div>
                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-warning p-2">
                                <i class='bx bx-store bx-sm'></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- KPI ROW 2 — Customers, Products, Low Stock, Returns --}}
    <div class="row g-4 mb-4">
        <div class="col-xl-3 col-sm-6">
            <div class="card" style="height: -webkit-fill-available;">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="avatar me-1">
                        <span class="avatar-initial rounded bg-label-primary p-2">
                            <i class='bx bxs-group bx-sm'></i>
                        </span>
                    </div>
                    <div>
                        <h5 class="fw-bold mb-0">{{ number_format($totalCustomers) }}</h5>
                        <small class="text-muted">Total Customers</small><br>
                        <span class="badge bg-label-success mt-1">+{{ $newCustomersThisMonth }} this month</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6">
            <div class="card" style="height: -webkit-fill-available;">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="avatar me-1">
                        <span class="avatar-initial rounded bg-label-info p-2">
                            <i class='bx bxs-box bx-sm'></i>
                        </span>
                    </div>
                    <div>
                        <h5 class="fw-bold mb-0">{{ number_format($totalProducts) }}</h5>
                        <small class="text-muted">Active Products</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6">
            <div class="card">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="avatar me-1">
                        <span class="avatar-initial rounded bg-label-warning p-2">
                            <i class='bx bxs-package bx-sm'></i>
                        </span>
                    </div>
                    <div>
                        <h5 class="fw-bold mb-0">{{ $lowStockCount }}</h5>
                        <small class="text-muted">Low Stock Batches</small><br>
                        <span class="badge bg-label-danger mt-1">{{ $outOfStockCount }} out of stock</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-sm-6">
            <div class="card" style="height: -webkit-fill-available;">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="avatar me-1">
                        <span class="avatar-initial rounded bg-label-danger p-2">
                            <i class='bx bx-undo bx-sm'></i>
                        </span>
                    </div>
                    <div>
                        <h5 class="fw-bold mb-0">{{ $returnsThisMonth }}</h5>
                        <small class="text-muted">Returns This Month</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════════════════ --}}
    {{-- CHARTS ROW                                                          --}}
    {{-- ═══════════════════════════════════════════════════════════════════ --}}
    <div class="row g-4 mb-4">

        {{-- Revenue Trend --}}
        <div class="col-xl-8">
            <div class="card" style="height: -webkit-fill-available;">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="card-title mb-0">Revenue Trend</h5>
                        <small class="text-muted">Last 30 days daily revenue (LKR)</small>
                    </div>
                    <span class="badge bg-label-primary">Last 30 Days</span>
                </div>
                <div class="card-body">
                    <canvas id="revenueChart"></canvas>
                </div>
            </div>
        </div>

        {{-- Payment Split --}}
        <div class="col-xl-4">
            <div class="card" style="height: -webkit-fill-available;">
                <div class="card-header">
                    <h5 class="card-title mb-0">Payment Split</h5>
                    <small class="text-muted">Cash vs Credit — this month</small>
                </div>
                <div class="card-body">
                    <canvas id="paymentChart"></canvas>
                    <div class="d-flex justify-content-around mt-3">
                        <div class="text-center">
                            <div class="fw-bold text-success">LKR {{ number_format($cashSales, 0) }}</div>
                            <small class="text-muted">Cash</small>
                        </div>
                        <div class="text-center">
                            <div class="fw-bold text-warning">LKR {{ number_format($creditSales, 0) }}</div>
                            <small class="text-muted">Credit</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Top Products + Top Customers --}}
    <div class="row g-4 mb-4">

        <div class="col-xl-6">
            <div class="card" style="height: -webkit-fill-available;">
                <div class="card-header">
                    <h5 class="card-title mb-0">Top Selling Products</h5>
                    <small class="text-muted">By quantity sold — this month</small>
                </div>
                <div class="card-body">
                    @forelse($topProducts as $item)
                    @php
                        $maxQty = $topProducts->max('total_qty');
                        $pct = $maxQty > 0 ? round(($item->total_qty / $maxQty) * 100) : 0;
                    @endphp
                    <div class="mb-4">
                        <div class="d-flex justify-content-between mb-1">
                            <span class="fw-semibold">{{ $item->product->name ?? 'N/A' }}</span>
                            <span class="text-muted small">{{ number_format($item->total_qty) }} units</span>
                        </div>
                        <div class="progress mb-1" style="height: 8px;">
                            <div class="progress-bar bg-primary" role="progressbar" style="width:{{ $pct }}%"></div>
                        </div>
                        <small class="text-muted">Revenue: LKR {{ number_format($item->total_revenue, 0) }}</small>
                    </div>
                    @empty
                    <div class="text-center text-muted py-4">No sales data this month.</div>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="col-xl-6">
            <div class="card" style="height: -webkit-fill-available;">
                <div class="card-header">
                    <h5 class="card-title mb-0">Top Customers</h5>
                    <small class="text-muted">By spend — this month</small>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Customer</th>
                                <th class="text-center">Orders</th>
                                <th class="text-end">Total Spent</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($topCustomers as $i => $tc)
                            <tr>
                                <td>
                                    <span class="badge {{ $i == 0 ? 'bg-warning' : ($i == 1 ? 'bg-label-secondary' : 'bg-label-primary') }}">
                                        {{ $i + 1 }}
                                    </span>
                                </td>
                                <td class="fw-semibold">{{ $tc->customer->name ?? 'Walk-in' }}</td>
                                <td class="text-center">{{ $tc->order_count }}</td>
                                <td class="text-end fw-bold text-primary">LKR {{ number_format($tc->total_spent, 0) }}</td>
                            </tr>
                            @empty
                            <tr><td colspan="4" class="text-center py-4 text-muted">No data this month.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════════════════ --}}
    {{-- BOTTOM TABLES                                                       --}}
    {{-- ═══════════════════════════════════════════════════════════════════ --}}
    <div class="row g-4 mb-4">

        {{-- Recent Sales --}}
        <div class="col-xl-8">
            <div class="card" style="height: -webkit-fill-available;">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="card-title mb-0">Recent Sales</h5>
                        <small class="text-muted">Latest 8 transactions</small>
                    </div>
                    <a href="{{ route('sales') }}" class="btn btn-sm btn-primary">View All</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-dark">
                            <tr>
                                <th>Invoice</th>
                                <th>Customer</th>
                                <th>Warehouse</th>
                                <th>Type</th>
                                <th class="text-end">Amount</th>
                                <th class="text-center">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentSales as $sale)
                            <tr>
                                <td>
                                    <a href="{{ route('sales.show', $sale->id) }}" class="fw-semibold text-primary">
                                        {{ $sale->invoice_no }}
                                    </a><br>
                                    <small class="text-muted">{{ $sale->created_at->diffForHumans() }}</small>
                                </td>
                                <td>{{ $sale->customer->name ?? 'Walk-in' }}</td>
                                <td><small>{{ $sale->warehouse->name ?? 'N/A' }}</small></td>
                                <td>
                                    @if($sale->payment_type == 1)
                                        <span class="badge bg-label-success">Cash</span>
                                    @else
                                        <span class="badge bg-label-warning">Credit</span>
                                    @endif
                                </td>
                                <td class="text-end fw-bold">LKR {{ number_format($sale->grand_total, 2) }}</td>
                                <td class="text-center">
                                    @if($sale->payment_status == 2)
                                        <span class="badge bg-success">Paid</span>
                                    @elseif($sale->payment_status == 1)
                                        <span class="badge bg-warning">Partial</span>
                                    @else
                                        <span class="badge bg-danger">Unpaid</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="6" class="text-center py-4 text-muted">No sales yet.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Outstanding Debts --}}
        <div class="col-xl-4">
            <div class="card" style="height: -webkit-fill-available;">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="card-title mb-0">Outstanding Debts</h5>
                        <small class="text-muted">Top unpaid balances</small>
                    </div>
                    <span class="badge bg-danger">{{ $outstandingDebts->count() }}</span>
                </div>
                <div class="card-body p-0">
                    @forelse($outstandingDebts as $debt)
                    <div class="d-flex justify-content-between align-items-center px-4 py-3 border-bottom">
                        <div>
                            <div class="fw-semibold">{{ $debt->customer->name ?? 'Walk-in' }}</div>
                            <a href="{{ route('sales.show', $debt->id) }}" class="text-muted small">
                                {{ $debt->invoice_no }}
                            </a>
                        </div>
                        <div class="text-end">
                            <div class="fw-bold text-danger">LKR {{ number_format($debt->due_amount, 0) }}</div>
                            @if($debt->payment_status == 1)
                                <span class="badge bg-warning">Partial</span>
                            @else
                                <span class="badge bg-danger">Unpaid</span>
                            @endif
                        </div>
                    </div>
                    @empty
                    <div class="text-center py-5 text-success">
                        <i class='bx bx-check-circle bx-lg'></i>
                        <p class="mt-2 mb-0">No outstanding debts!</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    {{-- Sales Forecasting --}}
    @if(count($inventoryForecast) > 0)
    <div class="row g-4 mb-4">
        <div class="col-12">
            <div class="card border-primary">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="card-title mb-0">
                            Inventory Forecast (Next 30 Days)
                        </h5>
                        <small class="text-muted">Predicting needs based on last 30 days of sales</small>
                    </div>
                    <span class="badge bg-label-primary">{{ count($inventoryForecast) }} Items Suggested</span>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-dark">
                            <tr>
                                <th>Product & Variation</th>
                                <th class="text-center">Sold (Last 30d)</th>
                                <th class="text-center">Current Total Stock</th>
                                <th class="text-end">Suggested to Order</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($inventoryForecast as $fItem)
                            <tr>
                                <td class="fw-semibold">
                                    {{ $fItem->product->name ?? 'N/A' }}
                                    @if($fItem->variation && $fItem->variation->variationType)
                                        <div class="small text-muted">{{ $fItem->variation->variationType->name }}</div>
                                    @endif
                                </td>
                                <td class="text-center fw-bold">{{ number_format($fItem->sold_last_30_days) }}</td>
                                <td class="text-center">
                                    <span class="badge bg-label-secondary">{{ number_format($fItem->current_stock) }}</span>
                                </td>
                                <td class="text-end fw-bold">
                                    {{ number_format($fItem->suggested_order) }} units
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- Low Stock Alert --}}
    @if($lowStockCount > 0 || $outOfStockCount > 0)
    <div class="row g-4 mb-4">
        <div class="col-12">
            <div class="card border-warning">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="card-title mb-0">
                            Low Stock Alert
                        </h5>
                        <small class="text-muted">Batches with ≤10 units remaining</small>
                    </div>
                    <a href="{{ route('products') }}" class="btn btn-sm btn-warning">View Products</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-warning">
                            <tr>
                                <th>Product Details</th>
                                <th>Variation</th>
                                <th>Batch / Barcode</th>
                                <th>Warehouse</th>
                                <th class="text-center">Stock Left</th>
                                <th class="text-center">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($lowStockItems as $batch)
                            <tr>
                                <td>
                                    <div class="fw-bold">{{ $batch->product->name ?? 'N/A' }}</div>
                                    <small class="text-muted">{{ $batch->product->brand->name ?? 'No Brand' }}</small>
                                </td>
                                <td>
                                    <span class="badge bg-label-secondary">
                                        {{ $batch->productVariation->variationType->name ?? 'Single' }}
                                    </span>
                                </td>
                                <td>
                                    <div class="small">No: <span class="fw-semibold">{{ $batch->batch_no }}</span></div>
                                    <div class="small text-muted">BC: {{ $batch->productVariation->barcode ?? 'N/A' }}</div>
                                </td>
                                <td>{{ $batch->warehouse->name ?? 'N/A' }}</td>
                                <td class="text-center">
                                    <span class="fw-bold {{ $batch->current_stock <= 5 ? 'text-danger' : 'text-warning' }}">
                                        {{ $batch->current_stock }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    @if($batch->current_stock <= 3)
                                        <span class="badge bg-danger">Critical</span>
                                    @elseif($batch->current_stock <= 5)
                                        <span class="badge bg-warning">Very Low</span>
                                    @else
                                        <span class="badge bg-label-warning">Low</span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @endif

</div>


{{-- ═══════════════════════════════════════════════════════════════════════ --}}
{{--  CHART.JS SCRIPTS                                                       --}}
{{-- ═══════════════════════════════════════════════════════════════════════ --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    const chartLabels  = @json($chartLabels);
    const chartRevenue = @json($chartRevenue);

    // ── Revenue Trend Line Chart ─────────────────────────────────────────
    const revenueCtx = document.getElementById('revenueChart').getContext('2d');
    new Chart(revenueCtx, {
        type: 'line',
        data: {
            labels: chartLabels,
            datasets: [{
                label: 'Revenue (LKR)',
                data: chartRevenue,
                borderColor: '#696cff',
                backgroundColor: 'rgba(105,108,255,0.08)',
                borderWidth: 2.5,
                pointBackgroundColor: '#696cff',
                pointRadius: 3,
                pointHoverRadius: 5,
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: ctx => ' LKR ' + Number(ctx.raw).toLocaleString('en-US', {minimumFractionDigits: 2})
                    }
                }
            },
            scales: {
                x: { grid: { display: false }, ticks: { maxTicksLimit: 10, font: { size: 11 } } },
                y: {
                    grid: { color: 'rgba(0,0,0,0.05)' },
                    ticks: {
                        font: { size: 11 },
                        callback: v => 'LKR ' + Number(v).toLocaleString()
                    }
                }
            }
        }
    });

    // ── Payment Method Donut ─────────────────────────────────────────────
    const paymentCtx = document.getElementById('paymentChart').getContext('2d');
    new Chart(paymentCtx, {
        type: 'doughnut',
        data: {
            labels: ['Cash', 'Credit'],
            datasets: [{
                data: [{{ $cashSales }}, {{ $creditSales }}],
                backgroundColor: ['#71dd37', '#ffab00'],
                borderWidth: 0,
                hoverOffset: 6
            }]
        },
        options: {
            responsive: true,
            cutout: '70%',
            plugins: {
                legend: { position: 'bottom', labels: { padding: 16, font: { size: 12 } } },
                tooltip: {
                    callbacks: {
                        label: ctx => ' LKR ' + Number(ctx.raw).toLocaleString('en-US', {minimumFractionDigits: 0})
                    }
                }
            }
        }
    });
</script>
</x-app-layout>