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

{% block title %}{% trans "Crypto Pay" %} - ODEON{% endblock %}

{% block content %}
    <div class="content-card section-inner" style="position: relative;">
        {% include 'main/_subheader.html' with title=_("Crypto Pay") back="/deposit/" %}

        {% if error %}
        <div style="padding: 0.85rem 1rem; border-radius: 12px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; font-size: 0.9rem; margin-bottom: 1.25rem;">{{ error }}</div>
        {% endif %}

        <!-- QR code -->
        <div style="text-align: center; margin-bottom: 1.25rem;">
            {% if address.qr_code %}
            <a href="{{ address.qr_code.url }}" download style="text-decoration: none;">
                <div style="display: inline-block; padding: 0.75rem; background: #fff; border-radius: 12px; box-shadow: 0 0 15px var(--primary-glow);">
                    <img src="{{ address.qr_code.url }}" alt="QR code" style="width: 160px; height: 160px; display: block;">
                </div>
                <p style="margin: 0.5rem 0 0; color: var(--text-muted); font-size: 0.8rem; font-weight: 700;">{% trans "Save QR code" %}</p>
            </a>
            {% else %}
            <div style="display: inline-grid; place-items: center; width: 184px; height: 184px; background: var(--bg-elev); border: var(--border-soft); border-radius: 12px; color: var(--text-muted); font-size: 0.8rem; padding: 1rem; text-align: center;">{% trans "QR code not configured yet — use the address below or contact support." %}</div>
            {% endif %}
        </div>

        <!-- Detailed address + copy -->
        <div style="background: var(--bg-elev); border: var(--border-soft); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 0.75rem;">
            <span style="color: var(--text-muted); font-weight: 700; font-size: 0.85rem;">{% trans "Detailed Address" %}:</span>
            <span id="deposit-address" style="color: var(--text-main); font-family: var(--font-mono); font-size: 0.8rem; word-break: break-all;">{{ address.address|default:"—" }}</span>
        </div>
        <div style="text-align: center; margin-bottom: 1.5rem;">
            <button type="button" id="copy-address" style="background: #ef4444; color: #fff; border: none; border-radius: 6px; padding: 0.55rem 1.6rem; font-weight: 800; cursor: pointer;">{% trans "Copy" %}</button>
        </div>

        <!-- Type / Amount summary -->
        <div style="background: var(--bg-card); border: var(--border-soft); border-radius: 8px; margin-bottom: 1.5rem; overflow: hidden;">
            <div style="display: flex; justify-content: space-between; padding: 0.9rem 1rem; border-bottom: var(--border-soft);">
                <span style="color: var(--text-main); font-weight: 700;">{% trans "Type" %}</span>
                <span style="color: var(--text-muted);">{{ method.label }}</span>
            </div>
            <div style="display: flex; justify-content: space-between; padding: 0.9rem 1rem;">
                <span style="color: var(--text-main); font-weight: 700;">{% trans "Amount" %}</span>
                <span style="color: var(--text-muted);">{{ amount }} {{ method.label }} = € {{ amount }}</span>
            </div>
        </div>

        <!-- Upload payment proof -->
        <form method="post" action="{% url 'deposit_proof' %}" enctype="multipart/form-data">
            {% csrf_token %}
            <input type="hidden" name="amount" value="{{ amount }}">
            <input type="hidden" name="method" value="{{ method.id }}">

            <p style="text-align: center; color: var(--text-main); font-weight: 700; margin: 0 0 0.75rem;">{% trans "Upload Payment Proof Screenshot" %}</p>
            <div style="text-align: center; margin-bottom: 1.25rem;">
                <label for="proof-input" style="display: inline-grid; place-items: center; width: 110px; height: 110px; border: 2px solid var(--primary); border-radius: 8px; background: var(--bg-elev); cursor: pointer; color: var(--text-muted); font-size: 2rem;">
                    <span id="proof-icon">📷</span>
                    <img id="proof-thumb" src="" alt="" style="display: none; width: 100%; height: 100%; object-fit: cover; border-radius: 6px;">
                </label>
                <input id="proof-input" type="file" name="proof" accept="image/*" required style="display: none;">
                <p id="proof-name" style="margin: 0.5rem 0 0; color: var(--text-muted); font-size: 0.75rem;"></p>
            </div>

            <!-- Tips -->
            <div style="margin-bottom: 1.5rem;">
                <span style="display: inline-block; background: #f97316; color: #fff; font-size: 0.7rem; font-weight: 800; padding: 0.2rem 0.6rem; border-radius: 4px;">{% trans "Tips" %}</span>
                <p style="margin: 0.5rem 0 0; color: var(--text-muted); font-size: 0.8rem; line-height: 1.6;">{% trans "Send the exact amount to the address above, then upload a clear screenshot of your payment. Your deposit is credited after an administrator verifies the proof." %}</p>
            </div>

            <button type="submit" style="width: 100%; padding: 1rem; border-radius: 10px; background: #2dd4bf; color: #06302b; border: none; font-weight: 800; font-size: 1rem; cursor: pointer;">{% trans "Submit" %}</button>
        </form>
    </div>

    <script>
        (function () {
            var copyBtn = document.getElementById('copy-address');
            var addr = document.getElementById('deposit-address');
            copyBtn.addEventListener('click', function () {
                var text = (addr.textContent || '').trim();
                if (!text || text === '—') return;
                navigator.clipboard.writeText(text).then(function () {
                    var old = copyBtn.textContent;
                    copyBtn.textContent = 'Copied!';
                    setTimeout(function () { copyBtn.textContent = old; }, 1500);
                });
            });

            var input = document.getElementById('proof-input');
            var thumb = document.getElementById('proof-thumb');
            var icon = document.getElementById('proof-icon');
            var name = document.getElementById('proof-name');
            input.addEventListener('change', function () {
                var file = input.files && input.files[0];
                if (!file) return;
                name.textContent = file.name;
                var reader = new FileReader();
                reader.onload = function (e) {
                    thumb.src = e.target.result;
                    thumb.style.display = 'block';
                    icon.style.display = 'none';
                };
                reader.readAsDataURL(file);
            });
        })();
    </script>
{% endblock %}