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

<?= $this->section('content') ?>
<h5 class="mb-3">Agency Reports</h5>

<div class="li-card mb-3">
    <div class="li-card-header">Conversion Funnel</div>
    <div class="li-card-body" id="funnelBody">Loading...</div>
</div>

<div class="row g-3">
    <div class="col-md-6">
        <div class="li-card mb-3">
            <div class="li-card-header">Recruiter Performance</div>
            <div class="table-responsive">
                <table class="table li-table mb-0">
                    <thead><tr><th>Recruiter</th><th>Assigned</th><th>Hires</th></tr></thead>
                    <tbody id="recruiterTable"></tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="li-card mb-3">
            <div class="li-card-header">Contact Reveals (last 30 days)</div>
            <div class="li-card-body" id="revealsBody">Loading...</div>
        </div>
    </div>
</div>

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

<?= $this->section('scripts') ?>
<script>
async function loadReports() {
    try {
        const funnel = await apiFetch('/agencies/me/reports/conversion-rates');
        const stages = ['applied','under_review','shortlisted','interview_scheduled','interview_completed','hired'];
        document.getElementById('funnelBody').innerHTML = stages.map(s => `
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="text-muted small">${s.replace(/_/g,' ')}</span>
                <div class="flex-grow-1 mx-3">
                    <div class="progress" style="height:8px;"><div class="progress-bar" style="width:${funnel.data[s]?.percentage || 0}%"></div></div>
                </div>
                <span class="small fw-semibold">${funnel.data[s]?.count || 0} (${funnel.data[s]?.percentage || 0}%)</span>
            </div>
        `).join('');
    } catch (e) { document.getElementById('funnelBody').innerHTML = '<span class="text-muted">No data yet.</span>'; }

    try {
        const rp = await apiFetch('/agencies/me/reports/recruiter-performance');
        document.getElementById('recruiterTable').innerHTML = (rp.data || []).map(r => `
            <tr><td>${escapeHtml(r.recruiter_name || '—')}</td><td>${r.total_assigned}</td><td>${r.hires}</td></tr>
        `).join('') || '<tr><td colspan="3" class="text-muted text-center py-3">No data yet.</td></tr>';
    } catch (e) {}

    try {
        const cr = await apiFetch('/agencies/me/reports/contact-reveals');
        const rows = cr.data || [];
        document.getElementById('revealsBody').innerHTML = rows.length ? rows.map(r => `
            <div class="d-flex justify-content-between border-bottom py-1"><span class="text-muted small">${r.unlock_type.replace(/_/g,' ')}</span><span class="small fw-semibold">${r.count} (${r.credits_spent} credits)</span></div>
        `).join('') : '<span class="text-muted small">No unlocks in this period.</span>';
    } catch (e) {}
}

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