@extends('digitalmenu::layouts.app')

@section('title', 'QR Management | ' . $shop->name)

@section('styles')
<style>
    #qr-code canvas, #qr-code img { display: block; }
    @media print {
        body * { visibility: hidden; }
        #print-area, #print-area * { visibility: visible; }
        #print-area {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
</style>
@endsection

@section('content')
@php
    $menuUrl   = url('/digital-menu/shop/' . $shop->short_code);
    $isFood    = $shopType === 'food_and_drink';
    $typeLabel = $isFood ? 'Food & Drink' : 'Retail';
    $typeIcon  = $isFood ? 'restaurant_menu' : 'storefront';
    $typeColor = $isFood ? 'text-tertiary' : 'text-secondary';
    $typeBg    = $isFood ? 'bg-tertiary-fixed' : 'bg-secondary-fixed';

    // Pre-encode the logo server-side so the canvas can draw it without CORS
    $logoDataUri = null;
    if (!empty($shop->logo)) {
        try {
            $logoBytes = @file_get_contents(config('global.s3_path') . 'shop/' . $shop->logo);
            if ($logoBytes !== false) {
                $mime = (new \finfo(FILEINFO_MIME_TYPE))->buffer($logoBytes) ?: 'image/jpeg';
                $logoDataUri = 'data:' . $mime . ';base64,' . base64_encode($logoBytes);
            }
        } catch (\Exception $e) {}
    }
@endphp

<div class="max-w-5xl mx-auto pb-24">

    {{-- Page Header --}}
    <div class="mb-10">
        <h1 class="font-display text-4xl md:text-5xl font-extrabold text-on-surface tracking-tight leading-tight">QR Code</h1>
        <p class="font-body text-on-surface-variant mt-3 text-lg max-w-2xl">
            Scan this code to access the digital menu for <strong>{{ $shop->name }}</strong>.
        </p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">

        {{-- QR Preview Panel --}}
        <div class="lg:col-span-7 bg-surface-container-low rounded-2xl p-10 flex flex-col items-center relative overflow-hidden shadow-[0px_12px_32px_rgba(25,28,29,0.06)]">
            <div class="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl pointer-events-none"></div>
            <div class="absolute bottom-0 left-0 w-48 h-48 bg-tertiary/5 rounded-full translate-y-1/2 -translate-x-1/2 blur-3xl pointer-events-none"></div>

            <div class="relative z-10 w-full flex flex-col items-center">

                {{-- QR Code Card --}}
                <div id="print-area" class="w-80 bg-surface-container-lowest rounded-xl shadow-[0px_12px_32px_rgba(25,28,29,0.06)] mb-8 overflow-hidden flex flex-col items-center relative">

                    {{-- Top accent gradient bar --}}
                    <div class="w-full h-2 bg-gradient-to-r from-primary to-primary-container flex-shrink-0"></div>

                    {{-- Brand Header --}}
                    <header class="w-full flex flex-col items-center text-center px-8 pt-8 pb-5 space-y-3">
                        @if (!empty($shop->logo))
                            <div class="w-16 h-16 rounded-full bg-surface-container flex items-center justify-center shadow-[0px_12px_32px_rgba(25,28,29,0.06)] overflow-hidden">
                                <img src="{{ config('global.s3_path') . 'shop/' . $shop->logo }}"
                                     alt="{{ $shop->name }}"
                                     class="w-full h-full object-cover">
                            </div>
                        @else
                            <div class="w-16 h-16 rounded-full bg-surface-container flex items-center justify-center shadow-[0px_12px_32px_rgba(25,28,29,0.06)]">
                                <span class="material-symbols-outlined text-4xl text-tertiary" style="font-variation-settings: 'FILL' 1;">{{ $typeIcon }}</span>
                            </div>
                        @endif
                        <div>
                            <h1 class="font-display font-extrabold text-2xl tracking-tight text-on-surface leading-tight">{{ $shop->name }}</h1>
                            <p class="font-label text-xs text-tertiary uppercase tracking-widest font-semibold mt-1">Digital Menu</p>
                        </div>
                    </header>

                    {{-- QR Code Focus Area --}}
                    <div class="w-full px-4 pb-8">
                        <div class="bg-surface-container-low rounded-xl p-6 flex flex-col items-center space-y-5">
                            <h2 class="font-headline text-base font-bold text-center text-on-surface">SCAN TO VIEW MENU</h2>

                            {{-- QR box with decorative corner accents --}}
                            <div class="relative">
                                <div class="bg-surface-container-lowest rounded-lg p-3 shadow-[0px_4px_16px_rgba(25,28,29,0.08)] border border-outline-variant/20 inline-block">
                                    <div id="qr-code"></div>
                                </div>
                                <div class="absolute -top-px -left-px w-4 h-4 border-t-2 border-l-2 border-primary pointer-events-none"></div>
                                <div class="absolute -top-px -right-px w-4 h-4 border-t-2 border-r-2 border-primary pointer-events-none"></div>
                                <div class="absolute -bottom-px -left-px w-4 h-4 border-b-2 border-l-2 border-primary pointer-events-none"></div>
                                <div class="absolute -bottom-px -right-px w-4 h-4 border-b-2 border-r-2 border-primary pointer-events-none"></div>
                            </div>

                            <p class="text-center font-body text-on-surface-variant text-xs px-2">Point your camera at the code to view the menu.</p>
                        </div>
                    </div>

                    <p class="text-center text-xs text-on-surface-variant/60 px-6 pb-6 mt-4 leading-relaxed">
                        &copy; {{ date('Y') }} VEMBERS - Digital Menu (<a href="https://vembers.com" target="_blank" rel="noopener" class="hover:text-primary transition-colors">https://vembers.com</a>)
                    </p>

                </div>

                {{-- Action Buttons --}}
                <div class="flex justify-center">
                    <button id="btn-download-png"
                            class="inline-flex items-center gap-2 px-5 py-2 rounded-lg bg-surface-container-lowest hover:bg-primary hover:text-on-primary transition-all group shadow-sm border border-outline-variant/30 text-on-surface">
                        <span class="material-symbols-outlined text-base group-hover:scale-110 transition-transform" style="font-size:18px;">download</span>
                        <span class="text-xs font-semibold uppercase tracking-wider">Download PNG</span>
                    </button>
                </div>

            </div>
        </div>

        {{-- Info Panel --}}
        <div class="lg:col-span-5 flex flex-col gap-6">

            {{-- Shop Details --}}
            <section class="bg-surface-container-lowest rounded-2xl p-8 shadow-[0px_12px_32px_rgba(25,28,29,0.06)]">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-10 h-10 rounded-full bg-primary-fixed flex items-center justify-center text-primary">
                        <span class="material-symbols-outlined">store</span>
                    </div>
                    <h2 class="text-xl font-bold tracking-tight font-headline">Shop Details</h2>
                </div>

                <dl class="space-y-4">
                    <div>
                        <dt class="text-xs font-bold text-on-surface-variant uppercase tracking-widest mb-1">Shop Name</dt>
                        <dd class="text-on-surface font-semibold">{{ $shop->name }}</dd>
                    </div>
                    @if ($shop->short_description)
                    <div>
                        <dt class="text-xs font-bold text-on-surface-variant uppercase tracking-widest mb-1">Description</dt>
                        <dd class="text-on-surface-variant text-sm">{{ $shop->short_description }}</dd>
                    </div>
                    @endif
                    <div>
                        <dt class="text-xs font-bold text-on-surface-variant uppercase tracking-widest mb-1">Menu Type</dt>
                        <dd class="flex items-center gap-2 mt-1">
                            <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold {{ $typeBg }} {{ $typeColor }}">
                                <span class="material-symbols-outlined text-sm">{{ $typeIcon }}</span>
                                {{ $typeLabel }}
                            </span>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-xs font-bold text-on-surface-variant uppercase tracking-widest mb-1">Menu URL</dt>
                        <dd class="text-sm font-medium text-on-surface-variant break-all mt-1">
                            <a href="{{ $menuUrl }}" target="_blank" class="text-tertiary hover:underline flex items-start gap-1">
                                <span class="material-symbols-outlined text-sm mt-0.5 flex-shrink-0">open_in_new</span>
                                {{ $menuUrl }}
                            </a>
                        </dd>
                    </div>
                </dl>
            </section>

            {{-- Usage Tip --}}
            <section class="bg-tertiary-fixed/30 rounded-2xl p-6 border border-tertiary/10">
                <div class="flex items-start gap-3">
                    <span class="material-symbols-outlined text-tertiary mt-0.5" style="font-variation-settings: 'FILL' 1;">tips_and_updates</span>
                    <div>
                        <h3 class="font-bold text-on-surface text-sm mb-1">How to use</h3>
                        <p class="text-xs text-on-surface-variant leading-relaxed">
                            Print this QR code and place it on your tables or counter.
                            Customers scan it with their phone camera to instantly view your
                            <strong>{{ strtolower($typeLabel) }}</strong> menu — no app required.
                        </p>
                    </div>
                </div>
            </section>

        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
    const menuUrl     = {!! json_encode($menuUrl) !!};
    const shopName    = {!! json_encode($shop->name) !!};
    const logoDataUri = {!! json_encode($logoDataUri) !!};
    const typeIcon    = {!! json_encode($typeIcon) !!};

    new QRCode(document.getElementById('qr-code'), {
        text:         menuUrl,
        width:        200,
        height:       200,
        colorDark:    '#b81311',
        colorLight:   '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
    });

    document.getElementById('btn-download-png').addEventListener('click', function () {
        setTimeout(downloadCardPng, 150);
    });

    async function downloadCardPng() {
        const qrCanvas = document.querySelector('#qr-code canvas');
        if (!qrCanvas) return;

        const SCALE = 2;
        const CARD_W = 400;

        // Theme colours (matching Tailwind config)
        const COL = {
            primary:            '#b81311',
            primaryContainer:   '#dc3128',
            surface:            '#ffffff',
            surfaceContainer:   '#ffe9e6',
            surfaceContainerLow:'#fff0ee',
            onSurface:          '#281715',
            onSurfaceVariant:   '#5c403c',
            tertiary:           '#006576',
            outlineVariant:     '#e5bdb8',
        };

        // Layout constants (mirrors the Tailwind card)
        const ACCENT_H      = 8;   // h-2
        const H_PAD_TOP     = 32;  // pt-8
        const LOGO_SIZE     = 64;  // w-16 h-16
        const SPACE_Y3      = 12;  // space-y-3
        const NAME_FONT     = 24;
        const SUB_GAP       = 6;
        const SUB_FONT      = 11;
        const H_PAD_BOT     = 20;  // pb-5
        const SECT_MX       = 16;  // px-4
        const SECT_PAD      = 24;  // p-6
        const HEADING_FONT  = 16;
        const HEADING_GAP   = 20;  // space-y-5
        const QR_SIZE       = 200;
        const QR_PAD        = 12;  // p-3
        const QR_BOX        = QR_SIZE + QR_PAD * 2;
        const QR_GAP        = 20;  // space-y-5
        const INSTR_FONT    = 11;
        const OUTER_BOT     = 32;  // pb-8
        const COPY_GAP      = 16;  // mt-4
        const COPY_FONT     = 11;
        const COPY_LINE_H   = 15;

        const headerH = H_PAD_TOP + LOGO_SIZE + SPACE_Y3 + NAME_FONT + SUB_GAP + SUB_FONT + H_PAD_BOT;
        const sectH   = SECT_PAD + HEADING_FONT + HEADING_GAP + QR_BOX + QR_GAP + INSTR_FONT + SECT_PAD;
        const copyH   = COPY_GAP + COPY_LINE_H * 2;
        const CARD_H  = ACCENT_H + headerH + sectH + copyH + OUTER_BOT;

        const c   = document.createElement('canvas');
        c.width   = CARD_W * SCALE;
        c.height  = CARD_H * SCALE;
        const ctx = c.getContext('2d');
        ctx.scale(SCALE, SCALE);

        const cx = CARD_W / 2;

        // ── Card background ──────────────────────────────────────
        ctx.fillStyle = COL.surface;
        roundRect(ctx, 0, 0, CARD_W, CARD_H, 12);
        ctx.fill();

        // ── Top gradient accent bar ───────────────────────────────
        const grad = ctx.createLinearGradient(0, 0, CARD_W, 0);
        grad.addColorStop(0, COL.primary);
        grad.addColorStop(1, COL.primaryContainer);
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, CARD_W, ACCENT_H);

        // ── Logo ──────────────────────────────────────────────────
        let y = ACCENT_H + H_PAD_TOP;
        const logoCY = y + LOGO_SIZE / 2;

        // Circle background
        ctx.fillStyle = COL.surfaceContainer;
        ctx.beginPath();
        ctx.arc(cx, logoCY, LOGO_SIZE / 2, 0, Math.PI * 2);
        ctx.fill();

        if (logoDataUri) {
            const img = new Image();
            await new Promise(function (resolve) { img.onload = resolve; img.onerror = resolve; img.src = logoDataUri; });
            if (img.naturalWidth > 0) {
                ctx.save();
                ctx.beginPath();
                ctx.arc(cx, logoCY, LOGO_SIZE / 2, 0, Math.PI * 2);
                ctx.clip();
                ctx.drawImage(img, cx - LOGO_SIZE / 2, y, LOGO_SIZE, LOGO_SIZE);
                ctx.restore();
            }
        } else {
            // No shop logo uploaded — draw the fallback Material Symbols icon.
            // Canvas text doesn't support the CSS FILL variable-font axis, so this
            // renders as the outline style rather than the filled one used on-page.
            try {
                await document.fonts.load('40px "Material Symbols Outlined"');
                await document.fonts.ready;
                ctx.save();
                ctx.fillStyle    = COL.tertiary;
                ctx.font         = '40px "Material Symbols Outlined"';
                ctx.textAlign    = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(typeIcon, cx, logoCY + 1);
                ctx.restore();
            } catch (e) {}
        }
        y += LOGO_SIZE + SPACE_Y3;

        // ── Shop name ─────────────────────────────────────────────
        ctx.fillStyle    = COL.onSurface;
        ctx.font         = '800 ' + NAME_FONT + 'px sans-serif';
        ctx.textAlign    = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText(shopName, cx, y);
        y += NAME_FONT + SUB_GAP;

        // ── "Digital Menu" subtitle ───────────────────────────────
        ctx.fillStyle = COL.tertiary;
        ctx.font      = '600 ' + SUB_FONT + 'px sans-serif';
        ctx.fillText('DIGITAL MENU', cx, y);
        y += SUB_FONT + H_PAD_BOT;

        // ── QR section background ─────────────────────────────────
        const sectX = SECT_MX;
        const sectW = CARD_W - SECT_MX * 2;
        const sectY = y;
        ctx.fillStyle = COL.surfaceContainerLow;
        roundRect(ctx, sectX, sectY, sectW, sectH, 12);
        ctx.fill();
        y = sectY + SECT_PAD;

        // ── "Scan for Menu" heading ───────────────────────────────
        ctx.fillStyle = COL.onSurface;
        ctx.font      = '700 ' + HEADING_FONT + 'px sans-serif';
        ctx.fillText('SCAN TO VIEW MENU', cx, y);
        y += HEADING_FONT + HEADING_GAP;

        // ── QR code box ───────────────────────────────────────────
        const qrBoxX = cx - QR_BOX / 2;
        const qrBoxY = y;
        ctx.fillStyle   = COL.surface;
        ctx.strokeStyle = COL.outlineVariant + '55';
        ctx.lineWidth   = 1;
        roundRect(ctx, qrBoxX, qrBoxY, QR_BOX, QR_BOX, 8);
        ctx.fill();
        ctx.stroke();
        ctx.drawImage(qrCanvas, qrBoxX + QR_PAD, qrBoxY + QR_PAD, QR_SIZE, QR_SIZE);

        // Corner bracket accents
        drawCornerAccents(ctx, qrBoxX - 2, qrBoxY - 2, QR_BOX + 4, QR_BOX + 4, 16, COL.primary);
        y += QR_BOX + QR_GAP;

        // ── Instruction text ──────────────────────────────────────
        ctx.fillStyle = COL.onSurfaceVariant;
        ctx.font      = '400 ' + INSTR_FONT + 'px sans-serif';
        ctx.fillText('Point your camera at the code to view the menu.', cx, y);

        // ── Copyright line ─────────────────────────────────────────
        y = sectY + sectH + COPY_GAP;
        ctx.fillStyle = COL.onSurfaceVariant + '99';
        ctx.font      = '400 ' + COPY_FONT + 'px sans-serif';
        const year = new Date().getFullYear();
        ctx.fillText('© ' + year + ' VEMBERS - Digital Menu', cx, y);
        y += COPY_LINE_H;
        ctx.fillText('(https://vembers.com)', cx, y);

        // ── Download ──────────────────────────────────────────────
        const link    = document.createElement('a');
        link.download = shopName + '-qr.png';
        link.href     = c.toDataURL('image/png');
        link.click();
    }

    function drawCornerAccents(ctx, x, y, w, h, size, color) {
        ctx.strokeStyle = color;
        ctx.lineWidth   = 2.5;
        ctx.lineCap     = 'square';
        // top-left
        ctx.beginPath(); ctx.moveTo(x, y + size); ctx.lineTo(x, y); ctx.lineTo(x + size, y); ctx.stroke();
        // top-right
        ctx.beginPath(); ctx.moveTo(x + w - size, y); ctx.lineTo(x + w, y); ctx.lineTo(x + w, y + size); ctx.stroke();
        // bottom-left
        ctx.beginPath(); ctx.moveTo(x, y + h - size); ctx.lineTo(x, y + h); ctx.lineTo(x + size, y + h); ctx.stroke();
        // bottom-right
        ctx.beginPath(); ctx.moveTo(x + w - size, y + h); ctx.lineTo(x + w, y + h); ctx.lineTo(x + w, y + h - size); ctx.stroke();
    }

    function roundRect(ctx, x, y, w, h, r) {
        ctx.beginPath();
        ctx.moveTo(x + r, y);
        ctx.lineTo(x + w - r, y);
        ctx.quadraticCurveTo(x + w, y, x + w, y + r);
        ctx.lineTo(x + w, y + h - r);
        ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
        ctx.lineTo(x + r, y + h);
        ctx.quadraticCurveTo(x, y + h, x, y + h - r);
        ctx.lineTo(x, y + r);
        ctx.quadraticCurveTo(x, y, x + r, y);
        ctx.closePath();
    }
</script>
@endsection