@extends('layouts.app')
@section('title','Dashboard')
@section('page-title','Dashboard')
@section('content')
<div class="row g-3 mb-4">
  <div class="col-md-3"><div class="card stat-card h-100 p-3"><div class="d-flex justify-content-between align-items-center"><div><div class="text-muted small fw-semibold">TOTAL BUDGET</div><div class="fs-4 fw-bold mt-1">GH₵ {{ number_format($totalBudget,2) }}</div><div class="small text-success">{{ $projects->count() }} project(s)</div></div><div class="icon-box bg-primary bg-opacity-10 text-primary"><i class="bi bi-buildings"></i></div></div></div></div>
  <div class="col-md-3"><div class="card stat-card h-100 p-3"><div class="d-flex justify-content-between align-items-center"><div><div class="text-muted small fw-semibold">TOTAL SPENT</div><div class="fs-4 fw-bold mt-1 text-danger">GH₵ {{ number_format($totalSpent,2) }}</div><div class="small text-warning">GH₵ {{ number_format($pendingPayments,2) }} pending</div></div><div class="icon-box bg-danger bg-opacity-10 text-danger"><i class="bi bi-cash-coin"></i></div></div></div></div>
  <div class="col-md-3"><div class="card stat-card h-100 p-3"><div class="d-flex justify-content-between align-items-center"><div><div class="text-muted small fw-semibold">TODAY ATTENDANCE</div><div class="fs-4 fw-bold mt-1">{{ $todayAttendance }}</div><div class="small text-muted">{{ $pendingApprovals }} pending approvals</div></div><div class="icon-box bg-success bg-opacity-10 text-success"><i class="bi bi-person-check"></i></div></div></div></div>
  <div class="col-md-3"><div class="card stat-card h-100 p-3"><div class="d-flex justify-content-between align-items-center"><div><div class="text-muted small fw-semibold">ALERTS</div><div class="fs-4 fw-bold mt-1 {{ $openIncidents > 0 || $lowStockItems > 0 ? 'text-danger' : 'text-success' }}">{{ $openIncidents + $lowStockItems }}</div><div class="small">{{ $openIncidents }} incident(s) · {{ $lowStockItems }} low stock</div></div><div class="icon-box bg-warning bg-opacity-10 text-warning"><i class="bi bi-exclamation-triangle"></i></div></div></div></div>
</div>

<div class="row g-3 mb-4">
  @foreach($projects as $project)
  <div class="col-md-6"><div class="card stat-card p-3">
    <div class="d-flex justify-content-between mb-2">
      <div><span class="badge bg-{{ $project->status === 'active' ? 'success' : 'secondary' }}">{{ $project->status }}</span> <a href="{{ route('projects.show',$project) }}" class="fw-semibold text-decoration-none ms-1">{{ $project->name }}</a></div>
      <small class="text-muted">{{ $project->location }}</small>
    </div>
    <div class="d-flex justify-content-between small text-muted mb-1"><span>Budget: GH₵ {{ number_format($project->budget,2) }}</span><span>Spent: GH₵ {{ number_format($project->total_spent,2) }}</span></div>
    <div class="progress" style="height:8px"><div class="progress-bar {{ $project->budget_percent > 90 ? 'bg-danger' : ($project->budget_percent > 70 ? 'bg-warning' : 'bg-success') }}" style="width:{{ min($project->budget_percent,100) }}%"></div></div>
    <div class="small text-muted mt-1">{{ $project->budget_percent }}% of budget used · {{ $project->staff_count }} staff · {{ $project->subcontractors_count }} subcontractors</div>
  </div></div>
  @endforeach
</div>

<div class="row g-3">
  <div class="col-md-8">
    <div class="card stat-card">
      <div class="card-header bg-white border-0 fw-semibold pt-3 px-3">Recent Expenditures</div>
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead><tr><th>Date</th><th>Project</th><th>Description</th><th>Category</th><th class="text-end">Amount</th><th>Status</th></tr></thead>
          <tbody>
            @foreach($recentExpenditures as $exp)
            <tr>
              <td class="small">{{ $exp->date->format('d M Y') }}</td>
              <td class="small">{{ $exp->project->name ?? '-' }}</td>
              <td class="small">{{ Str::limit($exp->description,35) }}</td>
              <td><span class="badge" style="background-color:{{ $exp->category->color ?? '#6c757d' }}">{{ $exp->category->code ?? '-' }}</span></td>
              <td class="text-end small fw-semibold">GH₵ {{ number_format($exp->amount,2) }}</td>
              <td><span class="badge {{ $exp->is_paid ? 'bg-success' : 'bg-warning text-dark' }}">{{ $exp->is_paid ? 'Paid' : 'Pending' }}</span></td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      <div class="card-footer bg-white border-0 py-2 px-3"><a href="{{ route('expenditures.index') }}" class="btn btn-sm btn-outline-primary">View All</a></div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card stat-card p-3 mb-3">
      <div class="fw-semibold mb-3">Spend by Category</div>
      <canvas id="catChart" height="200"></canvas>
    </div>
    <div class="card stat-card p-3">
      <div class="fw-semibold mb-2">Subcontractor Balances</div>
      @foreach($activeSubcontractors->take(5) as $sc)
      <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
        <div><div class="small fw-semibold">{{ $sc->name }}</div><div class="small text-muted">{{ $sc->trade }}</div></div>
        <div class="text-end"><div class="small text-danger fw-semibold">GH₵ {{ number_format($sc->balance,2) }}</div><div class="small text-muted">outstanding</div></div>
      </div>
      @endforeach
      <a href="{{ route('subcontractors.index') }}" class="btn btn-sm btn-outline-secondary mt-2 w-100">View All</a>
    </div>
  </div>
</div>
@endsection
@push('scripts')
<script>
new Chart(document.getElementById('catChart'),{type:'doughnut',data:{labels:[{{ $spendByCategory->map(fn($s)=>'"'.($s->category->name??'Other').'"')->implode(',') }}],datasets:[{data:[{{ $spendByCategory->map(fn($s)=>round($s->total))->implode(',') }}],backgroundColor:[{{ $spendByCategory->map(fn($s)=>'"'.($s->category->color??'#6c757d').'"')->implode(',') }}]}]},options:{plugins:{legend:{position:'bottom',labels:{boxWidth:12,font:{size:11}}}},cutout:'65%'}});
</script>
@endpush