{% extends "pos/base.html" %}
{% load static %}
{% block title %}Spec A Transfer{% endblock %}

{% block stylesheets %}
{{ block.super }}
<style>
  .select2-container { width: 100% !important; }
  .select2-container .select2-selection--single { height: 38px; }
  .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; }
  .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
  .stock-info { font-size: 11px; color: #6c757d; margin-top: 2px; }
  .stock-low { color: #dc3545 !important; font-weight: bold; }
  .stock-ok { color: #28a745 !important; }
  .transfer-arrow { font-size: 24px; color: #28a745; }
  .line-row td { vertical-align: middle; }
  .line-row:hover { background-color: #f8f9fa; }
  .variant-info { font-size: 10px; color: #999; }

  .locked-option {
    background-color: #fff3cd !important;
    font-weight: bold;
  }
  .lock-indicator {
    color: #856404;
    font-size: 11px;
  }
  .from-variant-select.locked {
    border-color: #ffc107;
    background-color: #fffbe6;
  }

</style>
{% endblock %}

{% block content %}
<div class="d-flex mb-3 flex-wrap">
  <a class="btn btn-secondary font-weight-bold mr-2 mb-1" href="{% url 'products:spec_a_transfers_list' %}">
    <i class="fas fa-arrow-left"></i> Back to List
  </a>
  {% if tr %}
    <a class="btn btn-info font-weight-bold mr-2 mb-1" target="_blank" href="{% url 'products:spec_a_transfers_print' tr.transfer_no %}">
      <i class="fas fa-print"></i> Print
    </a>
  {% endif %}
</div>

<!-- Header Card -->
<div class="card mb-3">
  <div class="card-header bg-primary text-white">
    <strong>
      {% if tr %}
        Spec A Transfer #{{ tr.transfer_no }}
        <span class="badge {% if tr.status == 'POSTED' %}badge-success{% elif tr.status == 'DRAFT' %}badge-warning{% else %}badge-danger{% endif %} ml-2">
          {{ tr.status }}
        </span>
      {% else %}
        New Spec A Transfer
      {% endif %}
    </strong>
  </div>
  <div class="card-body">
    <div class="form-row">
      <div class="form-group col-md-2">
        <label><strong>Transfer No</strong></label>
        <input class="form-control" value="{% if tr %}{{ tr.transfer_no }}{% else %}(Auto){% endif %}" disabled>
      </div>
      <div class="form-group col-md-2">
        <label><strong>Date</strong></label>
        <input type="date" id="transfer_date" class="form-control" 
               value="{% if tr %}{{ tr.transfer_date|date:'Y-m-d' }}{% else %}{{ today }}{% endif %}"
               {% if tr.status == 'POSTED' or tr.status == 'VOID' %}disabled{% endif %}>
      </div>
      <div class="form-group col-md-6">
        <label><strong>Remarks</strong></label>
        <input type="text" id="remarks" class="form-control" 
               value="{% if tr %}{{ tr.remarks }}{% endif %}" 
               placeholder="Optional notes..."
               {% if tr.status == 'VOID' %}disabled{% endif %}>
      </div>
      <div class="form-group col-md-2">
        <label><strong>Status</strong></label>
        <input class="form-control font-weight-bold text-center 
                      {% if tr.status == 'POSTED' %}bg-success text-white{% elif tr.status == 'DRAFT' %}bg-warning{% else %}bg-danger text-white{% endif %}" 
               value="{% if tr %}{{ tr.status }}{% else %}DRAFT{% endif %}" disabled>
      </div>
    </div>
  </div>
</div>

<!-- Info Alert -->
<!-- <div class="alert alert-info mb-3">
  <i class="fas fa-info-circle"></i>
  <strong>Spec A Transfer:</strong> Transfer stock between different Spec A values (e.g., Color: Red → Blue) 
  while keeping the same Spec B value (e.g., Size: Large).
  <br><small class="text-muted">When you select a product, all possible Spec A variants will be automatically ensured/created.</small>
</div>
 -->

<!-- Info Alert -->
<!-- <div class="alert alert-info mb-3">
  <i class="fas fa-info-circle"></i>
  <strong>Spec A Transfer:</strong> Transfer stock between different Spec A values...
</div> -->

<!-- Lines Card -->
<div class="card">
  <div class="card-header bg-light d-flex justify-content-between align-items-center">

    <div id="variant_status" class="text-muted small"></div>
  </div>
  <div class="card-body table-responsive p-0">
    <table class="table table-sm table-bordered mb-0" id="lines_table">
      <thead class="thead-light">
        <tr>
          <th style="width:40px;" class="text-center">#</th>
          <th style="width:280px;">Product</th>
          <th style="width:240px;">FROM Spec A</th>
          <th style="width:40px;" class="text-center"></th>
          <th style="width:240px;">TO Spec A</th>
          <th style="width:90px;" class="text-right">Qty</th>
          <th style="width:90px;" class="text-right">Bonus</th>
          <th style="width:100px;" class="text-right">Rate</th>
          <th style="width:110px;" class="text-right">Total</th>
          <th style="width:50px;" class="text-center">Del</th>
        </tr>
      </thead>
      <tbody id="lines_body">
        {% if lines %}
          {% for ln in lines %}
          <tr class="line-row" data-line-no="{{ ln.line_no }}">
            <td class="text-center ln-no">{{ ln.line_no }}</td>
            <td>
              <select class="form-control form-control-sm product-select" {% if tr.status == 'VOID' %}disabled{% endif %}>
                <option value="{{ ln.product.id }}" selected>{{ ln.product.product_code }} — {{ ln.product.name }}</option>
              </select>
            </td>
            <td>
              <select class="form-control form-control-sm from-variant-select" {% if tr.status == 'VOID' %}disabled{% endif %}>
                {% if ln.from_variant %}
                  <option value="{{ ln.from_variant.id }}" selected 
                          data-stock="0" data-spec_b_id="{{ ln.from_variant.spec_b_id|default:'' }}">
                    {{ ln.from_spec_a.name|default:"—" }} ({{ ln.common_spec_b.name|default:"—" }})
                  </option>
                {% endif %}
              </select>
              <div class="stock-info from-stock"></div>
            </td>
            <td class="text-center transfer-arrow">→</td>
            <td>
              <select class="form-control form-control-sm to-variant-select" {% if tr.status == 'VOID' %}disabled{% endif %}>
                {% if ln.to_variant %}
                  <option value="{{ ln.to_variant.id }}" selected data-stock="0">
                    {{ ln.to_spec_a.name|default:"—" }} ({{ ln.common_spec_b.name|default:"—" }})
                  </option>
                {% endif %}
              </select>
              <div class="stock-info to-stock"></div>
            </td>
            <td><input class="form-control form-control-sm qty text-right" type="number" step="any" min="0" value="{{ ln.qty|floatformat:0 }}" {% if tr.status == 'VOID' %}disabled{% endif %}></td>
            <td><input class="form-control form-control-sm bonus text-right" type="number" step="any" min="0" value="{{ ln.bonus_qty|floatformat:0 }}" {% if tr.status == 'VOID' %}disabled{% endif %}></td>
            <td><input class="form-control form-control-sm rate text-right" type="number" step="any" min="0" value="{{ ln.rate_snapshot|floatformat:2 }}" {% if tr.status == 'VOID' %}disabled{% endif %}></td>
            <td class="text-right font-weight-bold line-total">{{ ln.line_total|floatformat:2 }}</td>
            <td class="text-center">
              <button type="button" class="btn btn-sm btn-outline-danger del" {% if tr.status == 'VOID' %}disabled{% endif %}>
                <i class="fas fa-times"></i>
              </button>
            </td>
          </tr>
          {% endfor %}
        {% else %}
          <tr class="line-row" data-line-no="1">
            <td class="text-center ln-no">1</td>
            <td><select class="form-control form-control-sm product-select"></select></td>
            <td>
              <select class="form-control form-control-sm from-variant-select"></select>
              <div class="stock-info from-stock"></div>
            </td>
            <td class="text-center transfer-arrow">→</td>
            <td>
              <select class="form-control form-control-sm to-variant-select"></select>
              <div class="stock-info to-stock"></div>
            </td>
            <td><input class="form-control form-control-sm qty text-right" type="number" step="any" min="0" value="1"></td>
            <td><input class="form-control form-control-sm bonus text-right" type="number" step="any" min="0" value="0"></td>
            <td><input class="form-control form-control-sm rate text-right" type="number" step="any" min="0" value="0"></td>
            <td class="text-right font-weight-bold line-total">0.00</td>
            <td class="text-center">
              <button type="button" class="btn btn-sm btn-outline-danger del"><i class="fas fa-times"></i></button>
            </td>
          </tr>
        {% endif %}
      </tbody>
      <tfoot class="thead-light">
        <tr>
          <th colspan="5" class="text-right">Grand Total:</th>
          <th class="text-right" id="sum_qty">0</th>
          <th class="text-right" id="sum_bonus">0</th>
          <th></th>
          <th class="text-right" id="sum_total">0.00</th>
          <th></th>
        </tr>
      </tfoot>
    </table>
  </div>
  <div class="card-footer">
    <button type="button" id="add_line" class="btn btn-outline-primary" {% if tr.status == 'VOID' %}disabled{% endif %}>
      <i class="fas fa-plus"></i> Add Line
    </button>
  </div>
</div>

<!-- Action Buttons -->
<div class="d-flex mt-3 flex-wrap">
  {% if not tr or tr.status == 'DRAFT' %}
    <button type="button" id="btn_save_draft" class="btn btn-warning font-weight-bold mr-2 mb-1">
      <i class="fas fa-save"></i> Save Draft
    </button>
    <button type="button" id="btn_post" class="btn btn-success font-weight-bold mr-2 mb-1">
      <i class="fas fa-check"></i> Post (Finalize)
    </button>
  {% endif %}

  {% if tr and tr.status == 'POSTED' %}
    <button type="button" id="btn_post" class="btn btn-primary font-weight-bold mr-2 mb-1">
      <i class="fas fa-edit"></i> Save & Repost
    </button>
    <button type="button" id="btn_void" class="btn btn-danger font-weight-bold mr-2 mb-1">
      <i class="fas fa-ban"></i> Void Transfer
    </button>
  {% endif %}

  {% if tr and tr.status == 'DRAFT' %}
    <button type="button" id="btn_delete" class="btn btn-outline-danger font-weight-bold mb-1">
      <i class="fas fa-trash"></i> Delete Draft
    </button>
  {% endif %}
</div>

<input type="hidden" id="transfer_no" value="{% if tr %}{{ tr.transfer_no }}{% else %}0{% endif %}">
<input type="hidden" id="current_status" value="{% if tr %}{{ tr.status }}{% else %}DRAFT{% endif %}">
{% csrf_token %}
{% endblock %}

{% block javascripts %}
{{ block.super }}

<script>
(function(){
  const URL_SAVE = "{% url 'products:spec_a_transfers_save' %}";
  const URL_PROD = "{% url 'products:ajax_products_for_spec_a' %}";
  const URL_VARS = "{% url 'products:ajax_spec_a_variants' %}";
  const URL_ALLOW = "{% url 'products:ajax_spec_a_allowed_to' %}";
  const csrftoken = $('[name=csrfmiddlewaretoken]').val();
  const currentStatus = $('#current_status').val();

  // NEW: Sub-tenant lock settings
  const IS_SUB_TENANT = {{ is_sub_tenant|yesno:"true,false" }};
  const SUB_TENANT_ID = {{ sub_tenant_id|default:"null" }};
  const LOCKED_SPEC_A_IDS = {{ locked_spec_a_ids|safe }};

  // ========================================
  // Toast Notification
  // ========================================
  function showToast(message, type) {
    type = type || 'info';
    const bgClass = {
      'success': 'bg-success',
      'error': 'bg-danger',
      'warning': 'bg-warning text-dark',
      'info': 'bg-info'
    }[type] || 'bg-info';
    
    const $toast = $(`
      <div class="alert ${bgClass} text-white position-fixed shadow-lg" 
           style="top:20px; right:20px; z-index:9999; max-width:450px; animation: slideIn 0.3s ease;">
        <button type="button" class="close text-white ml-2" onclick="$(this).parent().remove();">&times;</button>
        <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'} mr-2"></i>
        ${message}
      </div>
    `);
    
    $('body').append($toast);
    
    setTimeout(function() {
      $toast.fadeOut(400, function() { $(this).remove(); });
    }, 5000);
  }

  // ========================================
  // Line Number & Calculations
  // ========================================
  function renumber() {
    $('#lines_body tr').each(function(i) {
      $(this).find('.ln-no').text(i + 1);
      $(this).attr('data-line-no', i + 1);
    });
  }

  function calcLineTotal($row) {
    const qty = parseFloat($row.find('.qty').val()) || 0;
    const bonus = parseFloat($row.find('.bonus').val()) || 0;
    const rate = parseFloat($row.find('.rate').val()) || 0;
    const total = (qty + bonus) * rate;
    $row.find('.line-total').text(total.toFixed(2));
    calcTotals();
  }

  function calcTotals() {
    let sumQty = 0, sumBonus = 0, sumTotal = 0;
    $('#lines_body tr').each(function() {
      sumQty += parseFloat($(this).find('.qty').val()) || 0;
      sumBonus += parseFloat($(this).find('.bonus').val()) || 0;
      sumTotal += parseFloat($(this).find('.line-total').text()) || 0;
    });
    $('#sum_qty').text(sumQty.toFixed(0));
    $('#sum_bonus').text(sumBonus.toFixed(0));
    $('#sum_total').text(sumTotal.toFixed(2));
  }

  // ========================================
  // Select2 Initialization
  // ========================================
  function initProductSelect($sel) {
    if ($sel.data('select2')) return;
    $sel.select2({
      ajax: {
        url: URL_PROD,
        dataType: 'json',
        delay: 200,
        data: params => ({ term: params.term || '' }),
        processResults: data => data
      },
      placeholder: 'Search product...',
      allowClear: true,
      minimumInputLength: 1
    });
  }

  function initVariantSelect($sel) {
    if ($sel.data('select2')) return;
    $sel.select2({
      placeholder: 'Select...',
      allowClear: true
    });
  }

  // ========================================
  // Load Variants for Product (with auto-ensure and sub-tenant lock)
  // ========================================
  function loadVariantsForRow($row, productId) {
    const $from = $row.find('.from-variant-select');
    const $to = $row.find('.to-variant-select');
    
    $from.empty().append('<option value="">Loading variants...</option>');
    $to.empty().append('<option value="">Select TO...</option>');
    $row.find('.from-stock, .to-stock').html('');
    
    if (!productId) {
      $from.empty().append('<option value="">Select FROM Spec A...</option>');
      return;
    }

    // Show loading status
    $('#variant_status').html('<i class="fas fa-spinner fa-spin"></i> Ensuring Spec A variants...');

    // NEW: Add lock_mode parameter if sub-tenant is active
    const params = { product_id: productId };
    if (IS_SUB_TENANT) {
      params.lock_mode = "1";
    }

    $.getJSON(URL_VARS, params)
      .done(function(resp) {
        $from.empty().append('<option value="">Select FROM Spec A...</option>');
        $('#variant_status').html('');
        
        if (!resp.ok) {
          if (resp.message) {
            $from.empty().append(`<option value="" disabled>⚠️ ${resp.message}</option>`);
            showToast(resp.message, 'warning');
          }
          return;
        }
        
        // Show notification if new variants were created
        if (resp.ensured) {
          const e = resp.ensured;
          if (e.created > 0) {
            showToast(
              `<strong>Variants Auto-Created!</strong><br>
               Created ${e.created} new variant(s).`,
              'success'
            );
          }
        }

        // Populate FROM dropdown
        resp.rows.forEach(r => {
          // NEW: Add lock indicator to option text
          let optText = r.text;
          if (IS_SUB_TENANT && r.is_locked) {
            optText = `🔒 ${r.text}`;
          }
          
          const opt = new Option(optText, r.id, false, false);
          $(opt).data('stock', r.stock);
          $(opt).data('spec_b_id', r.spec_b_id);
          $(opt).data('spec_b_name', r.spec_b_name);
          $(opt).data('spec_a_id', r.spec_a_id);
          $(opt).data('is_locked', r.is_locked);
          $from.append(opt);
        });
        
        // NEW: If sub-tenant and only ONE option, auto-select it
        if (IS_SUB_TENANT && resp.rows.length === 1) {
          $from.val(resp.rows[0].id);
          $from.trigger('change');
          showToast('Auto-selected your assigned Spec A variant.', 'info');
        }
        
        initVariantSelect($from);
        $from.trigger('change');
      })
      .fail(function() {
        $from.empty().append('<option value="">❌ Error loading variants</option>');
        showToast('Failed to load variants.', 'error');
      });
  }



  // ========================================
  // Load Variants for Product (with auto-ensure)
  // ========================================
  // function loadVariantsForRow($row, productId) {
  //   const $from = $row.find('.from-variant-select');
  //   const $to = $row.find('.to-variant-select');
    
  //   $from.empty().append('<option value="">Loading variants...</option>');
  //   $to.empty().append('<option value="">Select TO...</option>');
  //   $row.find('.from-stock, .to-stock').html('');
    
  //   if (!productId) {
  //     $from.empty().append('<option value="">Select FROM...</option>');
  //     return;
  //   }

  //   // Show loading status
  //   $('#variant_status').html('<i class="fas fa-spinner fa-spin"></i> Ensuring Spec A variants...');

  //   $.getJSON(URL_VARS, { product_id: productId })
  //     .done(function(resp) {
  //       $from.empty().append('<option value="">Select FROM Spec A...</option>');
  //       $('#variant_status').html('');
        
  //       if (!resp.ok) {
  //         if (resp.message) {
  //           $from.empty().append(`<option value="" disabled>⚠️ ${resp.message}</option>`);
  //           showToast(resp.message, 'warning');
  //         }
  //         return;
  //       }
        
  //       // ✅ Show notification if new variants were created
  //       if (resp.ensured) {
  //         const e = resp.ensured;
  //         if (e.created > 0) {
  //           showToast(
  //             `<strong>Variants Auto-Created!</strong><br>
  //              Created ${e.created} new variant(s) for ${e.spec_a_count} Spec A × ${e.spec_b_count} Spec B combinations.`,
  //             'success'
  //           );
  //           $('#variant_status').html(`<span class="text-success"><i class="fas fa-check"></i> ${e.created} new variants created</span>`);
  //         } else {
  //           $('#variant_status').html(`<span class="text-muted"><i class="fas fa-check"></i> ${e.existing} variants ready</span>`);
  //         }
  //       }
        
  //       // Populate FROM dropdown
  //       resp.rows.forEach(r => {
  //         const opt = new Option(r.text, r.id, false, false);
  //         $(opt).data('stock', r.stock);
  //         $(opt).data('spec_b_id', r.spec_b_id);
  //         $(opt).data('spec_b_name', r.spec_b_name);
  //         $from.append(opt);
  //       });
        
  //       initVariantSelect($from);
  //       $from.trigger('change');
  //     })
  //     .fail(function() {
  //       $from.empty().append('<option value="">❌ Error loading variants</option>');
  //       $('#variant_status').html('<span class="text-danger">Error loading variants</span>');
  //       showToast('Failed to load variants. Please try again.', 'error');
  //     });
  // }

  // ========================================
  // Load Allowed TO Variants
  // ========================================
  function loadAllowedTo($row) {
    const fromVid = $row.find('.from-variant-select').val();
    const $to = $row.find('.to-variant-select');
    const $fromStock = $row.find('.from-stock');
    const $toStock = $row.find('.to-stock');
    
    $to.empty().append('<option value="">Select TO Spec A...</option>');
    $toStock.html('');
    
    // Show FROM stock
    const $fromOpt = $row.find('.from-variant-select option:selected');
    if ($fromOpt.val()) {
      const stock = parseFloat($fromOpt.data('stock')) || 0;
      const stockClass = stock < 1 ? 'stock-low' : 'stock-ok';
      $fromStock.html(`<span class="${stockClass}">Available: <strong>${stock.toFixed(0)}</strong></span>`);
    } else {
      $fromStock.html('');
    }
    
    if (!fromVid) return;

    $.getJSON(URL_ALLOW, { from_variant_id: fromVid })
      .done(function(resp) {
        if (!resp.ok || !resp.rows.length) {
          $to.empty().append('<option value="" disabled>No matching Spec A variants</option>');
          return;
        }
        
        $to.empty().append('<option value="">Select TO Spec A...</option>');
        resp.rows.forEach(r => {
          const opt = new Option(r.text, r.id, false, false);
          $(opt).data('stock', r.stock);
          $to.append(opt);
        });
        
        initVariantSelect($to);
        $to.trigger('change');
      });
  }

  // ========================================
  // Update TO Stock Display
  // ========================================
  function updateToStock($row) {
    const $toStock = $row.find('.to-stock');
    const $toOpt = $row.find('.to-variant-select option:selected');
    if ($toOpt.val()) {
      const stock = parseFloat($toOpt.data('stock')) || 0;
      $toStock.html(`<span class="stock-ok">Current: <strong>${stock.toFixed(0)}</strong></span>`);
    } else {
      $toStock.html('');
    }
  }

  // ========================================
  // Collect Form Data
  // ========================================
  function collectPayload(action) {
    const data = new FormData();
    data.append('action', action);
    data.append('transfer_no', $('#transfer_no').val());
    data.append('transfer_date', $('#transfer_date').val());
    data.append('remarks', $('#remarks').val() || '');

    $('#lines_body tr').each(function() {
      const $r = $(this);
      data.append('line_product_id[]', $r.find('.product-select').val() || '');
      data.append('line_from_variant_id[]', $r.find('.from-variant-select').val() || '');
      data.append('line_to_variant_id[]', $r.find('.to-variant-select').val() || '');
      data.append('line_qty[]', $r.find('.qty').val() || '0');
      data.append('line_bonus[]', $r.find('.bonus').val() || '0');
      data.append('line_rate[]', $r.find('.rate').val() || '0');
    });
    return data;
  }

  // ========================================
  // Submit Action
  // ========================================
  function postAction(action) {
    const fd = collectPayload(action);
    
    // Disable buttons during submit
    $('button').prop('disabled', true);
    
    $.ajax({
      url: URL_SAVE,
      method: 'POST',
      headers: { 'X-CSRFToken': csrftoken },
      data: fd,
      processData: false,
      contentType: false,
    }).done(function(res) {
      if (!res.ok) {
        showToast(res.message || 'Operation failed', 'error');
        $('button').prop('disabled', false);
        return;
      }
      if (res.redirect) {
        showToast('Success! Redirecting...', 'success');
        setTimeout(() => { window.location.href = res.redirect; }, 500);
      }
    }).fail(function() {
      showToast('Request failed. Please try again.', 'error');
      $('button').prop('disabled', false);
    });
  }

  // ========================================
  // Event Handlers
  // ========================================
  
  // Product change
  $(document).on('change', '.product-select', function() {
    const $row = $(this).closest('tr');
    loadVariantsForRow($row, $(this).val());
  });

  // FROM variant change
  $(document).on('change', '.from-variant-select', function() {
    const $row = $(this).closest('tr');
    loadAllowedTo($row);
  });

  // TO variant change
  $(document).on('change', '.to-variant-select', function() {
    updateToStock($(this).closest('tr'));
  });

  // Qty/Bonus/Rate change
  $(document).on('input change', '.qty, .bonus, .rate', function() {
    calcLineTotal($(this).closest('tr'));
  });

  // Delete line
  $(document).on('click', '.del', function() {
    if ($('#lines_body tr').length <= 1) {
      showToast('At least one line is required.', 'warning');
      return;
    }
    $(this).closest('tr').remove();
    renumber();
    calcTotals();
  });

  // Add line
  $('#add_line').on('click', function() {
    const $newRow = $(`
      <tr class="line-row">
        <td class="text-center ln-no">1</td>
        <td><select class="form-control form-control-sm product-select"></select></td>
        <td>
          <select class="form-control form-control-sm from-variant-select"></select>
          <div class="stock-info from-stock"></div>
        </td>
        <td class="text-center transfer-arrow">→</td>
        <td>
          <select class="form-control form-control-sm to-variant-select"></select>
          <div class="stock-info to-stock"></div>
        </td>
        <td><input class="form-control form-control-sm qty text-right" type="number" step="any" min="0" value="1"></td>
        <td><input class="form-control form-control-sm bonus text-right" type="number" step="any" min="0" value="0"></td>
        <td><input class="form-control form-control-sm rate text-right" type="number" step="any" min="0" value="0"></td>
        <td class="text-right font-weight-bold line-total">0.00</td>
        <td class="text-center">
          <button type="button" class="btn btn-sm btn-outline-danger del"><i class="fas fa-times"></i></button>
        </td>
      </tr>
    `);
    
    $('#lines_body').append($newRow);
    initProductSelect($newRow.find('.product-select'));
    initVariantSelect($newRow.find('.from-variant-select'));
    initVariantSelect($newRow.find('.to-variant-select'));
    renumber();
  });

  // Action buttons
  $('#btn_save_draft').on('click', function() { postAction('save_draft'); });
  
  $('#btn_post').on('click', function() { 
    if (!confirm('Post this transfer? Stock will be affected.')) return;
    postAction('post'); 
  });
  
  $('#btn_void').on('click', function() {
    if (!confirm('VOID this transfer? All stock movements will be reversed.')) return;
    postAction('void');
  });
  
  $('#btn_delete').on('click', function() {
    if (!confirm('DELETE this draft permanently?')) return;
    postAction('delete');
  });

  // // NEW: If sub-tenant and only ONE option, auto-select and disable
  // if (IS_SUB_TENANT && resp.rows.length === 1) {
  //   $from.val(resp.rows[0].id);
  //   $from.prop('disabled', true);  // Lock it
  //   $from.addClass('locked');
  //   $from.trigger('change');
  //   showToast('FROM Spec A is locked to your assigned variant.', 'info');
  // } else if (IS_SUB_TENANT) {
  //   // Multiple options but still filtered
  //   $from.addClass('locked');
  // }


  // ========================================
  // Initialize on Page Load
  // ========================================
  $('#lines_body .product-select').each(function() { initProductSelect($(this)); });
  $('#lines_body .from-variant-select, #lines_body .to-variant-select').each(function() { initVariantSelect($(this)); });
  calcTotals();
  
})();
</script>

<style>
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
</style>
{% endblock %}