@extends('layouts.app')

@section('title', 'Applications List')

@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;
        --dark:           #1E293B;
        --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; }

    /* ── Status Count 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: 34px; height: 34px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: .68rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    /* ── Status 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: .75rem; }
    .pill-new        { background: var(--info-light);    color: var(--info); }
    .pill-review     { background: var(--purple-light);  color: var(--purple); }
    .pill-shortlist  { background: var(--warning-light); color: var(--warning); }
    .pill-hired      { background: var(--success-light); color: var(--success); }
    .pill-rejected   { background: var(--danger-light);  color: var(--danger); }
    .pill-withdrawn  { background: #F1F5F9;               color: #64748B; }

    /* ── 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;
    }
    .btn-act:hover { opacity: .85; 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); }

    /* ── Job Title Cell ── */
    .job-title-cell strong { font-size: .84rem; color: var(--text-primary); }
    .job-title-cell small  { font-size: .73rem; color: var(--text-muted); }

    /* ── 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; }
    .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-clipboard-text-multiple-outline me-2" style="color:var(--primary);"></i>Applications</h3>
            <p>Track and manage all candidate applications across your job postings</p>
        </div>
        <a href="{{ route('principal.create.job') }}" 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-plus"></i> Post New Job
        </a>
    </div>

    {{-- ── Status Count 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-clipboard-list-outline"></i></div>
                <div class="stat-info">
                    <div class="stat-val">84</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:#06B6D4; --icon-bg:#CFFAFE;">
                <div class="stat-icon"><i class="mdi mdi-email-open-outline"></i></div>
                <div class="stat-info">
                    <div class="stat-val">18</div>
                    <div class="stat-lbl">New</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-eye-outline"></i></div>
                <div class="stat-info">
                    <div class="stat-val">21</div>
                    <div class="stat-lbl">In Review</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-star-outline"></i></div>
                <div class="stat-info">
                    <div class="stat-val">27</div>
                    <div class="stat-lbl">Shortlisted</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">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:#EF4444; --icon-bg:#FEE2E2;">
                <div class="stat-icon"><i class="mdi mdi-account-remove-outline"></i></div>
                <div class="stat-info">
                    <div class="stat-val">9</div>
                    <div class="stat-lbl">Rejected</div>
                </div>
            </div>
        </div>

    </div>

    {{-- ── Filters ── --}}
    <div class="filter-card">
        <form method="GET" action="{{ route('principal.my.jobs') }}">
            <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="Candidate or job title..." value="{{ request('search') }}"
                            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="new"        {{ request('status') == 'new'        ? 'selected' : '' }}>New</option>
                        <option value="in_review"  {{ request('status') == 'in_review'  ? 'selected' : '' }}>In Review</option>
                        <option value="shortlisted"{{ request('status') == 'shortlisted'? 'selected' : '' }}>Shortlisted</option>
                        <option value="hired"      {{ request('status') == 'hired'      ? 'selected' : '' }}>Hired</option>
                        <option value="rejected"   {{ request('status') == 'rejected'   ? 'selected' : '' }}>Rejected</option>
                        <option value="withdrawn"  {{ request('status') == 'withdrawn'  ? 'selected' : '' }}>Withdrawn</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"  {{ request('job_type') == 'full_time'  ? 'selected' : '' }}>Full Time</option>
                        <option value="part_time"  {{ request('job_type') == 'part_time'  ? 'selected' : '' }}>Part Time</option>
                        <option value="contract"   {{ request('job_type') == 'contract'   ? 'selected' : '' }}>Contract</option>
                        <option value="internship" {{ request('job_type') == 'internship' ? 'selected' : '' }}>Internship</option>
                        <option value="freelance"  {{ request('job_type') == 'freelance'  ? 'selected' : '' }}>Freelance</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;">Date From</label>
                    <input type="date" name="date_from" class="form-control form-control-sm"
                        value="{{ request('date_from') }}" style="border-color:var(--border);">
                </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;">Date To</label>
                    <input type="date" name="date_to" class="form-control form-control-sm"
                        value="{{ request('date_to') }}" style="border-color:var(--border);">
                </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="{{ route('principal.my.jobs') }}" 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>

    {{-- ── Applications 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 Applications
            </h5>
            <span class="total-badge">8 total</span>
        </div>

        <div class="table-responsive">
            <table class="table dash-table mb-0">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Candidate</th>
                        <th>Applied For</th>
                        <th>Centre</th>
                        <th>Location</th>
                        <th>Job Type</th>
                        <th>Status</th>
                        <th>Applied On</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 class="job-title-cell">
                                    <strong>Riya Sharma</strong><br>
                                    <small>3 yrs exp · B.Ed Graduate</small>
                                </div>
                            </div>
                        </td>
                        <td style="font-size:.82rem;font-weight:600;">Preschool Teacher</td>
                        <td style="font-size:.8rem;color:var(--text-muted);"><i class="mdi mdi-domain me-1"></i>Sunshine Kids Centre</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="pill pill-review"><i class="mdi mdi-briefcase-outline"></i>Full Time</span></td>
                        <td><span class="pill pill-new"><i class="mdi mdi-email-open-outline"></i>New</span></td>
                        <td style="font-size:.77rem;color:var(--text-muted);white-space:nowrap;"><i class="mdi mdi-calendar-outline me-1"></i>15 Mar 2026</td>
                        <td>
                            <div class="d-flex align-items-center gap-1">
                                <a href="#" class="btn-act btn-view" title="View"><i class="mdi mdi-eye-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="Delete"><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 class="job-title-cell">
                                    <strong>Amit Kumar</strong><br>
                                    <small>2 yrs exp · Childcare Cert.</small>
                                </div>
                            </div>
                        </td>
                        <td style="font-size:.82rem;font-weight:600;">Daycare Assistant</td>
                        <td style="font-size:.8rem;color:var(--text-muted);"><i class="mdi mdi-domain me-1"></i>Little Stars Daycare</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="pill pill-review"><i class="mdi mdi-briefcase-outline"></i>Part Time</span></td>
                        <td><span class="pill pill-review"><i class="mdi mdi-eye-outline"></i>In Review</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"><i class="mdi mdi-eye-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="Delete"><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 class="job-title-cell">
                                    <strong>Neha Verma</strong><br>
                                    <small>5 yrs exp · Montessori Trained</small>
                                </div>
                            </div>
                        </td>
                        <td style="font-size:.82rem;font-weight:600;">Nursery Teacher</td>
                        <td style="font-size:.8rem;color:var(--text-muted);"><i class="mdi mdi-domain me-1"></i>Happy Tots Academy</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="pill pill-review"><i class="mdi mdi-briefcase-outline"></i>Full Time</span></td>
                        <td><span class="pill pill-shortlist"><i class="mdi mdi-star-outline"></i>Shortlisted</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"><i class="mdi mdi-eye-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="Delete"><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;">RN</div>
                                <div class="job-title-cell">
                                    <strong>Rahul Singh</strong><br>
                                    <small>4 yrs exp · Child Psychology</small>
                                </div>
                            </div>
                        </td>
                        <td style="font-size:.82rem;font-weight:600;">Childcare Coordinator</td>
                        <td style="font-size:.8rem;color:var(--text-muted);"><i class="mdi mdi-domain me-1"></i>Sunshine Kids Centre</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="pill pill-review"><i class="mdi mdi-briefcase-outline"></i>Contract</span></td>
                        <td><span class="pill pill-hired"><i class="mdi mdi-account-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"><i class="mdi mdi-eye-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="Delete"><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 class="job-title-cell">
                                    <strong>Priya Mehta</strong><br>
                                    <small>1 yr exp · Nursery NTT Cert.</small>
                                </div>
                            </div>
                        </td>
                        <td style="font-size:.82rem;font-weight:600;">Preschool Teacher</td>
                        <td style="font-size:.8rem;color:var(--text-muted);"><i class="mdi mdi-domain me-1"></i>Little Stars Daycare</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="pill pill-review"><i class="mdi mdi-briefcase-outline"></i>Full Time</span></td>
                        <td><span class="pill pill-rejected"><i class="mdi mdi-account-remove-outline"></i>Rejected</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"><i class="mdi mdi-eye-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="Delete"><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 class="job-title-cell">
                                    <strong>Sunita Kaur</strong><br>
                                    <small>6 yrs exp · Special Needs Edu.</small>
                                </div>
                            </div>
                        </td>
                        <td style="font-size:.82rem;font-weight:600;">Daycare Assistant</td>
                        <td style="font-size:.8rem;color:var(--text-muted);"><i class="mdi mdi-domain me-1"></i>Happy Tots Academy</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="pill pill-review"><i class="mdi mdi-briefcase-outline"></i>Part Time</span></td>
                        <td><span class="pill pill-shortlist"><i class="mdi mdi-star-outline"></i>Shortlisted</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"><i class="mdi mdi-eye-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="Delete"><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 class="job-title-cell">
                                    <strong>Vikram Das</strong><br>
                                    <small>2 yrs exp · Early Childhood Ed.</small>
                                </div>
                            </div>
                        </td>
                        <td style="font-size:.82rem;font-weight:600;">Nursery Teacher</td>
                        <td style="font-size:.8rem;color:var(--text-muted);"><i class="mdi mdi-domain me-1"></i>Sunshine Kids Centre</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="pill pill-review"><i class="mdi mdi-briefcase-outline"></i>Internship</span></td>
                        <td><span class="pill pill-review"><i class="mdi mdi-eye-outline"></i>In Review</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"><i class="mdi mdi-eye-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="Delete"><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 class="job-title-cell">
                                    <strong>Anita Gupta</strong><br>
                                    <small>7 yrs exp · B.Ed + M.Ed</small>
                                </div>
                            </div>
                        </td>
                        <td style="font-size:.82rem;font-weight:600;">Childcare Coordinator</td>
                        <td style="font-size:.8rem;color:var(--text-muted);"><i class="mdi mdi-domain me-1"></i>Little Stars Daycare</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="pill pill-review"><i class="mdi mdi-briefcase-outline"></i>Full Time</span></td>
                        <td><span class="pill pill-hired"><i class="mdi mdi-account-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"><i class="mdi mdi-eye-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="Delete"><i class="mdi mdi-trash-can-outline"></i></button>
                            </div>
                        </td>
                    </tr>

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

        {{-- Static Pagination placeholder --}}
        <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–8 of 8 applications</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 disabled"><a class="page-link" style="border-radius:var(--radius-sm);border-color:var(--border);">»</a></li>
                </ul>
            </nav>
        </div>
    </div>

</div>

<script>
$(document).on('click', '.delete-btn', function () {
    let jobId = $(this).data('id');
    Swal.fire({
        title: 'Delete Application?',
        text: "This application will be permanently removed.",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#EF4444',
        cancelButtonColor: '#64748B',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'Cancel',
    }).then((result) => {
        if (result.isConfirmed) {
            document.getElementById('delete-form-' + jobId).submit();
        }
    });
});
</script>

@endsection