@extends('layouts.admin')
@section('title','Buat Invoice')
@section('content')
<div class="row justify-content-center"><div class="col-lg-9">
<div class="card">
  <div class="card-header">Form Invoice Baru</div>
  <div class="card-body">
    <form action="{{ route('admin.invoices.store') }}" method="POST" id="invoiceForm">@csrf
    <div class="row g-3">
      <div class="col-md-6">
        <label class="form-label fw-semibold">Klien *</label>
        <select name="client_id" class="form-select" required>
          <option value="">-- Pilih Klien --</option>
          @foreach($clients as $c)<option value="{{ $c->id }}" {{ request('client_id')==$c->id?'selected':'' }}>{{ $c->name }}</option>@endforeach
        </select>
      </div>
      <div class="col-md-3">
        <label class="form-label fw-semibold">Divisi *</label>
        <select name="division" class="form-select" required>
          @foreach(['JPN','FixLab','Havva'] as $d)<option value="{{ $d }}">{{ $d }}</option>@endforeach
        </select>
      </div>
      <div class="col-md-3">
        <label class="form-label fw-semibold">Tipe *</label>
        <select name="type" class="form-select" required>
          @foreach(['maintenance','extra_visit','work_order','project','other'] as $t)<option value="{{ $t }}">{{ strtoupper($t) }}</option>@endforeach
        </select>
      </div>
      <div class="col-md-4">
        <label class="form-label fw-semibold">Tanggal Invoice *</label>
        <input type="date" name="issue_date" class="form-control" value="{{ now()->format('Y-m-d') }}" required>
      </div>
      <div class="col-md-4">
        <label class="form-label fw-semibold">Jatuh Tempo *</label>
        <input type="date" name="due_date" class="form-control" value="{{ now()->addDays(14)->format('Y-m-d') }}" required>
      </div>
      <div class="col-md-4">
        <label class="form-label fw-semibold">PPN (%)</label>
        <input type="number" name="tax_percent" class="form-control" min="0" max="100" value="0" step="0.01">
      </div>
      <div class="col-md-3">
        <label class="form-label fw-semibold">Bulan Tagihan</label>
        <select name="billing_month" class="form-select">
          <option value="">—</option>
          @for($m=1;$m<=12;$m++)<option value="{{ $m }}">{{ date('F',mktime(0,0,0,$m,1)) }}</option>@endfor
        </select>
      </div>
      <div class="col-md-3">
        <label class="form-label fw-semibold">Tahun</label>
        <input type="number" name="billing_year" class="form-control" value="{{ now()->year }}">
      </div>
      <div class="col-12">
        <label class="form-label fw-semibold">Catatan</label>
        <textarea name="notes" class="form-control" rows="2"></textarea>
      </div>

      {{-- Items --}}
      <div class="col-12">
        <label class="form-label fw-semibold">Item Invoice *</label>
        <div id="itemsContainer">
          <div class="row g-2 mb-2 item-row align-items-end">
            <div class="col-md-6"><input type="text" name="items[0][description]" class="form-control form-control-sm" placeholder="Deskripsi item" required></div>
            <div class="col-md-2"><input type="number" name="items[0][qty]" class="form-control form-control-sm qty-input" placeholder="Qty" min="1" value="1" required></div>
            <div class="col-md-3"><input type="number" name="items[0][unit_price]" class="form-control form-control-sm price-input" placeholder="Harga satuan" min="0" required></div>
            <div class="col-md-1"><button type="button" class="btn btn-sm btn-outline-danger remove-item"><i class="fas fa-trash"></i></button></div>
          </div>
        </div>
        <button type="button" class="btn btn-sm btn-outline-primary mt-1" id="addItem"><i class="fas fa-plus me-1"></i>Tambah Item</button>
        <div class="mt-2 text-end fw-bold" id="totalPreview">Total: Rp 0</div>
      </div>

      <div class="col-12 d-flex gap-2 justify-content-end">
        <a href="{{ route('admin.invoices.index') }}" class="btn btn-secondary">Batal</a>
        <button type="submit" class="btn btn-primary"><i class="fas fa-save me-1"></i>Buat Invoice</button>
      </div>
    </div>
    </form>
  </div>
</div>
</div></div>
@endsection
@push('scripts')
<script>
let idx = 1;
document.getElementById('addItem').onclick = function() {
  const c = document.getElementById('itemsContainer');
  c.insertAdjacentHTML('beforeend', `<div class="row g-2 mb-2 item-row align-items-end">
    <div class="col-md-6"><input type="text" name="items[${idx}][description]" class="form-control form-control-sm" placeholder="Deskripsi item" required></div>
    <div class="col-md-2"><input type="number" name="items[${idx}][qty]" class="form-control form-control-sm qty-input" placeholder="Qty" min="1" value="1" required></div>
    <div class="col-md-3"><input type="number" name="items[${idx}][unit_price]" class="form-control form-control-sm price-input" placeholder="Harga satuan" min="0" required></div>
    <div class="col-md-1"><button type="button" class="btn btn-sm btn-outline-danger remove-item"><i class="fas fa-trash"></i></button></div>
  </div>`);
  idx++;
  bindEvents();
};
function bindEvents() {
  document.querySelectorAll('.remove-item').forEach(b => b.onclick = function() {
    if (document.querySelectorAll('.item-row').length > 1) { b.closest('.item-row').remove(); calcTotal(); }
  });
  document.querySelectorAll('.qty-input,.price-input').forEach(i => i.oninput = calcTotal);
}
function calcTotal() {
  let total = 0;
  document.querySelectorAll('.item-row').forEach(row => {
    const qty = parseFloat(row.querySelector('.qty-input').value)||0;
    const price = parseFloat(row.querySelector('.price-input').value)||0;
    total += qty * price;
  });
  const tax = parseFloat(document.querySelector('[name=tax_percent]').value)||0;
  total = total * (1 + tax/100);
  document.getElementById('totalPreview').textContent = 'Total: Rp ' + total.toLocaleString('id-ID');
}
document.querySelector('[name=tax_percent]').oninput = calcTotal;
bindEvents();
</script>
@endpush
