@include('vendorr.header')

<meta name="csrf-token" content="{{ csrf_token() }}">

<style>
    body { background-color: #f4f4f4; }
    .canvas-wrap { display:flex; justify-content:center; align-items:center; padding: 20px 0; }
    #greetingCanvas {
        border-radius:8px;
        box-shadow:0 6px 18px rgba(0,0,0,0.08);
        background-color: #fff;
    }
</style>

<div class="main-content app-content">
  <div class="main-container container-fluid">
    <div class="breadcrumb-header justify-content-between">
      <div class="my-auto"><h4 class="page-title">Greeting Creator</h4></div>
    </div>

    <div class="card">
      <div class="card-body">
        <h2>Greeting Preview</h2>

        {{-- Pass greeting data via data-* --}}
        <div id="greeting-data"
             data-bg-type="{{ e($greeting->background_type ?? 'color') }}"
             data-bg-value="{{ e('https://tradevyapar.com/uploads/greeting_templates/' . ($greeting->background_value ?? '')) }}"
             data-text-color="{{ e($greeting->text_color ?? '#000000') }}"
             data-text-font="{{ e($greeting->text_font ?? 'Arial') }}"
             data-text="{{ e($greeting->text_content ?? '') }}"
             data-logo="{{ e($greeting->logo_image ?? '') }}"
             data-website="{{ e($greeting->website ?? '') }}"
             data-phone="{{ e($greeting->phone ?? '') }}"
             style="display:none;"></div>

        <div class="canvas-wrap">
          <canvas id="greetingCanvas" width="600" height="400"></canvas>
        </div>

        <div class="text-center" style="margin-top:12px;">
          <button id="downloadBtn" class="btn btn-primary">Download</button>
          <button id="fbShareBtn" class="btn btn-success">Post on Facebook</button>
          <button id="instaBtn" class="btn btn-danger">Post on Instagram</button>
        </div>

      </div>
    </div>
  </div>
</div>

@include('vendorr.footer')

<script>
(function () {
    function htmlDecode(input) {
        const txt = document.createElement('textarea');
        txt.innerHTML = input;
        return txt.value;
    }
    function absUrl(maybeUrl) {
        if (!maybeUrl) return null;
        if (maybeUrl.startsWith('http://') || maybeUrl.startsWith('https://')) return maybeUrl;
        if (maybeUrl.startsWith('//')) return window.location.protocol + maybeUrl;
        if (maybeUrl.startsWith('/')) return window.location.origin + maybeUrl;
        return maybeUrl;
    }

    const ds = document.getElementById('greeting-data').dataset;
    const backgroundType     = (ds.bgType || 'color').toLowerCase();
    const bgValueRaw         = ds.bgValue || '';
    const backgroundImageUrl = (backgroundType === 'image' || backgroundType === 'template') && bgValueRaw ? absUrl(bgValueRaw) : null;
    const backgroundColor    = backgroundType === 'color' ? (bgValueRaw || '#ffffff') : '#ffffff';
    const textColor          = ds.textColor || '#000000';
    const textFont           = ds.textFont || 'Arial';
    const textContent        = htmlDecode(ds.text || '');
    const logoUrl            = ds.logo ? absUrl(ds.logo.trim()) : null;
    const website            = htmlDecode(ds.website || '');
    const phone              = htmlDecode(ds.phone || '');

    const canvas = document.getElementById('greetingCanvas');
    const ctx = canvas.getContext('2d');

    function scaleCanvasForDPR() {
        const dpr = window.devicePixelRatio || 1;
        const cssWidth  = canvas.width;
        const cssHeight = canvas.height;
        canvas.width  = Math.round(cssWidth * dpr);
        canvas.height = Math.round(cssHeight * dpr);
        canvas.style.width  = cssWidth + 'px';
        canvas.style.height = cssHeight + 'px';
        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }

    function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
        const words = String(text).split(' ');
        let line = '';
        for (let n = 0; n < words.length; n++) {
            const testLine = line + words[n] + ' ';
            const testWidth = ctx.measureText(testLine).width;
            if (testWidth > maxWidth && n > 0) {
                ctx.fillText(line.trim(), x, y);
                line = words[n] + ' ';
                y += lineHeight;
            } else {
                line = testLine;
            }
        }
        ctx.fillText(line.trim(), x, y);
        return y;
    }

    function drawText() {
        ctx.fillStyle = textColor || '#000';
        const fontSize = Math.round((canvas.height / (window.devicePixelRatio || 1)) * 0.07);
        const safeFont = textFont && textFont.length ? textFont : 'Arial';
        ctx.font = `${fontSize}px ${safeFont}`;
        ctx.textBaseline = 'top';

        const paddingX = 40;
        const maxWidth = (canvas.width / (window.devicePixelRatio || 1)) - paddingX * 2;
        const startY = Math.round((canvas.height / (window.devicePixelRatio || 1)) * 0.18);
        const lineHeight = Math.round(fontSize * 1.2);

        wrapText(ctx, textContent || '', paddingX, startY, maxWidth, lineHeight);
    }

    function drawLogo(cb) {
        if (!logoUrl) { if (cb) cb(); return; }
        const img = new Image();
        img.crossOrigin = 'anonymous';
        img.src = logoUrl;
        img.onload = function () {
            const canvasW = canvas.width / (window.devicePixelRatio || 1);
            const canvasH = canvas.height / (window.devicePixelRatio || 1);

            const maxW = Math.round(canvasW * 0.15);
            const maxH = Math.round(canvasH * 0.18);

            let drawW = img.width, drawH = img.height;
            const ratio = Math.min(maxW / drawW, maxH / drawH, 1);
            drawW = Math.round(drawW * ratio);
            drawH = Math.round(drawH * ratio);
            const padding = 10;
            const x = canvasW - drawW - padding;
            const y = padding;

            ctx.drawImage(img, x, y, drawW, drawH);
            if (cb) cb();
        };
        img.onerror = function () { if (cb) cb(); };
    }

    // Footer draws phone on first line (bolder), website below it (smaller)
    function drawFooter() {
        if (!phone && !website) return;
        const canvasW = canvas.width / (window.devicePixelRatio || 1);
        const canvasH = canvas.height / (window.devicePixelRatio || 1);

        const paddingLeft = 20;
        const paddingBottom = 12;

        // phone: larger & bold
        if (phone) {
            ctx.fillStyle = '#00ccff';
            const phoneFontSize = Math.round(canvasH * 0.05); // ~5% of height
            ctx.font = `bold ${phoneFontSize}px Arial`;
            ctx.textBaseline = 'top';
            ctx.fillText(phone, paddingLeft, canvasH - paddingBottom - 50); // bottom offset handled by next line
        }

        // website: smaller, below phone
        if (website) {
            ctx.fillStyle = '#00ccff';
            const siteFontSize = Math.round(canvasH * 0.04); // slightly smaller
            ctx.font = `${siteFontSize}px Arial`;
            ctx.textBaseline = 'top';
            // calculate y just below the phone text: measure phone height
            const phoneFontSize = Math.round(canvasH * 0.05);
            const phoneHeight = phone ? phoneFontSize : 0;
            const gap = 6; // px gap between phone and website
            // y position: bottom - paddingBottom - phoneHeight - gap
            const y = canvasH - paddingBottom - phoneHeight - gap;
            ctx.fillText(website, paddingLeft, y);
        }
    }

    function render() {
        scaleCanvasForDPR();
        const canvasW = canvas.width / (window.devicePixelRatio || 1);
        const canvasH = canvas.height / (window.devicePixelRatio || 1);
        ctx.clearRect(0, 0, canvasW, canvasH);

        function afterBg() { drawText(); drawLogo(drawFooter); }

        if ((backgroundType === 'image' || backgroundType === 'template') && backgroundImageUrl) {
            const bg = new Image();
            bg.crossOrigin = 'anonymous';
            bg.src = backgroundImageUrl;
            bg.onload = function () { ctx.drawImage(bg, 0, 0, canvasW, canvasH); afterBg(); };
            bg.onerror = function () { ctx.fillStyle = backgroundColor; ctx.fillRect(0, 0, canvasW, canvasH); afterBg(); };
        } else {
            ctx.fillStyle = backgroundColor;
            ctx.fillRect(0, 0, canvasW, canvasH);
            afterBg();
        }
    }

    window.addEventListener('load', render);

    document.getElementById('downloadBtn').addEventListener('click', () => {
        const link = document.createElement('a');
        link.download = 'greeting.png';
        link.href = canvas.toDataURL('image/png');
        link.click();
    });
    document.getElementById('instaBtn').addEventListener('click', () => {
        alert("Instagram doesn’t allow direct posting from web.\nDownload the image and upload it manually.");
        document.getElementById('downloadBtn').click();
    });
    document.getElementById('fbShareBtn').addEventListener('click', async () => {
        const token = document.querySelector('meta[name="csrf-token"]').content;
        const blob = (() => {
            const dataurl = canvas.toDataURL('image/png');
            const arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]);
            let n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) u8arr[n] = bstr.charCodeAt(n);
            return new Blob([u8arr], { type: mime });
        })();
        const formData = new FormData(); formData.append('image', blob, 'greeting.png');
        const resp = await fetch('/upload-greeting',{method:'POST',body:formData,headers:{'X-CSRF-TOKEN':token}});
        const json = await resp.json();
        if (json.url) {
            if (typeof FB !== 'undefined' && FB.ui) {
                FB.ui({ method: 'share', href: json.url }, function(response){ console.log('FB share', response); });
            } else {
                window.open(json.url, '_blank');
            }
        } else {
            alert('Failed to create shareable link.');
        }
    });
})();
</script>