@extends('master.app')
@section('title', 'Stock')

@section('body')
<main class="app-content">
  <div class="card">
    <div class="card-header">
      <div class="d-flex align-items-center justify-content-between">
        <h4 class="mb-0">Edit Raw Material Stock</h4>
        <a href="{{ route('row_stock.index') }}" class="btn btn-secondary btn-sm">Back</a>
      </div>

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

    <div class="card-body">
      <form action="{{ route('row_stock.update', $stock->id) }}" method="POST">
        @csrf
        @method('PUT')

        <div class="row">

          <div class="col-md-4 mt-3">
            <label class="small text-muted">Category</label>
            <select id="cat_id" class="form-control select2 @error('cat_id') is-invalid @enderror" required name="cat_id">
              <option value="">Choose Category</option>
              @foreach ($categories as $row)
                <option value="{{ $row->id }}" {{ (old('cat_id',$stock->cat_id)==$row->id)?'selected':'' }}>
                  {{ $row->title_ps ?? $row->title_en }}
                </option>
              @endforeach
            </select>
            @error('cat_id') <span class="invalid-feedback"><strong>{{ $message }}</strong></span> @enderror
          </div>

          <div class="col-md-4 mt-3">
            <label class="small text-muted">Sub Category (optional)</label>
            <select id="scat_id" class="form-control select2 @error('scat_id') is-invalid @enderror" name="scat_id">
              <option value="">Choose Sub Category</option>
              {{-- will be loaded by JS --}}
            </select>
          </div>

          <div class="col-md-4 mt-3">
            <label class="small text-muted">Unit</label>
            <select id="unit_id" class="form-control select2 @error('unit_id') is-invalid @enderror" required name="unit_id">
              <option value="">Choose Unit Type</option>
              @foreach ($units as $row)
                <option value="{{ $row->id }}" {{ (old('unit_id',$stock->unit_id)==$row->id)?'selected':'' }}>
                  {{ $row->title_ps ?? $row->title_en }}
                </option>
              @endforeach
            </select>
            @error('unit_id') <span class="invalid-feedback"><strong>{{ $message }}</strong></span> @enderror
          </div>

          <div class="col-md-4 mt-3">
            <label class="small text-muted">Currency</label>
            <select id="currency_id" class="form-control select2 @error('currency_id') is-invalid @enderror" required name="currency_id">
              <option value="">Choose Currency</option>
              @foreach ($currencies as $row)
                <option value="{{ $row->id }}" {{ (old('currency_id',$stock->currency_id)==$row->id)?'selected':'' }}>
                  {{ $row->title_ps ?? $row->title_en }}
                </option>
              @endforeach
            </select>
            @error('currency_id') <span class="invalid-feedback"><strong>{{ $message }}</strong></span> @enderror
          </div>

          <div class="col-md-4 mt-3">
            <label class="small text-muted">Location (optional)</label>
            <select id="location_id" class="form-control select2" name="location_id">
              <option value="">No Location</option>
              {{-- که location table لرې، دلته foreach کړه --}}
              @if(old('location_id', $stock->location_id) !== null && old('location_id', $stock->location_id) !== '')
                <option value="{{ old('location_id', $stock->location_id) }}" selected>
                  Loc #{{ old('location_id', $stock->location_id) }}
                </option>
                <option value="1">A</option>
                <option value="2">B</option>
              @endif
            </select>
          </div>

          <div class="col-md-4 mt-3">
            <label class="small text-muted">Preview</label>
            <div class="border rounded p-2" style="min-height:42px">
              <span class="text-muted small">Available:</span>
              <strong id="pv_qty">—</strong>
              <span class="mx-2">|</span>
              <span class="text-muted small">Avg CPI:</span>
              <strong id="pv_avg">—</strong>
              <span class="mx-2">|</span>
              <span class="text-muted small">Total:</span>
              <strong id="pv_total">—</strong>
            </div>
            <small id="pv_msg" class="text-muted"></small>
          </div>

          <div class="col-md-6 mt-3">
            <div class="form-outline mb-4">
              <input type="number" step="0.01" id="qty" name="qty" required value="{{ old('qty',$stock->qty) }}" class="form-control" />
              <label class="form-label" for="qty">QTY</label>
            </div>
          </div>

          <div class="col-md-6 mt-3">
            <div class="form-outline mb-4">
              <input type="number" step="0.01" id="cpi" name="cpi" required value="{{ old('cpi',$stock->cpi) }}" class="form-control" />
              <label class="form-label" for="cpi">Cost Price (CPI)</label>
            </div>
          </div>

          <div class="col-md-6 mt-3">
            <div class="form-outline mb-4">
              <input type="number" step="0.01" id="spi" name="spi" value="{{ old('spi',$stock->spi) }}" class="form-control" />
              <label class="form-label" for="spi">Sale Price (SPI) (optional)</label>
            </div>
          </div>

        </div>

        <button type="submit" class="btn btn-primary btn-rounded mb-4">Update</button>
      </form>
    </div>
  </div>
</main>
@endsection

@section('pageJs')
<script type="text/javascript">
  $(".app-menu").removeClass("active");
  $("#nav_stocki").addClass("active");
  $("#stocki").addClass("is-expanded");
  $("#row_materials").addClass("active");

  function formatNum(n, d=2){
    n = parseFloat(n || 0);
    return n.toLocaleString(undefined,{minimumFractionDigits:d, maximumFractionDigits:d});
  }

  const initialScatId = @json(old('scat_id', $stock->scat_id));
  const initialCatId  = @json(old('cat_id', $stock->cat_id));

  async function loadSubCats(catId, selected=null){
    const $sc = $('#scat_id');
    $sc.html(`<option value="">Loading...</option>`);
    if(!catId){
      $sc.html(`<option value="">Choose Sub Category</option>`);
      $sc.trigger('change.select2');
      return;
    }

    try{
      const url = `{{ route('stock.subcats', ':id') }}`.replace(':id', catId);
      const res = await fetch(url);
      const data = await res.json();

      let html = `<option value="">Choose Sub Category</option>`;
      data.forEach(s => {
        const sel = (String(s.id) === String(selected)) ? 'selected' : '';
        html += `<option value="${s.id}" ${sel}>${s.title_ps ?? s.title_en ?? ('Sub#'+s.id)}</option>`;
      });

      // allow NULL option
      if(selected === null || selected === '' || selected === 'null'){
        // nothing
      }

      $sc.html(html);
      $sc.trigger('change.select2');
    }catch(e){
      $sc.html(`<option value="">Choose Sub Category</option>`);
      $sc.trigger('change.select2');
    }
  }

  let previewTimer = null;
  function previewStock(){
    clearTimeout(previewTimer);
    previewTimer = setTimeout(async () => {
      const payload = {
        cat_id: $('#cat_id').val(),
        scat_id: $('#scat_id').val(),
        unit_id: $('#unit_id').val(),
        currency_id: $('#currency_id').val(),
        location_id: $('#location_id').val(),
      };

      if(!payload.cat_id || !payload.unit_id || !payload.currency_id){
        $('#pv_qty').text('—'); $('#pv_avg').text('—'); $('#pv_total').text('—');
        $('#pv_msg').text('');
        return;
      }

      $('#pv_msg').text('Checking stock...');
      try{
        const qs = new URLSearchParams(payload).toString();
        const res = await fetch(`{{ route('row_stock.preview') }}?`+qs);
        const d = await res.json();

        if(d.ok && d.found){
          $('#pv_qty').text(formatNum(d.qty,2));
          $('#pv_avg').text(formatNum(d.avg_cpi,4));
          $('#pv_total').text(formatNum(d.total_cost,2));
          $('#pv_msg').text('Matched stock row found ✅');
        }else{
          $('#pv_qty').text('0.00');
          $('#pv_avg').text('0.0000');
          $('#pv_total').text('0.00');
          $('#pv_msg').text('No matching stock row.');
        }
      }catch(e){
        $('#pv_msg').text('Preview error');
      }
    }, 250);
  }

  // events
  $(document).on('change', '#cat_id', function(){
    loadSubCats($(this).val(), null);
    previewStock();
  });

  $(document).on('change', '#scat_id,#unit_id,#currency_id,#location_id', function(){
    previewStock();
  });

  // init subcats and preview
  (async function init(){
    await loadSubCats(initialCatId, initialScatId);
    previewStock();
  })();
</script>
@endsection