@extends('layouts/layoutMaster')

@section('title', 'Dashboard')

@section('vendor-style')
    @vite(['resources/assets/vendor/libs/apex-charts/apex-charts.scss', 'resources/assets/vendor/fonts/flag-icons.scss'])
@endsection
@section('vendor-script')
    @vite('resources/assets/vendor/libs/apex-charts/apexcharts.js')
@endsection
@section('page-script')
    @vite('resources/assets/js/dashboards-crm.js')
@endsection

@section('content')
    <div class="row g-6">
        <!-- Dashboard Stat Cards -->
        <div class="col-xxl-3 col-md-3 col-6 mb-4">
            <div class="card h-100 shadow-sm">
                <div class="card-body text-center">
                    <div class="mb-2">
                        <span class="bg-light rounded p-2">
                            <i class="icon-base ti tabler-school" style="font-size:2rem;"></i>
                        </span>
                    </div>
                    <div class="fw-bold" style="font-size:2rem;">{{ $activeStudents ?? 0 }}</div>
                    <div class="text-muted">Total Students</div>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-md-3 col-6 mb-4">
            <div class="card h-100 shadow-sm">
                <div class="card-body text-center">
                    <div class="mb-2">
                        <span class="bg-light rounded p-2">
                            <i class="icon-base ti tabler-users" style="font-size:2rem;"></i>
                        </span>
                    </div>
                    <div class="fw-bold" style="font-size:2rem;">{{ $parents ?? 0 }}</div>
                    <div class="text-muted">Total Parents</div>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-md-3 col-6 mb-4">
            <div class="card h-100 shadow-sm">
                <div class="card-body text-center">
                    <div class="mb-2">
                        <span class="bg-light rounded p-2">
                            <i class="icon-base ti tabler-device-ipad-up" style="font-size:2rem;"></i>
                        </span>
                    </div>
                    <div class="fw-bold" style="font-size:2rem;">{{ $granduatedStudents ?? 0 }}</div>
                    <div class="text-muted">Total Graduate</div>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-md-3 col-6 mb-4">
            <div class="card h-100 shadow-sm">
                <div class="card-body text-center">
                    <div class="mb-2">
                        <span class="bg-light rounded p-2">
                            <i class="icon-base ti tabler-device-ipad-dollar" style="font-size:2rem;"></i>
                        </span>
                    </div>
                    <div class="fw-bold" style="font-size:2rem;">{{ $paidStudents ?? 0 }}</div>
                    <div class="text-muted">Total Paid Students</div>
                </div>
            </div>
        </div>
    </div>
@endsection