<?php
// index.php
?>
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Ilustrasi Proteksi & Simpanan</title>
<style>
html, body, .notes {
    font-size: 14px !important; /* paksa sama di semua device */
}
    /* CSS disusun agar desain mendekati gambar yang kamu lampirkan */
    body { font-family: Arial, sans-serif; background:#f4f4f4; padding:20px; }
.container {
    width:1100px;
    overflow-x:auto;
}
    .card { background:white; padding:16px; border-radius:4px; box-shadow:0 2px 6px rgba(0,0,0,0.08); }
    form.input-form { display:flex; gap:12px; align-items:end; margin-bottom:12px; flex-wrap:wrap; }
    form.input-form .field { display:flex; flex-direction:column; }
    label { font-weight:600; margin-bottom:6px; font-size:13px; color:#333; }
    input[type="text"], input[type="number"], select { padding:8px 10px; border:1px solid #ccc; border-radius:4px; width:220px; }
    button { padding:8px 12px; border:none; border-radius:4px; cursor:pointer; }
    button.generate { background:#4caf50; color:white; }
    button.clear { background:#f44336; color:white; }
    button.download { background:#673ab7; color:white; }
    #result { margin-top:16px; }

    /* Illustration styles */
    .illustration { border:1px solid #ddd; padding:0; }
    .header { background:#6a1b9a; color:white; padding:14px 18px; text-align:center; }
    .header h2 { margin:0; font-size:20px; letter-spacing:1px; }
    .info-row { display:grid; grid-template-columns:200px 1fr ; gap:6px; padding:12px 18px; align-items:center; }
    .info-row .value { font-weight:700; }

    table.program-table, table.cash-table, table.summary-table, table.premi-table {
        width:100%; border-collapse:collapse; margin:12px 0; font-size:14px;
    }
    table.program-table td, table.program-table th,
    table.cash-table td, table.cash-table th,
    table.summary-table td, table.summary-table th,
    table.premi-table td, table.premi-table th {
        border:1px solid #cfcfcf; padding:8px; text-align:left;
    }
    bg-warna{
        background: grey;
    }

    table.program-table tr.proghead th {
        background:#dff0d8; text-align:center; font-weight:700;
    }
    table.cash-table thead th { background:#cbe5d6; font-weight:700; text-align:center; }
    table.cash-table tbody td { background: #f9fff9; text-align:center; }
    table.summary-table td { background:#eaf6ef; }
    table.premi-table th { background:#dff0d8; text-align:center; }
    .muted { color:#888; }
    .notes { font-size:12px; color:#666; padding:12px; }


</style>
</head>
<body>
<div class="container">
    <div class="card">
        <h1>Ilustrasi Produk</h1>

        <form id="formInput" class="input-form" onsubmit="return false;">
            <div class="field">
                <label>Nama Nasabah</label>
                <input type="text" id="nama" name="nama" placeholder="Nama" required value="">
            </div>
            <div class="field">
                <label>Usia (Tahun)</label>
                <input type="number" id="usia" name="usia" placeholder="30" required value="30" min="1">
            </div>
            <div class="field">
                <label>Pilihan Perhitungan</label>
                <select id="tipe" name="tipe" required>
                    <option value="premi">Premi</option>
                    <option value="uang_pertanggungan">Uang Pertanggungan</option>
                    <option value="target">Target Nilai Tunai</option>
                </select>
            </div>
            <div class="field">
                <label>Nilai</label>
                <input type="number" id="nilai" name="nilai" placeholder="10000000" required value="10000000" min="2000000" step="1">
            </div>
            <div class="field">
                <button class="generate" id="btnGenerate">Generate</button>
            </div>
            <div class="field">
                <button class="clear" id="btnClear" type="button">Clear</button>
            </div>
            <div class="field">
                <button class="download" id="btnDownload" type="button">Download</button>
            </div>
        </form>

        <div id="result"></div>
    </div>
</div>

<!-- html2canvas from CDN for screenshot -->
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>

<script>
// AJAX generate
document.getElementById('btnGenerate').addEventListener('click', function(e){
    e.preventDefault();
    const nama = document.getElementById('nama').value.trim();
    const usia = parseInt(document.getElementById('usia').value);
    const nilai = parseFloat(document.getElementById('nilai').value);
    const tipe = document.getElementById('tipe').value;

    if (!nama || !usia || !nilai || !tipe) {
        alert('Isi Nama, Usia, Pilihan Perhitungan dan Nilai dengan benar');
        return;
    }

    const formData = new FormData();
    formData.append('nama', nama);
    formData.append('usia', usia);
    formData.append('nilai', nilai);
    formData.append('tipe', tipe);

    fetch('process.php', {
        method: 'POST',
        body: formData
    }).then(r => r.json())
    .then(data => {
        if (data.error) {
            alert(data.error);
            return;
        }
        if (data.success) {
            document.getElementById('result').innerHTML = data.html;
            // scroll ke hasil
            document.getElementById('result').scrollIntoView({behavior:'smooth'});
        } else {
            alert('Response tidak sesuai dari server');
        }
    }).catch(err => {
        console.error(err);
        alert('Terjadi error saat meminta data ke server');
    });
});

// Clear button
document.getElementById('btnClear').addEventListener('click', function(){
    document.getElementById('nama').value = '';
    document.getElementById('usia').value = '';
    document.getElementById('nilai').value = '';
    document.getElementById('tipe').value = 'premi';
    document.getElementById('result').innerHTML = '';
});

document.getElementById('btnDownload').addEventListener('click', function(){
    const el = document.getElementById('result');
    if (!el || el.innerHTML.trim() === '') {
        alert('Belum ada ilustrasi untuk didownload. Tekan Generate terlebih dahulu.');
        return;
    }
    const nama = document.getElementById('nama').value.trim().replace(/\s+/g,'_'); // ganti spasi jadi underscore
    const usia = document.getElementById('usia').value;
    const nilai = document.getElementById('nilai').value;
    const tipe = document.getElementById('tipe').value;
    
    // waktu sekarang +1 jam dan format ddmmyyyy_HHiiss
    const now = new Date();
    now.setHours(now.getHours() + 1); // tambah 1 jam
    const pad = n => n.toString().padStart(2,'0');
    const waktu = pad(now.getDate()) + pad(now.getMonth()+1) + now.getFullYear() + '_' + pad(now.getHours()) + pad(now.getMinutes()) + pad(now.getSeconds());
    
    const filename = `tlp_${nama}_${usia}_${nilai}_${tipe}_${waktu}.png`;

    html2canvas(el, {scale:2, useCORS:true}).then(canvas => {
        const link = document.createElement('a');
        link.download = filename;
        link.href = canvas.toDataURL('image/png');
        link.click();
    }).catch(err => {
        console.error(err);
        alert('Gagal membuat gambar. Cek console untuk detail.');
    });
});

</script>
</body>
</html>
