@extends('procurement::layouts.master')
@section('title','Dashboard')

@section('content')
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Procurement Dashboard</h1>
    <span class="text-muted small">{{ now()->format('l, F j, Y') }}</span>
</div>

<!-- KPI Row -->
<div class="row">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-dark shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-dark text-uppercase mb-1">Total Spend (All Time)</div>
                        <div class="h5 mb-0 font-weight-bold">${{ number_format($totalSpend, 2) }}</div>
                    </div>
                    <div class="col-auto"><i class="fas fa-dollar-sign fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-warning shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Unpaid Invoices</div>
                        <div class="h5 mb-0 font-weight-bold">${{ number_format($unpaidTotal, 2) }}</div>
                        @if($overdueInvoices > 0)
                            <div class="text-xs text-danger">{{ $overdueInvoices }} overdue</div>
                        @endif
                    </div>
                    <div class="col-auto"><i class="fas fa-file-invoice fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-info shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Open Orders</div>
                        <div class="h5 mb-0 font-weight-bold">{{ $openOrders }}</div>
                        @if($overdueOrders > 0)
                            <div class="text-xs text-danger">{{ $overdueOrders }} overdue delivery</div>
                        @endif
                    </div>
                    <div class="col-auto"><i class="fas fa-shopping-cart fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-{{ $lowStockItems->count() > 0 ? 'danger' : 'success' }} shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-{{ $lowStockItems->count() > 0 ? 'danger' : 'success' }} text-uppercase mb-1">Low Stock Alerts</div>
                        <div class="h5 mb-0 font-weight-bold">{{ $lowStockItems->count() }}</div>
                        <div class="text-xs text-muted">{{ $componentCount }} components tracked</div>
                    </div>
                    <div class="col-auto"><i class="fas fa-boxes fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Active Projects & Runs -->
    <div class="col-lg-4 mb-4">
        <div class="card shadow h-100">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold">Active Projects</h6>
                <a href="{{ route('procurement.projects.index') }}" class="btn btn-xs btn-outline-dark">View All</a>
            </div>
            <div class="card-body p-0">
                @forelse($activeProjects as $project)
                <div class="px-3 py-2 border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <a href="{{ route('procurement.projects.show', $project) }}" class="font-weight-bold text-dark">{{ $project->name }}</a>
                            <span class="badge badge-{{ $project->status_badge }} ml-1">{{ ucfirst(str_replace('_',' ',$project->status)) }}</span>
                        </div>
                        <small class="text-muted">{{ $project->runs_count }} run(s)</small>
                    </div>
                    @if($project->target_launch_date)
                        <small class="text-muted">Launch: {{ $project->target_launch_date->format('M j, Y') }}</small>
                    @endif
                </div>
                @empty
                <div class="p-3 text-muted text-center">No active projects</div>
                @endforelse

                @if($activeRuns->count())
                <div class="px-3 pt-3 pb-1">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-2">In-Progress Runs</div>
                    @foreach($activeRuns as $run)
                    <div class="d-flex justify-content-between mb-1">
                        <span><a href="{{ route('procurement.runs.show', $run) }}">{{ $run->project->name }} — {{ $run->run_number }}</a></span>
                        <span class="badge badge-primary">{{ $run->target_qty }} units</span>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Spend by Supplier -->
    <div class="col-lg-4 mb-4">
        <div class="card shadow h-100">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold">Top Spend by Supplier</h6>
            </div>
            <div class="card-body p-0">
                @forelse($spendBySupplier as $name => $amount)
                <div class="px-3 py-2 border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="font-weight-bold">{{ $name ?? 'Unknown' }}</span>
                        <span>${{ number_format($amount, 2) }}</span>
                    </div>
                    <div class="progress mt-1" style="height:4px">
                        <div class="progress-bar bg-dark" style="width:{{ $totalSpend > 0 ? ($amount/$totalSpend*100) : 0 }}%"></div>
                    </div>
                </div>
                @empty
                <div class="p-3 text-muted text-center">No spend data yet</div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Long Lead + Low Stock -->
    <div class="col-lg-4 mb-4">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-danger">⚠ Long Lead Items (≥8 wk)</h6>
            </div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0">
                    <tbody>
                        @forelse($longLeadItems as $c)
                        <tr>
                            <td><code class="small">{{ $c->ref_designator }}</code><br><small>{{ Str::limit($c->description,35) }}</small></td>
                            <td class="text-right"><span class="lead-badge">{{ $c->lead_time_weeks }}w</span></td>
                        </tr>
                        @empty
                        <tr><td class="text-center text-muted py-2">None flagged</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        @if($lowStockItems->count())
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-danger">⚠ Low Stock</h6>
            </div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0">
                    <tbody>
                        @foreach($lowStockItems as $s)
                        <tr>
                            <td><small>{{ Str::limit($s->component->description,30) }}</small></td>
                            <td class="text-right"><span class="badge badge-danger">{{ $s->qty_on_hand }} on hand</span></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif
    </div>
</div>

<!-- Recent Invoices -->
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex justify-content-between align-items-center">
        <h6 class="m-0 font-weight-bold">Recent Invoices</h6>
        <a href="{{ route('procurement.invoices.create') }}" class="btn btn-xs btn-dark">+ New Invoice</a>
    </div>
    <div class="card-body p-0">
        <table class="table table-sm table-hover mb-0">
            <thead class="thead-light">
                <tr><th>Invoice #</th><th>Supplier</th><th>PO</th><th>Date</th><th>Due</th><th>Status</th><th class="text-right">Amount (USD)</th></tr>
            </thead>
            <tbody>
                @forelse($recentInvoices as $inv)
                <tr>
                    <td><a href="{{ route('procurement.invoices.show', $inv) }}">{{ $inv->invoice_number }}</a></td>
                    <td>{{ $inv->supplier->name ?? '—' }}</td>
                    <td>{{ $inv->purchaseOrder->po_number ?? '—' }}</td>
                    <td>{{ $inv->invoice_date->format('M j, Y') }}</td>
                    <td class="{{ $inv->is_overdue ? 'text-danger font-weight-bold' : '' }}">{{ $inv->due_date?->format('M j, Y') ?? '—' }}</td>
                    <td><span class="badge badge-{{ $inv->status_badge }}">{{ ucfirst($inv->status) }}</span></td>
                    <td class="text-right">${{ number_format($inv->amount_usd, 2) }}</td>
                </tr>
                @empty
                <tr><td colspan="7" class="text-center text-muted py-3">No invoices yet</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection