{% extends "base.html" %}
{% block content %}
<div class="container mt-4">
  <div class="d-flex align-items-center justify-content-between mb-2">
    <h3 class="m-0">Payroll Preview – {{ "%02d"|format(month) }}/{{ year }}</h3>
    <div class="small text-muted">
      <span class="badge bg-success">Active</span>
      <span class="badge bg-warning text-dark ms-2">Notice</span>
      <span class="badge bg-info ms-2">FnF</span>
    </div>
  </div>

  <form method="get" class="row g-2 mb-3">
    <div class="col-md-2">
      <select name="month" class="form-control" required>
        {% for m in range(1, 13) %}
          <option value="{{ m }}" {% if m == month %}selected{% endif %}>{{ m }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-md-2">
      <select name="year" class="form-control" required>
        {% for y in range(2022, 2031) %}
          <option value="{{ y }}" {% if y == year %}selected{% endif %}>{{ y }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-md-2">
      <button type="submit" class="btn btn-primary w-100">Preview</button>
    </div>
  </form>

  <!-- Enable Preview for employees -->
  <form action="{{ url_for('payroll.enable_preview_for_month') }}" method="POST" class="mb-3">
    <input type="hidden" name="month" value="{{ period }}">
    <button type="submit" class="btn btn-outline-primary">
      👁 Enable Preview to All Employees
    </button>
  </form>

  <!-- Freeze Payroll -->
  <form action="{{ url_for('payroll.freeze_payroll') }}" method="post">
    <input type="hidden" name="month" value="{{ "%04d-%02d" | format(year, month) }}">

    <div class="table-responsive">
      <table class="table table-bordered table-hover align-middle">
        <thead class="table-dark">
          <tr>
            <th>#</th>
            <th>Emp Code</th>
            <th>Department</th>
            <th>Employee</th>
            <th class="text-center">Tag</th>
            <th>Total Paid Days</th>
            <th>Present</th>
            <th>Leave</th>
            <th>Holiday</th>
            <th>Weekends</th>
            <th>LWP</th>
            <th>Earnings (₹)</th>
            <th>Deductions (₹)</th>
            <th>CTC (₹)</th>
            <th>Net Pay (₹)</th>
            <th>Attendance</th>
          </tr>
        </thead>
        <tbody>
          {% for row in payroll_preview %}
            {# Optional row highlight if FnF #}
            {% set row_cls = 'table-info' if row.fnf_tag else '' %}
            <tr class="{{ row_cls }}">
              <td>{{ loop.index }}</td>
              <td>{{ row.employee.employee_code }}</td>
              <td>{{ row.employee.department.name }}</td>
              <td>{{ row.employee.full_name }}</td>

              <td class="text-center">
                {# Backend should set: row.status_tag in {'active','notice'} (optional), row.fnf_tag True/False, row.lwd (date) #}
                {% if row.fnf_tag %}
                  <span class="badge bg-info" title="LWD: {{ row.lwd.strftime('%d %b %Y') if row.lwd }}">{{ 'FnF' }}</span>
                {% elif row.status_tag == 'notice' %}
                  <span class="badge bg-warning text-dark">Notice</span>
                {% else %}
                  <span class="badge bg-success">Active</span>
                {% endif %}
              </td>

              <td>{{ row.total_paid_days }}</td>
              <td>{{ row.present }}</td>
              <td><code>{{ row.leaves }}</code></td>
              <td>{{ row.holidays }}</td>
              <td>{{ row.weekends }}</td>
              <td>{{ row.lwp }}</td>
              <td>{{ "%.2f"|format(row.earnings) }}</td>
              <td>{{ "%.2f"|format(row.deductions) }}</td>
              <td>{{ "%.2f"|format(row.ctc) }}</td>
              <td><strong>{{ "%.2f"|format(row.net_pay) }}</strong></td>
              <td>
                <a href="{{ url_for('payroll.view_attendance_details', employee_id=row.employee.id, month=month, year=year) }}"
                   class="btn btn-sm btn-outline-primary">View</a>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="text-end">
      <button type="submit" class="btn btn-success">
        ✅ Freeze & Save Payroll
      </button>
    </div>
  </form>
</div>
{% endblock %}