{% extends "pos/base.html" %}
{% load static %}
{% block title %}Customer Settlements Register{% endblock %}

{% block stylesheets %}

<style>
  .filter-box .form-control, .filter-box .form-check-input { font-size:.85rem; }
  .modal-xl { max-width: 95%; }
  iframe.pdf-frame { width: 100%; height: 78vh; border: none; }
</style>
{% endblock %}

{% block heading %}Customer Settlements Register{% endblock %}

{% block content %}

<form method="get" class="filter-box mb-3" id="cust-filters-form">
  <div class="row align-items-end">

    <!-- Invoice -->
    <div class="col-md-3 mb-2">
      <label class="small mb-1">Transaction #</label>
      <input type="text" name="invoice" value="{{ invoice_q }}" class="form-control" placeholder="Invoice #">
    </div>
    <div class="col-auto mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="filter" value="invoice"
               id="fInvoice" {% if picked_filter == "invoice" %}checked{% endif %}>
        <label class="form-check-label small" for="fInvoice">Use</label>
      </div>
    </div>

    <!-- Customer (Select2 AJAX) -->
    <div class="col-md-3 mb-2">
      <label class="small mb-1">Customer</label>
      <select id="customer_select" class="form-control" data-placeholder="Search customer…" style="width:100%">
        {% if prefill_customer %}
          <option value="{{ prefill_customer.t_id }}" selected>{{ prefill_customer.name }}</option>
        {% endif %}
      </select>
      <input type="hidden" name="customer_id" id="customer_id" value="{{ customer_id|default_if_none:'' }}">
      {# Optional – keep legacy text fallback (not used when ID present) #}
      <input type="hidden" name="customer" value="{{ customer_q }}">
    </div>
    <div class="col-auto mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="filter" value="customer"
               id="fCustomer" {% if picked_filter == "customer" %}checked{% endif %}>
        <label class="form-check-label small" for="fCustomer">Use</label>
      </div>
    </div>

    <!-- Settlement Type -->
    <div class="col-md-3 mb-2">
      <label class="small mb-1">Settlement Type</label>
      <select name="type_id" class="form-control">
        <option value="">-- All --</option>
        {% for t in settlement_types %}
          <option value="{{ t.t_id }}" {% if type_q|add:""|stringformat:"s" == t.t_id|stringformat:"s" %}selected{% endif %}>{{ t.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-auto mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="filter" value="type"
               id="fType" {% if picked_filter == "type" %}checked{% endif %}>
        <label class="form-check-label small" for="fType">Use</label>
      </div>
    </div>

    <!-- Date range -->
    <div class="col-md-4 mb-2">
      <label class="small mb-1 d-block">Search by Date</label>
      <div class="d-flex">
        <input type="date" name="date_from" value="{{ date_from_q }}" class="form-control me-1">
        <input type="date" name="date_to"   value="{{ date_to_q }}"   class="form-control">
      </div>
    </div>
    <div class="col-auto mb-2">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="filter" value="date"
               id="fDate" {% if picked_filter == "date" %}checked{% endif %}>
        <label class="form-check-label small" for="fDate">Use</label>
      </div>
    </div>

    <!-- Actions -->
    <div class="col-auto mb-2">
      <button type="submit" class="btn btn-primary btn-sm">
        <i class="fas fa-search me-1"></i>Search
      </button>
      <a href="{% url 'transactions:customer_settlement_register' %}" class="btn btn-secondary btn-sm">Reset</a>
    </div>

    <div class="col-auto mb-2">
      <a class="btn btn-outline-success btn-sm"
         href="{% url 'transactions:customer_settlement_export_csv' %}?invoice={{ invoice_q }}&customer_id={{ customer_id }}&type_id={{ type_q }}&date_from={{ date_from_q }}&date_to={{ date_to_q }}&filter={{ picked_filter }}">
        <i class="fas fa-file-excel"></i> Export Excel
      </a>
      <a class="btn btn-outline-dark btn-sm"
         href="{% url 'transactions:customer_settlement_export_pdf' %}?invoice={{ invoice_q }}&customer_id={{ customer_id }}&type_id={{ type_q }}&date_from={{ date_from_q }}&date_to={{ date_to_q }}&filter={{ picked_filter }}"
         target="_blank">
        <i class="fas fa-file-pdf"></i> Export PDF
      </a>
    </div>
  </div>
</form>

<div class="card shadow mb-4">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">Customer Settlements</h6>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">
        <thead>
          <tr>
            <th style="width:5%">#</th>
            <th style="width:12%">Invoice #</th>
            <th style="width:12%">Date</th>
            <th style="width:20%">Customer</th>
            <th style="width:10%" class="text-end">Adjusted</th>
            <th style="width:10%" class="text-end">Prev Balance</th>
            <th style="width:13%">Type</th>
            <th style="width:18%" class="text-center">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for s in settlements %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ s.description }}</td>
            <td>{{ s.transaction_date }}</td>
            <td>{{ s.party_descp }}</td>
            <td class="text-end">{{ s.amount_transaction|floatformat:2 }}</td>
            <td class="text-end">{{ s.previous_balance|floatformat:2 }}</td>
            <td>{{ s.remarks1 }}</td>
            <td class="text-center">
              <a href="{% url 'transactions:settlement_edit' s.description %}"
                 class="btn btn-warning btn-sm"
                 title="Edit">
                <i class="fas fa-edit"></i>
              </a>

              <a href="{% url 'transactions:settlement_delete' s.description %}"
                 class="btn btn-danger btn-sm"
                 onclick="return confirm('Delete settlement #{{ s.description }}?');"
                 title="Delete">
                <i class="fas fa-trash"></i>
              </a>

              <a href="{% url 'transactions:customer_settlement_receipt_pdf' s.description %}"
                 class="btn btn-dark btn-sm"
                 target="_blank"
                 title="Receipt / Print (80mm)">
                 <i class="fas fa-receipt"></i>
              </a>

              <a href="{% url 'transactions:customer_settlement_share' s.description %}"
                 class="btn btn-outline-primary btn-sm"
                 target="_blank"
                 title="Share (WhatsApp / Email)">
                 <i class="fas fa-share-alt"></i>
              </a>
            </td>

          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="text-end mt-3">
      <span class="badge p-2" style="background:#01478f; color:#ffffff; font-size:1rem;">
        Grand&nbsp;Total:&nbsp;{{ grand_total|floatformat:2 }}
      </span>
    </div>
  </div>
</div>



{% endblock %}
{% block javascripts %}

<script>
  $(function(){
    $('#dataTable').DataTable({ order:[[2,'desc']] });

    const csrftoken = '{{ csrf_token }}';
    $('#customer_select').select2({
      theme: 'bootstrap4',
      placeholder: $(this).data('placeholder') || 'Search customer…',
      allowClear: true,
      minimumInputLength: 1,
      ajax: {
        url: "{% url 'customers:get_customers' %}",
        type: 'POST',
        delay: 250,
        data: params => ({ term: params.term }),
        headers: { 'X-CSRFToken': csrftoken },
        processResults: data => ({ results: data })
      }
    });

    $('#customer_select').on('select2:select', function(e){
      const d = e.params.data;
      $('#customer_id').val(d.id || d.value);
    });

    $('#customer_select').on('select2:clear', function(){
      $('#customer_id').val('');
    });
  });
</script>
{% endblock %}