<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Interactive Bingo Caller</title>
    <style>
        :root {
            --primary-color: #2E8B57; /* Default primary color */
            --secondary-color: #FFD700; /* Default secondary color */
        }

        body {
            font-family: Arial, sans-serif;
            background-color: var(--primary-color);
            color: #fff;
            text-align: center;
            padding: 20px;
            margin: 0;
        }

        h1 {
            font-size: 3.5em; /* Further increased font size */
            margin-bottom: 20px;
            color: var(--secondary-color);
        }

        #current-number {
            font-size: 3.5em; /* Increased font size */
            margin: 20px 0;
            padding: 20px;
            background-color: #fff;
            color: var(--primary-color);
            border-radius: 10px;
            display: inline-block;
            min-width: 200px;
        }

        #controls {
            margin: 20px 0;
        }

        .button {
            padding: 12px 24px; /* Slightly larger padding */
            font-size: 1.2em; /* Increased font size */
            border: none;
            border-radius: 5px;
            background-color: var(--secondary-color);
            color: var(--primary-color);
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
            margin: 5px;
        }

        .button:hover {
            background-color: #FFA500;
            transform: scale(1.05);
        }

        #remaining {
            margin-top: 15px;
            font-size: 1.3em; /* Slightly larger font size */
        }

        /* Customization Section */
        #customization {
            margin: 30px auto;
            max-width: 600px;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            position: relative;
            transition: all 0.3s ease;
        }

        #customization h2 {
            margin-bottom: 15px;
            color: var(--secondary-color);
        }

        .custom-input {
            margin: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .custom-input label {
            flex: 1;
            text-align: right;
            margin-right: 10px;
            font-size: 1.1em;
        }

        .custom-input input[type="text"],
        .custom-input input[type="color"] {
            flex: 2;
            padding: 8px;
            border: none;
            border-radius: 5px;
            font-size: 1em;
        }

        /* Hide Button inside Customization Panel */
        #hide-customization {
            position: absolute;
            top: 10px;
            right: 10px;
            background: transparent;
            border: none;
            font-size: 1.5em; /* Increased size for better visibility */
            color: var(--secondary-color);
            cursor: pointer;
        }

        /* Called Numbers Section */
        #called-numbers-container {
            margin: 20px auto;
            max-width: 1000px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .letter-row {
            width: 100%;
            margin: 10px 0; /* Increased margin for better spacing */
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }

        .letter-row h3 {
            width: 60px; /* Increased width */
            margin: 0;
            text-align: center;
            font-size: 2.5em; /* Further increased font size */
            color: var(--secondary-color);
            flex-shrink: 0;
        }

        .numbers {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start; /* Align numbers to the start */
            flex: 1;
            gap: 5px; /* Space between numbers */
        }

        .number {
            background-color: #fff;
            color: var(--primary-color);
            border-radius: 50%;
            width: 50px; /* Increased size */
            height: 50px; /* Increased size */
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.3em; /* Increased font size */
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
        }

        /* Customize Button to Show Customization Panel */
        #show-customization {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 10px 20px;
            font-size: 1em;
            border: none;
            border-radius: 5px;
            background-color: var(--secondary-color);
            color: var(--primary-color);
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
            display: none; /* Hidden by default */
            z-index: 1000; /* Ensure it stays on top */
        }

        #show-customization:hover {
            background-color: #FFA500;
            transform: scale(1.05);
        }

        /* Responsive Design */
        @media (max-width: 800px) {
            h1 {
                font-size: 3em;
            }

            #current-number {
                font-size: 3em;
                min-width: 150px;
            }

            .button {
                padding: 10px 20px;
                font-size: 1em;
            }

            .number {
                width: 45px;
                height: 45px;
                font-size: 1em;
            }

            .letter-row h3 {
                font-size: 2em;
            }
        }

        @media (max-width: 600px) {
            #customization {
                max-width: 100%;
            }

            .letter-row {
                flex-direction: column;
                align-items: flex-start;
            }

            .letter-row h3 {
                width: auto;
                margin-bottom: 5px;
                font-size: 1.8em;
            }

            .numbers {
                justify-content: flex-start;
            }

            .number {
                width: 40px;
                height: 40px;
                font-size: 1em;
            }
        }
    </style>
</head>
<body>

    <!-- Customize Button (Visible when Customization Panel is Hidden) -->
    <button class="button" id="show-customization"></button>

    <!-- Customization Section -->
    <div id="customization">
        <button id="hide-customization" aria-label="Hide Customization Panel">&times;</button> <!-- Close Button -->
        <h2>Customize Your Bingo Caller</h2>
        <div class="custom-input">
            <label for="title-input">Title Text:</label>
            <input type="text" id="title-input" placeholder="Enter custom title" value="Interactive Bingo Caller">
        </div>
        <div class="custom-input">
            <label for="primary-color">Primary Color:</label>
            <input type="color" id="primary-color" value="#2E8B57">
        </div>
        <div class="custom-input">
            <label for="secondary-color">Secondary Color:</label>
            <input type="color" id="secondary-color" value="#FFD700">
        </div>
        <button class="button" id="apply-customization">Apply Customization</button>
    </div>

    <!-- Title -->
    <h1 id="title">Interactive Bingo Caller</h1>

    <!-- Current Number Display -->
    <div id="current-number">--</div>

    <!-- Control Buttons -->
    <div id="controls">
        <button class="button" id="call-number">Call Next Number</button>
        <button class="button" id="reset-game">Reset Game</button>
    </div>

    <!-- Remaining Numbers -->
    <div id="remaining">Remaining Numbers: 75</div>

    <!-- Called Numbers Organized by Rows -->
    <h2>Called Numbers:</h2>
    <div id="called-numbers-container">
        <!-- B Row -->
        <div class="letter-row" id="B-row">
            <h3>B</h3>
            <div class="numbers" id="B-numbers"></div>
        </div>
        <!-- I Row -->
        <div class="letter-row" id="I-row">
            <h3>I</h3>
            <div class="numbers" id="I-numbers"></div>
        </div>
        <!-- N Row -->
        <div class="letter-row" id="N-row">
            <h3>N</h3>
            <div class="numbers" id="N-numbers"></div>
        </div>
        <!-- G Row -->
        <div class="letter-row" id="G-row">
            <h3>G</h3>
            <div class="numbers" id="G-numbers"></div>
        </div>
        <!-- O Row -->
        <div class="letter-row" id="O-row">
            <h3>O</h3>
            <div class="numbers" id="O-numbers"></div>
        </div>
    </div>

    <script>
        (function() {
            const totalNumbers = 75;
            let numbers = Array.from({length: totalNumbers}, (_, i) => i + 1);
            // Maintain separate arrays for each letter to facilitate sorting
            let calledNumbers = {
                B: [],
                I: [],
                N: [],
                G: [],
                O: []
            };

            // DOM Elements
            const titleElem = document.getElementById('title');
            const currentNumberElem = document.getElementById('current-number');
            const calledNumbersContainers = {
                B: document.getElementById('B-numbers'),
                I: document.getElementById('I-numbers'),
                N: document.getElementById('N-numbers'),
                G: document.getElementById('G-numbers'),
                O: document.getElementById('O-numbers'),
            };
            const callButton = document.getElementById('call-number');
            const resetButton = document.getElementById('reset-game');
            const remainingElem = document.getElementById('remaining');

            // Customization Elements
            const customizationPanel = document.getElementById('customization');
            const hideCustomizationButton = document.getElementById('hide-customization');
            const showCustomizationButton = document.getElementById('show-customization');
            const titleInput = document.getElementById('title-input');
            const primaryColorInput = document.getElementById('primary-color');
            const secondaryColorInput = document.getElementById('secondary-color');
            const applyCustomizationButton = document.getElementById('apply-customization');

            // Function to get the corresponding letter for a number
            function getLetter(number) {
                if (number >= 1 && number <= 15) return 'B';
                if (number >= 16 && number <= 30) return 'I';
                if (number >= 31 && number <= 45) return 'N';
                if (number >= 46 && number <= 60) return 'G';
                if (number >= 61 && number <= 75) return 'O';
                return '';
            }

            function updateRemaining() {
                remainingElem.textContent = `Remaining Numbers: ${numbers.length}`;
            }

            function callNextNumber() {
                if (numbers.length === 0) {
                    alert("All numbers have been called!");
                    return;
                }
                const randomIndex = Math.floor(Math.random() * numbers.length);
                const number = numbers.splice(randomIndex, 1)[0];
                const letter = getLetter(number);
                calledNumbers[letter].push(number);
                // Sort the numbers for this letter
                calledNumbers[letter].sort((a, b) => a - b);
                currentNumberElem.textContent = `${letter}${number}`;
                displayCalledNumber(letter, number);
                updateRemaining();
            }

            function displayCalledNumber(letter, number) {
                const container = calledNumbersContainers[letter];
                const numberDiv = document.createElement('div');
                numberDiv.classList.add('number');
                numberDiv.textContent = `${letter}${number}`;

                // Find the correct position to insert the numberDiv to keep numbers sorted
                const existingNumbers = Array.from(container.getElementsByClassName('number'))
                                            .map(div => parseInt(div.textContent.substring(1)));
                let inserted = false;

                for (let i = 0; i < existingNumbers.length; i++) {
                    if (number < existingNumbers[i]) {
                        container.insertBefore(numberDiv, container.children[i]);
                        inserted = true;
                        break;
                    }
                }

                if (!inserted) {
                    container.appendChild(numberDiv);
                }
            }

            function resetGame() {
                if (confirm("Are you sure you want to reset the game?")) {
                    numbers = Array.from({length: totalNumbers}, (_, i) => i + 1);
                    // Reset calledNumbers object
                    calledNumbers = {
                        B: [],
                        I: [],
                        N: [],
                        G: [],
                        O: []
                    };
                    currentNumberElem.textContent = '--';
                    // Clear all called numbers from each row
                    Object.values(calledNumbersContainers).forEach(container => {
                        container.innerHTML = '';
                    });
                    updateRemaining();
                }
            }

            function applyCustomization() {
                const newTitle = titleInput.value.trim() || 'Interactive Bingo Caller';
                // Title is applied on button click
                titleElem.textContent = newTitle;
                // Since colors are now applied in real-time, no need to handle them here

                // Hide Customization Panel
                customizationPanel.style.display = 'none';
                showCustomizationButton.style.display = 'block';
            }

            function hideCustomization() {
                customizationPanel.style.display = 'none';
                showCustomizationButton.style.display = 'block';
            }

            function showCustomization() {
                customizationPanel.style.display = 'block';
                showCustomizationButton.style.display = 'none';
            }

            // Event Listeners for real-time color changes
            primaryColorInput.addEventListener('input', function() {
                document.documentElement.style.setProperty('--primary-color', this.value);
            });

            secondaryColorInput.addEventListener('input', function() {
                document.documentElement.style.setProperty('--secondary-color', this.value);
            });

            // Event Listener for applying title customization
            applyCustomizationButton.addEventListener('click', applyCustomization);
            hideCustomizationButton.addEventListener('click', hideCustomization);
            showCustomizationButton.addEventListener('click', showCustomization);

            // Event Listeners for call and reset buttons
            callButton.addEventListener('click', callNextNumber);
            resetButton.addEventListener('click', resetGame);

            // Initialize
            updateRemaining();
        })();
    </script>

</body>
</html>