@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    @php
        $activeFiltersCount = collect([
            request('interviewer_staff_id'),
            request('recruitment_job_title_id'),
            request('date_from'),
            request('date_to'),
        ])->filter(fn ($value) => filled($value))->count();
    @endphp

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Recruitment Statistics"
                    description="Track real-time applicant pipeline counts across staff, teachers, and testers.">
                    @if ($activeFiltersCount > 0)
                        <span class="ui-pill ui-pill--warn">
                            {{ $activeFiltersCount }} Active Filter(s)
                        </span>
                    @endif
                </x-page-title>

                <div class="ui-card recruitment-filters-card mb-3">
                    <div class="ui-card__header">
                        <div class="recruitment-filters-head">
                            <div>
                                <div class="recruitment-filters-head__title">Filters</div>
                                <div class="recruitment-filters-head__sub">
                                    @if ($canFilterByInterviewer)
                                        Filter the dashboard by recruiter/interviewer and by the job title being handled.
                                    @else
                                        Filter the dashboard by the job titles you are currently handling.
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="p-3">
                        <form method="GET" action="{{ route('recuirements.index') }}" class="recruitment-filter-form" id="recruitment-filter-form">
                            @if ($canFilterByInterviewer)
                                <div class="recruitment-filter-field">
                                    <label for="interviewer_staff_id" class="form-label">Recruiter / Interviewer</label>
                                    <select name="interviewer_staff_id" id="interviewer_staff_id" class="form-select select2">
                                        <option value="">All Interviewers</option>
                                        @foreach ($interviewerOptions as $staffOption)
                                            <option value="{{ $staffOption['id'] }}"
                                                {{ (string) request('interviewer_staff_id') === (string) $staffOption['id'] ? 'selected' : '' }}>
                                                {{ $staffOption['name'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            @endif

                            <div class="recruitment-filter-field">
                                <label for="recruitment_job_title_id" class="form-label">Interview Job Title</label>
                                <select name="recruitment_job_title_id" id="recruitment_job_title_id" class="form-select select2">
                                    <option value="">All Job Titles</option>
                                    @foreach ($recruitmentJobTitleOptions as $jobTitleOption)
                                        <option value="{{ $jobTitleOption['id'] }}"
                                            {{ (string) request('recruitment_job_title_id') === (string) $jobTitleOption['id'] ? 'selected' : '' }}>
                                            {{ $jobTitleOption['name'] }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="recruitment-filter-field">
                                <label for="date_from" class="form-label">Date From</label>
                                <input type="date" name="date_from" id="date_from" class="form-control" value="{{ request('date_from') }}">
                            </div>

                            <div class="recruitment-filter-field">
                                <label for="date_to" class="form-label">Date To</label>
                                <input type="date" name="date_to" id="date_to" class="form-control" value="{{ request('date_to') }}">
                            </div>

                            <div class="recruitment-filter-field recruitment-filter-actions">
                                <button type="button" class="asset-btn asset-btn--primary" onclick="applyFiltersAndFetch()">
                                    Apply Filters
                                </button>

                                <a href="{{ route('recuirements.index') }}" class="asset-btn asset-btn--secondary">
                                    Reset
                                </a>
                            </div>

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

                <div class="ui-card ui-card--table">
                    <div class="px-3 pt-3 pb-2 d-flex justify-content-between align-items-center flex-wrap">
                        <div class="text-muted small">
                            Format: <strong>Total Applicants / Applicants In This Stage</strong>
                        </div>
                        <div class="d-flex gap-2 flex-wrap">
                            <div class="recruitment-total-count" id="total-hiring-count">
                                <span class="recruitment-total-label">Total Applicants:</span>
                                <span class="recruitment-total-value" id="total-hiring-value">-</span>
                            </div>
                            <div class="recruitment-total-count" style="border-color: #10b981;" id="total-hired-count">
                                <span class="recruitment-total-label" style="color: #059669;">Total Hired:</span>
                                <span class="recruitment-total-value" style="color: #10b981;" id="total-hired-value">-</span>
                            </div>
                        </div>
                    </div>

                    <div class="recruitment-stats-body" id="applicants-stats">
                        <div class="stats-loading-state">
                            <div class="stats-loading-state__spinner"></div>
                            <p class="stats-loading-state__text">Loading applicants statistics...</p>
                        </div>
                    </div>
                </div>

                <div class="mt-3 ui-card ui-card--table stage-applicants-panel d-none" id="stage-applicants-panel">
                    <div class="ui-card__header">
                        <div class="stage-panel-head">
                            <div>
                                <div class="stage-panel-head__title" id="stage-applicants-title">Stage Applicants</div>
                                <div class="stage-panel-head__sub" id="stage-applicants-subtitle">Applicants matching the selected stage.</div>
                            </div>
                            <button type="button" class="asset-btn asset-btn--secondary" id="stage-applicants-close">
                                Close
                            </button>
                        </div>
                    </div>

                    <div class="p-3" id="stage-applicants-content">
                        <div class="stats-loading-state">
                            <div class="stats-loading-state__spinner"></div>
                            <p class="stats-loading-state__text">Loading stage applicants...</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .recruitment-stats-body {
            min-height: 220px;
        }

        .recruitment-filters-card {
            border: 1px solid #e5e7eb;
        }

        .recruitment-filters-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .recruitment-filters-head__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.2rem;
        }

        .recruitment-filters-head__sub {
            color: #6b7280;
            font-size: 0.9rem;
        }

        .recruitment-filter-form {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            align-items: end;
        }

        .recruitment-filter-actions {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .recruitment-filter-actions .asset-btn {
            flex: 1;
        }

        .recruitment-total-count {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: #f8fafc;
            border-radius: 8px;
            border: 1px solid #e5e7eb;
        }

        .recruitment-total-label {
            font-weight: 700;
            color: #374151;
            font-size: 0.9rem;
        }

        .recruitment-total-value {
            font-weight: 700;
            color: #2563eb;
            font-size: 1.1rem;
        }

        

        .recruitment-filter-field .form-label {
            font-weight: 700;
            color: #374151;
            margin-bottom: 0.45rem;
        }
        .selection{
            width: 100% !important;
        }

        .stats-loading-state,
        .stats-empty-state,
        .stats-error-state {
            min-height: 220px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 2rem 1rem;
        }

        .stats-loading-state__spinner {
            width: 42px;
            height: 42px;
            border: 3px solid #e5e7eb;
            border-top-color: #2563eb;
            border-radius: 999px;
            animation: recruitment-spin 0.8s linear infinite;
            margin-bottom: 0.9rem;
        }

        @keyframes recruitment-spin {
            to {
                transform: rotate(360deg);
            }
        }

        .stats-loading-state__text,
        .stats-empty-state__text,
        .stats-error-state__text {
            color: #6b7280;
            margin: 0;
        }

        .recruitment-section {
            margin-bottom: 1rem;
        }

        .recruitment-section:last-child {
            margin-bottom: 0;
        }

        .recruitment-section__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.75rem;
            padding-left: 17px !important;
        }

        .recruitment-table-wrap {
            border: 1px solid #eef2f7 !important;
            margin: 10px !important;
            border-radius: 18px;
            overflow: hidden;
            background: #fff;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch;
        }

        .recruitment-table {
            width: 100%;
            margin: 0;
        }

        .recruitment-table thead th {
            background: #f8fafc;
            color: #374151;
            font-size: 0.88rem;
            font-weight: 700;
            text-align: center;
            white-space: nowrap;
            border-bottom: 1px solid #e5e7eb;
            padding: 0.9rem 0.75rem;
        }

        .recruitment-table tbody td {
            text-align: center;
            vertical-align: middle;
            padding: 0.9rem 0.75rem;
            border-top: 1px solid #f1f5f9;
        }

        .recruitment-stage-trigger {
            appearance: none;
            border: 0;
            background: transparent;
            color: inherit;
            font: inherit;
            font-weight: 700;
            cursor: pointer;
            padding: 0;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .recruitment-stage-trigger:hover {
            color: #2563eb;
        }

        .recruitment-position {
            font-weight: 700;
            color: #111827;
        }

        .recruitment-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 72px;
            padding: 0.45rem 0.8rem;
            border-radius: 999px;
            font-size: 0.9rem;
            font-weight: 700;
            line-height: 1;
            color: #fff;
        }

        .recruitment-pill--danger {
            background: #dc3545;
        }

        .recruitment-pill--warn {
            background: #f59e0b;
            color: #111827;
        }

        .recruitment-pill--info {
            background: #0ea5e9;
        }

        .recruitment-pill--primary {
            background: #2563eb;
        }

        .recruitment-pill--success {
            background: #16a34a;
        }

        .recruitment-pill--pink {
            background: #e57373;
        }

        .recruitment-pill--purple {
            background: #9b59b6;
        }

        .recruitment-stage-pill {
            cursor: pointer;
            border: 0;
        }

        .stage-panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .stage-panel-head__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.2rem;
        }

        .stage-panel-head__sub {
            color: #6b7280;
            font-size: 0.9rem;
        }

        .stage-applicants-table {
            width: 100%;
            border-collapse: collapse;
        }

        .stage-applicants-table th,
        .stage-applicants-table td {
            padding: 0.85rem 0.75rem;
            border-top: 1px solid #e5e7eb;
            text-align: center;
            vertical-align: middle;
        }

        .stage-applicants-table thead th {
            border-top: 0;
            background: #f8fafc;
            color: #374151;
            font-size: 0.85rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .stage-applicant-name {
            font-weight: 700;
            color: #111827;
        }

        .stage-applicant-meta {
            color: #6b7280;
            font-size: 0.85rem;
        }

        .stage-status-stack {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .stage-status-chip {
            display: inline-flex;
            align-items: center;
            padding: 0.35rem 0.65rem;
            border-radius: 999px;
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            color: #374151;
            font-size: 0.78rem;
            font-weight: 700;
        }

        .stage-pagination {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 1rem;
            border-top: 1px solid #e5e7eb;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .stage-pagination__info {
            color: #6b7280;
            font-size: 0.85rem;
        }

        .stage-pagination__pages {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .stage-page-btn {
            min-width: 34px;
            height: 34px;
            padding: 0 0.5rem;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #374151;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
        }

        .stage-page-btn:hover:not(:disabled) {
            background: #f1f5f9;
            border-color: #2563eb;
            color: #2563eb;
        }

        .stage-page-btn.active {
            background: #2563eb;
            border-color: #2563eb;
            color: #fff;
        }

        .stage-page-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .stage-page-dots {
            padding: 0 0.25rem;
            color: #9ca3af;
            font-size: 0.85rem;
        }

        @media (max-width: 1199.98px) {
            .recruitment-filter-form {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 767.98px) {
            .recruitment-filter-form {
                grid-template-columns: 1fr;
            }
            
            .recruitment-total-count {
                flex-direction: column;
                text-align: center;
            }

            .recruitment-filter-actions {
                flex-direction: column;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        function applyFiltersAndFetch() {
            
            const dateFrom = $('#date_from').val();
            const dateTo = $('#date_to').val();
            
            // Validate dates
            if (dateFrom && dateTo && dateFrom > dateTo) {
                alert('Date From cannot be greater than Date To');
                return;
            }
            
            fetchApplicantsStats();
        }

        document.addEventListener('DOMContentLoaded', function () {
            
            if ($.fn.select2) {
                $('.select2').select2({
                    width: '100%'
                });
            }

            fetchApplicantsStats();

            const closeButton = document.getElementById('stage-applicants-close');
            if (closeButton) {
                closeButton.addEventListener('click', function () {
                    $('#stage-applicants-panel').addClass('d-none');
                });
            }
        });

        function renderLoadingState() {
            $('#applicants-stats').html(`
                <div class="stats-loading-state">
                    <div class="stats-loading-state__spinner"></div>
                    <p class="stats-loading-state__text">Loading applicants statistics...</p>
                </div>
            `);
        }

        function stagePillClass(key) {
            const map = {
                screening: 'danger',
                interviewing: 'warn',
                offering: 'info',
                hiring: 'success',
                phone_call_screening: 'warn',
                demo_session: 'info',
                induction: 'primary',
                training: 'primary',
                passed_induction: 'primary',
                passed_training: 'success',
                handling_to_supervisor: 'pink',
                final_interview_done: 'success',
                scheduling_team: 'purple'
            };

            return map[key] || 'primary';
        }

        function escapeHtml(value) {
            return String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        function formatStatus(value) {
            if (!value || value === 'N/A') {
                return 'N/A';
            }

            return String(value).replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase());
        }

        function renderStageApplicantsLoading(title, subtitle) {
            $('#stage-applicants-title').text(title);
            $('#stage-applicants-subtitle').text(subtitle);
            $('#stage-applicants-content').html(`
                <div class="stats-loading-state">
                    <div class="stats-loading-state__spinner"></div>
                    <p class="stats-loading-state__text">Loading stage applicants...</p>
                </div>
            `);
            $('#stage-applicants-panel').removeClass('d-none');
        }

        function renderStageApplicantsEmpty(title, subtitle) {
            $('#stage-applicants-title').text(title);
            $('#stage-applicants-subtitle').text(subtitle);
            $('#stage-applicants-content').html(`
                <div class="stats-empty-state">
                    <p class="stats-empty-state__text">No applicants found for this stage.</p>
                </div>
            `);
            $('#stage-applicants-panel').removeClass('d-none');
        }

        function renderStageApplicantsError(title, subtitle) {
            $('#stage-applicants-title').text(title);
            $('#stage-applicants-subtitle').text(subtitle);
            $('#stage-applicants-content').html(`
                <div class="stats-error-state">
                    <p class="stats-error-state__text">Failed to load applicants for this stage.</p>
                </div>
            `);
            $('#stage-applicants-panel').removeClass('d-none');
        }

        function fetchStageApplicants(sectionKey, sectionLabel, stageKey, stageLabel, page = 1) {
            const title = `${sectionLabel} - ${stageLabel}`;
            const subtitle = 'Applicants matching the selected stage and the current filters.';
            renderStageApplicantsLoading(title, subtitle);

            $.ajax({
                url: "{{ route('allApplicants.stageDetails') }}",
                method: "GET",
                data: {
                    section: sectionKey,
                    stage_key: stageKey,
                    interviewer_staff_id: $('#interviewer_staff_id').val(),
                    recruitment_job_title_id: $('#recruitment_job_title_id').val(),
                    date_from: $('#date_from').val(),
                    date_to: $('#date_to').val(),
                    page: page,
                    per_page: 10,
                },
                success: function (response) {
                    if (!response.success || !Array.isArray(response.data) || response.data.length === 0) {
                        renderStageApplicantsEmpty(title, subtitle);
                        return;
                    }

                    const rows = response.data.map(applicant => `
                        <tr>
                            <td>
                                <div class="stage-applicant-name">${escapeHtml(applicant.full_name)}</div>
                                <div class="stage-applicant-meta">${escapeHtml(applicant.email || 'N/A')}</div>
                            </td>
                            <td>${escapeHtml(applicant.request_code)}</td>
                            <td>${escapeHtml(applicant.job_title)}</td>
                            <td>${escapeHtml(applicant.assigned_to)}</td>
                            <td>${escapeHtml(applicant.contact_number || 'N/A')}</td>
                            <td>
                                <div class="stage-status-stack">
                                    <span class="stage-status-chip">Current: ${escapeHtml(formatStatus(applicant.current_status))}</span>
                                    <span class="stage-status-chip">Screening: ${escapeHtml(formatStatus(applicant.screening_status))}</span>
                                    <span class="stage-status-chip">Phone: ${escapeHtml(formatStatus(applicant.phone_call_status))}</span>
                                    <span class="stage-status-chip">Stage: ${escapeHtml(formatStatus(applicant.stage_status))}</span>
                                    <span class="stage-status-chip">Offer: ${escapeHtml(formatStatus(applicant.offer_status))}</span>
                                </div>
                            </td>
                            <td>
                                <a href="${escapeHtml(applicant.details_url)}" class="asset-btn asset-btn--secondary">Open</a>
                            </td>
                        </tr>
                    `).join('');

                    const pagination = response.pagination;
                    const paginationHtml = renderPagination(pagination, sectionKey, sectionLabel, stageKey, stageLabel);

                    $('#stage-applicants-title').text(title);
                    $('#stage-applicants-subtitle').text(`${pagination.total} applicant(s) matched the selected stage.`);
                    $('#stage-applicants-content').html(`
                        <div class="recruitment-table-wrap table-responsive">
                            <table class="stage-applicants-table">
                                <thead>
                                    <tr>
                                        <th>Applicant</th>
                                        <th>Request</th>
                                        <th>Job Title</th>
                                        <th>Assigned To</th>
                                        <th>Contact Number</th>
                                        <th>Status Snapshot</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    ${rows}
                                </tbody>
                            </table>
                        </div>
                        ${paginationHtml}
                    `);
                    $('#stage-applicants-panel').removeClass('d-none');
                    document.getElementById('stage-applicants-panel')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
                },
                error: function () {
                    renderStageApplicantsError(title, subtitle);
                }
            });
        }

        function renderPagination(pagination, sectionKey, sectionLabel, stageKey, stageLabel) {
            if (!pagination || pagination.last_page <= 1) return '';

            const { current_page, last_page, from, to, total } = pagination;

            let pages = '';
            const delta = 2;
            const left = current_page - delta;
            const right = current_page + delta;

            for (let i = 1; i <= last_page; i++) {
                if (i === 1 || i === last_page || (i >= left && i <= right)) {
                    pages += `
                        <button type="button"
                            class="stage-page-btn ${i === current_page ? 'active' : ''}"
                            onclick="fetchStageApplicants('${sectionKey}', '${sectionLabel}', '${stageKey}', '${stageLabel}', ${i})">
                            ${i}
                        </button>`;
                } else if (i === left - 1 || i === right + 1) {
                    pages += `<span class="stage-page-dots">...</span>`;
                }
            }

            return `
                <div class="stage-pagination">
                    <div class="stage-pagination__info">Showing ${from}–${to} of ${total}</div>
                    <div class="stage-pagination__pages">
                        <button type="button" class="stage-page-btn" ${current_page === 1 ? 'disabled' : ''}
                            onclick="fetchStageApplicants('${sectionKey}', '${sectionLabel}', '${stageKey}', '${stageLabel}', ${current_page - 1})">
                            &laquo;
                        </button>
                        ${pages}
                        <button type="button" class="stage-page-btn" ${current_page === last_page ? 'disabled' : ''}
                            onclick="fetchStageApplicants('${sectionKey}', '${sectionLabel}', '${stageKey}', '${stageLabel}', ${current_page + 1})">
                            &raquo;
                        </button>
                    </div>
                </div>
            `;
        }

        function renderSection(sectionKey, title, headers, rowLabel, stats, totalApplicants = 0) {
            const headerHtml = headers.map(header => `
                <th>
                    <button
                        type="button"
                        class="recruitment-stage-trigger"
                        onclick="fetchStageApplicants('${sectionKey}', '${rowLabel}', '${header.key}', '${header.label}')">
                        ${header.label}
                    </button>
                </th>
            `).join('');
            const cellsHtml = headers.map(header => {
                const value = Number(stats[header.key] ?? 0);
                const displayValue = header.singleValue ? value : `${totalApplicants}/${value}`;

                return `
                    <td>
                        <button
                            type="button"
                            class="recruitment-pill recruitment-pill--${stagePillClass(header.key)} recruitment-stage-pill"
                            onclick="fetchStageApplicants('${sectionKey}', '${rowLabel}', '${header.key}', '${header.label}')">
                            ${displayValue}
                        </button>
                    </td>
                `;
            }).join('');

            return `
                <div class="recruitment-section p-3">
                    <div class="recruitment-section__title">${title}</div>
                    <div class="recruitment-table-wrap table-responsive">
                        <table class="recruitment-table">
                            <thead>
                                <tr>
                                    <th>Position</th>
                                    ${headerHtml}
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="recruitment-position">${rowLabel}</td>
                                    ${cellsHtml}
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            `;
        }

        function fetchApplicantsStats() {
            renderLoadingState();

            const filterData = {
                interviewer_staff_id: $('#interviewer_staff_id').val(),
                recruitment_job_title_id: $('#recruitment_job_title_id').val(),
                date_from: $('#date_from').val(),
                date_to: $('#date_to').val(),
            };


            $.ajax({
                url: "{{ route('allApplicants') }}",
                method: "GET",
                data: filterData,
                success: function (response) {
                    
                    const container = $('#applicants-stats');
                    const sectionMeta = response.meta?.by_section || {};
                    let data = response.data || {};
                    
                    // Handle case where data is an empty array instead of object
                    if (Array.isArray(data)) {
                        data = {};
                    }
                                        
                    // Total = all applicants in the filtered period (or all if no date filter)
                    const totalApplicants = Number(response.meta?.total_applicants || 0);
                    $('#total-hiring-value').text(totalApplicants);
                    $('#total-hired-value').text(response.meta?.total_hired || 0);

                    if (!response.success || !data || Object.keys(data).length === 0) {
                        container.html(`
                            <div class="stats-empty-state">
                                <p class="stats-empty-state__text">No applicants data available.</p>
                            </div>
                        `);
                        return;
                    }

                    let html = '';

                    if (data.staff) {
                        html += renderSection(
                            'staff',
                            'Staff Pipeline',
                            [
                                { key: 'screening', label: 'Screening' },
                                { key: 'interviewing', label: 'Interviewing' },
                                { key: 'offering', label: 'Offering' },
                                { key: 'hiring', label: 'Hiring' }
                            ],
                            'Staff',
                            data.staff,
                            Number(sectionMeta.staff?.total_applicants || 0)
                        );
                    }

                    const teachingRoles = [
                        {
                            key: 'teacher',
                            title: 'Teacher Pipeline',
                            label: 'Teacher'
                        },
                        {
                            key: 'tester',
                            title: 'Tester Pipeline',
                            label: 'Tester'
                        }
                    ];

                    teachingRoles.forEach(role => {
                        if (data[role.key]) {
                            html += renderSection(
                                role.key,
                                role.title,
                                [
                                    { key: 'screening', label: 'Screening' },
                                    { key: 'phone_call_screening', label: 'Phone Call Screening' },
                                    { key: 'demo_session', label: 'Demo Session' },
                                    { key: 'induction', label: 'Induction' },
                                    { key: 'training', label: 'Training' },
                                    { key: 'final_interview_done', label: 'Final Interview' },
                                    { key: 'passed_induction', label: 'Passed Induction', singleValue: true },
                                    { key: 'passed_training', label: 'Passed Training', singleValue: true },
                                    { key: 'handling_to_supervisor', label: 'Handling to Supervisor' },
                                    { key: 'scheduling_team', label: 'Scheduling Team' }
                                ],
                                role.label,
                                data[role.key],
                                Number(sectionMeta[role.key]?.total_applicants || 0)
                            );
                        }
                    });

                    container.html(html || `
                        <div class="stats-empty-state">
                            <p class="stats-empty-state__text">No applicants data available.</p>
                        </div>
                    `);
                },
                error: function (xhr, status, error) {
                    $('#applicants-stats').html(`
                        <div class="stats-error-state">
                            <p class="stats-error-state__text">Failed to load applicants statistics.</p>
                        </div>
                    `);
                    $('#total-hiring-value').text('Error');
                }
            });
        }
    </script>
@endpush