<?= $this->extend('layout/templatetool');?>

<!-- Untuk Css -->
<?= $this->section('css') ?>
	<style>
        * { box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; background: #f8fafc; color: #334155; }
        .nav-active { background:#0099b8; color:#fff !important; border-radius:6px; }
        .upload-zone { border:2px dashed #cbd5e1; border-radius:14px; padding:36px 20px; text-align:center; cursor:pointer; transition:all .15s; background:#f8fafc; }
        .upload-zone:hover,.upload-zone.drag { border-color:#0099b8; background:#e0f7ff; }
        .upload-zone input { display:none; }
        .ctrl-input,.ctrl-select { padding:8px 12px; border-radius:10px; border:1px solid #e2e8f0; font-size:13px; font-family:'Inter',sans-serif; outline:none; color:#1e293b; background:#fff; width:100%; }
        .ctrl-input:focus,.ctrl-select:focus { border-color:#0099b8; box-shadow:0 0 0 3px rgba(0,153,184,.1); }
        .btn-go { width:100%; padding:13px; border-radius:12px; border:none; font-size:13px; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif; color:#fff; background:#0099b8; transition:background .12s; display:flex; align-items:center; justify-content:center; gap:8px; }
        .btn-go:hover { background:#007fa0; }
        .btn-go:disabled { background:#94a3b8; cursor:not-allowed; }
        .btn-dl { width:100%; padding:12px; border-radius:12px; border:none; font-size:13px; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif; color:#fff; background:#15803d; display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; transition:background .12s; margin-top:8px; }
        .btn-dl:hover { background:#166534; }
        .result-ok  { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:10px; padding:12px 16px; font-size:12px; color:#166534; font-weight:600; }
        .result-err { background:#fef2f2; border:1px solid #fecaca; border-radius:10px; padding:12px 16px; font-size:12px; color:#b91c1c; }
        .preview-box { border-radius:12px; overflow:hidden; background:#f1f5f9; border:1px solid #e2e8f0; text-align:center; }
        .preview-box img { max-width:100%; max-height:220px; object-fit:contain; display:block; margin:auto; }
        .card { background:#fff; border:1px solid #e2e8f0; border-radius:20px; padding:28px; box-shadow:0 2px 12px rgba(0,0,0,.04); }
        .range-wrap { display:flex; align-items:center; gap:10px; }
        .range-wrap input[type=range] { flex:1; accent-color:#0099b8; height:6px; }
        .range-val { font-size:14px; font-weight:700; color:#0099b8; min-width:44px; text-align:right; }
        .stat-box { flex:1; background:#f8fafc; border-radius:10px; padding:12px; text-align:center; border:1px solid #f1f5f9; }
        .stat-num { font-size:18px; font-weight:700; color:#1e293b; }
        .stat-lbl { font-size:10px; color:#94a3b8; margin-top:2px; font-weight:500; }
    </style>
<?= $this->endSection(); ?>


<!-- Untuk Main -->
<?= $this->section('conten');?>
	<section style="background:linear-gradient(135deg,#1e1b4b 0%,#4c1d95 50%,#0099b8 100%)">
    <div class="max-w-3xl mx-auto px-6 py-10 text-white">
        <p class="text-xs text-purple-200 uppercase tracking-widest font-medium mb-1">
            <a href="<?= base_url('tools')?>" class="hover:underline">Alat Digital</a> › Compress Image
        </p>
        <h1 class="text-2xl font-bold mb-1">🗜️ Compress Image</h1>
        <p class="text-sm text-purple-100">Perkecil ukuran file gambar tanpa kehilangan kualitas yang berarti — semua proses di browser.</p>
    </div>
</section>

<main class="max-w-3xl mx-auto px-4 py-8 space-y-5">

    <div class="bg-white border border-slate-200 rounded-xl px-4 py-3 flex items-center gap-3 shadow-sm flex-wrap">
        <a href="<?= base_url('tools')?>" class="bg-slate-50 hover:bg-slate-100 border border-slate-200 text-slate-700 text-[11px] font-bold py-1 px-3 rounded-lg transition">⬅ Kembali ke Alat Digital</a>
        <div class="h-4 w-px bg-slate-200"></div>
        <span class="text-xs font-bold text-slate-700">🗜️ Compress Image</span>
    </div>

    <div class="card space-y-5">
        <div class="upload-zone" onclick="document.getElementById('cpInput').click()"
            ondragover="event.preventDefault();this.classList.add('drag')"
            ondragleave="this.classList.remove('drag')"
            ondrop="dropFile(event,'cpInput',previewCompress)">
            <input type="file" id="cpInput" accept="image/jpeg,image/png,image/webp" onchange="previewCompress(this)">
            <div style="font-size:40px;margin-bottom:8px">🖼️</div>
            <div style="font-size:13px;font-weight:600;color:#475569"><b style="color:#0099b8">Klik untuk pilih gambar</b> atau seret ke sini</div>
            <div style="font-size:11px;color:#94a3b8;margin-top:4px">JPG · PNG · WEBP — maks 20 MB</div>
        </div>

        <div id="cpPreview" style="display:none" class="preview-box">
            <img id="cpPreviewImg" alt="preview">
            <div style="font-size:11px;color:#64748b;padding:8px 12px;font-weight:500" id="cpOrigInfo"></div>
        </div>

        <!-- STATS -->
        <div id="cpStats" style="display:none;flex;gap:10px" class="hidden">
            <div class="stat-box"><div class="stat-num" id="statOrig">-</div><div class="stat-lbl">Ukuran Asli</div></div>
            <div class="stat-box"><div class="stat-num" id="statNew">-</div><div class="stat-lbl">Ukuran Baru</div></div>
            <div class="stat-box"><div class="stat-num text-green-600" id="statSave">-</div><div class="stat-lbl">Penghematan</div></div>
        </div>

        <div>
            <label style="font-size:12px;font-weight:700;color:#475569;display:block;margin-bottom:8px">Kualitas Kompresi</label>
            <div class="range-wrap">
                <input type="range" id="cpQual" min="10" max="95" value="72"
                    oninput="document.getElementById('cpQualVal').innerText=this.value+'%'">
                <span class="range-val" id="cpQualVal">72%</span>
            </div>
            <div style="display:flex;justify-content:space-between;font-size:10px;color:#94a3b8;margin-top:4px">
                <span>Lebih kecil (10%)</span><span>Lebih bagus (95%)</span>
            </div>
        </div>

        <div>
            <label style="font-size:12px;font-weight:700;color:#475569;display:block;margin-bottom:6px">Format Output</label>
            <select id="cpFmt" class="ctrl-select" style="max-width:280px">
                <option value="jpeg">JPEG — paling umum, file kecil</option>
                <option value="webp">WEBP — file terkecil (modern)</option>
                <option value="png">PNG — lossless, file lebih besar</option>
            </select>
        </div>

        <button class="btn-go" id="cpBtn" onclick="doCompress()" disabled>
            <i class="fa-solid fa-compress fa-xs"></i> Kompres Sekarang
        </button>

        <div id="cpResult" style="display:none"></div>
    </div>

    <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 text-xs text-amber-800 leading-relaxed">
        <strong>💡 Tips:</strong> Kualitas <b>70–80%</b> sudah cukup untuk web & media sosial. Format <b>WEBP</b> menghasilkan file paling ringan. Format <b>PNG</b> lebih besar tapi tanpa penurunan kualitas.
    </div>
</main>
<?= $this->endSection(); ?>


<!-- Untuk Js -->

<?= $this->section('myscript') ?>
	<script>
function fmtSize(b) {
    if(b<1024) return b+' B';
    if(b<1048576) return (b/1024).toFixed(1)+' KB';
    return (b/1048576).toFixed(2)+' MB';
}
function dropFile(e,id,cb) {
    e.preventDefault(); e.currentTarget.classList.remove('drag');
    const f=e.dataTransfer.files[0]; if(!f) return;
    const dt=new DataTransfer(); dt.items.add(f);
    const inp=document.getElementById(id); inp.files=dt.files; cb(inp);
}
function readURL(file) { return new Promise(r=>{ const fr=new FileReader(); fr.onload=e=>r(e.target.result); fr.readAsDataURL(file); }); }
function loadImg(src)  { return new Promise((r,j)=>{ const i=new Image(); i.onload=()=>r(i); i.onerror=j; i.src=src; }); }

let cpFile=null;
async function previewCompress(inp) {
    cpFile=inp.files[0]; if(!cpFile) return;
    const url=await readURL(cpFile);
    document.getElementById('cpPreviewImg').src=url;
    document.getElementById('cpPreview').style.display='block';
    document.getElementById('cpOrigInfo').innerText=`${cpFile.name} · ${fmtSize(cpFile.size)}`;
    document.getElementById('cpBtn').disabled=false;
    document.getElementById('cpResult').style.display='none';
}
async function doCompress() {
    if(!cpFile) return;
    const qual=parseInt(document.getElementById('cpQual').value)/100;
    const fmt=document.getElementById('cpFmt').value;
    const btn=document.getElementById('cpBtn');
    btn.disabled=true; btn.innerHTML='<i class="fa-solid fa-spinner fa-spin"></i> Memproses...';
    const url=await readURL(cpFile);
    const img=await loadImg(url);
    const canvas=document.createElement('canvas');
    canvas.width=img.naturalWidth; canvas.height=img.naturalHeight;
    canvas.getContext('2d').drawImage(img,0,0);
    canvas.toBlob(blob=>{
        const dlUrl=URL.createObjectURL(blob);
        const persen=Math.max(0,Math.round((1-blob.size/cpFile.size)*100));
        const ext=fmt==='jpeg'?'jpg':fmt;
        const res=document.getElementById('cpResult');
        res.style.display='block';
        res.innerHTML=`<div class="result-ok">✅ ${fmtSize(cpFile.size)} → <b>${fmtSize(blob.size)}</b>${persen>0?' <span style="color:#15803d">(hemat '+persen+'%)</span>':''}</div>
            <a href="${dlUrl}" download="compressed.${ext}" class="btn-dl">
                <i class="fa-solid fa-download fa-xs"></i> Download (${fmtSize(blob.size)})
            </a>`;
        btn.disabled=false; btn.innerHTML='<i class="fa-solid fa-compress fa-xs"></i> Kompres Lagi';
    },'image/'+fmt, fmt==='png'?undefined:qual);
}
</script>
<?= $this->endSection(); ?>