{% extends "admin_base.html" %}

{% block page_title %}Payroll Export{% endblock %}

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

{% block admin_content %}
<div class="attendance-page">
    <div class="attendance-toolbar">
        <h1>Payroll Export</h1>
        <button class="blocks-button blocks-button-primary" type="button" data-open-modal="payroll-period-create-modal">+ Create Period</button>
        <button class="blocks-button blocks-button-secondary" type="button" data-open-modal="payroll-export-modal">+ Export Payroll</button>
    </div>
    <div id="payroll-period-create-modal" class="crud-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Create Payroll Period</h3>
                <button class="close-btn" type="button" data-close-modal>&times;</button>
            </div>
            <div class="modal-body">
        <form id="payroll-period-create-form" data-form="payroll-period-create" class="attendance-form-grid">
            <input type="hidden" name="_endpoint" value="/plugins/employee-attendance/api/admin-payroll-period-create">
            <label>Name <input name="period_name" required class="blocks-input"></label>
            <label>Start Date <input name="period_start" type="date" required class="blocks-input"></label>
            <label>End Date <input name="period_end" type="date" required class="blocks-input"></label>
            <label><input name="is_locked" type="checkbox"> Lock after create</label>
        </form>
            </div>
            <div class="modal-footer">
                <button class="blocks-button blocks-button-secondary" type="button" data-close-modal>Cancel</button>
                <button class="blocks-button blocks-button-primary" type="submit" form="payroll-period-create-form">Create Period</button>
            </div>
        </div>
    </div>

    <div id="payroll-export-modal" class="crud-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Export Payroll</h3>
                <button class="close-btn" type="button" data-close-modal>&times;</button>
            </div>
            <div class="modal-body">
        <form id="payroll-export-form" data-form="payroll-export" class="attendance-form-grid">
            <input type="hidden" name="_endpoint" value="/plugins/employee-attendance/api/admin-payroll-export">
            <label>Payroll Period ID <input name="payroll_period_id" type="number" required class="blocks-input"></label>
        </form>
        <pre data-export-preview></pre>
            </div>
            <div class="modal-footer">
                <button class="blocks-button blocks-button-secondary" type="button" data-close-modal>Cancel</button>
                <button class="blocks-button blocks-button-primary" type="submit" form="payroll-export-form">Generate CSV</button>
            </div>
        </div>
    </div>

    <h2>Periods</h2>
    <table class="blocks-admin-table responsive-table">
        <thead><tr><th>Name</th><th>Start</th><th>End</th><th>Locked</th></tr></thead>
        <tbody>
            {% for p in periods %}
            <tr>
                <td data-label="Name">{{ p.period_name }}</td>
                <td data-label="Start">{{ p.period_start | date_in_tz(timezone=settings.timezone) }}</td>
                <td data-label="End">{{ p.period_end | date_in_tz(timezone=settings.timezone) }}</td>
                <td data-label="Locked">{{ p.is_locked }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/employee-attendance/assets/js/attendance.js"></script>
{% endblock %}