{% extends "base.html" %}
{% block title %}Attendance Report{% endblock %}
{% block content %}
<style>
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }
    .stat-card {
        background: white;
        padding: 20px;
        border-radius: 15px;
        text-align: center;
    }
    .stat-number { font-size: 32px; font-weight: bold; }
    .stat-card.present .stat-number { color: #28a745; }
    .stat-card.late .stat-number { color: #ffc107; }
    .stat-card.absent .stat-number { color: #dc3545; }
    .filter-bar {
        background: white;
        padding: 20px;
        border-radius: 15px;
        margin-bottom: 20px;
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        align-items: center;
    }
    .table-container {
        overflow-x: auto;
        background: white;
        border-radius: 15px;
    }
    table { width: 100%; border-collapse: collapse; min-width: 600px; }
    th, td { padding: 12px; text-align: left; border-bottom: 1px solid #eee; }
    th { background: #17a2b8; color: white; }
    .btn-export { background: #28a745; color: white; padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; }
</style>

<h2>📊 Monthly Attendance Report</h2>

<div class="filter-bar">
    <select id="month" onchange="filterReport()">
        {% for m in months %}
        <option value="{{ m.value }}" {% if m.value == month %}selected{% endif %}>{{ m.name }}</option>
        {% endfor %}
    </select>
    <select id="year" onchange="filterReport()">
        {% for y in years %}
        <option value="{{ y }}" {% if y == year %}selected{% endif %}>{{ y }}</option>
        {% endfor %}
    </select>
    <button class="btn-export" onclick="exportReport()">📥 Export to Excel</button>
</div>

<div class="stats-grid">
    <div class="stat-card present">
        <div class="stat-number">{{ summary.present }}</div>
        <div>Present Days</div>
    </div>
    <div class="stat-card late">
        <div class="stat-number">{{ summary.late }}</div>
        <div>Late Days</div>
    </div>
    <div class="stat-card absent">
        <div class="stat-number">{{ summary.absent }}</div>
        <div>Absent Days</div>
    </div>
    <div class="stat-card">
        <div class="stat-number">{{ "%.1f"|format(summary.avg_late or 0) }}</div>
        <div>Avg Late (min)</div>
    </div>
    <div class="stat-card">
        <div class="stat-number">{{ "%.1f"|format(summary.total_hours or 0) }}</div>
        <div>Total Hours</div>
    </div>
</div>

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>Date</th>
                <th>Employee</th>
                <th>Team</th>
                <th>Check In</th>
                <th>Check Out</th>
                <th>Status</th>
                <th>Working Hours</th>
            </tr>
        </thead>
        <tbody>
            {% for a in attendance %}
            <tr>
                <td>{{ a[4] }}</td>
                <td>{{ a[2] }}</td>
                <td>{{ a[3] }}</td>
                <td>{{ a[5] if a[5] else '-' }}</td>
                <td>{{ a[6] if a[6] else '-' }}</td>
                <td>
                    {% if a[7] == 'Present' %}✅ Present
                    {% elif a[7] == 'Late' %}⏰ Late
                    {% else %}❌ Absent{% endif %}
                </td>
                <td>{{ "%.2f"|format(a[10]) if a[10] else '-' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
    function filterReport() {
        let month = document.getElementById('month').value;
        let year = document.getElementById('year').value;
        window.location.href = '/attendance-report?month=' + month + '&year=' + year;
    }
    function exportReport() {
        window.location.href = '/export-attendance?month=' + document.getElementById('month').value + '&year=' + document.getElementById('year').value;
    }
</script>
{% endblock %}