<?php
// index.php
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>PHP Watermark Tool</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    body{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial;margin:18px}
    .row{display:flex;gap:12px;align-items:center;margin-bottom:10px}
    label{min-width:140px;display:inline-block}
    .preview{border:1px solid #ddd;padding:10px;max-width:720px}
    input[type="range"]{width:200px}
    .small{font-size:0.9em;color:#555}
    .output-links{margin-top:16px}
    .btn{padding:8px 14px;border-radius:6px;background:#007bff;color:#fff;border:none;cursor:pointer}
  </style>
</head>
<body>
  <h2>PHP Watermark Tool — Text or Logo (Batch)</h2>

  <form id="wmForm" action="process.php" method="post" enctype="multipart/form-data">
    <div class="row">
      <label>Images (multiple allowed)</label>
      <input type="file" name="images[]" id="images" accept="image/*" multiple required>
    </div>

    <div class="row">
      <label>Watermark Type</label>
      <label><input type="radio" name="wm_type" value="text"> Text</label>
      <label><input type="radio" name="wm_type" value="image" checked> Image (logo)</label>
    </div>

    <div id="textOptions" style="display:none">
      <div class="row">
        <label>Watermark Text</label>
        <input type="text" name="wm_text" id="wm_text" placeholder="Sample Watermark" value="SAMPLE">
      </div>
      <div class="row">
        <label>Font size (px)</label>
        <input type="number" name="wm_fontsize" id="wm_fontsize" value="36" min="8" max="200">
      </div>
      <div class="row">
        <label>Color (hex)</label>
        <input type="text" name="wm_color" id="wm_color" value="#FFFFFF">
      </div>
    </div>

    <div id="imageOptions" style="display:block">
      <div class="row">
        <label>Logo (PNG recommended)</label>
        <input type="file" name="wm_logo" id="wm_logo" accept="image/*">
      </div>
      <div class="row">
        <label>Logo scale (%)</label>
        <input type="number" name="wm_scale" id="wm_scale" value="20" min="1" max="200">
      </div>
    </div>

    <div class="row">
      <label>Position</label>
      <select name="position" id="position">
        <option value="bottom-right">Bottom Right</option>
        <option value="bottom-left">Bottom Left</option>
        <option value="top-right">Top Right</option>
        <option value="top-left">Top Left</option>
        <option value="center" selected>Center</option>
        <option value="custom">Custom (px)</option>
      </select>
      <span id="customXY" style="display:none;margin-left:8px">
        X:<input type="number" name="custom_x" id="custom_x" value="50" style="width:72px">
        Y:<input type="number" name="custom_y" id="custom_y" value="50" style="width:72px">
      </span>
    </div>

    <div class="row">
      <label>Opacity (%)</label>
      <input type="range" name="opacity" id="opacity" min="0" max="100" value="70">
      <span class="small" id="opacityVal">70</span>
    </div>

    <div class="row">
      <label>Rotation (°)</label>
      <input type="number" name="rotation" id="rotation" value="0" min="-360" max="360">
    </div>

    <div class="row">
      <label>Output format</label>
      <select name="out_format" id="out_format">
        <option value="auto">Same as input (auto)</option>
        <option value="jpg">JPEG</option>
        <option value="png">PNG</option>
        <option value="webp">WebP (if supported)</option>
      </select>
    </div>

    <div class="row">
      <label></label>
      <button type="submit" class="btn">Watermark & Download</button>
    </div>
  </form>

  <h3>Live preview</h3>
  <div class="preview">
    <canvas id="previewCanvas" width="640" height="360" style="max-width:100%"></canvas>
    <div class="small">Preview uses your first selected image and client-side watermark. Server result may differ slightly.</div>
  </div>

<script>
const wmTypeRadios = document.querySelectorAll('input[name="wm_type"]');
const textOptions = document.getElementById('textOptions');
const imageOptions = document.getElementById('imageOptions');
const imagesInput = document.getElementById('images');
const wmLogoInput = document.getElementById('wm_logo');
const position = document.getElementById('position');
const customXY = document.getElementById('customXY');
const opacity = document.getElementById('opacity');
const opacityVal = document.getElementById('opacityVal');
const rotationInput = document.getElementById('rotation');
const previewCanvas = document.getElementById('previewCanvas');
const ctx = previewCanvas.getContext('2d');

// ⭐ Default settings (logo mode + center)
window.onload = function() {
    document.querySelector('input[value="image"]').checked = true;
    textOptions.style.display = "none";
    imageOptions.style.display = "block";
    position.value = "center";
    drawPreview();
};

wmTypeRadios.forEach(r=>r.addEventListener('change',()=>{
  if(document.querySelector('input[name="wm_type"]:checked').value === 'text'){
    textOptions.style.display='block'; 
    imageOptions.style.display='none';
  } else { 
    textOptions.style.display='none'; 
    imageOptions.style.display='block'; 
  }
  drawPreview();
}));

position.addEventListener('change', ()=> {
  customXY.style.display = position.value === 'custom' ? 'inline-block' : 'none';
  drawPreview();
});

opacity.addEventListener('input', ()=> { opacityVal.textContent = opacity.value; drawPreview(); });
rotationInput.addEventListener('input', drawPreview);
imagesInput.addEventListener('change', drawPreview);
wmLogoInput.addEventListener('change', drawPreview);
document.getElementById('wm_text').addEventListener('input', drawPreview);
document.getElementById('wm_fontsize').addEventListener('input', drawPreview);

function drawPreview(){
  const files = imagesInput.files;
  if(!files || files.length === 0) {
    ctx.fillStyle = "#f6f6f6";
    ctx.fillRect(0,0,previewCanvas.width,previewCanvas.height);
    ctx.fillStyle="#888"; 
    ctx.font="16px Arial"; 
    ctx.fillText("Select an image to preview",20,40);
    return;
  }

  const file = files[0];
  const reader = new FileReader();
  reader.onload = e=>{
    const img = new Image();
    img.onload = ()=>{
      const cw = previewCanvas.width, ch = previewCanvas.height;
      ctx.clearRect(0,0,cw,ch);
      const scale = Math.min(cw/img.width, ch/img.height);
      const iw = img.width*scale, ih = img.height*scale;
      const ix = (cw - iw)/2, iy = (ch - ih)/2;

      ctx.drawImage(img, ix, iy, iw, ih);

      const type = document.querySelector('input[name="wm_type"]:checked').value;
      const op = opacity.value / 100;
      const rotationDeg = parseFloat(rotationInput.value) || 0;
      const rotationRad = rotationDeg * Math.PI / 180;

      if(type === 'text'){
        const txt = document.getElementById('wm_text').value;
        const fsz = parseInt(document.getElementById('wm_fontsize').value)||36;

        ctx.save();
        ctx.globalAlpha = op;
        ctx.font = `${fsz}px Arial`;
        ctx.fillStyle = document.getElementById('wm_color').value;

        let x = ix + iw/2;
        let y = iy + ih/2;

        if(position.value === 'top-left'){ x = ix + 10; y = iy + fsz + 6; }
        if(position.value === 'top-right'){ x = ix + iw - ctx.measureText(txt).width - 10; y = iy + fsz + 6; }
        if(position.value === 'bottom-left'){ x = ix + 10; y = iy + ih - 10; }
        if(position.value === 'bottom-right'){ x = ix + iw - ctx.measureText(txt).width - 10; y = iy + ih - 10; }
        if(position.value === 'custom'){ 
          x = ix + parseInt(document.getElementById('custom_x').value);
          y = iy + parseInt(document.getElementById('custom_y').value);
        }

        ctx.translate(x, y);
        ctx.rotate(rotationRad);
        ctx.fillText(txt, 0, 0);
        ctx.restore();

      } else {
        const logoFiles = wmLogoInput.files;
        if(logoFiles.length > 0){
          const lr = new FileReader();
          lr.onload = le=>{
            const logo = new Image();
            logo.onload = ()=>{
              ctx.save();
              ctx.globalAlpha = op;

              const scalePct = parseInt(document.getElementById('wm_scale').value)/100;
              const lw = iw * scalePct;
              const lh = lw * (logo.height / logo.width);

              let lx = ix + (iw - lw)/2;
              let ly = iy + (ih - lh)/2;

              if(position.value === 'top-left'){ lx = ix + 10; ly = iy + 10; }
              if(position.value === 'top-right'){ lx = ix + iw - lw - 10; ly = iy + 10; }
              if(position.value === 'bottom-left'){ lx = ix + 10; ly = iy + ih - lh - 10; }
              if(position.value === 'bottom-right'){ lx = ix + iw - lw - 10; ly = iy + ih - lh - 10; }
              if(position.value === 'custom'){
                lx = ix + parseInt(document.getElementById('custom_x').value);
                ly = iy + parseInt(document.getElementById('custom_y').value);
              }

              ctx.translate(lx + lw/2, ly + lh/2);
              ctx.rotate(rotationRad);
              ctx.drawImage(logo, -lw/2, -lh/2, lw, lh);

              ctx.restore();
            };
            logo.src = le.target.result;
          };
          lr.readAsDataURL(logoFiles[0]);
        }
      }
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
}

drawPreview();
</script>
</body>
</html>
