{% extends "admin_frontend/base.html" %}
{% load breadcrumbs humanize %}
{% block title %}Pickup #{{ pickup.id }}{% endblock %}
{% block content %}
{% render_breadcrumbs breadcrumbs %}

<div class="flex items-center justify-between mb-4">
  <h1 class="text-2xl font-semibold">Pickup #{{ pickup.id }}</h1>
  <div class="flex items-center gap-2">
    {% if perms.recycle_core.create_weigh_ticket %}
      <a class="px-3 py-2 rounded bg-blue-600 text-white" href="{% url 'recycle_core:pickup_create_weigh_ticket' pickup.id %}">Create Weigh Ticket</a>
    {% endif %}
    {% if perms.recycle_core.generate_invoice %}
      <form method="post" action="{% url 'recycle_core:pickup_generate_invoice' pickup.id %}">
        {% csrf_token %}
        <button class="px-3 py-2 rounded bg-blue-600 text-white">Generate Invoice</button>
      </form>
    {% endif %}
  </div>
  
</div>

<div class="grid grid-cols-1 gap-6">
  <div class="bg-white rounded shadow p-4">
    <h2 class="font-medium mb-2">Details</h2>
    <dl class="grid grid-cols-3 gap-2 text-sm">
      <dt class="text-gray-500">Customer</dt><dd class="col-span-2">{{ pickup.customer.name }}</dd>
      <dt class="text-gray-500">Site</dt><dd class="col-span-2">{{ pickup.site.name }}</dd>
      <dt class="text-gray-500">Status</dt><dd class="col-span-2">{{ pickup.status }}</dd>
      <dt class="text-gray-500">Scheduled</dt><dd class="col-span-2">{{ pickup.scheduled_at|default:"-" }}</dd>
      <dt class="text-gray-500">Driver</dt><dd class="col-span-2">{{ pickup.assigned_driver.username|default:"-" }}</dd>
      <dt class="text-gray-500">Notes</dt><dd class="col-span-2 whitespace-pre-wrap">{{ pickup.notes|default:"-" }}</dd>
    </dl>
  </div>
  <div class="bg-white rounded shadow p-4">
    <h2 class="font-medium mb-2">Items</h2>
    <table class="min-w-full">
      <thead>
        <tr class="text-left text-sm text-gray-600">
          <th class="px-2 py-1">Material</th>
          <th class="px-2 py-1">Est. Qty</th>
          <th class="px-2 py-1">Unit</th>
        </tr>
      </thead>
      <tbody class="divide-y">
        {% for it in items %}
          <tr>
            <td class="px-2 py-1">{{ it.material.name }}</td>
            <td class="px-2 py-1">{{ it.estimated_qty|default:"-" }}</td>
            <td class="px-2 py-1">{{ it.unit }}</td>
          </tr>
        {% empty %}
          <tr>
            <td colspan="3" class="px-2 py-2 text-gray-500">No items.</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
    <div class="mt-4 border-t pt-4">
      <h3 class="font-medium mb-2">Add Item</h3>
      <form method="post">
        {% csrf_token %}
        <input type="hidden" name="action" value="add_item">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-3 items-end">
          <div>
            <label class="block text-sm text-gray-600 mb-1">Material</label>
            {{ add_item_form.material }}
          </div>
          <div>
            <label class="block text-sm text-gray-600 mb-1">Est. Quantity</label>
            {{ add_item_form.estimated_qty }}
          </div>
          <div>
            <label class="block text-sm text-gray-600 mb-1">Unit</label>
            {{ add_item_form.unit }}
          </div>
          <div>
            <button class="px-3 py-2 rounded bg-blue-600 text-white">Add</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<div id="tickets" class="mt-6 bg-white rounded shadow p-4">
  <h2 class="font-medium mb-2">Weigh Tickets</h2>
  <div class="overflow-x-auto">
  <table class="min-w-[1100px]">
    <thead>
      <tr class="text-left text-sm text-gray-600">
        <th class="px-2 py-1">Ticket</th>
        <th class="px-2 py-1">Recorded</th>
        <th class="px-2 py-1">Net</th>
        <th class="px-2 py-1 text-right">Unit Price</th>
        <th class="px-2 py-1 text-right">Total</th>
        <th class="px-2 py-1">Actions</th>
      </tr>
    </thead>
    <tbody class="divide-y">
      {% for t in pickup.weigh_tickets.all %}
        <tr>
          <td class="px-2 py-1"><a class="text-blue-700 hover:underline" href="{% url 'recycle_core:weigh_ticket_detail' t.id %}">{{ t.ticket_number|default:t.id }}</a></td>
          <td class="px-2 py-1">{{ t.recorded_at }}</td>
          <td class="px-2 py-1">{{ t.net_weight }} {{ t.unit }}</td>
          <td class="px-2 py-1 text-right">{% if t.avg_unit %}{{ t.avg_unit|floatformat:2|intcomma }} {{ ticket_currency }}{% else %}-{% endif %}</td>
          <td class="px-2 py-1 text-right">{% if t.total_value %}{{ t.total_value|floatformat:2|intcomma }} {{ ticket_currency }}{% else %}-{% endif %}</td>
          <td class="px-2 py-1">
            {% if perms.recycle_core.generate_invoice %}
            <form method="post" action="{% url 'recycle_core:weigh_ticket_generate_invoice' t.id %}">
              {% csrf_token %}
              <button class="btn-outline btn-xs">Generate Invoice</button>
            </form>
            {% endif %}
          </td>
        </tr>
      {% empty %}
        <tr>
          <td colspan="4" class="px-2 py-2 text-gray-500">No weigh tickets yet.</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>

  <div class="mt-3">
    {% if perms.recycle_core.create_weigh_ticket %}
      <a class="btn" href="{% url 'recycle_core:pickup_create_weigh_ticket' pickup.id %}">Create Weigh Ticket</a>
    {% endif %}
  </div>
</div>

<div class="mt-6 bg-white rounded shadow p-4">
  <h2 class="font-medium mb-2">Invoices</h2>
  <div class="overflow-x-auto">
  <table class="min-w-[1100px]">
    <thead>
      <tr class="text-left text-sm text-gray-600">
        <th class="px-2 py-1">Invoice</th>
        <th class="px-2 py-1">Customer</th>
        <th class="px-2 py-1 text-right">Total</th>
        <th class="px-2 py-1 text-right">Paid</th>
        <th class="px-2 py-1 text-right">Balance</th>
        <th class="px-2 py-1">Status</th>
        <th class="px-2 py-1">Issued</th>
        <th class="px-2 py-1">Actions</th>
      </tr>
    </thead>
    <tbody class="divide-y">
      {% for inv in invoices %}
      <tr>
        <td class="px-2 py-1"><a class="text-blue-700 hover:underline" href="{% url 'billing:invoice_detail' inv.id %}">#{{ inv.id }}</a></td>
        <td class="px-2 py-1">{{ inv.customer.name }}</td>
        <td class="px-2 py-1 text-right">{{ inv.total_amount|floatformat:2|intcomma }} {{ inv.currency_code }}</td>
        <td class="px-2 py-1 text-right">{{ inv.payments_total|default:0|floatformat:2|intcomma }} {{ inv.currency_code }}</td>
        <td class="px-2 py-1 text-right">{{ inv.balance|floatformat:2|intcomma }} {{ inv.currency_code }}</td>
        <td class="px-2 py-1"><span class="px-2 py-1 rounded bg-gray-100 text-gray-700">{{ inv.status }}</span></td>
        <td class="px-2 py-1">{{ inv.issued_at|default:"-" }}</td>
        <td class="px-2 py-1">
          <div class="flex items-center gap-2">
            <a class="btn-outline btn-xs" href="{% url 'billing:invoice_detail' inv.id %}">View</a>
            {% if inv.status == 'draft' %}
            <form method="post" action="{% url 'recycle_core:pickup_regenerate_invoice' pickup.id %}">
              {% csrf_token %}
              <button class="btn btn-xs" onclick="return confirm('Regenerate draft invoice from current tickets?')">Regenerate</button>
            </form>
            {% endif %}
          </div>
        </td>
      </tr>
      {% empty %}
      <tr>
        <td class="px-2 py-2 text-gray-500" colspan="8">No invoices for this pickup.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
</div>

{% endblock %}
