@extends('layouts.app')

@section('title', 'Educators')

@section('content')

<style>
    :root {
        --primary:        #4F6EF7;
        --primary-light:  #EEF1FE;
        --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;
        --border:         #E8ECFB;
        --text-primary:   #0F172A;
        --text-secondary: #64748B;
        --text-muted:     #94A3B8;
        --surface:        #F8F9FF;
        --radius:         14px;
        --radius-sm:      8px;
        --shadow-sm:      0 1px 3px rgba(15,23,42,.06);
        --shadow-md:      0 4px 16px rgba(15,23,42,.08);
    }

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

    /* ── Page Header ── */
    .page-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: .75rem;
        margin-bottom: 1.75rem;
    }
    .page-top h3 {
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--text-primary);
        margin: 0;
        letter-spacing: -.3px;
    }
    .page-top p { font-size: .82rem; color: var(--text-muted); margin: .15rem 0 0; }

    /* ── Stat Cards ── */
    .stat-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        padding: 1.1rem 1.2rem;
        display: flex;
        align-items: center;
        gap: .9rem;
        position: relative;
        overflow: hidden;
        transition: box-shadow .2s, transform .2s;
        height: 100%;
    }
    .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .stat-card::before {
        content: '';
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 4px;
        border-radius: var(--radius) 0 0 var(--radius);
        background: var(--accent);
    }
    .stat-icon {
        width: 44px; height: 44px;
        border-radius: 11px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.3rem;
        flex-shrink: 0;
        background: var(--icon-bg);
        color: var(--accent);
    }
    .stat-info .stat-val {
        font-size: 1.6rem;
        font-weight: 800;
        color: var(--text-primary);
        line-height: 1;
        letter-spacing: -.5px;
    }
    .stat-info .stat-lbl {
        font-size: .72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .6px;
        color: var(--text-muted);
        margin-top: .2rem;
    }

    /* ── Filter Card ── */
    .filter-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        padding: 1.2rem 1.4rem;
        margin-bottom: 1.25rem;
    }
    .filter-card .form-control,
    .filter-card .form-select {
        border-radius: var(--radius-sm);
        border-color: var(--border);
        font-size: .83rem;
        color: var(--text-primary);
    }
    .filter-card .form-control:focus,
    .filter-card .form-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(79,110,247,.1);
    }

    /* ── Table Card ── */
    .table-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    .table-card-header {
        padding: 1.1rem 1.4rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: .5rem;
    }
    .table-card-header h5 {
        font-size: .92rem;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
    }
    .total-badge {
        background: var(--primary-light);
        color: var(--primary);
        font-size: .7rem;
        font-weight: 700;
        padding: .22rem .6rem;
        border-radius: 50px;
    }

    /* ── Dash Table ── */
    .dash-table thead th {
        font-size: .71rem;
        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: .75rem 1rem;
        white-space: nowrap;
    }
    .dash-table tbody td {
        font-size: .83rem;
        color: var(--text-primary);
        padding: .8rem 1rem;
        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: 36px; height: 36px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: .68rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    /* ── Pills ── */
    .pill {
        font-size: .69rem;
        font-weight: 700;
        padding: .25rem .65rem;
        border-radius: 50px;
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        white-space: nowrap;
    }
    .pill i { font-size: .78rem; }
    .pill-active     { background: var(--success-light); color: var(--success); }
    .pill-inactive   { background: #F1F5F9;               color: #64748B; }
    .pill-hired      { background: var(--success-light); color: var(--success); }
    .pill-available  { background: var(--info-light);    color: var(--info); }
    .pill-fulltime   { background: var(--primary-light); color: var(--primary); }
    .pill-parttime   { background: var(--purple-light);  color: var(--purple); }
    .pill-contract   { background: var(--warning-light); color: var(--warning); }
    .pill-verified   { background: var(--success-light); color: var(--success); }
    .pill-pending    { background: var(--warning-light); color: var(--warning); }

    /* ── Rating Stars ── */
    .star-rating { color: #F59E0B; font-size: .75rem; letter-spacing: .5px; }
    .star-rating span { font-size: .72rem; color: var(--text-muted); margin-left: .2rem; font-weight: 600; }

    /* ── Action Buttons ── */
    .btn-act {
        width: 30px; height: 30px;
        border-radius: var(--radius-sm);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: .85rem;
        border: none;
        transition: opacity .18s, transform .18s;
        text-decoration: none;
        cursor: pointer;
    }
    .btn-act:hover { opacity: .82; transform: scale(1.08); }
    .btn-view   { background: var(--info-light);    color: var(--info); }
    .btn-edit   { background: var(--primary-light); color: var(--primary); }
    .btn-del    { background: var(--danger-light);  color: var(--danger); }
    .btn-msg    { background: var(--success-light); color: var(--success); }

    /* ── Exp Badge ── */
    .exp-badge {
        font-size: .72rem;
        font-weight: 600;
        color: var(--text-secondary);
        background: #F1F5F9;
        padding: .18rem .5rem;
        border-radius: 50px;
        white-space: nowrap;
    }

    /* ── Empty State ── */
    .empty-state {
        padding: 3rem 1rem;
        text-align: center;
        color: var(--text-muted);
    }
    .empty-state i { font-size: 2.5rem; margin-bottom: .75rem; opacity: .4; display: block; }
    .empty-state p { font-size: .85rem; margin: 0; }
</style>

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

    {{-- ── Page Header ── --}}
    <div class="page-top">
        <div>
            <h3><i class="mdi mdi-account-group-outline me-2" style="color:var(--primary);"></i>Educators</h3>
            <p>Browse and manage all educators registered on the platform</p>
        </div>
        <a href="#" class="btn btn-primary btn-sm d-flex align-items-center gap-1"
            style="border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;">
            <i class="mdi mdi-account-plus-outline"></i> Invite Educator
        </a>
    </div>

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

        <div class="col-6 col-md-4 col-xl-2">
            <div class="stat-card" style="--accent:#4F6EF7; --icon-bg:#EEF1FE;">
                <div class="stat-icon"><i class="mdi mdi-account-group-outline"></i></div>
                <div class="stat-info">
                    <div class="stat-val">38</div>
                    <div class="stat-lbl">Total</div>
                </div>
            </div>
        </div>

        <div class="col-6 col-md-4 col-xl-2">
            <div class="stat-card" style="--accent:#22C55E; --icon-bg:#DCFCE7;">
                <div class="stat-icon"><i class="mdi mdi-account-check-outline"></i></div>
                <div class="stat-info">
                    <div class="stat-val">24</div>
                    <div class="stat-lbl">Active</div>
                </div>
            </div>
        </div>

        <div class="col-6 col-md-4 col-xl-2">
            <div class="stat-card" style="--accent:#06B6D4; --icon-bg:#CFFAFE;">
                <div class="stat-icon"><i class="mdi mdi-briefcase-check-outline"></i></div>
                <div class="stat-info">
                    <div class="stat-val">9</div>
                    <div class="stat-lbl">Hired</div>
                </div>
            </div>
        </div>

        <div class="col-6 col-md-4 col-xl-2">
            <div class="stat-card" style="--accent:#F59E0B; --icon-bg:#FEF3C7;">
                <div class="stat-icon"><i class="mdi mdi-clock-outline"></i></div>
                <div class="stat-info">
                    <div class="stat-val">11</div>
                    <div class="stat-lbl">Available</div>
                </div>
            </div>
        </div>

        <div class="col-6 col-md-4 col-xl-2">
            <div class="stat-card" style="--accent:#8B5CF6; --icon-bg:#EDE9FE;">
                <div class="stat-icon"><i class="mdi mdi-shield-check-outline"></i></div>
                <div class="stat-info">
                    <div class="stat-val">29</div>
                    <div class="stat-lbl">Verified</div>
                </div>
            </div>
        </div>

        <div class="col-6 col-md-4 col-xl-2">
            <div class="stat-card" style="--accent:#EF4444; --icon-bg:#FEE2E2;">
                <div class="stat-icon"><i class="mdi mdi-account-off-outline"></i></div>
                <div class="stat-info">
                    <div class="stat-val">5</div>
                    <div class="stat-lbl">Inactive</div>
                </div>
            </div>
        </div>

    </div>

    {{-- ── Filters ── --}}
    <div class="filter-card">
        <form method="GET" action="#">
            <div class="row g-2 align-items-end">

                <div class="col-sm-6 col-md-4 col-xl-3">
                    <label class="form-label" style="font-size:.72rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;">Search</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-white border-end-0" style="border-color:var(--border);">
                            <i class="mdi mdi-magnify" style="color:var(--text-muted);"></i>
                        </span>
                        <input type="text" name="search" class="form-control border-start-0"
                            placeholder="Name, role, qualification..."
                            style="border-color:var(--border);">
                    </div>
                </div>

                <div class="col-sm-6 col-md-3 col-xl-2">
                    <label class="form-label" style="font-size:.72rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;">Status</label>
                    <select name="status" class="form-select form-select-sm">
                        <option value="">All Status</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                        <option value="hired">Hired</option>
                        <option value="available">Available</option>
                    </select>
                </div>

                <div class="col-sm-6 col-md-3 col-xl-2">
                    <label class="form-label" style="font-size:.72rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;">Job Type</label>
                    <select name="job_type" class="form-select form-select-sm">
                        <option value="">All Types</option>
                        <option value="full_time">Full Time</option>
                        <option value="part_time">Part Time</option>
                        <option value="contract">Contract</option>
                        <option value="internship">Internship</option>
                    </select>
                </div>

                <div class="col-sm-6 col-md-3 col-xl-2">
                    <label class="form-label" style="font-size:.72rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;">Location</label>
                    <select name="location" class="form-select form-select-sm">
                        <option value="">All Locations</option>
                        <option value="delhi">Delhi</option>
                        <option value="noida">Noida</option>
                        <option value="gurgaon">Gurgaon</option>
                        <option value="faridabad">Faridabad</option>
                    </select>
                </div>

                <div class="col-sm-6 col-md-3 col-xl-2">
                    <label class="form-label" style="font-size:.72rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;">Verification</label>
                    <select name="verified" class="form-select form-select-sm">
                        <option value="">All</option>
                        <option value="verified">Verified</option>
                        <option value="pending">Pending</option>
                    </select>
                </div>

                <div class="col-12 col-md-auto d-flex gap-2 mt-1">
                    <button type="submit" class="btn btn-primary btn-sm d-flex align-items-center gap-1"
                        style="border-radius:var(--radius-sm);font-weight:600;font-size:.8rem;">
                        <i class="mdi mdi-filter-outline"></i> Filter
                    </button>
                    <a href="#" class="btn btn-sm d-flex align-items-center gap-1"
                        style="border-radius:var(--radius-sm);font-weight:600;font-size:.8rem;background:#F1F5F9;color:var(--text-secondary);">
                        <i class="mdi mdi-refresh"></i> Reset
                    </a>
                </div>

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

    {{-- ── Educators Table ── --}}
    <div class="table-card">
        <div class="table-card-header">
            <h5>
                <i class="mdi mdi-account-group-outline me-2" style="color:var(--primary);font-size:1rem;"></i>
                All Educators
            </h5>
            <span class="total-badge">38 total</span>
        </div>

        <div class="table-responsive">
            <table class="table dash-table mb-0">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Educator</th>
                        <th>Role / Specialisation</th>
                        <th>Location</th>
                        <th>Experience</th>
                        <th>Job Type</th>
                        <th>Rating</th>
                        <th>Verification</th>
                        <th>Status</th>
                        <th>Joined</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>

                    <!-- Row 1 -->
                    <tr>
                        <td style="color:var(--text-muted);font-size:.75rem;">1</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="avatar-sm" style="background:#EEF1FE;color:#4F6EF7;">RS</div>
                                <div>
                                    <div style="font-weight:700;font-size:.84rem;">Riya Sharma</div>
                                    <div style="font-size:.72rem;color:var(--text-muted);">riya.sharma@email.com</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div style="font-size:.82rem;font-weight:600;">Preschool Teacher</div>
                            <div style="font-size:.72rem;color:var(--text-muted);">B.Ed Graduate</div>
                        </td>
                        <td><span style="font-size:.78rem;color:var(--text-muted);display:flex;align-items:center;gap:.25rem;"><i class="mdi mdi-map-marker-outline" style="color:var(--danger);"></i>Delhi</span></td>
                        <td><span class="exp-badge"><i class="mdi mdi-briefcase-outline me-1"></i>3 yrs</span></td>
                        <td><span class="pill pill-fulltime"><i class="mdi mdi-clock-outline"></i>Full Time</span></td>
                        <td>
                            <div class="star-rating">★★★★★<span>5.0</span></div>
                        </td>
                        <td><span class="pill pill-verified"><i class="mdi mdi-shield-check-outline"></i>Verified</span></td>
                        <td><span class="pill pill-active"><i class="mdi mdi-check-circle-outline"></i>Active</span></td>
                        <td style="font-size:.77rem;color:var(--text-muted);white-space:nowrap;"><i class="mdi mdi-calendar-outline me-1"></i>10 Jan 2026</td>
                        <td>
                            <div class="d-flex align-items-center gap-1">
                                <a href="#" class="btn-act btn-view" title="View Profile"><i class="mdi mdi-eye-outline"></i></a>
                                <a href="#" class="btn-act btn-msg"  title="Message"><i class="mdi mdi-message-outline"></i></a>
                                <a href="#" class="btn-act btn-edit" title="Edit"><i class="mdi mdi-pencil-outline"></i></a>
                                <button class="btn-act btn-del delete-btn" data-id="1" title="Remove"><i class="mdi mdi-trash-can-outline"></i></button>
                            </div>
                        </td>
                    </tr>

                    <!-- Row 2 -->
                    <tr>
                        <td style="color:var(--text-muted);font-size:.75rem;">2</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="avatar-sm" style="background:#CFFAFE;color:#06B6D4;">AK</div>
                                <div>
                                    <div style="font-weight:700;font-size:.84rem;">Amit Kumar</div>
                                    <div style="font-size:.72rem;color:var(--text-muted);">amit.kumar@email.com</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div style="font-size:.82rem;font-weight:600;">Daycare Assistant</div>
                            <div style="font-size:.72rem;color:var(--text-muted);">Childcare Certificate</div>
                        </td>
                        <td><span style="font-size:.78rem;color:var(--text-muted);display:flex;align-items:center;gap:.25rem;"><i class="mdi mdi-map-marker-outline" style="color:var(--danger);"></i>Noida</span></td>
                        <td><span class="exp-badge"><i class="mdi mdi-briefcase-outline me-1"></i>2 yrs</span></td>
                        <td><span class="pill pill-parttime"><i class="mdi mdi-clock-outline"></i>Part Time</span></td>
                        <td>
                            <div class="star-rating">★★★★☆<span>4.2</span></div>
                        </td>
                        <td><span class="pill pill-verified"><i class="mdi mdi-shield-check-outline"></i>Verified</span></td>
                        <td><span class="pill pill-hired"><i class="mdi mdi-briefcase-check-outline"></i>Hired</span></td>
                        <td style="font-size:.77rem;color:var(--text-muted);white-space:nowrap;"><i class="mdi mdi-calendar-outline me-1"></i>14 Mar 2026</td>
                        <td>
                            <div class="d-flex align-items-center gap-1">
                                <a href="#" class="btn-act btn-view" title="View Profile"><i class="mdi mdi-eye-outline"></i></a>
                                <a href="#" class="btn-act btn-msg"  title="Message"><i class="mdi mdi-message-outline"></i></a>
                                <a href="#" class="btn-act btn-edit" title="Edit"><i class="mdi mdi-pencil-outline"></i></a>
                                <button class="btn-act btn-del delete-btn" data-id="2" title="Remove"><i class="mdi mdi-trash-can-outline"></i></button>
                            </div>
                        </td>
                    </tr>

                    <!-- Row 3 -->
                    <tr>
                        <td style="color:var(--text-muted);font-size:.75rem;">3</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="avatar-sm" style="background:#DCFCE7;color:#22C55E;">NV</div>
                                <div>
                                    <div style="font-weight:700;font-size:.84rem;">Neha Verma</div>
                                    <div style="font-size:.72rem;color:var(--text-muted);">neha.verma@email.com</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div style="font-size:.82rem;font-weight:600;">Nursery Teacher</div>
                            <div style="font-size:.72rem;color:var(--text-muted);">Montessori Trained</div>
                        </td>
                        <td><span style="font-size:.78rem;color:var(--text-muted);display:flex;align-items:center;gap:.25rem;"><i class="mdi mdi-map-marker-outline" style="color:var(--danger);"></i>Gurgaon</span></td>
                        <td><span class="exp-badge"><i class="mdi mdi-briefcase-outline me-1"></i>5 yrs</span></td>
                        <td><span class="pill pill-fulltime"><i class="mdi mdi-clock-outline"></i>Full Time</span></td>
                        <td>
                            <div class="star-rating">★★★★★<span>4.8</span></div>
                        </td>
                        <td><span class="pill pill-verified"><i class="mdi mdi-shield-check-outline"></i>Verified</span></td>
                        <td><span class="pill pill-available"><i class="mdi mdi-account-search-outline"></i>Available</span></td>
                        <td style="font-size:.77rem;color:var(--text-muted);white-space:nowrap;"><i class="mdi mdi-calendar-outline me-1"></i>13 Mar 2026</td>
                        <td>
                            <div class="d-flex align-items-center gap-1">
                                <a href="#" class="btn-act btn-view" title="View Profile"><i class="mdi mdi-eye-outline"></i></a>
                                <a href="#" class="btn-act btn-msg"  title="Message"><i class="mdi mdi-message-outline"></i></a>
                                <a href="#" class="btn-act btn-edit" title="Edit"><i class="mdi mdi-pencil-outline"></i></a>
                                <button class="btn-act btn-del delete-btn" data-id="3" title="Remove"><i class="mdi mdi-trash-can-outline"></i></button>
                            </div>
                        </td>
                    </tr>

                    <!-- Row 4 -->
                    <tr>
                        <td style="color:var(--text-muted);font-size:.75rem;">4</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="avatar-sm" style="background:#EDE9FE;color:#8B5CF6;">RS</div>
                                <div>
                                    <div style="font-weight:700;font-size:.84rem;">Rahul Singh</div>
                                    <div style="font-size:.72rem;color:var(--text-muted);">rahul.singh@email.com</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div style="font-size:.82rem;font-weight:600;">Childcare Coordinator</div>
                            <div style="font-size:.72rem;color:var(--text-muted);">Child Psychology</div>
                        </td>
                        <td><span style="font-size:.78rem;color:var(--text-muted);display:flex;align-items:center;gap:.25rem;"><i class="mdi mdi-map-marker-outline" style="color:var(--danger);"></i>Faridabad</span></td>
                        <td><span class="exp-badge"><i class="mdi mdi-briefcase-outline me-1"></i>4 yrs</span></td>
                        <td><span class="pill pill-contract"><i class="mdi mdi-clock-outline"></i>Contract</span></td>
                        <td>
                            <div class="star-rating">★★★★☆<span>4.5</span></div>
                        </td>
                        <td><span class="pill pill-verified"><i class="mdi mdi-shield-check-outline"></i>Verified</span></td>
                        <td><span class="pill pill-hired"><i class="mdi mdi-briefcase-check-outline"></i>Hired</span></td>
                        <td style="font-size:.77rem;color:var(--text-muted);white-space:nowrap;"><i class="mdi mdi-calendar-outline me-1"></i>12 Mar 2026</td>
                        <td>
                            <div class="d-flex align-items-center gap-1">
                                <a href="#" class="btn-act btn-view" title="View Profile"><i class="mdi mdi-eye-outline"></i></a>
                                <a href="#" class="btn-act btn-msg"  title="Message"><i class="mdi mdi-message-outline"></i></a>
                                <a href="#" class="btn-act btn-edit" title="Edit"><i class="mdi mdi-pencil-outline"></i></a>
                                <button class="btn-act btn-del delete-btn" data-id="4" title="Remove"><i class="mdi mdi-trash-can-outline"></i></button>
                            </div>
                        </td>
                    </tr>

                    <!-- Row 5 -->
                    <tr>
                        <td style="color:var(--text-muted);font-size:.75rem;">5</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="avatar-sm" style="background:#FEF3C7;color:#F59E0B;">PM</div>
                                <div>
                                    <div style="font-weight:700;font-size:.84rem;">Priya Mehta</div>
                                    <div style="font-size:.72rem;color:var(--text-muted);">priya.mehta@email.com</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div style="font-size:.82rem;font-weight:600;">Preschool Teacher</div>
                            <div style="font-size:.72rem;color:var(--text-muted);">NTT Certificate</div>
                        </td>
                        <td><span style="font-size:.78rem;color:var(--text-muted);display:flex;align-items:center;gap:.25rem;"><i class="mdi mdi-map-marker-outline" style="color:var(--danger);"></i>Delhi</span></td>
                        <td><span class="exp-badge"><i class="mdi mdi-briefcase-outline me-1"></i>1 yr</span></td>
                        <td><span class="pill pill-fulltime"><i class="mdi mdi-clock-outline"></i>Full Time</span></td>
                        <td>
                            <div class="star-rating">★★★☆☆<span>3.8</span></div>
                        </td>
                        <td><span class="pill pill-pending"><i class="mdi mdi-clock-alert-outline"></i>Pending</span></td>
                        <td><span class="pill pill-active"><i class="mdi mdi-check-circle-outline"></i>Active</span></td>
                        <td style="font-size:.77rem;color:var(--text-muted);white-space:nowrap;"><i class="mdi mdi-calendar-outline me-1"></i>11 Mar 2026</td>
                        <td>
                            <div class="d-flex align-items-center gap-1">
                                <a href="#" class="btn-act btn-view" title="View Profile"><i class="mdi mdi-eye-outline"></i></a>
                                <a href="#" class="btn-act btn-msg"  title="Message"><i class="mdi mdi-message-outline"></i></a>
                                <a href="#" class="btn-act btn-edit" title="Edit"><i class="mdi mdi-pencil-outline"></i></a>
                                <button class="btn-act btn-del delete-btn" data-id="5" title="Remove"><i class="mdi mdi-trash-can-outline"></i></button>
                            </div>
                        </td>
                    </tr>

                    <!-- Row 6 -->
                    <tr>
                        <td style="color:var(--text-muted);font-size:.75rem;">6</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="avatar-sm" style="background:#EEF1FE;color:#4F6EF7;">SK</div>
                                <div>
                                    <div style="font-weight:700;font-size:.84rem;">Sunita Kaur</div>
                                    <div style="font-size:.72rem;color:var(--text-muted);">sunita.kaur@email.com</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div style="font-size:.82rem;font-weight:600;">Daycare Assistant</div>
                            <div style="font-size:.72rem;color:var(--text-muted);">Special Needs Education</div>
                        </td>
                        <td><span style="font-size:.78rem;color:var(--text-muted);display:flex;align-items:center;gap:.25rem;"><i class="mdi mdi-map-marker-outline" style="color:var(--danger);"></i>Noida</span></td>
                        <td><span class="exp-badge"><i class="mdi mdi-briefcase-outline me-1"></i>6 yrs</span></td>
                        <td><span class="pill pill-parttime"><i class="mdi mdi-clock-outline"></i>Part Time</span></td>
                        <td>
                            <div class="star-rating">★★★★★<span>4.9</span></div>
                        </td>
                        <td><span class="pill pill-verified"><i class="mdi mdi-shield-check-outline"></i>Verified</span></td>
                        <td><span class="pill pill-available"><i class="mdi mdi-account-search-outline"></i>Available</span></td>
                        <td style="font-size:.77rem;color:var(--text-muted);white-space:nowrap;"><i class="mdi mdi-calendar-outline me-1"></i>10 Mar 2026</td>
                        <td>
                            <div class="d-flex align-items-center gap-1">
                                <a href="#" class="btn-act btn-view" title="View Profile"><i class="mdi mdi-eye-outline"></i></a>
                                <a href="#" class="btn-act btn-msg"  title="Message"><i class="mdi mdi-message-outline"></i></a>
                                <a href="#" class="btn-act btn-edit" title="Edit"><i class="mdi mdi-pencil-outline"></i></a>
                                <button class="btn-act btn-del delete-btn" data-id="6" title="Remove"><i class="mdi mdi-trash-can-outline"></i></button>
                            </div>
                        </td>
                    </tr>

                    <!-- Row 7 -->
                    <tr>
                        <td style="color:var(--text-muted);font-size:.75rem;">7</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="avatar-sm" style="background:#CFFAFE;color:#06B6D4;">VD</div>
                                <div>
                                    <div style="font-weight:700;font-size:.84rem;">Vikram Das</div>
                                    <div style="font-size:.72rem;color:var(--text-muted);">vikram.das@email.com</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div style="font-size:.82rem;font-weight:600;">Nursery Teacher</div>
                            <div style="font-size:.72rem;color:var(--text-muted);">Early Childhood Education</div>
                        </td>
                        <td><span style="font-size:.78rem;color:var(--text-muted);display:flex;align-items:center;gap:.25rem;"><i class="mdi mdi-map-marker-outline" style="color:var(--danger);"></i>Gurgaon</span></td>
                        <td><span class="exp-badge"><i class="mdi mdi-briefcase-outline me-1"></i>2 yrs</span></td>
                        <td><span class="pill pill-contract"><i class="mdi mdi-clock-outline"></i>Contract</span></td>
                        <td>
                            <div class="star-rating">★★★★☆<span>4.1</span></div>
                        </td>
                        <td><span class="pill pill-pending"><i class="mdi mdi-clock-alert-outline"></i>Pending</span></td>
                        <td><span class="pill pill-active"><i class="mdi mdi-check-circle-outline"></i>Active</span></td>
                        <td style="font-size:.77rem;color:var(--text-muted);white-space:nowrap;"><i class="mdi mdi-calendar-outline me-1"></i>09 Mar 2026</td>
                        <td>
                            <div class="d-flex align-items-center gap-1">
                                <a href="#" class="btn-act btn-view" title="View Profile"><i class="mdi mdi-eye-outline"></i></a>
                                <a href="#" class="btn-act btn-msg"  title="Message"><i class="mdi mdi-message-outline"></i></a>
                                <a href="#" class="btn-act btn-edit" title="Edit"><i class="mdi mdi-pencil-outline"></i></a>
                                <button class="btn-act btn-del delete-btn" data-id="7" title="Remove"><i class="mdi mdi-trash-can-outline"></i></button>
                            </div>
                        </td>
                    </tr>

                    <!-- Row 8 -->
                    <tr>
                        <td style="color:var(--text-muted);font-size:.75rem;">8</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="avatar-sm" style="background:#DCFCE7;color:#22C55E;">AG</div>
                                <div>
                                    <div style="font-weight:700;font-size:.84rem;">Anita Gupta</div>
                                    <div style="font-size:.72rem;color:var(--text-muted);">anita.gupta@email.com</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div style="font-size:.82rem;font-weight:600;">Childcare Coordinator</div>
                            <div style="font-size:.72rem;color:var(--text-muted);">B.Ed + M.Ed</div>
                        </td>
                        <td><span style="font-size:.78rem;color:var(--text-muted);display:flex;align-items:center;gap:.25rem;"><i class="mdi mdi-map-marker-outline" style="color:var(--danger);"></i>Faridabad</span></td>
                        <td><span class="exp-badge"><i class="mdi mdi-briefcase-outline me-1"></i>7 yrs</span></td>
                        <td><span class="pill pill-fulltime"><i class="mdi mdi-clock-outline"></i>Full Time</span></td>
                        <td>
                            <div class="star-rating">★★★★★<span>5.0</span></div>
                        </td>
                        <td><span class="pill pill-verified"><i class="mdi mdi-shield-check-outline"></i>Verified</span></td>
                        <td><span class="pill pill-hired"><i class="mdi mdi-briefcase-check-outline"></i>Hired</span></td>
                        <td style="font-size:.77rem;color:var(--text-muted);white-space:nowrap;"><i class="mdi mdi-calendar-outline me-1"></i>08 Mar 2026</td>
                        <td>
                            <div class="d-flex align-items-center gap-1">
                                <a href="#" class="btn-act btn-view" title="View Profile"><i class="mdi mdi-eye-outline"></i></a>
                                <a href="#" class="btn-act btn-msg"  title="Message"><i class="mdi mdi-message-outline"></i></a>
                                <a href="#" class="btn-act btn-edit" title="Edit"><i class="mdi mdi-pencil-outline"></i></a>
                                <button class="btn-act btn-del delete-btn" data-id="8" title="Remove"><i class="mdi mdi-trash-can-outline"></i></button>
                            </div>
                        </td>
                    </tr>

                    <!-- Row 9 -->
                    <tr>
                        <td style="color:var(--text-muted);font-size:.75rem;">9</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="avatar-sm" style="background:#FEE2E2;color:#EF4444;">KJ</div>
                                <div>
                                    <div style="font-weight:700;font-size:.84rem;">Kavita Joshi</div>
                                    <div style="font-size:.72rem;color:var(--text-muted);">kavita.joshi@email.com</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div style="font-size:.82rem;font-weight:600;">Senior Nursery Teacher</div>
                            <div style="font-size:.72rem;color:var(--text-muted);">Waldorf Certified</div>
                        </td>
                        <td><span style="font-size:.78rem;color:var(--text-muted);display:flex;align-items:center;gap:.25rem;"><i class="mdi mdi-map-marker-outline" style="color:var(--danger);"></i>Delhi</span></td>
                        <td><span class="exp-badge"><i class="mdi mdi-briefcase-outline me-1"></i>9 yrs</span></td>
                        <td><span class="pill pill-fulltime"><i class="mdi mdi-clock-outline"></i>Full Time</span></td>
                        <td>
                            <div class="star-rating">★★★★★<span>4.7</span></div>
                        </td>
                        <td><span class="pill pill-verified"><i class="mdi mdi-shield-check-outline"></i>Verified</span></td>
                        <td><span class="pill pill-inactive"><i class="mdi mdi-minus-circle-outline"></i>Inactive</span></td>
                        <td style="font-size:.77rem;color:var(--text-muted);white-space:nowrap;"><i class="mdi mdi-calendar-outline me-1"></i>05 Feb 2026</td>
                        <td>
                            <div class="d-flex align-items-center gap-1">
                                <a href="#" class="btn-act btn-view" title="View Profile"><i class="mdi mdi-eye-outline"></i></a>
                                <a href="#" class="btn-act btn-msg"  title="Message"><i class="mdi mdi-message-outline"></i></a>
                                <a href="#" class="btn-act btn-edit" title="Edit"><i class="mdi mdi-pencil-outline"></i></a>
                                <button class="btn-act btn-del delete-btn" data-id="9" title="Remove"><i class="mdi mdi-trash-can-outline"></i></button>
                            </div>
                        </td>
                    </tr>

                    <!-- Row 10 -->
                    <tr>
                        <td style="color:var(--text-muted);font-size:.75rem;">10</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="avatar-sm" style="background:#EDE9FE;color:#8B5CF6;">MT</div>
                                <div>
                                    <div style="font-weight:700;font-size:.84rem;">Mohan Trivedi</div>
                                    <div style="font-size:.72rem;color:var(--text-muted);">mohan.trivedi@email.com</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div style="font-size:.82rem;font-weight:600;">Activity Coordinator</div>
                            <div style="font-size:.72rem;color:var(--text-muted);">Sports & Arts Specialist</div>
                        </td>
                        <td><span style="font-size:.78rem;color:var(--text-muted);display:flex;align-items:center;gap:.25rem;"><i class="mdi mdi-map-marker-outline" style="color:var(--danger);"></i>Noida</span></td>
                        <td><span class="exp-badge"><i class="mdi mdi-briefcase-outline me-1"></i>4 yrs</span></td>
                        <td><span class="pill pill-parttime"><i class="mdi mdi-clock-outline"></i>Part Time</span></td>
                        <td>
                            <div class="star-rating">★★★★☆<span>4.3</span></div>
                        </td>
                        <td><span class="pill pill-verified"><i class="mdi mdi-shield-check-outline"></i>Verified</span></td>
                        <td><span class="pill pill-available"><i class="mdi mdi-account-search-outline"></i>Available</span></td>
                        <td style="font-size:.77rem;color:var(--text-muted);white-space:nowrap;"><i class="mdi mdi-calendar-outline me-1"></i>18 Jan 2026</td>
                        <td>
                            <div class="d-flex align-items-center gap-1">
                                <a href="#" class="btn-act btn-view" title="View Profile"><i class="mdi mdi-eye-outline"></i></a>
                                <a href="#" class="btn-act btn-msg"  title="Message"><i class="mdi mdi-message-outline"></i></a>
                                <a href="#" class="btn-act btn-edit" title="Edit"><i class="mdi mdi-pencil-outline"></i></a>
                                <button class="btn-act btn-del delete-btn" data-id="10" title="Remove"><i class="mdi mdi-trash-can-outline"></i></button>
                            </div>
                        </td>
                    </tr>

                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        <div class="px-4 py-3 border-top d-flex align-items-center justify-content-between flex-wrap gap-2"
            style="border-color:var(--border)!important;">
            <span style="font-size:.78rem;color:var(--text-muted);">Showing 1–10 of 38 educators</span>
            <nav>
                <ul class="pagination pagination-sm mb-0" style="gap:.25rem;">
                    <li class="page-item disabled">
                        <a class="page-link" style="border-radius:var(--radius-sm);border-color:var(--border);">«</a>
                    </li>
                    <li class="page-item active">
                        <a class="page-link" style="border-radius:var(--radius-sm);background:var(--primary);border-color:var(--primary);">1</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" style="border-radius:var(--radius-sm);border-color:var(--border);color:var(--text-secondary);">2</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" style="border-radius:var(--radius-sm);border-color:var(--border);color:var(--text-secondary);">3</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" style="border-radius:var(--radius-sm);border-color:var(--border);color:var(--text-secondary);">»</a>
                    </li>
                </ul>
            </nav>
        </div>

    </div>
    {{-- end table card --}}

</div>

<script>
$(document).on('click', '.delete-btn', function () {
    let id = $(this).data('id');
    Swal.fire({
        title: 'Remove Educator?',
        text: "This educator will be permanently removed from the platform.",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#EF4444',
        cancelButtonColor: '#64748B',
        confirmButtonText: 'Yes, remove!',
        cancelButtonText: 'Cancel',
    }).then((result) => {
        if (result.isConfirmed) {
            // wire up delete route here
        }
    });
});
</script>

@endsection