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

{% block stylesheets %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --ink:       #0f172a;
  --ink-2:     #1e293b;
  --muted:     #64748b;
  --muted-2:   #94a3b8;
  --border:    #e2e8f0;
  --bg:        #f0f4f8;
  --card:      #ffffff;
  --accent:    #2563eb;
  --accent-lt: #eff6ff;
  --accent-dk: #1d4ed8;
  --success:   #16a34a;
  --success-lt:#f0fdf4;
  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --radius:    12px;
  --radius-sm: 7px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ── Page ── */
.pg {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

/* ── Hero header ── */
.pg-hero {
  text-align: center;
  margin-bottom: 36px;
}
.pg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  background: var(--accent-lt);
  padding: 4px 12px;
  border-radius: 99px;
  margin-bottom: 14px;
}
.pg-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 8px;
}
.pg-sub {
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ── Tabs ── */
.tab-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--muted);
  transition: all 0.15s;
  outline: none;
}
.tab-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-lt);
}
.tab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,.25);
}
.tab-icon { font-size: 0.95rem; }

/* ── Main card ── */
.search-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.card-header {
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--border);
  background: #fafbfc;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-header-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.card-header-text {}
.card-header-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.card-header-sub {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 1px;
}

.card-body { padding: 24px; }

/* ── Form groups ── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.form-row.three { grid-template-columns: 1fr 1fr 1fr; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1 / -1; }
.form-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.form-input {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 0.875rem;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.09);
}

/* ── Select2 overrides ── */
.select2-container--default .select2-selection--single {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  height: 40px;
  display: flex;
  align-items: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.09);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: var(--ink);
  padding: 0 12px;
  line-height: 38px;
}
.select2-container--default .select2-selection__placeholder { color: var(--muted-2); }
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
  right: 8px;
}
.select2-dropdown {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-family: 'Inter', sans-serif;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 0.85rem;
  outline: none;
}
.select2-container--default .select2-results__option--highlighted {
  background: var(--accent-lt);
  color: var(--accent);
}

/* ── Party result item ── */
.s2-item { padding: 4px 0; }
.s2-name { font-weight: 600; font-size: 0.85rem; color: var(--ink); }
.s2-meta {
  display: flex;
  gap: 8px;
  margin-top: 2px;
  align-items: center;
}
.s2-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
}
.s2-balance {
  font-size: 0.72rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--muted);
}

/* ── Action buttons ── */
.btn-row {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,.2);
}
.btn-primary:hover { background: var(--accent-dk); color: #fff; }
.btn-success {
  background: var(--success);
  color: #fff;
  box-shadow: 0 2px 8px rgba(22,163,74,.2);
}
.btn-success:hover { background: #15803d; color: #fff; }
.btn-ghost {
  background: var(--bg);
  color: var(--muted);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover { border-color: #94a3b8; color: var(--ink); }

/* ── Quick links ── */
.quick-section { margin-top: 32px; }
.quick-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
  margin-bottom: 12px;
  padding-left: 4px;
}
.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.quick-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow);
}
.quick-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.07);
  transform: translateY(-1px);
}
.quick-icon {
  font-size: 1.3rem;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.quick-info {}
.quick-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}
.quick-count {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 1px;
}

/* ── Error msg ── */
.form-error {
  font-size: 0.75rem;
  color: #dc2626;
  margin-top: 4px;
  display: none;
}
.form-error.show { display: block; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .form-row.three { grid-template-columns: 1fr 1fr; }
  .pg-title { font-size: 1.5rem; }
}
</style>
{% endblock %}

{% block content %}
<div class="pg">

  <!-- ── Hero ──────────────────────────────────────────────────────────────── -->
  <div class="pg-hero">
    <div class="pg-eyebrow">
      <svg width="11" height="11" fill="none" viewBox="0 0 11 11">
        <rect x="1" y="1" width="3.5" height="3.5" rx="0.5" stroke="currentColor" stroke-width="1.2"/>
        <rect x="6.5" y="1" width="3.5" height="3.5" rx="0.5" stroke="currentColor" stroke-width="1.2"/>
        <rect x="1" y="6.5" width="3.5" height="3.5" rx="0.5" stroke="currentColor" stroke-width="1.2"/>
        <rect x="6.5" y="6.5" width="3.5" height="3.5" rx="0.5" stroke="currentColor" stroke-width="1.2"/>
      </svg>
      General Ledger
    </div>
    <div class="pg-title">Account Ledger</div>
    <div class="pg-sub">
      Search any party or account — get a complete transaction history
      with running balance, PDF export, and Excel download.
    </div>
  </div>

  <!-- ── Type tabs ─────────────────────────────────────────────────────────── -->
  <div class="tab-row">
    {% for t in ledger_types %}
    <button class="tab-btn {% if forloop.first %}active{% endif %}"
            data-type="{{ t.key }}"
            onclick="switchType('{{ t.key }}', this)">
      <span class="tab-icon">{{ t.icon }}</span>
      {{ t.label }}
    </button>
    {% endfor %}
  </div>

  <!-- ── Search card ───────────────────────────────────────────────────────── -->
  <div class="search-card">
    <div class="card-header">
      <div class="card-header-icon" id="hdr-icon">👤</div>
      <div class="card-header-text">
        <div class="card-header-title" id="hdr-title">Customer Ledger</div>
        <div class="card-header-sub" id="hdr-sub">Search by name, ID, or mobile</div>
      </div>
    </div>

    <div class="card-body">

      <!-- Party search -->
      <div class="form-group" style="margin-bottom:16px">
        <label class="form-label" id="party-label">Customer Name</label>
        <select id="party-select" style="width:100%">
          <option value="">— Type to search —</option>
        </select>
        <span class="form-error" id="party-error">Please select a party first</span>
      </div>

      <!-- Date range -->
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">From Date</label>
          <input type="date" id="date-from" class="form-input" value="{{ default_from }}">
        </div>
        <div class="form-group">
          <label class="form-label">To Date</label>
          <input type="date" id="date-to" class="form-input" value="{{ default_to }}">
        </div>
      </div>

      <!-- Actions -->
      <div class="btn-row">
        <button class="btn btn-primary" onclick="openLedger(false)">
          <svg width="14" height="14" fill="none" viewBox="0 0 14 14">
            <circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.5"/>
            <path d="M9.5 9.5L12.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
          </svg>
          Search
        </button>
        <button class="btn btn-success" onclick="openLedger(true)">
          <svg width="14" height="14" fill="none" viewBox="0 0 14 14">
            <path d="M1 7h12M7 1l6 6-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          Complete Ledger
        </button>
        <button class="btn btn-ghost" onclick="resetForm()">Reset</button>
      </div>

    </div>
  </div>

  <!-- ── Quick links ───────────────────────────────────────────────────────── -->
  <div class="quick-section">
    <div class="quick-title">Quick Access — COA Accounts</div>
    <div class="quick-grid">
      {% for coa in coa_quick %}
      <a href="{% url 'gl:coa_ledger' coa.id %}" class="quick-card">
        <div class="quick-icon" style="background:{{ coa.bg }}">{{ coa.icon }}</div>
        <div class="quick-info">
          <div class="quick-label">{{ coa.name }}</div>
          <div class="quick-count">{{ coa.code }}</div>
        </div>
      </a>
      {% endfor %}
    </div>
  </div>

</div>

<!-- ── Hidden form for navigation ── -->
<form id="ledger-form" method="get" style="display:none">
  <input type="hidden" id="form-from" name="from">
  <input type="hidden" id="form-to"   name="to">
</form>
{% endblock %}

{% block javascripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<script>
// ── Config per ledger type ────────────────────────────────────────────────────
const TYPE_CONFIG = {
  customer: {
    label: 'Customer Ledger',
    sub:   'Search by name, ID, or mobile',
    field: 'Customer Name',
    icon:  '👤',
    ajax:  '{% url "gl:ledger_party_search" %}?type=customer',
    url:   function(id, from, to) {
      return `/gl/ledger/party/customer/${id}/?from=${from}&to=${to}`;
    },
  },
  vendor: {
    label: 'Vendor Ledger',
    sub:   'Search vendor by name or ID',
    field: 'Vendor Name',
    icon:  '🏪',
    ajax:  '{% url "gl:ledger_party_search" %}?type=vendor',
    url:   function(id, from, to) {
      return `/gl/ledger/party/vendor/${id}/?from=${from}&to=${to}`;
    },
  },
  debitor: {
    label: 'Debitor Ledger',
    sub:   'Search debitor by name or ID',
    field: 'Debitor Name',
    icon:  '📋',
    ajax:  '{% url "gl:ledger_party_search" %}?type=debitor',
    url:   function(id, from, to) {
      return `/gl/ledger/party/debitor/${id}/?from=${from}&to=${to}`;
    },
  },
  investor: {
    label: 'Investor Ledger',
    sub:   'Search investor by name or ID',
    field: 'Investor Name',
    icon:  '💼',
    ajax:  '{% url "gl:ledger_party_search" %}?type=investor',
    url:   function(id, from, to) {
      return `/gl/ledger/party/investor/${id}/?from=${from}&to=${to}`;
    },
  },
  staff: {
    label: 'Staff Ledger',
    sub:   'Search staff / salesman by name',
    field: 'Staff Name',
    icon:  '👷',
    ajax:  '{% url "gl:ledger_party_search" %}?type=staff',
    url:   function(id, from, to) {
      return `/gl/ledger/party/staff/${id}/?from=${from}&to=${to}`;
    },
  },
  bank: {
    label: 'Bank Ledger',
    sub:   'Search bank account by name',
    field: 'Bank Account',
    icon:  '🏦',
    ajax:  '{% url "gl:ledger_party_search" %}?type=bank',
    url:   function(id, from, to) {
      return `/gl/ledger/bank/${id}/?from=${from}&to=${to}`;
    },
  },
  coa: {
    label: 'Account Ledger',
    sub:   'Search any COA account',
    field: 'Account Name / Code',
    icon:  '📒',
    ajax:  '{% url "gl:ledger_party_search" %}?type=coa',
    url:   function(id, from, to) {
      return `/gl/ledger/coa/${id}/?from=${from}&to=${to}`;
    },
  },
};

let currentType = 'customer';

// ── Select2 init ─────────────────────────────────────────────────────────────
function initSelect2(type) {
  const cfg = TYPE_CONFIG[type];

  if ($.fn.select2 && $('#party-select').data('select2')) {
    $('#party-select').select2('destroy');
  }
  $('#party-select').empty().append('<option value="">— Type to search —</option>');

  $('#party-select').select2({
    placeholder:     `Search ${cfg.field}…`,
    minimumInputLength: 1,
    allowClear:      true,
    width:           '100%',
    dropdownParent:  $('body'),
    ajax: {
      url:           cfg.ajax,
      dataType:      'json',
      delay:         250,
      data: function(params) {
        return { q: params.term };
      },
      processResults: function(data) {
        return {
          results: data.results.map(function(r) {
            return {
              id:      r.id,
              text:    r.name,
              balance: r.balance,
              code:    r.code || '',
              mobile:  r.mobile || '',
            };
          }),
        };
      },
      cache: true,
    },
    templateResult:    formatResult,
    templateSelection: formatSelection,
  });
}

function formatResult(item) {
  if (item.loading) return item.text;
  if (!item.id)    return item.text;

  const bal     = item.balance !== undefined ? item.balance : null;
  const balStr  = bal !== null
    ? `<span class="s2-balance">${parseFloat(bal) >= 0 ? '▲' : '▼'} ${Math.abs(parseFloat(bal)).toLocaleString('en-PK', {minimumFractionDigits:2})}</span>`
    : '';
  const code    = item.code ? `<span class="s2-badge" style="background:#f1f5f9;color:#475569">${item.code}</span>` : '';
  const mobile  = item.mobile ? `<span class="s2-balance">${item.mobile}</span>` : '';

  return $(`
    <div class="s2-item">
      <div class="s2-name">${item.text}</div>
      <div class="s2-meta">${code}${balStr}${mobile}</div>
    </div>
  `);
}

function formatSelection(item) {
  return item.text || item.id;
}

// ── Switch type ───────────────────────────────────────────────────────────────
function switchType(type, btn) {
  currentType = type;
  const cfg   = TYPE_CONFIG[type];

  // Update tabs
  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');

  // Update header
  document.getElementById('hdr-icon').textContent  = cfg.icon;
  document.getElementById('hdr-title').textContent = cfg.label;
  document.getElementById('hdr-sub').textContent   = cfg.sub;
  document.getElementById('party-label').textContent = cfg.field;

  // Re-init select2
  initSelect2(type);

  // Hide error
  document.getElementById('party-error').classList.remove('show');
}

// ── Open ledger ───────────────────────────────────────────────────────────────
function openLedger(complete) {
  const sel = $('#party-select').val();
  if (!sel) {
    document.getElementById('party-error').classList.add('show');
    $('#party-select').next('.select2-container').find('.select2-selection').css({
      borderColor: '#dc2626',
      boxShadow:   '0 0 0 3px rgba(220,38,38,.09)',
    });
    return;
  }
  document.getElementById('party-error').classList.remove('show');

  let from = document.getElementById('date-from').value;
  let to   = document.getElementById('date-to').value;

  if (complete) {
    from = '2000-01-01';
    to   = '{{ default_to }}';
  }

  const cfg = TYPE_CONFIG[currentType];
  const url = cfg.url(sel, from, to);
  window.open(url, '_blank');
}

// ── Reset ─────────────────────────────────────────────────────────────────────
function resetForm() {
  if ($.fn.select2 && $('#party-select').data('select2')) {
    $('#party-select').val('').trigger('change');
  }
  document.getElementById('date-from').value = '{{ default_from }}';
  document.getElementById('date-to').value   = '{{ default_to }}';
  document.getElementById('party-error').classList.remove('show');
}

// ── Init ──────────────────────────────────────────────────────────────────────
$(document).ready(function() {
  initSelect2('customer');

  // Clear red border on selection
  $('#party-select').on('select2:select', function() {
    $(this).next('.select2-container').find('.select2-selection').css({
      borderColor: '',
      boxShadow:   '',
    });
    document.getElementById('party-error').classList.remove('show');
  });
});
</script>
{% endblock %}