<!DOCTYPE html>
<html lang="en">
<head>
  <title>Invoice</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div class="max-w-4xl mx-auto p-6 bg-white text-slate-500 shadow-md rounded mt-10 border font-sans">
    
    <!-- Header -->
    <div class="border-b pb-8 mb-8 flex items-center">
      <div class="flex-1 text-left">
        {{logo_img_small}}
        <h3 class="font-bold">{{perusahaan}}</h3>
        <p class="text-sm text-slate-500">{{alamat_perusahaan}}</p>
        <p class="text-sm text-slate-500">{{telepon_perusahaan}}</p>
        <p class="text-sm text-slate-500">{{email_perusahaan}}</p>
      </div>
      <h1 class="text-4xl font-bold text-slate-400 uppercase flex-1 text-right">Invoice</h1>
    </div>

    <!-- Info Pelanggan dan Invoice -->
    <div class="pb-4 mb-4 flex items-start">
      <!-- Customer Information -->
      <div class="mb-4">
        <h2 class="font-semibold text-slate-700">Bill To:</h2>
        <p class="text-sm text-slate-500">Nama: {{nama_pelanggan}}</p>
        <p class="text-sm text-slate-500">No. Layanan: {{nomer_layanan}}</p>
        <p class="text-sm text-slate-500">No. Telp: {{nomor_hp}}</p>
      </div>

      <!-- Invoice Information -->
      <div class="mb-4 text-right flex-1">
        <p class="text-sm text-slate-500">Invoice #: {{nomor_invoice}}</p>
        <p class="text-sm text-slate-500">Tanggal: {{tanggal_invoice}}</p>
        <p class="text-sm text-slate-500">Jatuh Tempo: {{tanggal_jatuh_tempo}}</p>
        <p class="text-sm text-slate-500">Status: {{status_invoice_label}}</p>
      </div>
    </div>

    <!-- Tabel Invoice -->
    <table class="min-w-full table-auto mb-24">
      <thead>
        <tr class="bg-slate-100">
          <th class="px-4 py-2 text-left">Item / Layanan</th>
          <th class="px-4 py-2 text-left">Deskripsi</th>
          <th class="px-4 py-2 text-left">Qty</th>
          <th class="px-4 py-2 text-left">Harga</th>
          <th class="px-4 py-2 text-right">Jumlah</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="border px-4 py-2">{{paket}}</td>
          <td class="border px-4 py-2">{{ssid}}</td>
          <td class="border px-4 py-2">-</td>
          <td class="border px-4 py-2">{{subtotal}}</td>
          <td class="border px-4 py-2 text-right">{{subtotal}}</td>
        </tr>
        <tr>
          <td colspan="4" class="border px-4 py-2 text-right">Subtotal</td>
          <td class="border px-4 py-2 text-right">{{subtotal}}</td>
        </tr>
        <tr>
          <td colspan="4" class="border px-4 py-2 text-right">PPN {{ppn_persen}}</td>
          <td class="border px-4 py-2 text-right">{{ppn_amount}}</td>
        </tr>
        <tr class="font-bold">
          <td colspan="4" class="border px-4 py-2 text-right">Total</td>
          <td class="border px-4 py-2 text-right">{{total}}</td>
        </tr>
      </tbody>
    </table>

<!-- Informasi Pembayaran -->
<div class="bg-red-100 text-red-700 rounded-sm p-3 shadow-sm">
  <div class="text-sm text-slate-500 pt-2 mt-2">
    <p class="text-red-800 font-semibold mb-1">Pembayaran Melalui:</p>
    <p>{{rekening_utama}}</p>
    <p>{{link_bayar_online}}</p>
  </div>
</div>



    <!-- Footer -->
    <div class="mb-6"></div>
    <p>Invoice ini dibuat otomatis oleh sistem biling pada tanggal {{tanggal_generate}}</p>
    <p>{{url_view_invoice}}</p>

  </div>
</body>
</html>