{% extends "base.html" %}
{% block title %}ATS Dashboard{% endblock %}
{% block content %}
<h2>📊 ATS - Recruitment Dashboard</h2>
<p style="color:#666; margin-bottom:20px;">View, shortlist, or reject candidates</p>

<style>
    .status-card {
        background: white;
        padding: 20px;
        border-radius: 15px;
        flex: 1;
        text-align: center;
        border: 1px solid transparent;
        cursor: pointer;
        transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .status-card:hover {
        transform: translateY(-2px);
    }
    .status-card.active {
        border-color: #667eea;
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.18);
    }
</style>
<div class="stats" style="display:flex; gap:20px; margin-bottom:30px; flex-wrap:wrap;">
    <div class="status-card active" data-status="all" onclick="filterStatus('all', this)" style="background:white; padding:20px; border-radius:15px; flex:1; text-align:center;">
        <div class="stat-number" style="font-size:32px; font-weight:bold; color:#667eea;">{{ total }}</div>
        <div>Total Candidates</div>
    </div>
    <div class="status-card" data-status="shortlisted" onclick="filterStatus('shortlisted', this)" style="background:white; padding:20px; border-radius:15px; flex:1; text-align:center;">
        <div class="stat-number" style="font-size:32px; font-weight:bold; color:#28a745;">{{ shortlisted }}</div>
        <div>Shortlisted</div>
    </div>
    <div class="status-card" data-status="pending" onclick="filterStatus('pending', this)" style="background:white; padding:20px; border-radius:15px; flex:1; text-align:center;">
        <div class="stat-number" style="font-size:32px; font-weight:bold; color:#ffc107;">{{ pending }}</div>
        <div>Pending Review</div>
    </div>
    <div class="status-card" data-status="rejected" onclick="filterStatus('rejected', this)" style="background:white; padding:20px; border-radius:15px; flex:1; text-align:center;">
        <div class="stat-number" style="font-size:32px; font-weight:bold; color:#dc3545;">{{ rejected }}</div>
        <div>Rejected</div>
    </div>
</div>

<div style="overflow-x:auto;">
    <table id="candidateTable" style="width:100%; border-collapse:collapse; background:white; border-radius:15px;">
        <thead>
            <tr>
                <th style="padding:12px; background:#667eea; color:white;">Resume File</th>
                <th style="padding:12px; background:#667eea; color:white;">Received Date</th>
                <th style="padding:12px; background:#667eea; color:white;">Location</th>
                <th style="padding:12px; background:#667eea; color:white;">Score</th>
                <th style="padding:12px; background:#667eea; color:white;">Status</th>
                <th style="padding:12px; background:#667eea; color:white;">Job Title</th>
                <th style="padding:12px; background:#667eea; color:white;">Action</th>
            </tr>
        </thead>
        <tbody>
            {% for c in candidates %}
            <tr style="border-bottom:1px solid #eee;" data-status="{{ c[6] }}">
                <td style="padding:12px;">📄 {{ c[1] }}</td>
                <td style="padding:12px;">{{ c[3] }}</td>
                <td style="padding:12px;">📍 {{ c[2] }}</td>
                <td style="padding:12px;"><span style="background: linear-gradient(135deg, #4f46e5, #2563eb); color:white; padding:5px 10px; border-radius:15px; font-weight:bold;">🎯 {{ c[4] }}% AI Match</span></td>
                <td style="padding:12px;"><span style="padding:4px 8px; border-radius:12px; background: {{ '#ffc107' if c[6] == 'pending' else '#28a745' if c[6] == 'shortlisted' else '#dc3545' }}; color:white;">{{ c[6] | title }}</span></td>
                <td style="padding:12px;">{{ c[7] }}</td>
                <td style="padding:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; vertical-align:middle;">
                    {% if c[6] == 'pending' %}
                        <a href="/ats-shortlist/{{ c[0] }}" class="btn-shortlist" style="background:#28a745; color:white; padding:6px 10px; border-radius:5px; text-decoration:none; font-size:11px; display:inline-flex; align-items:center; justify-content:center;">✓ Shortlist</a>
                    {% else %}
                        <span style="background:#28a745; color:white; padding:6px 10px; border-radius:5px; font-size:11px; display:inline-flex; align-items:center; justify-content:center;">{{ 'Shortlisted' if c[6] == 'shortlisted' else 'Hired' if c[6] == 'hired' else 'Rejected' if c[6] == 'rejected' else c[6].title() }}</span>
                    {% endif %}
                    {% if c[6] != 'rejected' and c[6] != 'hired' %}
                        <a href="/ats-reject/{{ c[0] }}" class="btn-reject" style="background:#dc3545; color:white; padding:6px 10px; border-radius:5px; text-decoration:none; font-size:11px; display:inline-flex; align-items:center; justify-content:center;">✗ Reject</a>
                    {% endif %}
                    {% if c[6] != 'hired' %}
                        <a href="/ats-hire/{{ c[0] }}" class="btn-hire" style="background:#17a2b8; color:white; padding:6px 10px; border-radius:5px; text-decoration:none; font-size:11px; display:inline-flex; align-items:center; justify-content:center;">🎉 Hire</a>
                    {% endif %}
                    <a href="/download/{{ c[1] }}" class="btn-view" style="background:#5a5fc4; color:white; padding:6px 10px; border-radius:5px; text-decoration:none; font-size:11px; display:inline-flex; align-items:center; justify-content:center;">📥 CV</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
<script>
    function filterStatus(status, el) {
        document.querySelectorAll('.status-card').forEach(card => {
            card.classList.toggle('active', card.dataset.status === status);
        });
        document.querySelectorAll('#candidateTable tbody tr').forEach(row => {
            row.style.display = status === 'all' || row.dataset.status === status ? '' : 'none';
        });
    }
</script>
{% endblock %}