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

{% block title %}Assign Farmers - Bomabest Agriservices{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6">
  <div class="bg-white shadow-xl rounded-2xl p-4 sm:p-6">
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
      <div class="min-w-0">
        <h1 class="text-2xl md:text-3xl font-bold text-tea-green-800">Manage Assignments</h1>
        <p class="text-gray-600 mt-1 break-words">
          Field Officer: <span class="font-semibold text-gray-900">{{ officer.get_full_name }}</span>
          <span class="text-gray-500">({{ officer.phone_number|default:"-" }} / {{ officer.email|default:"-" }})</span>
        </p>
      </div>

      <a href="{% url 'contract_market_place:field_officer_list' %}"
         class="w-full lg:w-auto inline-flex items-center justify-center px-4 py-2 rounded-xl bg-gray-100 text-gray-800 font-semibold hover:bg-gray-200">
        ← Back to Field Officers
      </a>
    </div>

    {% if messages %}
      <div class="mb-4">
        {% for message in messages %}
          <div class="p-3 rounded-lg mb-2 {% if message.tags == 'error' %}bg-red-50 text-red-700 border border-red-200{% else %}bg-green-50 text-green-700 border border-green-200{% endif %}">
            {{ message }}
          </div>
        {% endfor %}
      </div>
    {% endif %}

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

      <!-- Available farmers -->
      <div class="border rounded-2xl p-4">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-4">
          <h2 class="text-xl font-bold text-gray-900">Available Farmers</h2>

          <form method="get" class="w-full md:w-auto">
            <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 w-full">
              <input
                type="text"
                name="search"
                value="{{ search }}"
                placeholder="Search farmer (name/phone/email)"
                class="w-full md:w-72 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-tea-green-300 focus:border-tea-green-400"
              />
              <button type="submit" class="w-full sm:w-auto px-4 py-2 rounded-lg bg-tea-green-600 text-white font-semibold hover:bg-tea-green-700">
                Search
              </button>
            </div>
          </form>
        </div>

        <form method="post">
          {% csrf_token %}
          <input type="hidden" name="action" value="assign" />

          <div class="max-h-[420px] overflow-auto border rounded-xl">
            <!-- ✅ Mobile cards -->
            <div class="sm:hidden p-3 space-y-3">
              {% for farmer in available_farmers %}
                <label class="block border rounded-2xl p-3 bg-white shadow-sm">
                  <div class="flex items-start gap-3">
                    <input type="checkbox" name="farmer_ids" value="{{ farmer.id }}" class="mt-1 h-4 w-4 rounded border-gray-300 flex-shrink-0">
                    <div class="min-w-0">
                      <div class="font-semibold text-gray-900 truncate">{{ farmer.get_full_name }}</div>
                      <div class="mt-2 space-y-1 text-sm">
                        <div class="flex gap-2">
                          <span class="text-gray-500 w-14 flex-shrink-0">Phone</span>
                          <span class="text-gray-700 break-words">{{ farmer.phone_number|default:"-" }}</span>
                        </div>
                        <div class="flex gap-2">
                          <span class="text-gray-500 w-14 flex-shrink-0">Email</span>
                          <span class="text-gray-700 break-words">{{ farmer.email|default:"-" }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </label>
              {% empty %}
                <div class="py-10 text-center text-gray-600">
                  No farmers found. Try a different search.
                </div>
              {% endfor %}
            </div>

            <!-- ✅ Desktop table -->
            <div class="hidden sm:block">
              <table class="min-w-full text-sm">
                <thead class="bg-gray-50 sticky top-0">
                  <tr class="text-left">
                    <th class="px-4 py-3 font-semibold text-gray-700 w-12">#</th>
                    <th class="px-4 py-3 font-semibold text-gray-700">Farmer</th>
                    <th class="px-4 py-3 font-semibold text-gray-700">Phone</th>
                    <th class="px-4 py-3 font-semibold text-gray-700">Email</th>
                  </tr>
                </thead>
                <tbody class="divide-y">
                  {% for farmer in available_farmers %}
                    <tr class="hover:bg-gray-50">
                      <td class="px-4 py-3">
                        <input type="checkbox" name="farmer_ids" value="{{ farmer.id }}" class="h-4 w-4 rounded border-gray-300">
                      </td>
                      <td class="px-4 py-3 font-medium text-gray-900">{{ farmer.get_full_name }}</td>
                      <td class="px-4 py-3 text-gray-700 whitespace-nowrap">{{ farmer.phone_number|default:"-" }}</td>
                      <td class="px-4 py-3 text-gray-700 max-w-[16rem]">
                        <span class="break-words">{{ farmer.email|default:"-" }}</span>
                      </td>
                    </tr>
                  {% empty %}
                    <tr>
                      <td colspan="4" class="px-4 py-8 text-center text-gray-600">
                        No farmers found. Try a different search.
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>

          <div class="flex items-center justify-end mt-4">
            <button type="submit"
                    class="w-full sm:w-auto px-5 py-2 rounded-xl bg-tea-green-600 text-white font-semibold hover:bg-tea-green-700">
              Assign Selected
            </button>
          </div>
        </form>
      </div>

      <!-- Assigned farmers -->
      <div class="border rounded-2xl p-4">
        <h2 class="text-xl font-bold text-gray-900 mb-4">Assigned Farmers</h2>

        <form method="post">
          {% csrf_token %}
          <input type="hidden" name="action" value="remove" />

          <div class="max-h-[420px] overflow-auto border rounded-xl">
            <!-- ✅ Mobile cards -->
            <div class="sm:hidden p-3 space-y-3">
              {% for farmer in assigned_farmers %}
                <label class="block border rounded-2xl p-3 bg-white shadow-sm">
                  <div class="flex items-start gap-3">
                    <input type="checkbox" name="assigned_farmer_ids" value="{{ farmer.id }}" class="mt-1 h-4 w-4 rounded border-gray-300 flex-shrink-0">
                    <div class="min-w-0">
                      <div class="font-semibold text-gray-900 truncate">{{ farmer.get_full_name }}</div>
                      <div class="mt-2 space-y-1 text-sm">
                        <div class="flex gap-2">
                          <span class="text-gray-500 w-14 flex-shrink-0">Phone</span>
                          <span class="text-gray-700 break-words">{{ farmer.phone_number|default:"-" }}</span>
                        </div>
                        <div class="flex gap-2">
                          <span class="text-gray-500 w-14 flex-shrink-0">Email</span>
                          <span class="text-gray-700 break-words">{{ farmer.email|default:"-" }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </label>
              {% empty %}
                <div class="py-10 text-center text-gray-600">
                  No farmers assigned to this officer yet.
                </div>
              {% endfor %}
            </div>

            <!-- ✅ Desktop table -->
            <div class="hidden sm:block">
              <table class="min-w-full text-sm">
                <thead class="bg-gray-50 sticky top-0">
                  <tr class="text-left">
                    <th class="px-4 py-3 font-semibold text-gray-700 w-12">#</th>
                    <th class="px-4 py-3 font-semibold text-gray-700">Farmer</th>
                    <th class="px-4 py-3 font-semibold text-gray-700">Phone</th>
                    <th class="px-4 py-3 font-semibold text-gray-700">Email</th>
                  </tr>
                </thead>
                <tbody class="divide-y">
                  {% for farmer in assigned_farmers %}
                    <tr class="hover:bg-gray-50">
                      <td class="px-4 py-3">
                        <input type="checkbox" name="assigned_farmer_ids" value="{{ farmer.id }}" class="h-4 w-4 rounded border-gray-300">
                      </td>
                      <td class="px-4 py-3 font-medium text-gray-900">{{ farmer.get_full_name }}</td>
                      <td class="px-4 py-3 text-gray-700 whitespace-nowrap">{{ farmer.phone_number|default:"-" }}</td>
                      <td class="px-4 py-3 text-gray-700 max-w-[16rem]">
                        <span class="break-words">{{ farmer.email|default:"-" }}</span>
                      </td>
                    </tr>
                  {% empty %}
                    <tr>
                      <td colspan="4" class="px-4 py-8 text-center text-gray-600">
                        No farmers assigned to this officer yet.
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>

          <div class="flex items-center justify-end mt-4">
            <button type="submit"
                    class="w-full sm:w-auto px-5 py-2 rounded-xl bg-red-600 text-white font-semibold hover:bg-red-700">
              Remove Selected
            </button>
          </div>
        </form>
      </div>

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