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

{% block stylesheets %}
  {{ block.super }}
<style>
    .select2-container{width:100%!important;}
    .muted{color:#6c757d;}
    .rowline td{vertical-align:middle;}
  </style>
{% endblock %}

{% block content %}
<div class="d-flex mb-3">
  <a class="btn btn-info font-weight-bold mr-2" href="{% url 'products:transfers_list' %}">← Back</a>

  {% if tr %}
    <a class="btn btn-secondary font-weight-bold mr-2" target="_blank" href="{% url 'products:transfers_print' tr.transfer_no %}">Print Invoice</a>
    <a class="btn btn-dark font-weight-bold" target="_blank" href="{% url 'products:transfers_challan' tr.transfer_no %}">Print Challan</a>
  {% endif %}
</div>

<div class="card mb-3">
  <div class="card-body">
    <div class="form-row">
      <div class="form-group col-md-2">
        <label>Transfer No</label>
        <input class="form-control" value="{% if tr %}{{ tr.transfer_no }}{% else %}(Auto){% endif %}" disabled>
      </div>

      <div class="form-group col-md-2">
        <label>Date</label>
        <input type="date" id="transfer_date" class="form-control" value="{% if tr %}{{ tr.transfer_date|date:'Y-m-d' }}{% else %}{{ today }}{% endif %}">
      </div>

      <div class="form-group col-md-3">
        <label>Type</label>
        <select id="transfer_type" class="form-control">
          <option value="VARIANT" {% if tr and tr.transfer_type == "VARIANT" %}selected{% endif %}>Variant Transfer</option>
          <option value="WAREHOUSE" {% if tr and tr.transfer_type == "WAREHOUSE" %}selected{% endif %}>Warehouse Transfer</option>
        </select>
      </div>

      <div class="form-group col-md-3" id="mode_wrap">
        <label>Mode</label>
        <select id="mode" class="form-control">
          <option value="SPEC_A" {% if tr and tr.mode == "SPEC_A" %}selected{% endif %}>Spec A → Spec A</option>
          <option value="SPEC_B" {% if tr and tr.mode == "SPEC_B" %}selected{% endif %}>Spec B → Spec B</option>
        </select>
        <small class="muted">Variant Transfer only</small>
      </div>

      <div class="form-group col-md-2">
        <label>Status</label>
        <input class="form-control" value="{% if tr %}{{ tr.status }}{% else %}DRAFT{% endif %}" disabled>
      </div>
    </div>

    <div class="form-row" id="wh_wrap">
      <div class="form-group col-md-6">
        <label>From Warehouse</label>
        <input type="text" id="from_warehouse" class="form-control" value="{% if tr %}{{ tr.from_warehouse }}{% endif %}" placeholder="e.g., Warehouse A">
      </div>
      <div class="form-group col-md-6">
        <label>To Warehouse</label>
        <input type="text" id="to_warehouse" class="form-control" value="{% if tr %}{{ tr.to_warehouse }}{% endif %}" placeholder="e.g., Warehouse B">
      </div>
    </div>

    <div class="form-group">
      <label>Remarks</label>
      <textarea id="remarks" class="form-control" rows="2">{% if tr %}{{ tr.remarks }}{% endif %}</textarea>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-body table-responsive">
    <table class="table table-sm table-bordered" id="lines_table">
      <thead class="thead-light">
        <tr>
          <th style="width:32px;">#</th>
          <th style="width:340px;">Product</th>
          <th class="col-var" style="width:260px;">From Variant</th>
          <th class="col-var" style="width:260px;">To Variant</th>
          <th style="width:110px;">Qty</th>
          <th style="width:110px;">Bonus</th>
          <th style="width:140px;">Rate</th>
          <th style="width:60px;">Del</th>
        </tr>
      </thead>
      <tbody id="lines_body">
        {% if lines %}
          {% for ln in lines %}
          <tr class="rowline">
            <td class="ln-no">{{ ln.line_no }}</td>
            <td>
              <select class="form-control product-select">
                <option value="{{ ln.product.id }}" selected>{{ ln.product.product_code }} — {{ ln.product.name }}</option>
              </select>
            </td>
            <td class="col-var">
              <select class="form-control from-variant-select">
                {% if ln.from_variant %}
                  <option value="{{ ln.from_variant.id }}" selected>{{ ln.from_variant.sku_code }}</option>
                {% endif %}
              </select>
            </td>
            <td class="col-var">
              <select class="form-control to-variant-select">
                {% if ln.to_variant %}
                  <option value="{{ ln.to_variant.id }}" selected>{{ ln.to_variant.sku_code }}</option>
                {% endif %}
              </select>
            </td>
            <td><input class="form-control qty" type="number" step="any" value="{{ ln.qty }}"></td>
            <td><input class="form-control bonus" type="number" step="any" value="{{ ln.bonus_qty }}"></td>
            <td><input class="form-control rate" type="number" step="any" value="{{ ln.rate_snapshot }}"></td>
            <td><button type="button" class="btn btn-sm btn-danger del">X</button></td>
          </tr>
          {% endfor %}
        {% else %}
          <tr class="rowline">
            <td class="ln-no">1</td>
            <td><select class="form-control product-select"></select></td>
            <td class="col-var"><select class="form-control from-variant-select"></select></td>
            <td class="col-var"><select class="form-control to-variant-select"></select></td>
            <td><input class="form-control qty" type="number" step="any" value="1"></td>
            <td><input class="form-control bonus" type="number" step="any" value="0"></td>
            <td><input class="form-control rate" type="number" step="any" value="0"></td>
            <td><button type="button" class="btn btn-sm btn-danger del">X</button></td>
          </tr>
        {% endif %}
      </tbody>
    </table>

    <button type="button" id="add_line" class="btn btn-outline-primary">+ Add Line</button>
  </div>
</div>

<div class="d-flex mt-3">
  <button type="button" id="btn_save_draft" class="btn btn-warning font-weight-bold mr-2">Save Draft</button>
  <button type="button" id="btn_post" class="btn btn-success font-weight-bold mr-2">Post (Finalize)</button>

  {% if tr and tr.status == "POSTED" %}
    <button type="button" id="btn_void" class="btn btn-danger font-weight-bold mr-2">Void</button>
  {% endif %}

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

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

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

<script>
(function(){
  const URL_SAVE   = "{% url 'products:transfers_save' %}";
  const URL_PROD   = "{% url 'products:ajax_products_select2' %}";
  const URL_VARS   = "{% url 'products:ajax_variants_for_product' %}";
  const URL_ALLOW  = "{% url 'products:ajax_allowed_to_variants' %}";
  const csrftoken  = $('[name=csrfmiddlewaretoken]').val();

  function isVariantType(){ return ($('#transfer_type').val() === 'VARIANT'); }

  function toggleTypeUi(){
    const t = $('#transfer_type').val();
    if (t === 'VARIANT'){
      $('#mode_wrap').show();
      $('#wh_wrap').hide();
      $('.col-var').show();
    } else {
      $('#mode_wrap').hide();
      $('#wh_wrap').show();
      $('.col-var').hide();
    }
  }

  function renumber(){
    $('#lines_body tr').each(function(i){
      $(this).find('.ln-no').text(i+1);
    });
  }

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

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

  function loadVariantsForRow($row, productId){
    const $from = $row.find('.from-variant-select');
    const $to   = $row.find('.to-variant-select');

    $from.empty(); $to.empty();
    initVariantSelect($from); initVariantSelect($to);

    if (!productId){ return; }

    $.getJSON(URL_VARS, {product_id: productId})
      .done(function(resp){
        if (!resp.ok) return;
        resp.rows.forEach(r=>{
          const opt = new Option(r.text, r.id, false, false);
          $from.append(opt.cloneNode(true));
          $to.append(opt);
        });
        $from.trigger('change'); $to.trigger('change');
      });
  }

  function loadAllowedTo($row){
    if (!isVariantType()) return;
    const mode = $('#mode').val();
    const fromVid = $row.find('.from-variant-select').val();
    const $to = $row.find('.to-variant-select');

    if (!fromVid){ return; }

    $.getJSON(URL_ALLOW, {from_variant_id: fromVid, mode: mode})
      .done(function(resp){
        if (!resp.ok) return;
        $to.empty();
        $to.append(new Option('', '', true, true));
        resp.rows.forEach(r=>{
          $to.append(new Option(r.text, r.id, false, false));
        });
        $to.trigger('change');
      });
  }

  function collectPayload(action){
    const data = new FormData();
    data.append('action', action);
    data.append('transfer_no', $('#transfer_no').val());
    data.append('transfer_type', $('#transfer_type').val());
    data.append('mode', $('#mode').val());
    data.append('transfer_date', $('#transfer_date').val());
    data.append('remarks', $('#remarks').val() || '');
    data.append('from_warehouse', $('#from_warehouse').val() || '');
    data.append('to_warehouse', $('#to_warehouse').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;
  }

  function postAction(action){
    const fd = collectPayload(action);
    $.ajax({
      url: URL_SAVE,
      method:'POST',
      headers: {'X-CSRFToken': csrftoken},
      data: fd,
      processData:false,
      contentType:false,
    }).done(function(res){
      if (!res.ok){
        alert(res.message || 'Failed');
        return;
      }
      if (res.redirect){ window.location.href = res.redirect; }
    });
  }

  // events
  $(document).on('change', '#transfer_type', function(){ toggleTypeUi(); });
  $(document).on('change', '#mode', function(){
    // re-apply allowed-to on all rows
    $('#lines_body tr').each(function(){ loadAllowedTo($(this)); });
  });

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

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

  $(document).on('click', '.del', function(){
    $(this).closest('tr').remove();
    if ($('#lines_body tr').length === 0){
      $('#add_line').click();
    }
    renumber();
  });

  $('#add_line').on('click', function(){
    const $tr = $(`
      <tr class="rowline">
        <td class="ln-no">1</td>
        <td><select class="form-control product-select"></select></td>
        <td class="col-var"><select class="form-control from-variant-select"></select></td>
        <td class="col-var"><select class="form-control to-variant-select"></select></td>
        <td><input class="form-control qty" type="number" step="any" value="1"></td>
        <td><input class="form-control bonus" type="number" step="any" value="0"></td>
        <td><input class="form-control rate" type="number" step="any" value="0"></td>
        <td><button type="button" class="btn btn-sm btn-danger del">X</button></td>
      </tr>
    `);
    $('#lines_body').append($tr);
    initProductSelect($tr.find('.product-select'));
    initVariantSelect($tr.find('.from-variant-select'));
    initVariantSelect($tr.find('.to-variant-select'));
    renumber();
    toggleTypeUi();
  });

  $('#btn_save_draft').on('click', function(){ postAction('save_draft'); });
  $('#btn_post').on('click', function(){ postAction('post'); });

  $('#btn_void').on('click', function(){
    if (!confirm('Void this transfer? Stock movements will be reversed.')) return;
    postAction('void');
  });

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

  // init
  toggleTypeUi();
  $('#lines_body .product-select').each(function(){ initProductSelect($(this)); });
  $('#lines_body .from-variant-select, #lines_body .to-variant-select').each(function(){ initVariantSelect($(this)); });
})();
</script>
{% endblock %}