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

{% block title %}Bulk Edit Customers{% endblock %}
{% block heading %}Bulk Edit Customers{% endblock %}

{% block stylesheets %}
  {{ block.super }}

  <style>
    .form-inline .form-group { margin-right: 1rem; }
    .dirty-cell { background: #fff3cd !important; }  /* pale yellow */
    .tabulator { font-size: 0.92rem; }
    /* filer_status tick/cross centering */
    .tabulator-cell .tabulator-tick,
    .tabulator-cell .tabulator-cross { font-size: 1rem; }
  </style>
{% endblock %}

{% block content %}

<div class="mb-3">
  <a href="{% url 'customers:customers_list' %}">
    <button type="button" class="btn btn-info font-weight-bold">
      <i class="fas fa-long-arrow-alt-left mr-2"></i>Back to Customers
    </button>
  </a>
</div>

<div class="card mb-3">
  <div class="card-body">
    <form id="filterForm" class="form-inline">
      <div class="form-group mb-2">
        <label for="filter_name" class="mr-2">Customer Name</label>
        <input type="text"
               id="filter_name"
               class="form-control"
               style="min-width:220px"
               placeholder="contains...">
      </div>

      <div class="form-group mb-2">
        <label for="filter_area" class="mx-3">Sale Area</label>
        <select id="filter_area" class="form-control" style="min-width:220px">
          <option value="">All</option>
          {% for a in sale_areas %}
            <option value="{{ a.t_id }}">{{ a.area_name }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="form-group mb-2">
        <label for="filter_booker" class="mx-3">Order Booker</label>
        <select id="filter_booker" class="form-control" style="min-width:220px">
          <option value="">All</option>
          {% for b in order_bookers %}
            <option value="{{ b.t_id }}">{{ b.name }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="form-group mb-2 mx-3">
        <label for="limit" class="mr-2">Limit</label>
        <input id="limit"
               type="number"
               class="form-control"
               value="1000"
               min="1"
               step="1"
               style="width:110px"
               title="Max rows">
      </div>

      <button id="btnFilter" type="button" class="btn btn-primary font-weight-bold mb-2">
        <i class="fas fa-search mr-1"></i>Load
      </button>
    </form>
  </div>
</div>

<div class="d-flex justify-content-between align-items-center mb-2">
  <div>
    <button id="btnSave" type="button" class="btn btn-success font-weight-bold">
      <i class="fas fa-save mr-1"></i> Save Changes
    </button>
    <button id="btnDiscard" type="button" class="btn btn-secondary">
      Discard
    </button>
  </div>
  <div id="statusBox" class="text-muted">No changes</div>
</div>

<div id="grid" class="mb-4"></div>

{% endblock %}

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

  <!-- Preloaded areas & bookers for grid editors -->
  <script id="sale-areas-data" type="application/json">
    {{ sale_areas_json|safe }}
  </script>
  <script id="order-bookers-data" type="application/json">
    {{ order_bookers_json|safe }}
  </script>

  <script>
    (function($){

      // ---------- Lookup data (Areas / Bookers) ----------
      const SALE_AREAS   = JSON.parse(document.getElementById('sale-areas-data').textContent   || '[]');
      const ORDER_BOOKERS= JSON.parse(document.getElementById('order-bookers-data').textContent || '[]');

      const areaValues = {};
      SALE_AREAS.forEach(a => { areaValues[String(a.t_id)] = a.area_name; });

      const bookerValues = {};
      ORDER_BOOKERS.forEach(b => { bookerValues[String(b.t_id)] = b.name; });

      function lookupArea(id)  { return areaValues[String(id)]   || ''; }
      function lookupBooker(id){ return bookerValues[String(id)]  || ''; }

      // ---------- CSRF helper ----------
      function getCookie(name){
        const m = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
        return m ? m.pop() : '';
      }
      const CSRF = getCookie('csrftoken') || '{{ csrf_token }}';

      // ---------- Filters: Select2 ----------
      $('#filter_area, #filter_booker').select2({
        width: 'resolve',
        allowClear: true,
        placeholder: 'All'
      });

      // ---------- Change tracking ----------
      let changedMap = new Map();  // id -> { field: value, ... }

      function updateStatus(){
        const n = changedMap.size;
        $('#statusBox').text(n ? (n + " row(s) changed") : "No changes");
      }

      // ---------- Custom date editor for Tabulator ----------
      function dateEditor(cell, onRendered, success, cancel){
        const input = document.createElement("input");
        input.type  = "date";
        input.value = cell.getValue() || '';
        input.style.width   = "100%";
        input.style.padding = "2px 4px";
        input.style.border  = "none";
        input.style.outline = "none";

        onRendered(function(){ input.focus(); });

        input.addEventListener("blur",    function(){ success(input.value); });
        input.addEventListener("keydown", function(e){
          if(e.key === "Enter")  { e.preventDefault(); success(input.value); }
          if(e.key === "Escape") { cancel(); }
        });

        return input;
      }

      // ---------- Grid columns ----------
      function gridColumns(){
        const txt = "input";
        const num = "input";
        return [
          // ── Read-only identifiers ──────────────────────────────────────────
          { title:"ID",   field:"id",   width:70, hozAlign:"right",
            headerSort:false, cssClass:"text-muted", editable:false },
          { title:"T-ID", field:"t_id", width:80, hozAlign:"right",
            headerSort:false, cssClass:"text-muted", editable:false },

          // ── Core fields ────────────────────────────────────────────────────
          { title:"Name",    field:"name",    editor:txt },
          { title:"Balance", field:"balance", editor:num, width:100 },
          { title:"Address", field:"address", editor:txt, width:200 },
          { title:"Mobile",  field:"mobile",  editor:txt, width:130 },

          // ── Lookup dropdowns ───────────────────────────────────────────────
          {
            title:"Sale Area", field:"sale_area_id",
            editor:"list",
            editorParams:{
              values: areaValues, clearable:true,
              autocomplete:true, listOnEmpty:true, freetext:false,
            },
            formatter: function(cell){ return lookupArea(cell.getValue()); }
          },
          {
            title:"Order Booker", field:"order_booker_id",
            editor:"list",
            editorParams:{
              values: bookerValues, clearable:true,
              autocomplete:true, listOnEmpty:true, freetext:false,
            },
            formatter: function(cell){ return lookupBooker(cell.getValue()); }
          },

          // ── Text fields ────────────────────────────────────────────────────
          { title:"Person Name", field:"person_name", editor:txt },
          { title:"CNIC",        field:"cnic",        editor:txt, width:140 },
          { title:"NTN",         field:"ntn_num",     editor:txt, width:120 },
          {
            title:"Type", field:"type_c",
            editor:"list",
            editorParams:{
              values:{
                "":"(blank)",
                "Local Sale":"Local Sale",
                "Whole Sale":"Whole Sale",
                "Supplier":"Supplier",
                "Branches":"Branches",
              },
              clearable:true,
            },
            width:120,
          },
          { title:"Urdu Name", field:"urdu_name", editor:txt, width:130 },
          { title:"Street No", field:"str_no",    editor:txt, width:110 },

          // ── New fields ─────────────────────────────────────────────────────
          { title:"License No", field:"license_no", editor:txt, width:130 },
          {
            title:"Lic. Expiry", field:"license_expiry",
            width:130,
            editor: dateEditor,
            formatter: function(cell){
              return cell.getValue() || '';
            }
          },
          {
            title:"Filer",
            field:"filer_status",
            width:70,
            hozAlign:"center",
            formatter:"tickCross",
            formatterParams:{ crossElement: "✗", tickElement: "✓" },
            editor:"tickCross",
            editorParams:{ tristate: false },
            // cellEdited fires normally — no special handling needed
          },
        ];
      }

      // ---------- Tabulator init ----------
      const table = new Tabulator("#grid", {
        height: "65vh",
        layout: "fitDataStretch",
        movableColumns: true,
        columns: gridColumns(),
        index: "id",
      });

      // ---------- Change tracking: event-based ----------
      table.on("cellEdited", function(cell){
        const row   = cell.getRow().getData();
        const id    = row.id;
        const field = cell.getField();
        const val   = cell.getValue();

        if(!changedMap.has(id)) changedMap.set(id, {});
        changedMap.get(id)[field] = val;
        cell.getElement().classList.add("dirty-cell");
        updateStatus();
      });

      // ---------- Editable columns list ----------
      function getEditableFields(){
        return table.getColumns()
          .filter(c => !!c.getDefinition().editor)
          .map(c => c.getField());
      }

      function focusCellEdit(targetCell){
        if(!targetCell) return;
        targetCell.edit(true);
        setTimeout(function(){
          const el = targetCell.getElement().querySelector("input,textarea,select");
          if(!el) return;
          el.focus();
          if(el.select){ try{ el.select(); }catch(e){} }
        }, 0);
      }

      function moveEditFrom(cell, dir){
        if(!cell) return;
        const row      = cell.getRow();
        const field    = cell.getField();
        const editable = getEditableFields();
        if(!editable.length) return;

        if(dir === "left" || dir === "right"){
          let idx = editable.indexOf(field);
          if(idx === -1) idx = 0;
          idx = (dir === "left")
            ? Math.max(0, idx - 1)
            : Math.min(editable.length - 1, idx + 1);
          return focusCellEdit(row.getCell(editable[idx]));
        }

        if(dir === "up" || dir === "down"){
          const nextRow = (dir === "up") ? row.getPrevRow() : row.getNextRow();
          if(!nextRow) return;
          let targetField = editable.includes(field) ? field : editable[0];
          return focusCellEdit(nextRow.getCell(targetField));
        }
      }

      // ---------- Keyboard navigation ----------
      table.on("cellEditing", function(cell){
        setTimeout(function(){
          const el = cell.getElement().querySelector("input,textarea,select");
          if(!el) return;

          if(el.select){ try{ el.select(); }catch(e){} }

          el.addEventListener("keydown", function(e){
            if(e.key === "Enter"){
              e.preventDefault(); el.blur();
              setTimeout(function(){ moveEditFrom(cell, "down"); }, 0);
            } else if(e.key === "ArrowUp"){
              e.preventDefault(); el.blur();
              setTimeout(function(){ moveEditFrom(cell, "up"); }, 0);
            } else if(e.key === "ArrowDown"){
              e.preventDefault(); el.blur();
              setTimeout(function(){ moveEditFrom(cell, "down"); }, 0);
            } else if(e.key === "ArrowLeft"){
              e.preventDefault(); el.blur();
              setTimeout(function(){ moveEditFrom(cell, "left"); }, 0);
            } else if(e.key === "ArrowRight"){
              e.preventDefault(); el.blur();
              setTimeout(function(){ moveEditFrom(cell, "right"); }, 0);
            }
          });
        }, 0);
      });

      // ---------- Filter button ----------
      $("#btnFilter").on("click", function(){
        const name     = ($("#filter_name").val() || "").trim();
        const areaId   = $("#filter_area").val()   || "";
        const bookerId = $("#filter_booker").val()  || "";
        const limit    = $("#limit").val()          || 1000;

        const url = "{% url 'customers:customers_bulk_fetch' %}"
          + "?name="      + encodeURIComponent(name)
          + "&area_id="   + encodeURIComponent(areaId)
          + "&booker_id=" + encodeURIComponent(bookerId)
          + "&limit="     + encodeURIComponent(limit);

        $.getJSON(url, function(resp){
          changedMap.clear();
          updateStatus();
          table.setData(resp.rows || []);
        });
      });

      // ---------- Save button ----------
      $("#btnSave").on("click", function(){
        if(changedMap.size === 0){
          alert("Koi change nahi mila.");
          return;
        }

        const changes = [];
        changedMap.forEach(function(fields, id){
          changes.push({ id: id, fields: fields });
        });

        fetch("{% url 'customers:customers_bulk_save' %}", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "X-CSRFToken": CSRF,
          },
          body: JSON.stringify({ changes: changes })
        })
        .then(r => r.json())
        .then(res => {
          const results  = res.results || [];
          const okCount  = results.filter(x =>  x.ok).length;
          const fail     = results.filter(x => !x.ok);

          if(okCount)    alert(okCount + " row(s) saved.");
          if(fail.length){
            console.warn("Failed rows:", fail);
            alert("Kuch rows save nahi hui. Console me details dekh lo.");
          }

          $("#btnFilter").click();   // fresh reload
        })
        .catch(err => {
          console.error(err);
          alert("Save error.");
        });
      });

      // ---------- Discard ----------
      $("#btnDiscard").on("click", function(){
        changedMap.clear();
        updateStatus();
        $("#btnFilter").click();
      });

      // initial load
      $("#btnFilter").click();

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