{% extends "pos/base.html" %}
{% load static %}

{% block title %}Delivery Challans{% endblock %}

{% block stylesheets %}

{% endblock %}

{% block heading %}Delivery Challans{% endblock %}

{% block content %}
<div class="row">
  <div class="col-12">
    <!-- Filters -->
    <div class="card mb-3">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span><strong>Filters</strong></span>
        <a href="{% url 'sales:challan_create' %}" class="btn btn-success btn-sm">
          <i class="fas fa-plus"></i> Create New Challan
        </a>
      </div>
      <div class="card-body">
        <form method="get" id="filters-form">
          <div class="form-row">
            <div class="form-group col-md-2">
              <label>Date From</label>
              <input type="date" class="form-control" name="date_from" value="{{ date_from }}">
            </div>
            <div class="form-group col-md-2">
              <label>Date To</label>
              <input type="date" class="form-control" name="date_to" value="{{ date_to }}">
            </div>
            <div class="form-group col-md-2">
              <label>Status</label>
              <select name="status" class="form-control">
                <option value="">All</option>
                <option value="active" {% if status_filter == 'active' %}selected{% endif %}>Active</option>
                <option value="settled" {% if status_filter == 'settled' %}selected{% endif %}>Settled</option>
              </select>
            </div>
            <div class="form-group col-md-3">
              <label>Areas</label>
              <select id="areas" name="areas" multiple class="form-control"></select>
            </div>
            <div class="form-group col-md-3">
              <label>Bookers</label>
              <select id="bookers" name="bookers" multiple class="form-control"></select>
            </div>
          </div>
          <div class="d-flex justify-content-end">
            <button type="button" class="btn btn-secondary btn-sm mr-2" onclick="window.location='{% url 'sales:challan_list' %}'">Clear</button>
            <button type="submit" class="btn btn-primary btn-sm">Apply</button>
          </div>
        </form>
      </div>
    </div>

    <!-- Challans Table -->
    <div class="card">
      <div class="card-body table-responsive p-0">
        <table class="table table-hover table-striped" id="challans-table">
          <thead class="thead-light">
            <tr>
              <th>Challan #</th>
              <th>Date</th>
              <th>Areas</th>
              <th>Bookers</th>
              <th class="text-right">Invoices</th>
              <th class="text-right">Total Sale</th>
              <th class="text-right">Total Return</th>
              <th class="text-right">Received</th>
              <th class="text-right">Discount</th>
              <th class="text-right">Due</th>
              <th>Status</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {% for ch in challans_data %}
            <tr>
              <td><strong>{{ ch.obj.challan_no }}</strong></td>
              <td>{{ ch.obj.challan_date }}</td>
              <td>{{ ch.areas_text }}</td>
              <td>{{ ch.bookers_text }}</td>
              <td class="text-right">{{ ch.obj.line_count }}</td>
              <td class="text-right">{{ ch.obj.total_sale_amount|floatformat:0 }}</td>
              <td class="text-right">{{ ch.obj.total_return_amount|floatformat:0 }}</td>
              <td class="text-right">{{ ch.obj.total_received|floatformat:0 }}</td>
              <td class="text-right">{{ ch.obj.total_discount|floatformat:0 }}</td>
              <td class="text-right">
                <strong {% if ch.obj.total_due > 0 %}class="text-danger"{% else %}class="text-success"{% endif %}>
                  {{ ch.obj.total_due|floatformat:0 }}
                </strong>
              </td>
              <td>
                {% if ch.obj.status == 'settled' %}
                  <span class="badge badge-success">Settled</span>
                {% else %}
                  <span class="badge badge-warning">Active</span>
                {% endif %}
              </td>
              <td>
                <a href="{% url 'sales:challan_detail' challan_no=ch.obj.challan_no %}" class="btn btn-sm btn-outline-primary">
                  <i class="fas fa-eye"></i> Open
                </a>
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="12" class="text-center text-muted py-4">No challans found for selected filters.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}

<script>
$(function(){
  var csrfToken = $("[name=csrfmiddlewaretoken]").val() || "{{ csrf_token }}";

  /**
   * Select2 multi-select using customer app POST endpoints:
   *   /customer/ajax/get-areas/
   *   /customer/ajax/get-bookers/
   */
  function initMultiSelectPost(selector, url, selected, placeholder) {
    $(selector).select2({
      theme: 'bootstrap4',
      placeholder: placeholder || 'Select...',
      allowClear: true,
      width: '100%',
      ajax: {
        delay: 300,
        url: url,
        type: 'POST',
        headers: { 'X-CSRFToken': csrfToken },
        data: function(params){
          return { q: params.term || '' };
        },
        processResults: function(data){
          var items = data.results || data || [];
          return { results: items };
        },
        cache: true
      }
    });

    // Pre-select values from URL params
    if (selected && selected.length) {
      $.ajax({
        url: url,
        type: 'POST',
        headers: { 'X-CSRFToken': csrfToken },
        data: { q: '' }
      }).done(function(resp) {
        var items = resp.results || resp || [];
        var map = {};
        items.forEach(function(x){ map[String(x.id)] = x.text; });
        selected.forEach(function(id){
          var txt = map[String(id)] || String(id);
          var opt = new Option(txt, id, true, true);
          $(selector).append(opt).trigger('change');
        });
      });
    }
  }

  function getQueryList(name){
    var url = new URL(window.location.href);
    var vals = url.searchParams.getAll(name);
    var out = [];
    vals.forEach(function(v){
      v.split(',').forEach(function(p){ if(p.trim()) out.push(p.trim()); });
    });
    return [...new Set(out)];
  }

  initMultiSelectPost("#areas",   "{% url 'customers:get_sale_areas' %}",   getQueryList('areas'),   'Filter by areas');
  initMultiSelectPost("#bookers", "{% url 'customers:get_order_bookers' %}", getQueryList('bookers'), 'Filter by bookers');

  // Compress multi-select values into hidden inputs on form submit
  $("#filters-form").on("submit", function(){
    var form = $(this);
    ["areas","bookers"].forEach(function(name){
      var vals = $("#" + name).val() || [];
      form.find("input[name='" + name + "']").remove();
      $('<input>').attr({type:'hidden', name: name, value: vals.join(',')}).appendTo(form);
    });
  });
});
</script>
{% endblock %}