<style>
        /* Styles for the Telegram chat button */
        #telegramChatButton {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #0088cc;
            color: white;
            border: none;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            cursor: grab;
            z-index: 1000;
        }

        #telegramChatButton img {
            width: 30px;
            height: 30px;
        }

        /* Styles for the Telegram popup */
        #telegramPopup {
            position: fixed;
            bottom: 90px;
            right: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 10px;
            display: none;
            z-index: 1000;
            width: 300px;
        }

        #telegramPopup a {
            text-decoration: none;
            color: #0088cc;
            font-size: 16px;
        }

        #telegramPopup .close-btn {
            text-align: right;
            font-size: 14px;
            color: #888;
            cursor: pointer;
        }
    </style>
    <!-- Telegram chat button -->
    <div id="telegramChatButton" draggable="true">
        <img src="https://upload.wikimedia.org/wikipedia/commons/8/82/Telegram_logo.svg" alt="Telegram">
    </div>

    <!-- Telegram popup -->
    <div id="telegramPopup">
        <div class="close-btn" id="closePopup">✖</div>
        <p>Need help? Chat with us on Telegram!</p>
        <a href="https://t.me/+wQvta2Iq_4Q3MzA1" target="_blank">Open Telegram Chat</a>
    </div>

    <script>
        // JavaScript to toggle the popup
        const chatButton = document.getElementById('telegramChatButton');
        const popup = document.getElementById('telegramPopup');
        const closePopup = document.getElementById('closePopup');

        chatButton.addEventListener('click', () => {
            popup.style.display = popup.style.display === 'none' || popup.style.display === '' ? 'block' : 'none';
        });

        closePopup.addEventListener('click', () => {
            popup.style.display = 'none';
        });

        // Dragging functionality
        chatButton.addEventListener('dragstart', (e) => {
            e.dataTransfer.setData('text/plain', null); // For Firefox compatibility
            chatButton.style.cursor = 'grabbing';
        });

        document.addEventListener('dragover', (e) => {
            e.preventDefault(); // Allow the drop
        });

        document.addEventListener('drop', (e) => {
            e.preventDefault(); // Prevent default behavior
            const x = e.clientX - chatButton.offsetWidth / 2;
            const y = e.clientY - chatButton.offsetHeight / 2;

            // Update button position
            chatButton.style.left = `${x}px`;
            chatButton.style.top = `${y}px`;
            chatButton.style.position = 'absolute'; // Change to absolute for drag-and-drop
        });
    </script><!--====== Header Start ======-->
<header>
    <div class="header-top">
        <div class="header-left" onclick="window.location.href='/dashboard'">
            <img src="images/logo.svg" class="logo1" />
        </div>
        @if (session()->has('userlogin'))
            <div class="header-right d-flex align-items-center">
                <a href="/deposit">
                    <button class="deposite-btn rounded-pill d-flex align-items-center me-2">
                        <span class="material-symbols-outlined me-2"> payments </span>
                        <!-- <span>$</span> -->
                        <span class="me-2" id="header_wallet_balance">₹{{ wallet(user('id')) }}</span>
                        DEPOSIT
                    </button>
                </a>
                <div class="btn-group">
                    <button type="button"
                        class="btn btn-transparent dropdown-toggle p-0 d-flex align-items-center justify-content-center caret-none"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        <span class="material-symbols-outlined f-24 menu-icon text-white">
                            menu
                        </span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark profile-dropdown p-0">
                        <li class="profile-head d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <img src="images/avtar/av-1.png" class="avtar-ico" id="avatar_img">
                                <div>
                                    <div class="profile-name mb-1">{{ user('email') }} </div>
                                    <div class="profile-name" id="username">{{ user('id') }}</div>
                                </div>

                            </div>
                        </li>


                        <li>
                            <a href="/crash" class="f-12 justify-content-between">
                                <div class="d-flex align-items-center">
                                    <span class="material-symbols-outlined ico f-20">
                                        flight_takeoff
                                    </span>
                                    <img src="../../images/logo.svg" class="side_logo">
                                </div>
                            </a>
                        </li>


                        <li>
                            <a href="/deposit" class="f-12 justify-content-between">
                                <div class="d-flex align-items-center">
                                    <span class="material-symbols-outlined ico f-20">
                                        payments
                                    </span>DEPOSIT FUNDS
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="/withdraw" class="f-12 justify-content-between">
                                <div class="d-flex align-items-center">
                                    <span class="material-symbols-outlined ico f-20">
                                        payments
                                    </span>WITHDRAW FUNDS FROM THE ACCOUNT
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="/amount-transfer" class="f-12 justify-content-between">
                                <div class="d-flex align-items-center">
                                    <span class="material-symbols-outlined ico f-20">
                                        payments
                                    </span>AMOUNT TRANSFER
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="/profile" class="f-12 justify-content-between">
                                <div class="d-flex align-items-center">
                                    <span class="material-symbols-outlined ico f-20">
                                        account_circle
                                    </span>PERSONAL DETAILS
                                </div>
                            </a>
                        </li>
                        {{-- <li>
                            <a href="#" class="f-12 justify-content-between">
                                <div class="d-flex align-items-center">
                                    <span class="material-symbols-outlined ico f-20">
                                        payments
                                    </span>TRANSFER FUNDS
                                </div>
                            </a>
                        </li> --}}
                        <li>
                            <a href="/deposit_withdrawals" class="f-12 justify-content-between">
                                <div class="d-flex align-items-center">
                                    <span class="material-symbols-outlined ico f-20">
                                        payments
                                    </span>TRANSACTION HISTORY
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="/level-management" class="f-12 justify-content-between">
                                <div class="d-flex align-items-center">
                                    <span class="material-symbols-outlined ico f-20">
                                        payments
                                    </span>LEVEL MANAGEMENT
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="/referal" class="f-12 justify-content-between">
                                <div class="d-flex align-items-center">
                                    <span class="material-symbols-outlined ico f-20">
                                        payments
                                    </span>REFERRAL
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="/logout" class="f-12 justify-content-between">
                                <div class="d-flex align-items-center">
                                    <span class="material-symbols-outlined ico f-20">
                                        payments
                                    </span>SIGN OUT
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        @else
            <div class="header-right d-flex align-items-center">
                <button class="register-btn rounded-pill d-flex align-items-center me-2 reg_btn" data-bs-toggle="modal"
                    data-bs-target="#register-modal">
                    Register
                </button>
                <button class="login-btn rounded-pill d-flex align-items-center me-2" data-bs-toggle="modal"
                    data-bs-target="#login-modal" id="login">
                    Login
                </button>
            </div>
        @endif
    </div>
</header>
<!--====== Header End ======-->
