{% extends "admin_frontend/base.html" %}
{% load breadcrumbs %}
{% block title %}Weigh Ticket {{ ticket.ticket_number|default:ticket.id }}{% endblock %}
{% block content %}
{% render_breadcrumbs breadcrumbs %}
<div class="flex items-center justify-between mb-4">
  <h1 class="text-2xl font-semibold">Weigh Ticket {{ ticket.ticket_number|default:ticket.id }}</h1>
  <form method="post" action="{{ generate_url }}">
    {% csrf_token %}
    <button class="px-3 py-2 rounded bg-blue-600 text-white">Generate Invoice</button>
  </form>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-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">{{ ticket.pickup.customer.name }}</dd>
      <dt class="text-gray-500">Recorded</dt><dd class="col-span-2">{{ ticket.recorded_at }}</dd>
      <dt class="text-gray-500">Gross</dt><dd class="col-span-2">{{ ticket.gross_weight }} {{ ticket.unit }}</dd>
      <dt class="text-gray-500">Tare</dt><dd class="col-span-2">{{ ticket.tare_weight }} {{ ticket.unit }}</dd>
      <dt class="text-gray-500">Net</dt><dd class="col-span-2">{{ ticket.net_weight }} {{ ticket.unit }}</dd>
    </dl>
  </div>
  <div class="bg-white rounded shadow p-4">
    <h2 class="font-medium mb-2">Lines</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">Qty</th>
          <th class="px-2 py-1">Unit</th>
        </tr>
      </thead>
      <tbody class="divide-y">
        {% for line in lines %}
          <tr>
            <td class="px-2 py-1">{{ line.material.name }}</td>
            <td class="px-2 py-1">{{ line.quantity }}</td>
            <td class="px-2 py-1">{{ line.unit }}</td>
          </tr>
        {% empty %}
          <tr>
            <td colspan="3" class="px-2 py-2 text-gray-500">No lines.</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="bg-white rounded shadow p-4">
  <h2 class="font-medium mb-2">Documents</h2>
  <div class="mb-3">
    <form method="post" action="{% url 'recycle_core:documents_list' %}" enctype="multipart/form-data" class="flex flex-wrap items-center gap-2">
      {% csrf_token %}
      <input type="hidden" name="organization" value="{{ ticket.pickup.organization.id }}" />
      <input type="hidden" name="content_type" value="{{ ct_id }}" />
      <input type="hidden" name="object_id" value="{{ ticket.id }}" />
      <input type="text" name="kind" placeholder="Kind (optional)" class="border rounded px-3 py-2" />
      <input type="file" name="file" class="border rounded px-3 py-2" required />
      <button class="px-3 py-2 rounded bg-blue-600 text-white">Upload</button>
    </form>
  </div>
  <table class="min-w-full">
    <thead>
      <tr class="text-left text-sm text-gray-600">
        <th class="px-2 py-1">Kind</th>
        <th class="px-2 py-1">File</th>
        <th class="px-2 py-1">Uploaded</th>
      </tr>
    </thead>
    <tbody class="divide-y">
      {% for d in documents %}
      <tr>
        <td class="px-2 py-1">{{ d.kind|default:"-" }}</td>
        <td class="px-2 py-1"><a href="{{ d.file.url }}" target="_blank" class="text-blue-700 hover:underline">Download</a></td>
        <td class="px-2 py-1">{{ d.created_at }}</td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="3" class="px-2 py-2 text-gray-500">No documents yet.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}
