<?php
// index.php
?>
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1000, initial-scale=1.0">
<title>Ilustrasi Proteksi & Simpanan</title>
<style>
html, body,  {
    font-size: 14px !important;
       -webkit-text-size-adjust: 100%; /* Safari/Chrome mobile */
    -ms-text-size-adjust: 100%;     /* IE Mobile */
}
.notes {
    font-size: 12px !important;
}

body { 
    font-family: Arial, sans-serif; 
    background:#f4f4f4; 
    padding:20px; 
}
.container {
    width:1000px;
    margin:0 auto;
}
.card { 
    background:white; 
    padding:16px; 
    border-radius:4px; 
    box-shadow:0 2px 6px rgba(0,0,0,0.08); 
}
.field { 
    display:flex; 
    flex-direction:column; 
    margin-bottom:12px; 
}
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:100%; 
    box-sizing:border-box;
}
button { 
    padding:10px 16px; 
    border:none; 
    border-radius:4px; 
    cursor:pointer; 
    font-weight:bold;
}
button.generate { background:#4caf50; color:white; }
button.clear { background:#f44336; color:white; }
button.download { background:#673ab7; color:white; }
button.home { background:#341cd3; color:white; }
#result { 
    margin-top:20px; 
      -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    font-size: 14px !important; /* samain dengan body */
    line-height: 1.4;
    
}

/* Layout grid utama */
.grid-2col {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}
.grid-full {
    grid-column: span 2;
}

/* Style judul card */
.card h3 {
    margin-top:0;
    margin-bottom:12px;
    font-size:16px;
    color:#6a1b9a;
}
   /* Illustration styles */
    .illustration { border:1px solid #ddd; padding:100; }
    
    
    .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:5px 18px; align-items:center; font-size:14px; }
    .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; }


.card-frame { 
    background:white; 
    padding:16px; 
    border-radius:4px; 
    box-shadow:0 2px 6px rgba(0,0,0,0.08); 
     display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 10px;
    font-size: 14px;
    
}
.card-frame>div{
  padding: 16px; 
    background: #f9f9f9; 
    border-radius: 4px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
}
.card-frame> div:nth-child(1) {
    border: 1px solid #ccc;
}

.card-frame> div:nth-child(2) {
    border: 1px solid #ccc;
}
.font-blue{
    color: blue;
    text-size:14px;
}
.card-image {
    position: relative;
    width: 100%;
    height: 250px; 
    overflow: hidden;
    border-radius: 8px; 
    margin-top: 0px;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    opacity: 0.7; 
    display: block;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.2)); 
    border-radius: 8px; 
}
.card-image2 {
    position: relative;
    width: 100%;
    height: 100%; 
    overflow: hidden;
    border-radius: 8px; 
    margin-top: 0px;
}
.card-image2 img {
    width: 100%;
    height: 100%;
    opacity: 0.7; 
    display: block;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.2)); 
    border-radius: 8px; 
}
.ungu-muda{
    background: #D1C4E9;
        border:1px solid #cfcfcf;
    
}
.card-framebonus { 
    background:#f9f9f9; 
     display: grid;
    grid-template-columns: 400px;
    gap: 16px;
    margin-top: 10px;
    font-size: 12px;
    
}
.card-framedetail { 
    background:white; 
    padding:16px; 
    border-radius:4px; 
    box-shadow:0 2px 6px rgba(0,0,0,0.08); 
     display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
    margin: 10px;
    font-size: 14px;
    
}
.card-framedetail>div{
  padding: 16px; 
    background: #f9f9f9; 
    border-radius: 4px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
}
.card-framedetail> div:nth-child(1) {
    border: 1px solid #ccc;
}

.card-framedetail> div:nth-child(2) {
    border: 1px solid #ccc;
}
#premi-summary {
    background: white;
    padding: 0px;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    color: #000;
    
}

#premi-summary table {
    width: 100%;
    border-collapse: collapse;
}

#premi-summary td {
    padding: 6px 12px;
    border: 1px dotted #000;
}

#premi-summary .label {
    text-align: left;
    font-weight: normal;
}

#premi-summary .value {
    text-align: right;
    font-weight: bold;
}

.colorful-text {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    color: #333;
    margin:20px;
    text-align: center;
    background: white;
    padding:16px; 
    border-radius:20px; 
    box-shadow:0 4px 6px rgba(0,0,0,0.08); 

}

.colorful-text .highlight-blue {
    color: #1976d2; /* biru tegas */
    font-weight: bold;
}

.colorful-text .highlight-green {
    color: #2e7d32; /* hijau tenang */
    font-weight: bold;
}

.colorful-text .highlight-red {
    color: #d32f2f; /* merah kuat */
    font-weight: bold;
}

.colorful-text .highlight-purple {
    color: #7b1fa2; /* ungu elegan */
    font-weight: bold;
}
.text9{font-size: 9px!important;}
.text10{font-size: 10px!important;}
.text11{font-size: 11px!important;}
.text12{font-size: 12px!important;}
.text13{font-size: 13px!important;}
.text14{font-size: 14px!important;}
.text15{font-size: 15px!important;}
.text16{font-size: 16px!important;}
</style>
</head>
<body>
    
<div class="container">
    <div class="grid-2col">
        
        <!-- Frame 1 : Data Anak -->
        <div class="card">
            <h3>Data Anak</h3>
            <div class="field">
                <label>Nama Anak</label>
                <input type="text" id="nama_anak" placeholder="Nama Anak" value="">
            </div>
            <div class="field">
                <label>Usia Anak (Thn)</label>
                <input type="number" id="usia_anak" placeholder="1" min="0" value="1">
            </div>
            <div class="field">
                <label>Jenis Kelamin Anak</label>
                <select id="jk_anak">
                    <option value="W">Wanita</option>
                    <option value="P" selected="">Pria</option>
                </select>
            </div>
        </div>

        <!-- Frame 2 : Data Orang Tua -->
        <div class="card">
            <h3>Data Orang Tua</h3>
            <div class="field">
                <label>Nama Orang Tua</label>
                <input type="text" id="nama_ortu" placeholder="Nama Orang Tua" value="">
            </div>
            <div class="field">
                <label>Usia (Thn)</label>
                <input type="number" id="usia_ortu" placeholder="30" min="0" value="30">
            </div>
            <div class="field">
                <label>Jenis Kelamin</label>
                <select id="jk_ortu">
                    <option value="W">Wanita</option>
                    <option value="P" selected="">Pria</option>
                </select>
            </div>
        </div>

        <!-- Frame 3 : Biaya Kuliah -->
        <div class="card">
         <h3>Jenis Program</h3>
            <div class="field">
                <label>Produk</label>
                <select id="produk">
                    <option value="Term Life Plus">Term Life Plus</option>
                    <option value="Future Saver" selected>Future Saver</option>
                </select>
            </div>
             <div class="field">
                <label>Tertanggung</label>
                <select id="tertanggung">
                    <option value="ortu">Orang Tua</option>
                    <option value="anak" selected>Anak</option>
                </select>
            </div>
        </div>
        <!-- Frame 4 : Jenis Program -->
        <div class="card">
            <h3>Pembayaran</h3>
            <div class="field">
                <label>Uang Pertanggungan</label>
                <input type="number" id="uang_ptg" placeholder="100000000" min="0" value="100000000">
            </div>
            <div class="field">
                <label>Pembayaran</label>
                <select id="pembayaran">
                    <option value="tahunan">Tahunan</option>
                    <option value="semesteran">Semesteran</option>
                    <option value="kuartalan">Kuartalan</option>
                    <option value="bulanan" selected>Bulanan</option>
                </select>
            </div>
        </div>

        <!-- Tombol Aksi -->
        <div class="card grid-full" style="text-align:center;">
            <button class="generate" id="btnGenerate">Generate</button>
            <button class="clear" id="btnClear" type="button">Clear</button>
            <button class="download" id="btnDownload" type="button">Download</button>
            <button class="home" id="btnHome" type="button">Home</button>
        </div>

        <div id="result" class="grid-full"></div>
    </div>
</div>

<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 namaAnak = document.getElementById('nama_anak').value.trim();
    const usiaAnak = parseInt(document.getElementById('usia_anak').value);
    const namaOrtu = document.getElementById('nama_ortu').value.trim();
    const usiaOrtu = parseInt(document.getElementById('usia_ortu').value);
    const jkOrtu = document.getElementById('jk_ortu').value;
    const jkAnak = document.getElementById('jk_anak').value;
    const produk = document.getElementById('produk').value;
    const uangPtg = parseFloat(document.getElementById('uang_ptg').value) || 0;
    const tertanggung = document.getElementById('tertanggung').value;
    const pembayaran = document.getElementById('pembayaran').value;

    if (!namaAnak || !usiaAnak || !namaOrtu || !usiaOrtu || !jkOrtu || !produk || !uangPtg) {
      alert('Isi semua field dengan benar');
      return;
    }

    const formData = new FormData();
    formData.append('nama_anak', namaAnak);
    formData.append('usia_anak', usiaAnak);
    formData.append('nama_ortu', namaOrtu);
    formData.append('usia_ortu', usiaOrtu);
    formData.append('jk_ortu', jkOrtu);
    formData.append('jk_anak', jkAnak);
    formData.append('produk', produk);
    formData.append('uang_ptg', uangPtg);
    formData.append('tertanggung', tertanggung);
    formData.append('pembayaran', pembayaran);

    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;
          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(){
    ['nama_anak','usia_anak','nama_ortu','usia_ortu','jk_ortu','biaya_now','inflasi','biaya_18','produk','uang_ptg']
      .forEach(id => {
        const el = document.getElementById(id);
        if (el.tagName === 'SELECT') el.value = el.options[0].value;
        else el.value = '';
      });
    document.getElementById('biaya_18').value = '';
    document.getElementById('result').innerHTML = '';
  });

document.getElementById('btnHome').addEventListener('click', function(){
    window.location.href = "https://eka.iwem.my.id";
});
  // Download button
  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 namaAnak = document.getElementById('nama_anak').value.trim().replace(/\s+/g,'_');
    const usiaAnak = document.getElementById('usia_anak').value;
    const namaOrtu = document.getElementById('nama_ortu').value.trim().replace(/\s+/g,'_');
    const usiaOrtu = document.getElementById('usia_ortu').value;
    const produk = document.getElementById('produk').value;

    const now = new Date();
    now.setHours(now.getHours() + 1);
    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_${namaAnak}_${usiaAnak}_${namaOrtu}_${usiaOrtu}_${produk}_${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>


<script>
// fungsi hitung biaya kuliah

window.addEventListener('load', function() {
  //  document.getElementById('btnGenerate').click();
});
</script>

</body>
</html>
