@extends('layouts.app')

@section('title', 'ড্যাশবোর্ড')

@section('content')
<div class="topbar">
  <div>
    <h1>পেমেন্ট অ্যালার্ট ড্যাশবোর্ড</h1>
    <div class="topbar-sub">{{ now()->translatedFormat('d F Y') }} · সব ব্রাঞ্চ</div>
  </div>
  <div class="avatar">{{ strtoupper(substr(auth()->user()->name, 0, 2)) }}</div>
</div>

<div class="stats">
  <div class="stat"><div class="stat-label">মোট বকেয়া</div><div class="stat-val">৳ {{ number_format($stats['outstanding'], 0) }}</div></div>
  <div class="stat"><div class="stat-label">আজ কালেকশন</div><div class="stat-val g">৳ {{ number_format($stats['collected_today'], 0) }}</div></div>
  <div class="stat"><div class="stat-label">ওভারডিউ</div><div class="stat-val r">৳ {{ number_format($stats['overdue'], 0) }}</div></div>
  <div class="stat"><div class="stat-label">সক্রিয় অ্যালার্ট</div><div class="stat-val y">{{ $stats['active_alerts'] }}</div></div>
</div>

<div class="panel">
  <div class="panel-head">
    <h2>সাম্প্রতিক পেমেন্ট অ্যালার্ট</h2>
    <a href="{{ route('alerts.index') }}" class="mini-btn">সব দেখুন</a>
  </div>
  <table>
    <thead><tr><th>পার্টি</th><th>পরিমাণ</th><th>মেয়াদ</th><th>স্ট্যাটাস</th></tr></thead>
    <tbody>
      @forelse ($recentAlerts as $alert)
        <tr class="row">
          <td><div class="party">{{ $alert->party->name }}</div><div class="party-sub">{{ $alert->party->branch }}</div></td>
          <td class="amt">৳ {{ number_format($alert->amount, 0) }}</td>
          <td>{{ $alert->due_date->translatedFormat('d M') }}</td>
          <td>
            @if ($alert->status === 'paid')
              <span class="badge paid">পরিশোধিত</span>
            @elseif ($alert->status === 'overdue')
              <span class="badge overdue">ওভারডিউ</span>
            @else
              <span class="badge due">বকেয়া</span>
            @endif
          </td>
        </tr>
      @empty
        <tr><td colspan="4" style="text-align:center; color:var(--text3); padding:28px;">কোনো অ্যালার্ট নেই</td></tr>
      @endforelse
    </tbody>
  </table>
</div>
@endsection