@extends('layouts.app') 

@section('content')
<div class="container mt-4">
    <h2 class="mb-4">Subscriptions Overview</h2>

    <!-- Grand Totals Section -->
    <div class="row mb-5">
        <div class="col-md-4">
            <div class="card bg-primary text-white shadow-sm">
                <div class="card-body">
                    <h6 class="card-title text-uppercase text-white-50">Total Subscribers (All Services)</h6>
                    <h2 id="grand-total" class="mb-0">
                        <span class="spinner-border spinner-border-sm" role="status"></span>
                    </h2>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-success text-white shadow-sm">
                <div class="card-body">
                    <h6 class="card-title text-uppercase text-white-50">Total Active</h6>
                    <h2 id="grand-active" class="mb-0">
                        <span class="spinner-border spinner-border-sm" role="status"></span>
                    </h2>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-secondary text-white shadow-sm">
                <div class="card-body">
                    <h6 class="card-title text-uppercase text-white-50">Total Inactive</h6>
                    <h2 id="grand-inactive" class="mb-0">
                        <span class="spinner-border spinner-border-sm" role="status"></span>
                    </h2>
                </div>
            </div>
        </div>
    </div>

    <h4 class="mb-3 text-muted">Service Breakdown</h4>
    
    <!-- Dynamic Service Cards Container -->
    <div class="row" id="service-cards-container">
        <!-- jQuery will inject the individual service cards here -->
        <div class="col-12 text-center py-5" id="loading-services">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="text-muted mt-2">Aggregating cross-service metrics...</p>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script src="{{ asset('public/assets/js/dashboard.js') }}"></script>
@endpush