{% extends "pos/base.html" %}
{% load static %}

{% block content %}
<h1>{% if bom %}Edit{% else %}Create{% endif %} Bill of Materials (BOM)</h1>

<form method="post" id="bom-form">
  {% csrf_token %}

  <!-- Finished Product -->
  <div class="form-group mb-4">
    <label for="id_finished_product">Finished Product</label>
    <select id="id_finished_product" name="finished_product"
            class="form-control" style="width:100%">
      <option></option>
      {% if bom %}
        <option value="{{ bom.finished_product.id }}" selected>
          {{ bom.finished_product.name }}
          ({{ bom.finished_product.product_code }})
        </option>
      {% endif %}
    </select>
  </div>

  <!-- Auto-Calculate BOM Lines Button -->
  <button type="button" class="btn btn-info mb-3"
          data-toggle="modal" data-target="#autoCalcModal">
    Auto Calculate BOM Lines
  </button>

  <!-- Auto-Calculate Modal -->
  <div class="modal fade" id="autoCalcModal" tabindex="-1" role="dialog"
       aria-labelledby="autoCalcModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="autoCalcModalLabel">Auto Calculate BOM</h5>
          <button type="button" class="close" data-dismiss="modal"
                  aria-label="Close"><span>&times;</span></button>
        </div>
        <div class="modal-body">
          <!-- Quantity Produced -->
          <div class="form-group">
            <label for="produced_count">Quantity Produced</label>
            <input type="number" step="1" min="1" id="produced_count"
                   class="form-control" placeholder="e.g. 13">
          </div>
          <!-- Bulk Materials Table -->
          <table id="bulk-materials-table" class="table table-bordered">
            <thead>
              <tr>
                <th>Code</th>
                <th>Name</th>
                <th>Bulk Qty</th>
                <th style="width:1%">✖</th>
              </tr>
            </thead>
            <tbody>
              <tr data-index="0">
                <td>
                  <input type="text"
                         class="form-control bulk-code-input"
                         data-index="0"
                         placeholder="Code & Enter">
                  <input type="hidden"
                         name="bulk-0-component_id"
                         class="bulk-component-id">
                </td>
                <td>
                  <select class="form-control bulk-name-select"
                          data-index="0"
                          style="width:100%">
                    <option></option>
                  </select>
                </td>
                <td>
                  <input type="number"
                         step="0.01"
                         min="0"
                         class="form-control bulk-qty-input"
                         data-index="0"
                         placeholder="e.g. 40">
                </td>
                <td class="text-center">
                  <button type="button"
                          class="btn btn-sm btn-danger remove-bulk-row"
                          data-index="0">✖</button>
                </td>
              </tr>
            </tbody>
          </table>
          <button type="button" id="add-bulk-row" class="btn btn-secondary">
            + Add Bulk Material
          </button>
        </div>
        <div class="modal-footer">
          <button type="button" id="calc-bom-lines"
                  class="btn btn-primary">Calculate</button>
          <button type="button" class="btn btn-secondary"
                  data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Main BOM Lines Table -->
  <table id="bom-lines-table" class="table table-bordered">
    <thead>
      <tr>
        <th>Code</th>
        <th>Name</th>
        <th>Qty / Unit</th>
        <th style="width:1%">✖</th>
      </tr>
    </thead>
    <tbody>
      {% if bom_lines %}
        {% for line in bom_lines %}
          <tr data-index="{{ forloop.counter0 }}">
            <td>
              <input type="text" name="lines-{{ forloop.counter0 }}-code"
                     class="form-control bom-code-input"
                     data-index="{{ forloop.counter0 }}"
                     value="{{ line.component.product_code }}"
                     placeholder="Type code & Enter">
              <input type="hidden" name="lines-{{ forloop.counter0 }}-component_id"
                     class="bom-component-id" value="{{ line.component_id }}">
            </td>
            <td>
              <select name="lines-{{ forloop.counter0 }}-component_name"
                      class="form-control bom-name-select"
                      data-index="{{ forloop.counter0 }}"
                      style="width:100%">
                <option></option>
                <option value="{{ line.component.id }}" selected>
                  {{ line.component.name }}
                  ({{ line.component.product_code }})
                </option>
              </select>
            </td>
            <td>
              <input type="number" step="0.000000001"
                     name="lines-{{ forloop.counter0 }}-quantity"
                     class="form-control bom-qty-input"
                     data-index="{{ forloop.counter0 }}"
                     value="{{ line.quantity_per_unit }}">
            </td>
            <td class="text-center">
              <button type="button" class="btn btn-sm btn-danger remove-row"
                      data-index="{{ forloop.counter0 }}">✖</button>
            </td>
          </tr>
        {% endfor %}
      {% else %}
        <tr data-index="0">
          <td>
            <input type="text" name="lines-0-code"
                   class="form-control bom-code-input" data-index="0"
                   placeholder="Type code & Enter">
            <input type="hidden" name="lines-0-component_id"
                   class="bom-component-id">
          </td>
          <td>
            <select name="lines-0-component_name"
                    class="form-control bom-name-select"
                    data-index="0" style="width:100%">
              <option></option>
            </select>
          </td>
          <td>
            <input type="number" step="0.0000000001"
                   name="lines-0-quantity"
                   class="form-control bom-qty-input"
                   data-index="0">
          </td>
          <td class="text-center">
            <button type="button" class="btn btn-sm btn-danger remove-row"
                    data-index="0">✖</button>
          </td>
        </tr>
      {% endif %}
    </tbody>
  </table>

  <button type="button" class="btn btn-secondary mb-3" id="add-row">
    + Add Component
  </button>

  <div>
    <button type="submit" class="btn btn-primary">Save Recipe</button>
    <a href="{% url 'manufacturing:bom_list' %}"
       class="btn btn-link">Cancel</a>
  </div>
</form>
{% endblock %}

{% block javascripts %}
  <!-- jQuery, Bootstrap, Select2 -->

  <script>
  $(function(){
    const nameUrl = "{% url 'manufacturing:ajax_search_product_by_name' %}";
    const codeUrl = "{% url 'manufacturing:ajax_get_product_by_code'  %}";

    // Shared Select2 options
    const select2Opts = {
      placeholder: 'Search by name…',
      allowClear: true,
      width: 'resolve',
      ajax: {
        url: nameUrl,
        dataType: 'json',
        delay: 250,
        data: params => ({ q: params.term }),
        processResults: data => ({ results: data.results }),
        cache: true
      },
      minimumInputLength: 1,
      templateResult: function(item) {
        if (item.loading) return item.text;
        const stock = (item.present_stock !== undefined)
          ? item.present_stock
          : '—';
        return `<span>${item.text} <small class="text-muted">(${item.code || ''})</small>`
             + `&nbsp;&nbsp;<span class="badge badge-${parseFloat(stock) > 0 ? 'success' : 'danger'}">`
             + `Stock: ${parseFloat(stock) >= 0 ? parseFloat(stock).toFixed(2) : stock}`
             + `</span></span>`;
      },
      escapeMarkup: m => m
    };

    // ---- Main BOM table initialization ----
    $('#id_finished_product').select2(select2Opts);
    let fp = $('#id_finished_product option[selected]').val();
    if (fp) $('#id_finished_product').val(fp).trigger('change');

    function initRow(idx){
      const $name = $(`select.bom-name-select[data-index=${idx}]`);
      $name.select2(select2Opts);
      let pre = $name.find('option[selected]').val();
      if (pre) $name.val(pre).trigger('change');

      $name.on('select2:select', e=>{
        const d = e.params.data;
        $(`.bom-code-input[data-index=${idx}]`).val(d.code);
        $(`.bom-component-id[data-index=${idx}]`).val(d.id);
        $(`.bom-qty-input[data-index=${idx}]`).focus();
      });

      $(`.bom-code-input[data-index=${idx}]`)
        .off('keydown')
        .on('keydown', function(e){
          if ([9,13].includes(e.which)){
            e.preventDefault();
            const code = $(this).val().trim();
            const $row = $(this).closest('tr');
            if (!code){
              $row.find('.bom-qty-input').focus();
              return;
            }
            $.post(codeUrl,{
              code, csrfmiddlewaretoken:'{{ csrf_token }}'
            }).done(resp=>{
              if (resp.success){
                const p = resp.product;
                $row.find('.bom-component-id').val(p.id);
                const opt = new Option(
                  `${p.name} (${p.code})`, p.id, true, true
                );
                $name.append(opt).trigger('change');
                $row.find('.bom-qty-input').focus();
              } else {
                alert('Code not found');
              }
            });
          }
        });
    }

    $('#add-row').on('click', ()=>{
      const idx = $('#bom-lines-table tbody tr').length;
      $('#bom-lines-table tbody').append(`
        <tr data-index="${idx}">
          <td>
            <input type="text" name="lines-${idx}-code"
                   class="form-control bom-code-input"
                   data-index="${idx}"
                   placeholder="Type code & Enter">
            <input type="hidden" name="lines-${idx}-component_id"
                   class="bom-component-id">
          </td>
          <td>
            <select name="lines-${idx}-component_name"
                    class="form-control bom-name-select"
                    data-index="${idx}"
                    style="width:100%">
              <option></option>
            </select>
          </td>
          <td>
            <input type="number" step="0.0000000001"
                   name="lines-${idx}-quantity"
                   class="form-control bom-qty-input"
                   data-index="${idx}">
          </td>
          <td class="text-center">
            <button type="button"
                    class="btn btn-sm btn-danger remove-row"
                    data-index="${idx}">✖</button>
          </td>
        </tr>`);
      initRow(idx);
    });

    $('#bom-lines-table').on('click','.remove-row',function(){
      $(this).closest('tr').remove();
    });

    $('#bom-lines-table').on('keydown','.bom-qty-input', function(e){
      if (e.which===13){
        e.preventDefault();
        $('#add-row').click();
        const newIdx = $('#bom-lines-table tbody tr').length - 1;
        $(`.bom-code-input[data-index=${newIdx}]`).focus();
      }
    });

    $('#bom-lines-table tbody tr').each(function(){
      initRow($(this).data('index'));
    });

    // ---- Modal: bulk inputs & behavior ----

    function initBulkRow(idx){
      const $row  = $(`#bulk-materials-table tr[data-index=${idx}]`);
      const $name = $row.find('.bulk-name-select');
      const $code = $row.find('.bulk-code-input');
      const $comp = $row.find('.bulk-component-id');

      // prevent Enter submitting
      $row.on('keypress', 'input, select', function(e){
        if (e.which===13) e.preventDefault();
      });

      // name select2 + focus qty
      $name.select2(select2Opts)
           .off('select2:select')
           .on('select2:select', e=>{
             const d = e.params.data;
             $comp.val(d.id);
             $code.val(d.code);
             $row.find('.bulk-qty-input').focus();
           });

      // code Enter → lookup or focus qty
      $code.off('keydown').on('keydown', function(e){
        if (e.which===13){
          e.preventDefault();
          const val = $code.val().trim();
          if (!val){
            $row.find('.bulk-qty-input').focus();
            return;
          }
          $.post(codeUrl,{
            code:val, csrfmiddlewaretoken:'{{ csrf_token }}'
          }).done(resp=>{
            if (resp.success){
              const p = resp.product;
              $comp.val(p.id);
              const opt = new Option(
                `${p.name} (${p.code})`, p.id,true,true
              );
              $name.append(opt).trigger('change');
              $row.find('.bulk-qty-input').focus();
            } else alert('Code not found');
          });
        }
      });

      // qty Enter → new row
      $row.off('keydown','.bulk-qty-input')
           .on('keydown','.bulk-qty-input',(e)=>{
        if (e.which===13){
          e.preventDefault();
          $('#add-bulk-row').click();
          const idx2 = $('#bulk-materials-table tbody tr').length - 1;
          $(`#bulk-materials-table tr[data-index=${idx2}] .bulk-code-input`)
            .focus();
        }
      });

      // remove row
      $row.find('.remove-bulk-row').off('click')
           .on('click', ()=> $row.remove());
    }

    // prevent form submit on Enter in modal header
    $('#autoCalcModal').on('keypress', 'input, select', function(e){
      if (e.which===13) e.preventDefault();
    });

    $('#add-bulk-row').on('click', ()=>{
      const idx = $('#bulk-materials-table tbody tr').length;
      $('#bulk-materials-table tbody').append(`
        <tr data-index="${idx}">
          <td>
            <input type="text"
                   class="form-control bulk-code-input"
                   data-index="${idx}"
                   placeholder="Code & Enter">
            <input type="hidden"
                   name="bulk-${idx}-component_id"
                   class="bulk-component-id">
          </td>
          <td>
            <select class="form-control bulk-name-select"
                    data-index="${idx}"
                    style="width:100%"><option></option></select>
          </td>
          <td>
            <input type="number" step="0.01" min="0"
                   class="form-control bulk-qty-input"
                   data-index="${idx}"
                   placeholder="Bulk Qty">
          </td>
          <td class="text-center">
            <button type="button"
                    class="btn btn-sm btn-danger remove-bulk-row"
                    data-index="${idx}">✖</button>
          </td>
        </tr>`);
      initBulkRow(idx);
    });

    // init existing bulk rows
    $('#bulk-materials-table tbody tr').each(function(){
      initBulkRow($(this).data('index'));
    });

    // produced_count Enter → focus first bulk code
    $('#produced_count').on('keydown', function(e){
      if (e.which===13){
        e.preventDefault();
        $('#bulk-materials-table tbody tr:first .bulk-code-input')
          .focus();
      }
    });

    // Calculate button
    $('#calc-bom-lines').on('click', function(){
      const produced = parseFloat($('#produced_count').val())||0;
      if (produced<=0) return alert('Enter valid quantity');

      // gather per-unit
      const lines = [];
      $('#bulk-materials-table tbody tr').each(function(){
        const idx = $(this).data('index');
        const compId = $(this).find('.bulk-component-id').val();
        const code   = $(this).find('.bulk-code-input').val().trim();
        const name   = $(this).find('.bulk-name-select')
                           .select2('data')[0]?.text;
        const bulk   = parseFloat(
                          $(this).find('.bulk-qty-input').val()
                        )||0;
        if (compId && bulk>0){
          lines.push({ id:compId, code, name, qty:bulk/produced });
        }
      });

      // populate main table
      const $body = $('#bom-lines-table tbody').empty();
      lines.forEach((ln,i)=>{
        $body.append(`
          <tr data-index="${i}">
            <td>
              <input type="text"
                     class="form-control bom-code-input"
                     data-index="${i}"
                     value="${ln.code}">
              <input type="hidden"
                     name="lines-${i}-component_id"
                     class="bom-component-id"
                     value="${ln.id}">
            </td>
            <td>
              <select name="lines-${i}-component_name"
                      class="form-control bom-name-select"
                      data-index="${i}"
                      style="width:100%">
                <option></option>
                <option value="${ln.id}" selected>
                  ${ln.name} (${ln.code})
                </option>
              </select>
            </td>
            <td>
              <input type="number" step="0.000000000001"
                     name="lines-${i}-quantity"
                     class="form-control bom-qty-input"
                     data-index="${i}"
                     value="${ln.qty.toFixed(4)}">
            </td>
            <td class="text-center">
              <button type="button"
                      class="btn btn-sm btn-danger remove-row"
                      data-index="${i}">✖</button>
            </td>
          </tr>`);
        initRow(i);
      });

      // close modal & clean backdrop
      $('#autoCalcModal').modal('hide');
      $('.modal-backdrop').remove();
      $('body').removeClass('modal-open');
    });


    // Re-initialize bulk-name selects on modal show
    $('#autoCalcModal').on('shown.bs.modal', function() {
      // For each bulk row, rerun our initBulkRow which sets up Select2
      $('#bulk-materials-table tbody tr').each(function(){
        const idx = $(this).data('index');
        initBulkRow(idx);
      });
      // Focus first code input
      $('#bulk-materials-table tbody tr:first .bulk-code-input').focus();
    });


    
  });


  </script>
{% endblock %}