@extends('layouts.app')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')
@section('breadcrumbs')
    <li class="breadcrumb-item active">Dashboard</li>
@endsection

@section('content')

    <div class="row">
        <div class="col-lg-3 col-6">
            <div class="small-box text-bg-primary">
                <div class="inner">
                    <h3>{{ number_format($totalCustomers) }}</h3>
                    <p>Total Customers</p>
                </div>
                <i class="fas fa-users small-box-icon"></i>
                <a href="{{ route('customers.index') }}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <div class="small-box text-bg-info">
                <div class="inner">
                    <h3>{{ number_format($totalServices) }}</h3>
                    <p>Total Services</p>
                </div>
                <i class="fas fa-server small-box-icon"></i>
                <a href="{{ route('services.index') }}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <div class="small-box text-bg-warning">
                <div class="inner">
                    <h3>{{ number_format($totalInvoices) }}</h3>
                    <p>Total Invoices</p>
                </div>
                <i class="fas fa-file-invoice-dollar small-box-icon"></i>
                <a href="{{ route('invoices.index') }}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <div class="small-box text-bg-success">
                <div class="inner">
                    <h3>${{ number_format($totalIncome, 2) }}</h3>
                    <p>Total Income</p>
                </div>
                <i class="fas fa-sack-dollar small-box-icon"></i>
                <span class="small-box-footer">&nbsp;</span>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-6">
            <div class="small-box text-bg-danger">
                <div class="inner">
                    <h3>${{ number_format($totalExpenses, 2) }}</h3>
                    <p>Total Expenses</p>
                </div>
                <i class="fas fa-money-bill-trend-up small-box-icon"></i>
                <span class="small-box-footer text-white-50">Accounting module — coming next</span>
            </div>
        </div>
        <div class="col-lg-4 col-6">
            <div class="small-box text-bg-secondary">
                <div class="inner">
                    <h3>${{ number_format($todaysPayments, 2) }}</h3>
                    <p>Today's Payments</p>
                </div>
                <i class="fas fa-calendar-day small-box-icon"></i>
                <span class="small-box-footer">&nbsp;</span>
            </div>
        </div>
        <div class="col-lg-4 col-6">
            <div class="small-box" style="background:#6f42c1;color:#fff;">
                <div class="inner">
                    <h3>{{ now()->format('d M') }}</h3>
                    <p>{{ now()->format('l, Y') }}</p>
                </div>
                <i class="fas fa-clock small-box-icon"></i>
                <span class="small-box-footer">&nbsp;</span>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-chart-line me-1"></i> Monthly Revenue (last 12 months)</h3>
                </div>
                <div class="card-body">
                    <canvas id="revenueChart" style="min-height:300px"></canvas>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-clock-rotate-left me-1"></i> Recent Activities</h3>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @forelse ($recentActivities as $invoice)
                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                <div>
                                    <div class="fw-semibold">{{ $invoice->invoice_number }}</div>
                                    <small class="text-muted">{{ $invoice->customer->name ?? 'Unknown customer' }} &middot; {{ $invoice->created_at->diffForHumans() }}</small>
                                </div>
                                <span class="badge text-bg-{{ $invoice->status === 'paid' ? 'success' : ($invoice->status === 'overdue' ? 'danger' : 'warning') }}">
                                    {{ ucfirst($invoice->status) }}
                                </span>
                            </li>
                        @empty
                            <li class="list-group-item text-muted">No activity yet.</li>
                        @endforelse
                    </ul>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    const ctx = document.getElementById('revenueChart');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: @json($chartLabels),
            datasets: [{
                label: 'Revenue Collected ($)',
                data: @json($chartData),
                borderColor: '#17a2b8',
                backgroundColor: 'rgba(23,162,184,0.15)',
                tension: 0.35,
                fill: true,
                pointRadius: 3,
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: { y: { beginAtZero: true } }
        }
    });
</script>
@endpush