@extends('layouts.app')
@section('title', __('purchases.add'))
@section('content')
<h5 class="fw-bold mb-3">{{ __('purchases.add') }}</h5>
<form method="POST" action="{{ route('purchases.store') }}">@csrf
<div class="card mb-3"><div class="card-body row g-3">
  <div class="col-md-3"><label class="form-label">{{ __('suppliers.supplier') }} *</label>
    <select name="supplier_id" class="form-select" required>
      @foreach($suppliers as $supplier)<option value="{{ $supplier->id }}">{{ $supplier->name }}</option>@endforeach
    </select></div>
  <div class="col-md-3"><label class="form-label">{{ __('app.branch') }} *</label>
    <select name="branch_id" class="form-select" required>
      @foreach($branches as $branch)<option value="{{ $branch->id }}">{{ $branch->name }}</option>@endforeach
    </select></div>
  <div class="col-md-3"><label class="form-label">{{ __('app.date') }} *</label><input type="date" name="date" value="{{ now()->toDateString() }}" class="form-control" required></div>
  <div class="col-md-3"><label class="form-label">{{ __('purchases.shipping') }}</label><input type="number" step="0.01" name="shipping" value="0" class="form-control"></div>
</div></div>

<div class="card mb-3"><div class="card-body">
  <div class="d-flex justify-content-between mb-2">
    <h6 class="fw-bold mb-0">{{ __('inventory.item') }}</h6>
    <button type="button" class="btn btn-sm btn-outline-primary" onclick="addRow()"><i class="bi bi-plus-lg"></i> {{ __('app.add') }}</button>
  </div>
  <div class="table-responsive">
  <table class="table align-middle" id="itemsTable">
    <thead><tr><th style="min-width:280px">{{ __('inventory.item') }}</th><th>{{ __('app.quantity') }}</th><th>{{ __('frames.purchase_price') }}</th><th>{{ __('app.tax') }} %</th><th></th></tr></thead>
    <tbody></tbody>
  </table>
  </div>
</div></div>

<div class="card mb-3"><div class="card-body row g-3">
  <div class="col-md-3"><label class="form-label">{{ __('app.discount') }}</label><input type="number" step="0.01" name="discount" value="0" class="form-control"></div>
  <div class="col-md-3"><label class="form-label">{{ __('app.paid') }}</label><input type="number" step="0.01" name="paid" value="0" class="form-control"></div>
  <div class="col-md-3"><label class="form-label">{{ __('treasury.account') }}</label>
    <select name="treasury_account_id" class="form-select"><option value="">—</option>
      @foreach($accounts as $account)<option value="{{ $account->id }}">{{ $account->name }}</option>@endforeach
    </select></div>
  <div class="col-md-3"><label class="form-label">{{ __('app.notes') }}</label><input name="notes" class="form-control"></div>
</div></div>

<button class="btn btn-primary px-4">{{ __('app.save') }}</button>
<a href="{{ route('purchases.index') }}" class="btn btn-outline-secondary">{{ __('app.back') }}</a>
</form>
@endsection
@push('scripts')
<script>
const products = [
  @foreach($frames as $frame){value:'frame:{{ $frame->id }}',label:@json($frame->display_name . ' — ' . $frame->barcode),cost:{{ (float) $frame->purchase_price }}},@endforeach
  @foreach($lenses as $lens){value:'lens:{{ $lens->id }}',label:@json($lens->display_name . ' — ' . $lens->barcode),cost:{{ (float) $lens->purchase_price }}},@endforeach
];
let idx = 0;
function addRow(){
  const tb = document.querySelector('#itemsTable tbody');
  const tr = document.createElement('tr');

  const tdItem = document.createElement('td');
  const sel = document.createElement('select');
  sel.name = `items[${idx}][item]`;
  sel.className = 'form-select form-select-sm';
  sel.required = true;
  products.forEach(p => {
    const o = document.createElement('option');
    o.value = p.value; o.textContent = p.label; o.dataset.cost = p.cost;
    sel.appendChild(o);
  });
  sel.addEventListener('change', () => {
    tr.querySelector('input.cost').value = sel.selectedOptions[0]?.dataset.cost ?? 0;
  });
  tdItem.appendChild(sel);

  const tdQty = document.createElement('td');
  tdQty.innerHTML = `<input type="number" name="items[${idx}][quantity]" value="1" min="1" class="form-control form-control-sm" required>`;

  const tdCost = document.createElement('td');
  tdCost.innerHTML = `<input type="number" step="0.01" name="items[${idx}][unit_cost]" value="${products[0]?.cost ?? 0}" class="form-control form-control-sm cost" required>`;

  const tdTax = document.createElement('td');
  tdTax.innerHTML = `<input type="number" step="0.01" name="items[${idx}][tax_rate]" value="0" class="form-control form-control-sm">`;

  const tdDel = document.createElement('td');
  tdDel.innerHTML = `<button type="button" class="btn btn-sm btn-outline-danger"><i class="bi bi-x-lg"></i></button>`;
  tdDel.querySelector('button').addEventListener('click', () => tr.remove());

  tr.append(tdItem, tdQty, tdCost, tdTax, tdDel);
  tb.appendChild(tr);
  idx++;
}
addRow();
</script>
@endpush