@php($title = 'AI Image Tools')
@php($heading = 'AI Image Tools')
@php($sidebar = view()->make('dashboard.partials.customer-sidebar')->render())

@extends('layouts.dashboard', compact('title','heading','sidebar'))

@section('content')
    <div class="space-y-6">
        <div class="bg-white rounded-lg shadow p-4">
            <div class="flex items-center justify-between">
                <h3 class="font-semibold">AI Image Tools</h3>
            </div>
            <p class="mt-2 text-sm text-slate-600">All tools run in your browser; no extra software needed.</p>
            <div class="mt-3 text-sm hidden md:block">
                <a href="#tool1" class="text-blue-600 hover:underline">1) Upload + Info + Preview + Download</a> ·
                <a href="#tool2" class="text-blue-600 hover:underline">2) Rectangular Crop</a> ·
                <a href="#tool3" class="text-blue-600 hover:underline">3) Circular Crop</a> ·
                <a href="#tool4" class="text-blue-600 hover:underline">4) Resize + Compress</a> ·
                <a href="#tool5" class="text-blue-600 hover:underline">5) Format Convert</a>
            </div>
        </div>

        <div id="image-tools">
        <!-- Tool 1: Upload + Info + Preview + Download -->
        <div id="tool1" class="bg-white rounded-lg shadow p-4 space-y-3">
            <h4 class="font-semibold">1) Upload + Info + Preview + Download</h4>
            <input id="t1-file" type="file" accept="image/*" class="border rounded p-2">
            <div class="text-sm text-slate-600" id="t1-info"></div>
            <div class="flex items-center gap-2">
                <button id="t1-preview" class="px-3 py-1.5 bg-slate-800 text-white rounded">Preview</button>
                <a id="t1-download" class="px-3 py-1.5 bg-blue-600 text-white rounded cursor-pointer">Download</a>
            </div>
            <div class="border rounded p-2">
                <img id="t1-preview-img" alt="Preview" class="max-h-72" style="display:none;"/>
            </div>
        </div>
        
        <!-- Tool 2: Rectangular Crop -->
        <div id="tool2" class="bg-white rounded-lg shadow p-4 space-y-3">
            <h4 class="font-semibold">2) Rectangular Crop (drag corners to select)</h4>
            <input id="t2-file" type="file" accept="image/*" class="border rounded p-2">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <div class="relative border rounded">
                        <canvas id="t2-canvas" class="w-full" style="max-height:400px"></canvas>
                    </div>
                </div>
                <div>
                    <div class="flex items-center gap-2 mb-2">
                        <button id="t2-reset" class="px-3 py-1.5 bg-slate-700 text-white rounded">Reset</button>
                        <button id="t2-crop" class="px-3 py-1.5 bg-green-600 text-white rounded">Crop</button>
                        <a id="t2-download" class="px-3 py-1.5 bg-blue-600 text-white rounded cursor-pointer">Download</a>
                    </div>
                    <label class="block text-sm mb-2">Aspect Ratio:
                        <select id="t2-ratio" class="border rounded p-1">
                            <option value="free">Free</option>
                            <option value="1:1">1:1</option>
                            <option value="4:3">4:3</option>
                            <option value="3:2">3:2</option>
                            <option value="16:9">16:9</option>
                        </select>
                    </label>
                    <div class="border rounded p-2">
                        <img id="t2-result" alt="Cropped" class="max-h-72" style="display:none;"/>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tool 3: Circular Crop -->
        <div id="tool3" class="bg-white rounded-lg shadow p-4 space-y-3">
            <h4 class="font-semibold">3) Circular Crop (round)</h4>
            <input id="t3-file" type="file" accept="image/*" class="border rounded p-2">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <div class="relative border rounded">
                        <canvas id="t3-canvas" class="w-full" style="max-height:400px"></canvas>
                    </div>
                </div>
                <div>
                    <div class="flex items-center gap-2 mb-2">
                        <button id="t3-reset" class="px-3 py-1.5 bg-slate-700 text-white rounded">Reset</button>
                        <button id="t3-crop" class="px-3 py-1.5 bg-green-600 text-white rounded">Crop</button>
                        <a id="t3-download" class="px-3 py-1.5 bg-blue-600 text-white rounded cursor-pointer">Download</a>
                    </div>
                    <div class="border rounded p-2">
                        <img id="t3-result" alt="Circular" class="max-h-72" style="display:none;"/>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tool 4: Resize & Compress (Advanced) -->
        <div id="tool4" class="bg-white rounded-lg shadow p-4 space-y-3">
            <h4 class="font-semibold">4) Resize + Compress (Advanced)</h4>
            <input id="t4-file" type="file" accept="image/*" multiple class="border rounded p-2">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="space-y-2">
                    <div class="text-sm font-medium">Marketplace Presets</div>
                    <div class="flex flex-wrap gap-2 mb-2">
                        <button type="button" class="px-2 py-1 bg-slate-200 rounded" data-preset="square-600">Square 600×600</button>
                        <button type="button" class="px-2 py-1 bg-slate-200 rounded" data-preset="grid-thumb">Product Grid 600×400</button>
                        <button type="button" class="px-2 py-1 bg-slate-200 rounded" data-preset="updates-card">Latest Updates 400×240</button>
                        <button type="button" class="px-2 py-1 bg-slate-200 rounded" data-preset="detail-hero">Detail Hero 1280×720</button>
                    </div>
                    <label class="block text-sm">Width (px): <input id="t4-w" type="number" min="1" class="border rounded p-1 w-32"></label>
                    <label class="block text-sm">Height (px): <input id="t4-h" type="number" min="1" class="border rounded p-1 w-32"></label>
                    <label class="block text-sm"><input id="t4-keep" type="checkbox" checked> Keep aspect ratio</label>
                    <label class="block text-sm">Quality (JPEG/WEBP): <input id="t4-q" type="range" min="0" max="1" step="0.05" value="0.85" class="w-52"></label>
                    <label class="block text-sm">Format: 
                        <select id="t4-format" class="border rounded p-1">
                            <option value="image/jpeg">JPEG</option>
                            <option value="image/webp">WEBP</option>
                            <option value="image/png">PNG</option>
                        </select>
                    </label>
                    <div class="grid grid-cols-2 gap-2">
                        <label class="block text-sm">BG Fill (JPEG): <input id="t4-bg" type="color" value="#ffffff" class="border rounded p-1"></label>
                        <label class="block text-sm">Filename: <input id="t4-filename" type="text" placeholder="image" class="border rounded p-1"></label>
                    </div>
                    <div class="text-sm font-medium mt-2">Watermark</div>
                    <div class="grid grid-cols-2 gap-2">
                        <label class="block text-sm">Text: <input id="t4-wm-text" type="text" placeholder="© Marketplace" class="border rounded p-1"></label>
                        <label class="block text-sm">Opacity: <input id="t4-wm-opacity" type="range" min="0" max="1" step="0.05" value="0.35" class="w-40"></label>
                        <label class="block text-sm">Position: 
                            <select id="t4-wm-pos" class="border rounded p-1">
                                <option value="br">Bottom-Right</option>
                                <option value="bl">Bottom-Left</option>
                                <option value="tr">Top-Right</option>
                                <option value="tl">Top-Left</option>
                            </select>
                        </label>
                        <label class="block text-sm">Size: <input id="t4-wm-size" type="number" min="10" value="18" class="border rounded p-1 w-24"></label>
                    </div>
                    <div class="flex items-center gap-2 mt-2">
                        <button id="t4-apply" class="px-3 py-1.5 bg-green-600 text-white rounded">Resize</button>
                        <a id="t4-download" class="px-3 py-1.5 bg-blue-600 text-white rounded cursor-pointer">Download</a>
                        <button id="t4-save" class="px-3 py-1.5 bg-violet-600 text-white rounded">Save to storage</button>
                        <button id="t4-batch" class="px-3 py-1.5 bg-slate-700 text-white rounded">Process all files</button>
                    </div>
                    <span id="t4-save-url" data-url="{{ route('customer.ai_tools.photo_save') }}" class="hidden"></span>
                </div>
                <div class="border rounded p-2">
                    <img id="t4-result" alt="Resized" class="max-h-72" style="display:none;"/>
                </div>
            </div>
        </div>

        <!-- Tool 5: Format Convert -->
        <div id="tool5" class="bg-white rounded-lg shadow p-4 space-y-3">
            <h4 class="font-semibold">5) Format Convert</h4>
            <input id="t5-file" type="file" accept="image/*" class="border rounded p-2">
            <label class="block text-sm">Format: 
                <select id="t5-format" class="border rounded p-1">
                    <option value="image/jpeg">JPEG</option>
                    <option value="image/webp">WEBP</option>
                    <option value="image/png">PNG</option>
                </select>
            </label>
            <div class="flex items-center gap-2">
                <button id="t5-convert" class="px-3 py-1.5 bg-green-600 text-white rounded">Convert</button>
                <a id="t5-download" class="px-3 py-1.5 bg-blue-600 text-white rounded cursor-pointer">Download</a>
            </div>
            <div class="border rounded p-2">
                <img id="t5-result" alt="Converted" class="max-h-72" style="display:none;"/>
            </div>
        </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
// Utility helpers
function formatBytes(bytes) {
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    if (bytes === 0) return '0 Bytes';
    const i = Math.floor(Math.log(bytes) / Math.log(1024));
    return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + ' ' + sizes[i];
}
function fileToImage(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => {
            const img = new Image();
            img.onload = () => resolve(img);
            img.onerror = reject;
            img.src = reader.result;
        };
        reader.onerror = reject;
        reader.readAsDataURL(file);
    });
}
function setDownload(anchor, dataUrl, filename) {
    anchor.href = dataUrl;
    anchor.download = filename || 'download.png';
}

// Tool 1: Upload + Info + Preview + Download
(function(){
    const fileInput = document.getElementById('t1-file');
    const infoEl = document.getElementById('t1-info');
    const previewBtn = document.getElementById('t1-preview');
    const previewImg = document.getElementById('t1-preview-img');
    const downloadA = document.getElementById('t1-download');
    let objectUrl = null;
    function cleanupObjectUrl(){ if(objectUrl){ URL.revokeObjectURL(objectUrl); objectUrl = null; } }
    async function updateInfoAndPreview(file){
        cleanupObjectUrl();
        objectUrl = URL.createObjectURL(file);
        const img = await fileToImage(file);
        infoEl.textContent = `Format: ${file.type || 'unknown'} · Size: ${formatBytes(file.size)} · Dimension: ${img.naturalWidth}×${img.naturalHeight}`;
        previewImg.src = objectUrl; previewImg.style.display = 'block';
        setDownload(downloadA, objectUrl, file.name || 'image');
    }
    fileInput.addEventListener('change', async (e)=>{
        if(e.target.files && e.target.files[0]){
            try { await updateInfoAndPreview(e.target.files[0]); } catch(err){ console.error(err); }
        }
    });
    previewBtn.addEventListener('click', async ()=>{
        if(fileInput.files && fileInput.files[0]){ try{ await updateInfoAndPreview(fileInput.files[0]); }catch(err){console.error(err);} }
    });
})();

// Tool 2: Rectangular Crop with handles + aspect ratio
(function(){
    const fileInput = document.getElementById('t2-file');
    const canvas = document.getElementById('t2-canvas');
    const ctx = canvas.getContext('2d');
    const resetBtn = document.getElementById('t2-reset');
    const cropBtn = document.getElementById('t2-crop');
    const downloadA = document.getElementById('t2-download');
    const resultImg = document.getElementById('t2-result');
    const ratioSel = document.getElementById('t2-ratio');

    let img = null; let drawW=0, drawH=0; let sel=null; let dragging=false; let mode=null; const H=8;
    function fitCanvas(i){
        const maxW=700, maxH=400; let w=i.naturalWidth, h=i.naturalHeight;
        const s=Math.min(maxW/w, maxH/h, 1); w=Math.round(w*s); h=Math.round(h*s);
        canvas.width=w; canvas.height=h; drawW=w; drawH=h;
        ctx.clearRect(0,0,w,h); ctx.drawImage(i,0,0,w,h);
    }
    function draw(){
        ctx.clearRect(0,0,canvas.width,canvas.height); if(img) ctx.drawImage(img,0,0,drawW,drawH);
        if(sel){ ctx.save(); ctx.fillStyle='rgba(0,0,0,0.25)'; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.clearRect(sel.x,sel.y,sel.w,sel.h); ctx.restore(); ctx.strokeStyle='#22c55e'; ctx.lineWidth=2; ctx.strokeRect(sel.x,sel.y,sel.w,sel.h);
            handle(sel.x,sel.y); handle(sel.x+sel.w,sel.y); handle(sel.x,sel.y+sel.h); handle(sel.x+sel.w,sel.y+sel.h);
        }
    }
    function handle(x,y){ ctx.fillStyle='#1f2937'; ctx.fillRect(x-H/2,y-H/2,H,H); }
    function hitHandle(x,y){ if(!sel) return null; const pts=[{x:sel.x,y:sel.y,m:'nw'},{x:sel.x+sel.w,y:sel.y,m:'ne'},{x:sel.x,y:sel.y+sel.h,m:'sw'},{x:sel.x+sel.w,y:sel.y+sel.h,m:'se'}]; for(const p of pts){ if(Math.abs(x-p.x)<=H && Math.abs(y-p.y)<=H) return p.m;} return null; }
    function inside(x,y){ return sel && x>=sel.x && y>=sel.y && x<=sel.x+sel.w && y<=sel.x+sel.h; }
    function getRatio(){ const v=ratioSel.value||'free'; if(v==='free') return null; const [a,b]=v.split(':').map(Number); return a/b; }
    function clampSel(){ if(!sel) return; sel.x=Math.max(0,Math.min(sel.x,canvas.width-sel.w)); sel.y=Math.max(0,Math.min(sel.y,canvas.height-sel.h)); }
    function lockAspect(){ const r=getRatio(); if(!sel||!r) return; let w=sel.w, h=sel.h; if(w<=0||h<=0) return; let targetH=Math.round(w/r); if(targetH>canvas.height){ let targetW=Math.round(h*r); sel.w=targetW; } else { sel.h=targetH; } clampSel(); }
    let start={x:0,y:0};
    canvas.addEventListener('mousedown',(e)=>{ if(!img) return; const r=canvas.getBoundingClientRect(); const x=e.clientX-r.left, y=e.clientY-r.top; start={x,y}; if(sel){ const hm=hitHandle(x,y); if(hm){ mode=hm; dragging=true; return;} if(inside(x,y)){ mode='move'; dragging=true; return;} }
        sel={x,y,w:0,h:0}; mode='new'; dragging=true; draw(); });
    canvas.addEventListener('mousemove',(e)=>{ if(!dragging||!sel) return; const r=canvas.getBoundingClientRect(); const x=e.clientX-r.left, y=e.clientY-r.top; const dx=x-start.x, dy=y-start.y; if(mode==='new'){ sel.x=Math.min(start.x,x); sel.y=Math.min(start.y,y); sel.w=Math.abs(dx); sel.h=Math.abs(dy); lockAspect(); } else if(mode==='move'){ sel.x+=dx; sel.y+=dy; start={x,y}; clampSel(); } else { if(mode==='nw'){ sel.x+=dx; sel.y+=dy; sel.w-=dx; sel.h-=dy;} if(mode==='ne'){ sel.y+=dy; sel.w+=dx; sel.h-=dy;} if(mode==='sw'){ sel.x+=dx; sel.w-=dx; sel.h+=dy;} if(mode==='se'){ sel.w+=dx; sel.h+=dy;} start={x,y}; if(sel.w<0){ sel.x+=sel.w; sel.w=Math.abs(sel.w);} if(sel.h<0){ sel.y+=sel.h; sel.h=Math.abs(sel.h);} clampSel(); lockAspect(); } draw(); });
    window.addEventListener('mouseup',()=>{ dragging=false; mode=null; });
    resetBtn.addEventListener('click',()=>{ sel=null; draw(); resultImg.style.display='none'; });
    cropBtn.addEventListener('click',()=>{ if(!img||!sel||sel.w<=0||sel.h<=0) return; const sx=Math.round(sel.x*img.naturalWidth/drawW); const sy=Math.round(sel.y*img.naturalHeight/drawH); const sw=Math.round(sel.w*img.naturalWidth/drawW); const sh=Math.round(sel.h*img.naturalHeight/drawH); const out=document.createElement('canvas'); out.width=sw; out.height=sh; const o=out.getContext('2d'); o.drawImage(img,sx,sy,sw,sh,0,0,sw,sh); const data=out.toDataURL('image/png'); resultImg.src=data; resultImg.style.display='block'; setDownload(downloadA,data,'crop.png'); });
    fileInput.addEventListener('change', async (e)=>{ const f=e.target.files&&e.target.files[0]; if(!f) return; img=await fileToImage(f); fitCanvas(img); sel=null; resultImg.style.display='none'; });
})();
</script>

<script>
// Tool 3: Circular Crop
(function(){
    const fileInput = document.getElementById('t3-file');
    const canvas = document.getElementById('t3-canvas');
    const ctx = canvas.getContext('2d');
    const resetBtn = document.getElementById('t3-reset');
    const cropBtn = document.getElementById('t3-crop');
    const downloadA = document.getElementById('t3-download');
    const resultImg = document.getElementById('t3-result');

    let img = null; let drawW=0, drawH=0; let center=null; let radius=0; let dragging=false; let mode='none';
    function fitCanvas(i){ const maxW=700,maxH=400; let w=i.naturalWidth,h=i.naturalHeight; const s=Math.min(maxW/w,maxH/h,1); w=Math.round(w*s); h=Math.round(h*s); canvas.width=w; canvas.height=h; drawW=w; drawH=h; draw(); }
    function draw(){ ctx.clearRect(0,0,canvas.width,canvas.height); if(img) ctx.drawImage(img,0,0,drawW,drawH); if(center&&radius>0){ ctx.save(); ctx.fillStyle='rgba(0,0,0,0.25)'; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.globalCompositeOperation='destination-out'; ctx.beginPath(); ctx.arc(center.x,center.y,radius,0,Math.PI*2); ctx.fill(); ctx.restore(); ctx.strokeStyle='#22c55e'; ctx.lineWidth=2; ctx.beginPath(); ctx.arc(center.x,center.y,radius,0,Math.PI*2); ctx.stroke(); } }
    function dist(a,b){ const dx=a.x-b.x, dy=a.y-b.y; return Math.hypot(dx,dy); }
    canvas.addEventListener('mousedown',(e)=>{ if(!img) return; const r=canvas.getBoundingClientRect(); const pt={x:e.clientX-r.left, y:e.clientY-r.top}; if(center&&radius>0 && Math.abs(dist(pt,center)-radius)<10){ mode='resize'; dragging=true; } else { center=pt; radius=0; mode='new'; dragging=true; } });
    canvas.addEventListener('mousemove',(e)=>{ if(!dragging||!center) return; const r=canvas.getBoundingClientRect(); const pt={x:e.clientX-r.left, y:e.clientY-r.top}; if(mode==='new'||mode==='resize'){ radius=Math.min(dist(pt,center), Math.min(center.x,center.y, canvas.width-center.x, canvas.height-center.y)); draw(); } });
    window.addEventListener('mouseup',()=>{ dragging=false; mode='none'; });
    resetBtn.addEventListener('click',()=>{ center=null; radius=0; draw(); resultImg.style.display='none'; });
    cropBtn.addEventListener('click',()=>{ if(!img||!center||radius<=0) return; const sx=Math.round((center.x-radius)*img.naturalWidth/drawW); const sy=Math.round((center.y-radius)*img.naturalHeight/drawH); const sw=Math.round((radius*2)*img.naturalWidth/drawW); const sh=Math.round((radius*2)*img.naturalHeight/drawH); const out=document.createElement('canvas'); out.width=Math.round(radius*2); out.height=Math.round(radius*2); const o=out.getContext('2d'); o.save(); o.beginPath(); o.arc(radius,radius,radius,0,Math.PI*2); o.clip(); o.drawImage(img,sx,sy,sw,sh,0,0,out.width,out.height); o.restore(); const data=out.toDataURL('image/png'); resultImg.src=data; resultImg.style.display='block'; setDownload(downloadA,data,'circle.png'); });
    fileInput.addEventListener('change', async (e)=>{ const f=e.target.files&&e.target.files[0]; if(!f) return; img=await fileToImage(f); center=null; radius=0; fitCanvas(img); resultImg.style.display='none'; });
})();

// Tool 4: Resize & Compress (Advanced)
(function(){
    const fileInput=document.getElementById('t4-file'), wInput=document.getElementById('t4-w'), hInput=document.getElementById('t4-h'), keepInput=document.getElementById('t4-keep'), qInput=document.getElementById('t4-q'), fmtSel=document.getElementById('t4-format'), applyBtn=document.getElementById('t4-apply'), downloadA=document.getElementById('t4-download'), resultImg=document.getElementById('t4-result');
    const bgInput=document.getElementById('t4-bg'), fnInput=document.getElementById('t4-filename'), saveBtn=document.getElementById('t4-save'), batchBtn=document.getElementById('t4-batch');
    const wmText=document.getElementById('t4-wm-text'), wmPos=document.getElementById('t4-wm-pos'), wmOpacity=document.getElementById('t4-wm-opacity'), wmSize=document.getElementById('t4-wm-size');
    const saveUrlEl=document.getElementById('t4-save-url');
    let img=null; let files=[];

    function applyResize(image){
        let w=parseInt(wInput.value||0,10), h=parseInt(hInput.value||0,10);
        if(keepInput.checked){ const r=image.naturalWidth/image.naturalHeight; if(w&&!h) h=Math.round(w/r); else if(h&&!w) w=Math.round(h*r); else if(!w&&!h){ w=image.naturalWidth; h=image.naturalHeight; } }
        else { if(!w) w=image.naturalWidth; if(!h) h=image.naturalHeight; }
        const c=document.createElement('canvas'); c.width=w; c.height=h; const o=c.getContext('2d');
        const type=fmtSel.value||'image/png';
        if(type==='image/jpeg'){ const bg=bgInput.value||'#ffffff'; o.fillStyle=bg; o.fillRect(0,0,w,h); }
        o.drawImage(image,0,0,image.naturalWidth,image.naturalHeight,0,0,w,h);
        const text=(wmText.value||'').trim(); if(text){
            const pad=12; const size=Math.max(10, parseInt(wmSize.value||18,10)); o.font=`bold ${size}px sans-serif`;
            o.fillStyle='rgba(0,0,0,'+Math.min(1,Math.max(0,parseFloat(wmOpacity.value||0.35)))+')';
            o.textBaseline='bottom';
            let x=pad, y=h-pad;
            if(wmPos.value==='br'){ x=w-pad; y=h-pad; o.textAlign='right'; }
            else if(wmPos.value==='tr'){ x=w-pad; y=pad+size; o.textAlign='right'; o.textBaseline='alphabetic'; }
            else if(wmPos.value==='tl'){ x=pad; y=pad+size; o.textAlign='left'; o.textBaseline='alphabetic'; }
            else { o.textAlign='left'; }
            o.save(); o.shadowColor='rgba(255,255,255,0.6)'; o.shadowBlur=2; o.shadowOffsetX=1; o.shadowOffsetY=1; o.fillText(text,x,y); o.restore();
        }
        const q=Math.max(0,Math.min(parseFloat(qInput.value||0.85),1));
        const data= type==='image/png' ? c.toDataURL('image/png') : c.toDataURL(type,q);
        const ext=type==='image/jpeg'?'jpg':(type==='image/webp'?'webp':'png');
        return {data, ext};
    }

    fileInput.addEventListener('change', async (e)=>{ files=Array.from(e.target.files||[]); const f=files[0]; if(!f) return; img=await fileToImage(f); wInput.value=img.naturalWidth; hInput.value=img.naturalHeight; resultImg.style.display='none'; });
    applyBtn.addEventListener('click',()=>{ if(!img) return; const out=applyResize(img); resultImg.src=out.data; resultImg.style.display='block'; const base=(fnInput.value||'image'); setDownload(downloadA,out.data,`${base}.${out.ext}`); });
    batchBtn.addEventListener('click', async ()=>{
        if(!files.length) return; const type=fmtSel.value||'image/png'; const base=(fnInput.value||'image');
        for(let i=0;i<files.length;i++){
            const image=await fileToImage(files[i]); const out=applyResize(image); const a=document.createElement('a'); a.href=out.data; a.download=`${base}-${i+1}.${out.ext}`; document.body.appendChild(a); a.click(); a.remove(); await new Promise(r=>setTimeout(r,150));
        }
    });
    saveBtn.addEventListener('click', async ()=>{
        if(!img) return; const out=applyResize(img); const base=(fnInput.value||'image'); const blob= await (await fetch(out.data)).blob();
        const fd=new FormData(); fd.append('file', blob, `${base}.${out.ext}`); fd.append('format', out.ext);
        const url=saveUrlEl.dataset.url; 
        try{
            const res= await fetch(url, { method:'POST', body: fd });
            if(res.ok){ alert('Saved to storage.'); } else { alert('Failed to save.'); }
        }catch(err){ console.error(err); alert('Error saving file.'); }
    });
    document.querySelectorAll('[data-preset]').forEach(btn=>{
        btn.addEventListener('click',()=>{
            const p=btn.getAttribute('data-preset');
            if(p==='square-600'){ wInput.value=600; hInput.value=600; }
            else if(p==='grid-thumb'){ wInput.value=600; hInput.value=400; }
            else if(p==='updates-card'){ wInput.value=400; hInput.value=240; }
            else if(p==='detail-hero'){ wInput.value=1280; hInput.value=720; }
        });
    });
})();

// Tool 5: Format Convert
(function(){ const fileInput=document.getElementById('t5-file'), fmtSel=document.getElementById('t5-format'), convertBtn=document.getElementById('t5-convert'), downloadA=document.getElementById('t5-download'), resultImg=document.getElementById('t5-result'); let img=null; fileInput.addEventListener('change', async (e)=>{ const f=e.target.files&&e.target.files[0]; if(!f) return; img=await fileToImage(f); resultImg.style.display='none'; }); convertBtn.addEventListener('click',()=>{ if(!img) return; const type=fmtSel.value||'image/png'; const c=document.createElement('canvas'); c.width=img.naturalWidth; c.height=img.naturalHeight; const o=c.getContext('2d'); o.drawImage(img,0,0); const data=c.toDataURL(type); resultImg.src=data; resultImg.style.display='block'; const ext=type==='image/jpeg'?'jpg':(type==='image/webp'?'webp':'png'); setDownload(downloadA,data,`converted.${ext}`); }); })();
</script>
@endsection