{% extends "base.html" %}
{% block content %}
<div class="container mt-4" style="max-width: 800px;">
  <div class="card shadow-sm">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="mb-0">
        <i class="bi bi-upload me-2"></i> Bulk Assign Salary (Excel Upload)
      </h5>
      <a href="{{ url_for('payroll.bulk_salary_structure_template') }}"
         class="btn btn-sm btn-outline-primary">
        <i class="bi bi-file-earmark-excel me-1"></i> Download Template
      </a>
    </div>
    <div class="card-body">
      <p class="text-muted small mb-3">
        1. Click <strong>Download Template</strong> to get an Excel file with all active employees
        and all salary components (earnings, deductions, CTC).<br>
        2. Fill or update the component amounts in that file.<br>
        3. Upload the same file here. Existing salary structures for those employees will be replaced.
      </p>

      <form method="POST" enctype="multipart/form-data">
        <div class="mb-3">
          <label class="form-label fw-semibold">Select Excel file (.xlsx)</label>
          <input type="file" name="file" accept=".xlsx,.xls" class="form-control" required>
        </div>

        <div class="d-flex justify-content-end">
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-cloud-arrow-up me-1"></i> Upload &amp; Process
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}