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

{% block title %}Create Delivery Challan{% endblock %}

{% block stylesheets %}

<style>
  .inv-row { cursor: pointer; }
  .inv-row:hover { background-color: #f0f8ff !important; }
  .inv-row.selected { background-color: #e6f7e6 !important; }
</style>
{% endblock %}

{% block heading %}Create Delivery Challan{% endblock %}

{% block content %}
<div class="row">
  <div class="col-12">
    <!-- Filters -->
    <div class="card mb-3">
      <div class="card-header"><strong>Filter Unassigned Invoices</strong></div>
      <div class="card-body">
        <form method="get" id="filter-form">
          <div class="form-row">
            <div class="form-group col-md-5">
              <label>Areas</label>
              <select id="filter_areas" name="areas" multiple class="form-control"></select>
            </div>
            <div class="form-group col-md-5">
              <label>Order Bookers</label>
              <select id="filter_bookers" name="bookers" multiple class="form-control"></select>
            </div>
            <div class="form-group col-md-2 d-flex align-items-end">
              <button type="submit" class="btn btn-primary btn-block">Filter</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- Invoices Selection -->

    <!-- Invoices Selection -->
    <form method="post" id="create-form">
      {% csrf_token %}
      <input type="hidden" name="areas" value="{{ selected_areas|join:',' }}">
      <input type="hidden" name="bookers" value="{{ selected_bookers|join:',' }}">

      {% if too_many %}
      <!-- Too many invoices warning -->
      <div class="card">
        <div class="card-body text-center py-5">
          <i class="fas fa-exclamation-triangle text-warning" style="font-size:48px;"></i>
          <h5 class="mt-3">Too Many Unassigned Invoices ({{ total_unfiltered }})</h5>
          <p class="text-muted mb-4">
            Please use <strong>Area</strong> or <strong>Order Booker</strong> filters above to narrow down invoices before creating a challan.
          </p>
          <div class="d-flex justify-content-center">
            <a href="{% url 'sales:challan_create' %}?force_show=1" class="btn btn-outline-primary mr-2">
              <i class="fas fa-list"></i> Show All {{ total_unfiltered }} Invoices Anyway
            </a>
            <a href="{% url 'sales:challan_stale_invoices' %}" class="btn btn-outline-danger">
              <i class="fas fa-eye-slash"></i> View &amp; Close Old Invoices
            </a>
          </div>
        </div>
      </div>

      {% else %}
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <span>
            <strong>Unassigned Customer Sale Invoices</strong>
            <span class="text-muted ml-2">({{ invoices_data|length }} invoices)</span>
          </span>
          <div class="d-flex align-items-center">
            <div class="custom-control custom-checkbox mr-3">
              <input type="checkbox" class="custom-control-input" id="select-all">
              <label class="custom-control-label" for="select-all"><strong>Select All</strong></label>
            </div>
            <span id="selected-count" class="badge badge-info mr-3">0 selected</span>
            <span id="selected-total" class="badge badge-dark mr-3">Total: 0</span>
          </div>
        </div>
        <div class="card-body table-responsive p-0">
          <table class="table table-hover table-striped mb-0">
            <thead class="thead-light">
              <tr>
                <th style="width:40px;">
                  <i class="fas fa-check-square"></i>
                </th>
                <th>Invoice #</th>
                <th>Customer</th>
                <th>Date</th>
                <th class="text-right">Amount</th>
                <th>Area</th>
                <th>Booker</th>
              </tr>
            </thead>
            <tbody>
              {% for inv in invoices_data %}
              <tr class="inv-row" data-inv="{{ inv.invoice_no }}" data-amount="{{ inv.amount }}">
                <td>
                  <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input inv-check"
                           id="inv_{{ inv.invoice_no }}"
                           name="selected_invoices"
                           value="{{ inv.invoice_no }}">
                    <label class="custom-control-label" for="inv_{{ inv.invoice_no }}"></label>
                  </div>
                </td>
                <td><strong>{{ inv.invoice_no }}</strong></td>
                <td>{{ inv.customer_name }}</td>
                <td>{{ inv.date }}</td>
                <td class="text-right">{{ inv.amount|floatformat:0 }}</td>
                <td>{{ inv.area_name }}</td>
                <td>{{ inv.booker_name }}</td>
              </tr>
              {% empty %}
              <tr>
                <td colspan="7" class="text-center text-muted py-4">
                  No unassigned invoices found. All customer sale invoices may already be assigned to challans.
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

        {% if invoices_data %}
        <div class="card-footer">
          <div class="form-row align-items-end">
            <div class="form-group col-md-8 mb-0">
              <label>Remarks (optional)</label>
              <input type="text" name="remarks" class="form-control" placeholder="Challan remarks...">
            </div>
            <div class="form-group col-md-4 mb-0 text-right">
              <button type="submit" class="btn btn-success btn-lg" id="btn-create" disabled>
                <i class="fas fa-truck"></i> Create Challan
              </button>
            </div>
          </div>
        </div>
        {% endif %}
      </div>
      {% endif %}
    </form>





  </div>
</div>
{% endblock %}

{% block javascripts %}

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

  // Select2 using customer app POST endpoints
  function initMultiSelectPost(selector, url, placeholder) {
    $(selector).select2({
      theme: 'bootstrap4',
      placeholder: placeholder,
      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
      }
    });
  }

  initMultiSelectPost("#filter_areas",   "{% url 'customers:get_sale_areas' %}",   "Select areas...");
  initMultiSelectPost("#filter_bookers", "{% url 'customers:get_order_bookers' %}", "Select bookers...");

  // Pre-select from URL params
  var selAreas = "{{ selected_areas|join:',' }}".split(",").filter(Boolean);
  var selBookers = "{{ selected_bookers|join:',' }}".split(",").filter(Boolean);

  function preSelectPost(selector, url, ids) {
    if (!ids.length) return;
    $.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; });
      ids.forEach(function(id){
        var txt = map[String(id)] || String(id);
        var opt = new Option(txt, id, true, true);
        $(selector).append(opt).trigger('change');
      });
    });
  }

  preSelectPost("#filter_areas",   "{% url 'customers:get_sale_areas' %}",   selAreas);
  preSelectPost("#filter_bookers", "{% url 'customers:get_order_bookers' %}", selBookers);

  // Filter form: compress values
  $("#filter-form").on("submit", function(){
    var form = $(this);
    [["filter_areas","areas"], ["filter_bookers","bookers"]].forEach(function(pair){
      var vals = $("#" + pair[0]).val() || [];
      form.find("input[name='" + pair[1] + "']").remove();
      $('<input>').attr({type:'hidden', name: pair[1], value: vals.join(',')}).appendTo(form);
    });
  });

  // Row click toggles checkbox
  $(".inv-row").on("click", function(e){
    if($(e.target).is("input,label")) return;
    var cb = $(this).find(".inv-check");
    cb.prop("checked", !cb.prop("checked")).trigger("change");
  });

  // Select All
  $("#select-all").on("change", function(){
    var checked = this.checked;
    $(".inv-check").prop("checked", checked).trigger("change");
  });

  // Update counts
  function updateCounts(){
    var count = $(".inv-check:checked").length;
    var total = 0;
    $(".inv-check:checked").each(function(){
      total += parseFloat($(this).closest("tr").data("amount")) || 0;
    });
    $("#selected-count").text(count + " selected");
    $("#selected-total").text("Total: " + total.toLocaleString());
    $("#btn-create").prop("disabled", count === 0);
    $(".inv-row").each(function(){
      $(this).toggleClass("selected", $(this).find(".inv-check").is(":checked"));
    });
  }

  $(".inv-check").on("change", updateCounts);

  // Confirm create
  $("#create-form").on("submit", function(e){
    var count = $(".inv-check:checked").length;
    if(count === 0){
      e.preventDefault();
      alert("Select at least one invoice.");
      return;
    }
    if(!confirm("Create delivery challan with " + count + " invoices?")){
      e.preventDefault();
    }
  });
});
</script>
{% endblock %}