{{#section 'meta'}}
<title>Invoice</title>
{{/section}}

<section>
	<!-- start page title -->
	<div class="row">
		<div class="col-12">
			<div class="page-title-box d-sm-flex align-items-center justify-content-between">
				<h4 class="mb-sm-0 font-size-18">Invoice</h4>

				<div class="page-title-right">
					<ol class="breadcrumb m-0">
						<li class="breadcrumb-item"><a href="javascript: void(0);">Tagihan</a></li>
						<li class="breadcrumb-item active">Invoice</li>
					</ol>
				</div>

			</div>
		</div>
	</div>
    <div class="text-end mb-4 d-print-none">
        <div class="d-flex justify-content-end gap-2">
            <button onclick="window.print()" class="btn btn-warning"><i class="fa fa-print"></i> Cetak Invoice</button>
        </div>
    </div>
	<!-- end page title -->

	<div class="section-body">
		<div class="row mb-2">
	        <div class="col-lg-12">
	            <div class="card">
	                <div class="card-body" id="print-area">
	                    <div class="mb-4 text-center bg-dark fw-bold text-white">
	                        Invoice
	                    </div>

	                    <section class="mb-4" data-id="info">
	                        <table>
	                            <tr>
	                                <th>Nomor Pesanan</th>
	                                <td class="px-2">:</td>
	                                <td>#{{bill.invoice}}</td>
	                            </tr>
	                            <tr>
	                                <th>Tanggal</th>
	                                <td class="px-2">:</td>
	                                <td>{{datetimeidformat bill.created_at}}</td>
	                            </tr>
	                            <tr>
	                                <th>Dari</th>
	                                <td class="px-2">:</td>
	                                <td>{{config_app 'app_name'}}</td>
	                            </tr>
	                            <tr>
	                                <th>Kepada</th>
	                                <td class="px-2">:</td>
	                                <td>{{userdata.name}}</td>
	                            </tr>
	                            <tr>
	                                <th>Status Pembayaran</th>
	                                <td class="px-2">:</td>
	                                <td>{{bill.status}}</td>
	                            </tr>
	                        </table>
	                    </section>

	                    <section class="mb-4" data-id="details">
	                        <div class="fw-bold mb-2">Detail Pesanan:</div>
	                        <table class="table table-bordered">
	                            <thead class="bg-light-dark">
	                                <tr>
	                                    <th>Keterangan</th>
	                                    <th>Harga</th>
	                                </tr>
	                            </thead>
	                            <tbody>
	                                <tr>
	                                    <th>{{bill.description}}</th>
	                                    <th>Rp. {{number_format bill.amount_request}}</th>
	                                </tr>
	                                <tr>
	                                    <th colspan="4">&nbsp;</th>
	                                </tr>
	                            </tbody>
	                            <tfoot>
	                                <tr>
	                                    <th class="text-end">Sub Total</th>
	                                    <td>Rp. {{number_format bill.amount_request}}</td>
	                                </tr>
	                                <tr>
	                                    <th class="text-end">Nominal Unik</th>
	                                    <td>Rp. {{number_format bill.amount_additional}}</td>
	                                </tr>
	                                <tr>
	                                    <th class="text-end">Total</th>
	                                    <td>Rp. {{number_format bill.amount}}</td>
	                                </tr>
	                            </tfoot>
	                        </table>
	                    </section>

	                    <section class="border-top pt-4" data-id="foot-info">
	                        <div class="fw-bold">Detail Pembayaran</div>
	                        <table class="mb-4">
	                            <tr>
	                                <th>Metode Pembayaran</th>
	                                <td>:</td>
	                                <td>{{bank.name}}</td>
	                            </tr>
	                            <tr>
	                                <th>Atas Nama</th>
	                                <td>:</td>
	                                <td>{{bill.bank_account}}</td>
	                            </tr>
	                            <tr>
	                                <th>Nomor Rekening</th>
	                                <td>:</td>
	                                <td>{{bill.bank_address}}</td>
	                            </tr>
	                        </table>
	                        <p class="mb-2">* Pastikan anda mentransfer sesuai nominal yang tertera (<b>Rp. {{number_format bill.amount}}</b>) agar mempermudah kami memvalidasi pesanan anda.</p>
	                        <p class="">* Jika lebih dari 10 menit invoice belum deterima setelah anda melakukan pembayaran, anda dapat melakukan konfirmasi dengan mengirimkan bukti pembayaran ke nomor wa <a href="https://wa.me/" class="fw-bold text-success"></a></p>
	                    </section>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>

</section>