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

<style>
  .rb-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    margin-bottom: 28px;
    overflow: hidden;
  }
  .rb-card-header {
    padding: 18px 24px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }
  .rb-card-header.customer { background: linear-gradient(135deg, #1e3a5f 0%, #2d6a9f 100%); }
  .rb-card-header.vendor   { background: linear-gradient(135deg, #3a1e5f 0%, #7a3db5 100%); }
  .rb-card-header.product  { background: linear-gradient(135deg, #1e5f3a 0%, #2d9f6a 100%); }

  .rb-card-header h5 { color: #fff; margin: 0; font-size: 1.1rem; font-weight: 600; }
  .rb-stat-badge {
    background: rgba(255,255,255,.2);
    color: #fff;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .3px;
  }
  .rb-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

  .rb-btn-export {
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .rb-btn-export:hover { background: rgba(255,255,255,.3); color: #fff; text-decoration: none; }

  .rb-btn-reset {
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .1s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .rb-btn-reset:hover { background: #b02a37; }
  .rb-btn-reset:active { transform: scale(.97); }
  .rb-btn-reset:disabled { background: #888; cursor: not-allowed; }

  .rb-card-body { padding: 20px 24px; background: #fff; }
  .rb-info-row { display: flex; gap: 32px; flex-wrap: wrap; }
  .rb-info-item { display: flex; flex-direction: column; }
  .rb-info-label { font-size: .75rem; color: #888; text-transform: uppercase; letter-spacing: .5px; }
  .rb-info-value { font-size: 1.6rem; font-weight: 700; color: #222; line-height: 1.2; }

  .rb-alert { border-radius: 8px; font-size: .88rem; padding: 10px 16px; margin-top: 12px; display: none; }
  .rb-alert.show { display: flex; align-items: center; gap: 8px; }
  .rb-alert-success { background: #d1e7dd; color: #0a3622; border: 1px solid #a3cfbb; }
  .rb-alert-error   { background: #f8d7da; color: #58151c; border: 1px solid #f1aeb5; }

  /* Confirm overlay */
  .rb-confirm-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    z-index: 9999; display: flex; align-items: center; justify-content: center;
    display: none;
  }
  .rb-confirm-overlay.show { display: flex; }
  .rb-confirm-box {
    background: #fff; border-radius: 14px; padding: 32px 28px 24px;
    max-width: 400px; width: 90%; box-shadow: 0 8px 40px rgba(0,0,0,.25);
    text-align: center;
  }
  .rb-confirm-box .icon { font-size: 2.4rem; margin-bottom: 10px; }
  .rb-confirm-box h6 { font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }
  .rb-confirm-box p { color: #555; font-size: .9rem; margin-bottom: 20px; }
  .rb-confirm-actions { display: flex; gap: 12px; justify-content: center; }
</style>

<!-- ───────────────────── Confirm Modal ───────────────────── -->
<div class="rb-confirm-overlay" id="confirmOverlay">
  <div class="rb-confirm-box">
    <div class="icon">⚠️</div>
    <h6 id="confirmTitle">Are you sure?</h6>
    <p id="confirmMsg">This action cannot be undone.</p>
    <div class="rb-confirm-actions">
      <button class="btn btn-secondary btn-sm" onclick="closeConfirm()">Cancel</button>
      <button class="btn btn-danger btn-sm" id="confirmYesBtn">Yes, Proceed</button>
    </div>
  </div>
</div>

<!-- ───────────────────── Page ───────────────────── -->
<div class="container py-4" style="max-width: 860px;">
  <h4 class="mb-1 fw-bold">Balance &amp; Stock Reset</h4>
  <p class="text-muted mb-4" style="font-size:.9rem;">
    View record counts, export to Excel, or reset balances/stock to zero for the current tenant.
  </p>

  <!-- ═══ CUSTOMER SECTION ═══ -->
  <div class="rb-card">
    <div class="rb-card-header customer">
      <div class="d-flex align-items-center gap-3">
        <h5>👥 Customers</h5>
        <span class="rb-stat-badge">{{ customer_count }} Records</span>
      </div>
      <div class="rb-actions">
        <a href="{% url 'pos:export_customers_excel' %}" class="rb-btn-export">
          <svg width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
            <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
          </svg>
          Export Excel
        </a>
        <button class="rb-btn-reset"
                onclick="askConfirm('customer', 'Reset ALL Customer Balances?',
                  'All {{ customer_count }} customer balance(s) will be set to 0. Export first if needed.')">
          <svg width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
            <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
            <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
          </svg>
          Clean Customer Records
        </button>
      </div>
    </div>
    <div class="rb-card-body">
      <div class="rb-info-row">
        <div class="rb-info-item">
          <span class="rb-info-label">Total Customers</span>
          <span class="rb-info-value" id="customerCountDisplay">{{ customer_count }}</span>
        </div>
        <div class="rb-info-item">
          <span class="rb-info-label">Action</span>
          <span class="rb-info-value" style="font-size:1rem; color:#555;">Set <code>balance = 0</code> for all</span>
        </div>
      </div>
      <div class="rb-alert rb-alert-success" id="customerAlert"></div>
    </div>
  </div>

  <!-- ═══ VENDOR SECTION ═══ -->
  <div class="rb-card">
    <div class="rb-card-header vendor">
      <div class="d-flex align-items-center gap-3">
        <h5>🏭 Vendors</h5>
        <span class="rb-stat-badge">{{ vendor_count }} Records</span>
      </div>
      <div class="rb-actions">
        <a href="{% url 'pos:export_vendors_excel' %}" class="rb-btn-export">
          <svg width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
            <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
          </svg>
          Export Excel
        </a>
        <button class="rb-btn-reset"
                onclick="askConfirm('vendor', 'Reset ALL Vendor Balances?',
                  'All {{ vendor_count }} vendor balance(s) will be set to 0. Export first if needed.')">
          <svg width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
            <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
            <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
          </svg>
          Clean Vendor Records
        </button>
      </div>
    </div>
    <div class="rb-card-body">
      <div class="rb-info-row">
        <div class="rb-info-item">
          <span class="rb-info-label">Total Vendors</span>
          <span class="rb-info-value" id="vendorCountDisplay">{{ vendor_count }}</span>
        </div>
        <div class="rb-info-item">
          <span class="rb-info-label">Action</span>
          <span class="rb-info-value" style="font-size:1rem; color:#555;">Set <code>balance = 0</code> for all</span>
        </div>
      </div>
      <div class="rb-alert rb-alert-success" id="vendorAlert"></div>
    </div>
  </div>

  <!-- ═══ PRODUCT SECTION ═══ -->
  <div class="rb-card">
    <div class="rb-card-header product">
      <div class="d-flex align-items-center gap-3">
        <h5>📦 Products</h5>
        <span class="rb-stat-badge">{{ product_count }} Records</span>
      </div>
      <div class="rb-actions">
        <a href="{% url 'pos:export_products_excel' %}" class="rb-btn-export">
          <svg width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
            <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
          </svg>
          Export Excel
        </a>
        <button class="rb-btn-reset"
                onclick="askConfirm('product', 'Reset ALL Product Stock?',
                  'All {{ product_count }} product present_stock will be set to 0. Export first if needed.')">
          <svg width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
            <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
            <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
          </svg>
          Clean Product Stock
        </button>
      </div>
    </div>
    <div class="rb-card-body">
      <div class="rb-info-row">
        <div class="rb-info-item">
          <span class="rb-info-label">Total Products</span>
          <span class="rb-info-value" id="productCountDisplay">{{ product_count }}</span>
        </div>
        <div class="rb-info-item">
          <span class="rb-info-label">Action</span>
          <span class="rb-info-value" style="font-size:1rem; color:#555;">Set <code>present_stock = 0</code> for all</span>
        </div>
      </div>
      <div class="rb-alert rb-alert-success" id="productAlert"></div>
    </div>
  </div>

</div>

<script>
(function () {
  const URLS = {
    customer: "{% url 'pos:reset_customer_balances' %}",
    vendor:   "{% url 'pos:reset_vendor_balances' %}",
    product:  "{% url 'pos:reset_product_stock' %}",
  };

  const CSRF = "{{ csrf_token }}";
  let pendingSection = null;

  // ── Confirm overlay ───────────────────────────────────────────
  window.askConfirm = function (section, title, msg) {
    pendingSection = section;
    document.getElementById('confirmTitle').textContent = title;
    document.getElementById('confirmMsg').textContent   = msg;
    document.getElementById('confirmOverlay').classList.add('show');
  };

  window.closeConfirm = function () {
    pendingSection = null;
    document.getElementById('confirmOverlay').classList.remove('show');
  };

  document.getElementById('confirmYesBtn').addEventListener('click', function () {
    if (!pendingSection) return;
    const section = pendingSection;   // closeConfirm() sets pendingSection=null, isliye pehle save karen
    closeConfirm();
    doReset(section);
  });

  // Close overlay on backdrop click
  document.getElementById('confirmOverlay').addEventListener('click', function (e) {
    if (e.target === this) closeConfirm();
  });

  // ── AJAX reset ────────────────────────────────────────────────
  function doReset(section) {
    const alertEl = document.getElementById(section + 'Alert');
    alertEl.className = 'rb-alert';
    alertEl.textContent = '';

    const btn = document.querySelector(
      `button[onclick*="askConfirm('${section}'"]`
    );
    if (btn) { btn.disabled = true; btn.textContent = 'Processing…'; }

    fetch(URLS[section], {
      method: 'POST',
      headers: {
        'X-CSRFToken': CSRF,
        'Content-Type': 'application/json',
      },
    })
      .then(r => r.json())
      .then(data => {
        alertEl.textContent = data.message || '✅ Done.';
        alertEl.className   = 'rb-alert rb-alert-success show';
        if (btn) { btn.disabled = false; restoreBtn(btn, section); }
      })
      .catch(() => {
        alertEl.textContent = '❌ An error occurred. Please try again.';
        alertEl.className   = 'rb-alert rb-alert-error show';
        if (btn) { btn.disabled = false; restoreBtn(btn, section); }
      });
  }

  function restoreBtn(btn, section) {
    const labels = {
      customer: 'Clean Customer Records',
      vendor:   'Clean Vendor Records',
      product:  'Clean Product Stock',
    };
    btn.innerHTML = `
      <svg width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
        <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
        <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
      </svg>
      ${labels[section]}`;
  }
})();
</script>
{% endblock %}