@extends('layouts.customer_template')

@section('title')
    Bitbance Customer Dashboard
@endsection

@section('style')

    <link rel="stylesheet" href="{{asset('customer/assets/css/dashboard.css') }}" />
    <link rel="stylesheet" href="{{asset('customer/assets/css/dashboard-responsive.css') }}" />

    <style>
        .nextrow {
            margin-top: 0px; /* Adds spacing */
            display: block; /* Ensures it stays on a new line */
        }

        .sub-box {
            display: flex;
            flex-direction: column; /* Stack children vertically */
            align-items: center; /* Center-align text */
        }
    </style>

    <style>
        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .popup-content {
            width: 450px; /* Increased width */
            background: #7A5AF8;
            color: white;
            padding: 35px; /* Increased padding */
            border-radius: 15px; /* More rounded corners */
            text-align: left;
        }

        .popup-content h1 {
            background: #7A5AF8;
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            font-size: 28px; /* Bigger title */
            font-weight: bold;
        }

        .popup-content p {
            margin-bottom: 40px; /* Increased spacing */
            font-size: 22px; /* Adjusted font size */
            font-weight: 500; /* Made text bolder */
            text-align: left; /* Align text for better readability */
            display: flex;
            justify-content: space-between;
        }

        .countdown-box {
            background: white;
            color: #7d5efc;
            font-size: 32px; /* Larger countdown text */
            padding: 18px;
            border-radius: 15px;
            margin-top: 18px;
            text-align: center;
            font-weight: bold;
        }

    </style>

    <style>
        /* Custom Modal Size */
        .custom-modal-size {
            max-width: 400px; /* Adjust width as needed */
        }

        /* Modal Background */
        .modal-content {
            background: #7A5AF8; /* Purple background */
            border-radius: 15px;
            text-align: center;
            padding: 20px;
            color: white;
            border: none;
        }

        /* Modal Header */
        .modal-header {
            border-bottom: none;
            display: flex;
            justify-content: center;
        }

        /* Close Button */
        .btn-close {
            position: absolute;
            right: 15px;
            top: 15px;
            filter: invert(1);
        }

        /* Modal Title */
        .modal-title {
            font-size: 24px;
            font-weight: bold;
        }

        /* Modal Body */
        .modal-body p {
            font-size: 16px;
            opacity: 0.9;
        }

        /* Modal Footer */
        .modal-footer {
            border-top: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* Buttons */
        .btn-main2 {
            width: 100%;
            padding: 12px;
            background: transparent;
            border: 2px solid white;
            border-radius: 10px;
            color: white;
            font-size: 16px;
            font-weight: bold;
            transition: 0.3s;
        }

        .btn-main2:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Error Icon */
        .error-icon {
            width: 50px;
            height: 50px;
            margin: 10px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 3px solid white;
            border-radius: 50%;
        }

        .error-icon i {
            font-size: 28px;
        }

    </style>


@endsection


@section('header-menu')

@endsection

@section('content')


    <div class="container content-section" style="overflow-x: hidden">
        <div class="header-menu">
            <a href="{{ route('deposits') }}">
                <button class="btn-main">Deposit</button>
            </a>
            <a href="{{ route('withdraw') }}">
                <button class="btn-main">Withdraw</button>
            </a>
            <a href="{{ route('trades_wallet') }}">
                <button class="btn-main">Exchange</button>
            </a>
        </div>

        <div class="main-box">
            <img src="{{asset('customer/assets/images/bitbanc.png') }}" class="water-mark" alt="" />
        </div>

        <div class="container2">
            <div class="glowing-box">
                <img src="{{asset('customer/assets/images/block.png') }}" alt="" />
            </div>
            <div class="particles b1" style="left: 150px"></div>
            <div class="particles b2" style="left: 150px"></div>
            <div class="particles b3" style="left: 150px"></div>
            <div class="particles b1" style="right: 170px"></div>
            <div class="particles b2" style="right: 170px"></div>
            <div class="particles b3" style="right: 170px"></div>

        </div>

        {{--<div class="panel">
            <div class="btn-wrapper">
                <button class="main-button btn-main">
                    <p>Total Profit</p>
                    <span id="total_profit"> $ {{ round($profitWalletBalance,2) ?? 0}}</span>

                </button>
                <button class="main-button2 btn-main">
                    <p id="tradecurrency">BTC</p>
                    <p id="tradetype"> - </p>
                </button>
            </div>

            <div class="wrapper">
                <div class="btn-main sub-button">
                  Balance <span id="trade_amount_balance" style="margin-left: 10px">{{$tradeBalanceUSD ?? 0}} $</span>
                  <input  id="trade_amount" name="trade_amount" type="text" value="100" class="trade-input">%
                  <input  id="tradeval" type="hidden" value="" >
                </div>
                <button id="startBtn" type="button" class="sub-button btn-main mt-1">Start Trade</button>

                <div style="display:none" id="hiddendiv" class="button">
                    Entry Price: <span id="tradestartrate" style="margin-left: 10px"></span>
                </div>
                <div class="mt-1" id="#profit_loss_error"></div>
            </div>

            <div class="btn-wrapper">
                <button class="main-button2 btn-main">
--}}{{--                        <span id="countdown">00</span> sec--}}{{--
                    <p>PNL</p>
                    <p id="percentage">0%</p>
                </button>
                <button class="main-button btn-main">
                    <span id="profit_loss">
                        <p>Profit</p>
                        <p> 0 $</p>
                    </span>

                </button>
            </div>
        </div>--}}

        <div class="panel">
            <div class="mobile-panel">
                <div class="d-flex gap-2">
                    <div class="mbl-btn">
                        <span> Total Profit </span>
                        <span id="total_profit"> $ {{ round($profitWalletBalance,2) ?? 0}}</span>
                    </div>
                    <div class="mbl-btn">
                        <span> Trade Currency </span>
                        <span id="tradecurrency">BTC</span>
                        <p id="tradetype"> - </p>

                    </div>
                </div>
                <button class="full-btn-1">
                    Balance <span style="margin-left: 10px">{{$tradeBalanceUSD ?? 0}} $</span>
                    <input id="trade_amount" name="trade_amount" type="text" value="100" class="trade-input" />%
                    <input  id="tradeval" type="hidden" value="" >
                </button>
                {{--                    <button class="full-btn-2">Start Trade</button>--}}
                <button id="startBtn" type="button" class="full-btn-2 mt-1 startBtn">Start Trade</button>
                <div class="d-flex gap-2">
                    <div class="mbl-btn">
                        <span>PNL</span>
                        <span id="percentage">0%</span>

                    </div>


                    <div class="mbl-btn">
                        <span>Trade Profit</span>
                        <span id="profit_loss" >$ 0</span>
                    </div>
                </div>
            </div>

            <div class="btn-wrapper desktop-panel">
                <button class="main-button btn-main">
                    <span> Total Profit </span>
                    <span id="total_profit2"> $ {{ round($profitWalletBalance,2) ?? 0}}</span>
                    {{--                        <p>PNL</p>--}}
                    {{--                        <p id="percentage">0%</p>--}}
                </button>
                <button class="main-button2 btn-main">
                    <p id="tradecurrency2">BTC</p>
                    <p id="tradetype2"> - </p>
                </button>
            </div>

            <div class="wrapper desktop-panel">
                <div class="btn-main sub-button">
                    Balance <span style="margin-left: 10px">{{$tradeBalanceUSD ?? 0}} $</span>
                    <input id="trade_amount2" name="trade_amount2" type="text" value="100" class="trade-input" />%

                    <input  id="tradeval2" type="hidden" value="" >
                </div>
                <button class="sub-button btn-main startBtn" id="startBtn2" type="button">Start Trade</button>
            </div>

            <div class="btn-wrapper desktop-panel">
                <button class="main-button2 btn-main">
                    <p>PNL</p>
                    <p id="percentage2">0%</p>
                    {{--                        <p>1M</p>--}}
                    {{--                        <p>60</p>--}}
                </button>
                <button class="main-button btn-main">
                    <p>Profit</p>
                    <p id="profit_loss2">0 $</p>
                </button>
            </div>
        </div>



        @include('layouts.includes.footer')
    </div>

    <!-- Popup HTML -->
    <div id="tradePopup" class="popup-overlay" style="display: none;">
        <div class="popup-content">
            <h1>Trade Started</h1>
            <div class="trade-details">
                <p>Trade Coin: <span id="popupTradeCoin"></span></p>
                <p>Entry Price: <span id="popupEntryPrice"></span></p>
                <p>Current Price: <span id="popupCurrentPrice"></span></p>
                <p>Leverage: <span id="popupLeverage"></span></p>
                <p>Trade Time: <span id="popupTradeTime"></span></p>
                <div class="countdown-box">
                    <h3 id="popupCountdown">60</h3>
                </div>
            </div>
        </div>
    </div>



    <!-- Custom Confirmation Modal -->
    <div class="modal fade body" id="messageModal" tabindex="-1" aria-labelledby="customConfirmModalLabel" aria-hidden="true">
        <div class="modal-dialog custom-modal-size">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="error-icon">
                        <i class="bi-exclamation-triangle-fill"></i>
                    </div>
                </div>
                <div class="modal-body">
                    <h5 class="modal-title" id="customConfirmModalLabel">Message</h5>
                    <p id="modelMessageBody">
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-main2" id="close" data-bs-dismiss="modal">OK</button>
                    <button type="button" class="btn-main2" id="gotoNext">View Trade History</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')

    <script>
        $(document).ready(function () {
            let timer;
            let isCounting = false;
            let tradeClosed = false;
            let selectedTradeCurrency = null;
            let currentPriceInterval = null;
            let lastPrice = null;

            $(".startBtn").click(function (e) {
                e.preventDefault();
                let trade_percentage = $("#trade_amount").val();
                trade_percentage = parseFloat(trade_percentage.replace(/,/g, ""));

                if (isNaN(trade_percentage) || trade_percentage < 1 || trade_percentage > 100) {
                    alert("Please enter a percentage amount between 1 and 100.");
                    $("#profit_loss_error").html(`<p style="color: white;">Please enter a percentage amount between 1 and 1000.</p>`);
                    return;
                }

                if (!isCounting) {
                    isCounting = true;
                    tradeClosed = false;
                    $(".startBtn").prop("disabled", true);
                    $('#modelMessageBody').text('');

                    $.ajax({
                        url: "{{ route('countdown.start') }}",
                        type: "POST",
                        data: { 'trade_percentage': trade_percentage },
                        headers: { 'X-CSRF-TOKEN': "{{ csrf_token() }}" },
                        success: function (response) {
                            if (response.status === 'success') {
                                selectedTradeCurrency = response.currency;
                                $("#tradePopup").css("display", "flex").fadeIn();
                                $("#popupTradeCoin").text(response.currency);

                                let rateprice = parseFloat(response.btcrate).toString();
                                let price = rateprice.replace(/(\.\d*?[1-9])0+$/, '$1');
                                $("#popupEntryPrice").text(price);
                                $("#popupCurrentPrice").text(price);
                                lastPrice = parseFloat(price);
                                $("#popupLeverage").text("150x");
                                $("#popupTradeTime").text("1M");

                                // Clear and start interval for current price
                                if (currentPriceInterval) clearInterval(currentPriceInterval);
                                currentPriceInterval = setInterval(() => {
                                    fetchAndUpdateCurrentPrice(selectedTradeCurrency+"USDT");
                                }, 10000);

                                startCounter(60);
                            } else {
                                $('#modelMessageBody').text(response.message);
                                showCustomConfirm();
                                $(".startBtn").prop("disabled", false);
                            }
                        }
                    });
                }
            });

            function startCounter(countdown) {
                if (timer) clearInterval(timer);
                $("#popupCountdown").text(countdown);

                timer = setInterval(function () {
                    if (countdown <= 0) {
                        clearInterval(timer);
                        $("#popupCountdown").text("0");
                        closeTrade();
                        if (currentPriceInterval) {
                            clearInterval(currentPriceInterval);
                            currentPriceInterval = null;
                        }
                    } else {
                        $("#popupCountdown").text(--countdown);
                    }
                }, 1000);
            }

            function closeTrade(force = false) {
                $(".startBtn").prop("disabled", true);
                var tradeval = $("#tradeval").val();

                $.ajax({
                    url: "{{ route('countdown.end') }}",
                    type: "POST",
                    data: { 'tradeval': tradeval },
                    headers: { 'X-CSRF-TOKEN': "{{ csrf_token() }}" },
                    success: function (response) {
                        isCounting = false;
                        tradeClosed = true;
                        $(".startBtn").prop("disabled", false);
                        $("#tradePopup").fadeOut();

                        if (currentPriceInterval) {
                            clearInterval(currentPriceInterval);
                            currentPriceInterval = null;
                        }

                        if (response.status === 'success') {
                            $(".startBtn").show();
                            $("#hiddendiv").hide();

                            $("#tradetype, #tradetype2").html(response.trade_type);
                            $("#tradecurrency, #tradecurrency2").html(response.currency);

                            let profitWalletBalance = parseFloat("{{ $profitWalletBalance ?? 0 }}") || 0;
                            let profitAmount = parseFloat(response.profitLossAmount) || 0;
                            let profitLossAmount = profitAmount.toString().replace(/(\.\d*?[1-9])0+$/, '$1');
                            profitWalletBalance += profitAmount;
                            profitWalletBalance = profitWalletBalance.toFixed(2);

                            $("#total_profit, #total_profit2").html(`<p>$ ${profitWalletBalance}</p>`);

                            let profitLossSign = response.profitLoss === 'Profit' ? '+' : '-';
                            let profitLossHTML = `<p>${profitLossSign} ${profitLossAmount} $</p>`;
                            $("#profit_loss, #profit_loss2").html(profitLossHTML);

                            let percentageHTML = `<p>${parseFloat(response.profitLossPercentage).toFixed(2)} %</p>`;
                            $("#percentage, #percentage2").html(percentageHTML);

                            $("#trade_amount_balance, #trade_amount_balance2").html(response.tradeBalanceUSD);
                        } else {
                            $("#profit_loss_error").html(`<p style="color: white;">${response.message}</p>`);
                        }
                    },
                    error: function () {
                        console.error("Trade close failed!");
                        $(".startBtn").prop("disabled", false);
                        $("#tradePopup").fadeOut();
                        if (currentPriceInterval) {
                            clearInterval(currentPriceInterval);
                            currentPriceInterval = null;
                        }
                    }
                });
            }

            // Fetch all rates initially for other UI
            fetchBinanceRates();
            setInterval(fetchBinanceRates, 10000);
        });
    </script>

    <script>
        async function fetchAndUpdateCurrentPrice(symbol) {
            try {
                //const response = await fetch("https://api.binance.com/api/v3/ticker/price?symbol=" + symbol);
                const response = await fetch(`https://corsproxy.io/?https://api.binance.com/api/v3/ticker/price?symbol=${symbol}`);
                const data = await response.json();

                if (data && data.price) {
                    let current = parseFloat(data.price);
                    let displayPrice = current.toString().replace(/(\.\d*?[1-9])0+$/, '$1');
                    $("#popupCurrentPrice").text(displayPrice);
                    /*const $priceElem = $("#popupCurrentPrice");

                    if (lastPrice !== null && current !== lastPrice) {
                        $priceElem
                            .css("color", current > lastPrice ? "green" : "red")
                            .fadeOut(100).fadeIn(100);

                        setTimeout(() => $priceElem.css("color", "#fff"), 2000);
                    }

                    $priceElem.text(displayPrice);
                    lastPrice = current;*/
                }
            } catch (error) {
                console.error("Error fetching updated price for", symbol, error);
            }
        }
    </script>


    <script>
        /*$(document).ready(function () {
            let timer;
            let isCounting = false;
            let tradeClosed = false;
            let selectedTradeCurrency = null;
            let currentPriceInterval = null;
            $(".startBtn").click(function (e) {
                e.preventDefault();
                console.log($("#tradePopup").length);
                let trade_percentage = $("#trade_amount").val();
                trade_percentage = parseFloat(trade_percentage.replace(/,/g, ""));

                if (isNaN(trade_percentage) || trade_percentage < 1 || trade_percentage > 100) {
                    alert("Please enter a percentage amount between 1 and 100.");
                    $("#profit_loss_error").html(`<p style="color: white;">Please enter a percentage amount between 1 and 1000.</p>`);
                    return;
                }

                if (!isCounting) {
                    isCounting = true;
                    tradeClosed = false;
                    //$("#startBtn").prop("disabled", true);
                    $(".startBtn").prop("disabled", true);
                    $('#modelMessageBody').text('');
                    $.ajax({
                        url: "{{ route('countdown.start') }}",
                            type: "POST",
                            data: { 'trade_percentage': trade_percentage },
                            headers: { 'X-CSRF-TOKEN': "{{ csrf_token() }}" },
                            success: function (response) {
                                console.log(response);
                                if (response.status === 'success') {
                                    selectedTradeCurrency = response.currency;
                                    $("#tradePopup").css("display", "flex").fadeIn();
                                    $("#popupTradeCoin").text(response.currency);
                                    let rateprice = parseFloat(response.btcrate).toString();
                                    let price = rateprice.replace(/(\.\d*?[1-9])0+$/, '$1');
                                    $("#popupEntryPrice").text(price);
                                    $("#popupCurrentPrice").text(price);
                                    $("#popupLeverage").text("150x");
                                    $("#popupTradeTime").text("1M");
                                    $("#tradePopup").fadeIn();

                                    // Clear any previous interval
                                    if (currentPriceInterval) clearInterval(currentPriceInterval);
                                        // Start a new interval to fetch latest price every 10s
                                    currentPriceInterval = setInterval(() => {
                                        fetchAndUpdateCurrentPrice(selectedTradeCurrency);
                                    }, 10000);

                                    startCounter(60);
                                } else {

                                    $('#modelMessageBody').text(response.message);
                                    showCustomConfirm();
                                    //alert("Trade failed! " + response.message);
                                    //$("#loadingOverlay").fadeOut();
                                    $("#startBtn").prop("disabled", false);
                                }
                            }
                        });
                    }
                });

                function startCounter(countdown) {
                    if (timer) clearInterval(timer);
                    $("#popupCountdown").text(countdown);

                    timer = setInterval(function () {
                        if (countdown <= 0) {
                            clearInterval(timer);
                            $("#popupCountdown").text("0");
                            closeTrade();
                            if (currentPriceInterval) clearInterval(currentPriceInterval);
                            currentPriceInterval = null;
                        } else {
                            $("#popupCountdown").text(--countdown);
                        }
                    }, 1000);
                }


                    fetchBinanceRates();
                    setInterval(fetchBinanceRates, 10000); // Refresh every 10 sec


                function closeTrade(force = false) {
                    //console.log(force ? "Forcing trade close..." : "Closing trade...");

                    //$("#startBtn").prop("disabled", true);
                    $(".startBtn").prop("disabled", true);
                    var tradeval = $("#tradeval").val();
                    $.ajax({
                        url: "{{ route('countdown.end') }}",
                        type: "POST",
                        data: { 'tradeval': tradeval },
                        headers: { 'X-CSRF-TOKEN': "{{ csrf_token() }}" },
                        success: function (response) {
                            isCounting = false;
                            tradeClosed = true;
                            //$("#startBtn").prop("disabled", false);
                            $(".startBtn").prop("disabled", false);
                            $("#tradePopup").fadeOut();
                           // $("#loadingOverlay").fadeOut();
                            if (response.status === 'success') {
                                //$("#startBtn").show();
                                $(".startBtn").show();
                                $("#hiddendiv").hide();

                                $("#tradetype").html(response.trade_type);
                                $("#tradetype2").html(response.trade_type);

                                $("#tradecurrency").html(response.currency);
                                $("#tradecurrency2").html(response.currency);

                                var profitWalletBalance = parseFloat("{{ $profitWalletBalance ?? 0 }}") || 0;
                                let profitAmount = parseFloat(response.profitLossAmount) || 0;
                                let profitLossAmount = profitAmount.toString().replace(/(\.\d*?[1-9])0+$/, '$1');
                                //let profitAmount = parseFloat(response.profitLossAmount).toString(); // Convert to float then string
                                //let profitLossAmount = profitAmount.replace(/(\.\d*?[1-9])0+$/, '$1');

                                profitWalletBalance += parseFloat(profitAmount);
                                profitWalletBalance = profitWalletBalance.toFixed(2);
                                let profitWalletBalanceHTML = `<p>$ ${profitWalletBalance}</p>`;

                                $("#total_profit").html(profitWalletBalanceHTML);
                                $("#total_profit2").html(profitWalletBalanceHTML);

                                let profitLossSign = response.profitLoss === 'Profit' ? '+' : '-';
                                //let profitLossHTML = `<p>${response.profitLoss}</p><p>${profitLossSign} ${profitLossAmount} $</p>`;
                                let profitLossHTML = `<p>${profitLossSign} ${profitLossAmount} $</p>`;
                                $("#profit_loss").html(profitLossHTML);
                                $("#profit_loss2").html(profitLossHTML);

                                let profitLossPercentage = parseFloat(response.profitLossPercentage.toFixed(2))
                                let percentageHTML = `<p>${profitLossPercentage} %</p>`;

                                $("#percentage").html(percentageHTML);
                                $("#percentage2").html(percentageHTML);

                                $("#trade_amount_balance").html(response.tradeBalanceUSD);
                                $("#trade_amount_balance2").html(response.tradeBalanceUSD);


                                $("#trade_amount").val();
                                $("#trade_amount2").val();

                            } else {

                                $("#profit_loss_error").html(`<p style="color: white;">${response.message}</p>`);
                            }

                        },
                        error: function () {
                            console.error("Trade close failed! error in closing trade");
                            //$("#startBtn").prop("disabled", false);
                            $(".startBtn").prop("disabled", false);
                            //$("#startBtn").prop("disabled", false);
                            $("#tradePopup").fadeOut();

                            if (currentPriceInterval) clearInterval(currentPriceInterval);
                            currentPriceInterval = null;
                        }
                    });
                }

            });


            async function fetchAndUpdateCurrentPrice(symbol) {
                try {
                    const response = await fetch("https://api.binance.com/api/v3/ticker/price?symbol=" + symbol);
                    const data = await response.json();
                    if (data && data.price) {
                        let price = parseFloat(data.price).toString().replace(/(\.\d*?[1-9])0+$/, '$1');
                        $("#popupCurrentPrice").text(price);
                    }
                } catch (error) {
                    console.error("Error fetching updated price for", symbol, error);
                }
            }
            */
    </script>


    <script>

        // Function to show the modal
        function showCustomConfirm() {
            console.log("Opening modal...");
            var confirmModal = new bootstrap.Modal(document.getElementById("messageModal"));
            confirmModal.show();
        }

        document.addEventListener("DOMContentLoaded", function () {

            var modalElement = document.getElementById("messageModal");
            if (!modalElement) {
                console.error("Modal element not found!");
                return;
            }
            // "Go Back" button
            var goBackButton = document.getElementById("close");
            if (goBackButton) {
                //console.log("Go Back Button Found");
                goBackButton.addEventListener("click", function () {
                    //console.log("Closing modal...");
                    var confirmModal = bootstrap.Modal.getInstance(modalElement);
                    if (confirmModal) {
                        confirmModal.hide();
                    } else {
                        console.error("No Bootstrap modal instance found!");
                    }

                    setTimeout(function() {
                        location.reload();
                    }, 3500); // Reload page after 3.5 seconds

                });
            }
            // "Continue Without Buying" button
            var continueWithoutBuyButton = document.getElementById("gotoNext");
            if (continueWithoutBuyButton) {
                continueWithoutBuyButton.addEventListener("click", function () {
                    console.log("Closing modal and going to next page...");
                    var confirmModal = bootstrap.Modal.getInstance(modalElement);
                    if (confirmModal) {
                        confirmModal.hide();
                    } else {
                        console.error("No Bootstrap modal instance found!");
                    }

                    setTimeout(function () {
                        location.replace("{{route('trades')}}");
                    }, 1000);
                    // Replace with your actual function
                    //gotoNextPage(); // Ensure this function exists
                });
            }
        });

    </script>



    <script>

        let selectedCurrencies = [];

        async function fetchUnitsFromDB() {
            try {
                selectedCurrencies = @json($units); // Fetch units directly from Blade
                fetchBinanceRates();
                setInterval(fetchBinanceRates, 10000); // Refresh every 10 sec
            } catch (error) {
                console.error("Error fetching units:", error);
            }
        }

        async function fetchBinanceRates() {
            if (selectedCurrencies.length === 0) {
                console.warn("No selected currencies available.");
                return;
            }

            try {
                const response = await fetch("https://api.binance.com/api/v3/ticker/price");
                const data = await response.json();

                const filteredRates = data.filter(item => selectedCurrencies.includes(item.symbol));

                const mainBox = document.querySelector(".main-box");
                mainBox.innerHTML = ""; // Clear previous data

                filteredRates.forEach(rate => {
                    let subBox = document.createElement("div");
                    subBox.classList.add("sub-box");
                    if (rate.symbol === "BTCUSDT" || rate.symbol === "ETHUSDT") {
                        subBox.innerHTML = `<p>${rate.symbol}</p>
                                <p class="nextrow">${parseFloat(rate.price).toFixed(2)}</p>`;
                    } else {
                        let rateprice = parseFloat(rate.price).toString(); // Convert to float then string
                        let price = rateprice.replace(/(\.\d*?[1-9])0+$/, '$1'); // Remove extra trailing zeros but keep one

                        subBox.innerHTML = `<p>${rate.symbol}</p>
                                <p class="nextrow">${price}</p>`;
                    }
                    mainBox.appendChild(subBox);
                    /*
                    let subBox = document.createElement("div");
                    subBox.classList.add("sub-box");
                    subBox.innerHTML = `<p>${rate.symbol}</p>  <p class="nextrow">${parseFloat(rate.price).toFixed(2)}</p>`;
                    //subBox.innerHTML = `<p>${rate.symbol}</p><br>${parseFloat(rate.price).toFixed(2)}`;
                    mainBox.appendChild(subBox);*/
                });

            } catch (error) {
                console.error("Error fetching Binance rates:", error);
            }
        }

        // Fetch units first, then fetch Binance rates
        fetchUnitsFromDB();

        function createParticles() {
            const containers = document.querySelectorAll(".particles");
            containers.forEach((container) => {
                let moveDirection = container.style.left === "150px" ? -100 : 100;
                for (let i = 0; i < 20; i++) {
                    let particle = document.createElement("div");
                    particle.classList.add("particle");
                    container.appendChild(particle);

                    gsap.set(particle, {
                        x: Math.random() * 200 - 100,
                        y: Math.random() * 100 - 80,
                        opacity: Math.random(),
                    });

                    gsap.to(particle, {
                        x: `+=${moveDirection}`,
                        opacity: 0,
                        duration: Math.random() * 1.5 + 0.3,
                        repeat: -1,
                        yoyo: false,
                        ease: "power1.out",
                        delay: Math.random() * 1,
                    });
                }
            });
        }
        createParticles();
    </script>



    <script>
        function toggleSidebar() {
            var sidebar = document.getElementById("sm-sidebar");
            var burgerMenu = document.querySelector(".burger-menu");

            if (sidebar.style.left === "0px") {
                sidebar.style.left = "-40%";
                burgerMenu.innerHTML = "&#9776;";
            } else {
                sidebar.style.left = "0px";
            }
        }
    </script>

    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
        integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"
    ></script>


@endsection