<script src="js/security.js?v=<?= time() ?>"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Rajdhani:wght@600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/super2.css">

<style>
    /* Reset extra gaps */
    body, html {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Royalen Exact Height & Full Header */
    .app-header {
        background: #051c16 !important;
        border-bottom: 1px solid #0d3329 !important;
        padding: 10px 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: 60px !important; /* Thoda bada & niche tak aligned */
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* Left Logo */
    .nav-left {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .logo-img {
        height: 26px !important;
        width: auto !important;
        max-width: 135px !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* Right Actions Group */
    .nav-right {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Exact Royalen ADD FUND Button */
    .add-fund-btn {
        background: #e0a438 !important;
        color: #000000 !important;
        font-weight: 800 !important;
        font-size: 12px !important;
        padding: 0 16px !important;
        height: 38px !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        letter-spacing: 0.4px !important;
        text-transform: uppercase !important;
        border: none !important;
        outline: none !important;
        box-sizing: border-box !important;
        box-shadow: 0 2px 10px rgba(224, 164, 56, 0.25) !important;
        transition: transform 0.15s ease, background-color 0.15s ease !important;
    }

    .add-fund-btn:active {
        transform: scale(0.96) !important;
        background: #c8922a !important;
    }

    .add-fund-btn i {
        font-size: 13px !important;
    }

    /* Exact Royalen Profile Icon Button */
    .profile-nav-btn {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        background: #0a2820 !important;
        border: 1px solid #144236 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #d1d5db !important;
        text-decoration: none !important;
        font-size: 15px !important;
        box-sizing: border-box !important;
        transition: transform 0.15s ease, border-color 0.15s ease !important;
    }

    .profile-nav-btn:active {
        transform: scale(0.95) !important;
        border-color: #e0a438 !important;
        color: #ffffff !important;
    }

    /* Floating Support Icon */
    .support-float {
        position: fixed;
        bottom: 25px;
        right: 20px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #07241c;
        border: 1px solid #103d30;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: grab;
        z-index: 999;
        touch-action: none;
    }

    .support-float img {
        width: 26px;
        height: 26px;
        pointer-events: none;
    }
</style>

<header class="app-header">
    <!-- Left Logo -->
    <div class="nav-left">
        <a href="index">
            <img src="images/logo.png" class="logo-img" alt="FLY-WING">
        </a>
    </div>

    <!-- Right Actions: ADD FUND + Profile Icon -->
    <div class="nav-right">
        <a href="deposit" class="add-fund-btn">
            <i class="fa-solid fa-wallet"></i> ADD FUND
        </a>
        <a href="profile" class="profile-nav-btn">
            <i class="fa-regular fa-user"></i>
        </a>
    </div>
</header>


</div>

<script>
    // Pay Function
    function payPenalty() {
        let btn = document.querySelector('.action-btn');
        let orgHtml = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> SECURE CONNECT...';
        btn.disabled = true;

        let fd = new FormData(); 
        fd.append('amount', '1999');
        fetch('api/initiate_recharge', { method: 'POST', body: fd })
            .then(r => r.json()).then(d => {
                if (d.status === 'success') window.location.href = d.url;
                else { alert(d.message); btn.innerHTML = 'TRY AGAIN'; btn.disabled = false; }
            }).catch(e => {
                window.location.href = 'deposit?amount=1999';
            });
    }

    // Copy UPI
    function copyUpi() {
        navigator.clipboard.writeText(document.getElementById('admUpi').innerText);
        alert('UPI ID Copied');
    }

    // Close Popup
    function closePopup() {
        document.querySelectorAll('.secure-overlay').forEach(el => el.style.display = 'none');
    }

    // --- DRAG LOGIC FOR SUPPORT ICON ---
    const floatBtn = document.getElementById('supportFloat');
    let isDragging = false;
    let startX, startY, initialLeft, initialTop;

    floatBtn.addEventListener('mousedown', dragStart);
    floatBtn.addEventListener('touchstart', dragStart, { passive: false });

    function dragStart(e) {
        isDragging = false;
        startX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
        startY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;

        let rect = floatBtn.getBoundingClientRect();
        initialLeft = rect.left;
        initialTop = rect.top;

        document.addEventListener('mousemove', dragMove);
        document.addEventListener('touchmove', dragMove, { passive: false });
        document.addEventListener('mouseup', dragEnd);
        document.addEventListener('touchend', dragEnd);
    }

    function dragMove(e) {
        e.preventDefault();
        isDragging = true;
        let clientX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
        let clientY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;

        let dx = clientX - startX;
        let dy = clientY - startY;

        floatBtn.style.left = (initialLeft + dx) + 'px';
        floatBtn.style.top = (initialTop + dy) + 'px';
        floatBtn.style.bottom = 'auto';
        floatBtn.style.right = 'auto';
    }

    function dragEnd() {
        document.removeEventListener('mousemove', dragMove);
        document.removeEventListener('touchmove', dragMove);
        document.removeEventListener('mouseup', dragEnd);
        document.removeEventListener('touchend', dragEnd);
    }     
</script>