@extends('layouts.app')

@section('title', 'Restaurant QR Code')

@push('styles')
<style>
    .qr-layout {
        display: grid;
        grid-template-columns: .9fr 1.1fr;
        gap: 22px;
        align-items: stretch;
    }

    .qr-preview {
        display: grid;
        place-items: center;
        min-height: 470px;
        text-align: center;
        background:
            radial-gradient(circle at top, rgba(111,143,91,.16), transparent 35%),
            white;
    }

    .qr-frame {
        padding: 20px;
        border-radius: 24px;
        background: white;
        box-shadow: var(--shadow-md);
    }

    @media (max-width: 850px) {
        .qr-layout {
            grid-template-columns: 1fr;
        }
    }
</style>
@endpush

@section('content')
<div class="container">
    <div class="page-heading">
        <div>
            <div class="eyebrow">Table QR Menu</div>
            <h1>Restaurant QR Code</h1>
            <p>Customers can scan this QR code to open your public smart menu.</p>
        </div>
    </div>

    <div class="qr-layout">
        <div class="card">
            <h2 style="margin-top: 0;">Your public menu link</h2>

            <p class="muted">
                Place the QR code on tables, menus, windows and social media.
            </p>

            <div class="form-group">
                <label>Menu URL</label>

                <input
                    id="menuUrl"
                    value="{{ $menuUrl }}"
                    readonly
                >
            </div>

            <div style="display: flex; gap: 9px; flex-wrap: wrap;">
                <button id="copyLink" class="btn btn-light">
                    Copy Link
                </button>

                <a
                    class="btn btn-dark"
                    href="{{ $menuUrl }}"
                    target="_blank"
                >
                    Open Menu ↗
                </a>
            </div>
        </div>

        <div class="card qr-preview">
            <div>
                <div class="qr-frame">
                    <div id="qrcode"></div>
                </div>

                <h2>{{ $restaurant->name }}</h2>

                <p class="muted">
                    Scan to explore the smart menu.
                </p>

                <button id="downloadQr" class="btn btn-primary">
                    Download QR PNG
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>

<script>
    new QRCode(
        document.getElementById('qrcode'),
        {
            text: @json($menuUrl),
            width: 300,
            height: 300,
            correctLevel: QRCode.CorrectLevel.H
        }
    );

    document.getElementById('copyLink').addEventListener('click', async () => {
        await navigator.clipboard.writeText(
            document.getElementById('menuUrl').value
        );

        document.getElementById('copyLink').textContent = 'Copied';
    });

    document.getElementById('downloadQr').addEventListener('click', () => {
        const image = document.querySelector('#qrcode img');

        if (!image) {
            return;
        }

        const link = document.createElement('a');

        link.href = image.src;
        link.download = '{{ $restaurant->slug }}-menu-qr.png';
        link.click();
    });
</script>
@endpush