{% extends "base.html" %}

{% block page_title %}My Attendance{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/employee-attendance/assets/css/attendance.css">
{% endblock %}

{% block content %}
<div class="container attendance-leaves-layout">
<section class="attendance-page"
         {% if employee_profile_linked | default(value=true) %}
         data-attendance-root
         data-checkin-endpoint="/plugins/employee-attendance/api/attendance-checkin"
         data-checkout-endpoint="/plugins/employee-attendance/api/attendance-checkout"
         data-qr-endpoint="/plugins/employee-attendance/api/attendance-qr"
         data-qr-refresh-seconds="{{ qr_refresh_seconds | default(value=30) }}"
         {% endif %}>
    <h1>My Attendance</h1>

    {% if employee_profile_linked | default(value=true) %}
    {% if employee %}
    <p class="attendance-employee-line">{{ employee.full_name }} ({{ employee.employee_code }})</p>
    {% endif %}

    <div class="attendance-card-grid">
        <div class="attendance-kpi">
            <div class="label">Total Attendance Days (Year)</div>
            <div class="value">{{ attendance_summary.total_days_attendance | default(value=0) }}</div>
        </div>
        <div class="attendance-kpi">
            <div class="label">Present</div>
            <div class="value">{{ attendance_summary.present_days | default(value=0) }}</div>
        </div>
        <div class="attendance-kpi">
            <div class="label">Late</div>
            <div class="value">{{ attendance_summary.late_days | default(value=0) }}</div>
        </div>
        <div class="attendance-kpi">
            <div class="label">Half Day</div>
            <div class="value">{{ attendance_summary.half_days | default(value=0) }}</div>
        </div>
        <div class="attendance-kpi">
            <div class="label">Absent</div>
            <div class="value">{{ attendance_summary.absent_days | default(value=0) }}</div>
        </div>
    </div>

    <input type="hidden" name="token_mode" value="qr">
    <input type="hidden" name="token_value" value="">
    <input type="hidden" name="qr_refresh_seconds" value="{{ qr_refresh_seconds | default(value=30) }}">
    <input type="hidden" name="qr_expires_in" value="">
    <input type="hidden" name="shift_name" value="">
    <div class="attendance-toolbar">
        {% if attendance_action == "check_out" %}
        <button class="blocks-button blocks-button-primary" type="button" data-action="attendance-checkout">Mark Attendance (Check Out)</button>
        {% else %}
        <button class="blocks-button blocks-button-primary" type="button" data-action="attendance-checkin">Mark Attendance (Check In)</button>
        {% endif %}
    </div>

    <h2>Today Logs</h2>
    <table class="blocks-admin-table responsive-table">
        <thead><tr><th>Time</th><th>Type</th><th>Status</th></tr></thead>
        <tbody>
            {% for item in today_logs %}
            <tr>
                <td data-label="Time">{{ item.event_time | date_in_tz(timezone=settings.timezone) }}</td>
                <td data-label="Type">{{ item.event_type }}</td>
                <td data-label="Status">{{ item.verification_status }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <h2>Attendance History</h2>
    <table class="blocks-admin-table responsive-table">
        <thead><tr><th>Date</th><th>Status</th><th>Worked</th><th>Payable</th><th>Late</th></tr></thead>
        <tbody>
            {% for item in items %}
            <tr>
                <td data-label="Date">{{ item.attendance_date | date_in_tz(timezone=settings.timezone) }}</td>
                <td data-label="Status">{{ item.status }}</td>
                <td data-label="Worked">{{ item.worked_minutes }}</td>
                <td data-label="Payable">{{ item.payable_minutes }}</td>
                <td data-label="Late">{{ item.is_late }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="attendance-unlinked-notice attendance-form-panel" role="status">
        <div class="attendance-unlinked-notice__icon" aria-hidden="true">
            <i class="fas fa-user-clock"></i>
        </div>
        <div class="attendance-unlinked-notice__body">
            <p class="attendance-unlinked-notice__title">No employee profile linked</p>
            <p class="attendance-unlinked-notice__text">Your user account is not linked to an employee record yet, so you cannot use attendance features here. Please contact your office or HR administrator to get enrolled.</p>
        </div>
    </div>
    {% endif %}
</section>
</div>
{% endblock %}

{% block scripts %}
{% if employee_profile_linked | default(value=true) %}
<script src="/static/js/location-utils.js?v={{ asset_version | default(value='1') }}"></script>
<script src="/plugins/employee-attendance/assets/js/attendance.js"></script>
{% endif %}
{% endblock %}