{% extends "base.html" %}
{% block title %}Job Configurations – {{ job.title }}{% endblock %}
{% block content %}
<div class="container py-4">
    <h2>Share Job: {{ job.title }}</h2>
    <p class="lead">Create a short link and QR codes to promote this job.</p>

    <div class="row">
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">Short URL</h5>
                </div>
                <div class="card-body">
                    <div class="input-group">
                        <input type="text" id="shortUrlInput" class="form-control" value="{{ short_url }}" readonly>
                        <button class="btn btn-outline-secondary" onclick="copyShortUrl()">Copy</button>
                    </div>
                    <small class="text-muted">Share this link anywhere. It redirects to the job page.</small>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">QR Code Generator</h5>
                </div>
                <div class="card-body">
                    <form id="qrForm">
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label>Size (pixels)</label>
                                <input type="number" name="size" value="300" class="form-control" min="100" max="1000" step="10">
                            </div>
                            <div class="col-md-6">
                                <label>Format</label>
                                <select name="format" class="form-select">
                                    <option value="png">PNG</option>
                                    <option value="jpg">JPEG</option>
                                    <option value="webp">WebP</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label>Background color (hex)</label>
                                <input type="color" name="bg" value="#ffffff" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label>Foreground color</label>
                                <input type="color" name="fill" value="#000000" class="form-control">
                            </div>
                            <div class="col-12">
                                <div class="form-check">
                                    <input type="checkbox" name="transparent" value="true" class="form-check-input" id="transparentCheckbox">
                                    <label class="form-check-label" for="transparentCheckbox">Transparent background (PNG only)</label>
                                </div>
                            </div>
                            <div class="col-12 mt-3">
                                <button type="submit" class="btn btn-primary">Generate & Download</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Preview / Download cards (multiple variants) -->
    <div class="card mt-2">
        <div class="card-header bg-secondary text-white">
            <h5 class="mb-0">Quick Variants (Download)</h5>
        </div>
        <div class="card-body">
            <div class="row" id="qrVariantsContainer">
                <!-- Sample downloads: transparent, colored, jpg -->
                <div class="col-md-4 text-center mb-3">
                    <a href="{{ url_for('generate_qr', job_id=job.id, size=200, format='png', transparent='true') }}" class="btn btn-outline-primary mb-2">Transparent PNG</a>
                    <br>
                    <a href="{{ url_for('generate_qr', job_id=job.id, size=200, format='png', fill='#0b3d4a', bg='#c6ff00') }}" class="btn btn-outline-primary mb-2">Brand Colors</a>
                    <br>
                    <a href="{{ url_for('generate_qr', job_id=job.id, size=200, format='jpg') }}" class="btn btn-outline-primary mb-2">High‑Res JPEG</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function copyShortUrl() {
    const input = document.getElementById('shortUrlInput');
    input.select();
    document.execCommand('copy');
    alert('Short URL copied to clipboard!');
}

document.getElementById('qrForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const params = new URLSearchParams();
    for (let [key, value] of formData.entries()) {
        params.append(key, value);
    }
    // transparancy only works with PNG
    const format = params.get('format');
    if (format !== 'png') {
        params.delete('transparent');
    }
    const url = "{{ url_for('generate_qr', job_id=job.id) }}?" + params.toString();
    window.location.href = url;
});
</script>
{% endblock %}