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

<style>
    :root {
        --primary:        #4F6EF7;
        --primary-light:  #EEF1FE;
        --primary-dark:   #3B56D4;
        --success:        #22C55E;
        --success-light:  #DCFCE7;
        --warning:        #F59E0B;
        --warning-light:  #FEF3C7;
        --danger:         #EF4444;
        --danger-light:   #FEE2E2;
        --info:           #06B6D4;
        --info-light:     #CFFAFE;
        --purple:         #8B5CF6;
        --purple-light:   #EDE9FE;
        --gold:           #F59E0B;
        --border:         #E8ECFB;
        --text-primary:   #0F172A;
        --text-secondary: #64748B;
        --text-muted:     #94A3B8;
        --surface:        #F8F9FF;
        --card-bg:        #FFFFFF;
        --radius:         14px;
        --radius-sm:      8px;
        --shadow-sm:      0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
        --shadow-md:      0 4px 16px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
        --shadow-lg:      0 12px 40px rgba(79,110,247,.12);
    }

    body, .content-wrapper { background: var(--surface) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; }

    /* ── Page Header ── */
    .dash-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2rem;
        flex-wrap: wrap;
        gap: .75rem;
    }
    .dash-header-left h3 {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--text-primary);
        margin: 0;
        letter-spacing: -.4px;
    }
    .dash-header-left p {
        font-size: .825rem;
        color: var(--text-muted);
        margin: .2rem 0 0;
    }
    .dash-badge {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        background: var(--primary-light);
        color: var(--primary);
        font-size: .75rem;
        font-weight: 600;
        padding: .35rem .85rem;
        border-radius: 50px;
        letter-spacing: .3px;
    }
    .dash-badge .dot {
        width: 7px; height: 7px;
        background: var(--primary);
        border-radius: 50%;
        animation: pulse 2s infinite;
    }
    @keyframes pulse {
        0%,100% { opacity:1; transform:scale(1); }
        50%      { opacity:.5; transform:scale(1.35); }
    }

    /* ── KPI Cards ── */
    .kpi-card {
        background: var(--card-bg);
        border-radius: var(--radius);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        padding: 1.4rem 1.35rem 1.25rem;
        position: relative;
        overflow: hidden;
        transition: box-shadow .22s, transform .22s;
        height: 100%;
    }
    .kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .kpi-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        border-radius: var(--radius) var(--radius) 0 0;
        background: var(--accent-color, var(--primary));
    }
    .kpi-icon-wrap {
        width: 46px; height: 46px;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.2rem;
        margin-bottom: 1rem;
        background: var(--icon-bg, var(--primary-light));
        color: var(--accent-color, var(--primary));
    }
    .kpi-label {
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .7px;
        color: var(--text-secondary);
        margin-bottom: .25rem;
    }
    .kpi-value {
        font-size: 2rem;
        font-weight: 800;
        color: var(--text-primary);
        line-height: 1;
        letter-spacing: -1px;
        font-family: 'DM Mono', monospace;
    }
    .kpi-footer {
        margin-top: .7rem;
        font-size: .75rem;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: .3rem;
    }
    .trend {
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: .15rem;
        padding: .1rem .42rem;
        border-radius: 50px;
        font-size: .68rem;
    }
    .trend-up   { background: var(--success-light); color: var(--success); }
    .trend-down { background: var(--danger-light);  color: var(--danger); }
    .trend-neu  { background: var(--primary-light); color: var(--primary); }

    /* ── Revenue Card ── */
    .revenue-card {
        background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
        border-radius: var(--radius);
        border: none;
        overflow: hidden;
        position: relative;
    }
    .revenue-card::before {
        content: '';
        position: absolute;
        top: -60px; right: -60px;
        width: 200px; height: 200px;
        background: rgba(79,110,247,.08);
        border-radius: 50%;
        pointer-events: none;
    }
    .revenue-card::after {
        content: '';
        position: absolute;
        bottom: -40px; left: -40px;
        width: 150px; height: 150px;
        background: rgba(139,92,246,.06);
        border-radius: 50%;
        pointer-events: none;
    }
    .revenue-card-inner { padding: 1.6rem 1.75rem; position: relative; z-index: 1; }
    .revenue-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: .5rem;
    }
    .revenue-header h5 {
        font-size: .88rem;
        font-weight: 700;
        color: #fff;
        margin: 0;
        display: flex;
        align-items: center;
        gap: .5rem;
    }
    .revenue-header h5 i { color: rgba(255,255,255,.5); }
    .revenue-period {
        font-size: .7rem;
        color: rgba(255,255,255,.4);
        background: rgba(255,255,255,.07);
        padding: .25rem .65rem;
        border-radius: 50px;
        font-weight: 600;
    }
    .revenue-divider { width: 1px; background: rgba(255,255,255,.08); align-self: stretch; }
    .rev-item { flex: 1; padding: 0 1.25rem; min-width: 120px; }
    .rev-item:first-child { padding-left: 0; }
    .rev-item:last-child  { padding-right: 0; }
    .rev-item .rev-label {
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .7px;
        color: rgba(255,255,255,.45);
        margin-bottom: .4rem;
    }
    .rev-item .rev-amount {
        font-size: 1.75rem;
        font-weight: 800;
        color: #fff;
        line-height: 1;
        letter-spacing: -1px;
        font-family: 'DM Mono', monospace;
    }
    .rev-item .rev-amount span { font-size: .95rem; font-weight: 600; opacity: .6; margin-right: .1rem; }
    .rev-item .rev-sub {
        font-size: .72rem;
        color: rgba(255,255,255,.35);
        margin-top: .3rem;
    }
    .rev-trend-up   { color: #86EFAC; font-size: .7rem; font-weight: 700; }
    .rev-trend-down { color: #FCA5A5; font-size: .7rem; font-weight: 700; }

    /* ── Section Title ── */
    .section-title {
        font-size: .82rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .8px;
        color: var(--text-secondary);
        margin-bottom: 1.1rem;
        display: flex;
        align-items: center;
        gap: .6rem;
    }
    .section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

    /* ── Table Cards ── */
    .table-card {
        background: var(--card-bg);
        border-radius: var(--radius);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        height: 100%;
    }
    .table-card-header {
        padding: 1.1rem 1.4rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--border);
        background: #fff;
    }
    .table-card-header h5 {
        font-size: .9rem;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
    }
    .badge-count {
        background: var(--primary-light);
        color: var(--primary);
        font-size: .68rem;
        font-weight: 700;
        padding: .18rem .52rem;
        border-radius: 50px;
    }
    .view-all-btn {
        font-size: .74rem;
        font-weight: 600;
        color: var(--primary);
        text-decoration: none;
        padding: .28rem .65rem;
        border-radius: var(--radius-sm);
        transition: background .18s;
    }
    .view-all-btn:hover { background: var(--primary-light); color: var(--primary); }

    /* ── Dash Table ── */
    .dash-table { margin: 0; }
    .dash-table thead th {
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .6px;
        color: var(--text-muted);
        background: #FAFBFF;
        border-bottom: 1px solid var(--border) !important;
        border-top: none !important;
        padding: .7rem 1.25rem;
        white-space: nowrap;
    }
    .dash-table tbody td {
        font-size: .82rem;
        color: var(--text-primary);
        padding: .8rem 1.25rem;
        border-bottom: 1px solid var(--border) !important;
        vertical-align: middle;
    }
    .dash-table tbody tr:last-child td { border-bottom: none !important; }
    .dash-table tbody tr:hover td { background: #FAFBFF; }

    /* ── Avatar ── */
    .avatar-sm {
        width: 32px; height: 32px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: .68rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    /* ── Pills ── */
    .pill {
        font-size: .68rem;
        font-weight: 700;
        padding: .2rem .58rem;
        border-radius: 50px;
        display: inline-flex;
        align-items: center;
        gap: .22rem;
        white-space: nowrap;
    }
    .pill-new      { background: var(--info-light);    color: var(--info); }
    .pill-short    { background: var(--warning-light); color: var(--warning); }
    .pill-hired    { background: var(--success-light); color: var(--success); }
    .pill-review   { background: var(--purple-light);  color: var(--purple); }

    /* ── Location ── */
    .location-txt {
        font-size: .75rem;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: .22rem;
    }
</style>

<div class="content-wrapper py-4 px-3 px-md-4">

    {{-- ── Page Header ── --}}
    <div class="dash-header">
        <div class="dash-header-left">
            <h3>Admin Dashboard</h3>
            <p>Platform-wide overview of users, jobs, applications &amp; revenue</p>
        </div>
        <span class="dash-badge">
            <span class="dot"></span> Live Dashboard
        </span>
    </div>

    {{-- ── KPI Cards ── --}}
    <div class="row g-3 mb-4">

        <div class="col-6 col-md-4 col-xl-2">
            <div class="kpi-card" style="--accent-color:#4F6EF7; --icon-bg:#EEF1FE;">
                <div class="kpi-icon-wrap"><i class="mdi mdi-domain"></i></div>
                <div class="kpi-label">Childcare Centres</div>
                <div class="kpi-value">{{ $totalCentres ?? 0 }}</div>
                <div class="kpi-footer">
                    <span class="trend trend-up">↑ 4</span> this month
                </div>
            </div>
        </div>

        <div class="col-6 col-md-4 col-xl-2">
            <div class="kpi-card" style="--accent-color:#8B5CF6; --icon-bg:#EDE9FE;">
                <div class="kpi-icon-wrap"><i class="mdi mdi-account-group-outline"></i></div>
                <div class="kpi-label">Total Educators</div>
                <div class="kpi-value">{{ $totalEducators ?? 0 }}</div>
                <div class="kpi-footer">
                    <span class="trend trend-up">↑ 9</span> new
                </div>
            </div>
        </div>

        <div class="col-6 col-md-4 col-xl-2">
            <div class="kpi-card" style="--accent-color:#06B6D4; --icon-bg:#CFFAFE;">
                <div class="kpi-icon-wrap"><i class="mdi mdi-briefcase-outline"></i></div>
                <div class="kpi-label">Jobs Posted</div>
                <div class="kpi-value">{{ $totalJobs ?? 0 }}</div>
                <div class="kpi-footer">
                    <span class="trend trend-up">↑ 3</span> this week
                </div>
            </div>
        </div>

        <div class="col-6 col-md-4 col-xl-2">
            <div class="kpi-card" style="--accent-color:#F59E0B; --icon-bg:#FEF3C7;">
                <div class="kpi-icon-wrap"><i class="mdi mdi-clipboard-text-multiple-outline"></i></div>
                <div class="kpi-label">Applications</div>
                <div class="kpi-value">{{ $totalApplications ?? 0 }}</div>
                <div class="kpi-footer">
                    <span class="trend trend-up">↑ 14</span> this week
                </div>
            </div>
        </div>

        <div class="col-6 col-md-4 col-xl-2">
            <div class="kpi-card" style="--accent-color:#22C55E; --icon-bg:#DCFCE7;">
                <div class="kpi-icon-wrap"><i class="mdi mdi-account-check-outline"></i></div>
                <div class="kpi-label">Total Hired</div>
                <div class="kpi-value">{{ $totalHired ?? 0 }}</div>
                <div class="kpi-footer">
                    <span class="trend trend-neu">All time</span>
                </div>
            </div>
        </div>

        <div class="col-6 col-md-4 col-xl-2">
            <div class="kpi-card" style="--accent-color:#EF4444; --icon-bg:#FEE2E2;">
                <div class="kpi-icon-wrap"><i class="mdi mdi-crown-outline"></i></div>
                <div class="kpi-label">Active Subscriptions</div>
                <div class="kpi-value">{{ $activeSubscriptions ?? 0 }}</div>
                <div class="kpi-footer">
                    <span class="trend trend-up">↑ 2</span> renewed
                </div>
            </div>
        </div>

    </div>

    {{-- ── Revenue Summary ── --}}
    <div class="revenue-card mb-4">
        <div class="revenue-card-inner">
            <div class="revenue-header">
                <h5><i class="mdi mdi-chart-line"></i> Revenue Summary</h5>
                <span class="revenue-period">Financial Overview</span>
            </div>
            <div class="d-flex flex-wrap gap-0" style="border-top:1px solid rgba(255,255,255,.06); padding-top:1.25rem;">

                <div class="rev-item">
                    <div class="rev-label"><i class="mdi mdi-sigma me-1"></i>Total Revenue</div>
                    <div class="rev-amount"><span>$</span>{{ number_format($totalRevenue ?? 0, 2) }}</div>
                    <div class="rev-sub">All time earnings</div>
                </div>

                <div class="revenue-divider mx-2 d-none d-md-block"></div>

                <div class="rev-item">
                    <div class="rev-label"><i class="mdi mdi-calendar-month-outline me-1"></i>This Month</div>
                    <div class="rev-amount"><span>$</span>{{ number_format($monthlyRevenue ?? 0, 2) }}</div>
                    <div class="rev-sub rev-trend-up">↑ vs last month</div>
                </div>

                <div class="revenue-divider mx-2 d-none d-md-block"></div>

                <div class="rev-item">
                    <div class="rev-label"><i class="mdi mdi-calendar-today me-1"></i>Today</div>
                    <div class="rev-amount"><span>$</span>{{ number_format($todayRevenue ?? 0, 2) }}</div>
                    <div class="rev-sub">{{ now()->format('d M Y') }}</div>
                </div>

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

    {{-- ── Recent Activity Tables ── --}}
    <div class="section-title">Recent Activity</div>

    <div class="row g-3">

        {{-- Recent Job Posts --}}
        <div class="col-12 col-lg-6">
            <div class="table-card">
                <div class="table-card-header">
                    <h5><i class="mdi mdi-briefcase-outline me-2" style="color:var(--info);font-size:.9rem;"></i>Recent Job Posts</h5>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge-count">4 latest</span>
                        <a href="#" class="view-all-btn">View all →</a>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table dash-table mb-0">
                        <thead>
                            <tr>
                                <th>Job Title</th>
                                <th>Location</th>
                                <th>Date</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div style="font-weight:700;font-size:.83rem;">Preschool Teacher</div>
                                    <div style="font-size:.71rem;color:var(--text-muted);">Full Time</div>
                                </td>
                                <td><span class="location-txt"><i class="mdi mdi-map-marker-outline" style="color:var(--danger);"></i>Delhi</span></td>
                                <td style="font-size:.75rem;color:var(--text-muted);font-family:'DM Mono',monospace;">15 Mar</td>
                                <td><span class="pill pill-hired"><i class="mdi mdi-check-circle-outline"></i>Active</span></td>
                            </tr>
                            <tr>
                                <td>
                                    <div style="font-weight:700;font-size:.83rem;">Daycare Assistant</div>
                                    <div style="font-size:.71rem;color:var(--text-muted);">Part Time</div>
                                </td>
                                <td><span class="location-txt"><i class="mdi mdi-map-marker-outline" style="color:var(--danger);"></i>Noida</span></td>
                                <td style="font-size:.75rem;color:var(--text-muted);font-family:'DM Mono',monospace;">14 Mar</td>
                                <td><span class="pill pill-new"><i class="mdi mdi-clock-outline"></i>New</span></td>
                            </tr>
                            <tr>
                                <td>
                                    <div style="font-weight:700;font-size:.83rem;">Childcare Coordinator</div>
                                    <div style="font-size:.71rem;color:var(--text-muted);">Contract</div>
                                </td>
                                <td><span class="location-txt"><i class="mdi mdi-map-marker-outline" style="color:var(--danger);"></i>Gurgaon</span></td>
                                <td style="font-size:.75rem;color:var(--text-muted);font-family:'DM Mono',monospace;">13 Mar</td>
                                <td><span class="pill pill-review"><i class="mdi mdi-eye-outline"></i>Review</span></td>
                            </tr>
                            <tr>
                                <td>
                                    <div style="font-weight:700;font-size:.83rem;">Nursery Teacher</div>
                                    <div style="font-size:.71rem;color:var(--text-muted);">Full Time</div>
                                </td>
                                <td><span class="location-txt"><i class="mdi mdi-map-marker-outline" style="color:var(--danger);"></i>Faridabad</span></td>
                                <td style="font-size:.75rem;color:var(--text-muted);font-family:'DM Mono',monospace;">12 Mar</td>
                                <td><span class="pill pill-hired"><i class="mdi mdi-check-circle-outline"></i>Active</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Recent Applications --}}
        <div class="col-12 col-lg-6">
            <div class="table-card">
                <div class="table-card-header">
                    <h5><i class="mdi mdi-account-multiple-outline me-2" style="color:var(--success);font-size:.9rem;"></i>Recent Applications</h5>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge-count" style="background:var(--success-light);color:var(--success);">4 latest</span>
                        <a href="#" class="view-all-btn">View all →</a>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table dash-table mb-0">
                        <thead>
                            <tr>
                                <th>Candidate</th>
                                <th>Applied For</th>
                                <th>Date</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="avatar-sm" style="background:#EEF1FE;color:#4F6EF7;">RS</div>
                                        <span style="font-weight:600;font-size:.83rem;">Riya Sharma</span>
                                    </div>
                                </td>
                                <td style="font-size:.8rem;">Preschool Teacher</td>
                                <td style="font-size:.75rem;color:var(--text-muted);font-family:'DM Mono',monospace;">15 Mar</td>
                                <td><span class="pill pill-new"><i class="mdi mdi-email-open-outline"></i>New</span></td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="avatar-sm" style="background:#CFFAFE;color:#06B6D4;">AK</div>
                                        <span style="font-weight:600;font-size:.83rem;">Amit Kumar</span>
                                    </div>
                                </td>
                                <td style="font-size:.8rem;">Daycare Assistant</td>
                                <td style="font-size:.75rem;color:var(--text-muted);font-family:'DM Mono',monospace;">14 Mar</td>
                                <td><span class="pill pill-review"><i class="mdi mdi-eye-outline"></i>Review</span></td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="avatar-sm" style="background:#DCFCE7;color:#22C55E;">NV</div>
                                        <span style="font-weight:600;font-size:.83rem;">Neha Verma</span>
                                    </div>
                                </td>
                                <td style="font-size:.8rem;">Nursery Teacher</td>
                                <td style="font-size:.75rem;color:var(--text-muted);font-family:'DM Mono',monospace;">13 Mar</td>
                                <td><span class="pill pill-short"><i class="mdi mdi-star-outline"></i>Shortlisted</span></td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="avatar-sm" style="background:#EDE9FE;color:#8B5CF6;">RN</div>
                                        <span style="font-weight:600;font-size:.83rem;">Rahul Singh</span>
                                    </div>
                                </td>
                                <td style="font-size:.8rem;">Childcare Coordinator</td>
                                <td style="font-size:.75rem;color:var(--text-muted);font-family:'DM Mono',monospace;">12 Mar</td>
                                <td><span class="pill pill-hired"><i class="mdi mdi-account-check-outline"></i>Hired</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

</div>

@endsection