{% extends "partials/dashboard-base.html" %}
{% load static %}
{% block content %}
<section class="dashboard-section body-collapse">
    <div class="overlay pt-120">
        <div class="container-fruid">
            <div class="main-content">
                <div class="head-area d-flex align-items-center justify-content-between">
                    <h4>Crypto Payment</h4>
                    <div class="icon-area">
                        <img src="{% static 'assets1/images/icon/crypto.png' %}" alt="icon">
                    </div>
                </div>

                <!-- Crypto Selection -->
                <div class="crypto-options">
                    <h5>Select Currency</h5>
                    <select id="crypto-select" class="form-select mb-4">
                        <option value="bitcoin" selected>Bitcoin (BTC)</option>
                        <option value="usdt">USDT (TRC20)</option>
                    </select>
                </div>

                <!-- Payment Section -->
                <div id="crypto-section p-5 mb-4 " style="border:2px solid rgba(128, 128, 128, 0.302); border-radius: 10px;" >
                    <h5 id="crypto-title">Bitcoin (BTC) Payment</h5>
                    
                    <!-- QR Code Image (Stored in data-attributes) -->
                    <img id="crypto-qr" 
                         src="{% static 'assets1/images/btc-qr.jpg' %}" 
                         class="qr-code" 
                         alt="QR Code"
                         data-btc-qr="{% static 'assets1/images/btc-qr.jpg' %}"
                         >
                    
                    <p>Send <span id="crypto-name">Bitcoin</span> to the address below:</p>
                    
                    <!-- Wallet Address -->
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" id="crypto-address" value="bc1qyourbtcaddress" readonly>
                        <button class="btn btn-primary" onclick="copyToClipboard()">Copy</button>
                    </div>
                </div>

                <div id="crypto-section" style="margin-top: 20px; border:2px solid rgba(128, 128, 128, 0.302); border-radius: 10px;">
                    <h5 id="crypto-title">USDT (Trc20) Payment</h5>
                    
                    <!-- QR Code Image (Stored in data-attributes) -->
                    <img id="crypto-qr" 
                         src="{% static 'assets1/images/usdt-qr.jpg' %}" 
                         class="qr-code" 
                         alt="QR Code"
                         
                         data-usdt-qr="{% static 'assets1/images/usdt-qr.jpg' %}">
                    
                    <p>Send <span id="crypto-name">USDT</span> to the address below:</p>
                    
                    <!-- Wallet Address -->
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" id="crypto-address" value="TDW35s9ADbyvKFzu5xH2PmBc7CaQ87SqXB" readonly>
                        <button class="btn btn-primary" onclick="copyToClipboard()">Copy</button>
                    </div>
                </div>

                

                <div class="mt-4">
                    <button class="btn btn-success" onclick="confirmPayment()">I Have Sent the Payment</button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- JavaScript for Dynamic Crypto Selection -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const cryptoSelect = document.getElementById("crypto-select");
        const cryptoTitle = document.getElementById("crypto-title");
        const cryptoQR = document.getElementById("crypto-qr");
        const cryptoAddress = document.getElementById("crypto-address");
        const cryptoName = document.getElementById("crypto-name");

        // Store correct wallet addresses and QR codes
        const cryptoData = {
            bitcoin: {
                name: "Bitcoin",
                address: "15XYpt7QgeThsrQb3cDbrjjgDvDHL2uyX6",
                qr: cryptoQR.getAttribute("data-btc-qr")
            },
            usdt: {
                name: "USDT (TRC20)",
                address: "TDW35s9ADbyvKFzu5xH2PmBc7CaQ87SqXB",
                qr: cryptoQR.getAttribute("data-usdt-qr")
            }
        };

        function updateCryptoDetails() {
            const selectedCrypto = cryptoSelect.value;
            const data = cryptoData[selectedCrypto];

            cryptoTitle.textContent = data.name + " Payment";
            cryptoQR.src = data.qr; // Update QR Code
            cryptoAddress.value = data.address; // Update Wallet Address
            cryptoName.textContent = data.name;
        }

        cryptoSelect.addEventListener("change", updateCryptoDetails);
        updateCryptoDetails(); // Initialize on page load
    });

    function copyToClipboard() {
        const copyText = document.getElementById("crypto-address");
        copyText.select();
        copyText.setSelectionRange(0, 99999); // For mobile devices
        navigator.clipboard.writeText(copyText.value).then(() => {
            alert("Copied: " + copyText.value);
        }).catch(() => {
            alert("Failed to copy. Please manually copy the address.");
        });
    }

    function confirmPayment() {
        alert("Your payment will be confirmed soon.");
    }
</script>

{% endblock %}