@php
  $editing = isset($product);
@endphp

<div class="row g-3">

  <div class="col-12">
    <div class="form-section"><div class="form-section-title"><i class="ph-duotone ph-cube"></i> Product Details</div></div>
  </div>

  <div class="col-md-12">
    <label class="form-label">Product name <span class="text-danger">*</span></label>
    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
           value="{{ old('name', $product->name ?? '') }}" required>
    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
  </div>

  <div class="col-md-4">
    <label class="form-label">Product unit <span class="text-danger">*</span></label>
    @php
      // GST-compliant Unit Quantity Codes (UQC) as per Tally/Indian GST system
      $gstUnits = [
        'BAG' => 'BAG - Bags',
        'BAL' => 'BAL - Bale',
        'BDL' => 'BDL - Bundles',
        'BKL' => 'BKL - Buckles',
        'BOU' => 'BOU - Billion of Units',
        'BOX' => 'BOX - Box',
        'BTL' => 'BTL - Bottles',
        'BUN' => 'BUN - Bunches',
        'CAN' => 'CAN - Cans',
        'CBM' => 'CBM - Cubic Meters',
        'CCM' => 'CCM - Cubic Centimeters',
        'CMS' => 'CMS - Centimeters',
        'CTN' => 'CTN - Cartons',
        'DOZ' => 'DOZ - Dozens',
        'DRM' => 'DRM - Drums',
        'GGK' => 'GGK - Great Gross',
        'GMS' => 'GMS - Grams',
        'GRS' => 'GRS - Gross',
        'GYD' => 'GYD - Gross Yards',
        'KGS' => 'KGS - Kilograms',
        'KLR' => 'KLR - Kilolitre',
        'KME' => 'KME - Kilometre',
        'LTR' => 'LTR - Litres',
        'MLT' => 'MLT - Millilitre',
        'MTR' => 'MTR - Meters',
        'MTS' => 'MTS - Metric Ton',
        'NOS' => 'NOS - Numbers',
        'OTH' => 'OTH - Others',
        'PAC' => 'PAC - Packs',
        'PCS' => 'PCS - Pieces',
        'PRS' => 'PRS - Pairs',
        'QTL' => 'QTL - Quintal',
        'ROL' => 'ROL - Rolls',
        'SET' => 'SET - Sets',
        'SQF' => 'SQF - Square Feet',
        'SQM' => 'SQM - Square Meters',
        'SQY' => 'SQY - Square Yards',
        'TBS' => 'TBS - Tablets',
        'TGM' => 'TGM - Ten Gross',
        'THD' => 'THD - Thousands',
        'TON' => 'TON - Tonnes',
        'TUB' => 'TUB - Tubes',
        'UGS' => 'UGS - US Gallons',
        'UNT' => 'UNT - Units',
        'YDS' => 'YDS - Yards',
      ];
    @endphp
    <select name="unit" class="form-select @error('unit') is-invalid @enderror" required>
      <option value="">-- Select Unit --</option>
      @foreach($gstUnits as $code => $label)
        <option value="{{ $code }}" @selected(old('unit', $product->unit ?? '') === $code)>{{ $label }}</option>
      @endforeach
    </select>
    @error('unit')<div class="invalid-feedback">{{ $message }}</div>@enderror
  </div>

  <div class="col-md-4">
    <label class="form-label">Product HSN <span class="text-danger">*</span></label>
    <input type="text" name="hsn" class="form-control @error('hsn') is-invalid @enderror"
           value="{{ old('hsn', $product->hsn ?? '') }}" required list="hsnList" maxlength="8" inputmode="numeric">
    @error('hsn')<div class="invalid-feedback">{{ $message }}</div>@enderror
    
    <datalist id="hsnList">
      @foreach($hsns as $hsn)
        <option value="{{ $hsn }}">
      @endforeach
    </datalist>

  </div>


  <div class="col-md-4">
    <label class="form-label">Product image</label>
    <input type="file" name="image" class="form-control @error('image') is-invalid @enderror" accept="image/*" capture="environment">
    @error('image')<div class="invalid-feedback">{{ $message }}</div>@enderror
    @if($editing && $product->image_path)
      <div class="mt-2">
        <img src="{{ asset('storage/'.$product->image_path) }}" alt="image" style="max-height:80px">
      </div>
    @endif
  </div>

  {{-- Opening Stock (only on create) --}}
  @if(!$editing)
  <div class="col-12">
    <div class="form-section"><div class="form-section-title"><i class="ph-duotone ph-warehouse"></i> Opening Stock</div></div>
  </div>
  <div class="col-12">
    <div class="card p-3 bg-light">
      <h6 class="mb-3">Opening Stock (per Company)</h6>
      <div class="table-responsive">
        <table class="table table-hover table-sm align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>Company</th>
              <th>Opening Date</th>
              <th class="text-end">Opening Qty</th>
            </tr>
          </thead>
          <tbody>
            @foreach($companies as $company)
              <tr>
                <td><strong>{{ $company->name }}</strong></td>
                <td>
                  <input type="date" name="opening_stocks[{{ $company->id }}][as_on_date]"
                         class="form-control form-control-sm"
                         value="{{ old('opening_stocks.'.$company->id.'.as_on_date', now()->toDateString()) }}">
                </td>
                <td>
                  <input type="number" name="opening_stocks[{{ $company->id }}][qty]"
                         class="form-control form-control-sm text-end"
                         step="0.001" min="0" placeholder="0"
                         value="{{ old('opening_stocks.'.$company->id.'.qty', '') }}">
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      <p class="text-muted small mt-2 mb-0">
        <i class="ph-duotone ph-info"></i> Enter opening stock quantity for each company. Leave empty or 0 to skip.
      </p>
    </div>
  </div>
  @endif

  {{-- Pricing & Tax --}}
  <div class="col-12">
    <div class="form-section"><div class="form-section-title"><i class="ph-duotone ph-currency-inr"></i> Pricing & Tax</div></div>
  </div>

  <div class="col-md-4">
    <label class="form-label">Cost Price</label>
    <input type="number" step="0.01" min="0" name="mrp" class="form-control @error('mrp') is-invalid @enderror"
           value="{{ old('mrp', $product->mrp ?? '') }}" placeholder="0.00">
    @error('mrp')<div class="invalid-feedback">{{ $message }}</div>@enderror
  </div>

  <div class="col-12">
    <div class="d-flex justify-content-between align-items-center">
      <label class="form-label mb-0">Tax percentage (with start date)</label>
      <button class="btn btn-outline-secondary btn-sm" type="button" id="addTax">+ Add tax</button>
    </div>

    <div id="tax-wrapper" class="mt-2"></div>
    @error('taxes')<div class="text-danger small">{{ $message }}</div>@enderror
  </div>

</div>

@push('scripts')
<script>
(function(){
  let idx = 0;
  const taxWrapper = document.getElementById('tax-wrapper');
  const addTaxBtn  = document.getElementById('addTax');

  const oldTaxes = @json(old('taxes', ($editing ? $product->taxRates->map(fn($t)=>[
    'starts_at'=>$t->starts_at?->format('Y-m-d'),
    'percentage'=>$t->percentage
  ])->values() : [])));

  function taxRow(starts='', pct=''){
    idx++;
    return `
      <div class="row g-2 align-items-end tax-row mb-1">
        <div class="col-md-4">
          <label class="form-label">Starts at</label>
          <input type="date" name="taxes[${idx}][starts_at]" class="form-control" value="${starts}">
        </div>
        <div class="col-md-4">
          <label class="form-label">Tax %</label>
          <input type="number" step="0.01" min="0" max="100" name="taxes[${idx}][percentage]" class="form-control" value="${pct}">
        </div>
        <div class="col-md-2">
          <button type="button" class="btn btn-outline-danger remove-tax">Remove</button>
        </div>
      </div>`;
  }

  function addTax(starts='', pct=''){ taxWrapper.insertAdjacentHTML('beforeend', taxRow(starts, pct)); }

  addTaxBtn?.addEventListener('click', ()=> addTax('{{ now()->toDateString() }}', '18'));

  taxWrapper.addEventListener('click', e=>{
    if(e.target.classList.contains('remove-tax')) e.target.closest('.tax-row').remove();
  });

  // restore old / prefill edit / default one row on create
  if(Array.isArray(oldTaxes) && oldTaxes.length) {
    oldTaxes.forEach(r => addTax(r.starts_at || '', r.percentage ?? ''));
  } else if(!@json($editing)) {
    addTax('{{ now()->toDateString() }}', '18');
  }
})();
</script>
@endpush