<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set Winning Number</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
        }
        .form-container {
            display: inline-block;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
            background-color: #f9f9f9;
        }
        input, button {
            font-size: 16px;
            padding: 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
<h1>Set Winning Number</h1>
<div class="form-container">
    <form id="winning-number-form">
        <label for="uiNum">Winning Number:</label>
        <br>
        <input type="number" id="uiNum" name="uiNum" min="1" max="11800" required>
        <br>
        <button type="submit">Set Winning Number</button>
    </form>
    <p id="status-message" style="color: green;"></p>
</div>

<script src="asset/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        $('#winning-number-form').on('submit', function (event) {
            event.preventDefault();
            const uiNum = $('#uiNum').val();
            $.post('api/updateConfig.php', { uiNum: uiNum }, function (response) {
                response = JSON.parse(response);
                $('#status-message').text(response.message);
            }).fail(function () {
                $('#status-message').css('color', 'red').text('Error updating winning number!');
            });
        });

        $('#uiNum').on('focus', function () {
            $('#status-message').text('');
        });
    });
</script>
</body>
</html>
