@extends('layouts.app')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')

    <div class="mb-4">
        <h4 class="fw-bold mb-1" style="letter-spacing:-.02em;">Halo, {{ explode(' ', auth()->user()->name ?? 'Petugas')[0] }} 👋</h4>
        <p class="text-muted mb-0">Berikut ringkasan laporan sampah hari ini.</p>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-6 col-lg-3">
            <div class="card stat-card">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="stat-icon" style="background:#eef2ff; color:#4338ca;">
                        <i class="bi bi-file-earmark-text"></i>
                    </div>
                    <div>
                        <div class="stat-label">Total Laporan</div>
                        <div class="stat-value">{{ $stats['total'] ?? 0 }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-6 col-lg-3">
            <div class="card stat-card">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="stat-icon" style="background:#fef3c7; color:#b45309;">
                        <i class="bi bi-hourglass-split"></i>
                    </div>
                    <div>
                        <div class="stat-label">Menunggu</div>
                        <div class="stat-value">{{ $stats['menunggu'] ?? 0 }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-6 col-lg-3">
            <div class="card stat-card">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="stat-icon" style="background:#dbeafe; color:#1d4ed8;">
                        <i class="bi bi-gear-wide-connected"></i>
                    </div>
                    <div>
                        <div class="stat-label">Diproses</div>
                        <div class="stat-value">{{ $stats['diproses'] ?? 0 }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-6 col-lg-3">
            <div class="card stat-card">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="stat-icon" style="background:#dcfce7; color:#15803d;">
                        <i class="bi bi-check-circle"></i>
                    </div>
                    <div>
                        <div class="stat-label">Selesai</div>
                        <div class="stat-value">{{ $stats['selesai'] ?? 0 }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card table-card">
        <div class="card-header bg-white d-flex align-items-center justify-content-between">
            <h6 class="mb-0 fw-bold"><i class="bi bi-clock-history me-2 text-success"></i>Laporan Terbaru</h6>
            <a href="{{ route('reports.index') }}" class="btn btn-sm btn-outline-success">
                Lihat Semua <i class="bi bi-arrow-right"></i>
            </a>
        </div>
        <div class="table-responsive">
            <table class="table align-middle mb-0">
                <thead>
                    <tr>
                        <th>Judul</th>
                        <th>Pelapor</th>
                        <th>Kategori</th>
                        <th>Status</th>
                        <th>Tanggal</th>
                        <th class="text-end">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($recentReports ?? [] as $report)
                        <tr>
                            <td class="fw-medium">{{ $report->title }}</td>
                            <td>{{ $report->user->name ?? '-' }}</td>
                            <td>{{ $report->category->name ?? '-' }}</td>
                            <td>
                                <x-status-badge :status="$report->status" />
                            </td>
                            <td class="text-muted small">{{ $report->created_at->format('d M Y, H:i') }}</td>
                            <td class="text-end">
                                <a href="{{ route('reports.show', $report->id) }}" class="btn btn-sm btn-outline-secondary">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted py-5">
                                <i class="bi bi-inbox fs-2 d-block mb-2 text-muted"></i>
                                Belum ada laporan.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

@endsection