{% extends 'base.html' %}
{% load i18n tz %}

{% block title %}{% trans "記錄考勤" %} - 1218 Lab{% endblock %}

{% block content %}
<div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-3">
    <h1 class="h2 text-primary mb-0">
        <i class="fas fa-clipboard-check me-2"></i>{% trans "記錄考勤" %}
    </h1>
    <div class="d-flex align-items-center gap-2">
        <button type="button" class="btn btn-outline-primary btn-sm fw-bold shadow-sm me-1" onclick="toggleSelectAll(true)">
            <i class="fas fa-check-square me-1"></i>{% trans "全選" %}
        </button>
        <button type="button" class="btn btn-outline-secondary btn-sm fw-bold shadow-sm me-2" onclick="toggleSelectAll(false)">
            <i class="far fa-square me-1"></i>{% trans "取消全選" %}
        </button>
        <span class="badge bg-success fs-6 px-3 py-2 shadow-sm">
            <i class="fas fa-users me-1"></i>{% blocktrans with count=students|length %}在學學生: {{ count }} 人{% endblocktrans %}
        </span>
        <span class="badge bg-primary fs-6 px-3 py-2 shadow-sm">
            <i class="fas fa-clock me-1"></i>{% now "Y-m-d H:i" %}
        </span>
    </div>
</div>

<form method="post" id="attendanceForm">
    {% csrf_token %}
    <div class="card shadow-sm border-0 rounded-3 mb-4">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-sm table-hover table-striped table-borderless align-middle mb-0">
                    <tbody id="studentCardGrid">
                        {% for student in students %}
                        <tr class="student-tile-col" data-student-name="{{ student.name|lower }}" data-student-alias="{{ student.foreign_alias|default:''|lower }}" style="cursor: pointer;" onclick="handleRowClick(event, 'chk_{{ student.student_id }}')">
                            <td class="ps-3 py-1 text-center" style="width: 45px;">
                                <input type="checkbox" name="student_id" value="{{ student.student_id }}" class="form-check-input student-checkbox mt-0" id="chk_{{ student.student_id }}" style="transform: scale(1.2); cursor: pointer;" onchange="updateRowStyle(this)">
                            </td>
                            <td class="py-1">
                                <label class="form-check-label text-dark mb-0 fw-bold" for="chk_{{ student.student_id }}" style="cursor: pointer; font-size: 18px;">
                                    {% get_current_language as CURRENT_LANG %}
                                    {% if CURRENT_LANG == 'en' and student.foreign_alias %}
                                        {{ student.foreign_alias }}
                                    {% else %}
                                        {{ student.name }}
                                    {% endif %}
                                </label>
                            </td>
                            <td class="py-1 text-end pe-3">
                                {% if student.degree_type == '博士生' %}
                                    <span class="badge bg-danger text-white fs-6 py-1 px-2.5"><i class="fas fa-user-graduate me-1"></i>{% trans "博士生" %}</span>
                                {% elif student.degree_type == '學士生' %}
                                    <span class="badge bg-primary text-white fs-6 py-1 px-2.5"><i class="fas fa-user-graduate me-1"></i>{% trans "學士生" %}</span>
                                {% else %}
                                    <span class="badge bg-info text-dark fs-6 py-1 px-2.5"><i class="fas fa-graduation-cap me-1"></i>{% trans "碩士生" %}</span>
                                {% endif %}

                                {% if student.student_category == '在職生' %}
                                    <span class="badge bg-warning text-dark fs-6 py-1 px-2.5"><i class="fas fa-user-tie me-1"></i>{% trans "在職生" %}</span>
                                {% elif student.student_category == '交換中' %}
                                    <span class="badge bg-secondary text-white fs-6 py-1 px-2.5"><i class="fas fa-exchange-alt me-1"></i>{% trans "交換中" %}</span>
                                {% else %}
                                    <span class="badge bg-success text-white fs-6 py-1 px-2.5"><i class="fas fa-user me-1"></i>{% trans "一般生" %}</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="3" class="text-center py-4 text-muted">
                                <i class="fas fa-user-slash me-1"></i>{% trans "無在學學生資料" %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card-footer bg-light p-3 d-flex flex-wrap justify-content-between align-items-center gap-3">
            <span class="text-muted fw-bold fs-6">
                <i class="fas fa-user-check text-primary me-1"></i>{% trans "已勾選：" %} <span id="selectedCountBadge" class="badge bg-primary fs-6">0</span> 人
            </span>
            <button type="submit" class="btn btn-primary btn-lg shadow-sm fw-bold px-4">
                <i class="fas fa-check-circle me-2"></i>{% trans "確認考勤簽到" %}
            </button>
        </div>
    </div>
</form>

{% if point_records %}
<div class="card shadow-sm border-0 rounded-3 mb-4 mt-5">
    <div class="card-header bg-success text-white py-3 d-flex justify-content-between align-items-center">
        <h5 class="mb-0 fw-bold">
            <i class="fas fa-check-double me-2"></i>{% trans "本次已成功紀錄考勤" %}
        </h5>
        <span class="badge bg-light text-success fs-6">{% blocktrans with count=point_records|length %}共 {{ count }} 筆紀錄{% endblocktrans %}</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th style="width: 10%;">#</th>
                        <th style="width: 30%;">{% trans "姓名" %}</th>
                        <th style="width: 30%;">{% trans "身分 / 學位" %}</th>
                        <th style="width: 30%;">{% trans "考勤簽到時間" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for record in point_records %}
                    <tr>
                        <td class="fw-bold text-muted">{{ forloop.counter }}</td>
                        <td class="fw-bold">
                            {% get_current_language as CURRENT_LANG %}
                            {% if CURRENT_LANG == 'en' and record.student.foreign_alias %}
                                {{ record.student.foreign_alias }}
                            {% else %}
                                {{ record.student.name }}
                            {% endif %}
                        </td>
                        <td>
                            {% if record.student.degree_type == '博士生' %}
                                <span class="badge bg-danger text-white"><i class="fas fa-user-graduate me-1"></i>{% trans "博士生" %}</span>
                            {% elif record.student.degree_type == '學士生' %}
                                <span class="badge bg-primary text-white"><i class="fas fa-user-graduate me-1"></i>{% trans "學士生" %}</span>
                            {% else %}
                                <span class="badge bg-info text-dark"><i class="fas fa-graduation-cap me-1"></i>{% trans "碩士生" %}</span>
                            {% endif %}

                            {% if record.student.student_category == '在職生' %}
                                <span class="badge bg-warning text-dark"><i class="fas fa-user-tie me-1"></i>{% trans "在職生" %}</span>
                            {% elif record.student.student_category == '交換中' %}
                                <span class="badge bg-secondary text-white"><i class="fas fa-exchange-alt me-1"></i>{% trans "交換中" %}</span>
                            {% else %}
                                <span class="badge bg-success text-white"><i class="fas fa-user me-1"></i>{% trans "一般生" %}</span>
                            {% endif %}
                        </td>
                        <td class="text-primary fw-bold">
                            <i class="far fa-clock me-1"></i>{{ record.datetime|timezone:"Asia/Taipei"|date:"Y-m-d H:i:s" }}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endif %}

<script>
function handleRowClick(event, chkId) {
    if (event.target.tagName.toLowerCase() === 'input' || event.target.tagName.toLowerCase() === 'label') {
        return;
    }
    const chk = document.getElementById(chkId);
    if (chk) {
        chk.checked = !chk.checked;
        updateRowStyle(chk);
    }
}

function updateRowStyle(chk) {
    const tr = chk.closest('tr');
    if (chk.checked) {
        tr.classList.add('table-primary');
    } else {
        tr.classList.remove('table-primary');
    }
    updateSelectedCount();
}

function toggleSelectAll(select) {
    const checkboxes = document.querySelectorAll('.student-checkbox');
    checkboxes.forEach(chk => {
        const tr = chk.closest('.student-tile-col');
        if (tr.style.display !== 'none') {
            chk.checked = select;
            updateRowStyle(chk);
        }
    });
}

function updateSelectedCount() {
    const count = document.querySelectorAll('.student-checkbox:checked').length;
    const badge = document.getElementById('selectedCountBadge');
    if (badge) badge.textContent = count;
}

function filterStudents() {
    const query = document.getElementById('studentSearchInput').value.toLowerCase().trim();
    const rows = document.querySelectorAll('.student-tile-col');
    rows.forEach(tr => {
        const name = tr.getAttribute('data-student-name') || '';
        const alias = tr.getAttribute('data-student-alias') || '';
        if (name.includes(query) || alias.includes(query)) {
            tr.style.display = '';
        } else {
            tr.style.display = 'none';
        }
    });
}
</script>
{% endblock %}