@extends('layouts.app')
@section('content')

<div class="content-wrapper">

    <div class="page-header">
        <h3 class="page-title">Childcare Centre Director Dashboard</h3>
    </div>

    <!-- KPI CARDS -->
    <div class="row dashboardCard">

        <div class="col-md-4 grid-margin stretch-card">
            <div class="card bg-dark text-white">
                <div class="card-body">
                    <h5>Total Educators</h5>
                    <h2>{{ $totalEducators ?? 0 }}</h2>
                </div>
            </div>
        </div>

        <div class="col-md-4 grid-margin stretch-card">
            <div class="card bg-dark text-white">
                <div class="card-body">
                    <h5>Total Jobs Posted</h5>
                    <h2>{{ $totalJobs ?? 0 }}</h2>
                </div>
            </div>
        </div>

        <div class="col-md-4 grid-margin stretch-card">
            <div class="card bg-dark text-white">
                <div class="card-body">
                    <h5>Total Shortlisted</h5>
                    <h2>{{ $totalJobsShortlisted ?? 0 }}</h2>
                </div>
            </div>
        </div>

        <div class="col-md-4 grid-margin stretch-card">
            <div class="card bg-dark text-white">
                <div class="card-body">
                    <h5>Total Applications</h5>
                    <h2>{{ $totalApplications ?? 0 }}</h2>
                </div>
            </div>
        </div>

        <div class="col-md-4 grid-margin stretch-card">
            <div class="card bg-dark text-white">
                <div class="card-body">
                    <h5>Total Hired</h5>
                    <h2>{{ $totalHired ?? 0 }}</h2>
                </div>
            </div>
        </div>

        <div class="col-md-4 grid-margin stretch-card">
            <div class="card bg-dark text-white">
                <div class="card-body">
                    <h5>Active Subscriptions</h5>
                    <h2>{{ $activeSubscriptions ?? 0 }}</h2>
                </div>
            </div>
        </div>

    </div>

    <div class="row">

    <!-- RECENT JOB POSTS -->
    <div class="col-md-6 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Recent Job Posts</h4>

                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Job Title</th>
                                <th>Location</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Preschool Teacher</td>
                                <td>Delhi</td>
                                <td>15 Mar 2026</td>
                            </tr>
                            <tr>
                                <td>Daycare Assistant</td>
                                <td>Noida</td>
                                <td>14 Mar 2026</td>
                            </tr>
                            <tr>
                                <td>Childcare Coordinator</td>
                                <td>Gurgaon</td>
                                <td>13 Mar 2026</td>
                            </tr>
                            <tr>
                                <td>Nursery Teacher</td>
                                <td>Faridabad</td>
                                <td>12 Mar 2026</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>

    <!-- RECENT APPLICATIONS -->
    <div class="col-md-6 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Recent Applications</h4>

                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Candidate Name</th>
                                <th>Applied For</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Riya Sharma</td>
                                <td>Preschool Teacher</td>
                                <td>15 Mar 2026</td>
                            </tr>
                            <tr>
                                <td>Amit Kumar</td>
                                <td>Daycare Assistant</td>
                                <td>14 Mar 2026</td>
                            </tr>
                            <tr>
                                <td>Neha Verma</td>
                                <td>Nursery Teacher</td>
                                <td>13 Mar 2026</td>
                            </tr>
                            <tr>
                                <td>Rahul Singh</td>
                                <td>Childcare Coordinator</td>
                                <td>12 Mar 2026</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>

</div>

</div>

@endsection