@{
    Layout = "_GameLayout";
}

@section Styles {
    <link rel="stylesheet" href="~/css/sicbo-popup.css" />
}

<div class="home">
    <div class="image-2-parent">
        <img class="image" src="~/img/image-2.png" />
        <img class="image-2-icon" alt="" src="~/img/image-2.png" style="display:none;">
        
        <img class="frame-child" src="~/img/image-1.png" alt="Logo">

        <partial name="_GameMenu" />

        <div class="frame-parent">
            <div class="medal-parent">
                <img class="hourglass-icon" src="~/img/021-medal-2.svg" alt="">
                <div class="ranking-coin">Ranking coin</div>
                <b class="view-ranking-coin">View ranking coin tablet 👉</b>
            </div>
            <div class="frame-group">
                <div class="frame-container">
                    <div class="my-play-parent">
                        <div class="my-play"> My play</div>
                        <div class="frame-item">
                        </div>
                    </div>
                    <div class="sword-parent">
                        <img class="sword-icon" src="~/img/003-sword.svg" alt="">
                        <div class="my-play">1.400</div>
                    </div>
                </div>
                <div class="frame-container">
                    <div class="my-coins-parent">
                        <div class="my-play">My coins</div>
                        <div class="frame-item">
                        </div>
                    </div>
                    <div class="sword-parent">
                        <img class="sword-icon" src="~/img/021-medal.svg" alt="">
                        <div class="my-play">140.000</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="frame-parent3">
        <div id="registerBtnContainer" class="rectangle-parent" style="cursor: pointer;" onclick="handleRegisterClick()">
            <div class="rectangle-div">
            </div>
            <!-- Register/Withdraw Button -->
            <div id="registerBtnLabel" class="button-label">Register</div>
        </div>
        <div class="rectangle-parent" style="cursor: pointer;" onclick="handleBuyMore()">
            <div class="rectangle-div">
            </div>
            <!-- Buy more Button -->
            <div class="button-label2">Buy more</div>
        </div>

        <!-- PLAY BUTTON COMPLEX -->
        <div class="button-small" style="cursor: pointer;" onclick="handlePlay()">
            <div class="button-small-child"></div>
            <div class="button-small-item"></div>

            <img class="button-small-inner" src="~/img/rectangle-314.svg" alt="">
            <img class="rectangle-icon" src="~/img/rectangle-315.svg" alt="">
            <img class="button-small-child2" src="~/img/rectangle-316.svg" alt="">

            <img class="frame-icon" src="~/img/rectangle-315.svg" alt=""> <!-- subtract-2.svg inside? -->

            <img class="button-small-child3" src="~/img/rectangle-315.svg" alt="">
            <img class="button-small-child4" src="~/img/rectangle-317.svg" alt="">
            <img class="button-small-child5" src="~/img/image.svg" alt="">
            <img class="button-small-child6" src="~/img/rectangle-317.svg" alt="">

            <img class="vector-icon" src="~/img/Frame 1244831299.svg" alt="">
            <img class="vector-icon2" src="~/img/vector.svg" alt="">
            <img class="vector-icon3" src="~/img/Frame 1244831300.svg" alt="">
            <img class="vector-icon4" src="~/img/Frame 1244831300.svg" alt="">

            <div class="button-label3">Play</div>
        </div>
    </div>
    <!-- <img class="home-barpro-icon" alt=""> -->

    <!-- Select Package Popup -->
    <div id="selectPackagePopup" class="popup-overlay" style="display: none;">
        <div class="popup-container">
            <!-- Header -->
            <div class="popup-header">
                <span class="popup-title">Select Package</span>
            </div>
            
            <!-- Close Button -->
            <button class="popup-close-btn" onclick="closePackagePopup()">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
                    <path d="M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7a1 1 0 0 0-1.41 1.41L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z"/>
                </svg>
            </button>
            
            <!-- Package Options -->
            <div class="package-list">
                <label class="package-option">
                    <input type="radio" name="package" value="500" />
                    <span class="package-coins">500 <span class="coins-text">Coins</span></span>
                    <span class="package-htg">5 <span class="htg-text">HTG</span></span>
                </label>
                
                <label class="package-option">
                    <input type="radio" name="package" value="400" />
                    <span class="package-coins">400 <span class="coins-text">Coins</span></span>
                    <span class="package-htg">4 <span class="htg-text">HTG</span></span>
                </label>
                
                <label class="package-option">
                    <input type="radio" name="package" value="300" />
                    <span class="package-coins">300 <span class="coins-text">Coins</span></span>
                    <span class="package-htg">3 <span class="htg-text">HTG</span></span>
                </label>
                
                <label class="package-option">
                    <input type="radio" name="package" value="200" />
                    <span class="package-coins">200 <span class="coins-text">Coins</span></span>
                    <span class="package-htg">2 <span class="htg-text">HTG</span></span>
                </label>
                
                <label class="package-option">
                    <input type="radio" name="package" value="100" checked />
                    <span class="package-coins">100 <span class="coins-text">Coins</span></span>
                    <span class="package-htg">1 <span class="htg-text">HTG</span></span>
                </label>
            </div>
            
            <!-- Action Buttons -->
            <div class="popup-actions">
                <button class="popup-btn cancel-btn" onclick="closePackagePopup()">Cancel</button>
                <button class="popup-btn next-btn" onclick="handlePackageNext()">Next</button>
            </div>
        </div>
    </div>

    <!-- Confirm Buy More Popup -->
    <div id="confirmBuyMorePopup" class="popup-overlay" style="display: none;">
        <div class="popup-container confirm-popup">
            <!-- Header -->
            <div class="popup-header">
                <span class="popup-title">Confirm buy more</span>
            </div>
            
            <!-- Close Button -->
            <button class="popup-close-btn" onclick="closeConfirmPopup()">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
                    <path d="M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7a1 1 0 0 0-1.41 1.41L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z"/>
                </svg>
            </button>
            
            <!-- Confirm Content -->
            <div class="confirm-content">
                <p class="confirm-message">Do you want to buy</p>
                <p class="confirm-coins"><span id="confirmCoinsAmount">100</span> <span class="coins-label">Coins</span></p>
                <p class="confirm-price">Price <span id="confirmPriceAmount">1</span> <span class="htg-label">HTG</span></p>
            </div>
            
            <!-- Action Buttons -->
            <div class="popup-actions">
                <button class="popup-btn cancel-btn" onclick="closeConfirmPopup()">Cancel</button>
                <button class="popup-btn next-btn" onclick="handleConfirmBuy()">Confirm</button>
            </div>
        </div>
    </div>

    <!-- Register Popup -->
    <div id="registerPopup" class="popup-overlay" style="display: none;">
        <div class="popup-container register-popup">
            <!-- Close Button -->
            <button class="popup-close-btn" onclick="closeRegisterPopup()">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
                    <path d="M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7a1 1 0 0 0-1.41 1.41L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z"/>
                </svg>
            </button>
            
            <!-- Register Content -->
            <div class="register-content">
                <!-- Character Image (left side) -->
                <div class="register-character">
                    <img src="~/img/register-character.png" alt="Character" />
                </div>
                
                <!-- Right Side Content -->
                <div class="register-right">
                    <!-- Question Mark Icon -->
                    <div class="register-question-icon">
                        <img src="~/img/question-icon.png" alt="?" />
                    </div>
                    
                    <!-- Text Content -->
                    <div class="register-text">
                        <p class="register-message">Do you confirm<br/>to buy the<br/><span class="highlight-text">Daily Package</span>?</p>
                    </div>
                    
                    <!-- Confirm Button -->
                    <button class="popup-btn next-btn register-confirm-btn" onclick="handleRegisterConfirm()">Confirm</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Withdraw Popup -->
    <div id="withdrawPopup" class="popup-overlay" style="display: none;">
        <div class="popup-container withdraw-popup">
            <!-- Close Button -->
            <button class="popup-close-btn" onclick="closeWithdrawPopup()">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
                    <path d="M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7a1 1 0 0 0-1.41 1.41L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z"/>
                </svg>
            </button>
            
            <!-- Withdraw Content -->
            <div class="withdraw-content">
                <!-- Left Side - Account Info -->
                <div class="withdraw-left">
                    <div class="withdraw-phone">
                        <span class="withdraw-label">Phone number</span>
                        <span class="withdraw-phone-number">0912 345 678</span>
                    </div>
                    
                    <div class="withdraw-tunnel">
                        <div class="tunnel-icon">T</div>
                        <span class="tunnel-label">Tunnel</span>
                    </div>
                    
                    <div class="withdraw-balance-badge">Main balance</div>
                    
                    <div class="withdraw-info">
                        <span class="withdraw-info-label">Total withdraw today</span>
                        <span class="withdraw-info-value">100 HTG</span>
                    </div>
                    
                    <div class="withdraw-info">
                        <span class="withdraw-info-label">Coin Amount</span>
                        <span class="withdraw-coin-amount">140.000</span>
                    </div>
                </div>
                
                <!-- Right Side - Withdraw Options -->
                <div class="withdraw-right">
                    <span class="withdraw-options-title">Withdraw value</span>
                    
                    <div class="withdraw-options">
                        <label class="withdraw-option">
                            <input type="radio" name="withdrawValue" value="1050" />
                            <span class="withdraw-option-coins">1050 <span class="coins-text">Coins</span></span>
                            <span class="withdraw-option-htg">10 <span class="htg-text">HTG</span></span>
                        </label>
                        
                        <label class="withdraw-option">
                            <input type="radio" name="withdrawValue" value="525" />
                            <span class="withdraw-option-coins">525 <span class="coins-text">Coins</span></span>
                            <span class="withdraw-option-htg">5 <span class="htg-text">HTG</span></span>
                        </label>
                        
                        <label class="withdraw-option">
                            <input type="radio" name="withdrawValue" value="210" />
                            <span class="withdraw-option-coins">210 <span class="coins-text">Coins</span></span>
                            <span class="withdraw-option-htg">2 <span class="htg-text">HTG</span></span>
                        </label>
                        
                        <label class="withdraw-option">
                            <input type="radio" name="withdrawValue" value="105" checked />
                            <span class="withdraw-option-coins">105 <span class="coins-text">Coins</span></span>
                            <span class="withdraw-option-htg">1 <span class="htg-text">HTG</span></span>
                        </label>
                    </div>
                </div>
            </div>
            
            <!-- Withdraw Button -->
            <button class="withdraw-btn" onclick="handleWithdrawConfirm()">Withdraw</button>
        </div>
    </div>

</div>

<script>
    // Track registration state
    let isRegistered = false;
    
    function handleRegisterClick() {
        if (isRegistered) {
            // Already registered, show withdraw popup
            handleWithdraw();
        } else {
            // Not registered, show register popup
            handleRegister();
        }
    }
    
    function handleRegister() {
        // Show the register popup
        document.getElementById('registerPopup').style.display = 'flex';
    }
    
    function closeRegisterPopup() {
        document.getElementById('registerPopup').style.display = 'none';
    }
    
    function handleRegisterConfirm() {
        // TODO: Implement actual register/buy daily package logic
        alert('Daily Package purchased!');
        
        // Mark as registered and change button to Withdraw
        isRegistered = true;
        document.getElementById('registerBtnLabel').textContent = 'Withdraw';
        
        closeRegisterPopup();
    }
    
    function handleWithdraw() {
        // Show the withdraw popup
        document.getElementById('withdrawPopup').style.display = 'flex';
    }
    
    function closeWithdrawPopup() {
        document.getElementById('withdrawPopup').style.display = 'none';
    }
    
    function handleWithdrawConfirm() {
        const selectedOption = document.querySelector('input[name="withdrawValue"]:checked');
        if (selectedOption) {
            const coins = selectedOption.value;
            const htg = parseInt(coins) / 105; // approximate conversion
            alert('Withdraw requested: ' + coins + ' Coins');
            // TODO: Implement actual withdraw logic here
            closeWithdrawPopup();
        } else {
            alert('Please select a withdraw amount');
        }
    }

    function handleBuyMore() {
        // Show the select package popup
        document.getElementById('selectPackagePopup').style.display = 'flex';
    }
    
    function closePackagePopup() {
        document.getElementById('selectPackagePopup').style.display = 'none';
    }
    
    function handlePackageNext() {
        const selectedPackage = document.querySelector('input[name="package"]:checked');
        if (selectedPackage) {
            const coins = selectedPackage.value;
            // Calculate HTG based on coins (100 coins = 1 HTG)
            const htg = parseInt(coins) / 100;
            
            // Update confirm popup with selected values
            document.getElementById('confirmCoinsAmount').textContent = coins;
            document.getElementById('confirmPriceAmount').textContent = htg;
            
            // Hide select popup and show confirm popup
            closePackagePopup();
            document.getElementById('confirmBuyMorePopup').style.display = 'flex';
        } else {
            alert('Please select a package');
        }
    }
    
    function closeConfirmPopup() {
        document.getElementById('confirmBuyMorePopup').style.display = 'none';
    }
    
    function handleConfirmBuy() {
        const coins = document.getElementById('confirmCoinsAmount').textContent;
        const htg = document.getElementById('confirmPriceAmount').textContent;
        
        // TODO: Implement actual buy logic here
        alert('Purchase confirmed: ' + coins + ' Coins for ' + htg + ' HTG');
        closeConfirmPopup();
    }
    
    // Close popup when clicking overlay
    document.getElementById('selectPackagePopup')?.addEventListener('click', function(e) {
        if (e.target === this) {
            closePackagePopup();
        }
    });
    
    document.getElementById('confirmBuyMorePopup')?.addEventListener('click', function(e) {
        if (e.target === this) {
            closeConfirmPopup();
        }
    });
    
    document.getElementById('registerPopup')?.addEventListener('click', function(e) {
        if (e.target === this) {
            closeRegisterPopup();
        }
    });
    
    document.getElementById('withdrawPopup')?.addEventListener('click', function(e) {
        if (e.target === this) {
            closeWithdrawPopup();
        }
    });

    function handlePlay() {
        // TODO: Implement play logic
        alert('Play clicked!');
        // window.location.href = '/Home/Play';
    }
</script>
