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

{# ─────────────────────────────────────────────────────────────────────── #}
{% block title %}Add Commission{% endblock %}

{% block stylesheets %}

{% endblock %}

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

      <!-- ──────────────────────────────────────────────────────────────────── -->


      <div class="mb-3 row">
        <label for="staff_select" class="col-sm-2 col-form-label">Staff</label>
        <div class="col-sm-6">
          {# NOTE: Use class="form-select select2" instead of form-control. #}
          <select
            id="staff_select"
            name="staff"
            class="form-select select2"
            style="width: 100%;"
            required
          >
            {# This blank <option> is required so Select2 can show the placeholder #}
            <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">Amount</label>
        <div class="col-sm-4">
          <input
            type="number"
            step="0.01"
            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"
          >
        </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:commission_list' %}" class="btn btn-secondary">Cancel</a>
        </div>
      </div>
    </form>
  </div>
{% endblock %}


{% block javascripts %}



  {# 3) Our custom initialization code for the Staff field #}
  <script>
    $(function(){
      // 3.A) Grab CSRF token from the form
      console.log("Hello wWordl");
      const common = { theme: 'bootstrap4', width: '100%' };
      console.log(common);

      // 2) grab CSRF token
      const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;

      // 3) Vendor Select2
      $('#staff_select').select2({
        ...common,
        placeholder: 'Search Staff',
        minimumInputLength: 1,
        allowClear: true,
        dropdownParent: $(document.body),       // arrow-keys work reliably
        ajax: {
          url: '{% url "payroll:staff_autocomplete" %}',
          type: 'POST',
          headers: { 'X-CSRFToken': csrftoken },
          delay: 250,
          data: params => ({ term: params.term }),
          processResults: data => {
            console.log("Data , ", data)
            // data might be an array or { results: [...] }
            let items = Array.isArray(data)
              ? data
              : Array.isArray(data.results)
                ? data.results
                : [];

            // normalize vendor items (expecting { value, label } or { id, text })
            const mapped = items.map(v => ({
              id:   v.value ?? v.id,
              text: 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', () => {
        // focus the search field so arrow keys will work immediately
        setTimeout(() => {
          const fld = document.querySelector(
            '.select2-container--open .select2-search__field'
          );
          if (fld) fld.focus();
        }, 0);
      });








      // 3.C) Simple validation: make sure the user picks a staff before submitting
      $('#commissionForm').on('submit', function(e) {
        if (!$('#staff_select').val()) {
          alert('Please select a staff member.');
          e.preventDefault();
        }
      });
    });
  </script>
  
{% endblock %}