@extends('admin.layouts.inventory')

@section('title', 'Dashboard')

@push('head')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
@endpush

@section('content')
@php
    $m = $metrics ?? [];
    $fmt = fn ($n) => is_numeric($n) ? number_format((float) $n, 2) : '0.00';
    $fmtInt = fn ($n) => number_format((int) $n);
@endphp

<div class="page-header">
    <div>
        <h2>Inventory dashboard</h2>
        <p class="muted">Stock health, procurement, and project material overview.</p>
    </div>
</div>

<div class="kpi-grid">
    <div class="kpi good">
        <div class="label">Completed kW</div>
        <div class="value">{{ $fmt($m['completed_kw'] ?? 0) }}</div>
        <div class="sub">{{ $fmtInt($m['completed_project_count'] ?? 0) }} completed projects</div>
    </div>
    <div class="kpi">
        <div class="label">In-progress kW</div>
        <div class="value">{{ $fmt($m['in_progress_kw'] ?? 0) }}</div>
        <div class="sub">{{ $fmtInt($m['in_progress_project_count'] ?? 0) }} approved / active projects</div>
    </div>
    <div class="kpi good">
        <div class="label">Inventory value</div>
        <div class="value">₹{{ $fmt($m['inventory_value'] ?? 0) }}</div>
        <div class="sub">FIFO batch valuation</div>
    </div>
    <div class="kpi">
        <div class="label">Material in warehouse</div>
        <div class="value">{{ $fmt($m['material_in_warehouse'] ?? 0) }}</div>
        <div class="sub">Base UOM qty</div>
    </div>
    <div class="kpi">
        <div class="label">Material at sites</div>
        <div class="value">{{ $fmt($m['material_at_sites'] ?? 0) }}</div>
        <div class="sub">In transit + project store</div>
    </div>
    <div class="kpi warn">
        <div class="label">Dead stock SKUs</div>
        <div class="value">{{ $fmtInt($m['dead_stock_count'] ?? 0) }}</div>
        <div class="sub">No movement 90+ days</div>
    </div>
    <div class="kpi danger">
        <div class="label">Low stock / reorder</div>
        <div class="value">{{ $fmtInt($m['reorder_alert_count'] ?? 0) }}</div>
        <div class="sub">Below reorder level</div>
    </div>
    <div class="kpi">
        <div class="label">GRN inward cost</div>
        <div class="value">₹{{ $fmt($m['grn_inward_cost'] ?? 0) }}</div>
        <div class="sub">Total material received (GRN)</div>
    </div>
    <div class="kpi">
        <div class="label">Dispatch material cost</div>
        <div class="value">₹{{ $fmt($m['dispatch_material_cost'] ?? 0) }}</div>
        <div class="sub">Material cost sent to project sites</div>
    </div>
    <div class="kpi">
        <div class="label">Project material cost</div>
        <div class="value">₹{{ $fmt($m['project_material_cost'] ?? 0) }}</div>
        <div class="sub">GRN to site + dispatch to site</div>
    </div>
    <div class="kpi good">
        <div class="label">Gross margin</div>
        <div class="value">₹{{ $fmt($m['gross_margin'] ?? 0) }}</div>
        <div class="sub">Bill − material cost</div>
    </div>
</div>

<div class="chart-grid">
    <div class="chart-box">
        <h3>Stock distribution</h3>
        <div class="chart-wrap"><canvas id="chartStock"></canvas></div>
    </div>
    <div class="chart-box">
        <h3>GRN vs dispatch (6 months)</h3>
        <div class="chart-wrap"><canvas id="chartTrend"></canvas></div>
    </div>
    <div class="chart-box">
        <h3>Fast moving SKUs (30 days)</h3>
        <div class="chart-wrap"><canvas id="chartFast"></canvas></div>
    </div>
    <div class="chart-box">
        <h3>Top suppliers by spend</h3>
        <div class="chart-wrap"><canvas id="chartSuppliers"></canvas></div>
    </div>
</div>

<div class="row">
    <div class="box">
        <strong>Reorder alerts</strong>
        @if(!empty($m['reorder_alerts']) && count($m['reorder_alerts']))
            <ul class="alert-list" style="margin-top:0.75rem;">
                @foreach($m['reorder_alerts'] as $alert)
                    <li>
                        <span><code>{{ $alert->sku_code }}</code> — @qty($alert->qty, $alert->unit) / @qty($alert->reorder_level, $alert->unit)</span>
                        <span class="muted">short @qty($alert->shortfall, $alert->unit)</span>
                    </li>
                @endforeach
            </ul>
        @else
            <p class="empty" style="margin-top:0.75rem;">No reorder alerts.</p>
        @endif
    </div>

    <div class="box">
        <strong>Fast moving</strong>
        @if(!empty($m['fast_moving']) && $m['fast_moving']->isNotEmpty())
            <ul class="alert-list" style="margin-top:0.75rem;">
                @foreach($m['fast_moving'] as $item)
                    <li><span><code>{{ $item->sku_code }}</code></span><span>@qty($item->movement_qty, $item->unit) moved</span></li>
                @endforeach
            </ul>
        @else
            <p class="empty" style="margin-top:0.75rem;">No movement data yet.</p>
        @endif
    </div>

    <div class="box">
        <strong>Top suppliers</strong>
        @if(!empty($m['top_suppliers']) && $m['top_suppliers']->isNotEmpty())
            <ul class="alert-list" style="margin-top:0.75rem;">
                @foreach($m['top_suppliers'] as $supplier)
                    <li><span>{{ $supplier->name }}</span><span>₹{{ $fmt($supplier->spend) }}</span></li>
                @endforeach
            </ul>
        @else
            <p class="empty" style="margin-top:0.75rem;">No supplier history yet.</p>
        @endif
    </div>
</div>

<div class="row" style="margin-top:1rem;">
    <div class="box">
        <strong>Recent purchase orders</strong>
        <ul class="muted" style="margin:0.75rem 0 0; padding-left:1.25rem;">
            @forelse($purchaseOrders ?? [] as $po)
                <li><a href="{{ route('admin.inventory.purchase-orders.show', $po) }}">{{ $po->document_number }}</a></li>
            @empty
                <li>None</li>
            @endforelse
        </ul>
    </div>
    <div class="box">
        <strong>Recent GRNs</strong>
        <ul class="muted" style="margin:0.75rem 0 0; padding-left:1.25rem;">
            @forelse($goodsReceipts ?? [] as $grn)
                <li><a href="{{ route('admin.inventory.goods-receipts.show', $grn) }}">{{ $grn->document_number }}</a></li>
            @empty
                <li>None</li>
            @endforelse
        </ul>
    </div>
    <div class="box">
        <strong>Recent dispatches</strong>
        <ul class="muted" style="margin:0.75rem 0 0; padding-left:1.25rem;">
            @forelse($dispatches ?? [] as $d)
                <li><a href="{{ route('admin.inventory.dispatches.show', $d) }}">{{ $d->document_number }}</a></li>
            @empty
                <li>None</li>
            @endforelse
        </ul>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const charts = @json($m['charts'] ?? []);
    const isLight = document.documentElement.getAttribute('data-theme') === 'light';
    const colors = ['#38bdf8', '#4ade80', '#fbbf24', '#f87171', '#a78bfa', '#fb923c'];
    const gridColor = isLight ? 'rgba(100, 116, 139, 0.2)' : '#334155';
    const textColor = isLight ? '#64748b' : '#94a3b8';

    const defaults = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { labels: { color: textColor, boxWidth: 12 } } },
        scales: {
            x: { ticks: { color: textColor }, grid: { color: gridColor } },
            y: { ticks: { color: textColor }, grid: { color: gridColor } },
        },
    };

    if (charts.stock_distribution && document.getElementById('chartStock')) {
        new Chart(document.getElementById('chartStock'), {
            type: 'doughnut',
            data: {
                labels: charts.stock_distribution.labels,
                datasets: [{ data: charts.stock_distribution.values, backgroundColor: ['#38bdf8', '#4ade80'] }],
            },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { color: textColor } } } },
        });
    }

    if (charts.movement_trend && document.getElementById('chartTrend')) {
        new Chart(document.getElementById('chartTrend'), {
            type: 'bar',
            data: {
                labels: charts.movement_trend.labels,
                datasets: [
                    { label: 'GRN in', data: charts.movement_trend.grn, backgroundColor: '#38bdf8' },
                    { label: 'Dispatch out', data: charts.movement_trend.dispatch, backgroundColor: '#f87171' },
                ],
            },
            options: defaults,
        });
    }

    if (charts.fast_moving && document.getElementById('chartFast')) {
        new Chart(document.getElementById('chartFast'), {
            type: 'bar',
            data: {
                labels: charts.fast_moving.labels,
                datasets: [{ label: 'Qty moved', data: charts.fast_moving.values, backgroundColor: '#4ade80' }],
            },
            options: { ...defaults, indexAxis: 'y' },
        });
    }

    if (charts.top_suppliers && document.getElementById('chartSuppliers')) {
        new Chart(document.getElementById('chartSuppliers'), {
            type: 'bar',
            data: {
                labels: charts.top_suppliers.labels,
                datasets: [{ label: 'Spend (₹)', data: charts.top_suppliers.values, backgroundColor: colors }],
            },
            options: defaults,
        });
    }
})();
</script>
@endpush