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

{% block title %}Challan Recovery #{{ challan.challan_no }}{% endblock %}

{% block content %}
<style>
  .gt-wrap {
    padding: 18px 14px;
  }

  .gt-title {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 10px;
    color: #111827;
  }

  .gt-badge {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 6px;
    background: #facc15;
    color: #111827;
    font-size: 12px;
    font-weight: 800;
    vertical-align: middle;
  }

  .gt-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  .gt-info-card {
    padding: 12px 16px;
  }

  .gt-stat {
    text-align: center;
    padding: 16px 14px;
  }

  .gt-stat-label {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 7px;
  }

  .gt-stat-value {
    font-size: 22px;
    font-weight: 900;
  }

  .gt-table th {
    background: #eef2f7;
    font-size: 13px;
    white-space: nowrap;
  }

  .gt-table td {
    font-size: 13px;
    vertical-align: middle;
  }

  .gt-money {
    text-align: right;
    font-weight: 800;
  }

  .gt-due {
    color: #dc2626;
  }

  .gt-green {
    color: #16a34a;
  }

  .gt-muted {
    color: #6b7280;
  }

  .gt-toolbar {
    margin-top: 22px;
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  .gt-input {
    min-width: 110px;
  }


  .gt-tag {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 800;
  }

  .gt-tag-ok {
    background: #dcfce7;
    color: #166534;
  }

  .gt-tag-transit {
    background: #fef3c7;
    color: #92400e;
  }

  .gt-tag-done {
    background: #e0f2fe;
    color: #075985;
  }

  .gt-transit-row {
    background: #fffbeb;
  }

  .gt-note {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
    line-height: 1.25;
  }

  @media print {
    .navbar,
    .sidebar,
    .gt-no-print,
    .btn,
    button {
      display: none !important;
    }

    .gt-wrap {
      padding: 0;
    }

    .gt-card {
      box-shadow: none;
      border: 1px solid #d1d5db;
    }
  }
</style>

<div class="container-fluid gt-wrap" id="challanRecoveryRoot">

  <div class="gt-title">
    Challan #{{ challan.challan_no }}
    <span class="gt-badge">{{ challan.get_status_display }}</span>
  </div>

  {% if messages %}
    {% for message in messages %}
      <div class="alert alert-{{ message.tags|default:'info' }} py-2">
        {{ message }}
      </div>
    {% endfor %}
  {% endif %}

  <div class="row mb-3">
    <div class="col-md-8">
      <div class="gt-card gt-info-card">
        <div class="row">
          <div class="col-md-3 mb-2">
            <strong>Date:</strong>
            <span class="gt-muted">{{ challan.challan_date|date:"M d, Y" }}</span>
          </div>

          <div class="col-md-3 mb-2">
            <strong>Route:</strong>
            <span class="gt-muted">{{ challan.from_city|default:"-" }} → {{ challan.to_city|default:"-" }}</span>
          </div>

          <div class="col-md-3 mb-2">
            <strong>Vehicle:</strong>
            <span class="gt-muted">{{ challan.vehicle_no|default:"-" }}</span>
          </div>

          <div class="col-md-3 mb-2">
            <strong>Invoices:</strong>
            <span class="gt-muted">{{ summary.invoice_count }}</span>
          </div>

          <div class="col-md-6 mb-2">
            <strong>Driver:</strong>
            <span class="gt-muted">{{ challan.driver_name|default:"-" }} {{ challan.driver_mobile|default:"" }}</span>
          </div>

          <div class="col-md-6 mb-2">
            <strong>Remarks:</strong>
            <span class="gt-muted">{{ challan.remarks|default:"-" }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-2">
      <div class="gt-card gt-stat">
        <div class="gt-stat-label">Total Due</div>
        <div class="gt-stat-value gt-due" id="totalDueBox">{{ summary.total_due|floatformat:2 }}</div>
        <div class="gt-note">
          Recoverable: {{ summary.recoverable_due|floatformat:2 }}<br>
          Transit: {{ summary.transit_due|floatformat:2 }}
        </div>
      </div>
    </div>

    <div class="col-md-2">
      <div class="gt-card gt-stat">
        <div class="gt-stat-label">Received</div>
        <div class="gt-stat-value gt-green" id="totalReceiveBox">0.00</div>
      </div>
    </div>
  </div>

  <div class="gt-toolbar gt-no-print">
    <div>
      <button type="button" class="btn btn-primary btn-sm" id="selectAllBtn">
        Select All / Auto-fill Due
      </button>

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

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

  <form method="post" id="recoveryForm" autocomplete="off">
    {% csrf_token %}

    <div class="gt-card">
      <div class="p-3 border-bottom d-flex justify-content-between align-items-center">
        <div>
          <h6 class="mb-0 font-weight-bold">Settlement — Challan Invoice Recovery</h6>
          <small class="gt-muted">Sirf selected invoices ki recovery save hogi.</small>
        </div>

        <div class="gt-no-print">
          <button type="submit" class="btn btn-success">
            Save Recovery
          </button>
        </div>
      </div>

      <div class="table-responsive">
        <table class="table table-sm table-bordered gt-table mb-0">
          <thead>
            <tr>
              <th style="width:42px;">#</th>
              <th style="width:45px;" class="text-center">
                <input type="checkbox" id="masterCheck">
              </th>
              <th>Customer</th>
              <th>Invoice</th>
              <th>Builty</th>
              <th>Route</th>
              <th>Recovery Status</th>
              <th>Mode</th>
              <th class="text-right">Invoice Amount</th>
              <th class="text-right">Already Received</th>
              <th class="text-right">Credit to Ledger</th>
              <th class="text-right">Discount</th>
              <th class="text-right">Credit Received</th>
              <th>Bank</th>
              <th class="text-right">Due</th>
              <th>Remarks</th>
            </tr>
          </thead>

          <tbody>
            {% for row in rows %}
              {% with line=row.line inv=row.invoice %}
                <tr
                  class="recovery-row {% if row.is_transit %}gt-transit-row{% endif %}"
                  data-line-id="{{ line.id }}"
                  data-due="{{ row.due|floatformat:2 }}"
                >
                  <td>{{ forloop.counter }}</td>

                  <td class="text-center">
                    {% if row.is_recoverable %}
                      <input
                        type="checkbox"
                        class="line-check"
                        name="selected_line_ids"
                        value="{{ line.id }}"
                      >
                    {% else %}
                      -
                    {% endif %}
                  </td>

                  <td>
                    <strong>{{ line.customer_name|default:"-" }}</strong>
                    {% if inv %}
                      <br><small class="gt-muted">ID: {{ inv.customer_t_id }}</small>
                    {% endif %}
                  </td>

                  <td>
                    <strong>#{{ line.invoice_no }}</strong>
                  </td>

                  <td>{{ line.builty_no|default:"-" }}</td>

                  <td>
      <small class="gt-muted">Segment:</small>
      {{ row.segment_route }}<br>
      <small class="gt-muted">Final:</small>
      <strong>{{ row.final_route }}</strong>
    </td>

    <td>
  {% if row.is_recoverable %}
    <span class="gt-tag gt-tag-ok">{{ row.recovery_label }}</span>
  {% elif row.is_transit %}
    <span class="gt-tag gt-tag-transit">{{ row.recovery_label }}</span>
  {% else %}
    <span class="gt-tag gt-tag-done">{{ row.recovery_label }}</span>
  {% endif %}

  <div class="gt-note">
    {{ row.recovery_note }}
  </div>
</td>

                  <td>
                    {% if inv %}
                      {{ inv.get_payment_mode_display }}
                    {% else %}
                      {{ line.payment_mode|default:"-" }}
                    {% endif %}
                  </td>

                  <td class="gt-money">
                    {{ row.amount|floatformat:2 }}
                  </td>

                  <td class="gt-money gt-green">
                    {{ row.received|floatformat:2 }}
                  </td>

                  <td class="gt-money">
                    {{ row.due|floatformat:2 }}
                  </td>

                  <td>
                    <input
                      type="text"
                      name="discount_{{ line.id }}"
                      class="form-control form-control-sm text-right gt-input discount-input"
                      value="0.00"
                      {% if not row.is_recoverable %}readonly{% endif %}
                    >
                  </td>

                  <td>
                    <input
                      type="text"
                      name="receive_amount_{{ line.id }}"
                      class="form-control form-control-sm text-right gt-input receive-input"
                      value="0.00"
                      {% if not row.is_recoverable %}readonly{% endif %}
                    >
                  </td>

                  <td>
                    <select
                      name="bank_id_{{ line.id }}"
                      class="form-control form-control-sm bank-select"
                      {% if not row.is_recoverable %}disabled{% endif %}
                    >
                      <option value="">Select Bank</option>
                      {% for b in banks %}
                        <option
                          value="{{ b.t_id }}"
                          {% if default_cash_bank and default_cash_bank.t_id == b.t_id %}selected{% endif %}
                        >
                          {{ b.name }}
                        </option>
                      {% endfor %}
                    </select>
                  </td>

                  <td class="gt-money due-after">
                    {{ row.due|floatformat:2 }}
                  </td>

                  <td>
                    <input
                      type="text"
                      name="remarks_{{ line.id }}"
                      class="form-control form-control-sm"
                      placeholder="Optional"
                      {% if not row.is_recoverable %}readonly{% endif %}
                    >
                  </td>
                </tr>
              {% endwith %}
            {% empty %}
              <tr>
                <td colspan="16" class="text-center gt-muted py-4">
                  Is challan mein koi invoice nahi mili.
                </td>
              </tr>
            {% endfor %}
          </tbody>

          <tfoot>
            <tr>
              <th colspan="8" class="text-right">Totals:</th>
              <th class="gt-money">{{ summary.total_amount|floatformat:2 }}</th>
              <th class="gt-money gt-green">{{ summary.total_received|floatformat:2 }}</th>
              <th class="gt-money">{{ summary.total_due|floatformat:2 }}</th>
              <th class="gt-money" id="footerDiscount">0.00</th>
              <th class="gt-money" id="footerReceive">0.00</th>
              <th></th>
              <th class="gt-money" id="footerDue">{{ summary.total_due|floatformat:2 }}</th>
              <th></th>
            </tr>
          </tfoot>
        </table>
      </div>

      <div class="p-3 text-right gt-no-print">
        <button type="submit" class="btn btn-success">
          Save Recovery
        </button>
      </div>
    </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: 2500
      });
      return;
    }

    alert(message);
  }

  function updateRow($row) {
    var due = toNumber($row.data("due"));
    var discount = toNumber($row.find(".discount-input").val());
    var receive = toNumber($row.find(".receive-input").val());

    var remaining = due - discount - receive;

    if (remaining < 0) {
      remaining = 0;
    }

    $row.find(".due-after").text(money(remaining));
  }

  function updateTotals() {
    var totalReceive = 0;
    var totalDiscount = 0;
    var totalDueAfter = 0;

    $(".recovery-row").each(function () {
      var $row = $(this);

      updateRow($row);

      var due = toNumber($row.data("due"));
      var discount = toNumber($row.find(".discount-input").val());
      var receive = toNumber($row.find(".receive-input").val());

      totalReceive += receive;
      totalDiscount += discount;

      var remaining = due - discount - receive;
      if (remaining < 0) remaining = 0;

      totalDueAfter += remaining;
    });

    $("#totalReceiveBox").text(money(totalReceive));
    $("#footerReceive").text(money(totalReceive));
    $("#footerDiscount").text(money(totalDiscount));
    $("#footerDue").text(money(totalDueAfter));

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

  function fillRowDue($row) {
    var due = toNumber($row.data("due"));
    $row.find(".discount-input").val("0.00");
    $row.find(".receive-input").val(money(due));
  }

  $("#selectAllBtn").on("click", function () {
    $(".line-check").each(function () {
      var $check = $(this);
      var $row = $check.closest(".recovery-row");

      $check.prop("checked", true);
      fillRowDue($row);
    });

    updateTotals();
  });

  $("#clearAllBtn").on("click", function () {
    $(".line-check").prop("checked", false);
    $(".discount-input").val("0.00");
    $(".receive-input").val("0.00");
    updateTotals();
  });

  $("#masterCheck").on("change", function () {
    var checked = $(this).is(":checked");

    $(".line-check").each(function () {
      var $check = $(this);
      var $row = $check.closest(".recovery-row");

      $check.prop("checked", checked);

      if (checked) {
        fillRowDue($row);
      } else {
        $row.find(".discount-input").val("0.00");
        $row.find(".receive-input").val("0.00");
      }
    });

    updateTotals();
  });

  $(document).on("change", ".line-check", function () {
    var $row = $(this).closest(".recovery-row");

    if ($(this).is(":checked")) {
      fillRowDue($row);
    } else {
      $row.find(".discount-input").val("0.00");
      $row.find(".receive-input").val("0.00");
    }

    updateTotals();
  });

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

    var $row = $(this).closest(".recovery-row");
    var due = toNumber($row.data("due"));
    var discount = toNumber($row.find(".discount-input").val());
    var receive = toNumber($row.find(".receive-input").val());

    if (discount + receive > due) {
      notify("Receive + discount due se zyada nahi ho sakta.");
      $(this).val("0.00");
    }

    updateTotals();
  });

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

    var ok = true;

    $(".line-check:checked").each(function () {
      var $row = $(this).closest(".recovery-row");
      var due = toNumber($row.data("due"));
      var discount = toNumber($row.find(".discount-input").val());
      var receive = toNumber($row.find(".receive-input").val());
      var bank = $row.find(".bank-select").val();

      if (receive <= 0 && discount <= 0) {
        ok = false;
        notify("Selected invoice mein receive ya discount enter karein.");
        return false;
      }

      if (receive + discount > due) {
        ok = false;
        notify("Receive + discount due se zyada nahi ho sakta.");
        return false;
      }

      if (receive > 0 && !bank) {
        ok = false;
        notify("Receive amount ke liye bank/cash select karein.");
        return false;
      }
    });

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

    return confirm("Selected challan invoices ki recovery save karni hai?");
  });

  $(function () {
    updateTotals();
  });
})();
</script>
{% endblock %}