{% extends "pos/base.html" %}
{% load static %}
{% block title %}Batch to Batch 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: #17a2b8; }
  .line-row td { vertical-align: middle; }
  .line-row:hover { background-color: #f8f9fa; }
  .variant-info { font-size: 10px; color: #999; }
</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_b_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_b_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-info text-white">
    <strong>
      {% if tr %}
        Spec B 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 Batch to Batch 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>

<!-- Lines Card -->
<div class="card">
  <div class="card-header bg-light d-flex justify-content-between align-items-center">
    <span class="font-weight-bold">Transfer Lines</span>
    <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 Batch</th>
          <th style="width:40px;" class="text-center"></th>
          <th style="width:240px;">TO Batch</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_a_id="{{ ln.from_variant.spec_a_id|default:'' }}"
                          data-spec_a_name="{{ ln.common_spec_a.name|default:'—' }}">
                    {{ ln.from_spec_b.name|default:"—" }} ({{ ln.common_spec_a.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_b.name|default:"—" }} ({{ ln.common_spec_a.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 %}
          <!-- Empty first row -->
          <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 &amp; 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_b_transfers_save' %}";
  const URL_PROD  = "{% url 'products:ajax_products_for_spec_b' %}";
  const URL_VARS  = "{% url 'products:ajax_spec_b_variants' %}";
  const URL_ALLOW = "{% url 'products:ajax_spec_b_allowed_to' %}";
  const csrftoken = $('[name=csrfmiddlewaretoken]').val();
  const currentStatus = $('#current_status').val();

  // ════════════════════════════════════════
  // Toast
  // ════════════════════════════════════════
  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 icon = {
      'success': 'check-circle',
      'error':   'exclamation-circle',
      'warning': 'exclamation-triangle',
      'info':    'info-circle'
    }[type] || 'info-circle';

    const $t = $(`
      <div class="alert ${bgClass} text-white position-fixed shadow-lg"
           style="top:20px;right:20px;z-index:9999;max-width:450px;animation:slideIn .3s ease;">
        <button type="button" class="close text-white ml-2"
                onclick="$(this).parent().remove();">&times;</button>
        <i class="fas fa-${icon} mr-2"></i>${message}
      </div>`);
    $('body').append($t);
    setTimeout(()=> $t.fadeOut(400, function(){ $(this).remove(); }), 5000);
  }

  // ════════════════════════════════════════
  // Row numbers & 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($r){
    const qty   = parseFloat($r.find('.qty').val())   || 0;
    const bonus = parseFloat($r.find('.bonus').val()) || 0;
    const rate  = parseFloat($r.find('.rate').val())  || 0;
    $r.find('.line-total').text(((qty+bonus)*rate).toFixed(2));
    calcTotals();
  }

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

  // ════════════════════════════════════════
  // Select2 helpers — with safe destroy
  // ════════════════════════════════════════
  function destroySelect2($el){
    try {
      if($el.data('select2')){
        $el.select2('destroy');
      }
    } catch(e){}
  }

  function initProductSelect($s){
    destroySelect2($s);
    $s.select2({
      ajax:{
        url: URL_PROD,
        dataType:'json',
        delay:200,
        data: p=>({term: p.term||''}),
        processResults: d=>d
      },
      placeholder:'Search product...',
      allowClear:true,
      minimumInputLength:1
    });
  }

  function initVariantSelect($s){
    destroySelect2($s);
    $s.select2({ placeholder:'Select...', allowClear:true });
  }

  // ════════════════════════════════════════
  // Load FROM variants (Spec-B list for product)
  // ════════════════════════════════════════
  function loadVariantsForRow($row, productId){
    const $from = $row.find('.from-variant-select');
    const $to   = $row.find('.to-variant-select');

    // Destroy Select2 before clearing
    destroySelect2($from);
    destroySelect2($to);

    $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 B...</option>');
      initVariantSelect($from);
      initVariantSelect($to);
      return;
    }

    $('#variant_status').html(
      '<i class="fas fa-spinner fa-spin"></i> Loading variants...');

    $.ajax({
      url: URL_VARS,
      type: 'GET',
      dataType: 'json',
      headers: {'X-Requested-With': 'XMLHttpRequest'},
      data: { product_id: productId }
    })
    .done(function(resp){
      // Destroy again to be safe
      destroySelect2($from);

      $from.empty().append('<option value="">Select FROM Spec B...</option>');
      $('#variant_status').html('');

      if(!resp.ok){
        if(resp.message){
          $from.empty().append(
            '<option value="" disabled>⚠️ ' + resp.message + '</option>');
          showToast(resp.message, 'warning');
        }
        initVariantSelect($from);
        initVariantSelect($to);
        return;
      }

      if(resp.ensured && resp.ensured.created > 0){
        showToast(
          '<strong>Variants Auto-Created!</strong><br>Created '
          + resp.ensured.created + ' new variant(s).', 'success');
      }

      if(!resp.rows || resp.rows.length === 0){
        $from.empty().append(
          '<option value="" disabled>No Spec B variants found</option>');
        showToast('No Spec B variants found for this product.', 'warning');
        initVariantSelect($from);
        initVariantSelect($to);
        return;
      }

      resp.rows.forEach(function(r){
        var opt = new Option(r.text, r.id, false, false);
        $(opt).data('stock',       r.stock);
        $(opt).data('spec_a_id',   r.spec_a_id);
        $(opt).data('spec_a_name', r.spec_a_name);
        $(opt).data('spec_b_id',   r.spec_b_id);
        $(opt).data('spec_b_name', r.spec_b_name);
        $from.append(opt);
      });

      initVariantSelect($from);
      initVariantSelect($to);
    })
    .fail(function(xhr, status, err){
      destroySelect2($from);
      $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: ' + err, 'error');
      initVariantSelect($from);
      initVariantSelect($to);
      console.error('loadVariantsForRow FAIL:', status, err, xhr.responseText);
    });
  }

  // ════════════════════════════════════════
  // Load allowed TO variants
  // ════════════════════════════════════════
  function loadAllowedTo($row){
    var fromVid    = $row.find('.from-variant-select').val();
    var $to        = $row.find('.to-variant-select');
    var $fromStock = $row.find('.from-stock');
    var $toStock   = $row.find('.to-stock');

    // Destroy Select2 on TO before clearing
    destroySelect2($to);

    $to.empty().append('<option value="">Select TO Spec B...</option>');
    $toStock.html('');

    // Show FROM stock
    var $fo = $row.find('.from-variant-select option:selected');
    if($fo.val()){
      var s = parseFloat($fo.data('stock')) || 0;
      var c = s < 1 ? 'stock-low' : 'stock-ok';
      $fromStock.html(
        '<span class="' + c + '">Available: <strong>' + s.toFixed(0) + '</strong></span>');
    } else {
      $fromStock.html('');
    }

    if(!fromVid){
      initVariantSelect($to);
      return;
    }

    // Show loading
    $to.empty().append('<option value="">Loading TO variants...</option>');

    $.ajax({
      url: URL_ALLOW,
      type: 'GET',
      dataType: 'json',
      headers: {'X-Requested-With': 'XMLHttpRequest'},
      data: { from_variant_id: fromVid }
    })
    .done(function(resp){
      // Destroy again before populating
      destroySelect2($to);
      $to.empty();

      if(!resp.ok){
        $to.append('<option value="" disabled>❌ Error loading TO variants</option>');
        showToast('Failed to load TO variants.', 'warning');
        initVariantSelect($to);
        console.error('loadAllowedTo resp not ok:', resp);
        return;
      }

      if(!resp.rows || resp.rows.length === 0){
        $to.append(
          '<option value="" disabled>No matching Spec B variants available</option>');
        showToast('No matching TO Spec B variants found.', 'info');
        initVariantSelect($to);
        return;
      }

      $to.append('<option value="">Select TO Spec B...</option>');
      resp.rows.forEach(function(r){
        var 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);
        $to.append(opt);
      });

      initVariantSelect($to);
    })
    .fail(function(xhr, status, err){
      destroySelect2($to);
      $to.empty().append(
        '<option value="" disabled>❌ Error loading TO variants</option>');
      showToast('Failed to load TO variants: ' + err, 'error');
      initVariantSelect($to);
      console.error('loadAllowedTo FAIL:', status, err, xhr.responseText);
    });
  }

  // ════════════════════════════════════════
  // Update TO stock display
  // ════════════════════════════════════════
  function updateToStock($row){
    var $ts = $row.find('.to-stock');
    var $o  = $row.find('.to-variant-select option:selected');
    if($o.val()){
      var s = parseFloat($o.data('stock')) || 0;
      $ts.html(
        '<span class="stock-ok">Current: <strong>' + s.toFixed(0) + '</strong></span>');
    } else {
      $ts.html('');
    }
  }

  // ════════════════════════════════════════
  // Collect payload
  // ════════════════════════════════════════
  function collectPayload(action){
    var fd = new FormData();
    fd.append('action',       action);
    fd.append('transfer_no',  $('#transfer_no').val());
    fd.append('transfer_date',$('#transfer_date').val());
    fd.append('remarks',      $('#remarks').val()||'');

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

  // ════════════════════════════════════════
  // Submit
  // ════════════════════════════════════════
  function postAction(action){
    var fd = collectPayload(action);
    $('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(function(){ window.location.href = res.redirect; }, 500);
      }
    }).fail(function(){
      showToast('Request failed. Please try again.','error');
      $('button').prop('disabled',false);
    });
  }

  // ════════════════════════════════════════
  // Event handlers
  // ════════════════════════════════════════

  // product change → reload FROM variants
  $(document).on('change', '.product-select', function(){
    loadVariantsForRow($(this).closest('tr'), $(this).val());
  });

  // FROM change → load TO
  $(document).on('change', '.from-variant-select', function(){
    loadAllowedTo($(this).closest('tr'));
  });

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

  // qty / bonus / rate
  $(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(){
    var $nr = $(`
      <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($nr);
    initProductSelect($nr.find('.product-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');
  });

  // ════════════════════════════════════════
  // Init on page load
  // ════════════════════════════════════════
  $('#lines_body .product-select').each(function(){ initProductSelect($(this)); });
  $('#lines_body .from-variant-select').each(function(){ initVariantSelect($(this)); });
  $('#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 %}