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

{% block title %}Counter Delivery #{{ invoice.invoice_no }}{% endblock %}

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

  <form method="post" 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">
            Counter Delivery - Invoice #{{ invoice.invoice_no }}
          </h5>
          <small class="text-muted">
            Builty: {{ invoice.builty_no|default:"-" }} |
            Route: {{ invoice.from_city }} → {{ invoice.to_city }} |
            Current Hub: {{ invoice.current_city }}
          </small>
        </div>

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

      <div class="card-body">

        {% 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-3">
            <strong>Customer:</strong><br>
            {{ invoice.customer_name|default:"-" }}
          </div>

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

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

          <div class="col-md-2">
            <strong>Total:</strong><br>
            {{ invoice.total_amount|floatformat:2 }}
          </div>

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

        <hr>

        <div class="row">
          <div class="col-md-3 mb-2">
            <label><strong>Result *</strong></label>
            <select name="result_status" class="form-control" required>
              <option value="delivered">Delivered</option>
              <option value="partial">Partial</option>
              <option value="damage">Damage</option>
              <option value="shortage">Shortage</option>
            </select>
          </div>

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

          <div class="col-md-3 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-3 mb-2">
            <label><strong>CNIC</strong></label>
            <input type="text" name="received_by_cnic" class="form-control">
          </div>

          <div class="col-md-3 mb-2">
            <label><strong>Collected Amount</strong></label>
            <input
              type="text"
              name="collected_amount"
              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-3 mb-2">
            <label><strong>Cash / Bank</strong></label>
            <select name="bank_id" class="form-control">
              <option value="">Select Bank</option>
              {% for b in banks %}
                <option value="{{ b.t_id }}">{{ b.name }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="col-md-6 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">
        <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 line in invoice_lines %}
              <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ line.product_name|default:"-" }}</td>
                <td class="text-right">{{ line.qty|floatformat:2 }}</td>

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

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

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

                <td>
                  <input
                    type="text"
                    name="damage_remarks_{{ line.id }}"
                    class="form-control form-control-sm"
                    placeholder="Optional"
                  >
                </td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="7" class="text-center text-muted py-4">
                  Invoice items nahi milay.
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <div class="card-footer text-right">
        <button type="submit" class="btn btn-success">
          Save Counter Delivery
        </button>
      </div>
    </div>

  </form>

</div>
{% endblock %}