@extends('layouts.app')
@section('title', $invoice->invoice_no)
@section('content')
<div class="d-flex flex-wrap justify-content-between gap-2 mb-3">
  <div><h1 class="h4 mb-0">{{ $invoice->invoice_no }} <span class="badge text-bg-{{ $invoice->statusColor() }} fs-6">{{ ucfirst($invoice->status) }}</span></h1>
    <div class="text-muted"><a href="{{ route('customers.show', $invoice->customer) }}">{{ $invoice->customer->name }}</a> &middot; {{ $invoice->issue_date->format('M j, Y') }}
      @if($invoice->job) &middot; Job <a href="{{ route('jobs.show', $invoice->job) }}">{{ $invoice->job->job_no }}</a>@endif</div></div>
  <div class="d-flex flex-wrap gap-2 align-items-start">
    <a href="{{ route('invoices.print', $invoice) }}" target="_blank" class="btn btn-primary"><i class="bi bi-printer"></i> Print invoice (A4)</a>
    <a href="{{ route('invoices.print', [$invoice, 'format'=>'thermal']) }}" target="_blank" class="btn btn-outline-primary">Print receipt (80mm)</a>
    @if(auth()->user()->isAdmin())<form method="post" action="{{ route('invoices.destroy', $invoice) }}" data-confirm="Delete this invoice? Parts go back to stock.">@csrf @method('DELETE')<button class="btn btn-outline-danger">Delete</button></form>@endif
  </div>
</div>

<div class="row g-3">
  <div class="col-lg-8">
    <div class="panel mb-3"><div class="panel-h">Items</div>
      <div class="table-responsive"><table class="table align-middle mb-0">
        <thead><tr><th>Description</th><th>Type</th><th class="text-end">Qty</th><th class="text-end">Price</th><th class="text-end">Total</th><th></th></tr></thead>
        <tbody>@forelse($invoice->items as $it)
          <tr><td>{{ $it->description }}</td><td>{{ ucfirst($it->type) }}</td><td class="text-end">{{ $it->qty }}</td><td class="text-end">@money($it->unit_price)</td><td class="text-end">@money($it->total)</td>
          <td class="text-end"><form method="post" action="{{ route('invoices.items.remove', [$invoice, $it]) }}" data-confirm="Remove this line?">@csrf @method('DELETE')<button class="btn btn-sm btn-outline-danger" aria-label="Remove"><i class="bi bi-x-lg"></i></button></form></td></tr>
        @empty<tr><td colspan="6" class="p-4 text-muted">No items yet. Add labour, a part, or another charge below.</td></tr>@endforelse</tbody></table></div>
      <div class="panel-b border-top">
        <form method="post" action="{{ route('invoices.items.add', $invoice) }}" class="row g-2">@csrf
          <div class="col-md-2"><label class="form-label small">Type</label><select name="type" id="itype" class="form-select"><option value="labor">Labour</option><option value="part">Part from stock</option><option value="other">Other</option></select></div>
          <div class="col-md-4" id="partbox" style="display:none"><label class="form-label small">Part</label>
            <select name="part_id" id="ipart" class="form-select"><option value="">Choose part...</option>@foreach($parts as $p)<option value="{{ $p->id }}" data-name="{{ $p->name }}" data-price="{{ $p->price }}">{{ $p->name }} ({{ $p->qty }} in stock)</option>@endforeach</select></div>
          <div class="col-md-4" id="descbox"><label class="form-label small">Description</label><input name="description" id="idesc" class="form-control" placeholder="e.g. Diagnostic and labour"></div>
          <div class="col-4 col-md-1"><label class="form-label small">Qty</label><input type="number" min="1" name="qty" value="1" class="form-control"></div>
          <div class="col-4 col-md-2"><label class="form-label small">Price</label><input type="number" step="0.01" min="0" name="unit_price" id="iprice" class="form-control"></div>
          <div class="col-4 col-md-1 d-flex align-items-end"><button class="btn btn-primary w-100">Add</button></div>
        </form>
      </div>
    </div>

    <div class="panel"><div class="panel-h">Payments</div>
      <div class="table-responsive"><table class="table align-middle mb-0"><thead><tr><th>Date</th><th>Method</th><th>Reference</th><th>Received by</th><th class="text-end">Amount</th><th></th></tr></thead>
        <tbody>@forelse($invoice->payments as $p)
          <tr><td>{{ $p->paid_at->format('M j, g:i A') }}</td><td>{{ $p->method }}</td><td>{{ $p->reference }}</td><td>{{ $p->receiver->name ?? '' }}</td><td class="text-end">@money($p->amount)</td>
          <td class="text-end">@if(auth()->user()->isAdmin())<form method="post" action="{{ route('invoices.payments.remove', [$invoice, $p]) }}" data-confirm="Remove this payment?">@csrf @method('DELETE')<button class="btn btn-sm btn-outline-danger"><i class="bi bi-x-lg"></i></button></form>@endif</td></tr>
        @empty<tr><td colspan="6" class="p-3 text-muted">No payments yet.</td></tr>@endforelse</tbody></table></div>
      @if($invoice->balance() > 0)
      <div class="panel-b border-top"><form method="post" action="{{ route('invoices.payments.add', $invoice) }}" class="row g-2">@csrf
        <div class="col-md-3"><label class="form-label small">Amount</label><input type="number" step="0.01" min="0.01" max="{{ $invoice->balance() }}" name="amount" value="{{ old('amount', $invoice->balance()) }}" class="form-control" required></div>
        <div class="col-md-3"><label class="form-label small">Method</label><select name="method" class="form-select">@foreach(config('hitek.payment_methods') as $m)<option>{{ $m }}</option>@endforeach</select></div>
        <div class="col-md-4"><label class="form-label small">Reference (optional)</label><input name="reference" class="form-control" placeholder="Cheque no, e-transfer ref..."></div>
        <div class="col-md-2 d-flex align-items-end"><button class="btn btn-copper w-100">Take payment</button></div>
      </form></div>@endif
    </div>
  </div>

  <div class="col-lg-4">
    <div class="panel"><div class="panel-h">Totals</div><div class="panel-b">
      <div class="d-flex justify-content-between"><span>Subtotal</span><span>@money($invoice->subtotal)</span></div>
      @if($invoice->discount > 0)<div class="d-flex justify-content-between"><span>Discount</span><span>-@money($invoice->discount)</span></div>@endif
      @if($invoice->tax_enabled)
        <div class="d-flex justify-content-between"><span>GST ({{ config('hitek.gst') }}%)</span><span>@money($invoice->gst_amount)</span></div>
        <div class="d-flex justify-content-between"><span>PST ({{ config('hitek.pst') }}%)</span><span>@money($invoice->pst_amount)</span></div>
      @endif
      <hr class="my-2"><div class="d-flex justify-content-between fs-5 fw-semibold"><span>Total</span><span>@money($invoice->total)</span></div>
      <div class="d-flex justify-content-between"><span>Paid</span><span>@money($invoice->paid)</span></div>
      <div class="d-flex justify-content-between fw-semibold {{ $invoice->balance() > 0 ? 'text-danger' : 'text-success' }}"><span>Balance due</span><span>@money($invoice->balance())</span></div>
      <hr>
      <form method="post" action="{{ route('invoices.update', $invoice) }}">@csrf @method('PUT')
        <label class="form-label small">Discount ({{ config('hitek.currency_symbol') }})</label><input type="number" step="0.01" min="0" name="discount" value="{{ $invoice->discount }}" class="form-control mb-2">
        <div class="form-check mb-2"><input class="form-check-input" type="checkbox" name="tax_enabled" value="1" id="tx" @checked($invoice->tax_enabled)><label class="form-check-label" for="tx">Charge GST + PST</label></div>
        <label class="form-label small">Notes on invoice</label><textarea name="notes" rows="2" class="form-control mb-2">{{ $invoice->notes }}</textarea>
        <button class="btn btn-outline-primary w-100">Save</button>
      </form>
    </div></div>
  </div>
</div>
@endsection
@push('scripts')
<script>
const t=document.getElementById('itype'),pb=document.getElementById('partbox'),db=document.getElementById('descbox'),ps=document.getElementById('ipart'),d=document.getElementById('idesc'),pr=document.getElementById('iprice');
t.addEventListener('change',()=>{const p=t.value==='part';pb.style.display=p?'':'none';db.className=p?'col-md-2':'col-md-4';});
ps.addEventListener('change',()=>{const o=ps.selectedOptions[0];if(o&&o.dataset.price){pr.value=o.dataset.price;d.value=o.dataset.name;}});
</script>
@endpush