<?= $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-label { font-size:11px; font-weight:600; color:#475569; min-width:100px; flex-shrink:0; }
	.ctrl-input,.ctrl-select { flex:1; padding:8px 12px; border-radius:10px; border:1px solid #e2e8f0; font-size:13px; font-family:'Inter',sans-serif; outline:none; color:#1e293b; background:#fff; }
	.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); }
</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> › Resize Image
		</p>
		<h1 class="text-2xl font-bold mb-1">🔲 Resize Image</h1>
		<p class="text-sm text-purple-100">Ubah ukuran gambar ke dimensi yang kamu inginkan — semua proses di browser, tanpa upload ke server.</p>
	</div>
</section>

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

	<!-- BREADCRUMB -->
	<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">🔲 Resize Image</span>
	</div>

	<div class="card space-y-5">
		<!-- UPLOAD -->
		<div class="upload-zone" id="rzZone" onclick="document.getElementById('rzInput').click()"
		ondragover="event.preventDefault();this.classList.add('drag')"
		ondragleave="this.classList.remove('drag')"
		ondrop="dropFile(event,'rzInput',previewResize)">
		<input type="file" id="rzInput" accept="image/*" onchange="previewResize(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 · GIF — maks 20 MB</div>
	</div>

	<!-- PREVIEW -->
	<div id="rzPreview" style="display:none" class="preview-box">
		<img id="rzPreviewImg" alt="preview">
		<div style="font-size:11px;color:#64748b;padding:8px 12px;font-weight:500" id="rzOrigInfo"></div>
	</div>

	<!-- DIMENSI -->
	<div>
		<div style="font-size:12px;font-weight:700;color:#475569;margin-bottom:10px">Dimensi Output</div>
		<div style="display:flex;gap:12px">
			<div style="flex:1">
				<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:5px">Lebar (px)</label>
				<input type="number" id="rzW" class="ctrl-input" style="width:100%" placeholder="mis. 800" oninput="syncRatio('w')">
			</div>
			<div style="display:flex;align-items:center;padding-top:22px;color:#94a3b8;font-size:18px">×</div>
			<div style="flex:1">
				<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:5px">Tinggi (px)</label>
				<input type="number" id="rzH" class="ctrl-input" style="width:100%" placeholder="mis. 600" oninput="syncRatio('h')">
			</div>
		</div>
	</div>

	<!-- OPTIONS -->
	<div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap">
		<label style="display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#475569;cursor:pointer">
			<input type="checkbox" id="rzRatio" checked style="accent-color:#0099b8;width:15px;height:15px"> Pertahankan rasio aspek
		</label>
		<div style="display:flex;align-items:center;gap:8px;margin-left:auto">
			<span class="ctrl-label" style="min-width:auto">Format:</span>
			<select id="rzFmt" class="ctrl-select" style="flex:none;width:120px">
				<option value="jpeg">JPEG</option>
				<option value="png">PNG</option>
				<option value="webp">WEBP</option>
			</select>
		</div>
	</div>

	<!-- BTN -->
	<button class="btn-go" id="rzBtn" onclick="doResize()" disabled>
		<i class="fa-solid fa-expand fa-xs"></i> Resize Sekarang
	</button>

	<!-- RESULT -->
	<div id="rzResult" style="display:none"></div>
</div>

<!-- TIPS -->
<div class="bg-amber-50 border border-amber-200 rounded-xl p-4 text-xs text-amber-800 leading-relaxed">
	<strong>💡 Tips:</strong> Resize tidak menambah kualitas — jika ukuran tujuan lebih besar dari asli, gambar mungkin terlihat buram. Format <b>WEBP</b> menghasilkan file paling ringan.
</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 rzFile=null, rzNatW=0, rzNatH=0;
	async function previewResize(inp) {
		rzFile=inp.files[0]; if(!rzFile) return;
		const url=await readURL(rzFile);
		const img=await loadImg(url);
		rzNatW=img.naturalWidth; rzNatH=img.naturalHeight;
		document.getElementById('rzPreviewImg').src=url;
		document.getElementById('rzPreview').style.display='block';
		document.getElementById('rzOrigInfo').innerText=`${rzFile.name} · ${rzNatW}×${rzNatH}px · ${fmtSize(rzFile.size)}`;
		document.getElementById('rzW').value=rzNatW;
		document.getElementById('rzH').value=rzNatH;
		document.getElementById('rzBtn').disabled=false;
		document.getElementById('rzResult').style.display='none';
	}
	function syncRatio(changed) {
		if(!document.getElementById('rzRatio').checked) return;
		const w=parseInt(document.getElementById('rzW').value)||0;
		const h=parseInt(document.getElementById('rzH').value)||0;
		if(!rzNatW||!rzNatH) return;
		if(changed==='w'&&w) document.getElementById('rzH').value=Math.round(w*(rzNatH/rzNatW));
		if(changed==='h'&&h) document.getElementById('rzW').value=Math.round(h*(rzNatW/rzNatH));
	}
	async function doResize() {
		if(!rzFile) return;
		const w=parseInt(document.getElementById('rzW').value);
		const h=parseInt(document.getElementById('rzH').value);
		const fmt=document.getElementById('rzFmt').value;
		if(!w||!h||w<1||h<1) {
			document.getElementById('rzResult').style.display='block';
			document.getElementById('rzResult').innerHTML='<div class="result-err"><i class="fa-solid fa-circle-exclamation fa-xs mr-1"></i>Masukkan lebar dan tinggi yang valid.</div>';
			return;
		}
		const btn=document.getElementById('rzBtn');
		btn.disabled=true; btn.innerHTML='<i class="fa-solid fa-spinner fa-spin"></i> Memproses...';
		const url=await readURL(rzFile);
		const img=await loadImg(url);
		const canvas=document.createElement('canvas');
		canvas.width=w; canvas.height=h;
		canvas.getContext('2d').drawImage(img,0,0,w,h);
		canvas.toBlob(blob=>{
			const dlUrl=URL.createObjectURL(blob);
			const ext=fmt==='jpeg'?'jpg':fmt;
			const res=document.getElementById('rzResult');
			res.style.display='block';
			res.innerHTML=`<div class="result-ok">✅ Berhasil! ${w}×${h}px · ${fmtSize(blob.size)}</div>
			<a href="${dlUrl}" download="resized_${w}x${h}.${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-expand fa-xs"></i> Resize Lagi';
		},'image/'+fmt, fmt==='png'?undefined:0.92);
	}
</script>
<?= $this->endSection(); ?>