@extends('layouts.app')
@section('title', 'Dashboard')
@section('page-title', 'Overview Dashboard')

@push('styles')
<style>
    .stat-card {
        padding: 1rem 1.25rem;
        background: #fff;
        border-radius: 12px;
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
        border: 1px solid rgba(0,0,0,.05);
        height: 100%;
    }
    .stat-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,.08) !important; }
    .stat-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        margin-right: 12px;
    }
    .stat-label {
        font-size: 0.85rem;
        font-weight: 700;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-right: auto; /* Push value to right */
    }
    .stat-value {
        font-size: 1.25rem;
        font-weight: 800;
        color: #333;
        margin-left: 10px;
    }
    
    .bg-primary-light { background-color: var(--primary-light); color: var(--primary-green); }
    .table thead th { border-top: none; background-color: #fcfcfc; text-transform: uppercase; font-size: 11px; letter-spacing: .5px; color: #777; }
    
    .bg-primary-light { background-color: var(--primary-light); color: var(--primary-green); }
    
    .table thead th { border-top: none; background-color: #fcfcfc; text-transform: uppercase; font-size: 11px; letter-spacing: .5px; color: #777; }
</style>
@endpush

@section('content')
<div class="mb-4 no-print">
    <h4 class="font-weight-bold mb-1">Selamat Datang, {{ auth()->user()->name }}! 👋</h4>
    <p class="text-muted small mb-0">{{ now()->translatedFormat('l, d F Y') }}</p>
</div>

<div class="row mb-4">
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stat-card shadow-sm">
            <div class="stat-icon bg-primary-light">
                <i class="fas fa-file-invoice"></i>
            </div>
            <div class="stat-label">Total Invoice</div>
            <div class="stat-value">{{ $stats['total_invoices'] }}</div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stat-card shadow-sm">
            <div class="stat-icon" style="background-color: #eafaf1; color: #2ecc71;">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="stat-label">Lunas</div>
            <div class="stat-value">{{ $stats['invoice_paid'] }}</div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stat-card shadow-sm">
            <div class="stat-icon" style="background-color: #fff9e6; color: #f1c40f;">
                <i class="fas fa-clock"></i>
            </div>
            <div class="stat-label">Belum Lunas</div>
            <div class="stat-value">{{ $stats['invoice_unpaid'] }}</div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stat-card shadow-sm">
            <div class="stat-icon" style="background-color: #e8f4fd; color: #3498db;">
                <i class="fas fa-wallet"></i>
            </div>
            <div class="stat-label">Bulan Ini</div>
            <div class="stat-value" style="font-size: 1.1rem;">Rp {{ number_format($stats['revenue_month'], 0, ',', '.') }}</div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8 mb-4">
        <div class="card h-100 shadow-sm">
            <div class="card-header border-0 d-flex justify-content-between align-items-center">
                <h3 class="card-title font-weight-bold">Invoice Terbaru</h3>
                <a href="{{ route('invoices.index') }}" class="btn btn-sm btn-link text-muted">Lihat Semua</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table m-0 table-hover align-middle">
                        <thead>
                            <tr>
                                <th class="pl-4">NO. INVOICE</th>
                                <th>PELANGGAN</th>
                                <th>TANGGAL</th>
                                <th>TOTAL</th>
                                <th>STATUS</th>
                            </tr>
                        </thead>
                        <tbody>
                        @forelse($recent_invoices as $inv)
                            <tr>
                                <td class="pl-4"><a href="{{ route('invoices.show', $inv) }}" class="font-weight-bold text-dark">{{ $inv->invoice_number }}</a></td>
                                <td>{{ $inv->customer->name }}</td>
                                <td>{{ $inv->invoice_date->format('d M Y') }}</td>
                                <td class="font-weight-bold text-dark">Rp {{ number_format($inv->total, 0, ',', '.') }}</td>
                                <td><span class="badge badge-{{ $inv->status }} px-3 py-2">{{ $inv->status_label }}</span></td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="text-center text-muted py-5">Belum ada invoice masuk</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 mb-4">
        <div class="card h-100 shadow-sm">
            <div class="card-header border-0">
                <h3 class="card-title font-weight-bold">Aksi Cepat</h3>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ route('invoices.create') }}" class="btn btn-primary btn-block py-2 mb-3 text-left">
                        <i class="fas fa-plus-circle mr-2"></i> Buat Invoice Baru
                    </a>
                    <a href="{{ route('receipts.create') }}" class="btn btn-outline-primary btn-block py-2 mb-3 text-left">
                        <i class="fas fa-receipt mr-2"></i> Buat Tanda Terima
                    </a>
                    <a href="{{ route('customers.create') }}" class="btn btn-outline-secondary btn-block py-2 mb-4 text-left">
                        <i class="fas fa-user-plus mr-2"></i> Tambah Pelanggan
                    </a>
                </div>
                <div class="pt-3 border-top">
                    <p class="small text-muted font-weight-bold text-uppercase mb-3">Monitoring & Laporan</p>
                    <a href="{{ route('reports.invoices') }}" class="text-dark d-block mb-3 small">
                        <i class="fas fa-chevron-right mr-2 text-muted"></i> Laporan Rekap Invoice
                    </a>
                    <a href="{{ route('reports.receipts') }}" class="text-dark d-block small">
                        <i class="fas fa-chevron-right mr-2 text-muted"></i> Laporan Tanda Terima
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection