{% 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 space-y-2">
        {% for message in messages %}
          <div class="p-3 rounded-lg {% if message.tags == 'error' %}bg-red-50 text-red-700 border border-red-200{% elif message.tags == 'warning' %}bg-amber-50 text-amber-700 border border-amber-200{% else %}bg-green-50 text-green-700 border border-green-200{% endif %}">
            {{ message }}
          </div>
        {% endfor %}
      </div>
    {% endif %}

    <div class="mb-6 grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="rounded-2xl border border-green-100 bg-green-50 p-4">
        <div class="text-sm text-green-700 font-semibold">Assigned to this officer</div>
        <div class="mt-2 text-3xl font-bold text-green-900">{{ assigned_farmers|length }}</div>
      </div>
      <div class="rounded-2xl border border-emerald-100 bg-emerald-50 p-4">
        <div class="text-sm text-emerald-700 font-semibold">Eligible and unassigned</div>
        <div class="mt-2 text-3xl font-bold text-emerald-900">{{ eligible_total_count }}</div>
      </div>
      <div class="rounded-2xl border border-amber-100 bg-amber-50 p-4">
        <div class="text-sm text-amber-700 font-semibold">Already assigned elsewhere</div>
        <div class="mt-2 text-3xl font-bold text-amber-900">{{ conflicting_total_count }}</div>
      </div>
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
      <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">
          <div>
            <h2 class="text-xl font-bold text-gray-900">Eligible Farmers</h2>
            <p class="text-sm text-gray-600 mt-1">
              Only unassigned farmers can be linked here. Farmers already assigned to another field officer stay locked until removed there first.
            </p>
          </div>

          <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" id="eligible-assignment-form">
          {% csrf_token %}
          <input type="hidden" name="action" value="assign" id="eligible-action-input" />

          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-3">
            <label class="inline-flex items-center gap-2 text-sm font-medium text-gray-700">
              <input type="checkbox" id="toggle-all-eligible" class="h-4 w-4 rounded border-gray-300 text-tea-green-600 focus:ring-tea-green-500">
              <span>Select all visible eligible farmers</span>
            </label>
            <div class="text-sm text-gray-500">
              Showing {{ eligible_preview_count }} of {{ eligible_total_count }} eligible farmer{{ eligible_total_count|pluralize }}
            </div>
          </div>

          <div class="max-h-[420px] overflow-auto border rounded-xl">
            <div class="sm:hidden p-3 space-y-3">
              {% for farmer in eligible_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="eligible-farmer-checkbox 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 eligible farmers found for this filter.
                </div>
              {% endfor %}
            </div>

            <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 eligible_farmers %}
                    <tr class="hover:bg-gray-50">
                      <td class="px-4 py-3">
                        <input type="checkbox" name="farmer_ids" value="{{ farmer.id }}" class="eligible-farmer-checkbox 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 eligible farmers found for this filter.
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>

          <div class="flex flex-col sm:flex-row gap-3 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 Farmers
            </button>
            <button type="submit"
                    onclick="document.getElementById('eligible-action-input').value='assign_all_eligible';"
                    class="w-full sm:w-auto px-5 py-2 rounded-xl bg-emerald-100 text-emerald-800 font-semibold hover:bg-emerald-200">
              Assign All Eligible
            </button>
          </div>
        </form>
      </div>

      <div class="space-y-6">
        <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">
              <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>

              <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 class="border rounded-2xl p-4 bg-amber-50 border-amber-100">
          <h2 class="text-xl font-bold text-amber-900 mb-2">Assigned Elsewhere</h2>
          <p class="text-sm text-amber-800 mb-4">
            These farmers are already linked to another field officer and cannot be assigned here until released.
          </p>

          <div class="max-h-[260px] overflow-auto space-y-3">
            {% for assignment in conflicting_assignments %}
              <div class="rounded-2xl border border-amber-200 bg-white p-3">
                <div class="font-semibold text-gray-900">{{ assignment.farmer.get_full_name }}</div>
                <div class="text-sm text-gray-600 mt-1">
                  {{ assignment.farmer.phone_number|default:"-" }}{% if assignment.farmer.email %} · {{ assignment.farmer.email }}{% endif %}
                </div>
                <div class="text-sm text-amber-800 mt-2">
                  Assigned to {{ assignment.field_officer.get_full_name }}{% if assignment.field_officer.phone_number %} ({{ assignment.field_officer.phone_number }}){% endif %}
                </div>
              </div>
            {% empty %}
              <div class="rounded-2xl border border-emerald-200 bg-white p-4 text-sm text-emerald-800">
                No conflicts found in the current search.
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  (function () {
    var toggle = document.getElementById('toggle-all-eligible');
    var actionInput = document.getElementById('eligible-action-input');
    var form = document.getElementById('eligible-assignment-form');
    if (!toggle || !form || !actionInput) {
      return;
    }

    var syncCheckboxes = function (checked) {
      var checkboxes = form.querySelectorAll('.eligible-farmer-checkbox');
      checkboxes.forEach(function (checkbox) {
        checkbox.checked = checked;
      });
    };

    toggle.addEventListener('change', function () {
      syncCheckboxes(toggle.checked);
    });

    form.addEventListener('submit', function () {
      if (actionInput.value !== 'assign_all_eligible') {
        actionInput.value = 'assign';
      }
    });
  })();
</script>
{% endblock %}