{% extends 'auth/dashboard.html' %}

{% block content %}
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{
  --g600:#16a34a;--g700:#15803d;--g800:#166534;
  --slate-900:#0f172a;--slate-600:#475569;
}
.orders-page *{font-family:'DM Sans',sans-serif}
.scene{background:radial-gradient(circle at 12% 8%,rgba(34,197,94,.16),transparent 38%),radial-gradient(circle at 100% 0,rgba(59,130,246,.12),transparent 36%),#f8fafc;border:1px solid #e2e8f0;border-radius:22px}
.card-3d{transform-style:preserve-3d;transition:transform .25s,box-shadow .25s}
.card-3d:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(15,23,42,.12)}
.chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700}
.chip-green{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.chip-amber{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
.chip-slate{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0}
.chip-blue{background:#e0f2fe;color:#075985;border:1px solid #bae6fd}
.table-shell{background:#fff;border:1px solid #eef2f7;border-radius:18px;overflow:hidden}
@media (max-width:640px){.table-shell{border-radius:16px}}
</style>

<div class="orders-page max-w-7xl mx-auto px-3 sm:px-5 py-6 space-y-5">
  <div class="scene card-3d p-4 sm:p-6" data-tilt>
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
      <div>
        <h1 class="text-xl sm:text-2xl font-bold text-gray-900">
          {% if is_admin_manage_page %}Input Shop Orders (Admin Queue){% else %}Input Shop Orders{% endif %}
        </h1>
        <p class="text-sm text-gray-500 mt-1">
          {% if is_admin_manage_page %}
            Review and process direct-purchase orders placed from the internal input shop.
          {% else %}
            Track direct-purchase orders and fulfillment updates.
          {% endif %}
        </p>
      </div>
      <div class="flex gap-2">
        <a href="{% url 'contract_market_place:input_shop' %}" class="px-4 py-2 rounded-xl border border-gray-200 text-gray-700 hover:bg-gray-50 text-sm font-semibold">Back to Shop</a>
        {% if request.user.type == 'ADMIN' or request.user.is_staff or request.user.is_superuser %}
          {% if is_admin_manage_page %}
            <a href="{% url 'contract_market_place:input_shop_orders' %}" class="px-4 py-2 rounded-xl border border-gray-200 text-gray-700 hover:bg-gray-50 text-sm font-semibold">My View</a>
          {% else %}
            <a href="{% url 'contract_market_place:input_shop_orders_admin' %}" class="px-4 py-2 rounded-xl border border-amber-200 bg-amber-50 text-amber-800 hover:bg-amber-100 text-sm font-semibold">Admin Queue</a>
          {% endif %}
        {% endif %}
      </div>
    </div>
  </div>

  {% if messages %}
    <div class="space-y-2">
      {% for message in messages %}
        <div class="rounded-xl border px-4 py-3 text-sm {% if message.tags == 'error' %}bg-red-50 border-red-200 text-red-800{% elif message.tags == 'warning' %}bg-yellow-50 border-yellow-200 text-yellow-900{% else %}bg-green-50 border-green-200 text-green-800{% endif %}">
          {{ message }}
        </div>
      {% endfor %}
    </div>
  {% endif %}

  <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5 card-3d" data-tilt>
    <form method="get" class="grid grid-cols-1 md:grid-cols-4 gap-3">
      <div class="md:col-span-2">
        <label class="block text-xs font-semibold uppercase tracking-wide text-gray-500 mb-1">Search</label>
        <input type="text" name="q" value="{{ q }}" placeholder="Order number, farmer, location" class="w-full rounded-xl border border-gray-200 px-3 py-2.5 text-sm">
      </div>
      <div>
        <label class="block text-xs font-semibold uppercase tracking-wide text-gray-500 mb-1">Order Status</label>
        <select name="status" class="w-full rounded-xl border border-gray-200 px-3 py-2.5 text-sm">
          <option value="">All</option>
          {% for code, label in status_choices %}
            <option value="{{ code }}" {% if status_filter == code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-xs font-semibold uppercase tracking-wide text-gray-500 mb-1">Payment</label>
        <select name="payment_status" class="w-full rounded-xl border border-gray-200 px-3 py-2.5 text-sm">
          <option value="">All</option>
          {% for code, label in payment_status_choices %}
            <option value="{{ code }}" {% if payment_status_filter == code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="md:col-span-4 flex flex-wrap gap-2">
        <button type="submit" class="px-4 py-2.5 rounded-xl bg-tea-green-600 text-white hover:bg-tea-green-700 text-sm font-semibold">Apply Filters</button>
        {% if q or status_filter or payment_status_filter %}
          <a href="{% if is_admin_manage_page %}{% url 'contract_market_place:input_shop_orders_admin' %}{% else %}{% url 'contract_market_place:input_shop_orders' %}{% endif %}" class="px-4 py-2.5 rounded-xl border border-gray-200 text-gray-700 hover:bg-gray-50 text-sm font-semibold">Reset</a>
        {% endif %}
      </div>
    </form>
  </div>

  <div class="table-shell card-3d" data-tilt>
    {% if page_obj.object_list %}
      <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
          <thead class="bg-gray-50 text-gray-600">
            <tr>
              <th class="text-left px-4 py-3 font-semibold">Order</th>
              <th class="text-left px-4 py-3 font-semibold">Farmer</th>
              <th class="text-left px-4 py-3 font-semibold">Placed By</th>
              {% if is_admin_manage_page %}
                <th class="text-left px-4 py-3 font-semibold">Assigned Officer</th>
              {% endif %}
              <th class="text-left px-4 py-3 font-semibold">Delivery</th>
              <th class="text-left px-4 py-3 font-semibold">Payment</th>
              <th class="text-left px-4 py-3 font-semibold">Status</th>
              <th class="text-left px-4 py-3 font-semibold">Date</th>
              <th class="text-right px-4 py-3 font-semibold">Action</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100">
            {% for order in page_obj.object_list %}
              <tr class="hover:bg-gray-50/70 transition">
                <td class="px-4 py-3">
                  <div class="font-semibold text-gray-900">{{ order.order_number }}</div>
                  <div class="text-xs text-gray-500">{{ order.items.count }} item{{ order.items.count|pluralize }}</div>
                  <div class="text-xs text-tea-green-700 font-semibold">KES {{ order.total_amount }}</div>
                </td>
                <td class="px-4 py-3">
                  <div class="font-medium text-gray-800">{{ order.farmer.get_full_name }}</div>
                  {% if order.farmer.phone_number %}<div class="text-xs text-gray-500">{{ order.farmer.phone_number }}</div>{% endif %}
                </td>
                <td class="px-4 py-3">
                  {% if order.placed_by %}
                    <div class="font-medium text-gray-800">{{ order.placed_by.get_full_name }}</div>
                    <div class="text-xs text-gray-500">{{ order.placed_by.get_type_display }}</div>
                  {% else %}
                    <span class="text-gray-400">Unknown</span>
                  {% endif %}
                </td>
                {% if is_admin_manage_page %}
                  <td class="px-4 py-3">
                    {% if order.assigned_field_officer %}
                      <div class="font-medium text-gray-800">{{ order.assigned_field_officer.get_full_name }}</div>
                      <div class="text-xs text-gray-500">Field Officer</div>
                    {% endif %}

                    <form method="post" action="{% url 'contract_market_place:input_shop_order_assign_officer' order.id %}" class="mt-2">
                      {% csrf_token %}
                      <select name="field_officer_id" class="w-full rounded-lg border border-gray-200 bg-white px-2.5 py-2 text-xs"
                              onchange="this.form.submit()">
                        <option value="" {% if not order.assigned_field_officer %}selected{% endif %}>Unassigned</option>
                        {% for officer in field_officers %}
                          <option value="{{ officer.id }}" {% if order.assigned_field_officer_id == officer.id %}selected{% endif %}>
                            {{ officer.get_full_name }}
                          </option>
                        {% endfor %}
                      </select>
                    </form>
                  </td>
                {% endif %}
                <td class="px-4 py-3">
                  {% if order.pickup_station %}
                    <div class="text-gray-800">{{ order.pickup_station.name }}{% if order.pickup_station.location %} - {{ order.pickup_station.location }}{% endif %}</div>
                    <div class="text-xs text-gray-500">Pickup station</div>
                  {% else %}
                    <div class="text-gray-800">{{ order.delivery_location|default:"Delivery location not set" }}</div>
                  {% endif %}
                  <div class="text-xs text-gray-500">{{ order.delivery_contact_name|default:order.farmer.get_full_name }}</div>
                </td>
                <td class="px-4 py-3">
                  <div class="text-gray-800">{{ order.get_payment_status_display }}</div>
                  <div class="text-xs text-gray-500">Paid: KES {{ order.amount_paid }} / {{ order.total_amount }}</div>
                </td>
                <td class="px-4 py-3">
                  <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold
                    {% if order.status == 'AWAITING_PAYMENT' %}bg-amber-100 text-amber-900
                    {% elif order.status == 'FULFILLED' %}bg-green-100 text-green-800
                    {% elif order.status == 'SHIPPED' %}bg-blue-100 text-blue-800
                    {% elif order.status == 'PROCESSING' %}bg-amber-100 text-amber-900
                    {% elif order.status == 'ORDER_RECEIVED' %}bg-indigo-100 text-indigo-800
                    {% elif order.status == 'CANCELLED' %}bg-red-100 text-red-800
                    {% else %}bg-gray-100 text-gray-700{% endif %}">
                    {{ order.get_status_display }}
                  </span>
                </td>
                <td class="px-4 py-3 text-gray-600">
                  <div>{{ order.created_at|date:"Y-m-d" }}</div>
                  <div class="text-xs">{{ order.created_at|date:"H:i" }}</div>
                </td>
                <td class="px-4 py-3 text-right">
                  {% if request.user.type == 'FARMER' and order.payment_status != 'PAID' %}
                    <a href="{% url 'contract_market_place:input_shop_checkout' %}?pending_order_id={{ order.id }}" class="inline-flex items-center px-3 py-2 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 hover:bg-amber-100 font-semibold text-xs">
                      Complete Payment
                    </a>
                  {% else %}
                    <a href="{% url 'contract_market_place:input_shop_order_detail' order.id %}" class="inline-flex items-center px-3 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-white font-semibold text-xs">
                      View / Track
                    </a>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      {% if page_obj.paginator.num_pages > 1 %}
        <div class="px-4 py-4 border-t border-gray-100 flex flex-wrap items-center justify-between gap-3">
          <p class="text-sm text-gray-500">
            Showing {{ page_obj.start_index }}-{{ page_obj.end_index }} of {{ page_obj.paginator.count }} orders
          </p>
          <div class="flex items-center gap-2">
            {% if page_obj.has_previous %}
              <a href="?page={{ page_obj.previous_page_number }}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if payment_status_filter %}&payment_status={{ payment_status_filter }}{% endif %}{% if q %}&q={{ q }}{% endif %}"
                 class="px-3 py-2 rounded-lg border border-gray-200 text-sm font-semibold text-gray-700 hover:bg-gray-50">Prev</a>
            {% endif %}
            <span class="px-3 py-2 rounded-lg bg-gray-100 text-sm font-semibold text-gray-700">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
            {% if page_obj.has_next %}
              <a href="?page={{ page_obj.next_page_number }}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if payment_status_filter %}&payment_status={{ payment_status_filter }}{% endif %}{% if q %}&q={{ q }}{% endif %}"
                 class="px-3 py-2 rounded-lg border border-gray-200 text-sm font-semibold text-gray-700 hover:bg-gray-50">Next</a>
            {% endif %}
          </div>
        </div>
      {% endif %}
    {% else %}
      <div class="p-10 text-center">
        <p class="text-lg font-semibold text-gray-700">No input shop orders found</p>
        <p class="text-sm text-gray-500 mt-1">Try changing filters or place a direct purchase from the shop.</p>
        <a href="{% url 'contract_market_place:input_shop' %}" class="inline-flex mt-4 px-4 py-2 rounded-xl bg-tea-green-600 text-white hover:bg-tea-green-700 text-sm font-semibold">Open Input Shop</a>
      </div>
    {% endif %}
  </div>
</div>
<script>
(() => {
  function attachTilt(node) {
    if (!node || window.matchMedia('(pointer: coarse)').matches) return;
    node.addEventListener('mousemove', (e) => {
      const r = node.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width;
      const y = (e.clientY - r.top) / r.height;
      const rx = (0.5 - y) * 6;
      const ry = (x - 0.5) * 8;
      node.style.transform = `perspective(900px) rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg) translateY(-2px)`;
    });
    node.addEventListener('mouseleave', () => { node.style.transform = ''; });
  }

  document.querySelectorAll('[data-tilt]').forEach(attachTilt);
})();
</script>
{% endblock %}