@extends('layouts.app')
@section('title','Projects')
@section('page-title','Projects')
@section('content')
<div class="page-header d-flex justify-content-between align-items-center">
  <h5 class="mb-0"><i class="bi bi-buildings me-2"></i>Projects</h5>
  <a href="{{ route('projects.create') }}" class="btn btn-primary btn-sm"><i class="bi bi-plus-lg me-1"></i>New Project</a>
</div>
<div class="row g-3">
@foreach($projects as $project)
<div class="col-md-6 col-lg-4">
  <div class="card stat-card h-100">
    <div class="card-body">
      <div class="d-flex justify-content-between mb-2">
        <span class="badge bg-{{ $project->status==='active'?'success':($project->status==='completed'?'primary':'secondary') }}">{{ ucfirst($project->status) }}</span>
        <small class="text-muted">{{ $project->code }}</small>
      </div>
      <h6 class="fw-bold">{{ $project->name }}</h6>
      <div class="small text-muted mb-2"><i class="bi bi-geo-alt me-1"></i>{{ $project->location }}</div>
      <div class="small mb-1 d-flex justify-content-between"><span>Budget</span><span class="fw-semibold">GH₵ {{ number_format($project->budget,2) }}</span></div>
      <div class="small mb-2 d-flex justify-content-between"><span>Spent</span><span class="fw-semibold text-danger">GH₵ {{ number_format($project->total_spent,2) }}</span></div>
      <div class="progress mb-2" style="height:6px"><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="d-flex gap-2 mt-3">
        <a href="{{ route('projects.show',$project) }}" class="btn btn-sm btn-primary flex-fill"><i class="bi bi-eye"></i> View</a>
        <a href="{{ route('projects.edit',$project) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-pencil"></i></a>
      </div>
    </div>
  </div>
</div>
@endforeach
</div>
@endsection