{% extends "pos/base.html" %}
{% load static %}
{% block title %}Stock → Bonus 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; }
  .onhand-badge { background: #28a745; color: #fff; font-weight: bold; padding: 2px 8px; border-radius: 4px; }
  .bonus-badge { background: #ffc107; color: #333; font-weight: bold; padding: 2px 8px; border-radius: 4px; }
  .arrow-col { font-size: 22px; color: #ffc107; }
  .line-row td { vertical-align: middle; }
  .line-row:hover { background-color: #f8f9fa; }
  .show-all-toggle { font-size: 12px; }
</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:onhand_to_bonus_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:onhand_to_bonus_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 %}
        Stock → Bonus Transfer #{{ tr.transfer_no }}
        <span class="badge
          {% if tr.status == 'POSTED' %}badge-success
          {% elif tr.status == 'DRAFT' %}badge-light
          {% else %}badge-danger{% endif %} ml-2">
          {{ tr.status }}
        </span>
      {% else %}
        New Stock → Bonus 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-exchange-alt"></i>
  <strong>On-Hand → Bonus:</strong>
  Convert regular on-hand stock into bonus stock within the same variant.
  Total available stock will not change.
  <label class="ml-3 mb-0 show-all-toggle">
    <input type="checkbox" id="show_all_variants"> Show variants with zero on-hand
  </label>
</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:320px;">Variant (Spec A | Spec B)</th>
          <th style="width:90px;" class="text-center">
            <span class="onhand-badge">On-Hand</span>
          </th>
          <th style="width:40px;" class="text-center arrow-col">→</th>
          <th style="width:90px;" class="text-center">
            <span class="bonus-badge">Bonus</span>
          </th>
          <th style="width:100px;" class="text-right">Convert Qty</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 variant-select"
                      {% if tr.status == 'VOID' %}disabled{% endif %}>
                {% if ln.variant %}
                  <option value="{{ ln.variant.id }}" selected
                          data-onhand="{{ ln.onhand_before|floatformat:0 }}"
                          data-bonus="{{ ln.bonus_before|floatformat:0 }}">
                    {% if ln.spec_a %}{{ ln.spec_a.name }}{% else %}—{% endif %}
                    |
                    {% if ln.spec_b %}{{ ln.spec_b.name }}{% else %}—{% endif %}
                    — On-Hand: {{ ln.onhand_before|floatformat:0 }} | Bonus: {{ ln.bonus_before|floatformat:0 }}
                  </option>
                {% endif %}
              </select>
              <div class="stock-info variant-stock"></div>
            </td>
            <td class="text-center font-weight-bold onhand-display">
              {{ ln.onhand_before|floatformat:0 }}
            </td>
            <td class="text-center arrow-col">→</td>
            <td class="text-center font-weight-bold bonus-display">
              {{ ln.bonus_before|floatformat:0 }}
            </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 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 variant-select"></select>
              <div class="stock-info variant-stock"></div>
            </td>
            <td class="text-center font-weight-bold onhand-display">—</td>
            <td class="text-center arrow-col">→</td>
            <td class="text-center font-weight-bold bonus-display">—</td>
            <td><input class="form-control form-control-sm qty 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="6" class="text-right">Grand Total:</th>
          <th class="text-right" id="sum_qty">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:onhand_to_bonus_transfers_save' %}";
  const URL_PROD = "{% url 'products:ajax_products_with_onhand' %}";
  const URL_VARS = "{% url 'products:ajax_variants_with_onhand' %}";
  const csrftoken = $('[name=csrfmiddlewaretoken]').val();

  // ════════════════════════════════════════
  // Toast
  // ════════════════════════════════════════
  function showToast(msg, type){
    type = type || 'info';
    const bg = {success:'bg-success',error:'bg-danger',
                warning:'bg-warning text-dark',info:'bg-info'}[type]||'bg-info';
    const ic = {success:'check-circle',error:'exclamation-circle',
                warning:'exclamation-triangle',info:'info-circle'}[type]||'info-circle';
    const $t = $(`
      <div class="alert ${bg} 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-${ic} mr-2"></i>${msg}
      </div>`);
    $('body').append($t);
    setTimeout(()=>$t.fadeOut(400,function(){$(this).remove();}),5000);
  }

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

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

  // ════════════════════════════════════════
  // Select2
  // ════════════════════════════════════════
  function initProductSelect($s){
    if($s.data('select2')) return;
    $s.select2({
      ajax:{
        url: URL_PROD,
        dataType:'json',
        delay:200,
        data: p=>({
          term: p.term||'',
          show_all: $('#show_all_variants').is(':checked') ? '1' : '0'
        }),
        processResults: d=>d
      },
      placeholder:'Search product...',
      allowClear:true,
      minimumInputLength:1
    });
  }

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

  // ════════════════════════════════════════
  // Load variants for product
  // ════════════════════════════════════════
  function loadVariantsForRow($row, productId){
    const $var = $row.find('.variant-select');

    $var.empty().append('<option value="">Loading...</option>');
    $row.find('.onhand-display').text('—');
    $row.find('.bonus-display').text('—');
    $row.find('.variant-stock').html('');

    if(!productId){
      $var.empty().append('<option value="">Select variant...</option>');
      return;
    }

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

    const showAll = $('#show_all_variants').is(':checked') ? '1' : '0';

    $.getJSON(URL_VARS, { product_id: productId, show_all: showAll })
      .done(function(resp){
        $var.empty().append('<option value="">Select variant...</option>');
        $('#variant_status').html('');

        if(!resp.ok){
          showToast('Failed to load variants.','warning');
          return;
        }

        if(resp.ensured && resp.ensured.created > 0){
          showToast(`Created ${resp.ensured.created} new variant(s).`,'success');
        }

        if(resp.rows.length === 0){
          $var.empty().append(
            '<option value="" disabled>No variants with on-hand stock</option>');
          showToast('No variants have on-hand stock for this product.','warning');
          return;
        }

        resp.rows.forEach(r=>{
          const opt = new Option(r.text, r.id, false, false);
          $(opt).data('onhand', r.on_hand);
          $(opt).data('bonus',  r.bonus);
          $(opt).data('total',  r.total);
          $var.append(opt);
        });

        initVariantSelect($var);
        $var.trigger('change');
      })
      .fail(function(){
        $var.empty().append('<option value="">❌ Error</option>');
        showToast('Failed to load variants.','error');
      });
  }

  // ════════════════════════════════════════
  // Update stock display when variant selected
  // ════════════════════════════════════════
  function updateVariantDisplay($row){
    const $opt = $row.find('.variant-select option:selected');
    const $onhandD = $row.find('.onhand-display');
    const $bonusD  = $row.find('.bonus-display');
    const $info    = $row.find('.variant-stock');

    if($opt.val()){
      const onhand = parseFloat($opt.data('onhand')) || 0;
      const bonus  = parseFloat($opt.data('bonus'))  || 0;

      $onhandD.html(`<span class="onhand-badge">${onhand.toFixed(0)}</span>`);
      $bonusD.html(`<span class="bonus-badge">${bonus.toFixed(0)}</span>`);

      const cls = onhand < 1 ? 'stock-low' : 'stock-ok';
      $info.html(
        `<span class="${cls}">Max convertible: <strong>${onhand.toFixed(0)}</strong></span>`
      );

      // Auto-set qty to full on-hand if currently 0
      const curQty = parseFloat($row.find('.qty').val()) || 0;
      if(curQty <= 0 && onhand > 0){
        $row.find('.qty').val(onhand.toFixed(0));
        calcLineTotal($row);
      }
    } else {
      $onhandD.text('—');
      $bonusD.text('—');
      $info.html('');
    }
  }

  // ════════════════════════════════════════
  // Collect payload
  // ════════════════════════════════════════
  function collectPayload(action){
    const 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(){
      const $r = $(this);
      fd.append('line_product_id[]', $r.find('.product-select').val()||'');
      fd.append('line_variant_id[]', $r.find('.variant-select').val()||'');
      fd.append('line_qty[]',        $r.find('.qty').val()||'0');
      fd.append('line_rate[]',       $r.find('.rate').val()||'0');
    });
    return fd;
  }

  // ════════════════════════════════════════
  // Submit
  // ════════════════════════════════════════
  function postAction(action){
    const 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||'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.','error');
      $('button').prop('disabled',false);
    });
  }

  // ════════════════════════════════════════
  // Events
  // ════════════════════════════════════════

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

  $(document).on('change','.variant-select',function(){
    updateVariantDisplay($(this).closest('tr'));
  });

  $(document).on('input change','.qty, .rate',function(){
    const $row = $(this).closest('tr');
    // Validate qty vs on-hand
    if($(this).hasClass('qty')){
      const $opt   = $row.find('.variant-select option:selected');
      const onhand = parseFloat($opt.data('onhand')) || 0;
      const qty    = parseFloat($(this).val()) || 0;
      if(qty > onhand && onhand > 0){
        showToast(`Qty (${qty}) exceeds available on-hand (${onhand}).`,'warning');
        $(this).addClass('is-invalid');
      } else {
        $(this).removeClass('is-invalid');
      }
    }
    calcLineTotal($row);
  });

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

  // Show-all toggle → reload all variant selects
  $('#show_all_variants').on('change',function(){
    $('#lines_body tr').each(function(){
      const pid = $(this).find('.product-select').val();
      if(pid) loadVariantsForRow($(this), pid);
    });
  });

  // Add line
  $('#add_line').on('click',function(){
    const $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 variant-select"></select>
          <div class="stock-info variant-stock"></div>
        </td>
        <td class="text-center font-weight-bold onhand-display">—</td>
        <td class="text-center arrow-col">→</td>
        <td class="text-center font-weight-bold bonus-display">—</td>
        <td><input class="form-control form-control-sm qty 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'));
    initVariantSelect($nr.find('.variant-select'));
    renumber();
  });

  // Action buttons
  $('#btn_save_draft').on('click',function(){ postAction('save_draft'); });

  $('#btn_post').on('click',function(){
    // Validate before posting
    let hasError = false;
    $('#lines_body tr').each(function(){
      const $r     = $(this);
      const $opt   = $r.find('.variant-select option:selected');
      const onhand = parseFloat($opt.data('onhand')) || 0;
      const qty    = parseFloat($r.find('.qty').val()) || 0;
      if(qty > onhand && onhand > 0){
        hasError = true;
      }
    });
    if(hasError){
      showToast('Some lines have qty exceeding available on-hand!','error');
      return;
    }
    if(!confirm('Post this transfer? On-Hand stock will be converted to Bonus.')) return;
    postAction('post');
  });

  $('#btn_void').on('click',function(){
    if(!confirm('VOID? The conversion will be reversed.')) return;
    postAction('void');
  });

  $('#btn_delete').on('click',function(){
    if(!confirm('DELETE this draft permanently?')) return;
    postAction('delete');
  });

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