{% extends "global/Page.html" %}
{% load otree static %}
{% load Tmplate1 %}
{% load static %}
{% block title %}

{% endblock %}

{% block content %}
<!-- Write content in here -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="container-fluid">
    <div id="warningModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <p>&#9888; Caution: Individual stocks may carry elevated levels of risk that may not be suitable for all investors. Make sure you understand the company's financials and risk factors before proceeding. Don't invest unless you can afford to lose all the money you pay for this investment. </p>
            <button type="button" id="proceedButton">Proceed</button><br>
            <button type="button" id="cancelButton" style="margin-top: -1em;">Cancel</button>
        </div>
    </div>
    <div id="cryptoWarningModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <span class="close">&times;</span>
            <p>&#9888; Caution: Cryptocurrencies are highly volatile and may not be suitable for all investors. Make sure you understand the risks before proceeding. Don't invest unless you can afford to lose all the money you pay for this investment.</p>
        </div>
    </div>
    <div class="row">

        <!-- left side -->
        <div class="col-lg-6 custom-left" id="leftSideContent">

            This is the trading interface.<br> You are welcome to manage your portfolio with your preferred distribution of assets.

            <!-- Portfolio table -->
            <div class="container mt-4">
                <h2>My Portfolio</h2>
                <table id="your-table-id" class="table table-striped">
                    <tbody>
                        {% for row in data %}
                            {% if row.change_type %}
                                {% if row.Type == 'ETF' %}
                                    <thead>
                                        <tr>
                                            <th class="text-center align-middle">Asset Type</th>
                                            <th class="text-center align-middle">Asset</th>
                                            <th class="text-center align-middle description-column">Description</th>
                                            <th class="text-center align-middle">Price</th>
                                            <th class="text-center align-middle">Price Change Q/Q</th>
                                            <th class="text-center align-middle">Assets Under Management</th>
                                            <th class="text-center align-middle">ETFs Owned</th>
                                            <th class="text-center align-middle">ETFs to buy/sell</th>
                                            <th class="text-center align-middle">Actions</th>
                                        </tr>
                                    </thead>
                                {% elif row.Type == 'Stock' %}
                                    <thead>
                                        <tr>
                                            <th class="text-center align-middle">Asset Type</th>
                                            <th class="text-center align-middle">Asset</th>
                                            <th class="text-center align-middle description-column">Description</th>
                                            <th class="text-center align-middle">Price</th>
                                            <th class="text-center align-middle">Price Change Q/Q</th>
                                            <th class="text-center align-middle">Market Capitalization</th>
                                            <th class="text-center align-middle">Stocks Owned</th>
                                            <th class="text-center align-middle">Stocks to buy/sell</th>
                                            <th class="text-center align-middle">Actions</th>
                                        </tr>
                                    </thead>
                                {% elif row.Type == 'Crypto' %}
                                    <thead>
                                        <tr>
                                            <th class="text-center align-middle">Asset Type</th>
                                            <th class="text-center align-middle">Asset</th>
                                            <th class="text-center align-middle description-column">Description</th>
                                            <th class="text-center align-middle">Price</th>
                                            <th class="text-center align-middle">Price Change Q/Q</th>
                                            <th class="text-center align-middle">Market Capitalization</th>
                                            <th class="text-center align-middle">Coins Owned</th>
                                            <th class="text-center align-middle">Coins to buy/sell</th>
                                            <th class="text-center align-middle">Actions</th>
                                        </tr>
                                    </thead>
                                {% endif %}
                                <!-- Update the previous type to the current type -->
                            {% endif %}
                            <tr>
                                <td class="text-center align-middle">{{ row.Type }}</td>
                                <td class="text-center align-middle">{{ row.Modified_Ticker }}</td>
                                <td class="text-center align-middle description-column">
                                    {% if row.Modified_Ticker == "VOO" %}
                                        Index ETF; tracks top US companies.
                                    {% elif row.Modified_Ticker == "VTI" %}
                                        Broad equity market ETF.
                                    {% elif row.Modified_Ticker == "ZZW" %}
                                        High dividend yield ETF.
                                    {% elif row.Modified_Ticker == "MDKS" %}
                                        Real Estate Investment Trust ETF.
                                    {% elif row.Modified_Ticker == "UDX" %}
                                        Integrated energy company.
                                    {% elif row.Modified_Ticker == "DSLO" %}
                                        Major cannabis producer.
                                    {% elif row.Modified_Ticker == "NOQ" %}
                                        International financial services.
                                    {% elif row.Modified_Ticker == "XPOW" %}
                                        Energy infrastructure company.
                                    {% elif row.Modified_Ticker == "MWQ" %}
                                        Oil & gas exploration and production.
                                    {% elif row.Modified_Ticker == "STCK" %}
                                        Investment in pre-IPO companies.
                                    {% elif row.Modified_Ticker == "IUM" %}
                                        Token based on a popular blockchain.
                                    {% elif row.Modified_Ticker == "JUNW" %}
                                        Cryptocurrency token.
                                    {% elif row.Modified_Ticker == "ETQ" %}
                                        Open-source blockchain with smart contracts.
                                    {% elif row.Modified_Ticker == "BTC" %}
                                        Well-known cryptocurrency.
                                    {% else %}
                                        No description available.
                                    {% endif %}
                                </td>
                                <td class="text-center align-middle" id="stock_price_{{ row.Modified_Ticker }}">{{ row.Round_1 }}</td>
                                <td class="text-center align-middle">
                                    {% if "-" in row.Round_1_Change %}
                                        <span style="color: red;">{{ row.Round_1_Change }}</span>
                                    {% else %}
                                        <span style="color: green;">{{ row.Round_1_Change }}</span>
                                    {% endif %}
                                </td>
                                <td class="text-center align-middle">{{ row.Market_Cap }}</td>
                                <td class="text-center align-middle">
                                    <span id="buy_count_display_{{ row.Modified_Ticker }}">
                                        {% if row.Modified_Ticker == "VOO" %}
                                            {{ buy_count_VOO_initial }}
                                        {% elif row.Modified_Ticker == "VTI" %}
                                            {{ buy_count_VTI_initial }}
                                        {% elif row.Modified_Ticker == "ZZW" %}
                                            {{ buy_count_ZZW_initial }}
                                        {% elif row.Modified_Ticker == "MDKS" %}
                                            {{ buy_count_MDKS_initial }}
                                        {% elif row.Modified_Ticker == "UDX" %}
                                            {{ buy_count_UDX_initial }}
                                        {% elif row.Modified_Ticker == "DSLO" %}
                                            {{ buy_count_DSLO_initial }}
                                        {% elif row.Modified_Ticker == "NOQ" %}
                                            {{ buy_count_NOQ_initial }}
                                        {% elif row.Modified_Ticker == "XPOW" %}
                                            {{ buy_count_XPOW_initial }}
                                        {% elif row.Modified_Ticker == "MWQ" %}
                                            {{ buy_count_MWQ_initial }}
                                        {% elif row.Modified_Ticker == "STCK" %}
                                            {{ buy_count_STCK_initial }}
                                        {% elif row.Modified_Ticker == "IUM" %}
                                            {{ buy_count_IUM_initial }}
                                        {% elif row.Modified_Ticker == "JUNW" %}
                                            {{ buy_count_JUNW_initial }}
                                        {% elif row.Modified_Ticker == "ETQ" %}
                                            {{ buy_count_ETQ_initial }}
                                        {% elif row.Modified_Ticker == "BTC" %}
                                            {{ buy_count_BTC_initial }}
                                        {% endif %}

                                    </span>
                                </td>
                                <td class="text-center align-middle">
                                    <!-- Input box to specify number of shares and +/- buttons -->
                                    <input type="number" id="buy_sell_count_{{ row.Modified_Ticker }}" value="0" style="width:50px; text-align:center; margin-bottom:2px;">
                                    <br>
                                    <button type="button" onclick="decrementFieldByOne('buy_sell_count_{{ row.Modified_Ticker }}');" style="margin-top:2px;">-</button>

                                    <button type="button" onclick="incrementFieldByOne('buy_sell_count_{{ row.Modified_Ticker }}');" style="margin-top:2px;">+</button>

                                </td>
                                <td class="text-center align-middle">
                                    <!-- Buy and Sell buttons -->
                                    <button type="button" class="btn btn-success" onclick="buyShares('buy_sell_count_{{ row.Modified_Ticker }}', 'stock_price_{{ row.Modified_Ticker }}', 'buy_count_display_{{ row.Modified_Ticker }}');">Buy</button>
                                    <button type="button" class="btn btn-danger" onclick="sellShares('buy_sell_count_{{ row.Modified_Ticker }}', 'stock_price_{{ row.Modified_Ticker }}', 'buy_count_display_{{ row.Modified_Ticker }}');">Sell</button>
                                </td>
                                <td style="display: none;">
                                    {% if row.Modified_Ticker == "VOO" %}
                                        <input type="hidden" name="buy_count_{{ row.Modified_Ticker }}" id="buy_count_{{ row.Modified_Ticker }}" value="{{ buy_count_VOO_initial }}">
                                    {% elif row.Modified_Ticker == "VTI" %}
                                        <input type="hidden" name="buy_count_{{ row.Modified_Ticker }}" id="buy_count_{{ row.Modified_Ticker }}" value="{{ buy_count_VTI_initial }}">
                                    {% elif row.Modified_Ticker == "ZZW" %}
                                        <input type="hidden" name="buy_count_{{ row.Modified_Ticker }}" id="buy_count_{{ row.Modified_Ticker }}" value="{{ buy_count_ZZW_initial }}">
                                    {% elif row.Modified_Ticker == "MDKS" %}
                                        <input type="hidden" name="buy_count_{{ row.Modified_Ticker }}" id="buy_count_{{ row.Modified_Ticker }}" value="{{ buy_count_MDKS_initial }}">
                                    {% elif row.Modified_Ticker == "UDX" %}
                                        <input type="hidden" name="buy_count_{{ row.Modified_Ticker }}" id="buy_count_{{ row.Modified_Ticker }}" value="{{ buy_count_UDX_initial }}">
                                    {% elif row.Modified_Ticker == "DSLO" %}
                                        <input type="hidden" name="buy_count_{{ row.Modified_Ticker }}" id="buy_count_{{ row.Modified_Ticker }}" value="{{ buy_count_DSLO_initial }}">
                                    {% elif row.Modified_Ticker == "NOQ" %}
                                        <input type="hidden" name="buy_count_{{ row.Modified_Ticker }}" id="buy_count_{{ row.Modified_Ticker }}" value="{{ buy_count_NOQ_initial }}">
                                    {% elif row.Modified_Ticker == "XPOW" %}
                                        <input type="hidden" name="buy_count_{{ row.Modified_Ticker }}" id="buy_count_{{ row.Modified_Ticker }}" value="{{ buy_count_XPOW_initial }}">
                                    {% elif row.Modified_Ticker == "MWQ" %}
                                        <input type="hidden" name="buy_count_{{ row.Modified_Ticker }}" id="buy_count_{{ row.Modified_Ticker }}" value="{{ buy_count_MWQ_initial }}">
                                    {% elif row.Modified_Ticker == "STCK" %}
                                        <input type="hidden" name="buy_count_{{ row.Modified_Ticker }}" id="buy_count_{{ row.Modified_Ticker }}" value="{{ buy_count_STCK_initial }}">
                                    {% elif row.Modified_Ticker == "IUM" %}
                                        <input type="hidden" name="buy_count_{{ row.Modified_Ticker }}" id="buy_count_{{ row.Modified_Ticker }}" value="{{ buy_count_IUM_initial }}">
                                    {% elif row.Modified_Ticker == "JUNW" %}
                                        <input type="hidden" name="buy_count_{{ row.Modified_Ticker }}" id="buy_count_{{ row.Modified_Ticker }}" value="{{ buy_count_JUNW_initial }}">
                                    {% elif row.Modified_Ticker == "ETQ" %}
                                        <input type="hidden" name="buy_count_{{ row.Modified_Ticker }}" id="buy_count_{{ row.Modified_Ticker }}" value="{{ buy_count_ETQ_initial }}">
                                    {% elif row.Modified_Ticker == "BTC" %}
                                        <input type="hidden" name="buy_count_{{ row.Modified_Ticker }}" id="buy_count_{{ row.Modified_Ticker }}" value="{{ buy_count_BTC_initial }}">
                                    {% endif %}
                                </td>

                            </tr>
                    {% endfor %}
                </tbody>
            </table>

            </div>
        </div>

        <!-- right side -->
        <link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}">

        <div class="col-lg-12 right-side-fixed">
            <input class="currency" type="hidden" name="cash" id="cash" value="{{ cash }}">

            <div class="container-fluid mt-6">
                <h2>Portfolio Investment Distribution</h2>

                <!-- Portfolio Distribution Table -->
                <table class="table">
                    <thead>
                        <tr>
                            <th>Item</th>
                            <th>Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Cash</td>
                            <td class="currency" data-id="cash">{{ player.cash }}</td>

                        </tr>
                        <tr>
                            <td>Portfolio Assets Value</td>
                            <td class="currency" data-id="shareValue">{{ player.share_value }}</td>
                        </tr>
                        <tr>
                            <td>Portfolio ETFs Value</td>
                            <td class="currency" data-id="portfolio_ETF">{{ player.portfolio_ETF }}</td>
                        </tr>
                        <tr>
                            <td>Portfolio Stocks Value</td>
                            <td class="currency" data-id="portfolio_Stock">{{ player.portfolio_Stock }}</td>
                        </tr>
                        <tr>
                            <td>Portfolio Crypto Value</td>
                            <td class="currency" data-id="portfolio_Crypto">{{ player.portfolio_Crypto }}</td>
                        </tr>
                    </tbody>
                </table>
                <p>Portfolio Value: <span id="portfolioValue" class="currency">{{ player.portfolio_value }}</span></p>
                <p>Portfolio Gains or Losses:
                    <span id="profitValue_element" class="currency"
                              onload="this.style.color = (parseFloat(this.textContent.replace('$', '').replace(',', '')) > 0) ? 'green' : 'red'">
                            {{ player.portfolio_profit }}
                    </span>
                </p>

                <h3>Investment Distribution Chart</h3>
                <canvas id="distributionChart" width="400" height="400"></canvas>
            </div>
        </div>
    </div>
</div>
{% if form.errors %}
    <div class="alert alert-danger">
        {% for field, errors in form.errors.items %}
            {% for error in errors %}
                {{ field }}: {{ error }}<br>
            {% endfor %}
        {% endfor %}
    </div>
{% endif %}


{% next_button %}
<script>
    window.onload = function() {
        adjustTopPosition();
        adjustRightSidePosition();

        // Adjust on window resize
        window.onresize = function() {
            adjustTopPosition();
            adjustRightSidePosition();
        };
    };

    function adjustTopPosition() {
        let leftSideHeight = document.getElementById('leftSideContent').offsetHeight;
        let rightSideBlock = document.querySelector('.right-side-fixed');
        rightSideBlock.style.top = (leftSideHeight * -0.01001) + "px";
    }

    function adjustRightSidePosition() {
        let viewportWidth = window.innerWidth;
        let rightSideBlock = document.querySelector('.right-side-fixed');

        if (viewportWidth > 1600) {
            rightSideBlock.style.right = "5%";
        } else {
            rightSideBlock.style.right = "1%";
        }
    }
</script>

<style>
.custom-left {
        margin-left: -150px; /* Adjust this value as needed */
    }
.right-side-fixed {
    position: fixed;
    /* top property will be adjusted by the JavaScript */
    right: 12%; /* adjust this as needed */
    width: 25%; /* adjust as needed */
    min-height: 400px;
    max-height: 130vh;
    flex-direction: column;
    /*max-height: 100vh; /* adjust this based on your desired viewable height */
    overflow-y: auto; /* this will add scroll if the content is taller than max-height */
    padding-bottom: 80px;
    background-color: rgb(240,240,240);
    transform: scale(0.9);
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 60px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 20%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

</style>
<script>

    function formatCurrency(number) {
        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(number);
    }

    // On document ready, apply the formatting
    document.addEventListener('DOMContentLoaded', (event) => {
        document.querySelectorAll('.currency').forEach(elem => {
            elem.textContent = formatCurrency(elem.textContent);
        });
    });
</script>

<script type="text/javascript">
    var warnedAboutRisks = {
        'Stock': {% if player.treatment_group == 'treatment_5' or player.treatment_group == 'treatment_6' %}false{% else %}true{% endif %},
        'Crypto': {% if player.treatment_group == 'treatment_5' or player.treatment_group == 'treatment_6' %}false{% else %}true{% endif %}
    };
</script>

<script>

   function updatePortfolio(increment, stockPrice, assetType) {
        var cashElem = document.querySelector('.currency[data-id="cash"]');
        var shareValueElem = document.querySelector('.currency[data-id="shareValue"]');

        var portfolioValueElem = document.querySelector('#portfolioValue');
        //var profitValueElem = document.querySelector('#profitValue');

        console.log("UpdatePortfolio function called."); // Add this

        var cashValue = parseFloat(cashElem.textContent.replace('$', '').replace(',', ''));
        var shareValue = parseFloat(shareValueElem.textContent.replace('$', '').replace(',', ''));

        console.log("Current Cash:", cashValue); // Add this
        console.log("Current Share Value:", shareValue); // Add this

        if (increment) {
            cashValue -= stockPrice;
            shareValue += stockPrice ;
        } else {
            cashValue += stockPrice;
            shareValue -= stockPrice;
        }

        var portfolioValue = cashValue + shareValue;


        var portfolioETFValueElem = document.querySelector('.currency[data-id="portfolio_ETF"]');
        var portfolioStockValueElem = document.querySelector('.currency[data-id="portfolio_Stock"]');
        var portfolioCryptoValueElem = document.querySelector('.currency[data-id="portfolio_Crypto"]');

        var portfolioETFValue = parseFloat(portfolioETFValueElem.textContent.replace('$', '').replace(',', ''));
        var portfolioStockValue = parseFloat(portfolioStockValueElem.textContent.replace('$', '').replace(',', ''));
        var portfolioCryptoValue = parseFloat(portfolioCryptoValueElem.textContent.replace('$', '').replace(',', ''));

        if (assetType === 'ETF') {
            increment ? portfolioETFValue += stockPrice : portfolioETFValue -= stockPrice;
            portfolioETFValueElem.textContent = formatCurrency(portfolioETFValue);
        } else if (assetType === 'Stock') {
            increment ? portfolioStockValue += stockPrice : portfolioStockValue -= stockPrice;
            portfolioStockValueElem.textContent = formatCurrency(portfolioStockValue);
        } else if (assetType === 'Crypto') {
            increment ? portfolioCryptoValue += stockPrice : portfolioCryptoValue -= stockPrice;
            portfolioCryptoValueElem.textContent = formatCurrency(portfolioCryptoValue);
        }
        cashElem.textContent = formatCurrency(cashValue);
        shareValueElem.textContent = formatCurrency(shareValue);
        portfolioValueElem.textContent = formatCurrency(portfolioValue);
        //profitValueElem.textContent = formatCurrency(portfolioValue - 10000); // assuming 10000 is the initial portfolio value
        createOrUpdateChart(cashValue, portfolioETFValue, portfolioStockValue, portfolioCryptoValue);

    }
   function incrementFieldByOne(elementId) {
        var elem = document.getElementById(elementId);
        var currentValue = parseInt(elem.value);
        currentValue += 1;
        elem.value = currentValue;
   }

   function decrementFieldByOne(elementId) {
        var elem = document.getElementById(elementId);
        var currentValue = parseInt(elem.value);
        if (currentValue > 0) {
            currentValue -= 1;
        }
        elem.value = currentValue;
   }




   function buyShares(inputId, priceId, displayId) {
        var inputElem = document.getElementById(inputId);
        var sharesToBuy = parseInt(inputElem.value);
        var cashElem = document.querySelector('.currency[data-id="cash"]');
        var cashValue = parseFloat(cashElem.textContent.replace('$', '').replace(',', ''));
        var priceElem = document.getElementById(priceId);
        var sharePrice = parseFloat(priceElem.textContent.replace('$', '').replace(',', ''));
        if (cashValue >= sharePrice * sharesToBuy) {
            var assetType = determineAssetType(inputId);
            if ((assetType === 'Stock' || assetType === 'Crypto') && !warnedAboutRisks[assetType]) {
                showModal(assetType, buyShares, [inputId, priceId, displayId]);  // Pass the transaction function and its arguments
                warnedAboutRisks[assetType] = true;  // Update the flag
                return;  // Abort the transaction
            }

            updatePortfolio(true, sharePrice * sharesToBuy, assetType);
            var displayElem = document.getElementById(displayId);
            displayElem.textContent = parseInt(displayElem.textContent) + sharesToBuy;
            // Update the hidden form field
            var ticker = inputId.replace('buy_sell_count_', '');
            var hiddenElem = document.getElementById('buy_count_' + ticker);
            var hiddenElemcash = document.getElementById('cash');
            if (hiddenElem) {
                hiddenElem.value = parseInt(displayElem.textContent) + sharesToBuy;
                hiddenElemcash.value = cashValue - sharePrice * sharesToBuy;
            } else {
                console.error('Element not found:', 'buy_count_' + ticker);
            }
            document.getElementById('buy_count_' + ticker).value = parseInt(displayElem.textContent);
            document.getElementById('cash').value = cashValue - sharePrice * sharesToBuy;
        } else {
            alert('Insufficient cash to buy assets.');

        }
        inputElem.value = 0;

   }

   function sellShares(inputId, priceId, displayId) {
        var inputElem = document.getElementById(inputId);
        var sharesToSell = parseInt(inputElem.value);
        var cashElem = document.querySelector('.currency[data-id="cash"]');
        var cashValue = parseFloat(cashElem.textContent.replace('$', '').replace(',', ''));
        var priceElem = document.getElementById(priceId);
        var sharePrice = parseFloat(priceElem.textContent.replace('$', '').replace(',', ''));
        var displayElem = document.getElementById(displayId);
        var currentShares = parseInt(displayElem.textContent);
        if (currentShares >= sharesToSell) {
            displayElem.textContent = currentShares - sharesToSell;
            var assetType = determineAssetType(inputId);  // New function to determine asset type
            updatePortfolio(false, sharePrice * sharesToSell, assetType);  // Updated function call

            // Update the hidden form field
            var ticker = inputId.replace('buy_sell_count_', '');
            var hiddenElem = document.getElementById('buy_count_' + ticker);
            var hiddenElemcash = document.getElementById('cash');
            if (hiddenElem) {
                hiddenElem.value = parseInt(displayElem.textContent) - sharesToSell;
                hiddenElemcash.value = cashValue + sharePrice * sharesToSell;
            } else {
                console.error('Element not found:', 'buy_count_' + ticker);
            }
            document.getElementById('buy_count_' + ticker).value = parseInt(displayElem.textContent);
            document.getElementById('cash').value = cashValue + sharePrice * sharesToSell;
        } else {
            alert('Not enough shares to sell.');

        }

        inputElem.value = 0;
   }

    function determineAssetType(inputId) {
        var ticker = inputId.replace('buy_sell_count_', '');
        switch (ticker) {
            case 'VOO':
            case 'VTI':
            case 'ZZW':
            case 'MDKS':
                return 'ETF';
            case 'UDX':
            case 'DSLO':
            case 'NOQ':
            case 'XPOW':
            case 'MWQ':
            case 'STCK':
                return 'Stock';
            case 'IUM':
            case 'JUNW':
            case 'ETQ':
            case 'BTC':
                return 'Crypto';
            default:
                console.error('Unknown ticker:', ticker);
                return null;
        }
    }
    var transactionData = null;  // Store data for a pending transaction

    function showModal(assetType, transactionFunction, transactionArgs) {
        var modal = document.getElementById("warningModal");
        var span = modal ? modal.getElementsByClassName("close")[0] : null;
        var warningText = modal ? modal.getElementsByTagName('p')[0] : null;
        var proceedButton = modal ? modal.querySelector('#proceedButton') : null;
        var cancelButton = modal ? modal.querySelector('#cancelButton') : null;



        var stockWarning = "Individual stocks may carry elevated levels of risk that may not be suitable for all investors. Make sure you understand the company's financials and risk factors before proceeding.";
        var cryptoWarning = "&#9888; Caution: Cryptocurrencies carry elevated levels of risk and are highly volatile. Make sure you understand what you’re investing in before proceeding.";

        if(modal && span && warningText && proceedButton && cancelButton) {
            warningText.innerHTML = assetType === 'Stock' ? stockWarning : cryptoWarning;
            modal.style.display = "block";

            proceedButton.onclick = function(event) {
                event.preventDefault();
                modal.style.display = "none";
                transactionFunction.apply(null, transactionArgs);  // Call the transaction function with its arguments
            };

            cancelButton.onclick = function(event) {
                event.preventDefault();
                modal.style.display = "none";  // Just close the modal and do nothing
            };

            // When the user clicks anywhere outside of the modal, close it
            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            }
        } else {
            console.error('Modal, span, or p element not found');
        }
    }
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/patternomaly/1.3.0/patternomaly.js"></script>
<script src="https://cdn.jsdelivr.net/gh/nagix/chartjs-plugin-patterns@1.2.1/dist/chartjs-plugin-patterns.js"></script>
<script>
    // Global variable to hold the chart instance
    var distributionChart = null;
    function createPatternWithColor(patternType, backgroundColor, patternColor) {
        var canvasPattern = pattern.draw(patternType, backgroundColor);
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');

        canvas.width = canvasPattern.width;
        canvas.height = canvasPattern.height;

        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.globalCompositeOperation = 'source-in';
        ctx.fillStyle = patternColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        return ctx.createPattern(canvas, 'repeat');
    }
    function createOrUpdateChart(cashValue, etfValue, stockValue, cryptoValue) {
        var ctx = document.getElementById('distributionChart').getContext('2d');

        var data = {
            labels: ['Cash', 'ETFs', 'Stocks', 'Cryptos'],
            datasets: [{
                data: [cashValue, etfValue, stockValue, cryptoValue],
                backgroundColor: [
                    pattern.draw('line-vertical', 'rgba(76, 175, 80, 0.2)'),       // Cross lines
                    pattern.draw('zigzag', 'rgba(25, 118, 210, 0.2)'), // Vertical lines
                    pattern.draw('line-horizontal', 'rgba(255, 152, 0, 0.2)'), // Horizontal lines
                    pattern.draw('dash', 'rgba(255, 193, 7, 0.2)')      // Dashed lines
                ],
                borderColor: [
                    'rgba(76, 175, 80, 1)',
                    'rgba(25, 118, 210, 1)',
                    'rgba(255, 152, 0, 1)',
                    'rgba(255, 193, 7, 1)'
                ],
                borderWidth: 1
            }]
        };

        // If the chart already exists, update its data and redraw
        if (distributionChart) {
            distributionChart.data.datasets[0].data = [cashValue, etfValue, stockValue, cryptoValue];
            distributionChart.update();
        } else {  // Else create the chart
            distributionChart = new Chart(ctx, {
                type: 'pie',
                data: data
            });
        }
    }




    // Call this function to initialize the chart
    document.addEventListener('DOMContentLoaded', function() {
        // Your existing code
        var initialCashValue = parseFloat(document.querySelector('.currency[data-id="cash"]').textContent.replace('$', '').replace(',', ''));
        var initialETFValue = parseFloat(document.querySelector('.currency[data-id="portfolio_ETF"]').textContent.replace('$', '').replace(',', ''));
        var initialStockValue = parseFloat(document.querySelector('.currency[data-id="portfolio_Stock"]').textContent.replace('$', '').replace(',', ''));
        var initialCryptoValue = parseFloat(document.querySelector('.currency[data-id="portfolio_Crypto"]').textContent.replace('$', '').replace(',', ''));

        createOrUpdateChart(initialCashValue, initialETFValue, initialStockValue, initialCryptoValue);

        // New code for modal and span
        var modal = document.getElementById("warningModal");
        var span = document.getElementsByClassName("close")[0];

        if(modal && span) {
            span.onclick = function() {
                modal.style.display = "none";
            };

            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            };
        } else {
            console.error('Modal or span element not found');
        }
    });

    // Adjust the color based on the profit value
    let profitElem = document.getElementById('profitValue_element');
    profitElem.style.color = (parseFloat(profitElem.textContent.replace('$', '').replace(',', '')) >= 0) ? 'green' : 'red';

</script>


{% endblock %}