<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Invoice Pemesanan</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
body {
font-family: sans-serif;
font-size: 12px;
margin: 20px;
}
.invoice-box {
border: 1px solid #ccc;
padding: 25px;
}
h2, h4, h5, h6 {
margin-bottom: 10px;
}
hr {
border-top: 1px solid #000;
}
.custom-table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
.custom-table th, .custom-table td {
border: 1px solid #000;
padding: 8px;
text-align: left;
}
.custom-table thead {
background-color: #f2f2f2;
}
.text-success {
color: green !important;
}
.info-atas-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}
.info-atas-table tbody tr td {
border: none;
padding: 8px 12px;
}
/* Atur lebar kolom supaya proporsional */
.info-atas-table tbody tr td:first-child,
.info-atas-table tbody tr td:nth-child(3) {
width: 20%;
font-weight: 600;
}
h3.text-center {
font-weight: 600;
margin: 30px 0 20px;
color: #333;
}
</style>
</head>
<body>
<div class="container invoice-box mt-5">
<h2 class="text-center mb-4">INVOICE PEMESANAN</h2>
<!-- Info Atas -->
<div class="table-responsive">
<table class="table table-sm info-atas-table">
<tbody>
<tr>
<td style="width: 100px;">To</td>
<td>: <?= htmlspecialchars($fullname) ?></td>
<td style="width: 100px;">Date</td>
<td>: <?= date("d M Y") ?></td>
</tr>
<tr>
<td>Email</td>
<td>: <?= htmlspecialchars($email) ?></td>
<td>From</td>
<td>: Mountana Sikunir Villa</td>
</tr>
<tr>
<td>Telepon</td>
<td>: <?= htmlspecialchars($phonenumber) ?></td>
<td>Telepon</td>
<td>: 0822-2077-8332</td>
</tr>
</tbody>
</table>
</div>
<h3 class="text-center">Please Find The Invoice For Your Reservation As Follow</h3>
<!-- Info Tamu -->
<div class="table-responsive mt-3">
<table class="table table-sm">
<tbody>
<tr>
<td style="width: 130px;">Guest/Group Name</td>
<td>: <?= htmlspecialchars($fullname) ?></td>
</tr>
<tr>
<td>Order Number</td>
<td>: #<?= htmlspecialchars($id_invoice) ?></td>
</tr>
</tbody>
</table>
</div>
<hr>
<!-- Detail Pemesanan -->
<h5>Details</h5>
<div class="table-responsive">
<table class="table table-bordered custom-table">
<thead>
<tr>
<th>Villa</th>
<th>Tanggal Check-in</th>
<th>Tanggal Check-out</th>
<th>Durasi</th>
<th>Harga/Malam</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><?= htmlspecialchars($nama_villa) ?></td>
<td><?= date("d M Y", strtotime($checkindate)) ?></td>
<td><?= date("d M Y", strtotime($checkoutdate)) ?></td>
<td><?= $duration ?> malam</td>
<td>Rp <?= number_format($harga, 0, ',', '.') ?></td>
<td>Rp <?= number_format($total, 0, ',', '.') ?></td>
</tr>
<tr>
<td colspan="5" class="text-right font-weight-bold">Grand Total</td>
<td class="font-weight-bold">Rp <?= number_format($total, 0, ',', '.') ?></td>
</tr>
</tbody>
</table>
</div>
<!-- Term of Payment -->
<h5 class="mt-4">Term of Payment</h5>
<div class="table-responsive">
<table class="table table-borderless">
<tbody>
<tr>
<td style="width: 130px; font-weight: bold;">Full Payment 100%</td>
<td>: Rp <?= number_format($total, 0, ',', '.') ?></td>
</tr>
<tr>
<td style="font-weight: bold;">Down Payment 30%</td>
<td>: Rp <?= number_format($dp, 0, ',', '.') ?></td>
</tr>
</tbody>
</table>
</div>
<!-- Bank Info -->
<h5 class="mt-4">Bank Account Details</h5>
<div class="table-responsive">
<table class="table table-borderless">
<tbody>
<tr>
<td style="width: 130px;">Beneficiary</td>
<td style="font-weight: bold;">: Vella Tri Suvahjain</td>
</tr>
<tr>
<td>Bank Name</td>
<td>: Bank Rakyat Indonesia
</td>
</tr>
<tr>
<td>Account Number</td>
<td>: 661601006542532</td>
</tr>
</tbody>
</table>
</div>
<!-- Penutup -->
<div class="mt-4 text-center">
<p>
Terima kasih telah melakukan pemesanan.<br>
Silakan transfer ke nomor rekening di atas dan simpan invoice ini sebagai bukti transaksi.
</p>
</div>
</div>
</body>
</html> |