<?= $this->extend('layouts/panel') ?>
<?= $this->section('sidebar') ?>
<?= $this->include('panel/_sidebar') ?>
<?= $this->endSection() ?>

<?= $this->section('content') ?>

<div class="d-flex align-items-center mb-3">
    <a href="<?= base_url('admin/jobs') ?>" class="btn btn-li-ghost btn-sm me-2"><i class="bi bi-arrow-left"></i></a>
    <h5 class="mb-0" id="jobTitle">Loading...</h5>
</div>

<div class="li-card mb-3">
    <div class="li-card-body">
        <div id="jobMeta"></div>
        <div id="jobDescription" class="mt-3"></div>
    </div>
</div>

<div class="li-card">
    <div class="li-card-header d-flex justify-content-between">
        <span>Applications for this job</span>
        <a href="<?= base_url('admin/ats') ?>" class="btn btn-li-outline btn-sm">View in ATS</a>
    </div>
    <div class="table-responsive">
        <table class="table li-table mb-0">
            <thead><tr><th>Candidate</th><th>Status</th><th>Applied</th></tr></thead>
            <tbody id="applicationsTable"></tbody>
        </table>
    </div>
    <div id="applicationsEmpty" class="text-center text-muted py-4 d-none">No applications yet.</div>
</div>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
const jobId = <?= (int) $jobId ?>;

function statusPillJob(status) {
    const map = { draft: 'gray', published: 'green', closed: 'red', expired: 'yellow' };
    return `<span class="li-pill li-pill-${map[status] || 'gray'}">${status}</span>`;
}
function appStatusPill(status) {
    const map = { applied: 'blue', under_review: 'yellow', shortlisted: 'blue', interview_scheduled: 'blue', interview_completed: 'blue', hired: 'green', rejected: 'red' };
    return `<span class="li-pill li-pill-${map[status] || 'gray'}">${(status || '').replace(/_/g,' ')}</span>`;
}

async function loadJob() {
    try {
        const res = await apiFetch('/jobs/mine');
        const job = (res.data || []).find(j => j.id === jobId);
        if (!job) {
            document.getElementById('jobTitle').textContent = 'Job not found';
            return;
        }

        document.getElementById('jobTitle').textContent = job.title;
        document.getElementById('jobMeta').innerHTML = `
            ${statusPillJob(job.status)}
            ${job.is_featured ? '<span class="li-pill li-pill-blue">Featured</span>' : ''}
            ${job.is_urgent ? '<span class="li-pill li-pill-red">Urgent</span>' : ''}
            <div class="text-muted small mt-2">
                <i class="bi bi-geo-alt"></i> ${escapeHtml(job.location || 'Remote')}
                &nbsp;·&nbsp; ${job.employment_type.replace('_',' ')}
                &nbsp;·&nbsp; ${job.experience_level} level
                &nbsp;·&nbsp; ${job.views_count || 0} views
            </div>
        `;
        document.getElementById('jobDescription').innerHTML = `<p style="white-space:pre-wrap;">${escapeHtml(job.description)}</p>`;
    } catch (e) { showToast(e.message, true); }
}

async function loadApplications() {
    try {
        const res = await apiFetch(`/applications/kanban?job_id=${jobId}`);
        const pipeline = res.data.pipeline || {};
        const all = Object.values(pipeline).flat();

        const tbody = document.getElementById('applicationsTable');
        const empty = document.getElementById('applicationsEmpty');

        if (all.length === 0) { tbody.innerHTML = ''; empty.classList.remove('d-none'); return; }
        empty.classList.add('d-none');

        tbody.innerHTML = all.map(a => `
            <tr>
                <td>${escapeHtml(a.candidate_name || 'Candidate')}</td>
                <td>${appStatusPill(a.status)}</td>
                <td class="text-muted small">${timeAgo(a.applied_at)}</td>
            </tr>
        `).join('');
    } catch (e) { /* non-fatal */ }
}

loadJob();
loadApplications();
</script>
<?= $this->endSection() ?>
