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

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

{% block content %}
<div
  class="container-fluid mt-3"
  id="deliveryRunRoot"
  data-person-search-url="{% url 'good_transport:delivery_persons:api_search' %}"
  data-route-search-url="{% url 'good_transport:routes:api_search' %}"
  data-invoice-search-url="{% url 'good_transport:deliveries:api_ready_invoices' %}"
>
  <form method="post" id="deliveryRunForm" autocomplete="off">
    {% csrf_token %}

    <div class="card shadow-sm mb-3">
      <div class="card-header d-flex justify-content-between align-items-center">
        <div>
          <h5 class="mb-0 font-weight-bold">New Delivery Challan</h5>
          <small class="text-muted">Run No: {{ display_run_no }}</small>
        </div>

        <div>
          <a class="btn btn-light btn-sm" href="{% url 'good_transport:deliveries:list' %}">
            Back
          </a>
          <button class="btn btn-success btn-sm" type="submit">
            Save Delivery Challan
          </button>
        </div>
      </div>

      <div class="card-body">
        <div class="row">
          <div class="col-md-3 mb-2">
            <label><strong>Date</strong></label>
            <input type="date" name="run_date" class="form-control" value="{{ today|date:'Y-m-d' }}" required>
          </div>

          <div class="col-md-4 mb-2">
            <label><strong>Delivery Person *</strong></label>
            <select id="deliveryPersonSelect" name="delivery_person_id" class="form-control" required></select>
          </div>

          <div class="col-md-4 mb-2">
            <label><strong>From Hub *</strong></label>
            <select id="fromAreaSelect" name="from_area_t_id" class="form-control" required></select>
          </div>

          <div class="col-md-12 mb-2">
            <label><strong>Remarks</strong></label>
            <input type="text" name="remarks" class="form-control" placeholder="Optional remarks">
          </div>
        </div>
      </div>
    </div>

    <div class="card shadow-sm">
      <div class="card-header d-flex justify-content-between align-items-center">
        <div>
          <h6 class="mb-0 font-weight-bold">Ready for Delivery Invoices</h6>
          <small class="text-muted">From Hub select karne ke baad invoices load hongi</small>
        </div>

        <div>
          <button type="button" class="btn btn-outline-primary btn-sm" id="selectAllBtn">Select All</button>
          <button type="button" class="btn btn-outline-secondary btn-sm" id="clearAllBtn">Clear</button>
        </div>
      </div>

      <div class="table-responsive">
        <table class="table table-sm table-bordered mb-0">
          <thead class="thead-light">
            <tr>
              <th style="width:45px;" class="text-center">
                <input type="checkbox" id="masterCheck">
              </th>
              <th>Invoice</th>
              <th>Builty</th>
              <th>Date</th>
              <th>Customer</th>
              <th>Receiver</th>
              <th>Route</th>
              <th>Payment</th>
              <th class="text-right">Balance</th>
            </tr>
          </thead>

          <tbody id="invoiceBody">
            <tr>
              <td colspan="9" class="text-center text-muted py-4">
                Pehle From Hub select karein.
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="card-footer d-flex justify-content-between align-items-center">
        <div>
          Selected: <strong id="selectedCount">0</strong> |
          Balance: <strong id="selectedBalance">0.00</strong>
        </div>

        <button type="submit" class="btn btn-success">
          Save Delivery Challan
        </button>
      </div>
    </div>
  </form>
</div>
{% endblock %}

{% block javascripts %}
{{ block.super }}
<script>
(function () {
  var root = $("#deliveryRunRoot");

  function getCookie(name) {
    var cookieValue = null;

    if (document.cookie && document.cookie !== "") {
      var cookies = document.cookie.split(";");

      for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i].trim();

        if (cookie.substring(0, name.length + 1) === (name + "=")) {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
        }
      }
    }

    return cookieValue;
  }

  function escapeHtml(value) {
    return String(value || "")
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
  }

  function toNumber(value) {
    value = String(value || "0").replace(/,/g, "").trim();
    var n = parseFloat(value);
    return isNaN(n) ? 0 : n;
  }

  function money(value) {
    return toNumber(value).toFixed(2);
  }

  function getRows(data) {
    if (data && $.isArray(data.results)) return data.results;
    if (data && data.ok && $.isArray(data.results)) return data.results;
    if ($.isArray(data)) return data;
    return [];
  }

  function notify(message) {
    if (window.Swal) {
      Swal.fire({
        toast: true,
        position: "top-end",
        icon: "warning",
        title: message,
        showConfirmButton: false,
        timer: 2200
      });
      return;
    }
    alert(message);
  }

  function setupDeliveryPersonSelect() {
    $("#deliveryPersonSelect").select2({
      placeholder: "Search delivery person",
      width: "100%",
      allowClear: true,
      ajax: {
        url: root.data("person-search-url"),
        type: "POST",
        dataType: "json",
        delay: 250,
        headers: { "X-CSRFToken": getCookie("csrftoken") },
        data: function (params) {
          return { term: params.term || "" };
        },
        processResults: function (data) {
          return {
            results: $.map(getRows(data), function (p) {
              return {
                id: p.id || p.ref || "",
                text: p.text || p.name || "",
                mobile: p.mobile || "",
                address: p.address || ""
              };
            })
          };
        }
      },
      templateResult: function (item) {
        if (item.loading) return item.text;

        var html = "<div style='line-height:1.25;'>"
          + "<div style='font-weight:900;'>" + escapeHtml(item.text || "") + "</div>";

        if (item.mobile) {
          html += "<div style='font-size:11px;color:#64748b;'>" + escapeHtml(item.mobile) + "</div>";
        }

        html += "</div>";
        return html;
      },
      templateSelection: function (item) {
        return item.text || "";
      },
      escapeMarkup: function (markup) {
        return markup;
      }
    });
  }

  function setupRouteSelect() {
    $("#fromAreaSelect").select2({
      placeholder: "Search hub / area",
      width: "100%",
      allowClear: true,
      ajax: {
        url: root.data("route-search-url"),
        type: "POST",
        dataType: "json",
        delay: 250,
        headers: { "X-CSRFToken": getCookie("csrftoken") },
        data: function (params) {
          return { term: params.term || "" };
        },
        processResults: function (data) {
          return {
            results: $.map(getRows(data), function (a) {
              return {
                id: a.id || a.t_id || a.ref || "",
                text: a.text || a.area_name || "",
                description: a.description || "",
                hub_code: a.hub_code || ""
              };
            })
          };
        }
      },
      templateSelection: function (item) {
        return item.text || "";
      }
    });

    $("#fromAreaSelect").on("select2:select select2:clear", function () {
      loadReadyInvoices();
    });
  }

  function renderInvoiceRows(rows) {
    var html = "";

    if (!rows.length) {
      html = "<tr>"
        + "<td colspan='9' class='text-center text-muted py-4'>"
        + "Is hub par koi ready-for-delivery invoice nahi mili."
        + "</td>"
        + "</tr>";

      $("#invoiceBody").html(html);
      updateSummary();
      return;
    }

    $.each(rows, function (i, inv) {
      html += "<tr>"
        + "<td class='text-center'>"
        + "<input type='checkbox' class='invoice-check' name='invoice_tids'"
        + " value='" + escapeHtml(inv.t_id) + "'"
        + " data-balance='" + escapeHtml(inv.balance_amount || "0") + "'>"
        + "</td>"
        + "<td><strong>#" + escapeHtml(inv.invoice_no) + "</strong></td>"
        + "<td>" + escapeHtml(inv.builty_no || "-") + "</td>"
        + "<td>" + escapeHtml(inv.invoice_date || "-") + "</td>"
        + "<td>" + escapeHtml(inv.customer_name || "-") + "</td>"
        + "<td>"
        + escapeHtml(inv.receiver_name || "-")
        + "<br><small class='text-muted'>" + escapeHtml(inv.receiver_mobile || "") + "</small>"
        + "</td>"
        + "<td>" + escapeHtml(inv.from_city || "-") + " → " + escapeHtml(inv.to_city || "-") + "</td>"
        + "<td>" + escapeHtml(inv.payment_mode || "-") + "</td>"
        + "<td class='text-right'>" + money(inv.balance_amount || 0) + "</td>"
        + "</tr>";
    });

    $("#invoiceBody").html(html);
    $("#masterCheck").prop("checked", false);
    updateSummary();
  }

  function loadReadyInvoices() {
    var fromAreaId = $("#fromAreaSelect").val() || "";

    if (!fromAreaId) {
      renderInvoiceRows([]);
      return;
    }

    $("#invoiceBody").html(
      "<tr><td colspan='9' class='text-center text-muted py-4'>Loading invoices...</td></tr>"
    );

    $.ajax({
      url: root.data("invoice-search-url"),
      type: "GET",
      dataType: "json",
      data: {
        from_area_t_id: fromAreaId
      },
      success: function (res) {
        renderInvoiceRows(getRows(res));
      },
      error: function () {
        $("#invoiceBody").html(
          "<tr><td colspan='9' class='text-center text-danger py-4'>Invoice loading failed.</td></tr>"
        );
        updateSummary();
      }
    });
  }

  function updateSummary() {
    var count = 0;
    var balance = 0;

    $(".invoice-check:checked").each(function () {
      count += 1;
      balance += toNumber($(this).data("balance"));
    });

    $("#selectedCount").text(count);
    $("#selectedBalance").text(money(balance));

    var totalChecks = $(".invoice-check").length;
    var checked = $(".invoice-check:checked").length;
    $("#masterCheck").prop("checked", totalChecks > 0 && totalChecks === checked);
  }

  $("#masterCheck").on("change", function () {
    $(".invoice-check").prop("checked", $(this).is(":checked"));
    updateSummary();
  });

  $("#selectAllBtn").on("click", function () {
    $(".invoice-check").prop("checked", true);
    updateSummary();
  });

  $("#clearAllBtn").on("click", function () {
    $(".invoice-check").prop("checked", false);
    updateSummary();
  });

  $(document).on("change", ".invoice-check", updateSummary);

  $("#deliveryRunForm").on("submit", function (e) {
    if (!$("#deliveryPersonSelect").val()) {
      e.preventDefault();
      notify("Delivery person select karein.");
      $("#deliveryPersonSelect").select2("open");
      return false;
    }

    if (!$("#fromAreaSelect").val()) {
      e.preventDefault();
      notify("From hub select karein.");
      $("#fromAreaSelect").select2("open");
      return false;
    }

    if (!$(".invoice-check:checked").length) {
      e.preventDefault();
      notify("Kam az kam 1 invoice select karein.");
      return false;
    }

    return true;
  });

  $(function () {
    setupDeliveryPersonSelect();
    setupRouteSelect();
    updateSummary();
  });
})();
</script>
{% endblock %}