<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Redemption</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="codeMenu" style="display: none;">
        <div class="menu-content">
            <h1>Redeem Code</h1>
            <input type="text" id="codeInput" placeholder="Enter code here">
            <button id="redeemButton">Redeem</button>
            <button id="closeButton">Close</button>
        </div>
    </div>

    <div id="createMenu" style="display: none;">
        <div class="menu-content">
            <label class="switch">
                <div class="text_save" id="text_save">Save Mode</div>
                <input type="checkbox" id="saveSwitch">
                <span class="slider round"></span>
            </label>
            <h1>Create Code</h1>
            <label for="codeName">Code Name:</label>
            <div style="display: flex; align-items: center;">
                <input type="text" id="codeNameInput" placeholder="Enter code name" style="flex: 1; margin-right: 10px;">
                <button id="randomCodeButton" style="margin-right: 5px;">Random</button>
                <button id="copyCodeButton">Copy</button>
            </div>
            
            <label for="limitCount">Limit Count:</label>
            <input type="number" id="limitCount" placeholder="Enter limit count">
    
            <h2>Items</h2>
            <div id="itemsContainer"></div>
            <button id="addItem">Add Item</button>
    
            <button id="createCodeButton">Create Code</button>
            <button id="closeCreateButton">Close</button>
        </div>
    </div>

    <div id="addItemPopup" style="display: none;">
        <div class="popup-content">
            <h2>Add Item</h2>
            <label for="popupItemName">Item Name:</label>
            <div style="display: flex; align-items: center;">
                <input type="text" id="popupItemName" placeholder="Enter item name">
                <button id="openItemListButton">Select Item</button>
            </div>

            <label for="popupItemType">Type:</label>
            <select id="popupItemType">
                <option value="item">Item</option>
                <option value="money">Money</option>
                <option value="black_money">Black Money</option>
            </select>

            <label for="popupItemCount">Count:</label>
            <input type="text" id="popupItemCount" placeholder="ตัวอย่าง 1,5 = สุ่ม 1 - 5 | อยากให้อันเดียวใส่ 1,1">

            <label for="popupItemRate">Rate (%):</label>
            <input type="number" id="popupItemRate" placeholder="Enter rate (1-100)">

            <button id="confirmAddItem">Confirm</button>
            <button id="cancelAddItem">Cancel</button>
        </div>

        <div id="itemListPopup" style="display: none;">
            <div class="popup-item-content">
                <h2>Select Item</h2>
                <input type="text" id="itemSearch" placeholder="Search item...">
                <div id="itemListContainer" style="max-height: 300px; overflow-y: auto;"></div>
                <button id="closeItemListButton">Close</button>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
