<!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>OpenKDS &raquo; Setup</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <style>
    
        body {
            background-color: #f8f9fa;
        }
        
        .container {
            margin-top: 50px;
        }

        .row {
            margin: 0 auto;
            width: 50%;
        }

        .col-12 {
            text-align: center;
        }

        h1 {
            font-size: 3em;
        }

        p {
            font-size: 1.5em;
        }

        a {
            color: #007bff;
        }

        a:hover {
            color: #0056b3;
        }

        .mb-3 {
            margin-bottom: 1em;
        }

        .form-control {
            width: 100%;
        }

        .form-text {
            font-size: 1em;
        }

        .btn {
            background-color: #007bff;
            border-color: #007bff;
            color: #fff;
        }

        .btn:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }







    </style>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>OpenKDS Setup</h1>
                <p>OpenKDS is a free and open source kitchen display system. It is designed to be used in restaurants and other food service establishments.</p>
                <p>OpenKDS is currently in beta. If you find any bugs or have any suggestions, please report them on the <a href="https://github.com/benclementt/openkds">GitHub repository</a>.</p>
            
                <h3>Initial Signup</h3>

                <div>
                    <div class="mb-3">
                        <label for="username" class="form-label">Username</label>
                        <input type="text" class="form-control" id="username" name="username" aria-describedby="usernameHelp">
                        <div id="usernameHelp" class="form-text">Your username. This will be used to log in.</div>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">Password</label>
                        <input type="password" class="form-control" id="password" name="password" aria-describedby="passwordHelp">
                        <div id="passwordHelp" class="form-text">Your password. This will be used to log in.</div>
                    </div>
                    <button type="submit" id="setup" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
</body>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script>
    $(document).ready(function() {
        $('#setup').click(function(e) {
            e.preventDefault();

            var name = $('#name').val();
            var username = $('#username').val();
            var password = $('#password').val();

            $.ajax({
                url: '/web/setup',
                type: 'POST',
                data: {
                    username: username,
                    password: password
                },
                success: function(data) {
                    if(data.status == 200){
                        window.location.href = '/web/login';
                    } else {
                        console.log(data);
                        alert(`Error ${data.status}: ${data.message} - ${data.error}`);
                    }
                },
                error: function(data) {
                    console.log(data);
                    alert(`Server Error`);
                }
            });
            
        });
    });



</script>

</html>