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

{% block title %}Delivery Result - Invoice #{{ line.invoice_no }}{% endblock %}

{% block content %}
<div class="container-fluid mt-3">
  <form method="post" id="resultForm" 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">Delivery Result - Invoice #{{ line.invoice_no }}</h5>
          <small class="text-muted">
            Delivery Challan #{{ run.run_no }} |
            Person: {{ run.delivery_person_name }} |
            Builty: {{ line.builty_no|default:"-" }}
          </small>
        </div>

        <a href="{% url 'good_transport:deliveries:detail' run.t_id %}" class="btn btn-light btn-sm">
          Back
        </a>
      </div>

      <div class="card-body">
        <div class="row">
          <div class="col-md-3 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-3 mb-2">
            <strong>Route:</strong><br>
            {{ line.from_city|default:"-" }} → {{ line.to_city|default:"-" }}
          </div>

          <div class="col-md-3 mb-2">
            <strong>Payment Mode:</strong><br>
            {{ invoice.get_payment_mode_display }}
          </div>

          <div class="col-md-3 mb-2">
            <strong>Balance:</strong><br>
            <span class="text-danger font-weight-bold">{{ invoice.balance_amount|floatformat:2 }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="card shadow-sm mb-3">
      <div class="card-header">
        <h6 class="mb-0 font-weight-bold">Result</h6>
      </div>

      <div class="card-body">
        <div class="row">
          <div class="col-md-4 mb-2">
            <label><strong>Delivery Result *</strong></label>
            <select name="result_status" id="resultStatus" class="form-control" required>
              <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 class="col-md-4 mb-2" id="failedReasonBox" style="display:none;">
            <label><strong>Not Delivered Reason *</strong></label>
            <select name="failed_reason" class="form-control">
              <option value="">Select reason</option>
              {% for value,label in failed_reason_choices %}
                <option value="{{ value }}">{{ label }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="col-md-4 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 mb-3" id="receiverBox">
      <div class="card-header">
        <h6 class="mb-0 font-weight-bold">Receiver Proof</h6>
      </div>

      <div class="card-body">
        <div class="row">
          <div class="col-md-4 mb-2">
            <label><strong>Received By Name *</strong></label>
            <input type="text" name="received_by_name" class="form-control" value="{{ invoice.receiver_name|default:'' }}">
          </div>

          <div class="col-md-4 mb-2">
            <label><strong>Mobile</strong></label>
            <input type="text" name="received_by_mobile" class="form-control" value="{{ invoice.receiver_mobile|default:'' }}">
          </div>

          <div class="col-md-4 mb-2">
            <label><strong>CNIC</strong></label>
            <input type="text" name="received_by_cnic" class="form-control">
          </div>
        </div>
      </div>
    </div>

    <div class="card shadow-sm mb-3" id="paymentBox">
      <div class="card-header">
        <h6 class="mb-0 font-weight-bold">Payment Collection</h6>
      </div>

      <div class="card-body">
        <div class="alert alert-info py-2">
          To Pay invoice mein full normal delivery ke liye full balance collect karna zaroori hai. Credit invoice mein collection optional hai.
        </div>

        <div class="row">
          <div class="col-md-4 mb-2">
            <label><strong>Collected Amount</strong></label>
            <input type="text" name="collected_amount" id="collectedAmount" class="form-control text-right" value="{% if 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" class="form-control">
              <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 text-right" value="{{ invoice.balance_amount|floatformat:2 }}" readonly>
          </div>
        </div>
      </div>
    </div>

    <div class="card shadow-sm mb-3" id="itemsBox">
      <div class="card-header">
        <h6 class="mb-0 font-weight-bold">Item Delivery Detail</h6>
      </div>

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

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

                <td>
                  <input
                    type="text"
                    name="received_qty_{{ 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_{{ 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_{{ 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_{{ item.id }}"
                    class="form-control form-control-sm"
                    placeholder="Damage / shortage remarks"
                  >
                </td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="7" class="text-center text-muted py-3">No items.</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <div class="text-right mb-4">
      <button type="submit" class="btn btn-success">
        Save Result
      </button>
    </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 setDeliveredDefaults() {
    $(".received-input").each(function () {
      $(this).val(money($(this).data("booked")));
    });
    $(".damage-input").val("0.00");
    $(".short-input").val("0.00");
  }

  function setNotDeliveredDefaults() {
    $(".received-input").val("0.00");
    $(".damage-input").val("0.00");
    $(".short-input").val("0.00");
    $("#collectedAmount").val("0.00");
  }

  function toggleResultFields() {
    var status = $("#resultStatus").val();

    if (status === "not_delivered") {
      $("#failedReasonBox").show();
      $("#receiverBox").hide();
      $("#paymentBox").hide();
      $("#itemsBox").hide();
      setNotDeliveredDefaults();
      return;
    }

    $("#failedReasonBox").hide();
    $("#receiverBox").show();
    $("#paymentBox").show();
    $("#itemsBox").show();

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

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

  $("#resultStatus").on("change", toggleResultFields);
  toggleResultFields();
})();
</script>
{% endblock %}