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

{% block title %}Bulk Delivery Result - Challan #{{ run.run_no }}{% endblock %}

{% block content %}
<div class="container-fluid mt-3" id="bulkResultRoot">

  <form method="post" id="bulkResultForm" 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">
            Bulk Delivery Result - Challan #{{ run.run_no }}
          </h5>
          <small class="text-muted">
            Date: {{ run.run_date|date:"d-m-Y" }} |
            Person: {{ run.delivery_person_name|default:"-" }} |
            Hub: {{ run.from_city|default:"-" }}
          </small>
        </div>

        <div>
          <a href="{% url 'good_transport:deliveries:detail' run.t_id %}" class="btn btn-light btn-sm">
            Back
          </a>
          <button type="submit" class="btn btn-success btn-sm">
            Save Bulk Result
          </button>
        </div>
      </div>

      <div class="card-body py-2">
        <div class="alert alert-info py-2 mb-0">
          <strong>Note:</strong>
          Jis invoice ka result save karna hai us ko select karein.
          <strong>To Pay</strong> invoice agar normal Delivered hai to full balance collect karna zaroori hai.
          Agar payment nahi mili to <strong>Not Delivered → Payment Not Received</strong> select karein.
        </div>
      </div>
    </div>

    <div class="card shadow-sm mb-3">
      <div class="card-header d-flex justify-content-between align-items-center">
        <div>
          <h6 class="mb-0 font-weight-bold">Pending Assigned Invoices</h6>
          <small class="text-muted">Multiple invoices ka result ek sath save karein</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>

      {% if rows %}
        <div class="card-body p-0">

          {% for row in rows %}
            {% with line=row.line invoice=row.invoice items=row.items %}

              <div
                class="border-bottom bulk-invoice-block"
                data-line-id="{{ line.id }}"
                data-payment-mode="{% if invoice %}{{ invoice.payment_mode }}{% endif %}"
                data-balance="{% if invoice %}{{ invoice.balance_amount|floatformat:2 }}{% else %}0.00{% endif %}"
              >

                <div class="p-2 bg-light">
                  <div class="row align-items-center">

                    <div class="col-md-1 mb-2 text-center">
                      <input
                        type="checkbox"
                        class="bulk-line-check"
                        name="selected_line_ids"
                        value="{{ line.id }}"
                        id="lineCheck{{ line.id }}"
                      >
                    </div>

                    <div class="col-md-2 mb-2">
                      <label for="lineCheck{{ line.id }}" class="mb-0">
                        <strong>Invoice #{{ line.invoice_no }}</strong><br>
                        <small class="text-muted">Builty: {{ line.builty_no|default:"-" }}</small>
                      </label>
                    </div>

                    <div class="col-md-2 mb-2">
                      <strong>Receiver</strong><br>
                      {{ line.receiver_name|default:"-" }}<br>
                      <small class="text-muted">{{ line.receiver_mobile|default:"" }}</small>
                    </div>

                    <div class="col-md-2 mb-2">
                      <strong>Route</strong><br>
                      {{ line.from_city|default:"-" }} → {{ line.to_city|default:"-" }}
                    </div>

                    <div class="col-md-2 mb-2">
                      <strong>Payment</strong><br>
                      {% if line.payment_mode == "paid" %}
                        <span class="badge badge-success">Paid</span>
                      {% elif line.payment_mode == "to_pay" %}
                        <span class="badge badge-warning">To Pay</span>
                      {% elif line.payment_mode == "credit" %}
                        <span class="badge badge-info">Credit</span>
                      {% else %}
                        <span class="badge badge-secondary">{{ line.payment_mode|default:"-" }}</span>
                      {% endif %}
                    </div>

                    <div class="col-md-1 mb-2 text-right">
                      <strong>Balance</strong><br>
                      {% if invoice %}
                        <span class="{% if invoice.balance_amount > 0 %}text-danger font-weight-bold{% else %}text-success font-weight-bold{% endif %}">
                          {{ invoice.balance_amount|floatformat:2 }}
                        </span>
                      {% else %}
                        -
                      {% endif %}
                    </div>

                    <div class="col-md-2 mb-2">
                      <label><strong>Result</strong></label>
                      <select name="result_status_{{ line.id }}" class="form-control form-control-sm result-status">
                        <option value="delivered">Delivered</option>
                        <option value="partial">Partial Delivered</option>
                        <option value="damage">Damage</option>
                        <option value="shortage">Shortage</option>
                        <option value="not_delivered">Not Delivered</option>
                      </select>
                    </div>

                  </div>
                </div>

                <div class="p-2 bulk-detail-area">

                  <div class="row not-delivered-area" style="display:none;">
                    <div class="col-md-4 mb-2">
                      <label><strong>Not Delivered Reason</strong></label>
                      <select name="failed_reason_{{ line.id }}" class="form-control form-control-sm failed-reason">
                        <option value="">Select reason</option>
                        {% for value,label in failed_reason_choices %}
                          <option value="{{ value }}">{{ label }}</option>
                        {% endfor %}
                      </select>
                    </div>

                    <div class="col-md-8 mb-2">
                      <label><strong>Remarks</strong></label>
                      <input
                        type="text"
                        name="remarks_{{ line.id }}"
                        class="form-control form-control-sm"
                        placeholder="Reason remarks"
                      >
                    </div>
                  </div>

                  <div class="delivered-area">

                    <div class="row">
                      <div class="col-md-3 mb-2">
                        <label><strong>Received By Name</strong></label>
                        <input
                          type="text"
                          name="received_by_name_{{ line.id }}"
                          class="form-control form-control-sm received-by-name"
                          value="{% if invoice %}{{ invoice.receiver_name|default:'' }}{% else %}{{ line.receiver_name|default:'' }}{% endif %}"
                        >
                      </div>

                      <div class="col-md-3 mb-2">
                        <label><strong>Mobile</strong></label>
                        <input
                          type="text"
                          name="received_by_mobile_{{ line.id }}"
                          class="form-control form-control-sm"
                          value="{% if invoice %}{{ invoice.receiver_mobile|default:'' }}{% else %}{{ line.receiver_mobile|default:'' }}{% endif %}"
                        >
                      </div>

                      <div class="col-md-3 mb-2">
                        <label><strong>CNIC</strong></label>
                        <input
                          type="text"
                          name="received_by_cnic_{{ line.id }}"
                          class="form-control form-control-sm"
                        >
                      </div>

                      <div class="col-md-3 mb-2">
                        <label><strong>Remarks</strong></label>
                        <input
                          type="text"
                          name="remarks_{{ line.id }}"
                          class="form-control form-control-sm"
                          placeholder="Optional remarks"
                        >
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-md-4 mb-2">
                        <label><strong>Collected Amount</strong></label>
                        <input
                          type="text"
                          name="collected_amount_{{ line.id }}"
                          class="form-control form-control-sm text-right collected-amount"
                          value="{% if invoice and invoice.payment_mode == 'to_pay' %}{{ invoice.balance_amount|floatformat:2 }}{% else %}0.00{% endif %}"
                        >
                      </div>

                      <div class="col-md-4 mb-2">
                        <label><strong>Cash / Bank</strong></label>
                        <select name="bank_id_{{ line.id }}" class="form-control form-control-sm bank-select">
                          <option value="">Select bank/cash</option>
                          {% for b in banks %}
                            <option value="{{ b.t_id }}">{{ b.name }}</option>
                          {% endfor %}
                        </select>
                      </div>

                      <div class="col-md-4 mb-2">
                        <label><strong>Current Balance</strong></label>
                        <input
                          type="text"
                          class="form-control form-control-sm text-right"
                          value="{% if invoice %}{{ invoice.balance_amount|floatformat:2 }}{% else %}0.00{% endif %}"
                          readonly
                        >
                      </div>
                    </div>

                    <div class="table-responsive">
                      <table class="table table-sm table-bordered mb-0 item-table">
                        <thead class="thead-light">
                          <tr>
                            <th style="width:45px;">#</th>
                            <th>Item</th>
                            <th class="text-right" style="width:110px;">Booked</th>
                            <th class="text-right" style="width:130px;">Received</th>
                            <th class="text-right" style="width:130px;">Damage</th>
                            <th class="text-right" style="width:130px;">Short</th>
                            <th>Damage / Short Remarks</th>
                          </tr>
                        </thead>

                        <tbody>
                          {% for item in items %}
                            <tr>
                              <td>{{ forloop.counter }}</td>
                              <td>{{ item.product_name|default:"-" }}</td>
                              <td class="text-right">
                                {{ item.qty|floatformat:2 }}
                              </td>

                              <td>
                                <input
                                  type="text"
                                  name="received_qty_{{ line.id }}_{{ item.id }}"
                                  class="form-control form-control-sm text-right qty-input received-input"
                                  data-booked="{{ item.qty|floatformat:2 }}"
                                  value="{{ item.qty|floatformat:2 }}"
                                >
                              </td>

                              <td>
                                <input
                                  type="text"
                                  name="damaged_qty_{{ line.id }}_{{ item.id }}"
                                  class="form-control form-control-sm text-right qty-input damage-input"
                                  value="0.00"
                                >
                              </td>

                              <td>
                                <input
                                  type="text"
                                  name="short_qty_{{ line.id }}_{{ item.id }}"
                                  class="form-control form-control-sm text-right qty-input short-input"
                                  value="0.00"
                                >
                              </td>

                              <td>
                                <input
                                  type="text"
                                  name="damage_remarks_{{ line.id }}_{{ item.id }}"
                                  class="form-control form-control-sm"
                                  placeholder="Remarks"
                                >
                              </td>
                            </tr>
                          {% empty %}
                            <tr>
                              <td colspan="7" class="text-center text-muted py-3">
                                No item lines.
                              </td>
                            </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>

                  </div>
                </div>

              </div>

            {% endwith %}
          {% endfor %}

        </div>

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

          <div>
            <a href="{% url 'good_transport:deliveries:detail' run.t_id %}" class="btn btn-light">
              Cancel
            </a>
            <button type="submit" class="btn btn-success">
              Save Bulk Result
            </button>
          </div>
        </div>

      {% else %}
        <div class="card-body text-center text-muted py-5">
          Is delivery challan mein koi pending invoice nahi hai.
        </div>
      {% endif %}

    </div>

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

{% block javascripts %}
{{ block.super }}
<script>
(function () {
  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 cleanAmount(value) {
    value = String(value || "").replace(/[^0-9.]/g, "");
    var parts = value.split(".");
    if (parts.length > 2) {
      value = parts[0] + "." + parts.slice(1).join("");
    }
    return value;
  }

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

    alert(message);
  }

  function updateSelectedCount() {
    $("#selectedCount").text($(".bulk-line-check:checked").length);
  }

  function setDeliveredDefaults($block) {
    $block.find(".received-input").each(function () {
      $(this).val(money($(this).data("booked")));
    });

    $block.find(".damage-input").val("0.00");
    $block.find(".short-input").val("0.00");

    var paymentMode = String($block.data("payment-mode") || "");
    var balance = toNumber($block.data("balance"));

    if (paymentMode === "to_pay") {
      $block.find(".collected-amount").val(money(balance));
    }
  }

  function setNotDeliveredDefaults($block) {
    $block.find(".received-input").val("0.00");
    $block.find(".damage-input").val("0.00");
    $block.find(".short-input").val("0.00");
    $block.find(".collected-amount").val("0.00");
    $block.find(".bank-select").val("");
  }

  function toggleBlock($block) {
    var status = $block.find(".result-status").val();

    if (status === "not_delivered") {
      $block.find(".not-delivered-area").show();
      $block.find(".delivered-area").hide();
      setNotDeliveredDefaults($block);
      return;
    }

    $block.find(".not-delivered-area").hide();
    $block.find(".delivered-area").show();

    if (status === "delivered") {
      setDeliveredDefaults($block);
    }

    if (status === "partial") {
      $block.find(".damage-input").val("0.00");
      $block.find(".short-input").val("0.00");
    }

    if (status === "damage") {
      $block.find(".short-input").val("0.00");
    }

    if (status === "shortage") {
      $block.find(".damage-input").val("0.00");
    }
  }

  $("#selectAllBtn").on("click", function () {
    $(".bulk-line-check").prop("checked", true);
    updateSelectedCount();
  });

  $("#clearAllBtn").on("click", function () {
    $(".bulk-line-check").prop("checked", false);
    updateSelectedCount();
  });

  $(document).on("change", ".bulk-line-check", updateSelectedCount);

  $(document).on("change", ".result-status", function () {
    var $block = $(this).closest(".bulk-invoice-block");
    toggleBlock($block);
  });

  $(document).on("input", ".qty-input, .collected-amount", function () {
    var clean = cleanAmount($(this).val());
    if ($(this).val() !== clean) {
      $(this).val(clean);
    }
  });

  $("#bulkResultForm").on("submit", function (e) {
    if (!$(".bulk-line-check:checked").length) {
      e.preventDefault();
      notify("Kam az kam 1 invoice select karein.");
      return false;
    }

    var ok = true;

    $(".bulk-line-check:checked").each(function () {
      var $block = $(this).closest(".bulk-invoice-block");
      var status = $block.find(".result-status").val();

      if (status === "not_delivered") {
        if (!$block.find(".failed-reason").val()) {
          ok = false;
          notify("Not Delivered invoice ke liye reason select karein.");
          return false;
        }
      } else {
        if (!$block.find(".received-by-name").val()) {
          ok = false;
          notify("Delivered/Partial/Damage/Shortage invoice ke liye Received By Name required hai.");
          return false;
        }

        var collected = toNumber($block.find(".collected-amount").val());
        var bank = $block.find(".bank-select").val();

        if (collected > 0 && !bank) {
          ok = false;
          notify("Collection amount enter hai, cash/bank select karein.");
          return false;
        }
      }
    });

    if (!ok) {
      e.preventDefault();
      return false;
    }

    return confirm("Selected invoices ka bulk result save karna hai?");
  });

  $(function () {
    $(".bulk-invoice-block").each(function () {
      toggleBlock($(this));
    });

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