{% extends "pos/base.html" %}
{% load static %}
{% block title %}Bulk Order Booker Reassign{% endblock %}
{% block heading %}Bulk Order Booker Reassign{% endblock %}

{% block stylesheets %}{{ block.super }}
<style>
:root {
  --bkr-dark:   #0f2942;
  --bkr-mid:    #1d4e74;
  --bkr-accent: #2563eb;
  --bkr-light:  #dbeafe;
  --bkr-border: #bfdbfe;
  --gray-50:    #f9fafb;
  --gray-100:   #f3f4f6;
  --gray-200:   #e5e7eb;
  --gray-300:   #d1d5db;
  --gray-500:   #6b7280;
  --gray-700:   #374151;
  --gray-800:   #1f2937;
  --red:        #dc2626;
  --amber:      #d97706;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
  --radius:     8px;
}
.bkr-wrap { padding: 16px; font-family: 'Segoe UI', system-ui, sans-serif; color: var(--gray-800); }

.bkr-header {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, var(--bkr-dark) 0%, var(--bkr-mid) 100%);
  color: #fff; border-radius: var(--radius); padding: 14px 20px; margin-bottom: 16px;
  box-shadow: var(--shadow-md);
}
.bkr-header .logo-badge {
  background: var(--bkr-accent); color: #fff; font-weight: 800;
  font-size: 11px; padding: 4px 8px; border-radius: 4px; letter-spacing: 1px;
}
.bkr-header h1 { font-size: 16px; font-weight: 700; letter-spacing: .3px; }
.bkr-header p  { font-size: 11.5px; opacity: .8; margin-top: 2px; }

.bkr-card {
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius);
  margin-bottom: 14px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.bkr-card-head {
  background: var(--gray-50); border-bottom: 1px solid var(--gray-200);
  padding: 10px 16px; font-size: 12px; font-weight: 700; color: var(--bkr-mid);
  text-transform: uppercase; letter-spacing: .6px;
}
.bkr-card-body { padding: 16px; }

.filter-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px; align-items: flex-end;
}
@media(max-width:900px){ .filter-grid{ grid-template-columns:1fr 1fr; } }

.f-group { display: flex; flex-direction: column; gap: 4px; }
.f-label { font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .5px; }
.f-ctrl {
  border: 1.5px solid var(--gray-300); border-radius: 6px;
  padding: 8px 10px; font-size: 13px; color: var(--gray-800);
  background: #fff; transition: border .15s, box-shadow .15s; width: 100%;
}
.f-ctrl:focus { outline: none; border-color: var(--bkr-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 6px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; padding: 9px 16px;
  transition: all .15s; white-space: nowrap;
}
.btn-primary   { background: var(--bkr-accent); color: #fff; }
.btn-primary:hover   { background: #1d4ed8; }
.btn-primary:disabled { background: var(--gray-300); cursor: not-allowed; }
.btn-secondary { background: var(--gray-200); color: var(--gray-700); }
.btn-secondary:hover { background: var(--gray-300); }
.btn:active { transform: scale(.97); }

.confirm-line { font-size: 13.5px; color: var(--gray-800); margin-bottom: 12px; line-height: 1.5; }

.stats-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.stat-pill {
  background: var(--bkr-light); border: 1px solid var(--bkr-border);
  border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 600; color: var(--bkr-dark);
}
.stat-pill .num { font-size: 14px; font-weight: 800; color: var(--bkr-accent); margin-left: 4px; }

.warn-box {
  display: flex; align-items: center; gap: 8px; background: #fef3c7; color: #92400e;
  border: 1px solid #fde68a; border-radius: 6px; padding: 8px 12px; font-size: 12.5px;
  margin-bottom: 12px;
}

.bkr-table-wrap { max-height: 360px; overflow-y: auto; overflow-x: auto; border: 1px solid var(--gray-200); border-radius: 6px; }
.bkr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 560px; }
.bkr-table thead th {
  background: var(--bkr-dark); color: #fff; padding: 8px 10px; text-align: left;
  font-size: 11px; font-weight: 600; position: sticky; top: 0; z-index: 1;
}
.bkr-table tbody tr { border-bottom: 1px solid var(--gray-100); }
.bkr-table tbody tr:hover { background: var(--gray-50); }
.bkr-table td { padding: 6px 10px; }

.truncated-note { font-size: 11.5px; color: var(--gray-500); font-style: italic; margin-top: 8px; }

.action-bar { display: flex; gap: 10px; margin-top: 14px; }

.result-ok {
  background: #dcfce7; color: #166534; border: 1px solid #bbf7d0;
  border-radius: 7px; padding: 12px 16px; font-size: 13px;
}

/* ── Overlay ── */
.overlay {
  position: fixed; inset: 0; background: rgba(255,255,255,.8);
  display: flex; align-items: center; justify-content: center;
  z-index: 9990; opacity: 0; visibility: hidden; transition: all .2s;
}
.overlay.show { opacity: 1; visibility: visible; }
.spin-box { text-align: center; }
.spin-ring {
  width: 40px; height: 40px; border: 3px solid var(--gray-200);
  border-top-color: var(--bkr-accent); border-radius: 50%;
  animation: spin .7s linear infinite; margin: 0 auto 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spin-label { font-size: 13px; color: var(--gray-500); font-weight: 600; }

/* ── Toast ── */
.toast-dock { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.15);
  padding: 10px 14px; min-width: 260px; max-width: 360px;
  display: flex; align-items: flex-start; gap: 10px;
  border-left: 4px solid var(--gray-300); font-size: 12.5px;
}
.toast.success { border-left-color: #22c55e; }
.toast.error   { border-left-color: var(--red); }
.toast.info    { border-left-color: var(--bkr-accent); }
.toast .t-icon { font-size: 15px; margin-top: 1px; }
.toast.success .t-icon { color: #16a34a; }
.toast.error   .t-icon { color: var(--red); }
.toast.info    .t-icon { color: var(--bkr-accent); }
.toast .t-body { flex: 1; }
.toast .t-title { font-weight: 700; color: var(--gray-800); margin-bottom: 2px; }
.toast .t-msg   { color: var(--gray-500); font-size: 11.5px; }
.toast .t-close { background: none; border: none; color: var(--gray-400); cursor: pointer; font-size: 14px; padding: 0 2px; }

.bkr-status {
  margin-top: 10px; padding: 8px 12px; border-radius: 6px; font-size: 12.5px;
  display: none; align-items: center; gap: 8px; font-weight: 600;
}
.bkr-status.loading { display: flex; background: #eff6ff; color: var(--bkr-accent); border: 1px solid var(--bkr-border); }
.bkr-status.error   { display: flex; background: #fef2f2; color: var(--red);  border: 1px solid #fecaca; }
.bkr-status.ok      { display: flex; background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }


</style>
{% endblock %}

{% block content %}
<div class="bkr-wrap">


  <div class="bkr-card">
    <div class="bkr-card-head"><i class="fas fa-filter"></i> Filters</div>
    <div class="bkr-card-body">
      <div class="filter-grid">
        <div class="f-group">
          <label class="f-label">Sale Area</label>
          <select id="filterArea" class="f-ctrl"><option value="">— Any Area —</option></select>
        </div>
        <div class="f-group">
          <label class="f-label">Old / Current Order Booker</label>
          <select id="filterOldBooker" class="f-ctrl"><option value="">— Any Booker —</option></select>
        </div>
        <div class="f-group">
          <label class="f-label">New Order Booker <span style="color:var(--red)">*</span></label>
          <select id="filterNewBooker" class="f-ctrl"><option value="">— Select —</option></select>
        </div>
        <div class="f-group">
          <button class="btn btn-primary" id="btnPreview" onclick="bkrPreview()">
            <i class="fas fa-spinner fa-spin" id="btnPreviewSpinner" style="display:none;"></i>
            <i class="fas fa-search" id="btnPreviewIcon"></i>
            <span>Preview</span>
          </button>
        </div>
      </div>
      <div class="bkr-status" id="bkrStatus"></div>
    </div>
  </div>

  <div class="bkr-card" id="previewCard" style="display:none;">
    <div class="bkr-card-head"><i class="fas fa-list-check"></i> Preview — Confirm Before Apply</div>
    <div class="bkr-card-body">
      <div class="confirm-line" id="confirmLine"></div>
      <div class="stats-bar" id="statsBar"></div>
      <div class="warn-box" id="sameBookerWarning" style="display:none;">
        <i class="fas fa-triangle-exclamation"></i> New Order Booker, Old Booker se same hai — kuch shift nahi hoga.
      </div>
      <div class="bkr-table-wrap">
        <table class="bkr-table">
          <thead><tr><th>#</th><th>Customer</th><th>Area</th><th>Current Booker</th><th style="text-align:right;">Balance</th></tr></thead>
          <tbody id="custListBody"></tbody>
        </table>
      </div>
      <div class="truncated-note" id="truncatedNote" style="display:none;"></div>
      <div class="action-bar">
        <button class="btn btn-primary" id="btnApply" onclick="bkrApply()"><i class="fas fa-check"></i> Confirm &amp; Apply</button>
        <button class="btn btn-secondary" onclick="bkrReset()"><i class="fas fa-rotate-left"></i> Reset</button>
      </div>
    </div>
  </div>

  <div class="bkr-card" id="resultCard" style="display:none;">
    <div class="bkr-card-body" id="resultBody"></div>
  </div>

</div>

<div class="overlay" id="overlay">
  <div class="spin-box">
    <div class="spin-ring"></div>
    <div class="spin-label" id="overlayLabel">Loading...</div>
  </div>
</div>

<div class="toast-dock" id="toastDock"></div>
{% endblock %}

{% block javascripts %}{{ block.super }}
<script>
(function(){
  'use strict';

  const CSRF_TOKEN = '{{ csrf_token }}';
  const AREAS   = {{ sale_areas_json|safe }};
  const BOOKERS = {{ order_bookers_json|safe }};
  const URLS = {
    preview: "{% url 'customers:booker_reassign_preview' %}",
    apply:   "{% url 'customers:booker_reassign_apply' %}",
  };

  const $ = id => document.getElementById(id);
  const filterArea      = $('filterArea');
  const filterOldBooker = $('filterOldBooker');
  const filterNewBooker = $('filterNewBooker');
  const overlay         = $('overlay');

  AREAS.forEach(a => filterArea.add(new Option(a.area_name, a.t_id)));
  BOOKERS.forEach(b => {
    filterOldBooker.add(new Option(b.name, b.t_id));
    filterNewBooker.add(new Option(b.name, b.t_id));
  });

  function showOverlay(msg) { $('overlayLabel').textContent = msg || 'Loading...'; overlay.classList.add('show'); }
  function hideOverlay() { overlay.classList.remove('show'); }

  function toast(type, title, msg, duration) {
    duration = duration || 4000;
    const icons = { success:'fa-check-circle', error:'fa-times-circle', info:'fa-info-circle' };
    const el = document.createElement('div');
    el.className = `toast ${type}`;
    el.innerHTML = `<i class="fas ${icons[type]||'fa-info-circle'} t-icon"></i>
      <div class="t-body"><div class="t-title">${esc(title)}</div><div class="t-msg">${esc(msg||'')}</div></div>
      <button class="t-close" onclick="this.closest('.toast').remove()"><i class="fas fa-times"></i></button>`;
    $('toastDock').prepend(el);
    setTimeout(() => el.remove(), duration);
  }

  function esc(s) {
    return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }

  let _lastPayload = null;

function setBtnLoading(loading) {
    $('btnPreview').disabled = loading;
    $('btnPreviewSpinner').style.display = loading ? 'inline-block' : 'none';
    $('btnPreviewIcon').style.display = loading ? 'none' : 'inline-block';
  }

  function setStatus(type, msg) {
    const box = $('bkrStatus');
    box.className = 'bkr-status ' + type;
    if (!msg) { box.style.display = 'none'; box.innerHTML = ''; return; }
    const icon = type === 'loading' ? 'fa-spinner fa-spin' : (type === 'error' ? 'fa-circle-exclamation' : 'fa-circle-check');
    box.innerHTML = `<i class="fas ${icon}"></i> ${esc(msg)}`;
  }

  window.bkrPreview = async function() {
    const area_id       = filterArea.value;
    const old_booker_id = filterOldBooker.value;
    const new_booker_id = filterNewBooker.value;

    if (!new_booker_id) {
      setStatus('error', 'New Order Booker is not selected.');
      toast('error', 'Error', 'New Order Booker is not selected.');
      return;
    }
    if (!area_id && !old_booker_id) {
      setStatus('error', 'Select at least Area or old Orderbooker.');
      toast('error', 'Error', 'Select at least Area or old Orderbooker.');
      return;
    }

    $('previewCard').style.display = 'none';
    $('resultCard').style.display  = 'none';
    setBtnLoading(true);
    setStatus('loading', 'Seraching inside database....');
    showOverlay('Searching...');

    const fd = new URLSearchParams({ area_id, old_booker_id, new_booker_id });
    try {
      const r = await fetch(URLS.preview, {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRFToken': CSRF_TOKEN },
        body: fd.toString(),
      });

      if (!r.ok) {
        const txt = await r.text();
        console.error('Preview HTTP error:', r.status, txt);
        setStatus('error', `Server error — HTTP ${r.status}. Browser console (F12) check karein.`);
        toast('error', 'Server Error', `HTTP ${r.status}`);
        return;
      }

      const d = await r.json();
      if (!d.ok) {
        setStatus('error', d.message);
        toast('error', 'Error', d.message);
        return;
      }

      setStatus('ok', `${d.counts.customers} customers, ${d.counts.sale_product_rows} sale lines, ${d.counts.sale_return_rows} return lines, ${d.counts.payments_rows} payment records mile.`);
      _lastPayload = { area_id, old_booker_id, new_booker_id };
      renderPreview(d);
    } catch(ex) {
      console.error('Preview JS/network error:', ex);
      setStatus('error', 'Network/JS error — console (F12) check karein: ' + ex.message);
      toast('error', 'Network error', ex.message);
    } finally {
      setBtnLoading(false);
      hideOverlay();
    }
  };

  function renderPreview(d) {
    $('previewCard').style.display = '';
    $('confirmLine').innerHTML =
      `<strong>${esc(d.area_name)}</strong> ka data, Booker <strong>${esc(d.old_booker_name)}</strong> se
       <strong style="color:var(--bkr-accent)">${esc(d.new_booker_name)}</strong> ki taraf shift hoga.`;

    $('statsBar').innerHTML = `
      <div class="stat-pill">Customers<span class="num">${d.counts.customers}</span></div>
      <div class="stat-pill">Sale Lines<span class="num">${d.counts.sale_product_rows}</span></div>
      <div class="stat-pill">Return Lines<span class="num">${d.counts.sale_return_rows}</span></div>
      <div class="stat-pill">Payment Records<span class="num">${d.counts.payments_rows}</span></div>
    `;

    $('sameBookerWarning').style.display = d.same_booker_warning ? 'flex' : 'none';

    const body = $('custListBody');
    if (!d.customers_list.length) {
      body.innerHTML = `<tr><td colspan="5" style="text-align:center;padding:16px;color:var(--gray-500);">Koi customer match nahi hua.</td></tr>`;
    } else {
      body.innerHTML = d.customers_list.map((c,i) => `
        <tr>
          <td>${i+1}</td>
          <td>${esc(c.name)} <small style="color:var(--gray-500)">(#${c.t_id})</small></td>
          <td>${esc(c.area_name)}</td>
          <td>${esc(c.booker_name)}</td>
          <td style="text-align:right;">${c.balance}</td>
        </tr>`).join('');
    }

    $('truncatedNote').style.display = d.customers_list_truncated ? 'block' : 'none';
    if (d.customers_list_truncated) {
      $('truncatedNote').textContent =
        `List sirf pehle ${d.customers_list_cap} customers dikha rahi hai, lekin Apply SAARE ${d.counts.customers} customers (aur unki sale/return/payment rows) par hoga.`;
    }

    $('btnApply').disabled = (
      d.counts.customers === 0 && d.counts.sale_product_rows === 0 &&
      d.counts.sale_return_rows === 0 && d.counts.payments_rows === 0
    );
  }

  window.bkrApply = async function() {
    if (!_lastPayload) return;
    if (!confirm('Pakka? Ye operation undo nahi ho sakega.')) return;

    $('btnApply').disabled = true;
    showOverlay('Applying...');

    const fd = new URLSearchParams(_lastPayload);
    try {
      const r = await fetch(URLS.apply, {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRFToken': CSRF_TOKEN },
        body: fd.toString(),
      });
      const d = await r.json();
      hideOverlay();

      if (d.ok) {
        toast('success', 'Done', d.message);
        $('resultCard').style.display = '';
        $('resultBody').innerHTML = `<div class="result-ok"><i class="fas fa-check-circle"></i> ${esc(d.message)}</div>`;
        $('previewCard').style.display = 'none';
      } else {
        toast('error', 'Failed', d.message);
        $('btnApply').disabled = false;
      }
    } catch(ex) {
      hideOverlay();
      toast('error', 'Network error', ex.message);
      $('btnApply').disabled = false;
    }
  };

  window.bkrReset = function() {
    filterArea.value = '';
    filterOldBooker.value = '';
    filterNewBooker.value = '';
    $('previewCard').style.display = 'none';
    $('resultCard').style.display  = 'none';
    _lastPayload = null;
  };

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