{% extends "core/dashboard/base.html" %}
{% load static %}
{% load humanize %}

{% block content %}


<!--===================== Content body Start =====================-->
<div class="content-body">
    <!--===================== Page title Start =====================-->
    <div class="page_title">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="page_title-content">
                        <p>Welcome Back,<span> {{ request.user }}</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--===================== Page title End =====================-->
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="row">
                    <div class="col-xl-3 col-lg-6 col-md-6">
                        <div class="widget-card">
                            <div class="widget-title">
                                <h5>Total Market Value</h5>
                                <!-- <p class="text-success">133% <span><i class="las la-arrow-up"></i></span> -->
                                </p>
                            </div>
                            <div class="widget-info">
                                <h3>${{ total_market_value|intcomma }}</h3>
                                <p>USD</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-md-6">
                        <div class="widget-card">
                            <div class="widget-title">
                                <h5>Total Asset Value</h5>
                                <!-- <p class="text-danger">133% <span><i class="las la-arrow-down"></i></span> -->
                                </p>
                            </div>
                            <div class="widget-info">
                                <h3>${{ total_assest_value|intcomma }}</h3>
                                <p>USD</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-3 col-lg-6 col-md-6">
                        <div class="widget-card">
                            <div class="widget-title">
                                <h5>CryptoPro Deposit</h5>
                                <!-- <p class="text-success">133% <span><i class="las la-arrow-up"></i></span> -->
                                </p>
                            </div>
                            <div class="widget-info">
                                <h3>${{ crypto_pro|intcomma }}</h3>
                                <p>USD</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-md-6">
                        <div class="widget-card">
                            <div class="widget-title">
                                <h5>CryptoPro Profit</h5>
                                <!-- <p class="text-danger">133% <span><i class="las la-arrow-down"></i></span> -->
                                </p>
                            </div>
                            <div class="widget-info">
                                <h3>${{ crypto_pro_profit|intcomma }}</h3>
                                <p>USD</p>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="col-xl-3 col-lg-6 col-md-6">
                        <div class="widget-card">
                            <div class="widget-title">
                                <h5>All In One Deposit</h5>
                                <!-- <p class="text-danger">133% <span><i class="las la-arrow-down"></i></span> -->
                                </p>
                            </div>
                            <div class="widget-info">
                                <h3>${{ all_in_one|intcomma }}</h3>
                                <p>USD</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-md-6">
                        <div class="widget-card">
                            <div class="widget-title">
                                <h5>All In One Profit</h5>
                                <!-- <p class="text-success">133% <span><i class="las la-arrow-up"></i></span> -->
                                </p>
                            </div>
                            <div class="widget-info">
                                <h3>${{ all_in_one_profit|intcomma }}</h3>
                                <p>USD</p>
                            </div>
                        </div>
                    </div>


                    <div class="col-xl-3 col-lg-6 col-md-6">
                        <div class="widget-card">
                            <div class="widget-title">
                                <h5>Stock Trader Deposit</h5>
                                <!-- <p class="text-danger">133% <span><i class="las la-arrow-down"></i></span> -->
                                </p>
                            </div>
                            <div class="widget-info">
                                <h3>${{ stock_trader|intcomma }}</h3>
                                <p>USD</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-6 col-md-6">
                        <div class="widget-card">
                            <div class="widget-title">
                                <h5>Stock Trader Profit</h5>
                                <!-- <p class="text-success">133% <span><i class="las la-arrow-up"></i></span> -->
                                </p>
                            </div>
                            <div class="widget-info">
                                <h3>${{ stock_trader_profit|intcomma }}</h3>
                                <p>USD</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl-3 col-lg-6 col-md-6">
                            <div class="widget-card">
                                <div class="widget-title">
                                    <h5>Bonus</h5>
                                    <!-- <p class="text-success">133% <span><i class="las la-arrow-up"></i></span> -->
                                    </p>
                                </div>
                                <div class="widget-info">
                                    <h3>${{ bonus|intcomma }}</h3>
                                    <p>USD</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-6 col-md-6">
                            <div class="card balance-widget transparent">
                                <div class="card-body">
                                    <div id="wallet-chart"></div>
                                    <div class="balance-widget">
                                        <h4>Total Market Value : <strong>${{ total_market_value }}</strong></h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    {% if my_investment.investment_type == 'crypto_pro' %}
                    <div class="row">
                        <div class="col-xl-12 col-lg-12 col-xxl-12">
                            <div class="row">
                                <div class="col-xl-4">
                                    <div class="widget-card">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="widget-stat">
                                                <div class="coin-title">
                                                    <span><i class="cc BTC-alt"></i></span>
                                                    <h5 class="d-inline-block ms-2 mb-3">Bitcoin <span>(24h)</span></h5>
                                                </div>
                                                <h4 id="bitcoinPrice">Loading...</h4>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4">
                                    <div class="widget-card">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="widget-stat">
                                                <div class="coin-title">
                                                    <span><i class="cc ETH-alt"></i></span>
                                                    <h5 class="d-inline-block ms-2 mb-3">Ethereum
                                                        <span>(24h)</span>
                                                    </h5>
                                                </div>
                                                <h4 id="ethereumPrice">Loading...</h4>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4">
                                    <div class="widget-card">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="widget-stat">
                                                <div class="coin-title">
                                                    <span><i class="cc USDT-alt"></i></span>
                                                    <h5 class="d-inline-block ms-2 mb-3">USDT
                                                        <span>(24h)</span>
                                                    </h5>
                                                </div>
                                                <h4 id="usdtPrice">Loading...</h4>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% elif my_investment.investment_type == 'stock_trader' %}
                    <div class="row">
                        <!-- TradingView Widget BEGIN -->
                        <div style="height:50vh;">
                            <div class="tradingview-widget-container" style="height:100%;width:100%">
                                <div class="tradingview-widget-container__widget"
                                    style="height:calc(100% - 32px);width:100%"></div>
                                <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/"
                                        rel="noopener nofollow" target="_blank"><span class="blue-text"></span></a>
                                </div>
                                <script type="text/javascript"
                                    src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js"
                                    async>
                                    {
                                        "autosize": true,
                                        "symbol": "NASDAQ:AAPL",
                                        "interval": "D",
                                        "timezone": "Etc/UTC",
                                        "theme": "light",
                                        "style": "1",
                                        "locale": "en",
                                        "enable_publishing": false,
                                        "allow_symbol_change": true,
                                        "support_host": "https://www.tradingview.com"
                                    }
                                </script>
                            </div>
                            <!-- TradingView Widget END -->
                        </div>
                    </div>
                    {% else %}
                    <div class="row">
                        <!-- TradingView Widget BEGIN -->
                        <div style="height:50vh;">
                            <div class="tradingview-widget-container" style="height:100%;width:100%">
                                <div class="tradingview-widget-container__widget"
                                    style="height:calc(100% - 32px);width:100%"></div>
                                <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/"
                                        rel="noopener nofollow" target="_blank"><span class="blue-text"></span></a>
                                </div>
                                <script type="text/javascript"
                                    src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js"
                                    async>
                                    {
                                        "autosize": true,
                                        "symbol": "NASDAQ:AAPL",
                                        "interval": "D",
                                        "timezone": "Etc/UTC",
                                        "theme": "light",
                                        "style": "1",
                                        "locale": "en",
                                        "enable_publishing": false,
                                        "allow_symbol_change": true,
                                        "support_host": "https://www.tradingview.com"
                                    }
                                </script>
                            </div>
                            <!-- TradingView Widget END -->
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xl-12 col-lg-12 col-xxl-12">
                            <div class="row">
                                <div class="col-xl-4">
                                    <div class="widget-card">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="widget-stat">
                                                <div class="coin-title">
                                                    <span><i class="cc BTC-alt"></i></span>
                                                    <h5 class="d-inline-block ms-2 mb-3">Bitcoin <span>(24h)</span></h5>
                                                </div>
                                                <h4 id="bitcoinPrice">Loading...</h4>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4">
                                    <div class="widget-card">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="widget-stat">
                                                <div class="coin-title">
                                                    <span><i class="cc ETH-alt"></i></span>
                                                    <h5 class="d-inline-block ms-2 mb-3">Ethereum
                                                        <span>(24h)</span>
                                                    </h5>
                                                </div>
                                                <h4 id="ethereumPrice">Loading...</h4>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4">
                                    <div class="widget-card">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="widget-stat">
                                                <div class="coin-title">
                                                    <span><i class="cc USDT-alt"></i></span>
                                                    <h5 class="d-inline-block ms-2 mb-3">USDT
                                                        <span>(24h)</span>
                                                    </h5>
                                                </div>
                                                <h4 id="usdtPrice">Loading...</h4>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>

                <div class="col-xl-12">
                    <div class="row">
                        <div class="col-xl-6 col-lg-12 col-xxl-4">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">Deposit</h4>
                                </div>
                                <div class="card-body">
                                    <div class="buy-sell-widget">
                                        <form method="POST" name="myform" class="currency_validate" action=".">
                                            {% csrf_token %}
                                            <div class="form-group">
                                                <label class="me-sm-2">Currency</label>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <label class="input-group-text"><i
                                                                class="cc BTC-alt"></i></label>
                                                    </div>
                                                    <select name='currency' class="form-select"
                                                        onchange="updateWalletAddress()">
                                                        <option value="">Select</option>
                                                        <option value="bitcoin">Bitcoin</option>
                                                        <option value="ethereum">Ethereum</option>
                                                        <option value="usdc">USDC</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="me-sm-2">Account Type</label>
                                                <div class="input-group mb-3">
                                                    <select required name='updated_investment_type' class="form-select">
                                                        <option value="">Select</option>
                                                        <option value="stock_trader">Stock Trader</option>
                                                        <option value="crypto_pro">CryptoPro</option>
                                                        <option value="all_in_one">All In One</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="me-sm-2">Wallet Address </label>
                                                <div class="input-group mb-3">

                                                    <input id="walletAddressInput" disabled type="text"
                                                        style="width: 100%; padding: 5px;" placeholder="coin address">
                                                    <br>
                                                    <br>
                                                    <span id="copyAddress" style="cursor: pointer;"
                                                        onclick="copyToClipboard()">copy wallet
                                                        address</span>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="me-sm-2">Enter your amount</label>
                                                <div class="input-group">
                                                    <input type="text" required name="amount" class="form-control"
                                                        placeholder="1000 USD">
                                                </div>
                                                <br>
                                                <br>
                                                <p>Please enter the desired amount and select a wallet from the options
                                                    provided. After
                                                    completing the payment to the designated wallet address, kindly
                                                    submit
                                                    the form. Upon
                                                    successful submission, the status will be updated to 'Paid</p>
                                            </div>
                                            <button type="submit" class="btn btn-success w-100">Confirm Payment</button>
                                        </form>
                                        <p></p>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="col-xl-6 col-lg-12 col-xxl-8">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">Transaction </h4>
                                </div>
                                <div class="card-body">
                                    <div class="transaction-widget">
                                        <ul class="p-0 m-0 list-unstyled">
                                            {% for transaction in transactions %}
                                            <li class="d-sm-flex align-items-center justify-content-between">
                                                <div class="d-flex align-items-center">
                                                    {% if transaction.transaction_type == "DEPOSIT" %}
                                                    <span
                                                        class="icon me-3 rounded-circle d-flex align-items-center justify-content-center bg-danger">
                                                        <i class="las la-arrow-down"></i>
                                                    </span>
                                                    {% elif transaction_type == "WITHDRAW" %}
                                                    <span
                                                        class="icon me-3 rounded-circle d-flex align-items-center justify-content-center bg-success">
                                                        <i class="las la-arrow-up"></i>
                                                    </span>
                                                    {% endif %}
                                                    <div>
                                                        <p class="mb-2">{{ transaction.time }}</p>
                                                        <h5>{{ transaction.tid }}</h5>
                                                    </div>
                                                </div>
                                                <div class="ms-5 mt-3 text-sm-end">
                                                    <h4>{{ transaction.amount }}</h4>
                                                </div>
                                            </li>
                                            {% endfor %}
                                        </ul>


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="copyModal"
        style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border: 1px solid #ccc; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); z-index: 9999;">
        <div id="modalContent" style="text-align: center;">
            <p id="modalMessage" style="margin: 0;"></p>
        </div>
    </div>

    <div id="confirmationModal"
        style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border: 1px solid #ccc; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); z-index: 9999;">
        <div id="modalContent" style="text-align: center;">
            <p id="modalMessage" style="margin: 0;">Payment confirmed! Your payment is pending and will be processed
                within
                1
                to 24 hours.</p>
        </div>
    </div>
    <!--===================== Content body End =====================-->
    {% endblock content %}
    {% block script %}

    <script>
        var walletAddresses = {
            bitcoin: 'bc1q5nefcur834y6lnpr5krmknez6g86klrvk7ah0g',
            ethereum: '0x4E78732F819D2d6307688B1A7EA3Adf713F4768C',
            usdc: '0x4E78732F819D2d6307688B1A7EA3Adf713F4768C'
        };

        function updateWalletAddress() {
            var currencySelect = document.getElementsByName('currency')[0];
            var walletAddressInput = document.getElementById('walletAddressInput');

            // Update placeholder or value based on the selected currency
            if (currencySelect.value in walletAddresses) {
                walletAddressInput.placeholder = walletAddresses[currencySelect.value];
            } else {
                walletAddressInput.placeholder = 'coin address';
            }
        }

        function copyToClipboard() {
            var currencySelect = document.getElementsByName('currency')[0];

            // Get the selected currency
            var selectedCurrency = currencySelect.value;

            // Get the corresponding wallet address
            var selectedWalletAddress = walletAddresses[selectedCurrency];

            // Create a temporary input element
            var tempInput = document.createElement('input');
            tempInput.value = selectedWalletAddress;

            // Append the input element to the body
            document.body.appendChild(tempInput);

            // Select the text in the input
            tempInput.select();

            try {
                // Copy the text to the clipboard
                document.execCommand('copy');

                // Show the success modal
                showModal('Copied to Clipboard');

                // Close the modal after 2 seconds
                setTimeout(function () {
                    closeModal();
                }, 2000);

                console.log('Text copied to clipboard');
            } catch (err) {
                console.error('Unable to copy to clipboard:', err);
            }

            // Remove the temporary input element
            document.body.removeChild(tempInput);
        }

        function showModal(message) {
            var modal = document.getElementById('copyModal');
            var modalMessage = document.getElementById('modalMessage');

            modalMessage.textContent = message;
            modal.style.display = 'block';
        }

        function closeModal() {
            var modal = document.getElementById('copyModal');
            modal.style.display = 'none';
        }
    </script>



    <script>
        // Function to update Bitcoin price and chart
        function updateBitcoinData() {
            // Replace 'YOUR_COINGECKO_API_KEY' with your actual API key
            const apiKey = 'YOUR_COINGECKO_API_KEY';
            const apiUrl =
                `https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd&apiKey=${apiKey}`;

            // Fetch Bitcoin price data
            $.get(apiUrl, function (data) {
                const bitcoinPrice = data.bitcoin.usd;
                $('#bitcoinPrice').text(`USD ${bitcoinPrice}`);
            });

            // Dummy data for chart (replace it with real-time data)
            const chartData = {
                labels: ['Label1', 'Label2', 'Label3', 'Label4', 'Label5'],
                datasets: [{
                    label: 'Bitcoin Price',
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1,
                    data: [1200, 1300, 1250, 1350, 1400], // Replace this with actual price data
                }]
            };

            const ctx = document.getElementById('btcChart').getContext('2d');
            const myChart = new Chart(ctx, {
                type: 'line',
                data: chartData,
                options: {
                    scales: {
                        y: {
                            beginAtZero: false
                        }
                    }
                }
            });
        }

        // Call the function to update data on page load
        updateBitcoinData();
    </script>


    <script>
        function updateEthereumData() {
            // Replace 'YOUR_COINGECKO_API_KEY' with your actual API key
            const apiKey = 'YOUR_COINGECKO_API_KEY';
            const apiUrl =
                `https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd&apiKey=${apiKey}`;

            // Fetch Ethereum price data
            $.get(apiUrl, function (data) {
                const ethereumPrice = data.ethereum.usd;
                $('#ethereumPrice').text(`USD ${ethereumPrice}`);
            });

            // Dummy data for chart (replace it with real-time data)
            const chartData = {
                labels: ['Label1', 'Label2', 'Label3', 'Label4', 'Label5'],
                datasets: [{
                    label: 'Ethereum Price',
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1,
                    data: [500, 550, 520, 530, 510], // Replace this with actual price data
                }]
            };

            const ctx = document.getElementById('ethChart').getContext('2d');
            const myChart = new Chart(ctx, {
                type: 'line',
                data: chartData,
                options: {
                    scales: {
                        y: {
                            beginAtZero: false
                        }
                    }
                }
            });
        }

        updateEthereumData();
    </script>

    <script>
        // Function to update Tether (USDT) price and chart
        function updateUSDTData() {
            // Replace 'YOUR_COINGECKO_API_KEY' with your actual API key
            const apiKey = 'YOUR_COINGECKO_API_KEY';
            const usdtApiUrl =
                `https://api.coingecko.com/api/v3/simple/price?ids=tether&vs_currencies=usd&apiKey=${apiKey}`;

            // Fetch Tether (USDT) price data
            $.get(usdtApiUrl, function (data) {
                const usdtPrice = data.tether.usd;
                $('#usdtPrice').text(`USD ${usdtPrice}`);
            });

            // Dummy data for chart (replace it with real-time data)
            const usdtChartData = {
                labels: ['Label1', 'Label2', 'Label3', 'Label4', 'Label5'],
                datasets: [{
                    label: 'Tether (USDT) Price',
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1,
                    data: [1, 1, 1, 1, 1], // Replace this with actual price data
                }]
            };

            const usdtCtx = document.getElementById('usdtChart').getContext('2d');
            const usdtChart = new Chart(usdtCtx, {
                type: 'line',
                data: usdtChartData,
                options: {
                    scales: {
                        y: {
                            beginAtZero: false
                        }
                    }
                }
            });
        }

        // Call the functions to update data on page load
        updateUSDTData();
    </script>


    <!-- Add this modal HTML structure somewhere in your HTML document -->
    <div id="confirmationModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeConfirmationModal()">&times;</span>
            <p id="modalMessage"></p>
        </div>
    </div>

    <!-- Add this updated script -->
    <script>
        function showConfirmationModal(message) {
            var modal = document.getElementById('confirmationModal');
            var modalMessage = document.getElementById('modalMessage');

            modalMessage.textContent = message;
            modal.style.display = 'block';
        }

        function closeConfirmationModal() {
            var modal = document.getElementById('confirmationModal');
            modal.style.display = 'none';
        }

        document.querySelector('form.currency_validate').addEventListener('submit', function (event) {
            event.preventDefault();

            // Check if the amount is entered
            var amountInput = document.querySelector('input[name="amount"]').value;
            if (!amountInput) {
                alert('Please enter the amount before confirming the payment.');
                return;
            }

            // Log to the console to ensure the event is firing
            console.log('Button clicked');
            showConfirmationModal(
                'Payment confirmed! Your payment is pending and will be processed within 1 to 24 hours.');
            handlePaymentConfirmation();
        });

        function handlePaymentConfirmation() {
            // Get the amount input value
            var amountInputValue = document.querySelector('input[name="amount"]').value;

            // Log the amount (you can use it in your form submission logic)
            console.log('Handling payment confirmation for amount:', amountInputValue);

            // ... (your form submission logic)

            // Close the modal after 5 seconds (5000 milliseconds)
            setTimeout(function () {
                closeConfirmationModal();
                // Manually trigger the form submission after handling the payment confirmation
                document.querySelector('form.currency_validate').submit();
            }, 2000);
        }
    </script>


    {% endblock script %}