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

{% block title %}Arrival Confirmation #{{ challan.challan_no }}{% endblock %}

{% block content %}
<style>
  .gt-wrap { padding: 18px 14px; }
  .gt-title { font-size: 24px; font-weight: 900; color: #111827; margin-bottom: 10px; }
  .gt-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
  .gt-info { padding: 12px 16px; }
  .gt-stat { padding: 14px; text-align: center; }
  .gt-label { font-size: 13px; color: #6b7280; }
  .gt-value { font-size: 20px; font-weight: 900; color: #111827; }
  .gt-muted { color: #6b7280; }
  .gt-money { text-align: right; font-weight: 800; }
  .gt-table th { background: #eef2f7; font-size: 13px; white-space: nowrap; }
  .gt-table td { font-size: 13px; vertical-align: middle; }
  .gt-input { min-width: 95px; }
  .gt-ok { color: #16a34a; font-weight: 800; }
  .gt-bad { color: #dc2626; font-weight: 800; }
  .gt-warning-row { background: #fff7ed; }
  @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="arrivalConfirmRoot">

  <div class="d-flex justify-content-between align-items-center mb-2">
    <div class="gt-title">
      Arrival Confirmation — Challan #{{ challan.challan_no }}
    </div>

    <div class="gt-no-print">
      <a href="{% url 'good_transport:challans:arrival_sheet' challan.t_id %}" class="btn btn-info btn-sm" target="_blank">
        Print Arrival Sheet
      </a>
      <a href="{% url 'good_transport:challans:detail' challan.t_id %}" class="btn btn-light btn-sm">
        Back
      </a>
    </div>
  </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">
        <div class="row">
          <div class="col-md-3 mb-2">
            <strong>Date:</strong>
            <span class="gt-muted">{{ challan.challan_date|date:"d-m-Y" }}</span>
          </div>

          <div class="col-md-3 mb-2">
            <strong>Route:</strong>
            <span class="gt-muted">{{ challan.from_city }} → {{ challan.to_city }}</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>Status:</strong>
            <span class="gt-muted">{{ challan.get_status_display }}</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>Receiving:</strong>
            {% if summary.complete %}
              <span class="gt-ok">Complete</span>
            {% else %}
              <span class="gt-bad">Pending</span>
            {% endif %}
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-2">
      <div class="gt-card gt-stat">
        <div class="gt-label">Booked Qty</div>
        <div class="gt-value">{{ summary.total_booked|floatformat:2 }}</div>
      </div>
    </div>

    <div class="col-md-2">
      <div class="gt-card gt-stat">
        <div class="gt-label">Arrived Qty</div>
        <div class="gt-value text-success" id="totalArrivedBox">{{ summary.total_arrived|floatformat:2 }}</div>
      </div>
    </div>
  </div>

  <form method="post" id="arrivalForm" 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">Station Receiving Detail</h6>
          <small class="gt-muted">Arrived + Damage + Short qty = Booked qty hona chahiye.</small>
        </div>

        <div class="gt-no-print">
          {% if challan.status != "closed" %}
            <button type="button" class="btn btn-outline-primary btn-sm" id="autoFillBtn">
              Auto Fill Full Arrived
            </button>
            <button type="submit" class="btn btn-success btn-sm">
              Save Confirmation
            </button>
          {% endif %}
        </div>
      </div>

      <div class="table-responsive">
        <table class="table table-sm table-bordered gt-table mb-0">
          <thead>
            <tr>
              <th>#</th>
              <th>Invoice</th>
              <th>Builty</th>
              <th>Customer / Receiver</th>
              <th>Route</th>
              <th>Item</th>
              <th class="text-right">Booked</th>
              <th class="text-right">Arrived</th>
              <th class="text-right">Damage</th>
              <th class="text-right">Short</th>
              <th>Status</th>
              <th>Remarks</th>
            </tr>
          </thead>

          <tbody>
            {% for row in rows %}
              <tr class="arrival-row" data-booked="{{ row.booked_qty|floatformat:2 }}">
                <td>{{ forloop.counter }}</td>

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

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

                <td>
                  <strong>{{ row.customer_name|default:"-" }}</strong><br>
                  <small class="gt-muted">{{ row.receiver_name|default:"-" }}</small>
                </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>{{ row.product_name|default:"Goods" }}</td>

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

                <td>
                  <input
                    type="text"
                    name="arrived_qty_{{ row.key }}"
                    class="form-control form-control-sm text-right gt-input qty-input arrived-input"
                    value="{{ row.arrived_qty|floatformat:2 }}"
                    {% if challan.status == "closed" %}readonly{% endif %}
                  >
                </td>

                <td>
                  <input
                    type="text"
                    name="damaged_qty_{{ row.key }}"
                    class="form-control form-control-sm text-right gt-input qty-input damage-input"
                    value="{{ row.damaged_qty|floatformat:2 }}"
                    {% if challan.status == "closed" %}readonly{% endif %}
                  >
                </td>

                <td>
                  <input
                    type="text"
                    name="short_qty_{{ row.key }}"
                    class="form-control form-control-sm text-right gt-input qty-input short-input"
                    value="{{ row.short_qty|floatformat:2 }}"
                    {% if challan.status == "closed" %}readonly{% endif %}
                  >
                </td>

                <td class="row-status">
                  {{ row.status }}
                </td>

                <td>
                  <input
                    type="text"
                    name="remarks_{{ row.key }}"
                    class="form-control form-control-sm"
                    value="{{ row.remarks }}"
                    placeholder="Optional"
                    {% if challan.status == "closed" %}readonly{% endif %}
                  >
                </td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="12" class="text-center gt-muted py-4">
                  No arrival rows found.
                </td>
              </tr>
            {% endfor %}
          </tbody>

          <tfoot>
            <tr>
              <th colspan="6" class="text-right">Totals:</th>
              <th class="gt-money">{{ summary.total_booked|floatformat:2 }}</th>
              <th class="gt-money" id="footerArrived">{{ summary.total_arrived|floatformat:2 }}</th>
              <th class="gt-money text-danger" id="footerDamage">{{ summary.total_damage|floatformat:2 }}</th>
              <th class="gt-money text-danger" id="footerShort">{{ summary.total_short|floatformat:2 }}</th>
              <th colspan="2"></th>
            </tr>
          </tfoot>
        </table>
      </div>

      {% if challan.status != "closed" %}
        <div class="p-3 text-right gt-no-print">
          <button type="submit" class="btn btn-success">
            Save Confirmation
          </button>
        </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: 2500
      });
      return;
    }
    alert(message);
  }

  function updateRow($row) {
    var booked = toNumber($row.data("booked"));
    var arrived = toNumber($row.find(".arrived-input").val());
    var damage = toNumber($row.find(".damage-input").val());
    var short = toNumber($row.find(".short-input").val());
    var total = arrived + damage + short;

    $row.removeClass("gt-warning-row");

    if (total !== booked) {
      $row.addClass("gt-warning-row");
      $row.find(".row-status").html('<span class="text-danger font-weight-bold">Mismatch</span>');
    } else if (damage > 0 && short > 0) {
      $row.find(".row-status").html('<span class="text-danger font-weight-bold">Damage + Shortage</span>');
    } else if (damage > 0) {
      $row.find(".row-status").html('<span class="text-danger font-weight-bold">Damage</span>');
    } else if (short > 0) {
      $row.find(".row-status").html('<span class="text-danger font-weight-bold">Shortage</span>');
    } else {
      $row.find(".row-status").html('<span class="text-success font-weight-bold">OK</span>');
    }
  }

  function updateTotals() {
    var totalArrived = 0;
    var totalDamage = 0;
    var totalShort = 0;

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

      totalArrived += toNumber($row.find(".arrived-input").val());
      totalDamage += toNumber($row.find(".damage-input").val());
      totalShort += toNumber($row.find(".short-input").val());
    });

    $("#totalArrivedBox").text(money(totalArrived));
    $("#footerArrived").text(money(totalArrived));
    $("#footerDamage").text(money(totalDamage));
    $("#footerShort").text(money(totalShort));
  }

  $("#autoFillBtn").on("click", function () {
    $(".arrival-row").each(function () {
      var $row = $(this);
      var booked = toNumber($row.data("booked"));

      $row.find(".arrived-input").val(money(booked));
      $row.find(".damage-input").val("0.00");
      $row.find(".short-input").val("0.00");
    });

    updateTotals();
  });

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

  $("#arrivalForm").on("submit", function (e) {
    var ok = true;

    $(".arrival-row").each(function () {
      var $row = $(this);
      var booked = toNumber($row.data("booked"));
      var arrived = toNumber($row.find(".arrived-input").val());
      var damage = toNumber($row.find(".damage-input").val());
      var short = toNumber($row.find(".short-input").val());

      if (arrived + damage + short !== booked) {
        ok = false;
        notify("Har row mein Arrived + Damage + Short = Booked qty hona chahiye.");
        return false;
      }
    });

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

    return confirm("Arrival confirmation save karni hai?");
  });

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