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

{% block title %}Add Overtime{% endblock %}

{% block stylesheets %}
  <!-- Select2 CSS (must come after Bootstrap’s CSS in base.html) -->

{% endblock %}
{% block heading %}Add Overtime{% endblock %}
{% block content %}
  <div class="container py-4">
    <form method="post" id="overtimeForm">
      {% 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">Overtime 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:overtime_list' %}" class="btn btn-secondary">Cancel</a>
        </div>
      </div>
    </form>
  </div>
{% endblock %}

{% block javascripts %}
  <!-- (1) jQuery core should already be loaded in pos/base.html. -->
  <!-- (2) Load Select2 JS -->


  <!-- (3) Initialize the Staff select2 exactly like commission_add.html: -->
  <script>
    $(function() {
      // Grab CSRF token from the form
      const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;

      // Common Select2 settings (Bootstrap4 theme + full width)
      const common = { theme: 'bootstrap4', width: '100%' };

      // Initialize #staff_select as a Select2 autocomplete
      $('#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 => {
            // The endpoint might return either:
            // 1) An array:   [ { value, label }, { 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 each item into { id, text } format Select2 expects
            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 inside the dropdown:
        setTimeout(() => {
          const fld = document.querySelector(
            '.select2-container--open .select2-search__field'
          );
          if (fld) fld.focus();
        }, 0);
      });

      // Simple validation: ensure staff is chosen
      $('#overtimeForm').on('submit', function(e) {
        if (!$('#staff_select').val()) {
          alert('Please select a staff member.');
          e.preventDefault();
        }
      });
    });
  </script>
{% endblock %}