{% extends 'base.html' %}
{% block content %}
<div class="container mt-4">
  <h3 class="text-primary mb-3">Leave Balance Allocation (Post‑Freeze)</h3>

  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for category, message in messages %}
        <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
          {{ message }}
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  {% if guard_exists and guard_batch %}
  <div class="alert alert-warning d-flex align-items-center justify-content-between">
    <div>
      <strong>Existing allocation found.</strong>
      Batch: <code>{{ guard_batch.batch_key }}</code>
      <span class="text-muted">— same FY, leave type & strategy not yet revoked.</span>
    </div>
    <form method="post" action="{{ url_for('leave.revoke_allocation_batch', batch_id=guard_batch.id) }}" class="ms-3">
      <button class="btn btn-sm btn-outline-danger"
              onclick="return confirm('Revoke this batch and restore previous balances?');">
        Revoke batch
      </button>
    </form>
  </div>
  {% endif %}

  <div class="card p-4 shadow-sm mb-4">
    <div class="row g-3">
      <div class="col-md-4">
        <label class="form-label">Leave Type</label>
        <select class="form-select" id="lt" form="applyForm" name="leave_type_id" required>
          <option value="">-- Select Leave Type --</option>
          {% for lt in leave_types %}
            <option value="{{ lt.id }}">{{ lt.name }} ({{ lt.code }})</option>
          {% endfor %}
        </select>
      </div>

      <div class="col-md-3">
        <label class="form-label">FY Label (Year)</label>
        <input type="number" class="form-control" form="applyForm" name="year"
               value="{{ selected_year or current_year }}" required>
        <div class="form-text">FY label = FY start year (Apr–Mar).</div>
      </div>

      <div class="col-md-3">
        <label class="form-label">Strategy</label>
        <select class="form-select" id="strategy" form="applyForm" name="strategy" required>
          <option value="monthly_credit">Monthly Credit</option>
          <option value="chl_earned_leave">Pre Defined EL Logic</option>
          <option value="annual">Annual Credit</option>
        </select>
      </div>

      <div class="col-md-2">
        <label class="form-label">Freeze till</label>
        <input type="month" class="form-control" id="freeze_till" form="applyForm" name="freeze_till"
               value="{{ freeze_default or (selected_year ~ '-08') }}">
        <div class="form-text">Months ≤ this are frozen (no re-credit).</div>
      </div>
    </div>

    <div class="row g-3 mt-3">
      <div class="col-md-2">
        <!-- PREVIEW -->
        <form id="previewForm" method="POST" action="{{ url_for('leave.leave_allocation_preview') }}">
          <input type="hidden" name="leave_type_id" id="pv_lt">
          <input type="hidden" name="strategy" id="pv_strategy">
          <input type="hidden" name="freeze_till" id="pv_freeze">
          <button type="submit" class="btn btn-outline-secondary w-100">Preview</button>
        </form>
      </div>
      <div class="col-md-3">
        <!-- APPLY -->
        <form id="applyForm" method="POST" action="{{ url_for('leave.leave_allocation') }}">
          <div class="form-check mb-2">
            <input class="form-check-input" type="checkbox" name="force" id="force">
            <label class="form-check-label" for="force">Force apply</label>
          </div>
          <button type="submit" class="btn btn-primary w-100">Run Batch</button>
        </form>
      </div>
    </div>
  </div>

  {% if batch_result %}
  <div class="card shadow-sm">
    <div class="card-header d-flex justify-content-between align-items-center">
      <div>
        <strong>Batch Results</strong> — {{ batch_result.leave_type }}
        {% if batch_result.batch_key %}
          <span class="ms-2 text-muted">Batch: <code>{{ batch_result.batch_key }}</code></span>
        {% endif %}
      </div>
    </div>
    <div class="table-responsive">
      <table class="table table-bordered m-0">
        <thead class="table-light">
          <tr>
            <th>#</th>
            <th>Employee</th>
            <th>Allocated (Δ)</th>
            <th>Remarks</th>
          </tr>
        </thead>
        <tbody>
          {% for entry in batch_result.entries %}
          <tr>
            <td>{{ loop.index }}</td>
            <td>{{ entry.employee_name }}</td>
            <td>{{ entry.allocated }}</td>
            <td>{{ entry.remark }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}
</div>

<script>
  // Keep the Preview form in sync with the main selectors
  (function(){
    const lt = document.getElementById('lt');
    const st = document.getElementById('strategy');
    const fr = document.getElementById('freeze_till');
    const pv_lt = document.getElementById('pv_lt');
    const pv_st = document.getElementById('pv_strategy');
    const pv_fr = document.getElementById('pv_freeze');

    function sync() {
      pv_lt.value = lt.value || '';
      pv_st.value = st.value || '';
      pv_fr.value = fr.value || '';
    }
    lt.addEventListener('change', sync);
    st.addEventListener('change', sync);
    fr.addEventListener('change', sync);
    sync();
  })();
</script>
{% endblock %}