{% extends "pos/base.html" %}
{% block title %}Customer Ledger{% endblock %}

{% block stylesheets %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<style>
.select2-container--default .select2-selection--single { height:calc(1.5em + .75rem + 2px); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height:calc(1.5em + .75rem); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height:calc(1.5em + .75rem + 2px); }
.customer-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.15); cursor:pointer; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-3">

  <!-- Header -->
  <div class="d-flex align-items-center justify-content-between mb-3">
    <div>
      <h4 class="mb-0 font-weight-bold">
        <i class="fa fa-book mr-2 text-primary"></i> Customer Installment Ledger
      </h4>
      <small class="text-muted">Search by name, CNIC, or mobile number</small>
    </div>
    <a href="{% url 'installments:deal_list' %}" class="btn btn-sm btn-outline-secondary">
      <i class="fa fa-arrow-left mr-1"></i> Back
    </a>
  </div>

  <!-- Search Card -->
  <div class="card shadow-sm mb-4">
    <div class="card-body py-3">
      <div class="row align-items-end">

        <!-- Select2 AJAX Customer Search -->
        <div class="col-md-6">
          <label class="font-weight-bold small">Search Customer</label>
          <select id="customer-ledger-select" style="width:100%;"></select>
          <small class="text-muted">Start typing name, CNIC, or mobile — then press Go</small>
        </div>

        <!-- Go Button -->
        <div class="col-md-2">
          <button type="button" id="btn-ledger-go" class="btn btn-primary btn-block" disabled>
            <i class="fa fa-book-open mr-1"></i> View Ledger
          </button>
        </div>

        <!-- Active Plans Only Filter -->
        <div class="col-md-4">
          <div class="d-flex align-items-center h-100">
            <div class="form-check ml-2 mt-3">
              <input class="form-check-input" type="checkbox" id="active-only-check">
              <label class="form-check-label" for="active-only-check">
                Show Active Plans Only
              </label>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

  {% if customers %}
  <!-- Old-style text search results (for back-compat) -->
  <div class="row">
    {% for c in customers %}
    <div class="col-md-4 col-lg-3 mb-3">
      <div class="card customer-card border" onclick="window.location='{% url 'installments:customer_ledger' c.t_id %}'">
        <div class="card-body py-2">
          <div class="font-weight-bold">{{ c.name }}</div>
          <small class="text-muted">{{ c.mobile|default:"—" }}</small>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% elif q %}
  <div class="text-center text-muted py-4">
    <i class="fa fa-search fa-2x mb-2 d-block"></i>
    No customers found for <strong>{{ q }}</strong>.
  </div>
  {% else %}
  <div class="text-center text-muted py-5">
    <i class="fa fa-user-circle fa-4x mb-3 d-block" style="color:#d0d7de;"></i>
    <p class="lead">Search for a customer above to view their installment ledger.</p>
  </div>
  {% endif %}

</div>
{% endblock %}

{% block javascripts %}
{{ block.super }}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {

  var selectedTid = null;

  // Init Select2 AJAX
  $('#customer-ledger-select').select2({
    ajax: {
      url: '{% url "installments:ajax_customer_search" %}',
      dataType: 'json',
      delay: 250,
      data: function(p) { return { q: p.term }; },
      processResults: function(d) { return { results: d.results }; },
      cache: true,
    },
    minimumInputLength: 1,
    placeholder: 'Type name, CNIC, or mobile...',
    width: '100%',
    dropdownParent: $('body'),
  });

  $('#customer-ledger-select').on('select2:select', function(e) {
    selectedTid = e.params.data.id;
    $('#btn-ledger-go').prop('disabled', false);
  });

  $('#customer-ledger-select').on('select2:unselect', function() {
    selectedTid = null;
    $('#btn-ledger-go').prop('disabled', true);
  });

  $('#btn-ledger-go').on('click', function() {
    if (!selectedTid) return;
    var activeOnly = $('#active-only-check').is(':checked') ? '?active=1' : '';
    window.location = '/installments/ledger/' + selectedTid + '/' + activeOnly;
  });

  // Also support pressing Enter in Select2
  $('#customer-ledger-select').on('keydown', function(e) {
    if (e.key === 'Enter' && selectedTid) {
      $('#btn-ledger-go').click();
    }
  });

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