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

{% block content %}
<div class="max-w-7xl mx-auto px-4 py-6 space-y-6">

  <div class="bg-white rounded-2xl shadow p-4 sm:p-6">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
      <div class="min-w-0">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">Field Officers</h1>
        <p class="text-sm text-gray-600 mt-1">
          Assign farmers to field officers. Field officers will only manage contracts for farmers assigned to them.
        </p>
      </div>

      <div class="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
        <a
          href="{% url 'contract_market_place:user_create' %}"
          class="inline-flex items-center justify-center px-4 py-2 rounded-xl bg-tea-green-600 hover:bg-tea-green-700 text-white font-semibold transition w-full sm:w-auto"
        >
          Assign Field Officer
        </a>
        <a
          href="{% url 'contract_market_place:dashboard' %}"
          class="inline-flex items-center justify-center px-4 py-2 rounded-xl bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold transition w-full sm:w-auto"
        >
          ← Back
        </a>
      </div>
    </div>
  </div>

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

  <div class="bg-white rounded-2xl shadow overflow-hidden">
    <div class="p-4 sm:p-6 border-b">
      <h2 class="text-lg font-semibold text-gray-800">Available Field Officers</h2>
      <p class="text-sm text-gray-600 mt-1">Click “Manage Assignments” to assign or remove farmers.</p>
    </div>

    <!-- ✅ Mobile cards -->
    <div class="sm:hidden p-4 space-y-3">
      {% for row in rows %}
        {% with officer=row.officer %}
          <div class="border rounded-2xl p-4 bg-white shadow-sm">
            <div class="flex items-start justify-between gap-3">
              <div class="min-w-0">
                <div class="font-bold text-gray-900 truncate">{{ officer.get_full_name }}</div>

                <div class="mt-2 space-y-1 text-sm">
                  <div class="flex gap-2">
                    <span class="text-gray-500 w-16 flex-shrink-0">Phone</span>
                    <span class="text-gray-800 break-words">{{ officer.phone_number|default:"-" }}</span>
                  </div>
                  <div class="flex gap-2">
                    <span class="text-gray-500 w-16 flex-shrink-0">Email</span>
                    <span class="text-gray-800 break-words">{{ officer.email|default:"-" }}</span>
                  </div>
                </div>
              </div>

              <span class="inline-flex items-center justify-center px-2.5 py-1 rounded-full bg-tea-green-50 text-tea-green-800 font-semibold flex-shrink-0">
                {{ row.assigned_count|default:"0" }}
              </span>
            </div>

            <div class="mt-4">
              <a
                href="{% url 'contract_market_place:field_officer_assign_farmers' officer.id %}"
                class="inline-flex items-center justify-center w-full px-4 py-2 rounded-xl bg-tea-green-600 text-white font-semibold hover:bg-tea-green-700 transition"
              >
                Manage Assignments
              </a>
            </div>
          </div>
        {% endwith %}
      {% empty %}
        <div class="px-4 py-10 text-center text-gray-600">
          No field officers found.
        </div>
      {% endfor %}
    </div>

    <!-- ✅ Desktop table -->
    <div class="hidden sm:block overflow-x-auto">
      <table class="min-w-full text-sm">
        <thead>
          <tr class="text-left text-gray-600 border-b">
            <th class="px-4 py-3">Officer</th>
            <th class="px-4 py-3">Phone</th>
            <th class="px-4 py-3">Email</th>
            <th class="px-4 py-3">Assigned Farmers</th>
            <th class="px-4 py-3 text-right">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y">
          {% for row in rows %}
            {% with officer=row.officer %}
            <tr class="hover:bg-gray-50">
              <td class="px-4 py-3 font-semibold text-gray-900">
                {{ officer.get_full_name }}
              </td>
              <td class="px-4 py-3 text-gray-700 whitespace-nowrap">
                {{ officer.phone_number|default:"-" }}
              </td>
              <td class="px-4 py-3 text-gray-700 max-w-[18rem]">
                <span class="break-words">{{ officer.email|default:"-" }}</span>
              </td>
              <td class="px-4 py-3">
                <span class="inline-flex items-center px-2.5 py-1 rounded-full bg-tea-green-50 text-tea-green-800 font-semibold">
                  {{ row.assigned_count|default:"0" }}
                </span>
              </td>
              <td class="px-4 py-3 text-right whitespace-nowrap">
                <a
                  href="{% url 'contract_market_place:field_officer_assign_farmers' officer.id %}"
                  class="inline-flex items-center px-4 py-2 rounded-lg bg-tea-green-600 text-white font-semibold hover:bg-tea-green-700 transition"
                >
                  Manage Assignments
                </a>
              </td>
            </tr>
            {% endwith %}
          {% empty %}
            <tr>
              <td colspan="5" class="px-4 py-10 text-center text-gray-600">
                No field officers found.
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

  </div>
</div>
{% endblock %}