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

{% block title %}Delivery Proof #{{ delivery.t_id }}{% endblock %}

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

  <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 Proof #{{ delivery.t_id }}
        </h5>
        <small class="text-muted">
          {% if invoice %}
            Invoice #{{ invoice.invoice_no }} |
            Builty: {{ invoice.builty_no|default:"-" }} |
            Route: {{ invoice.from_city|default:"-" }} → {{ invoice.to_city|default:"-" }}
          {% else %}
            Invoice record not found
          {% endif %}
        </small>
      </div>

      <div>
        <a href="{% url 'good_transport:deliveries:list' %}" 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">

        <div class="col-md-3 mb-2">
          <strong>Delivery Date</strong><br>
          {{ delivery.delivery_date|date:"d-m-Y h:i A" }}
        </div>

        <div class="col-md-3 mb-2">
          <strong>Delivery Hub</strong><br>
          {{ delivery.delivery_city|default:"-" }}
        </div>

        <div class="col-md-3 mb-2">
          <strong>Status</strong><br>
          {% if delivery.status == "received" %}
            <span class="badge badge-success">{{ delivery.get_status_display }}</span>
          {% elif delivery.status == "partial" %}
            <span class="badge badge-warning">{{ delivery.get_status_display }}</span>
          {% elif delivery.status == "damage" %}
            <span class="badge badge-danger">{{ delivery.get_status_display }}</span>
          {% elif delivery.status == "shortage" %}
            <span class="badge badge-danger">{{ delivery.get_status_display }}</span>
          {% else %}
            <span class="badge badge-info">{{ delivery.get_status_display }}</span>
          {% endif %}
        </div>

        <div class="col-md-3 mb-2">
          <strong>Invoice Status</strong><br>
          {% if invoice %}
            {{ invoice.get_flow_status_display }}
          {% else %}
            -
          {% endif %}
        </div>

      </div>

      <hr>

      <div class="row">

        <div class="col-md-4 mb-2">
          <strong>Received By</strong><br>
          {{ delivery.received_by_name|default:"-" }}
        </div>

        <div class="col-md-4 mb-2">
          <strong>Mobile</strong><br>
          {{ delivery.received_by_mobile|default:"-" }}
        </div>

        <div class="col-md-4 mb-2">
          <strong>CNIC</strong><br>
          {{ delivery.received_by_cnic|default:"-" }}
        </div>

      </div>

      {% if delivery.remarks %}
        <hr>
        <strong>Remarks:</strong>
        <div class="text-muted">
          {{ delivery.remarks }}
        </div>
      {% endif %}

    </div>
  </div>

  {% if invoice %}
    <div class="card shadow-sm mb-3">
      <div class="card-header">
        <h6 class="mb-0 font-weight-bold">Invoice Detail</h6>
      </div>

      <div class="card-body">
        <div class="row">

          <div class="col-md-3 mb-2">
            <strong>Invoice No</strong><br>
            #{{ invoice.invoice_no }}
          </div>

          <div class="col-md-3 mb-2">
            <strong>Builty No</strong><br>
            {{ invoice.builty_no|default:"-" }}
          </div>

          <div class="col-md-3 mb-2">
            <strong>Customer</strong><br>
            {{ invoice.customer_name|default:"-" }}
          </div>

          <div class="col-md-3 mb-2">
            <strong>Receiver</strong><br>
            {{ invoice.receiver_name|default:"-" }}<br>
            <small class="text-muted">{{ invoice.receiver_mobile|default:"" }}</small>
          </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>Total Amount</strong><br>
            {{ invoice.total_amount|floatformat:2 }}
          </div>

          <div class="col-md-3 mb-2">
            <strong>Received</strong><br>
            {{ invoice.received_amount|floatformat:2 }}
          </div>

          <div class="col-md-3 mb-2">
            <strong>Balance</strong><br>
            <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>
          </div>

        </div>
      </div>
    </div>
  {% endif %}

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

    <div class="table-responsive">
      <table class="table table-sm table-bordered table-hover mb-0">
        <thead class="thead-light">
          <tr>
            <th style="width:50px;">#</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 lines %}
            <tr>
              <td>{{ forloop.counter }}</td>
              <td>{{ line.product_name|default:"-" }}</td>
              <td class="text-right">{{ line.booked_qty|floatformat:2 }}</td>
              <td class="text-right">{{ line.received_qty|floatformat:2 }}</td>
              <td class="text-right">
                {% if line.damaged_qty > 0 %}
                  <span class="text-danger font-weight-bold">{{ line.damaged_qty|floatformat:2 }}</span>
                {% else %}
                  {{ line.damaged_qty|floatformat:2 }}
                {% endif %}
              </td>
              <td class="text-right">
                {% if line.short_qty > 0 %}
                  <span class="text-danger font-weight-bold">{{ line.short_qty|floatformat:2 }}</span>
                {% else %}
                  {{ line.short_qty|floatformat:2 }}
                {% endif %}
              </td>
              <td>{{ line.damage_remarks|default:"-" }}</td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="7" class="text-center text-muted py-4">
                Koi delivery item line nahi mili.
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>
{% endblock %}