{% extends "base.html" %}
{% block title %}Leave Register {{ year }} · WageWise Neo{% endblock %}
{% block content %}

<div class="page-header">
    <div>
        <div class="eyebrow">Workspace</div>
        <h1>Leave Register {{ year }}</h1>
    </div>
    <div style="display:flex;gap:8px;align-items:center;">
        <a href="{{ url_for('leave_register', year=prev_year) }}" class="btn btn-secondary">&larr;</a>
        <span style="font-family:var(--font-data);font-size:13px;padding:0 6px;">{{ year }}</span>
        <a href="{{ url_for('leave_register', year=next_year) }}" class="btn btn-secondary">&rarr;</a>
    </div>
</div>

<div class="panel">
    <p style="font-size:13px;color:var(--color-ink-soft);margin-bottom:14px;">
        CL/SL Used and the yearly totals below are calculated directly from Attendance —
        marking CL/SL on the Attendance page updates this automatically, and using
        "+ Add Leave" here also marks those days on the Attendance grid. Both stay in sync.
    </p>
    <div style="margin-bottom:14px;max-width:320px;">
        <input type="text" id="leaveSearchBox" placeholder="Search employee..."
               oninput="filterLeaveRows()"
               style="width:100%;padding:8px 12px;border:1px solid var(--color-rule-strong);border-radius:5px;font-size:13px;">
    </div>
    <div style="overflow-x:auto;">
    <table class="ledger-table" style="min-width:1000px;">
        <thead>
            <tr>
                <th style="min-width:140px;">Employee</th>
                <th class="num">CL Entitled</th>
                <th class="num">CL Used</th>
                <th class="num">CL Balance</th>
                <th class="num">SL Entitled</th>
                <th class="num">SL Used</th>
                <th class="num">SL Balance</th>
                <th class="num">Present<br>(Year)</th>
                <th class="num">Absent<br>(Year)</th>
                <th class="num">Half Day<br>(Year)</th>
                <th class="num">Late<br>(Year)</th>
                <th style="width:110px;"></th>
            </tr>
        </thead>
        <tbody>
            {% for emp in employees %}
            {% set bal = balances.get(emp.id, {}) %}
            {% set cl_ent  = bal.cl_entitled or 12 %}
            {% set cl_used = bal.cl_used or 0 %}
            {% set sl_ent  = bal.sl_entitled or 12 %}
            {% set sl_used = bal.sl_used or 0 %}
            <tr data-emp-name="{{ emp.full_name|lower }}">
                <td class="name-cell">
                    {{ emp.full_name }}
                    <div class="meta">{{ emp.designation or '' }}</div>
                </td>
                <td class="num">{{ cl_ent }}</td>
                <td class="num">{{ cl_used }}</td>
                <td class="num" style="font-weight:700;color:{{ 'var(--color-paid)' if cl_ent - cl_used > 0 else 'var(--color-due)' }};">
                    {{ (cl_ent - cl_used) | int }}
                </td>
                <td class="num">{{ sl_ent }}</td>
                <td class="num">{{ sl_used }}</td>
                <td class="num" style="font-weight:700;color:{{ 'var(--color-paid)' if sl_ent - sl_used > 0 else 'var(--color-due)' }};">
                    {{ (sl_ent - sl_used) | int }}
                </td>
                <td class="num" style="color:var(--color-paid);">{{ bal.present_days or 0 }}</td>
                <td class="num" style="color:{{ 'var(--color-due)' if (bal.absent_days or 0) > 0 else 'var(--color-ink-faint)' }};">{{ bal.absent_days or 0 }}</td>
                <td class="num">{{ bal.half_days or 0 }}</td>
                <td class="num">{{ bal.late_days or 0 }}</td>
                <td style="text-align:center;">
                    <button onclick="openLeaveModal({{ emp.id }}, '{{ emp.full_name }}')"
                            class="btn btn-primary"
                            style="font-size:12px;padding:6px 12px;white-space:nowrap;">
                        + Add Leave
                    </button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
</div>

<!-- Add Leave Modal -->
<div id="leaveModal" style="display:none;position:fixed;inset:0;background:rgba(28,37,65,0.55);z-index:1000;align-items:center;justify-content:center;">
    <div style="background:var(--color-paper-raised);border:1px solid var(--color-rule);border-radius:10px;
                width:480px;max-width:94vw;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.18);">

        <!-- Modal header -->
        <div style="background:var(--color-ink);padding:20px 28px;display:flex;align-items:center;justify-content:space-between;">
            <div>
                <div style="font-size:11px;color:rgba(250,247,239,0.5);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px;">Leave Register</div>
                <div id="modalTitle" style="font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--color-paper);">Add Leave</div>
            </div>
            <button onclick="closeModal()" style="background:none;border:none;color:rgba(250,247,239,0.5);font-size:22px;cursor:pointer;padding:4px 8px;line-height:1;">&times;</button>
        </div>

        <!-- Modal body -->
        <form id="leaveForm" class="no-dirty-check" method="post" style="padding:28px;">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">

                <div class="field" style="grid-column:1/-1;">
                    <label>Leave Type</label>
                    <select name="leave_type" style="font-size:15px;padding:10px 12px;">
                        <option value="CL">Casual Leave (CL)</option>
                        <option value="SL">Sick Leave (SL)</option>
                    </select>
                </div>

                <div class="field">
                    <label>From Date</label>
                    <input type="date" name="from_date" required
                           style="font-size:14px;padding:10px 12px;"
                           onchange="calcDays()">
                </div>
                <div class="field">
                    <label>To Date</label>
                    <input type="date" name="to_date" required
                           style="font-size:14px;padding:10px 12px;"
                           onchange="calcDays()">
                </div>

                <div class="field">
                    <label>Days</label>
                    <input type="number" name="days" id="leave_days"
                           step="0.5" min="0.5" value="1"
                           style="font-size:16px;padding:10px 12px;font-family:var(--font-data);font-weight:700;">
                </div>
                <div class="field">
                    <label>Reason <span style="font-weight:400;color:var(--color-ink-soft);">(optional)</span></label>
                    <input type="text" name="reason" placeholder="e.g. Medical, Personal"
                           style="font-size:14px;padding:10px 12px;">
                </div>
            </div>

            <div style="display:flex;gap:12px;margin-top:24px;">
                <button type="submit" class="btn btn-primary"
                        style="flex:1;font-size:15px;padding:12px;justify-content:center;">
                    Save Leave
                </button>
                <button type="button" onclick="closeModal()" class="btn btn-secondary"
                        style="font-size:15px;padding:12px 20px;">
                    Cancel
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openLeaveModal(empId, name) {
    document.getElementById('modalTitle').textContent = 'Add Leave — ' + name;
    document.getElementById('leaveForm').action = '/leave/' + empId + '/add';
    document.getElementById('leaveModal').style.display = 'flex';
    // Default both dates to today, minimum = today
    var today = new Date().toISOString().split('T')[0];
    var fromInp = document.querySelector('[name="from_date"]');
    var toInp   = document.querySelector('[name="to_date"]');
    fromInp.min = today;
    toInp.min   = today;
    fromInp.value = today;
    toInp.value   = today;
    document.getElementById('leave_days').value = '1';
    // Focus on from_date for quick entry
    setTimeout(function(){ fromInp.focus(); }, 100);
}
function closeModal() {
    document.getElementById('leaveModal').style.display = 'none';
    if (window.resetDirtyFlag) window.resetDirtyFlag();
}
function calcDays() {
    var fromInp = document.querySelector('[name="from_date"]');
    var toInp   = document.querySelector('[name="to_date"]');
    var from = fromInp.value;
    var to   = toInp.value;
    // Enforce: to_date >= from_date
    if (from) {
        toInp.min = from;
        if (to && to < from) {
            toInp.value = from;
            to = from;
        }
    }
    if (from && to) {
        var diff = (new Date(to) - new Date(from)) / 86400000 + 1;
        if (diff > 0) document.getElementById('leave_days').value = diff;
    }
}
// When from_date changes, update to_date minimum
document.querySelector('[name="from_date"]').addEventListener('change', function() {
    calcDays();
});
document.getElementById('leaveModal').addEventListener('click', function(e) {
    if (e.target === this) closeModal();
});

function filterLeaveRows() {
    var q = document.getElementById('leaveSearchBox').value.trim().toLowerCase();
    document.querySelectorAll('tr[data-emp-name]').forEach(function (row) {
        row.style.display = row.dataset.empName.indexOf(q) === -1 ? 'none' : '';
    });
}
</script>

{% endblock %}