{% extends "pos/base.html" %}
{% block title %}Edit Service{% endblock title %}
{% block heading %}Edit 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>

  <!-- ═══════ TOP SEARCH BAR ═══════ -->
  <div class="card mb-3">
    <div class="card-body">
      <div class="form-row">
        <div class="form-group col-12 mb-0">
          <label>Service Name</label>
          <select id="qe_service_name" class="form-control"><option></option></select>
          <small class="text-muted">Search service by name to load and edit.</small>
        </div>
      </div>
    </div>
  </div>

  <!-- ═══════ EDIT FORM ═══════ -->
  <div class="row">
    <div class="card col-12 col-md-8">
      <div class="card-body">
        <form id="quick-edit-form" method="post">
          {% csrf_token %}
          <input type="hidden" id="qe_product_id" name="product_id" value="">

          <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" required>
            </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" required>
            </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>

          <!-- ═══ BUTTONS ═══ -->
          <div class="d-flex justify-content-between align-items-center">
            <button type="button" id="qe_save_btn"
                    class="btn btn-success font-weight-bold">
              <i class="fas fa-save mr-1"></i> Update Service
              <small class="ml-1">(Ctrl+S)</small>
            </button>
            <button type="button" id="qe_delete_btn"
                    class="btn btn-danger font-weight-bold">
              <i class="fas fa-trash-alt mr-1"></i> Delete Service
              <small class="ml-1">(Ctrl+D)</small>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- ═══ DELETE CONFIRMATION MODAL ═══ -->
  <div class="modal fade" id="deleteConfirmModal" tabindex="-1" role="dialog"
       aria-labelledby="deleteConfirmLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header bg-danger text-white">
          <h5 class="modal-title" id="deleteConfirmLabel">
            <i class="fas fa-exclamation-triangle mr-2"></i>Confirm Delete
          </h5>
          <button type="button" class="close text-white" data-dismiss="modal"
                  aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
          <p class="mb-1">Do you want to <strong>Delete</strong> this service?</p>
          <p class="text-danger font-weight-bold mb-0" id="delete_service_name"></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            <i class="fas fa-times mr-1"></i> No, Cancel
          </button>
          <button type="button" class="btn btn-danger font-weight-bold"
                  id="confirm_delete_btn">
            <i class="fas fa-trash-alt mr-1"></i> Yes, Delete
          </button>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}


{% block javascripts %}
  {{ block.super }}

  <script>
  $(document).on('select2:open', function() {
    setTimeout(function() {
      document.querySelector('.select2-container--open .select2-search__field')?.focus();
    }, 0);
  });

  document.addEventListener('DOMContentLoaded', function() {

    var $nameTop = $('#qe_service_name');
    var $form    = $('#quick-edit-form');
    var $pid     = $('#qe_product_id');

    function csrf() { return '{{ csrf_token }}'; }

    /* ── Toast ─────────────────────────────────────────────────────── */
    function showToast(msg, type) {
      type = type || 'success';
      var $t = $(
        '<div class="alert alert-' + type +
        ' alert-dismissible fade show position-fixed" ' +
        'style="top:70px;right:20px;z-index:9999;min-width:320px;">' +
        msg +
        '<button type="button" class="close" data-dismiss="alert">&times;</button>' +
        '</div>'
      );
      $('body').append($t);
      setTimeout(function(){ $t.alert('close'); }, 2500);
    }

    /* ── Enter = next field inside form ────────────────────────────── */
    $form.on('keydown', function(e) {
      if (e.key !== 'Enter') return;
      if (document.querySelector('.select2-container--open')) { e.preventDefault(); return; }
      e.preventDefault();
      var fields = Array.from($form[0].querySelectorAll('input, select, textarea'))
        .filter(function(el) {
          return !el.disabled && el.type !== 'hidden' && el.type !== 'submit';
        });
      var idx = fields.indexOf(e.target);
      if (idx > -1 && idx + 1 < fields.length) {
        var next = fields[idx + 1];
        if (next.tagName.toLowerCase() === 'select' && $(next).data('select2')) {
          $(next).select2('open');
        } else {
          next.focus();
        }
      }
    });

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

    /* ── Select2: Name search (top bar) ───────────────────────────── */
    $nameTop.select2({
      ajax: {
        url: '{% url "products:search_services_for_edit" %}',
        type: 'POST',
        headers: { 'X-CSRFToken': csrf() },
        data: function(params) { return { term: params.term }; },
        processResults: function(data) { return { results: data }; }
      },
      placeholder: 'Search service by name…',
      allowClear: true,
      minimumInputLength: 1
    });

    /* ── 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 category…',
      allowClear: true,
      minimumInputLength: 1
    });

    /* ── helpers ───────────────────────────────────────────────────── */
    function setSelect2Value($sel, value) {
      if (!value) { $sel.val(null).trigger('change'); return; }
      var opt = new Option(value, value, true, true);
      $sel.append(opt).trigger('change');
    }

    function fillForm(p) {
      $pid.val(p.id);
      $('#id_name').val(p.name || '');
      $('#l_sale_price').val(p.l_sale_price ?? '');
      setSelect2Value($('#id_prod_category'), p.prod_category || '');
    }

    function clearAll() {
      $pid.val('');
      $nameTop.val(null).trigger('change');
      $form[0].reset();
      $('#id_prod_category').val(null).trigger('change');
    }

    /* ── AJAX lookup ──────────────────────────────────────────────── */
    function lookup(payload) {
      return $.ajax({
        url:     '{% url "products:service_lookup" %}',
        method:  'POST',
        headers: { 'X-CSRFToken': csrf() },
        data:    payload
      });
    }

    /* ── Top name select → load ───────────────────────────────────── */
    $nameTop.on('select2:select', function(e) {
      var pid = e.params.data.id;
      lookup({ product_id: pid }).done(function(res) {
        if (!res.ok) { showToast(res.message || 'Not found', 'warning'); return; }
        fillForm(res.product);
        $('#id_name').focus();
      });
    });

    /* ═══════════════════════════════════════════════════════════════
       SAVE
       ═══════════════════════════════════════════════════════════════ */
    function saveQuick() {
      var pidVal = ($pid.val() || '').trim();
      if (!pidVal) {
        showToast('Pehlay service load karein (name se search karein).', 'warning');
        return;
      }
      $.ajax({
        url:     '{% url "products:service_quick_save" %}',
        method:  'POST',
        headers: { 'X-CSRFToken': csrf() },
        data:    $form.serialize()
      }).done(function(res) {
        if (!res.ok) { showToast(res.message || 'Save failed', 'danger'); return; }
        showToast(res.message || 'Saved!', 'success');
        clearAll();
        $nameTop.select2('open');
      }).fail(function() {
        showToast('Server error during save.', 'danger');
      });
    }

    $('#qe_save_btn').on('click', saveQuick);

    /* ═══════════════════════════════════════════════════════════════
       DELETE
       ═══════════════════════════════════════════════════════════════ */
    function triggerDelete() {
      var pidVal = ($pid.val() || '').trim();
      if (!pidVal) {
        showToast('Pehlay service load karein (name se search karein).', 'warning');
        return;
      }
      var sName = $('#id_name').val() || 'this service';
      $('#delete_service_name').text(sName);
      $('#deleteConfirmModal').modal('show');

      $('#deleteConfirmModal').off('shown.bs.modal').on('shown.bs.modal', function() {
        $('#confirm_delete_btn').focus();
      });
    }

    $('#qe_delete_btn').on('click', triggerDelete);

    $('#confirm_delete_btn').on('click', function() {
      var pidVal = ($pid.val() || '').trim();
      if (!pidVal) return;

      $.ajax({
        url:     '{% url "products:service_quick_delete" %}',
        method:  'POST',
        headers: { 'X-CSRFToken': csrf() },
        data:    { product_id: pidVal }
      }).done(function(res) {
        $('#deleteConfirmModal').modal('hide');
        if (!res.ok) { showToast(res.message || 'Delete failed', 'danger'); return; }
        showToast(res.message || 'Deleted!', 'success');
        clearAll();
        setTimeout(function() {
          $nameTop.select2('open');
        }, 300);
      }).fail(function() {
        $('#deleteConfirmModal').modal('hide');
        showToast('Server error during delete.', 'danger');
      });
    });

    /* ═══════════════════════════════════════════════════════════════
       KEYBOARD SHORTCUTS
       ═══════════════════════════════════════════════════════════════ */
    document.addEventListener('keydown', function(e) {
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
        e.preventDefault(); saveQuick();
      }
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'd') {
        e.preventDefault(); triggerDelete();
      }
    });

    $('#deleteConfirmModal').on('keydown', function(e) {
      if (e.key === 'Enter') { e.preventDefault(); $('#confirm_delete_btn').click(); }
    });

    /* ═══════════════════════════════════════════════════════════════
       AUTO-LOAD from URL  (e.g. /products/services/edit/42)
       ═══════════════════════════════════════════════════════════════ */
    {% if auto_load_product_id %}
    (function() {
      var autoId = '{{ auto_load_product_id|escapejs }}';
      if (!autoId) return;
      lookup({ product_id: autoId }).done(function(res) {
        if (!res.ok) {
          showToast(res.message || 'Service not found for auto-load.', 'warning');
          $nameTop.select2('open');
          return;
        }
        fillForm(res.product);
        $('#id_name').focus();
      }).fail(function() {
        showToast('Server error while auto-loading service.', 'danger');
        $nameTop.select2('open');
      });
    })();
    {% else %}
    $nameTop.select2('open');
    {% endif %}

  });
  </script>
{% endblock %}