/* --- CSS untuk styling tabel, form, dan kuitansi --- */
:root {
--color-primary: #007bff;
--color-secondary: #0056b3;
--color-success: #28a745;
--color-text: #333;
--color-bg-light: #f8f9fa;
--color-border: #dee2e6;
--font-family: 'Arial', sans-serif;
}
body {font-family: var(--font-family); color: var(--color-text); background-color: #fff;}
.container-dak {max-width: 900px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
h1, h2 {color: var(--color-secondary); text-align: center; margin-bottom: 20px;}
.header-dak {display: flex; align-items: center; justify-content: center; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 3px solid var(--color-primary);}
.logo-placeholder {width: 50px; height: 50px; background-color: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 1.5em; margin-right: 15px; box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);}
.header-text {text-align: left;}
.header-text h1 {margin: 0; font-size: 1.8em; color: var(--color-secondary);}
.header-text p {margin: 0; font-size: 0.9em; color: var(--color-text);}
.check-form {display: flex; gap: 15px; margin-bottom: 25px; padding: 15px; border: 1px solid var(--color-border); border-radius: 6px; background-color: var(--color-bg-light);}
.check-form input[type="text"] {flex-grow: 1; padding: 10px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 1em;}
.check-form button {padding: 10px 20px; background-color: var(--color-primary); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; transition: background-color 0.3s;}
.check-form button:hover {background-color: var(--color-secondary);}
#result-area {margin-top: 20px; border: 1px solid var(--color-border); padding: 20px; border-radius: 6px; background-color: #fff; display: none;}
.info-tagihan {margin-bottom: 20px; padding: 10px; background-color: #e9f5ff; border-left: 5px solid var(--color-primary);}
.info-tagihan p {margin: 5px 0;}
.info-tagihan strong {color: var(--color-secondary);}
.tagihan-table {width: 100%; border-collapse: collapse; margin-bottom: 20px;}
.tagihan-table th, .tagihan-table td {border: 1px solid var(--color-border); padding: 12px; text-align: left;}
.tagihan-table th {background-color: var(--color-primary); color: white; font-weight: bold;}
.tagihan-table tr:nth-child(even) {background-color: var(--color-bg-light);}
.total-row td {font-weight: bold; background-color: #eaf7ed; border-top: 2px solid var(--color-success) !important; color: var(--color-success);}
.signature-area {display: flex; justify-content: space-between; margin-top: 40px;}
.signature-column {width: 45%; text-align: center;}
.signature-column p {margin: 5px 0;}
.signature-box {height: 80px; border-bottom: 1px solid #333; margin-bottom: 5px; display: flex; align-items: flex-end; justify-content: center; font-style: italic; color: #777;}
.print-button {display: block; width: 100%; padding: 12px; margin-top: 20px; background-color: var(--color-success); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1.1em; transition: background-color 0.3s;}
.print-button:hover {background-color: #1e7e34;}
@media print {
body * {visibility: hidden;}
#result-area, #result-area * {visibility: visible;}
.container-dak {box-shadow: none; border: none; max-width: none; padding: 0;}
.check-form, .print-button {display: none !important;}
#result-area {border: none; padding: 0; display: block !important;}
.header-dak {border-bottom: 3px solid #000; margin-bottom: 20px;}
.logo-placeholder {background-color: #333; color: white;}
.tagihan-table th {background-color: #ccc !important; color: #333 !important; -webkit-print-color-adjust: exact;}
.total-row td {background-color: #e0e0e0 !important; -webkit-print-color-adjust: exact;}
}
// URL GOOGLE APPS SCRIPT ANDA SUDAH DIPERBARUI
const API_URL = 'https://script.google.com/macros/s/AKfycbwb5dOmVx8C__dPdVxNvghtlwDxI2kMQ4KmVgkk0fI-NIhFtDuYtq7GvblUZvSSU0MhFA/exec';
function formatRupiah(number) {
return new Intl.NumberFormat('id-ID', {
style: 'currency',
currency: 'IDR',
minimumFractionDigits: 0
}).format(number);
}
async function checkTagihan() {
const idPelangganInput = document.getElementById('idPelangganInput').value.trim().toUpperCase();
const resultArea = document.getElementById('result-area');
const tagihanBody = document.getElementById('tagihan-body');
if (!idPelangganInput) {
alert("Mohon masukkan ID Pelanggan.");
return;
}
// Tampilkan status loading
tagihanBody.innerHTML = 'Memuat data... ${item.bulan || 'N/A'}
${kubikasi}
${formatRupiah(hargaSatuan)}
${formatRupiah(totalHarga)}
`;
});
document.getElementById('outputTotalTagihan').textContent = formatRupiah(totalTagihan);
document.getElementById('tanggalCetak').textContent = new Date().toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' });
} else {
alert('ID Pelanggan "' + idPelangganInput + '" tidak ditemukan atau tidak memiliki tagihan.');
resultArea.style.display = 'none';
}
} catch (error) {
console.error("Error:", error);
alert('Terjadi kesalahan saat mengambil data. Mohon konfirmasi kembali Apps Script sudah di-Deploy dengan akses Publik ("Anyone").');
resultArea.style.display = 'none';
}
}
💧
POKMAS SUMBER BERKAH
Sistem Informasi Tagihan Air Desa Nambo Ilir
Cek Tagihan Air Anda
ID Pelanggan:
Nama Pelanggan:
Rincian Tagihan
| Bulan | Kubikasi (m³) | Satuan (Rp) | Harga Total (Rp) |
|---|---|---|---|
| Total Tagihan Belum Dibayar: | Rp 0 | ||
Nambo Ilir,
Pelanggan,
( Nama Pelanggan )
Mengetahui,
Kepala Pokmas Sumber Berkah
( Nama Petugas DAK )