{% extends 'main/base.html' %}
{% load static %}

{% block title %}Register - ODEON{% endblock %}

{% block extra_head %}
<style>
    /* Fancy cinematic cover behind the register card. */
    body {
        background: linear-gradient(rgba(0,18,46,0.62), rgba(0,18,46,0.78)),
            url('{% static "assets/B3.jpg" %}') center / cover fixed no-repeat;
    }
</style>
{% endblock %}

{% block content %}
    <section class="content-card section-inner" style="max-width: 460px; margin: 0 auto; background: var(--bg-card); border-radius: 24px; border: 1px solid rgba(148, 163, 184, 0.15); position: relative;">
        <a href="/" aria-label="Close" style="position: absolute; right: 1.25rem; top: 1.25rem; color: var(--text-muted); font-size: 1.4rem; text-decoration: none;">✕</a>

        <h1 style="margin: 0 0 1.5rem; font-size: 1.6rem; color: var(--text-main);">Register</h1>

        {% if success %}
        <div style="text-align: center; padding: 1rem 0;">
            <div style="width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 1.5rem; display: grid; place-items: center; background: rgba(245, 158, 11, 0.12); border: 2px solid rgba(245, 158, 11, 0.3); color: #fbbf24; font-size: 2rem;">⏳</div>
            <h3 style="margin: 0 0 0.5rem; color: var(--text-main);">Registration received</h3>
            <p style="margin: 0 0 2rem; color: var(--text-muted); line-height: 1.6;">Your account has been created and is <strong>awaiting admin approval</strong>. You'll be able to log in once an administrator approves your account.</p>
            <a href="/login/" class="button primary" style="display: inline-flex;">Go to Login</a>
        </div>
        {% else %}
        {% if error %}
        <div style="margin-bottom: 1rem; padding: 0.9rem 1rem; background: #7f1d1d; border-radius: 12px; color: white; font-size: 0.9rem;">{{ error }}</div>
        {% endif %}

        <form method="post" action="{% url 'register' %}">
            {% csrf_token %}

            <!-- Phone with API-driven country code (Europe / US / Asia) -->
            <div style="display: flex; gap: 0.5rem; margin-bottom: 1rem;">
                <!-- Real flag image (renders on every OS, unlike emoji flags). -->
                <img id="country_flag" src="https://flagcdn.com/48x36/cz.png" alt=""
                     style="flex: 0 0 2.25rem; width: 2.25rem; height: 1.5rem; align-self: center; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgba(148,163,184,0.25);" />
                <select id="country_code" name="country_code" aria-label="Country code"
                        style="flex: 0 0 6.5rem; min-width: 0; padding: 0.95rem 0.5rem; border-radius: 12px; border: var(--border-soft); background: var(--bg-elev); color: var(--text-main); font-size: 0.9rem; font-weight: 600;">
                    <option value="+420" data-iso="CZ">🇨🇿 +420</option>
                    <option value="+48" data-iso="PL">🇵🇱 +48</option>
                    <option value="+421" data-iso="SK">🇸🇰 +421</option>
                    <option value="+43" data-iso="AT">🇦🇹 +43</option>
                    <option value="+32" data-iso="BE">🇧🇪 +32</option>
                    <option value="+33" data-iso="FR">🇫🇷 +33</option>
                </select>
                <input name="phone" type="tel" autocomplete="tel" required placeholder="Please enter phone number" value="{{ phone|default:'' }}"
                       style="flex: 1; min-width: 0; padding: 0.95rem 1rem; border-radius: 12px; border: var(--border-soft); background: var(--bg-elev); color: var(--text-main); font-size: 0.95rem;" />
            </div>

            <!-- Graphic verification code -->
            <div style="display: flex; gap: 0.5rem; align-items: stretch; margin-bottom: 1rem;">
                <input name="captcha" type="text" required autocomplete="off" placeholder="Please enter the graphic verification code"
                       style="flex: 1; min-width: 0; padding: 0.95rem 1rem; border-radius: 12px; border: var(--border-soft); background: var(--bg-elev); color: var(--text-main); font-size: 0.95rem;" />
                <div aria-label="Graphic verification code" title="Graphic verification code"
                     style="display: grid; place-items: center; padding: 0 1rem; border-radius: 12px; background: #1e293b; border: 1px solid rgba(148,163,184,0.2); color: #fbbf24; font-weight: 800; letter-spacing: 0.35em; font-style: italic; font-size: 1.2rem; user-select: none;">{{ captcha }}</div>
            </div>

            <!-- 6-digit code + Send out -->
            <div style="display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.35rem;">
                <input id="sms_code" name="sms_code" type="text" inputmode="numeric" required autocomplete="one-time-code" placeholder="Enter the correct 6-digit verification code"
                       style="flex: 1; min-width: 0; padding: 0.95rem 1rem; border-radius: 12px; border: var(--border-soft); background: var(--bg-elev); color: var(--text-main); font-size: 0.95rem;" />
                <button id="send-code" type="button" onclick="sendCode()"
                        style="white-space: nowrap; padding: 0 1rem; border: none; background: transparent; color: #3b82f6; font-weight: 700; cursor: pointer;">Send out</button>
            </div>
            <p id="code-hint" style="margin: 0 0 1rem; color: var(--text-muted); font-size: 0.8rem; min-height: 1rem;"></p>

            <!-- Password -->
            <input name="password" type="password" autocomplete="new-password" required placeholder="Password"
                   style="width: 100%; padding: 0.95rem 1rem; border-radius: 12px; border: var(--border-soft); background: var(--bg-elev); color: var(--text-main); font-size: 0.95rem; margin-bottom: 1rem;" />

            <!-- Confirm password -->
            <input name="confirm_password" type="password" autocomplete="new-password" required placeholder="Confirm password"
                   style="width: 100%; padding: 0.95rem 1rem; border-radius: 12px; border: var(--border-soft); background: var(--bg-elev); color: var(--text-main); font-size: 0.95rem; margin-bottom: 1rem;" />

            <!-- Referral code (from an agent's shared link, or another user's code) -->
            <input name="invitation_code" type="text" autocomplete="off" required placeholder="Referral Code" value="{{ invitation_code|default:'' }}"
                   style="width: 100%; padding: 0.95rem 1rem; border-radius: 12px; border: var(--border-soft); background: var(--bg-elev); color: var(--text-main); font-size: 0.95rem; margin-bottom: 1.5rem;" />

            <button class="button primary" type="submit" style="width: 100%; margin-bottom: 1.25rem;">Register</button>
        </form>

        <!-- Decorative Google login -->
        <button type="button" onclick="alert('Google login is not available yet.');"
                style="width: 100%; padding: 0.95rem 1rem; border-radius: 12px; background: var(--bg-elev); border: var(--border-soft); color: var(--text-main); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;">
            Login with
            <span style="font-weight: 800;"><span style="color:#4285F4;">G</span><span style="color:#EA4335;">o</span><span style="color:#FBBC05;">o</span><span style="color:#4285F4;">g</span><span style="color:#34A853;">l</span><span style="color:#EA4335;">e</span></span>
        </button>

        <p style="margin: 1.25rem 0 0; text-align: center; color: var(--text-muted); font-size: 0.9rem;">Already have an account? <a href="/login/" style="color: #3b82f6; text-decoration: none;">Login</a></p>
        {% endif %}
    </section>

    <script>
        // Populate the country-code dropdown from a public API covering all
        // countries. Falls back to a small static list if the API is
        // unreachable so registration always works.
        (function () {
            const sel = document.getElementById('country_code');
            if (!sel) return;
            // Priority countries shown first (with flags), then the rest.
            const PRIORITY = ['CZ', 'PL', 'SK', 'AT', 'BE'];
            const FALLBACK = [
                ['CZ', '🇨🇿', '+420', 'Czechia'], ['PL', '🇵🇱', '+48', 'Poland'],
                ['SK', '🇸🇰', '+421', 'Slovakia'], ['AT', '🇦🇹', '+43', 'Austria'],
                ['BE', '🇧🇪', '+32', 'Belgium'],
                ['FR', '🇫🇷', '+33', 'France'], ['GB', '🇬🇧', '+44', 'United Kingdom'],
                ['DE', '🇩🇪', '+49', 'Germany'], ['ES', '🇪🇸', '+34', 'Spain'],
                ['IT', '🇮🇹', '+39', 'Italy'], ['NL', '🇳🇱', '+31', 'Netherlands'],
                ['US', '🇺🇸', '+1', 'United States'], ['CN', '🇨🇳', '+86', 'China'],
                ['IN', '🇮🇳', '+91', 'India'], ['JP', '🇯🇵', '+81', 'Japan'],
                ['KR', '🇰🇷', '+82', 'South Korea'], ['AE', '🇦🇪', '+971', 'UAE'],
            ];
            const flagImg = document.getElementById('country_flag');
            // Update the flag image to match the currently selected country.
            function syncFlag() {
                if (!flagImg) return;
                const opt = sel.options[sel.selectedIndex];
                const iso = opt && opt.getAttribute('data-iso');
                if (iso) flagImg.src = 'https://flagcdn.com/48x36/' + iso.toLowerCase() + '.png';
            }
            sel.addEventListener('change', syncFlag);
            function render(rows, keep) {
                const cur = keep || sel.value || '+420';
                sel.innerHTML = '';
                rows.forEach(([iso, flag, dial, name]) => {
                    const o = document.createElement('option');
                    o.value = dial;
                    o.setAttribute('data-iso', iso);
                    o.textContent = (flag ? flag + ' ' : '') + dial + (name ? ' ' + name : '');
                    if (dial === cur) o.selected = true;
                    sel.appendChild(o);
                });
                syncFlag();
            }
            render(FALLBACK);
            fetch('https://restcountries.com/v3.1/all?fields=name,idd,cca2,flag,region')
                .then(r => r.ok ? r.json() : Promise.reject())
                .then(list => {
                    const rows = [];
                    list.forEach(c => {
                        // All countries with an international dial code.
                        const root = c.idd && c.idd.root;
                        if (!root) return;
                        const sfx = (c.idd.suffixes && c.idd.suffixes.length === 1) ? c.idd.suffixes[0] : '';
                        rows.push([c.cca2, c.flag || '', root + sfx, (c.name && c.name.common) || c.cca2]);
                    });
                    if (!rows.length) return;
                    rows.sort((a, b) => a[3].localeCompare(b[3]));
                    // Pull the priority countries to the top of the list.
                    const pri = [], rest = [];
                    rows.forEach(r => (PRIORITY.indexOf(r[0]) !== -1 ? pri : rest).push(r));
                    pri.sort((a, b) => PRIORITY.indexOf(a[0]) - PRIORITY.indexOf(b[0]));
                    render(pri.concat(rest));
                })
                .catch(() => { /* keep fallback list */ });
        })();

        function getCookie(name) {
            const v = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
            return v ? v.pop() : '';
        }
        function sendCode() {
            const btn = document.getElementById('send-code');
            const hint = document.getElementById('code-hint');
            btn.disabled = true;
            fetch('/api/send-code/', {
                method: 'POST',
                headers: { 'X-CSRFToken': getCookie('csrftoken') },
                credentials: 'same-origin'
            }).then(function (r) { return r.json(); }).then(function (data) {
                if (data.code) {
                    hint.style.color = '#34d399';
                    hint.textContent = 'Verification code: ' + data.code;
                    document.getElementById('sms_code').value = data.code;
                } else {
                    hint.style.color = 'var(--text-muted)';
                    hint.textContent = 'A verification code has been sent to your phone.';
                }
            }).catch(function () {
                hint.style.color = '#f87171';
                hint.textContent = 'Unable to send code. Please try again.';
            }).finally(function () {
                setTimeout(function () { btn.disabled = false; }, 1500);
            });
        }
    </script>
{% endblock %}