@extends('dashboard.layouts.app')

@section('content')
<div class="mt-5">

    <div id="applicants-stats">
        <div class="text-center">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2">Loading applicants statistics...</p>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    fetchApplicantsStats();
});

function fetchApplicantsStats() {
    $.ajax({
        url: "{{ route('allApplicants') }}",
        method: "GET",
        success: function (response) {
            const container = $('#applicants-stats');
            container.empty();

            if (!response.success || !response.data) {
                container.html('<p class="text-center text-danger">No data found.</p>');
                return;
            }

            const data = response.data;
            let html = '';

            if (data.staff) {
                const s = data.staff;
                html += `
                <div class="table-responsive mb-3">
                    <table class="text-center table table-bordered table-sm table bordered-table sm-table mb-0">
                        <thead class="">
                            <tr>
                                <th class="text-center">Position</th>
                                <th class="text-center">Screening</th>
                                <th class="text-center">Interviewing</th>
                                <th class="text-center">Offering</th>
                                <th class="text-center">Hiring</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="text" class="form-control form-control-sm" value="Staff" readonly></td>
                                <td><span class="badge bg-danger fs-6 px-3 py-2">${s.screening}</span></td>
                                <td><span class="badge bg-warning text-dark fs-6 px-3 py-2">${s.interviewing}</span></td>
                                <td><span class="badge bg-info text-white fs-6 px-3 py-2">${s.offering}</span></td>
                                <td><span class="badge bg-success fs-6 px-3 py-2">${s.hiring}</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>`;
            }

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

            teachingRoles.forEach(role => {
                if (data[role.key]) {
                    const stats = data[role.key];
                    html += `
                    <div class="table-responsive mb-3">
                        <table class="text-center table table-bordered table-sm table bordered-table sm-table mb-0">
                            <thead class="">
                                <tr>
                                    <th class="text-center">Position</th>
                                    <th class="text-center">Screening</th>
                                    <th class="text-center">Phone Call Screening</th>
                                    <th class="text-center">Demo Session</th>
                                    <th class="text-center">Induction</th>
                                    <th class="text-center">Training</th>
                                    <th class="text-center">Handling to Supervisor</th>
                                    <th class="text-center">Final Interview</th>
                                    <th class="text-center">Scheduling Team</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><input type="text" class="form-control form-control-sm" value="${role.title}" readonly></td>
                                    <td><span class="badge bg-danger fs-6 px-3 py-2">${stats.screening}</span></td>
                                    <td><span class="badge bg-warning text-dark fs-6 px-3 py-2">${stats.phone_call_screening}</span></td>
                                    <td><span class="badge bg-info text-white fs-6 px-3 py-2">${stats.demo_session}</span></td>
                                    <td><span class="badge bg-primary fs-6 px-3 py-2">${stats.induction}</span></td>
                                    <td><span class="badge bg-primary fs-6 px-3 py-2">${stats.training}</span></td>
                                    <td><span class="badge fs-6 px-3 py-2" style="background-color:#e57373;">${stats.handling_to_supervisor}</span></td>
                                    <td><span class="badge bg-success fs-6 px-3 py-2">${stats.final_interview_done}</span></td>
                                    <td><span class="badge fs-6 px-3 py-2" style="background-color:#9b59b6;">${stats.scheduling_team}</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>`;
                }
            });

            container.html(html || '<p class="text-center text-muted">No applicants data available.</p>');
        },
        error: function () {
            $('#applicants-stats').html('<p class="text-center text-danger">Failed to load data.</p>');
        }
    });
}
</script>
@endpush