@extends('master.app')
@section('title','Create Batch')

@section('body')
<main class="app-content">
  <div class="container-fluid">

    <div class="card">
      <div class="card-header d-flex align-items-center justify-content-between">
        <h5 class="mb-0">Create Production Batch</h5>
        <a href="{{ route('process-batches.index') }}" class="btn btn-secondary btn-sm">Back</a>
      </div>

      <div class="card-body">

        @if ($errors->any())
          <div class="alert alert-danger">
            <ul class="mb-0">
              @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
              @endforeach
            </ul>
          </div>
        @endif

        <form method="POST" action="{{ route('process-batches.store') }}" onsubmit="return validateBeforeSubmit();">
          @csrf

          {{-- Header --}}
          <div class="row">
            <div class="col-md-3 mb-2">
              <label>Date</label>
              <input type="date" name="date" class="form-control form-control-sm" value="{{ date('Y-m-d') }}" required>
            </div>

            <div class="col-md-3 mb-2">
              <label>Currency</label>
              <select id="currency_id" name="currency_id" class="form-control form-control-sm" required>
                <option value="">--select--</option>
                @foreach($currencies as $c)
                  <option value="{{ $c->id }}">{{ $c->title_en ?? $c->title_ps ?? $c->id }}</option>
                @endforeach
              </select>
            </div>

            <div class="col-md-2 mb-2">
              <label>Ex Rate</label>
              <input type="number" step="0.0001" name="ex_rate" class="form-control form-control-sm" value="1">
            </div>

            <div class="col-md-2 mb-2">
              <label>Location ID</label>
              <input type="number" id="location_id" name="location_id" class="form-control form-control-sm" placeholder="optional">
            </div>

            <div class="col-md-2 mb-2">
              <label>Produce SPI (optional)</label>
              <input type="number" step="0.01" name="produce_spi" class="form-control form-control-sm" placeholder="optional">
            </div>

            <div class="col-md-12 mb-2">
              <label>Notes</label>
              <input type="text" name="notes" class="form-control form-control-sm" placeholder="optional">
            </div>
          </div>

          <hr>

          {{-- RAW ITEMS --}}
          <div class="d-flex justify-content-between align-items-center mb-2">
            <h6 class="mb-0">Raw Items (consume) — Auto Preview</h6>
            <button type="button" class="btn btn-success btn-sm" onclick="addRawRow()">+ Add Raw</button>
          </div>

          <div class="table-responsive">
            <table class="table table-bordered table-sm" id="rawTable">
              <thead>
                <tr>
                  <th>Category</th>
                  <th>Sub Category</th>
                  <th>Unit (PUnit)</th>
                  <th width="140">Qty Used</th>
                  <th width="130">Available</th>
                  <th width="120">Avg CPI</th>
                  <th width="70">#</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <select name="raw[0][cat_id]" class="form-control form-control-sm raw-cat"
                            onchange="loadSubCats(this,'raw'); refreshRawRow(this);" required>
                      <option value="">--select--</option>
                      @foreach($categories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->title_en }}</option>
                      @endforeach
                    </select>
                  </td>

                  <td>
                    <select name="raw[0][scat_id]" class="form-control form-control-sm raw-sub"
                            onchange="refreshRawRow(this)">
                      <option value="">--optional--</option>
                    </select>
                  </td>

                  <td>
                    <select name="raw[0][unit_id]" class="form-control form-control-sm raw-unit"
                            onchange="refreshRawRow(this)" required>
                      <option value="">--select--</option>
                      @foreach($pUnits as $u)
                        <option value="{{ $u->id }}">{{ $u->title_en ?? $u->name ?? $u->title ?? $u->id }}</option>
                      @endforeach
                    </select>
                  </td>

                  <td>
                    <input type="number" step="0.01" name="raw[0][qty_used]" class="form-control form-control-sm raw-qty"
                           oninput="checkRawQty(this); validateBeforeSubmit();" required>
                    <small class="text-danger d-none raw-warn">Qty is more than available!</small>
                    <small class="text-danger d-none raw-notfound">Raw stock not found!</small>
                  </td>

                  <td class="text-center">
                    <span class="raw-avail badge badge-light" style="font-size:12px;">-</span>
                  </td>

                  <td class="text-center">
                    <span class="raw-avg badge badge-light" style="font-size:12px;">-</span>
                  </td>

                  <td class="text-center">
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)">x</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <hr>

          {{-- OUTPUTS --}}
          <div class="d-flex justify-content-between align-items-center mb-2">
            <h6 class="mb-0">Outputs (finished goods)</h6>
            <button type="button" class="btn btn-success btn-sm" onclick="addOutRow()">+ Add Output</button>
          </div>

          <div class="table-responsive">
            <table class="table table-bordered table-sm" id="outTable">
              <thead>
                <tr>
                  <th>Category</th>
                  <th>Sub Category</th>
                  <th>Unit (SUnit)</th>
                  <th>Weight (SWeight)</th>
                  <th>SKU</th>
                  <th>Min Qty</th>
                  <th width="140">Qty Produced</th>
                  <th width="120">SPI (opt)</th>
                  <th width="70">#</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <select name="outputs[0][cat_id]" class="form-control form-control-sm out-cat"
                            onchange="loadSubCats(this,'out')" required>
                      <option value="">--select--</option>
                      @foreach($categories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->title_en }}</option>
                      @endforeach
                    </select>
                  </td>

                  <td>
                    <select name="outputs[0][sub_cat_id]" class="form-control form-control-sm out-sub">
                      <option value="">--optional--</option>
                    </select>
                  </td>

                  <td>
                    <select name="outputs[0][unit_id]" class="form-control form-control-sm" required>
                      <option value="">--select--</option>
                      @foreach($sUnits as $u)
                        <option value="{{ $u->id }}">{{ $u->title_en ?? $u->name ?? $u->title ?? $u->id }}</option>
                      @endforeach
                    </select>
                  </td>

                  <td>
                    <select name="outputs[0][weight_id]" class="form-control form-control-sm">
                      <option value="">--optional--</option>
                      @foreach($weights as $w)
                        <option value="{{ $w->id }}">{{ $w->title_en ?? $w->name ?? $w->title ?? $w->id }}</option>
                      @endforeach
                    </select>
                  </td>

                  <td><input type="text" name="outputs[0][sku]" class="form-control form-control-sm" placeholder="optional"></td>
                  <td><input type="number" step="0.01" name="outputs[0][min_qty]" class="form-control form-control-sm" value="0"></td>
                  <td><input type="number" step="0.01" name="outputs[0][qty_produced]" class="form-control form-control-sm" required></td>
                  <td><input type="number" step="0.01" name="outputs[0][spi]" class="form-control form-control-sm" placeholder="optional"></td>

                  <td class="text-center">
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)">x</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="mt-3">
            <button id="saveBtn" class="btn btn-primary">Save Batch</button>
          </div>

        </form>

      </div>
    </div>

  </div>
</main>

<script>
  const subCatUrlTemplate = @json(route('p-sub-categories.byCat', ['cat_id' => '__ID__']));
  const rawPreviewUrl = @json(route('raw-stock.preview'));
</script>

<script>
let rawIndex = 1;
let outIndex = 1;

function removeRow(btn){
  const tr = btn.closest('tr');
  const tbody = tr.parentElement;
  if(tbody.querySelectorAll('tr').length === 1){
    alert('At least one row is required');
    return;
  }
  tr.remove();
  validateBeforeSubmit();
}

function addRawRow(){
  const tbody = document.querySelector('#rawTable tbody');
  const row = document.createElement('tr');
  row.innerHTML = `
    <td>
      <select name="raw[${rawIndex}][cat_id]" class="form-control form-control-sm raw-cat"
              onchange="loadSubCats(this,'raw'); refreshRawRow(this);" required>
        <option value="">--select--</option>
        @foreach($categories as $cat)
          <option value="{{ $cat->id }}">{{ $cat->title_en }}</option>
        @endforeach
      </select>
    </td>

    <td>
      <select name="raw[${rawIndex}][scat_id]" class="form-control form-control-sm raw-sub"
              onchange="refreshRawRow(this)">
        <option value="">--optional--</option>
      </select>
    </td>

    <td>
      <select name="raw[${rawIndex}][unit_id]" class="form-control form-control-sm raw-unit"
              onchange="refreshRawRow(this)" required>
        <option value="">--select--</option>
        @foreach($pUnits as $u)
          <option value="{{ $u->id }}">{{ $u->title_en ?? $u->name ?? $u->title ?? $u->id }}</option>
        @endforeach
      </select>
    </td>

    <td>
      <input type="number" step="0.01" name="raw[${rawIndex}][qty_used]" class="form-control form-control-sm raw-qty"
             oninput="checkRawQty(this); validateBeforeSubmit();" required>
      <small class="text-danger d-none raw-warn">Qty is more than available!</small>
      <small class="text-danger d-none raw-notfound">Raw stock not found!</small>
    </td>

    <td class="text-center"><span class="raw-avail badge badge-light" style="font-size:12px;">-</span></td>
    <td class="text-center"><span class="raw-avg badge badge-light" style="font-size:12px;">-</span></td>

    <td class="text-center">
      <button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)">x</button>
    </td>
  `;
  tbody.appendChild(row);
  rawIndex++;
}

function addOutRow(){
  const tbody = document.querySelector('#outTable tbody');
  const row = document.createElement('tr');
  row.innerHTML = `
    <td>
      <select name="outputs[${outIndex}][cat_id]" class="form-control form-control-sm out-cat"
              onchange="loadSubCats(this,'out')" required>
        <option value="">--select--</option>
        @foreach($categories as $cat)
          <option value="{{ $cat->id }}">{{ $cat->title_en }}</option>
        @endforeach
      </select>
    </td>

    <td>
      <select name="outputs[${outIndex}][sub_cat_id]" class="form-control form-control-sm out-sub">
        <option value="">--optional--</option>
      </select>
    </td>

    <td>
      <select name="outputs[${outIndex}][unit_id]" class="form-control form-control-sm" required>
        <option value="">--select--</option>
        @foreach($sUnits as $u)
          <option value="{{ $u->id }}">{{ $u->title_en ?? $u->name ?? $u->title ?? $u->id }}</option>
        @endforeach
      </select>
    </td>

    <td>
      <select name="outputs[${outIndex}][weight_id]" class="form-control form-control-sm">
        <option value="">--optional--</option>
        @foreach($weights as $w)
          <option value="{{ $w->id }}">{{ $w->title_en ?? $w->name ?? $w->title ?? $w->id }}</option>
        @endforeach
      </select>
    </td>

    <td><input type="text" name="outputs[${outIndex}][sku]" class="form-control form-control-sm" placeholder="optional"></td>
    <td><input type="number" step="0.01" name="outputs[${outIndex}][min_qty]" class="form-control form-control-sm" value="0"></td>
    <td><input type="number" step="0.01" name="outputs[${outIndex}][qty_produced]" class="form-control form-control-sm" required></td>
    <td><input type="number" step="0.01" name="outputs[${outIndex}][spi]" class="form-control form-control-sm" placeholder="optional"></td>

    <td class="text-center">
      <button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)">x</button>
    </td>
  `;
  tbody.appendChild(row);
  outIndex++;
}

function loadSubCats(selectEl, mode){
  const catId = selectEl.value;
  const tr = selectEl.closest('tr');
  const subSelect = (mode === 'raw') ? tr.querySelector('.raw-sub') : tr.querySelector('.out-sub');

  if(!subSelect) return;

  subSelect.innerHTML = `<option value="">Loading...</option>`;
  if(!catId){
    subSelect.innerHTML = `<option value="">--optional--</option>`;
    return;
  }

  const url = subCatUrlTemplate.replace('__ID__', catId);

  fetch(url)
    .then(r => r.json())
    .then(data => {
      let html = `<option value="">--optional--</option>`;
      data.forEach(s => {
        html += `<option value="${s.id}">${(s.title_en ?? ('Sub#'+s.id))}</option>`;
      });
      subSelect.innerHTML = html;

      // raw row: after sub loaded, refresh stock too
      if(mode === 'raw') refreshRowByTr(tr);
    })
    .catch(() => {
      subSelect.innerHTML = `<option value="">--optional--</option>`;
    });
}

/* ===========================
   RAW STOCK PREVIEW
=========================== */
function refreshAllRawRows(){
  document.querySelectorAll('#rawTable tbody tr').forEach(tr => refreshRowByTr(tr));
}

function refreshRawRow(el){
  const tr = el.closest('tr');
  refreshRowByTr(tr);
}

function refreshRowByTr(tr){
  const cat = tr.querySelector('.raw-cat')?.value || '';
  const scat = tr.querySelector('.raw-sub')?.value || '';
  const unit = tr.querySelector('.raw-unit')?.value || '';
  const currency = document.getElementById('currency_id')?.value || '';
  const location = document.getElementById('location_id')?.value || '';

  const availEl = tr.querySelector('.raw-avail');
  const avgEl = tr.querySelector('.raw-avg');

  tr.dataset.availableQty = '0';
  tr.dataset.found = '0';
  availEl.textContent = '-';
  avgEl.textContent = '-';

  const notFoundMsg = tr.querySelector('.raw-notfound');
  if(notFoundMsg) notFoundMsg.classList.add('d-none');

  if(!cat || !unit || !currency) { validateBeforeSubmit(); return; }

  const params = new URLSearchParams({
    cat_id: cat,
    unit_id: unit,
    currency_id: currency,
  });

  if(scat) params.append('scat_id', scat);
  if(location) params.append('location_id', location);

  fetch(`${rawPreviewUrl}?${params.toString()}`)
    .then(res => res.json())
    .then(data => {
      if(!data || !data.found){
        availEl.textContent = 'Not Found';
        avgEl.textContent = '-';
        tr.dataset.availableQty = '0';
        tr.dataset.found = '0';
        if(notFoundMsg) notFoundMsg.classList.remove('d-none');
        checkRawQty(tr.querySelector('.raw-qty'));
        validateBeforeSubmit();
        return;
      }

      const qty = Number(data.qty || 0);
      const avg = Number(data.avg_cpi || 0);

      availEl.textContent = qty.toFixed(2);
      avgEl.textContent = avg.toFixed(4);

      tr.dataset.availableQty = String(qty);
      tr.dataset.found = '1';

      checkRawQty(tr.querySelector('.raw-qty'));
      validateBeforeSubmit();
    })
    .catch(() => {
      availEl.textContent = 'Error';
      avgEl.textContent = '-';
      tr.dataset.availableQty = '0';
      tr.dataset.found = '0';
      validateBeforeSubmit();
    });
}

function checkRawQty(input){
  if(!input) return;
  const tr = input.closest('tr');
  const available = Number(tr.dataset.availableQty || 0);
  const used = Number(input.value || 0);

  const warn = tr.querySelector('.raw-warn');
  if(used > available && available > 0){
    warn.classList.remove('d-none');
    tr.classList.add('table-danger');
  } else {
    warn.classList.add('d-none');
    tr.classList.remove('table-danger');
  }
}

// ✅ block submit if any raw row not found or qty > available
function validateBeforeSubmit(){
  let ok = true;

  document.querySelectorAll('#rawTable tbody tr').forEach(tr => {
    const cat = tr.querySelector('.raw-cat')?.value || '';
    const unit = tr.querySelector('.raw-unit')?.value || '';
    const currency = document.getElementById('currency_id')?.value || '';

    const found = tr.dataset.found === '1';
    const available = Number(tr.dataset.availableQty || 0);
    const used = Number(tr.querySelector('.raw-qty')?.value || 0);

    if(cat && unit && currency && !found) ok = false;
    if(available > 0 && used > available) ok = false;
  });

  const btn = document.getElementById('saveBtn');
  if(btn) btn.disabled = !ok;

  return ok;
}

document.addEventListener('DOMContentLoaded', function(){
  const cur = document.getElementById('currency_id');
  const loc = document.getElementById('location_id');

  if(cur) cur.addEventListener('change', refreshAllRawRows);
  if(loc) loc.addEventListener('input', refreshAllRawRows);

  refreshAllRawRows();
  validateBeforeSubmit();
});
</script>
@endsection