<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<style>
* { margin:0; padding:0; box-sizing:border-box; font-family: 'DejaVu Sans', sans-serif; }
body { font-size: 12px; color: #1a1a1a; padding: 30px; }
.header { display:flex; justify-content:space-between; border-bottom:3px solid #1a56db; padding-bottom:16px; margin-bottom:20px; }
.company-info h2 { font-size:18px; font-weight:700; color:#1a56db; }
.company-info p { font-size:11px; color:#555; margin-top:2px; }
.logo { max-height:60px; }
.invoice-meta { text-align:right; }
.invoice-meta .inv-num { font-size:20px; font-weight:700; color:#1a56db; }
.invoice-meta .badge { background:#1a56db; color:#fff; padding:2px 8px; border-radius:4px; font-size:10px; }
.bill-section { display:flex; justify-content:space-between; margin-bottom:24px; }
.bill-to h4 { font-size:11px; text-transform:uppercase; color:#888; margin-bottom:4px; }
.bill-to p { font-size:12px; }
.bill-to .name { font-weight:700; font-size:14px; }
table { width:100%; border-collapse:collapse; margin-bottom:16px; }
thead th { background:#1a56db; color:#fff; padding:8px 10px; text-align:left; font-size:11px; }
tbody td { padding:8px 10px; border-bottom:1px solid #e5e7eb; font-size:11px; }
tbody tr:nth-child(even) td { background:#f8fafc; }
tfoot td { padding:6px 10px; font-size:11px; }
tfoot tr.total td { font-size:13px; font-weight:700; border-top:2px solid #1a56db; }
.text-end { text-align:right; }
.text-center { text-align:center; }
.bank-info { background:#f0f7ff; border:1px solid #bfdbfe; border-radius:6px; padding:12px 16px; margin-top:16px; }
.bank-info h4 { font-size:11px; text-transform:uppercase; color:#1a56db; margin-bottom:6px; }
.bank-info p { font-size:11px; }
.footer { margin-top:24px; border-top:1px solid #e5e7eb; padding-top:12px; font-size:10px; color:#888; text-align:center; }
</style>
</head>
<body>
<div class="header">
  <div class="company-info">
    @if($setting->logo_path)<img src="{{ public_path('storage/'.$setting->logo_path) }}" class="logo" alt="Logo">@endif
    <h2>{{ $setting->company_name ?? 'JPN Helpdesk' }}</h2>
    <p>{{ $setting->address }}</p>
    <p>Telp: {{ $setting->phone }} | Email: {{ $setting->email }}</p>
  </div>
  <div class="invoice-meta">
    <div class="inv-num">INVOICE</div>
    <div>{{ $invoice->invoice_number }}</div>
    <div class="mt-2">
      <span class="badge">{{ strtoupper($invoice->division) }}</span>
    </div>
  </div>
</div>

<div class="bill-section">
  <div class="bill-to">
    <h4>Tagihan Kepada</h4>
    <p class="name">{{ $invoice->client->name }}</p>
    <p>{{ $invoice->client->company_name }}</p>
    <p>{{ $invoice->client->address }}</p>
    <p>{{ $invoice->client->email }}</p>
  </div>
  <div style="text-align:right">
    <table style="width:auto;margin-left:auto">
      <tr><td style="padding:3px 8px;color:#888">Tanggal Invoice:</td><td style="padding:3px 8px;font-weight:600">{{ $invoice->issue_date->format('d/m/Y') }}</td></tr>
      <tr><td style="padding:3px 8px;color:#888">Jatuh Tempo:</td><td style="padding:3px 8px;font-weight:600;color:#dc2626">{{ $invoice->due_date->format('d/m/Y') }}</td></tr>
      @if($invoice->billing_month)<tr><td style="padding:3px 8px;color:#888">Periode:</td><td style="padding:3px 8px">{{ date('F',mktime(0,0,0,$invoice->billing_month,1)) }} {{ $invoice->billing_year }}</td></tr>@endif
      <tr><td style="padding:3px 8px;color:#888">Status:</td><td style="padding:3px 8px"><strong>{{ strtoupper($invoice->status) }}</strong></td></tr>
    </table>
  </div>
</div>

<table>
  <thead><tr><th>No</th><th>Deskripsi</th><th class="text-center">Qty</th><th class="text-end">Harga Satuan</th><th class="text-end">Total</th></tr></thead>
  <tbody>
  @foreach($invoice->items as $i => $item)
  <tr>
    <td>{{ $i+1 }}</td>
    <td>{{ $item->description }}</td>
    <td class="text-center">{{ $item->qty }}</td>
    <td class="text-end">Rp {{ number_format($item->unit_price,0,',','.') }}</td>
    <td class="text-end">Rp {{ number_format($item->total,0,',','.') }}</td>
  </tr>
  @endforeach
  </tbody>
  <tfoot>
    <tr><td colspan="4" class="text-end">Subtotal</td><td class="text-end">Rp {{ number_format($invoice->subtotal,0,',','.') }}</td></tr>
    @if($invoice->tax_percent > 0)<tr><td colspan="4" class="text-end">PPN {{ $invoice->tax_percent }}%</td><td class="text-end">Rp {{ number_format($invoice->tax_amount,0,',','.') }}</td></tr>@endif
    <tr class="total"><td colspan="4" class="text-end">TOTAL TAGIHAN</td><td class="text-end">Rp {{ number_format($invoice->total,0,',','.') }}</td></tr>
    @if($invoice->amount_paid > 0)<tr><td colspan="4" class="text-end">Dibayar</td><td class="text-end" style="color:#16a34a">Rp {{ number_format($invoice->amount_paid,0,',','.') }}</td></tr>@endif
  </tfoot>
</table>

@if($setting->bank_name)
<div class="bank-info">
  <h4>Informasi Pembayaran</h4>
  <p><strong>Bank:</strong> {{ $setting->bank_name }}</p>
  <p><strong>No. Rekening:</strong> {{ $setting->bank_account }}</p>
  <p><strong>Atas Nama:</strong> {{ $setting->bank_account_name }}</p>
</div>
@endif

@if($invoice->notes)<p style="margin-top:12px;font-size:11px;color:#555"><strong>Catatan:</strong> {{ $invoice->notes }}</p>@endif

<div class="footer">
  {{ $setting->invoice_footer ?? 'Terima kasih atas kepercayaan Anda.' }}<br>
  Dicetak pada {{ now()->format('d/m/Y H:i') }} oleh {{ $invoice->createdBy?->name }}
</div>
</body>
</html>
