{% extends "pos/base.html" %}
{% load static %}

{% block title %}Add Bonus{% endblock %}

{% block stylesheets %}
  <!-- Select2 CSS (after Bootstrap CSS in base) -->

{% endblock %}
{% block heading %}Add Bonus{% endblock %}
{% block content %}
  <div class="container py-4">
    <form method="post" id="bonusForm">
      {% csrf_token %}

      <!-- 1) STAFF SELECT (Select2 Autocomplete) -->
      <div class="mb-3 row">
        <label for="staff_select" class="col-sm-2 col-form-label">Staff</label>
        <div class="col-sm-6">
          <select
            id="staff_select"
            name="staff"
            class="form-select select2"
            style="width: 100%;"
            required
          >
            <option value=""></option>
          </select>
        </div>
      </div>

      <!-- 2) DATE FIELD -->
      <div class="mb-3 row">
        <label for="date" class="col-sm-2 col-form-label">Date</label>
        <div class="col-sm-4">
          <input
            type="date"
            id="date"
            name="date"
            value="{{ today|date:'Y-m-d' }}"
            class="form-control"
            required
          />
        </div>
      </div>

      <!-- 3) AMOUNT FIELD -->
      <div class="mb-3 row">
        <label for="amount" class="col-sm-2 col-form-label">Bonus Amount</label>
        <div class="col-sm-4">
          <input
            type="number"
            step="0.01"
            min="0"
            id="amount"
            name="amount"
            class="form-control"
            placeholder="0.00"
            required
          />
        </div>
      </div>

      <!-- 4) REMARKS FIELD -->
      <div class="mb-3 row">
        <label for="remarks" class="col-sm-2 col-form-label">Remarks</label>
        <div class="col-sm-6">
          <input
            type="text"
            id="remarks"
            name="remarks"
            class="form-control"
            placeholder="Optional remarks or description"
          />
        </div>
      </div>

      <div class="mb-3 row">
        <div class="col-sm-8 text-start">
          <button type="submit" class="btn btn-primary">Add</button>
          <a href="{% url 'payroll:bonus_list' %}" class="btn btn-secondary">Cancel</a>
        </div>
      </div>
    </form>
  </div>
{% endblock %}

{% block javascripts %}

  <!-- 3) Initialize the Staff select2 field -->
  <script>
    $(function() {
      // A) Grab CSRF token from the hidden input
      const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;

      // B) Common Select2 settings
      const common = { theme: 'bootstrap4', width: '100%' };

      // C) Init #staff_select exactly as in commission/overtime pages
      $('#staff_select').select2({
        ...common,
        placeholder: 'Search staff…',
        minimumInputLength: 1,
        allowClear: true,
        dropdownParent: $(document.body),

        ajax: {
          url: '{% url "payroll:staff_autocomplete" %}',
          type: 'POST',
          headers: { 'X-CSRFToken': csrftoken },
          delay: 250,
          data: params => ({ term: params.term }),
          processResults: data => {
            // Endpoint might return either:
            //   1) An array:   [ { value, label }, … ]
            //   2) An object: { results: [ {id, text}, … ] }
            let items;
            if (Array.isArray(data)) {
              items = data;
            } else if (Array.isArray(data.results)) {
              items = data.results;
            } else {
              items = [];
            }

            // Normalize {id, text}
            const mapped = items.map(v => ({
              id:   (v.value !== undefined ? v.value : v.id),
              text: (v.label !== undefined ? v.label : v.text)
            }));
            return { results: mapped };
          },
          cache: true
        },
        templateResult: r => (r.loading ? r.text : $('<div>' + r.text + '</div>')),
        templateSelection: r => r.text
      }).on('select2:open', () => {
        // Auto‐focus the search field
        setTimeout(() => {
          const fld = document.querySelector(
            '.select2-container--open .select2-search__field'
          );
          if (fld) fld.focus();
        }, 0);
      });

      // D) Validate on submit
      $('#bonusForm').on('submit', function(e) {
        if (!$('#staff_select').val()) {
          alert('Please select a staff member.');
          e.preventDefault();
        }
      });
    });
  </script>
{% endblock %}