{% extends "base.html" %}
{% block content %}
<div class="container-fluid py-3">
  <!-- Title + Help -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      <i class="bi bi-sliders me-2"></i> Component Alias Mapping
    </h4>
    <a href="{{ url_for('payroll.consolidated_salary_view') }}" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-arrow-left me-1"></i> Back to Consolidated View
    </a>
  </div>

  <div class="alert alert-info border-0 shadow-sm small">
    <div class="d-flex">
      <div class="me-2">
        <i class="bi bi-info-circle fs-5"></i>
      </div>
      <div>
        <strong>What is this?</strong><br>
        Map system-wide logical keys like <code>basic</code>, <code>hra</code>, <code>pf</code> to actual salary heads.
        These mappings are used in consolidated salary, Excel downloads, PF calculation, and disbursement sheet.
      </div>
    </div>
  </div>

  <div class="row g-3">
    <!-- Form -->
    <div class="col-lg-5">
      <div class="card shadow-sm border-0">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
          <strong id="formTitle">Add / Update Mapping</strong>
          <button type="button" class="btn btn-sm btn-outline-secondary" id="btnResetForm">
            <i class="bi bi-arrow-counterclockwise me-1"></i> Reset
          </button>
        </div>
        <form method="POST" action="{{ url_for('payroll.component_aliases') }}">
          {{ csrf_token() if csrf_token is defined }}
          <div class="card-body">
            <!-- Logical key -->
            <div class="mb-3">
              <label class="form-label fw-semibold">Logical Key <span class="text-danger">*</span></label>
              <select name="logical_key" id="logicalKeySelect" class="form-select" required>
                <option value="">-- Select logical key --</option>
                {% set labels = {
                  "basic": "Basic",
                  "hra": "House Rent Allowance (HRA)",
                  "ta": "Conveyance / Transport (TA)",
                  "ma": "Medical Allowance",
                  "inc": "General Incentive",
                  "kpi": "KPI Incentive",
                  "laptop": "Laptop Incentive",
                  "arrear": "Arrears",
                  "pf": "Provident Fund (PF)",
                  "esi": "ESI",
                  "tds": "TDS",
                  "pt": "Professional Tax",
                  "adv": "Advance / Imprest",
                  "target": "Other Deduction / Target",
                  "mobile": "Excess Mobile"
                } %}
                {% for key in logical_keys %}
                  <option value="{{ key }}">{{ labels.get(key, key|upper) }}</option>
                {% endfor %}
              </select>
              <div class="form-text">
                This key is used in code & formulas. One mapping per logical key.
              </div>
            </div>

            <!-- Head type -->
            <div class="mb-3">
              <label class="form-label fw-semibold d-block">Head Type <span class="text-danger">*</span></label>
              <div class="btn-group" role="group" aria-label="Head type">
                <input type="radio" class="btn-check" name="head_type" id="typeEarning" value="earning" autocomplete="off" checked>
                <label class="btn btn-outline-primary btn-sm" for="typeEarning">
                  <i class="bi bi-plus-circle me-1"></i> Earning
                </label>

                <input type="radio" class="btn-check" name="head_type" id="typeDeduction" value="deduction" autocomplete="off">
                <label class="btn btn-outline-primary btn-sm" for="typeDeduction">
                  <i class="bi bi-dash-circle me-1"></i> Deduction
                </label>

                <input type="radio" class="btn-check" name="head_type" id="typeCTC" value="ctc" autocomplete="off">
                <label class="btn btn-outline-primary btn-sm" for="typeCTC">
                  <i class="bi bi-briefcase me-1"></i> CTC
                </label>
              </div>
              <div class="form-text">
                Choose which category the mapped head belongs to.
              </div>
            </div>

            <!-- Head name -->
            <div class="mb-3">
              <label class="form-label fw-semibold">Head Name <span class="text-danger">*</span></label>
              <select name="head_name" id="headNameSelect" class="form-select" required>
                <option value="">-- Select head --</option>
                {% for h in earning_heads %}
                  <option value="{{ h.name }}" data-type="earning">{{ h.name }}</option>
                {% endfor %}
                {% for h in deduction_heads %}
                  <option value="{{ h.name }}" data-type="deduction">{{ h.name }}</option>
                {% endfor %}
                {% for h in ctc_heads %}
                  <option value="{{ h.name }}" data-type="ctc">{{ h.name }}</option>
                {% endfor %}
              </select>
              <div class="form-text">
                This must match the exact name defined in the head master.
              </div>
            </div>

          </div>
          <div class="card-footer bg-light text-end">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-save me-1"></i> Save Mapping
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- Existing mappings -->
    <div class="col-lg-7">
      <div class="card shadow-sm border-0">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
          <strong>Existing Mappings</strong>
          <span class="badge bg-secondary">{{ existing_aliases|length }} configured</span>
        </div>
        <div class="card-body p-0">
          {% if existing_aliases %}
            <div class="table-responsive">
              <table class="table table-sm table-hover align-middle mb-0">
                <thead class="table-light">
                  <tr>
                    <th style="width: 60px;">#</th>
                    <th>Logical Key</th>
                    <th>Head Type</th>
                    <th>Head Name</th>
                    <th class="text-end" style="width: 90px;">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {% for alias in existing_aliases %}
                    <tr>
                      <td>{{ loop.index }}</td>
                      <td>
                        <span class="badge bg-primary-subtle text-primary border border-primary-subtle">
                          {{ alias.logical_key }}
                        </span>
                      </td>
                      <td class="text-capitalize">
                        {% if alias.head_type == 'earning' %}
                          <span class="badge bg-success-subtle text-success border border-success-subtle">
                            Earning
                          </span>
                        {% elif alias.head_type == 'deduction' %}
                          <span class="badge bg-danger-subtle text-danger border border-danger-subtle">
                            Deduction
                          </span>
                        {% else %}
                          <span class="badge bg-info-subtle text-info border border-info-subtle">
                            CTC
                          </span>
                        {% endif %}
                      </td>
                      <td>{{ alias.head_name }}</td>
                      <td class="text-end">
                        <button
                          type="button"
                          class="btn btn-sm btn-outline-primary btnEditMapping"
                          data-logical="{{ alias.logical_key }}"
                          data-type="{{ alias.head_type }}"
                          data-name="{{ alias.head_name }}"
                        >
                          <i class="bi bi-pencil-square"></i>
                        </button>
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          {% else %}
            <div class="p-3 text-muted small">
              No mappings configured yet. Use the form on the left to create the first mapping.
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Page scripts -->
<script>
  (function () {
    const headNameSelect = document.getElementById('headNameSelect');
    const logicalKeySelect = document.getElementById('logicalKeySelect');
    const formTitle = document.getElementById('formTitle');
    const btnResetForm = document.getElementById('btnResetForm');

    function getSelectedHeadType() {
      const radios = document.querySelectorAll('input[name="head_type"]');
      for (const r of radios) {
        if (r.checked) return r.value;
      }
      return 'earning';
    }

    function setHeadType(type) {
      const radio = document.querySelector(`input[name="head_type"][value="${type}"]`);
      if (radio) {
        radio.checked = true;
      }
      filterHeadNameOptions();
    }

    function filterHeadNameOptions() {
      if (!headNameSelect) return;
      const type = getSelectedHeadType();
      const options = headNameSelect.querySelectorAll('option');

      options.forEach(opt => {
        const optType = opt.getAttribute('data-type');
        if (!optType) {
          // placeholder
          opt.hidden = false;
          return;
        }
        opt.hidden = (optType !== type);
      });

      // If current selected is hidden, reset.
      const selectedOpt = headNameSelect.selectedOptions[0];
      if (selectedOpt && selectedOpt.hidden) {
        headNameSelect.value = '';
      }
    }

    function resetForm() {
      if (logicalKeySelect) logicalKeySelect.value = '';
      setHeadType('earning');
      headNameSelect.value = '';
      formTitle.textContent = 'Add / Update Mapping';
    }

    // Bind head type change
    document.querySelectorAll('input[name="head_type"]').forEach(r => {
      r.addEventListener('change', filterHeadNameOptions);
    });

    // Reset button
    if (btnResetForm) {
      btnResetForm.addEventListener('click', function () {
        resetForm();
      });
    }

    // Edit buttons
    document.querySelectorAll('.btnEditMapping').forEach(btn => {
      btn.addEventListener('click', function () {
        const logical = this.getAttribute('data-logical');
        const type = this.getAttribute('data-type');
        const name = this.getAttribute('data-name');

        if (logicalKeySelect) {
          logicalKeySelect.value = logical;
          logicalKeySelect.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }

        setHeadType(type);

        // Ensure options are filtered before setting value
        setTimeout(() => {
          if (headNameSelect) {
            headNameSelect.value = name;
          }
        }, 0);

        formTitle.textContent = 'Edit Mapping';
      });
    });

    // Initial filter
    filterHeadNameOptions();
  })();
</script>
{% endblock %}