{% extends 'base.html' %}
{% block title %}{% if contract %}Edit Contract{% else %}New Contract{% endif %}{% endblock %}
{% block content %}

<!-- Breadcrumb -->
<div class="kvpl-breadcrumb no-print">
  <a href="{{ url_for('dashboard') }}">Dashboard</a>
  <span class="sep">/</span>
  <a href="{{ url_for('contracts') }}">Contracts</a>
  <span class="sep">/</span>
  <span class="current">{% if contract %}Edit {{ contract.contract_no }}{% else %}New Contract{% endif %}</span>
</div>

<div class="page-header">
  <div class="page-title">
    {% if contract %}
      Edit Contract <span style="color:var(--kvpl-green)">{{ contract.contract_no }}</span>
    {% else %}
      New Sale Contract
    {% endif %}
    <small>{% if contract %}Update contract details{% else %}Create a new sale contract{% endif %}</small>
  </div>
  <a href="{{ url_for('contracts') }}" class="btn btn-outline-secondary btn-sm">← Back</a>
</div>

<div class="card" style="max-width:980px">
  <div class="card-body">
    <form method="post" id="contractForm">

      <!-- Basic details -->
      <div class="form-grid">
        <div class="form-group">
          <label>Contract No *</label>
          <input type="text" name="contract_no" required
                 value="{{ contract.contract_no if contract else '' }}"
                 placeholder="e.g. DE-2025-001">
        </div>
        <div class="form-group">
          <label>Sale Order No</label>
          <input type="text" name="sale_order_no"
                 value="{{ contract.sale_order_no if contract else '' }}"
                 placeholder="Optional">
        </div>
        <div class="form-group">
          <label>Customer *</label>
          <select name="customer_id" required>
            <option value="">– Select Customer –</option>
            {% for c in customers %}
            <option value="{{ c.id }}" {% if contract and contract.customer_id == c.id %}selected{% endif %}>{{ c.name }}</option>
            {% endfor %}
          </select>
          <span class="form-hint"><a href="{{ url_for('customers') }}" target="_blank">+ Manage customers</a></span>
        </div>
        <div class="form-group">
          <label>Broker</label>
          <input type="text" name="broker"
                 value="{{ contract.broker if contract else '' }}"
                 placeholder="Optional">
        </div>
        <div class="form-group">
          <label>Price (per unit)</label>
          <input type="number" step="0.01" min="0" name="price"
                 value="{{ contract.price if contract else '' }}"
                 placeholder="Optional">
        </div>
        <div class="form-group" id="wetQtyGroup" style="display:none">
          <label>Wet Qty (CF only) <span class="text-muted fw-normal" style="font-size:11px">&ndash; auto-calculated (qty &divide; 0.6)</span></label>
          <div class="input-group">
            <input type="number" step="0.001" min="0" name="wet_qty" id="wetQtyInput"
                   value="{{ contract.wet_qty if contract else '' }}"
                   placeholder="Auto-calculated">
            <button type="button" class="btn btn-outline-secondary" id="recalcWetBtn" title="Recalculate: qty / 0.6">
              <i class="bi bi-arrow-clockwise"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- Dates -->
      <div class="form-grid mt-4">
        <div class="form-group">
          <label>Delivery Start Date</label>
          <input type="date" name="delivery_start"
                 value="{{ contract.delivery_start if contract else '' }}">
          <span class="form-hint">Optional</span>
        </div>
        <div class="form-group">
          <label>Delivery Due Date *</label>
          <input type="date" name="delivery_end" required
                 value="{{ contract.delivery_end if contract else '' }}">
        </div>
      </div>

      <!-- Factory Allocations -->
      <div class="form-section">
        <div class="d-flex justify-content-between align-items-start mb-3">
          <div>
            <div class="form-section-label">Factory Allocations *</div>
            <div class="form-hint">Allocate qty to one or more factories. Total is auto-calculated.</div>
          </div>
          <button type="button" class="btn btn-outline-secondary btn-sm" id="addAllocBtn">
            <i class="bi bi-plus-lg me-1"></i> Add Factory
          </button>
        </div>

        <div id="allocContainer">
          {% if contract_allocations %}
            {% for a in contract_allocations %}
            <div class="alloc-row">
              <select name="alloc_factory[]" class="alloc-factory-sel" required>
                <option value="">– Select Factory –</option>
                {% for code, name in factories.items() %}
                <option value="{{ code }}" {% if a.factory_code == code %}selected{% endif %}>{{ code }} – {{ name }}</option>
                {% endfor %}
              </select>
              <input type="number" step="0.001" min="0.001" name="alloc_qty[]" class="alloc-qty-inp"
                     value="{{ a.qty }}" placeholder="Qty (kg)" required>
              <button type="button" class="btn btn-outline-danger btn-sm remove-alloc-btn" title="Remove">
                <i class="bi bi-trash"></i>
              </button>
            </div>
            {% endfor %}
          {% else %}
            <div class="alloc-row">
              <select name="alloc_factory[]" class="alloc-factory-sel" required>
                <option value="">– Select Factory –</option>
                {% for code, name in factories.items() %}
                <option value="{{ code }}">{{ code }} – {{ name }}</option>
                {% endfor %}
              </select>
              <input type="number" step="0.001" min="0.001" name="alloc_qty[]" class="alloc-qty-inp"
                     placeholder="Qty (kg)" required>
              <button type="button" class="btn btn-outline-danger btn-sm remove-alloc-btn" title="Remove">
                <i class="bi bi-trash"></i>
              </button>
            </div>
          {% endif %}
        </div>

        <div class="total-qty-bar">
          <span>Total Declared Qty:</span>
          <strong id="totalQtyDisplay">0 kg</strong>
        </div>
      </div>

      <!-- Materials -->
      <div class="form-section">
        <div class="d-flex justify-content-between align-items-start mb-3">
          <div>
            <div class="form-section-label">Materials</div>
            <div class="form-hint">Optional – multiple materials can be linked.</div>
          </div>
          <button type="button" class="btn btn-outline-secondary btn-sm" id="addMaterialBtn">
            <i class="bi bi-plus-lg me-1"></i> Add Material
          </button>
        </div>
        <div id="materialsContainer">
          {% if contract_materials %}
            {% for cm in contract_materials %}
            <div class="material-row">
              <select name="material_id[]" class="alloc-factory-sel">
                <option value="">– Select Material –</option>
                {% for m in materials %}
                <option value="{{ m.id }}" {% if m.id == cm.material_id %}selected{% endif %}>{{ m.name }} ({{ m.unit }})</option>
                {% endfor %}
              </select>
              <input type="number" step="0.001" min="0" name="material_qty[]"
                     value="{{ cm.mat_qty or '' }}" placeholder="Qty (optional)"
                     class="alloc-qty-inp">
              <button type="button" class="btn btn-outline-danger btn-sm remove-mat-btn" title="Remove">
                <i class="bi bi-trash"></i>
              </button>
            </div>
            {% endfor %}
          {% else %}
            <div class="material-row">
              <select name="material_id[]" class="alloc-factory-sel">
                <option value="">– Select Material –</option>
                {% for m in materials %}
                <option value="{{ m.id }}">{{ m.name }} ({{ m.unit }})</option>
                {% endfor %}
              </select>
              <input type="number" step="0.001" min="0" name="material_qty[]" placeholder="Qty (optional)"
                     class="alloc-qty-inp">
              <button type="button" class="btn btn-outline-danger btn-sm remove-mat-btn" title="Remove">
                <i class="bi bi-trash"></i>
              </button>
            </div>
          {% endif %}
        </div>
      </div>

      <!-- Notes -->
      <div class="form-section">
        <div class="form-group">
          <label>Notes</label>
          <textarea name="notes" rows="3" style="resize:vertical" placeholder="Optional notes about this contract…">{{ contract.notes if contract else '' }}</textarea>
        </div>
      </div>

      <!-- Actions -->
      <div class="d-flex gap-2 mt-4">
        <button type="submit" class="btn btn-primary">
          <i class="bi bi-{% if contract %}check-lg{% else %}plus-lg{% endif %} me-1"></i>
          {% if contract %}Save Changes{% else %}Create Contract{% endif %}
        </button>
        <a href="{{ url_for('contracts') }}" class="btn btn-outline-secondary" onclick="formDirty=false">Cancel</a>
      </div>

    </form>
  </div>
</div>

<!-- Templates for dynamic rows -->
<template id="allocRowTpl">
  <div class="alloc-row">
    <select name="alloc_factory[]" class="alloc-factory-sel" required>
      <option value="">– Select Factory –</option>
      {% for code, name in factories.items() %}
      <option value="{{ code }}">{{ code }} – {{ name }}</option>
      {% endfor %}
    </select>
    <input type="number" step="0.001" min="0.001" name="alloc_qty[]" class="alloc-qty-inp"
           placeholder="Qty (kg)" required>
    <button type="button" class="btn btn-outline-danger btn-sm remove-alloc-btn" title="Remove">
      <i class="bi bi-trash"></i>
    </button>
  </div>
</template>

<template id="materialRowTpl">
  <div class="material-row">
    <select name="material_id[]" class="alloc-factory-sel">
      <option value="">– Select Material –</option>
      {% for m in materials %}
      <option value="{{ m.id }}">{{ m.name }} ({{ m.unit }})</option>
      {% endfor %}
    </select>
    <input type="number" step="0.001" min="0" name="material_qty[]" placeholder="Qty (optional)"
           class="alloc-qty-inp">
    <button type="button" class="btn btn-outline-danger btn-sm remove-mat-btn" title="Remove">
      <i class="bi bi-trash"></i>
    </button>
  </div>
</template>

{% endblock %}
{% block scripts %}
<script>
const allocContainer = document.getElementById('allocContainer');
const wetQtyGroup    = document.getElementById('wetQtyGroup');
const totalDisplay   = document.getElementById('totalQtyDisplay');

function recalcTotal() {
  let total = 0;
  allocContainer.querySelectorAll('.alloc-qty-inp').forEach(inp => {
    const v = parseFloat(inp.value);
    if (!isNaN(v) && v > 0) total += v;
  });
  totalDisplay.textContent = total.toLocaleString(undefined, {maximumFractionDigits:3}) + ' kg';
  autoCalcWetQty();
}

function getCfQty() {
  // Sum qty from all CF-allocated rows
  let cfTotal = 0;
  const sels = allocContainer.querySelectorAll('.alloc-factory-sel');
  const qtys = allocContainer.querySelectorAll('.alloc-qty-inp');
  sels.forEach((sel, i) => {
    if (sel.value === 'CF') {
      const v = parseFloat(qtys[i] ? qtys[i].value : 0);
      if (!isNaN(v) && v > 0) cfTotal += v;
    }
  });
  return cfTotal;
}

function autoCalcWetQty() {
  const wetInput = document.getElementById('wetQtyInput');
  if (!wetInput) return;
  const cfQty = getCfQty();
  if (cfQty > 0) {
    const wet = cfQty / 0.6;
    wetInput.value = wet.toFixed(3);
  }
}

function checkCfAlloc() {
  const hasCf = [...allocContainer.querySelectorAll('.alloc-factory-sel')].some(s => s.value === 'CF');
  wetQtyGroup.style.display = hasCf ? '' : 'none';
  if (hasCf) autoCalcWetQty();
}

// Manual recalc button
document.addEventListener('DOMContentLoaded', function() {
  const recalcBtn = document.getElementById('recalcWetBtn');
  if (recalcBtn) {
    recalcBtn.addEventListener('click', function() {
      autoCalcWetQty();
    });
  }
});

allocContainer.addEventListener('input', e => {
  if (e.target.classList.contains('alloc-qty-inp'))     recalcTotal();
  if (e.target.classList.contains('alloc-factory-sel')) checkCfAlloc();
});

allocContainer.addEventListener('click', e => {
  if (e.target.closest('.remove-alloc-btn')) {
    const rows = allocContainer.querySelectorAll('.alloc-row');
    if (rows.length > 1) {
      e.target.closest('.alloc-row').remove();
    } else {
      e.target.closest('.alloc-row').querySelector('.alloc-factory-sel').value = '';
      e.target.closest('.alloc-row').querySelector('.alloc-qty-inp').value = '';
    }
    recalcTotal(); checkCfAlloc();
  }
});

document.getElementById('addAllocBtn').addEventListener('click', () => {
  allocContainer.appendChild(document.getElementById('allocRowTpl').content.cloneNode(true));
});

const matContainer = document.getElementById('materialsContainer');
document.getElementById('addMaterialBtn').addEventListener('click', () => {
  matContainer.appendChild(document.getElementById('materialRowTpl').content.cloneNode(true));
});
matContainer.addEventListener('click', e => {
  if (e.target.closest('.remove-mat-btn')) {
    const rows = matContainer.querySelectorAll('.material-row');
    if (rows.length > 1) {
      e.target.closest('.material-row').remove();
    } else {
      e.target.closest('.material-row').querySelector('select').value = '';
      e.target.closest('.material-row').querySelector('input').value = '';
    }
  }
});

// Warn on unsaved changes
let formDirty = false;
document.getElementById('contractForm').addEventListener('input', () => formDirty = true);
document.getElementById('contractForm').addEventListener('submit', () => formDirty = false);
window.addEventListener('beforeunload', e => {
  if (formDirty) { e.preventDefault(); e.returnValue = ''; }
});

recalcTotal(); checkCfAlloc();
</script>
{% endblock %}