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

{% block title %}Add Service{% endblock title %}
{% block heading %}Add Service{% endblock heading %}

{% block stylesheets %}
  {{ block.super }}
  <style>.select2-container{width:100%!important;}</style>
{% endblock %}

{% block content %}
  <div class="row ml-0 mb-3">
    <a href="{% url 'products:services_list' %}">
      <button type="button" class="btn btn-info font-weight-bold">
        <i class="fas fa-long-arrow-alt-left mr-2"></i> Go back
      </button>
    </a>
  </div>

  {% with fd=form_data %}
  <div class="row">
    <div class="card col-12 col-md-8">
      <div class="card-body">
        <form id="add-service-form"
              action="{% url 'products:services_add' %}"
              method="post">
          {% csrf_token %}

          <fieldset class="border p-3 mb-4">
            <legend class="w-auto px-2">Service Details</legend>

            <!-- Service Name -->
            <div class="form-group">
              <label for="id_name">Service Name <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="id_name" name="name"
                     placeholder="e.g. Haircut, Facial, Manicure"
                     required
                     value="{{ fd.name|default:'' }}">
            </div>

            <!-- Price -->
            <div class="form-group">
              <label for="l_sale_price">Price <span class="text-danger">*</span></label>
              <input type="number" step="any" class="form-control"
                     id="l_sale_price" name="l_sale_price"
                     placeholder="0"
                     required
                     value="{{ fd.l_sale_price|default:'' }}">
            </div>

            <!-- Category -->
            <div class="form-group">
              <label for="id_prod_category">Category</label>
              <select id="id_prod_category" name="prod_category"
                      class="form-control">
                <option></option>
              </select>
              <small>
                <a href="{% url 'products:categories_add' %}" target="_blank">
                  + Add New Category
                </a>
              </small>
            </div>
          </fieldset>

          <button type="submit" class="btn btn-success font-weight-bold">
            <i class="fas fa-plus mr-1"></i> Create Service
          </button>
        </form>
      </div>
    </div>
  </div>
  {% endwith %}
{% endblock content %}

{% block javascripts %}
  {{ block.super }}
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    var form = document.getElementById('add-service-form');

    // ── Category Select2 ──
    $('#id_prod_category').select2({
      ajax: {
        url: '{% url "products:categories_autocomplete" %}',
        data: function(params) { return { term: params.term }; },
        processResults: function(data) { return { results: data }; }
      },
      placeholder: 'Search or add a category',
      allowClear: true,
      minimumInputLength: 1
    });

    // Auto-focus search when select2 opens
    $(document).on('select2:open', function() {
      setTimeout(function() {
        document.querySelector('.select2-container--open .select2-search__field')?.focus();
      }, 0);
    });

    // Re-inject previously chosen Category on error
    {% if form_data.prod_category %}
    var catOption = new Option(
      "{{ form_data.prod_category|escapejs }}",
      "{{ form_data.prod_category|escapejs }}",
      true, true
    );
    $('#id_prod_category').append(catOption).trigger('change');
    {% endif %}

    // ── Enter = next field ──
    var fields = function() {
      return Array.from(form.querySelectorAll('input, select, textarea'))
        .filter(function(el) {
          return !el.disabled && el.type !== 'hidden' && el.type !== 'submit';
        });
    };

    form.addEventListener('keydown', function(e) {
      if (e.key !== 'Enter') return;
      if (document.querySelector('.select2-container--open')) {
        e.preventDefault();
        return;
      }
      e.preventDefault();
      var f = fields();
      var idx = f.indexOf(e.target);
      if (idx > -1 && idx + 1 < f.length) {
        var next = f[idx + 1];
        if (next.tagName.toLowerCase() === 'select' && $(next).data('select2')) {
          $(next).select2('open');
        } else {
          next.focus();
        }
      } else {
        form.submit();
      }
    });

    // Prevent Enter inside Select2 search from submitting
    $(document).on('keydown', '.select2-search--dropdown .select2-search__field', function(e) {
      if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); }
    });

    // ── Ctrl+S to save ──
    document.addEventListener('keydown', function(e) {
      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
        e.preventDefault();
        form.submit();
      }
    });

    // Auto-focus name field
    document.getElementById('id_name').focus();
  });
  </script>
{% endblock javascripts %}