<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, minimum-scale=1">
    <title>Mini App</title>
    <script src="{{ url_for('static',filename='js/telegram-web-app.js')}}"></script>
    <script src="{{ url_for('static',filename='js/jquery-3.3.1.min.js')}}"></script>
    <script src="{{ url_for('static',filename='js/app.js')}}?v=0.9.4"></script>
    <!-- <script src="{{ url_for('static',filename='js/simulate.js')}}?v=2.29"></script> -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/animate.min.css')}}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/styles.css')}}?v=0.9.4">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="icon" href="{{ url_for('static',filename='images/favicon.ico')}}" type="image/x-icon">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>
</head>

<script>
    //platformCheck();
    const root = document.querySelector(':root');
    const bodyStyles = getComputedStyle(root); 
    const mainColor = bodyStyles.getPropertyValue('--backgroundcolor');
    tg.setHeaderColor(mainColor);
</script>
<body class="">
       <div class="loader-container">
        <div class="loaderM"></div>
    </div> 
    <div id="toast-container" class="toast-container">
    </div>
    <div class="header">


        <div class="container">
            <div class="row align-items-center d-flex justify-content-between">
                <div class="col-auto">
                    <h6 class="animate__animated animate__zoomIn">
                        <img style="width: 2rem; border-radius: 20px;" id="profile"  src="" onerror="this.onerror=null; this.src='/static/images/raven3.png';">
                        <span id="first_namebase"></span>
                    </h6>
                </div>
                <div class="col-auto d-flex align-items-center">
                    <span id="score" style="display:flex;"></span><span>💎</span>
                    <div class="dropdown">
                        <div class="dropdown-toggle" type="button" id="dropdownMenuButton" aria-haspopup="true"
                            aria-expanded="false">
                            <img id="selectedFlag" src="/static/images/flags/en.png"
                                style="width: 20px; height: 15px; vertical-align: right;; margin-right: 0px;" />
                            <span id="selectedText"></span>
                        </div>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <div class="dropdown-item" data-value="en" data-img-src="/static/images/flags/en.png"><img
                                    src="/static/images/flags/en.png"
                                    style="width: 20px; height: 15px; vertical-align: middle; margin-right: 0px;" />
                            </div>
                            <div class="dropdown-item" data-value="fa" data-img-src="/static/images/flags/fa.png"><img
                                    src="/static/images/flags/fa.png"
                                    style="width: 20px; height: 15px; vertical-align: middle; margin-right: 0px;" />
                            </div>
                            <div class="dropdown-item" data-value="fr" data-img-src="/static/images/flags/fr.png"><img
                                    src="/static/images/flags/fr.png"
                                    style="width: 20px; height: 15px; vertical-align: middle; margin-right: 0px;" />
                            </div>
                            <div class="dropdown-item" data-value="ar" data-img-src="/static/images/flags/ar.png"><img
                                    src="/static/images/flags/ar.png"
                                    style="width: 20px; height: 15px; vertical-align: middle; margin-right: 0px;" />
                            </div>
                            <div class="dropdown-item" data-value="es" data-img-src="/static/images/flags/es.png"><img
                                    src="/static/images/flags/es.png"
                                    style="width: 20px; height: 15px; vertical-align: middle; margin-right: 0px;" />
                            </div>
                            <div class="dropdown-item" data-value="hi" data-img-src="/static/images/flags/hi.png"><img
                                    src="/static/images/flags/hi.png"
                                    style="width: 20px; height: 15px; vertical-align: middle; margin-right: 0px;" />
                            </div>
                            <div class="dropdown-item" data-value="ru" data-img-src="/static/images/flags/ru.png"><img
                                    src="/static/images/flags/ru.png"
                                    style="width: 20px; height: 15px; vertical-align: middle; margin-right: 0px;" />
                            </div>
                            <div class="dropdown-item" data-value="ch" data-img-src="/static/images/flags/ch.png"><img
                                    src="/static/images/flags/ch.png"
                                    style="width: 20px; height: 15px; vertical-align: middle; margin-right: 0px;" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script></script>
    {% set withdrawcoins = withdrawcoins if withdrawcoins is defined else 0 %}

    <div id="content">
        {% include 'partials/main.html'%}
    </div>


    <footer class="footer">

        <div class="button-container-wrapper">
            <div class="button-container">
                <button class="custom-btn shake" onclick="showPage('page-users')">
                    <i class="fas fa-users"></i>
                </button>
                <div class="button-text" id="btn_users">Users</div>
            </div>
            <div class="button-container">
                <button class="custom-btn shake" onclick="showPage('page-mystatus')">
                    <i class="fas fa-user-plus"></i>
                </button>
                <div class="button-text" id="btn_mystatus">My Status</div>
            </div>
            <div class="button-container">
                <button class="custom-btn shake" onclick="showPage('page-tasks')">
                    <i class="fas fa-tasks"></i>
                </button>
                <div class="button-text" id="btn_tasks">Tasks</div>
            </div>
            <div class="button-container">
                <button class="custom-btn shake" onclick="showPage('page-payments')">
                    <i class="fas fa-gift"></i>
                </button>
                <div class="button-text" id="btn_payments">Payments</div>
            </div>
            <div class="button-container">
                <button class="custom-btn shake" onclick="showPage('page-withdraw')">
                    <i class="fas fa-donate"></i>
                </button>
                <div class="button-text" id="btn_withdraw">Withdraw</div>
            </div>
            <div class="button-container">
                <button class="custom-btn shake" onclick="showPage('page-home')">
                    <i class="fas bi-house-heart-fill"></i>
                </button>
                <div class="button-text" id="btn_home">Home</div>
            </div>
        </div>
    </footer>
    <script>
        
        document.getElementById('first_namebase').textContent = " " + (firstname.slice(0, 15));
        document.getElementById('profile').setAttribute('src', photo);
    </script>
    <script>




getCoin();
tg.expand();
tg.disableVerticalSwipes();
if (tg.initDataUnsafe.start_param != null) {
    referralCode = tg.initDataUnsafe.start_param;
}

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

    var dropdownToggle = document.querySelector('.dropdown-toggle');
    var dropdownMenu = document.querySelector('.dropdown-menu');
    var dropdownItems = document.querySelectorAll('.dropdown-item');
    var selectedFlag = document.getElementById('selectedFlag');
    var selectedText = document.getElementById('selectedText');
    console.log('cooki', getCookie('lang'));
    if (getCookie('lang') == 'undefined' || getCookie('lang') == '') {
        setCookie('lang', window.Telegram.WebApp.initDataUnsafe.user.language_code, 365);
        lang = window.Telegram.WebApp.initDataUnsafe.user.language_code;
        if (lang == 'en' || lang == 'ar' || lang == 'es' || lang == 'fa' || lang == 'fr' || lang == 'ch' || lang == 'hi' || lang == 'ru') {
            selectedFlag.src = '/static/images/flags/' + lang + '.png';
        } else {
            selectedFlag.src = '/static/images/flags/en.png';
        }

    } else {
        selectedFlag.src = '/static/images/flags/' + getCookie('lang') + '.png';
    }
    dropdownToggle.addEventListener('click', function (event) {
        dropdownMenu.classList.toggle('show');
    });

    dropdownItems.forEach(function (item) {
        item.addEventListener('click', function () {
            var imgSrc = this.getAttribute('data-img-src');
            var value = this.getAttribute('data-value');
            var text = this.textContent.trim();

            selectedFlag.src = imgSrc;
            selectedText.textContent = text;
            dropdownMenu.classList.remove('show');
            updateText(value);
        });
    });
    document.addEventListener('click', function (event) {
        if (!dropdownToggle.contains(event.target) && !dropdownMenu.contains(event.target)) {
            dropdownMenu.classList.remove('show');
        }
    });
});


    </script>
</body>
</html>
<script src="{{ url_for('static',filename='js/translate.js')}}?v=8"></script>
<script>
        document.addEventListener('DOMContentLoaded', function() {

            function checkValue() {
                var last = document.getElementById('lastwithdraw').getAttribute('data-value');
                
                if (last) {
                    
                    if (Date.now() / 1000 < parseInt(last) + 2629743) {
                        console.log(last);
                        console.log(Date.now() / 1000);
                        countdown(parseInt(last) + 2629743, 9999);
                    }
                    clearInterval(interval);
                }
            }
            var interval = setInterval(checkValue, 100);

        });

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

            function checkSpanValues() {
                var spans = document.querySelectorAll('span[id^="span"]');
                
                spans.forEach(function(span) {
                    var id = span.id;
                    var value = span.textContent || span.innerText;
               
                    var number = id.replace('span', '');
                    
                    getActive(value, number, 40000);
   
                });
            }

      
            var interval = setInterval(function() {
                if (document.querySelector('span[id^="span"]')) {
                    clearInterval(interval);
                    checkSpanValues();
                }
            }, 100);
        });
        
        document.addEventListener("DOMContentLoaded", function() {
            sendData();
            getAllData();
            
        });
        
        setTimeout(function () {
            
            document.querySelector('.loaderM').style.display = 'none';
            loadTranslations();
            document.getElementById('content').style.display = 'block';
        }, 6000);

        
        tg.ready();

</script>
