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

{% load static %}

{% block content %}
<style>
  .bb-card { border: 1px solid rgba(0,0,0,.06); border-radius: 1rem; box-shadow: 0 14px 34px rgba(0,0,0,.08); background: #fff; }
  .bb-soft { background: linear-gradient(135deg, rgba(34,197,94,.08), rgba(59,130,246,.08)); border: 1px solid rgba(0,0,0,.06); border-radius: 1rem; }
  .bb-raise { transition: transform .2s ease, box-shadow .2s ease; }
  .bb-raise:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.12); }
  .bb-sticky { position: sticky; top: 88px; }
  @media (max-width: 1023px) { .bb-sticky { position: static; top: auto; } }
  .bb-badge { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .6rem; border-radius:999px; border:1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.8); font-size:.82rem; white-space:nowrap; }
  .bb-img { width:100%; height:180px; object-fit:cover; border-radius:.9rem; border:1px solid rgba(0,0,0,.08); background: rgba(0,0,0,.03); }
</style>

<div class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-6 space-y-6">
  <div class="bb-card bb-raise p-5 sm:p-6">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
      <div class="min-w-0">
        <h1 class="text-2xl sm:text-3xl font-bold text-tea-green-800 break-words">
          {% if is_admin %}Create Group Contract{% else %}Request Group Contract{% endif %}
        </h1>
        <p class="text-sm text-gray-600 mt-1">
          {% if is_admin %}
            Create a group contract for an active group.
          {% else %}
            Request a group contract. It will be reviewed by an administrator.
          {% endif %}
        </p>
      </div>
      <div class="flex gap-2 flex-wrap">
        <a href="{% url 'contract_market_place:group_contract_list' %}"
           class="px-4 py-2 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 font-semibold">
          Back to Group Contracts
        </a>
      </div>
    </div>
  </div>

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

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

    <div class="lg:col-span-7">
      <form method="post" class="space-y-6" id="group-contract-create-form" novalidate>
        {% csrf_token %}

        <div class="bb-card bb-raise p-4 sm:p-6">
          <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div class="min-w-0">
              <h3 class="font-bold text-tea-green-800">Group</h3>
              <p class="text-sm text-tea-green-700 mt-1 break-words">
                {% if is_admin %}
                  Select the group for this contract.
                {% else %}
                  This contract request will be created under your group.
                {% endif %}
              </p>
            </div>
            <div class="w-full md:w-2/3 min-w-0">
              {% if is_admin %}
                <label class="block text-sm font-medium text-tea-green-800 mb-2">Select Group *</label>
                <input type="text" id="group_search_input" placeholder="Search group name..." class="mb-2 block w-full border border-tea-green-300 rounded-xl p-3">
                <select id="group" name="group" class="block w-full border border-tea-green-300 rounded-xl p-3" required size="6">
                  <option value="" disabled {% if not selected_group %}selected{% endif %}>Select a group</option>
                  {% for g in groups %}
                  <option value="{{ g.id }}" data-name="{{ g.name|lower }}" {% if selected_group and selected_group.id == g.id %}selected{% endif %}>
                    {{ g.name }} ({{ g.registration_number }})
                  </option>
                  {% endfor %}
                </select>
              {% else %}
                {% if selected_group %}
                  <p class="text-base sm:text-lg font-semibold text-gray-900 break-words">{{ selected_group.name }} ({{ selected_group.registration_number }})</p>
                  <input type="hidden" name="group" value="{{ selected_group.id }}">
                {% else %}
                  <p class="text-base sm:text-lg font-semibold text-gray-900 break-words">{{ groups.0.name }} ({{ groups.0.registration_number }})</p>
                  <input type="hidden" name="group" value="{{ groups.0.id }}">
                {% endif %}
              {% endif %}
            </div>
          </div>
        </div>

        <div class="bb-card bb-raise p-4 sm:p-6">
          <div class="flex items-start justify-between gap-3">
            <div class="min-w-0">
              <div class="text-sm font-bold text-gray-800">Input Variety and Package *</div>
              <div class="text-xs text-gray-600 mt-1">
                {% if selected_package %}
                  Preselected from shop. You can change package within this variety. To change variety, go back to the list page.
                {% else %}
                  Choose a variety, then select one of its available packages.
                {% endif %}
              </div>
            </div>
            {% if selected_package %}
              <button type="button" id="changePkgBtn"
                      class="shrink-0 px-3 py-2 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 text-sm font-semibold">
                Change Package
              </button>
            {% endif %}
          </div>

          {% if selected_package %}
            <input type="hidden" id="input_variety" name="input_variety" value="{{ selected_variety_id }}">
          {% endif %}

          <div id="pkgSelectWrap" class="mt-4 {% if selected_package %}hidden{% endif %}">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
              {% if not selected_package %}
                <div>
                  <label class="block text-sm font-bold text-gray-700">Variety *</label>
                  <select id="input_variety" name="input_variety" class="mt-1 w-full rounded-xl border-gray-200 px-3 py-3">
                    {% for v in variety_options %}
                      <option value="{{ v.id }}" {% if selected_variety_id == v.id %}selected{% endif %}>
                        {{ v.input_name }} - {{ v.name }}
                      </option>
                    {% endfor %}
                  </select>
                  <p class="text-xs text-gray-500 mt-1">Package list below is filtered by this variety.</p>
                </div>
              {% else %}
                <div>
                  <label class="block text-sm font-bold text-gray-700">Variety</label>
                  <div class="mt-1 w-full rounded-xl border border-gray-200 px-3 py-3 bg-gray-50 text-gray-700">
                    {{ selected_package.input.name }} - {{ selected_package.variety.name }}
                  </div>
                  <p class="text-xs text-gray-500 mt-1">Variety is locked. Use Change Package only.</p>
                </div>
              {% endif %}

              <div>
                <label class="block text-sm font-bold text-gray-700">Package *</label>
                <select id="input_package" name="input_package" class="mt-1 w-full rounded-xl border-gray-200 px-3 py-3" required></select>
                <p class="text-xs text-gray-500 mt-1">Only packages from the selected variety are shown.</p>
                <p id="stock_label" class="text-xs text-gray-600 mt-1 hidden"></p>
              </div>
            </div>
          </div>

          <div id="selectedPackageCard" class="mt-4 grid grid-cols-1 sm:grid-cols-12 gap-4 items-start">
            <div class="sm:col-span-4">
              <img class="bb-img" id="selectedPkgImage"
                   src="{% if selected_package and selected_package.display_image %}{{ selected_package.display_image.url }}{% else %}{% static 'defaults/default_package.jpg' %}{% endif %}"
                   alt="Selected package">
            </div>
            <div class="sm:col-span-8 space-y-2 min-w-0">
              <div class="font-bold text-gray-900 break-words" id="selectedVarietyTitle">
                {% if selected_package %}{{ selected_package.input.name }} - {{ selected_package.variety.name }}{% else %}Choose a variety and package{% endif %}
              </div>
              <div class="text-sm text-gray-600 break-words" id="selectedPackageLabel">
                {% if selected_package %}Unit: {{ selected_package.unit_quantity|default:selected_package.get_unit_type_display }}{% else %}Unit: -{% endif %}
              </div>
              <p class="text-xs text-gray-500 break-words" id="selectedVarietyDescription">
                {% if selected_package and selected_package.variety.description %}{{ selected_package.variety.description }}{% else %}No variety description available yet.{% endif %}
              </p>
              <div class="flex flex-wrap gap-2">
                <span class="bb-badge"><span class="text-gray-500">Price:</span> KES <span id="pkgPrice">{% if selected_package %}{{ selected_package.selling_price }}{% else %}0{% endif %}</span></span>
                <span class="bb-badge"><span class="text-gray-500">Stock:</span> <span id="pkgStock">{% if selected_package %}{{ selected_package.stock }}{% else %}0{% endif %}</span></span>
                <span class="bb-badge"><span class="text-gray-500">Manufacturer:</span> <span id="pkgManufacturer">{% if selected_package and selected_package.manufacturer %}{{ selected_package.manufacturer.name }}{% else %}N/A{% endif %}</span></span>
              </div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-bold text-gray-700">Quantity *</label>
            <div class="flex items-center mt-1">
              <button type="button" id="qty_minus" class="bg-gray-200 hover:bg-gray-300 w-12 h-12 rounded-l-xl flex items-center justify-center text-2xl font-bold">-</button>
              <input type="number" id="quantity" name="quantity" min="1" value="1" class="block w-full text-center border-t border-b border-gray-200 py-3 text-lg font-semibold" required>
              <button type="button" id="qty_plus" class="bg-tea-green-600 hover:bg-tea-green-700 text-white w-12 h-12 rounded-r-xl flex items-center justify-center text-2xl font-bold">+</button>
            </div>
          </div>

          <div>
            <label class="block text-sm font-bold text-gray-700">Contract Type *</label>
            <select id="type" name="type" class="mt-1 block w-full border border-tea-green-300 rounded-xl p-3" required>
              <option value="" disabled selected>Select type</option>
              {% for value, label in contract_types %}
              <option value="{{ value }}">{{ label }}</option>
              {% endfor %}
            </select>
          </div>
        </div>

        <div>
          <label class="block text-sm font-bold text-gray-700">Payment Term *</label>
          <div class="flex mt-1 gap-3">
            <button type="button" id="btn_monthly" class="flex-1 py-3 sm:py-4 rounded-xl font-semibold transition bg-tea-green-600 text-white shadow-sm hover:shadow-md">Monthly</button>
            <button type="button" id="btn_harvest" class="flex-1 py-3 sm:py-4 rounded-xl font-semibold transition bg-gray-200 text-gray-700 hover:bg-gray-300">At Harvest</button>
          </div>
          <input type="hidden" id="payment_term" name="payment_term" value="MONTHLY">
        </div>

        <div>
          <label class="block text-sm font-bold text-gray-700">Notes (Optional)</label>
          <textarea name="notes" rows="4" class="mt-1 block w-full border border-tea-green-300 rounded-xl p-3" placeholder="Add delivery instructions or special notes..."></textarea>
        </div>

        {% if not is_admin %}
        <div class="bb-soft p-4 sm:p-6">
          <h3 class="font-bold text-tea-green-800 mb-3">Important Information</h3>
          <ul class="list-disc list-inside space-y-1 text-tea-green-700 text-sm">
            <li>Deposit amount is set by admin</li>
            <li>Grace period is set by admin</li>
            <li>Repayment months or harvest month is set by admin</li>
            <li>After approval, all signatories will sign the contract</li>
          </ul>
          <p class="mt-4 font-semibold text-tea-green-800">Your request will be reviewed by an administrator.</p>
        </div>

        <input type="hidden" name="deposit_amount" value="1">
        <input type="hidden" name="months_for_payment" value="1">
        <input type="hidden" name="grace_period" value="0">
        {% endif %}

        {% if is_admin %}
        <div class="bb-soft p-4 sm:p-6">
          <div class="flex items-center justify-between mb-4">
            <div class="font-bold text-gray-900">Admin Only Settings</div>
            <span class="bb-badge text-gray-600">Admin</span>
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <label class="block text-sm font-bold text-gray-700">Deposit Amount (KES)</label>
              <div class="flex items-center mt-1">
                <button type="button" id="deposit_minus" class="bg-gray-200 hover:bg-gray-300 w-12 h-12 rounded-l-xl flex items-center justify-center text-2xl font-bold">-</button>
                <input type="number" id="deposit_amount" name="deposit_amount" min="1" value="0" class="block w-full text-center border-t border-b border-tea-green-300 py-3 text-lg font-semibold">
                <button type="button" id="deposit_plus" class="bg-tea-green-600 hover:bg-tea-green-700 text-white w-12 h-12 rounded-r-xl flex items-center justify-center text-2xl font-bold">+</button>
              </div>
            </div>
            <div>
              <label class="block text-sm font-bold text-gray-700">Months for Payment</label>
              <div class="flex items-center mt-1">
                <button type="button" id="months_minus" class="bg-gray-200 hover:bg-gray-300 w-12 h-12 rounded-l-xl flex items-center justify-center text-2xl font-bold">-</button>
                <input type="number" id="months_for_payment" name="months_for_payment" min="1" value="1" class="block w-full text-center border-t border-b border-tea-green-300 py-3 text-lg font-semibold">
                <button type="button" id="months_plus" class="bg-tea-green-600 hover:bg-tea-green-700 text-white w-12 h-12 rounded-r-xl flex items-center justify-center text-2xl font-bold">+</button>
              </div>
              <p class="text-xs text-gray-600 mt-1">Monthly is number of installments. Harvest is months until payment.</p>
            </div>
            <div>
              <label class="block text-sm font-bold text-gray-700">Grace Period (Days)</label>
              <div class="flex items-center mt-1">
                <button type="button" id="grace_minus" class="bg-gray-200 hover:bg-gray-300 w-12 h-12 rounded-l-xl flex items-center justify-center text-2xl font-bold">-</button>
                <input type="number" id="grace_period" name="grace_period" min="0" max="30" value="0" class="block w-full text-center border-t border-b border-tea-green-300 py-3 text-lg font-semibold">
                <button type="button" id="grace_plus" class="bg-tea-green-600 hover:bg-tea-green-700 text-white w-12 h-12 rounded-r-xl flex items-center justify-center text-2xl font-bold">+</button>
              </div>
            </div>
          </div>
        </div>
        {% endif %}

        <div class="bb-soft p-4 sm:p-6">
          <h3 class="text-lg sm:text-xl font-bold text-tea-green-800 mb-4">Total Summary</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
            <div class="min-w-0">
              <label class="block text-sm font-medium text-tea-green-800">Base Amount</label>
              <div id="base_amount" class="text-2xl sm:text-3xl font-bold text-gray-900 mt-2 break-words">KES 0</div>
            </div>
            <div class="min-w-0">
              <label class="block text-sm font-medium text-tea-green-800">Interest Rate</label>
              <div id="interest_rate_display" class="text-2xl sm:text-3xl font-bold text-orange-600 mt-2 break-words">0%</div>
            </div>
            <div class="min-w-0">
              <label class="block text-sm font-medium text-tea-green-800">Interest Amount</label>
              <div id="interest_amount" class="text-2xl sm:text-3xl font-bold text-gray-900 mt-2 break-words">KES 0</div>
            </div>
            <div class="min-w-0">
              <label class="block text-sm font-medium text-tea-green-800">Total Payable</label>
              <div id="total_amount" class="text-2xl sm:text-3xl font-bold text-tea-green-700 mt-2 break-words">KES 0</div>
            </div>
          </div>
          {% if not is_admin %}
          <p class="text-center text-sm text-tea-green-700 italic mt-6">
            This is an estimate. Final amounts will be confirmed by admin upon approval.
          </p>
          {% endif %}
        </div>

        <div class="flex flex-col sm:flex-row justify-end gap-3 sm:gap-4 mt-6 sm:mt-8">
          <a href="{% url 'contract_market_place:group_contract_list' %}"
             class="w-full sm:w-auto bg-gray-600 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-xl hover:bg-gray-700 flex items-center justify-center text-base sm:text-lg transition">
            Cancel
          </a>
          <button type="submit"
                  class="w-full sm:w-auto bg-tea-green-600 text-white px-8 sm:px-10 py-3 sm:py-4 rounded-xl hover:bg-tea-green-700 font-bold text-base sm:text-lg flex items-center justify-center transition shadow-sm hover:shadow-md">
            {% if is_admin %}Create Contract{% else %}Submit Request{% endif %}
          </button>
        </div>
      </form>
    </div>

    <div class="lg:col-span-5">
      <div class="bb-sticky space-y-4">
        <div class="bb-card bb-raise p-5 sm:p-6">
          <div class="flex items-center justify-between">
            <div>
              <div class="font-bold text-gray-900">Selected Variety Details</div>
              <div class="text-xs text-gray-500">Shared product details used by all packages in this variety.</div>
            </div>
            <span class="bb-badge text-gray-600">Variety</span>
          </div>

          <div class="mt-4 grid grid-cols-1 sm:grid-cols-12 gap-4">
            <div class="sm:col-span-5">
              <img id="varietyInfoImage" class="bb-img"
                   src="{% if selected_package and selected_package.variety.representative_image %}{{ selected_package.variety.representative_image.url }}{% else %}{% static 'defaults/default_package.jpg' %}{% endif %}"
                   alt="Selected variety">
            </div>
            <div class="sm:col-span-7 space-y-2 min-w-0">
              <div id="varietyInfoName" class="font-bold text-gray-900 break-words">
                {% if selected_package %}{{ selected_package.variety.name }}{% else %}Choose a variety{% endif %}
              </div>
              <div class="text-xs text-gray-500" id="varietyInfoInput">
                {% if selected_package %}Input: {{ selected_package.input.name }}{% else %}Input: -{% endif %}
              </div>
              <div class="flex flex-wrap gap-2">
                <span class="bb-badge"><span class="text-gray-500">VAT:</span> <span id="varietyInfoVat">{% if selected_package and selected_package.variety.vat_rate %}{{ selected_package.variety.vat_rate.name }} ({{ selected_package.variety.vat_rate.effective_percentage }}%){% else %}No VAT (Skipped){% endif %}</span></span>
                <span class="bb-badge"><span class="text-gray-500">Packages:</span> <span id="varietyInfoPackageCount">-</span></span>
                <span class="bb-badge"><span class="text-gray-500">Stock:</span> <span id="varietyInfoStock">-</span></span>
              </div>
              <div class="text-sm text-gray-700 font-semibold">Price Range: <span id="varietyInfoPriceRange">-</span></div>
            </div>
          </div>

          <div class="mt-3 text-sm text-gray-600" id="varietyInfoDescription">
            {% if selected_package and selected_package.variety.description %}{{ selected_package.variety.description }}{% else %}No variety description available yet.{% endif %}
          </div>
        </div>

        <div class="bb-soft p-5 sm:p-6">
          <div class="font-bold text-gray-900">Need to change variety?</div>
          <div class="text-sm text-gray-600 mt-1">
            Go back to the list page to pick a different variety. This page lets you change packages only.
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<script>
const CALCULATE_TOTAL_URL = "{% url 'contract_market_place:calculate_total' %}";

document.addEventListener("DOMContentLoaded", () => {
  const defaultImage = "{% static 'defaults/default_package.jpg' %}";
  const packagePayload = JSON.parse('{{ package_payload_json|escapejs }}');
  const varietyPayloadMap = JSON.parse('{{ variety_payload_json|escapejs }}');
  const selectedPackageIdFromServer = "{{ selected_package_id|default:'' }}";
  const selectedVarietyIdFromServer = "{{ selected_variety_id|default:'' }}";

  const inputPackage = document.getElementById('input_package');
  const quantity = document.getElementById('quantity');
  const paymentTermHidden = document.getElementById('payment_term');
  const btnMonthly = document.getElementById('btn_monthly');
  const btnHarvest = document.getElementById('btn_harvest');
  const stockLabel = document.getElementById('stock_label');

  const baseAmount = document.getElementById('base_amount');
  const interestRateDisplay = document.getElementById('interest_rate_display');
  const interestAmount = document.getElementById('interest_amount');
  const totalAmount = document.getElementById('total_amount');

  const selectedPkgImage = document.getElementById('selectedPkgImage');
  const selectedVarietyTitle = document.getElementById('selectedVarietyTitle');
  const selectedPackageLabel = document.getElementById('selectedPackageLabel');
  const selectedVarietyDescription = document.getElementById('selectedVarietyDescription');
  const pkgPrice = document.getElementById('pkgPrice');
  const pkgStock = document.getElementById('pkgStock');
  const pkgManufacturer = document.getElementById('pkgManufacturer');

  const varietyInfoImage = document.getElementById('varietyInfoImage');
  const varietyInfoName = document.getElementById('varietyInfoName');
  const varietyInfoInput = document.getElementById('varietyInfoInput');
  const varietyInfoVat = document.getElementById('varietyInfoVat');
  const varietyInfoPackageCount = document.getElementById('varietyInfoPackageCount');
  const varietyInfoStock = document.getElementById('varietyInfoStock');
  const varietyInfoPriceRange = document.getElementById('varietyInfoPriceRange');
  const varietyInfoDescription = document.getElementById('varietyInfoDescription');

  const varietyField = document.getElementById('input_variety');
  const canChangeVariety = varietyField && varietyField.tagName === 'SELECT';

  const packagesByVariety = {};
  packagePayload.forEach((pkg) => {
    const key = String(pkg.variety_id || '');
    if (!key) return;
    if (!packagesByVariety[key]) packagesByVariety[key] = [];
    packagesByVariety[key].push(pkg);
  });

  function fmt(n){
    try { return Number(n || 0).toLocaleString('en-KE'); } catch { return String(n || 0); }
  }

  function getSelectedPackage(){
    if (!inputPackage || !inputPackage.value) return null;
    const packageId = String(inputPackage.value);
    return packagePayload.find((pkg) => String(pkg.id) === packageId) || null;
  }

  function setVarietyDetails(varietyId){
    const meta = varietyPayloadMap[String(varietyId)] || null;
    if (!meta) {
      if (varietyInfoName) varietyInfoName.textContent = 'Choose a variety';
      if (varietyInfoInput) varietyInfoInput.textContent = 'Input: -';
      if (varietyInfoVat) varietyInfoVat.textContent = 'No VAT (Skipped)';
      if (varietyInfoPackageCount) varietyInfoPackageCount.textContent = '0';
      if (varietyInfoStock) varietyInfoStock.textContent = '0';
      if (varietyInfoPriceRange) varietyInfoPriceRange.textContent = '-';
      if (varietyInfoDescription) varietyInfoDescription.textContent = 'No variety description available yet.';
      if (varietyInfoImage) varietyInfoImage.src = defaultImage;
      return;
    }

    if (varietyInfoName) varietyInfoName.textContent = meta.name || '-';
    if (varietyInfoInput) varietyInfoInput.textContent = `Input: ${meta.input_name || '-'}`;
    if (varietyInfoVat) varietyInfoVat.textContent = meta.vat_label || 'No VAT (Skipped)';
    if (varietyInfoPackageCount) varietyInfoPackageCount.textContent = String(meta.package_count || 0);
    if (varietyInfoStock) varietyInfoStock.textContent = fmt(meta.total_stock || 0);
    if (varietyInfoPriceRange) {
      const minPrice = Number(meta.min_price || 0);
      const maxPrice = Number(meta.max_price || 0);
      varietyInfoPriceRange.textContent = minPrice === maxPrice
        ? `KES ${fmt(minPrice)}`
        : `KES ${fmt(minPrice)} - ${fmt(maxPrice)}`;
    }
    if (varietyInfoDescription) varietyInfoDescription.textContent = meta.description || 'No variety description available yet.';
    if (varietyInfoImage) varietyInfoImage.src = meta.image_url || defaultImage;
    if (selectedVarietyDescription) selectedVarietyDescription.textContent = meta.description || 'No variety description available yet.';
  }

  function populatePackageOptions(varietyId, preferredPackageId){
    if (!inputPackage) return;
    const list = packagesByVariety[String(varietyId)] || [];

    inputPackage.innerHTML = '';
    if (!list.length) {
      const none = document.createElement('option');
      none.value = '';
      none.textContent = 'No package available for selected variety';
      inputPackage.appendChild(none);
      inputPackage.disabled = true;
      inputPackage.required = false;
      return;
    }

    list.forEach((pkg) => {
      const opt = document.createElement('option');
      opt.value = String(pkg.id);
      opt.textContent = `${pkg.unit_label} - KES ${fmt(pkg.price)} - Stock ${fmt(pkg.stock)}`;
      opt.dataset.stock = String(pkg.stock || 0);
      opt.dataset.price = String(pkg.price || 0);
      inputPackage.appendChild(opt);
    });

    inputPackage.disabled = false;
    inputPackage.required = true;

    const preferred = String(preferredPackageId || '');
    const preferredExists = list.some((pkg) => String(pkg.id) === preferred);
    inputPackage.value = preferredExists ? preferred : String(list[0].id);
  }

  function updatePackageCard(pkg){
    if (selectedPkgImage) selectedPkgImage.src = pkg?.image_url || defaultImage;
    if (selectedVarietyTitle) {
      selectedVarietyTitle.textContent = pkg
        ? `${pkg.input_name} - ${pkg.variety_name}`
        : 'Choose a variety and package';
    }
    if (selectedPackageLabel) {
      selectedPackageLabel.textContent = pkg
        ? `Unit: ${pkg.unit_label} (${pkg.unit_type_label})`
        : 'Unit: -';
    }
    if (pkgPrice) pkgPrice.textContent = pkg ? fmt(pkg.price) : '0';
    if (pkgStock) pkgStock.textContent = pkg ? fmt(pkg.stock) : '0';
    if (pkgManufacturer) pkgManufacturer.textContent = (pkg && pkg.manufacturer) ? pkg.manufacturer : 'N/A';
  }

  async function updatePreview() {
    const packageId = inputPackage?.value;
    const qty = parseInt(quantity?.value || '0', 10) || 0;
    const term = paymentTermHidden?.value || 'MONTHLY';

    if (!packageId || qty <= 0) {
      baseAmount.textContent = 'KES 0';
      interestRateDisplay.textContent = '0%';
      interestAmount.textContent = 'KES 0';
      totalAmount.textContent = 'KES 0';
      if (stockLabel) stockLabel.classList.add('hidden');
      return;
    }

    const deposit = {% if is_admin %}Math.max(0, parseInt(document.getElementById('deposit_amount')?.value || 0, 10)){% else %}0{% endif %};
    const months = {% if is_admin %}Math.max(1, parseInt(document.getElementById('months_for_payment')?.value || 1, 10)){% else %}1{% endif %};

    try {
      const url = `${CALCULATE_TOTAL_URL}?input_package_id=${packageId}&quantity=${qty}&payment_term=${term}&months_for_payment=${months}&deposit_amount=${deposit}`;
      const res = await fetch(url);
      if (!res.ok) throw new Error('Failed');
      const data = await res.json();

      baseAmount.textContent = `KES ${data.base_amount?.toLocaleString() || 0}`;
      interestRateDisplay.textContent = `${data.prorated_interest_rate || 0}%`;
      interestAmount.textContent = `KES ${data.interest_amount?.toLocaleString() || 0}`;
      totalAmount.textContent = `KES ${data.total_payable?.toLocaleString() || 0}`;
    } catch (err) {
      console.error('Preview error:', err);
      baseAmount.textContent = 'KES 0';
      interestRateDisplay.textContent = '0%';
      interestAmount.textContent = 'KES 0';
      totalAmount.textContent = 'KES 0';
    }

    if (stockLabel) {
      const selected = inputPackage?.options?.[inputPackage.selectedIndex];
      if (selected && selected.value) {
        stockLabel.textContent = `Available stock: ${selected.dataset.stock || '0'}`;
        stockLabel.classList.remove('hidden');
      } else {
        stockLabel.classList.add('hidden');
      }
    }
  }

  function onPackageChange(){
    const selectedPkg = getSelectedPackage();
    updatePackageCard(selectedPkg);
    if (selectedPkg && selectedPkg.variety_id) setVarietyDetails(selectedPkg.variety_id);
    updatePreview();
  }

  function onVarietyChange(preferredPackageId){
    const varietyId = canChangeVariety ? (varietyField?.value || '') : (selectedVarietyIdFromServer || varietyField?.value || '');
    if (!varietyId) {
      updatePackageCard(null);
      setVarietyDetails(null);
      updatePreview();
      return;
    }
    setVarietyDetails(varietyId);
    populatePackageOptions(varietyId, preferredPackageId);
    onPackageChange();
  }

  function setTerm(term) {
    if (term === 'MONTHLY') {
      btnMonthly.classList.remove('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
      btnMonthly.classList.add('bg-tea-green-600', 'text-white');
      btnHarvest.classList.remove('bg-tea-green-600', 'text-white');
      btnHarvest.classList.add('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
      paymentTermHidden.value = 'MONTHLY';
    } else {
      btnHarvest.classList.remove('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
      btnHarvest.classList.add('bg-tea-green-600', 'text-white');
      btnMonthly.classList.remove('bg-tea-green-600', 'text-white');
      btnMonthly.classList.add('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
      paymentTermHidden.value = 'HARVEST';
    }
    updatePreview();
  }

  btnMonthly?.addEventListener('click', () => setTerm('MONTHLY'));
  btnHarvest?.addEventListener('click', () => setTerm('HARVEST'));

  document.getElementById('qty_minus')?.addEventListener('click', () => {
    quantity.value = Math.max(1, parseInt(quantity.value || 1, 10) - 1);
    updatePreview();
  });
  document.getElementById('qty_plus')?.addEventListener('click', () => {
    quantity.value = parseInt(quantity.value || 1, 10) + 1;
    updatePreview();
  });

  quantity?.addEventListener('input', updatePreview);
  inputPackage?.addEventListener('change', onPackageChange);

  if (canChangeVariety) {
    varietyField.addEventListener('change', () => onVarietyChange(''));
  }

  const changeBtn = document.getElementById('changePkgBtn');
  const wrap = document.getElementById('pkgSelectWrap');
  changeBtn?.addEventListener('click', () => {
    if (!wrap) return;
    wrap.classList.toggle('hidden');
    if (!wrap.classList.contains('hidden')) {
      onVarietyChange(selectedPackageIdFromServer);
    }
  });

  {% if is_admin %}
  const depositAmount = document.getElementById('deposit_amount');
  const monthsInput = document.getElementById('months_for_payment');
  const graceInput = document.getElementById('grace_period');

  document.getElementById('deposit_minus')?.addEventListener('click', () => {
    depositAmount.value = Math.max(0, parseInt(depositAmount.value || 0, 10) - 1000);
    updatePreview();
  });
  document.getElementById('deposit_plus')?.addEventListener('click', () => {
    depositAmount.value = parseInt(depositAmount.value || 0, 10) + 1000;
    updatePreview();
  });

  document.getElementById('months_minus')?.addEventListener('click', () => {
    monthsInput.value = Math.max(1, parseInt(monthsInput.value || 1, 10) - 1);
    updatePreview();
  });
  document.getElementById('months_plus')?.addEventListener('click', () => {
    monthsInput.value = parseInt(monthsInput.value || 1, 10) + 1;
    updatePreview();
  });

  document.getElementById('grace_minus')?.addEventListener('click', () => {
    graceInput.value = Math.max(0, Math.min(30, parseInt(graceInput.value || 0, 10) - 1));
    updatePreview();
  });
  document.getElementById('grace_plus')?.addEventListener('click', () => {
    graceInput.value = Math.max(0, Math.min(30, parseInt(graceInput.value || 0, 10) + 1));
    updatePreview();
  });

  depositAmount?.addEventListener('input', updatePreview);
  monthsInput?.addEventListener('input', () => {
    const m = parseInt(monthsInput.value || '0', 10);
    if (!m || m < 1) monthsInput.value = 1;
    updatePreview();
  });
  graceInput?.addEventListener('input', updatePreview);

  const groupSearch = document.getElementById('group_search_input');
  if (groupSearch) {
    groupSearch.addEventListener('input', function () {
      const query = this.value.toLowerCase();
      const select = document.getElementById('group');
      Array.from(select.options).forEach(opt => {
        if (!opt.value) return;
        const text = (opt.dataset.name || '').toLowerCase();
        opt.style.display = text.includes(query) ? '' : 'none';
      });
    });
  }
  {% endif %}

  if (canChangeVariety && selectedVarietyIdFromServer) {
    varietyField.value = String(selectedVarietyIdFromServer);
  }

  onVarietyChange(selectedPackageIdFromServer);
});
</script>

{% endblock %}