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

{% block title %}Variant Stock Report{% endblock %}
{% block heading %}Variant Stock Report{% endblock %}

{% block extra_css %}
  {# Select2 CSS #}

  <style>
    .select2-container--default .select2-selection--single {
      height: calc(1.5em + .5rem + 2px);
      padding: .25rem .5rem;
      font-size: .875rem;
      line-height: 1.5;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
      line-height: 1.5;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
      height: calc(1.5em + .5rem + 2px);
      right: .25rem;
    }
  </style>
{% endblock %}

{% block content %}
<div class="container-fluid">

  <!-- Filters -->
  <div class="card mb-3 shadow-sm">
    <div class="card-body">
      <div class="form-row align-items-end">
        <div class="form-group col-md-3">
          <label class="mb-1">By Product Code</label>
          <input type="text" class="form-control form-control-sm" id="filter_code" placeholder="e.g. 1001">
        </div>

        <div class="form-group col-md-3">
          <label class="mb-1">By Product Name</label>
          <!-- CHANGED: input -> select (Select2) -->
          <select id="filter_name" class="form-control form-control-sm" style="width:100%;">
            <!-- Select2 will populate dynamically -->
          </select>
        </div>

        <div class="form-group col-md-2">
          <label class="mb-1">SpecTerm A</label>
          <select class="form-control form-control-sm" id="filter_spec_a" disabled>
            <option value="">All</option>
          </select>
        </div>
        <div class="form-group col-md-2">
          <label class="mb-1">SpecTerm B</label>
          <select class="form-control form-control-sm" id="filter_spec_b" disabled>
            <option value="">All</option>
          </select>
        </div>

        <div class="form-group col-md-2">
          <div class="custom-control custom-checkbox mt-4">
            <input type="checkbox" class="custom-control-input" id="chk_serials" disabled>
            <label class="custom-control-label" for="chk_serials">Show Serials</label>
          </div>
        </div>
      </div>

      <div class="d-flex align-items-center">
        <button class="btn btn-sm btn-primary" id="btnLoad">Load</button>
        <button class="btn btn-sm btn-light ml-2" id="btnReset">Reset</button>
        <div class="ml-3 small text-muted">
          <span id="resolved_info"></span>
        </div>
      </div>
    </div>
  </div>

  <!-- Variants Table -->
  <div class="card shadow-sm">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-sm table-striped mb-0" id="variantsTable">
          <thead class="thead-light">
            <tr>
              <th>SKU Code</th>
              <th>Default</th>
              <th>Rate</th>
              <th>Spec A</th>
              <th>Spec B</th>
              <th class="text-right">On Hand</th>
              <th class="text-right">Expired</th>
              <th class="text-right">Bonus</th>
            </tr>
          </thead>
          <tbody></tbody>
          <tfoot>
            <tr class="font-weight-bold">
              <td colspan="5" class="text-right">Σ On Hand</td>
              <td class="text-right" id="sum_on_hand">0</td>
              <td></td><td></td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>

  <!-- Serials Panel -->
  <div class="card shadow-sm mt-3" id="serialsPanel" style="display:none;">
    <div class="card-header d-flex justify-content-between align-items-center py-2">
      <div><strong>Serials</strong></div>
      <div class="form-inline">
        <label class="mr-2 mb-0 small">Status</label>
        <select class="form-control form-control-sm mr-2" id="serial_status">
          <option value="">All</option>
          <option value="in_stock">in_stock</option>
          <option value="reserved">reserved</option>
          <option value="sold">sold</option>
          <option value="returned_to_stock">returned_to_stock</option>
          <option value="returned_to_supplier">returned_to_supplier</option>
          <option value="lost">lost</option>
          <option value="damaged">damaged</option>
        </select>
        <input type="text" class="form-control form-control-sm mr-2" id="serial_q" placeholder="Search IMEI...">
        <select class="form-control form-control-sm mr-2" id="serial_page_size">
          <option>25</option><option selected>50</option><option>100</option><option>200</option>
        </select>
        <button class="btn btn-sm btn-outline-secondary" id="btnSerialRefresh">Refresh</button>
      </div>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-sm table-striped mb-0" id="serialsTable">
          <thead class="thead-light">
            <tr>
              <th>Serial No</th>
              <th>Status</th>
              <th>Variant SKU</th>
              <th>Spec A</th>
              <th>Spec B</th>
              <th>Received At</th>
              <th>Sold At</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
      <div class="d-flex justify-content-between align-items-center p-2">
        <div class="small text-muted"><span id="serials_count">0</span> serial(s)</div>
        <div id="serials_pager" class="btn-group btn-group-sm" role="group"></div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block javascripts %}
  {# Select2 JS (jQuery dependency) #}


  <script>
  (function(){
    // URLs (namespaced)
    const URL_OPTIONS = "{% url 'reports:variant_stock_options' %}";
    const URL_TABLE   = "{% url 'reports:variant_stock_table' %}";
    const URL_SERIALS = "{% url 'reports:variant_stock_serials' %}";
    const URL_PRODUCTS_SEARCH = "{% url 'products:get_products' %}";

    // Elements
    const elCode   = document.getElementById('filter_code');
    const elA      = document.getElementById('filter_spec_a');
    const elB      = document.getElementById('filter_spec_b');
    const elChkSer = document.getElementById('chk_serials');
    const btnLoad  = document.getElementById('btnLoad');
    const btnReset = document.getElementById('btnReset');
    const infoSpan = document.getElementById('resolved_info');

    const tblBody  = document.querySelector('#variantsTable tbody');
    const sumOnHand= document.getElementById('sum_on_hand');

    const panelSer = document.getElementById('serialsPanel');
    const serBody  = document.querySelector('#serialsTable tbody');
    const serCount = document.getElementById('serials_count');
    const serPager = document.getElementById('serials_pager');
    const serStatus= document.getElementById('serial_status');
    const serQ     = document.getElementById('serial_q');
    const serSize  = document.getElementById('serial_page_size');
    const btnSerRef= document.getElementById('btnSerialRefresh');

    // State
    let currentProduct = null; // {db_id, prod_id, name, code, is_serial_tracked}
    let currentPage = 1;

    function getCookie(name){
      const v = `; ${document.cookie}`;
      const parts = v.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
      return "";
    }

    function qs(params){
      return Object.keys(params).map(k=>`${encodeURIComponent(k)}=${encodeURIComponent(params[k])}`).join('&');
    }

    function setSelectOptions(sel, items){
      sel.innerHTML = `<option value="">All</option>` + items.map(x=>`<option value="${x.id}">${x.name}</option>`).join('');
      sel.disabled = false;
    }

    function renderRows(items){
      if(!items || !items.length){
        tblBody.innerHTML = `<tr><td colspan="8" class="text-center text-muted p-3">No variants found.</td></tr>`;
        sumOnHand.textContent = "0";
        return;
      }
      tblBody.innerHTML = items.map(r=>`
        <tr>
          <td>${r.sku_code}</td>
          <td>${r.default_status ? 'Yes':'No'}</td>
          <td>${r.rate}</td>
          <td>${r.variant_spec_a || ''}</td>
          <td>${r.variant_spec_b || ''}</td>
          <td class="text-right">${r.on_hand_stock}</td>
          <td class="text-right">${r.expired_stock}</td>
          <td class="text-right">${r.bonus_stock}</td>
        </tr>
      `).join('');
    }

    function renderSerials(items){
      if(!items || !items.length){
        serBody.innerHTML = `<tr><td colspan="7" class="text-center text-muted p-3">No serials.</td></tr>`;
        return;
      }
      serBody.innerHTML = items.map(s=>`
        <tr>
          <td>${s.serial_no}</td>
          <td>${s.status}</td>
          <td>${s.variant_sku || ''}</td>
          <td>${s.spec_a || ''}</td>
          <td>${s.spec_b || ''}</td>
          <td>${s.received_at || ''}</td>
          <td>${s.sold_at || ''}</td>
        </tr>
      `).join('');
    }

    function renderPager(page, pages){
      serPager.innerHTML = '';
      if (pages <= 1) return;
      const makeBtn = (p, label, active=false)=> {
        const b = document.createElement('button');
        b.className = 'btn btn-outline-secondary' + (active?' active':'');
        b.textContent = label;
        b.addEventListener('click', ()=>{ loadSerials(p); });
        return b;
      };
      serPager.appendChild(makeBtn(Math.max(1, page-1), '«'));
      for(let i=1;i<=pages;i++){
        serPager.appendChild(makeBtn(i, String(i), i===page));
      }
      serPager.appendChild(makeBtn(Math.max(1, Math.min(pages, page+1)), '»'));
    }

    function loadOptions(params){
      fetch(`${URL_OPTIONS}?${qs(params)}`)
        .then(r=>r.json()).then(j=>{
          if(!j.ok){ alert(j.error || 'Product not found'); return; }
          currentProduct = j.product;
          infoSpan.textContent = `Product: ${currentProduct.name} [${currentProduct.code}] (prod_id=${currentProduct.prod_id})`;
          setSelectOptions(elA, j.spec_a || []);
          setSelectOptions(elB, j.spec_b || []);

          // enable/disable serials checkbox
          elChkSer.checked = false;
          elChkSer.disabled = !currentProduct.is_serial_tracked;
          panelSer.style.display = 'none';

          loadVariants(); // initial table
        }).catch(()=> alert('Failed to resolve product/options'));
    }

    function loadVariants(){
      if(!currentProduct){ return; }
      const params = {
        prod_id: currentProduct.prod_id,
        spec_a_id: elA.value || '',
        spec_b_id: elB.value || ''
      };
      fetch(`${URL_TABLE}?${qs(params)}`)
        .then(r=>r.json()).then(j=>{
          if(!j.ok){ alert(j.error || 'Load failed'); return; }
          renderRows(j.items || []);
          sumOnHand.textContent = (j.sum_on_hand || 0);
          if(elChkSer.checked) loadSerials(1);
        });
    }

    function loadSerials(page){
      if(!currentProduct){ return; }
      currentPage = page || 1;
      const params = {
        prod_id: currentProduct.prod_id,
        spec_a_id: elA.value || '',
        spec_b_id: elB.value || '',
        status: serStatus.value || '',
        q: serQ.value || '',
        page: currentPage,
        page_size: serSize.value || '50'
      };
      fetch(`${URL_SERIALS}?${qs(params)}`)
        .then(r=>r.json()).then(j=>{
          if(!j.ok){ alert(j.error || 'Failed to load serials'); return; }
          if(!j.tracked){
            panelSer.style.display = 'none';
            return;
          }
          panelSer.style.display = elChkSer.checked ? 'block' : 'none';
          renderSerials(j.items || []);
          serCount.textContent = j.total || 0;
          renderPager(j.page || 1, j.pages || 1);
        });
    }

    // INIT: Select2 for product name
    $(function(){
      const $sel = $('#filter_name').select2({
        theme: 'default',
        placeholder: 'Search product name…',
        allowClear: true,
        minimumInputLength: 1,
        ajax: {
          url: URL_PRODUCTS_SEARCH,
          type: 'POST',
          dataType: 'json',
          delay: 250,
          headers: {
            'X-CSRFToken': getCookie('csrftoken')
          },
          data: function (params) {
            return { term: params.term || '' };
          },
          processResults: function (data) {
            // your get_products_ajax_view returns list of dicts with id, text, product_code etc.
            const results = (data || []).map(function(it){
              return {
                id: it.id,
                text: it.text,
                product_code: it.product_code || ''
              };
            });
            return { results: results };
          },
          cache: true
        }
      });

      // On select → set code field and auto-load by code
      $sel.on('select2:select', function(e){
        const d = e.params.data || {};
        if (d.product_code){
          elCode.value = d.product_code;
          // Resolve and load immediately by code (most precise)
          loadOptions({ code: d.product_code });
        } else if (d.text) {
          // Fallback: resolve by name if code missing
          loadOptions({ name: d.text });
        }
      });

      // On clear → clear code and reset view
      $sel.on('select2:clear', function(){
        elCode.value = '';
      });
    });

    // Load button: prefer code; else selected name; else raw inputs
    btnLoad.addEventListener('click', function(){
      const params = {};
      const code = (elCode.value || '').trim();

      if (code) {
        params.code = code;
        loadOptions(params);
        return;
      }

      // If something is selected in select2, use its data
      const sel = $('#filter_name').select2('data');
      if (sel && sel[0]) {
        const d = sel[0];
        if (d.product_code) {
          loadOptions({ code: d.product_code });
          return;
        } else if (d.text) {
          loadOptions({ name: d.text });
          return;
        }
      }

      alert('Enter Product Code or choose a Product Name from the dropdown.');
    });

    btnReset.addEventListener('click', function(){
      elCode.value = '';
      $('#filter_name').val(null).trigger('change');

      elA.innerHTML = `<option value="">All</option>`; elA.disabled = true;
      elB.innerHTML = `<option value="">All</option>`; elB.disabled = true;
      elChkSer.checked = false; elChkSer.disabled = true;
      infoSpan.textContent = '';
      tblBody.innerHTML = '';
      sumOnHand.textContent = '0';
      panelSer.style.display = 'none';
      currentProduct = null;
    });

    elA.addEventListener('change', function(){ if(currentProduct) { loadVariants(); } });
    elB.addEventListener('change', function(){ if(currentProduct) { loadVariants(); } });

    elChkSer.addEventListener('change', function(){
      if(!currentProduct){ this.checked = false; return; }
      if(!currentProduct.is_serial_tracked){
        this.checked = false; return;
      }
      panelSer.style.display = this.checked ? 'block' : 'none';
      if (this.checked){ loadSerials(1); }
    });

    btnSerRef.addEventListener('click', function(){ if (elChkSer.checked) loadSerials(currentPage || 1); });
    serStatus.addEventListener('change', function(){ if (elChkSer.checked) loadSerials(1); });
    serQ.addEventListener('keyup', function(e){ if (e.key === 'Enter' && elChkSer.checked) loadSerials(1); });
    serSize.addEventListener('change', function(){ if (elChkSer.checked) loadSerials(1); });

    // Preload by ?prod_id= if server provided
    const INIT_PROD_ID = "{{ init_prod_id|default:'' }}";
    const INIT_NAME = "{{ init_product_name|default:'' }}";
    const INIT_CODE = "{{ init_product_code|default:'' }}";
    if (INIT_PROD_ID){
      loadOptions({prod_id: INIT_PROD_ID});
    } else if (INIT_CODE){
      elCode.value = INIT_CODE;
    } else if (INIT_NAME){
      // optional: pre-fill select2 search box (not selecting)
    }
  })();
  </script>
{% endblock %}