@extends('layouts.app')
@section('title', 'Executive Dashboard')

@section('content')
<div class="p-4 sm:p-6 lg:p-7">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4 mb-5">
    <a href="{{ route('finance.index') }}" class="stat cursor-pointer no-underline text-inherit">
      <div class="flex items-center justify-between mb-2.5"><span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Revenue</span><div class="w-7 h-7 rounded-lg bg-blue-50 flex items-center justify-center"><i class="fa-solid fa-arrow-trend-up text-blue-500 text-xs"></i></div></div>
      <p class="text-[22px] font-bold text-slate-900">{{ \App\Support\Format::mwk($totalRevenue) }}</p>
      <p class="text-emerald-600 text-[11px] font-semibold mt-1">&uarr; +12.4% this month</p>
    </a>
    <a href="{{ route('finance.index') }}" class="stat cursor-pointer no-underline text-inherit">
      <div class="flex items-center justify-between mb-2.5"><span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Costs</span><div class="w-7 h-7 rounded-lg bg-red-50 flex items-center justify-center"><i class="fa-solid fa-receipt text-red-500 text-xs"></i></div></div>
      <p class="text-[22px] font-bold text-slate-900">{{ \App\Support\Format::mwk($totalExpenses) }}</p>
      <p class="text-red-500 text-[11px] font-semibold mt-1">&darr; -3.8% this month</p>
    </a>
    <a href="{{ route('reports.index') }}" class="stat cursor-pointer no-underline text-inherit">
      <div class="flex items-center justify-between mb-2.5"><span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Net Profit</span><div class="w-7 h-7 rounded-lg bg-emerald-50 flex items-center justify-center"><i class="fa-solid fa-sack-dollar text-emerald-500 text-xs"></i></div></div>
      <p class="text-[22px] font-bold text-emerald-600">{{ \App\Support\Format::mwk($netProfit) }}</p>
      <p class="text-slate-400 text-[11px] font-semibold mt-1">{{ $netMargin }}% margin</p>
    </a>
    <a href="{{ route('projects.index') }}" class="stat cursor-pointer no-underline text-inherit">
      <div class="flex items-center justify-between mb-2.5"><span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Projects</span><div class="w-7 h-7 rounded-lg bg-amber-50 flex items-center justify-center"><i class="fa-solid fa-diagram-project text-amber-500 text-xs"></i></div></div>
      <p class="text-[22px] font-bold text-slate-900">{{ $projectCount }}</p>
      <p class="text-amber-600 text-[11px] font-semibold mt-1">{{ $atRisk }} at risk &middot; {{ $onTrack }} on track</p>
    </a>
    <a href="{{ route('cashflow.index') }}" class="stat cursor-pointer no-underline text-inherit">
      <div class="flex items-center justify-between mb-2.5"><span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Cash Position</span><div class="w-7 h-7 rounded-lg bg-violet-50 flex items-center justify-center"><i class="fa-solid fa-vault text-violet-500 text-xs"></i></div></div>
      <p class="text-[22px] font-bold text-slate-900">{{ \App\Support\Format::mwk($cashPosition) }}</p>
      <p class="text-emerald-600 text-[11px] font-semibold mt-1">6 weeks runway</p>
    </a>
  </div>

  @if($alertActionCount > 0 || $alertSummary->count() > 0)
    <div class="dp mb-5 flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
      <div>
        <p class="font-bold text-slate-900"><i class="fa-solid fa-bell text-blue-600 mr-2"></i>Alerts requiring attention</p>
        <p class="text-slate-400 text-[11px] mt-0.5">@if($alertActionCount > 0)<span class="badge r">{{ $alertActionCount }}</span> critical/warning unread @else Latest operational notices @endif</p>
      </div>
      <a href="{{ route('alerts.index') }}" class="ba no-underline self-start">Open alerts →</a>
    </div>
    @if($alertSummary->count())
      <div class="space-y-2 mb-5">
        @foreach($alertSummary as $a)
          @include('alerts.partials.alert-card', ['alert' => $a, 'compact' => true])
        @endforeach
      </div>
    @endif
  @endif

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4">
    <div class="lg:col-span-2 card p-5">
      <div class="flex justify-between items-center mb-4">
        <div>
          <p class="font-bold text-slate-900">Revenue vs Cost Trend</p>
          <p class="text-slate-400 text-[11px] mt-0.5">All projects &middot; Last 30 days</p>
        </div>
        <a href="{{ route('reports.index') }}" class="text-blue-600 text-[12px] font-semibold no-underline">View Reports &rarr;</a>
      </div>
      <canvas id="trendChart" height="115"></canvas>
    </div>
    <div class="card p-5">
      <div class="flex justify-between items-center mb-4">
        <p class="font-bold text-slate-900">Profitability</p>
        <a href="{{ route('projects.index') }}" class="text-blue-600 text-[12px] font-semibold no-underline">All &rarr;</a>
      </div>
      <div class="space-y-2">
        @foreach($top3 as $i => $p)
          <a href="{{ route('projects.show', $p->id) }}" class="flex items-center gap-3 p-2.5 rounded-xl bg-slate-50 cursor-pointer hover:bg-slate-100 transition-colors no-underline">
            <div class="w-6 h-6 rounded-lg bg-blue-600 text-white flex items-center justify-center text-xs font-bold">{{ $i + 1 }}</div>
            <div class="flex-1 min-w-0">
              <p class="font-semibold text-slate-800 text-[12px] truncate">{{ $p->name }}</p>
              <p class="{{ $p->profit < 0 ? 'text-red-500' : 'text-emerald-600' }} text-[11px]">{{ \App\Support\Format::mwk($p->profit, true) }} &middot; {{ ($p->margin >= 0 ? '+' : '') . $p->margin }}%</p>
            </div>
          </a>
        @endforeach
        @if($worst && $worst->profit < 0)
          <div class="border-t border-slate-100 pt-2 mt-1">
            <a href="{{ route('projects.show', $worst->id) }}" class="flex items-center gap-3 p-2.5 rounded-xl bg-red-50 cursor-pointer no-underline">
              <div class="w-6 h-6 rounded-lg bg-red-100 text-red-600 flex items-center justify-center text-xs font-bold">&darr;</div>
              <div class="flex-1">
                <p class="font-semibold text-slate-800 text-[12px]">{{ $worst->name }}</p>
                <p class="text-red-500 text-[11px]">{{ \App\Support\Format::mwk($worst->profit, true) }} &middot; {{ $worst->margin }}%</p>
              </div>
            </a>
          </div>
        @endif
      </div>
    </div>
  </div>

  <div class="card p-5 card-has-table">
    <div class="flex justify-between items-center mb-4">
      <p class="font-bold text-slate-900">Live Projects</p>
      <a href="{{ route('projects.index') }}" class="text-blue-600 text-[12px] font-semibold no-underline">View All &rarr;</a>
    </div>
    <table>
      <thead><tr class="border-b border-slate-100"><th class="th">Project</th><th class="th">Progress</th><th class="th">Budget</th><th class="th">Spent</th><th class="th">Profit</th><th class="th">Status</th></tr></thead>
      <tbody>
        @foreach($top5 as $p)
        <tr class="cursor-pointer" onclick="window.location='{{ route('projects.show', $p->id) }}'">
          <td class="td font-semibold text-slate-800">{{ $p->name }}</td>
          <td class="td"><div class="pb w-24"><div class="pf {{ $p->status === 'At Risk' ? 'bg-red-400' : 'bg-emerald-500' }}" style="width:{{ $p->progress }}%"></div></div><span class="text-[10px] text-slate-400">{{ $p->progress }}%</span></td>
          <td class="td text-slate-600">{{ \App\Support\Format::mwk($p->budget) }}</td>
          <td class="td text-slate-600">{{ \App\Support\Format::mwk($p->spent) }}</td>
          <td class="td font-bold {{ $p->profit < 0 ? 'text-red-500' : 'text-emerald-600' }}">{{ \App\Support\Format::mwk($p->profit, true) }}</td>
          <td class="td"><span class="badge {{ $p->status === 'On Track' ? 'g' : 'r' }}">{{ $p->status }}</span></td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
  const ctx = document.getElementById('trendChart');
  if (!ctx) return;
  const trend = @json($trend);
  new Chart(ctx, {
    type: 'line',
    data: {
      labels: trend.labels,
      datasets: [
        { label:'Revenue', data: trend.revenueSeries, borderColor:'#2563eb', backgroundColor:'rgba(37,99,235,.04)', fill:true, tension:.4, borderWidth:2, pointRadius:0, pointHoverRadius:5 },
        { label:'Costs',   data: trend.costSeries,    borderColor:'#ef4444', backgroundColor:'rgba(239,68,68,.03)', fill:true, tension:.4, borderWidth:2, pointRadius:0, pointHoverRadius:5 },
      ],
    },
    options: {
      responsive:true,
      interaction:{ mode:'index', intersect:false },
      plugins:{
        legend:{ display:true, position:'top', align:'end', labels:{ usePointStyle:true, pointStyle:'circle', boxWidth:6, font:{size:11,family:'DM Sans'}, padding:16 } },
        tooltip:{ backgroundColor:'#0f172a', padding:10, cornerRadius:8, callbacks:{ label:c => c.dataset.label + ': MWK ' + c.parsed.y.toFixed(1) + 'M' } },
      },
      scales:{
        y:{ grid:{ color:'#f8fafc', drawBorder:false }, ticks:{ color:'#94a3b8', font:{size:11}, callback:v => 'MWK ' + v + 'M' }, border:{ display:false } },
        x:{ grid:{ display:false }, ticks:{ color:'#94a3b8', font:{size:11} }, border:{ display:false } },
      },
    },
  });
})();
</script>
@endpush