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

{% block title %}Group Contracts - Bomabest Agriservices{% endblock %}

{% block content %}
<style>
  /* Make whole row clickable without breaking layout */
  .row-wrap { position: relative; }
  .row-link {
    position: absolute;
    inset: 0;
    z-index: 20;            /* above content so it captures clicks */
    display: block;
  }
  .row-content { position: relative; z-index: 10; }

  .truncate-2{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* Allow selecting text if needed (optional) */
  .row-content * { pointer-events: none; }
  .row-link { pointer-events: auto; }
</style>

<div class="w-full max-w-7xl mx-auto px-2 sm:px-4 lg:px-8 py-4 sm:py-6 overflow-x-hidden">
  <div class="space-y-5 sm:space-y-6">

    <!-- Header -->
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <div class="min-w-0">
        <h1 class="text-xl sm:text-2xl md:text-3xl font-bold text-tea-green-800 break-words">
          Group Contracts
        </h1>
        <p class="text-xs sm:text-sm text-gray-600 mt-1">
          Browse and manage group contracts.
        </p>
      </div>

      <div class="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
        <!-- Export (frontend-only) -->
        <button type="button"
                onclick="exportGroupsToExcel(window.groupContractsExport || [], 'group_contracts.xls')"
                class="w-full sm:w-auto px-4 sm:px-5 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition
                       flex items-center justify-center font-semibold shadow-sm hover:shadow-md">
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
          </svg>
          Export Excel
        </button>

        <a href="{% url 'contract_market_place:input_shop_contracts' %}" 
           class="w-full sm:w-auto px-4 sm:px-5 py-3 bg-tea-green-600 text-white rounded-xl hover:bg-tea-green-700 transition 
                  flex items-center justify-center font-semibold shadow-sm hover:shadow-md"> 
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path> 
          </svg> 
          New Group Contract 
        </a> 
      </div>
    </div>

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

    <!-- Filters -->
    <div class="bg-white rounded-2xl shadow-md border border-gray-100 p-4 sm:p-6">
      <form method="get" class="space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">

          <div class="md:col-span-2">
            <label class="block text-xs font-semibold text-gray-600 mb-1">Search</label>
            <input type="text" name="search" value="{{ filters.search }}"
                   placeholder="Contract ID / Group name / Registration number"
                   class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-tea-green-300">
          </div>

          <div>
            <label class="block text-xs font-semibold text-gray-600 mb-1">Contract Type</label>
            <select name="contract_type"
                    class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-tea-green-300">
              <option value="">All</option>
              {% for val, label in contract_types %}
                <option value="{{ val }}" {% if filters.contract_type == val %}selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select>
          </div>

          <div>
            <label class="block text-xs font-semibold text-gray-600 mb-1">Status</label>
            <select name="status"
                    class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-tea-green-300">
              <option value="">All</option>
              {% for val, label in status_choices %}
                <option value="{{ val }}" {% if filters.status == val %}selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select>
          </div>

          {% if is_admin %}
          <div class="md:col-span-2">
            <label class="block text-xs font-semibold text-gray-600 mb-1">Group</label>
            <select name="group"
                    class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-tea-green-300">
              <option value="">All</option>
              {% for g in admin_groups %}
                <option value="{{ g.id }}" {% if filters.group == g.id|stringformat:"s" %}selected{% endif %}>
                  {{ g.name }}
                </option>
              {% endfor %}
            </select>
          </div>
          {% endif %}

        </div>

        <div class="flex flex-col sm:flex-row gap-2 sm:items-center sm:justify-between">
          <div class="text-xs text-gray-500">
            {% if page_obj %}
              Showing {{ page_obj.start_index }}–{{ page_obj.end_index }} of {{ page_obj.paginator.count }}
            {% endif %}
          </div>

          <div class="flex gap-2">
            <button type="submit"
                    class="px-5 py-3 rounded-xl bg-tea-green-600 hover:bg-tea-green-700 text-white font-semibold transition">
              Apply Filters
            </button>

            <a href="{% url 'contract_market_place:group_contract_list' %}"
               class="px-5 py-3 rounded-xl bg-gray-200 hover:bg-gray-300 font-semibold transition">
              Reset
            </a>
          </div>
        </div>
      </form>
    </div>

    <!-- ===================== Mobile + Tablet Cards (up to lg) ===================== -->
    <div class="grid grid-cols-1 gap-4 lg:hidden">
      {% for contract in contracts %}
        <div class="row-wrap bg-white rounded-2xl shadow-md border border-gray-100 p-4 sm:p-5 transition hover:shadow-lg">
          <a class="row-link" href="{% url 'contract_market_place:group_contract_detail' contract.pk %}" aria-label="View contract {{ contract.id }}"></a>

          <div class="row-content">
            <div class="flex items-start justify-between gap-3">
              <div class="min-w-0">
                <div class="text-xs sm:text-sm text-gray-600 font-semibold">#{{ contract.id }}</div>
                <div class="text-base sm:text-lg font-bold text-gray-900 truncate">{{ contract.group.name }}</div>
                <div class="text-xs text-gray-600 mt-1 truncate">{{ contract.group.registration_number }}</div>
              </div>

              <span class="shrink-0 px-3 py-1 inline-flex text-xs font-semibold rounded-full
                {% if contract.status == 'ACTIVE' %}bg-green-100 text-green-800
                {% elif contract.status == 'COMPLETED' %}bg-blue-100 text-blue-800
                {% elif contract.status == 'DRAFT' %}bg-gray-100 text-gray-800
                {% elif contract.status == 'APPROVED' or contract.status == 'PARTIALLY_SIGNED' %}bg-yellow-100 text-yellow-800
                {% elif contract.status == 'FULLY_SIGNED' or contract.status == 'DEPOSIT_PAID' %}bg-purple-100 text-purple-800
                {% else %}bg-red-100 text-red-800{% endif %}">
                {{ contract.get_status_display }}
              </span>
            </div>

            <div class="mt-3 flex items-start gap-3">
              <div class="shrink-0 w-12 h-12 rounded-xl overflow-hidden border border-gray-200 bg-gray-50 flex items-center justify-center">
                {% for ci in contract.contract_inputs.all %}
                  {% if forloop.first %}
                    {% if ci.input.display_image and ci.input.display_image.url %}
                      <img src="{{ ci.input.display_image.url }}" alt="{{ ci.input }}" class="w-full h-full object-cover">
                    {% else %}
                      <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                      </svg>
                    {% endif %}
                  {% endif %}
                {% empty %}
                  <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
                  </svg>
                {% endfor %}
              </div>

              <div class="min-w-0 flex-1">
                <div class="text-xs text-gray-600">
                  <span class="font-semibold text-gray-800">{{ contract.get_type_display }}</span>
                  <span class="text-gray-400 mx-1">•</span>
                  <span>{{ contract.created_at|date:"M d, Y" }}</span>
                </div>

                <div class="mt-1 text-sm text-gray-800 truncate-2">
                  {% for ci in contract.contract_inputs.all %}
                    {% if forloop.first %}
                      <span class="font-semibold text-tea-green-700">{{ ci.input|truncatewords:7 }} -</span>
                      <span class="text-gray-500 text-xs ml-1">× {{ ci.quantity }}</span>
                    {% endif %}
                  {% empty %}
                    <span class="text-gray-500">No inputs</span>
                  {% endfor %}
                </div>
              </div>
            </div>

            <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
              <div class="bg-gray-50 rounded-xl p-3 min-w-0">
                <div class="text-gray-600 text-xs">Amount</div>
                <div class="font-bold text-tea-green-700 break-words">
                  KES {{ contract.total_amount|default_if_none:0|floatformat:0|intcomma }}
                </div>
              </div>

              <div class="bg-gray-50 rounded-xl p-3 min-w-0">
                <div class="text-gray-600 text-xs">Signatures</div>
                <div class="font-bold text-gray-900">
                  {{ contract.signatures_count|default_if_none:"0" }}/3
                </div>
              </div>
            </div>
          </div>
        </div>
      {% empty %}
        <div class="bg-white rounded-2xl p-8 text-center text-gray-600 shadow-md border border-gray-100">
          No group contracts found.
        </div>
      {% endfor %}
    </div>

    <!-- ===================== Desktop Table (lg+) ===================== -->
    <div class="hidden lg:block bg-white rounded-2xl shadow-md border border-gray-100 overflow-hidden">
      <div class="sticky top-0 z-10 bg-white border-b border-gray-200">
        <div class="grid grid-cols-12 gap-3 px-5 py-3 text-[11px] font-bold text-gray-700 uppercase tracking-wide">
          <div class="col-span-3">Contract</div>
          <div class="col-span-4">Package</div>
          <div class="col-span-2">Type & Date</div>
          <div class="col-span-1 text-right">Amount</div>
          <div class="col-span-2">Status & Signatures</div>
        </div>
      </div>

      <div class="divide-y divide-gray-100">
        {% for contract in contracts %}
          <div class="row-wrap hover:bg-gray-50 transition">
            <a class="row-link" href="{% url 'contract_market_place:group_contract_detail' contract.pk %}" aria-label="View contract {{ contract.id }}"></a>

            <div class="row-content grid grid-cols-12 gap-3 px-5 py-3 items-center">

              <!-- Contract -->
              <div class="col-span-3 min-w-0">
                <div class="flex items-center gap-2 min-w-0">
                  <div class="shrink-0 text-xs font-bold text-gray-900 bg-gray-100 px-2 py-1 rounded-lg">
                    #{{ contract.id }}
                  </div>
                  <div class="min-w-0">
                    <div class="text-sm font-bold text-gray-900 truncate">{{ contract.group.name }}</div>
                    <div class="text-[11px] text-gray-600 truncate">{{ contract.group.registration_number }}</div>
                  </div>
                </div>
              </div>

              <!-- Package -->
              <div class="col-span-4 min-w-0">
                <div class="flex items-center gap-2 min-w-0">
                  <div class="shrink-0 w-10 h-10 rounded-lg overflow-hidden border border-gray-200 bg-gray-50 flex items-center justify-center">
                    {% for ci in contract.contract_inputs.all %}
                      {% if forloop.first %}
                        {% if ci.input.display_image and ci.input.display_image.url %}
                          <img src="{{ ci.input.display_image.url }}" alt="{{ ci.input }}" class="w-full h-full object-cover">
                        {% else %}
                          <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                          </svg>
                        {% endif %}
                      {% endif %}
                    {% empty %}
                      <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
                      </svg>
                    {% endfor %}
                  </div>

                  <div class="min-w-0">
                    <!-- SHORT package name -->
                    <div class="text-sm font-semibold text-gray-900 truncate">
                      {% for ci in contract.contract_inputs.all %}
                        {% if forloop.first %}{{ ci.input|truncatewords:7 }} -{% endif %}
                      {% empty %}No inputs{% endfor %}
                    </div>
                    <div class="text-[11px] text-gray-600 truncate">
                      {% for ci in contract.contract_inputs.all %}
                        {% if forloop.first %}Qty: <span class="font-semibold text-gray-900">{{ ci.quantity }}</span>{% endif %}
                      {% endfor %}
                    </div>
                  </div>
                </div>
              </div>

              <!-- Type & Date -->
              <div class="col-span-2 min-w-0">
                <div class="text-sm font-semibold text-gray-900 truncate">{{ contract.get_type_display }}</div>
                <div class="text-[11px] text-gray-600 whitespace-nowrap">{{ contract.created_at|date:"M d, Y" }}</div>
              </div>

              <!-- Amount -->
              <div class="col-span-1 min-w-0 text-right">
                <div class="text-sm font-bold text-tea-green-700 whitespace-nowrap">
                  {{ contract.total_amount|default_if_none:0|floatformat:0|intcomma }}
                </div>
                <div class="text-[10px] text-gray-500 leading-none">KES</div>
              </div>

              <!-- Status & Signatures -->
              <div class="col-span-2 min-w-0">
                <span class="inline-flex px-3 py-1 text-[11px] font-semibold rounded-full
                  {% if contract.status == 'ACTIVE' %}bg-green-100 text-green-800
                  {% elif contract.status == 'COMPLETED' %}bg-blue-100 text-blue-800
                  {% elif contract.status == 'DRAFT' %}bg-gray-100 text-gray-800
                  {% elif contract.status == 'APPROVED' or contract.status == 'PARTIALLY_SIGNED' %}bg-yellow-100 text-yellow-800
                  {% elif contract.status == 'FULLY_SIGNED' or contract.status == 'DEPOSIT_PAID' %}bg-purple-100 text-purple-800
                  {% else %}bg-red-100 text-red-800{% endif %}">
                  {{ contract.get_status_display }}
                </span>
                <div class="text-[11px] text-gray-600 mt-1 whitespace-nowrap">
                  Signatures: <span class="font-semibold text-gray-900">{{ contract.signatures_count|default_if_none:"0" }}/3</span>
                </div>
              </div>

            </div>
          </div>
        {% empty %}
          <div class="px-6 py-10 text-center text-gray-600">No group contracts found.</div>
        {% endfor %}
      </div>
    </div>

    <!-- ===================== Pagination ===================== -->
    {% if page_obj and page_obj.paginator.num_pages > 1 %}
      <div class="flex items-center justify-between bg-white rounded-2xl shadow-md border border-gray-100 px-4 sm:px-6 py-4">
        <div class="text-sm text-gray-600">
          Page <span class="font-semibold text-gray-900">{{ page_obj.number }}</span>
          of <span class="font-semibold text-gray-900">{{ page_obj.paginator.num_pages }}</span>
        </div>

        <div class="flex items-center gap-2">
          {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}&search={{ filters.search }}&contract_type={{ filters.contract_type }}&status={{ filters.status }}&group={{ filters.group }}"
               class="px-4 py-2 rounded-lg bg-gray-200 hover:bg-gray-300 font-semibold transition">
              Prev
            </a>
          {% else %}
            <span class="px-4 py-2 rounded-lg bg-gray-100 text-gray-400 font-semibold cursor-not-allowed">Prev</span>
          {% endif %}

          {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}&search={{ filters.search }}&contract_type={{ filters.contract_type }}&status={{ filters.status }}&group={{ filters.group }}"
               class="px-4 py-2 rounded-lg bg-gray-200 hover:bg-gray-300 font-semibold transition">
              Next
            </a>
          {% else %}
            <span class="px-4 py-2 rounded-lg bg-gray-100 text-gray-400 font-semibold cursor-not-allowed">Next</span>
          {% endif %}
        </div>
      </div>
    {% endif %}

  </div>
</div>

{% block scripts %}
<script>
  window.groupContractsExport = [
    {% for contract in contracts %}
    {
      id: "{{ contract.id }}",
      group: "{{ contract.group.name|escapejs }}",
      registration: "{{ contract.group.registration_number|default_if_none:''|escapejs }}",
      type: "{{ contract.get_type_display|escapejs }}",
      created_at: "{{ contract.created_at|date:'Y-m-d' }}",
      total_amount: "{{ contract.total_amount|default_if_none:0 }}",
      status: "{{ contract.get_status_display|escapejs }}",
      signatures: "{{ contract.signatures_count|default_if_none:'0' }}/3",
      package: "{% for ci in contract.contract_inputs.all %}{% if forloop.first %}{{ ci.input|escapejs }} x {{ ci.quantity }}{% endif %}{% empty %}No inputs{% endfor %}"
    }{% if not forloop.last %},{% endif %}
    {% endfor %}
  ];

  /* exportGroupsToExcel is intentionally untouched */
</script>
{% endblock %}

{% endblock %}