@extends('layouts.admin')

@section('content')
<h3 class="mb-4">Dashboard</h3>

<div class="row mb-4">
    <div class="col-md-3">
        <div class="card text-bg-primary mb-3">
            <div class="card-body">
                <h5 class="card-title">Customers</h5>
                <p class="card-text fs-4" id="stat_customers">0</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-bg-success mb-3">
            <div class="card-body">
                <h5 class="card-title">Active Services</h5>
                <p class="card-text fs-4" id="stat_services">0</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-bg-warning mb-3">
            <div class="card-body">
                <h5 class="card-title">Unpaid Invoices</h5>
                <p class="card-text fs-4" id="stat_unpaid">0</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-bg-info mb-3">
            <div class="card-body">
                <h5 class="card-title">Routers</h5>
                <p class="card-text fs-4" id="stat_routers">0</p>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {

    Promise.all([
        fetch('/api/customers').then(r => r.json()),
        fetch('/api/services').then(r => r.json()),
        fetch('/api/invoices').then(r => r.json()),
        fetch('/api/routers').then(r => r.json()),
    ]).then(([customers, services, invoices, routers]) => {
        document.getElementById('stat_customers').innerText = customers.length;
        document.getElementById('stat_services').innerText = services.filter(s => s.status).length;
        document.getElementById('stat_unpaid').innerText = invoices.filter(i => i.status === 'unpaid').length;
        document.getElementById('stat_routers').innerText = routers.length;
    });

});
</script>
@endsection