<!DOCTYPE html>
<html lang="en">

<head>
    <!-- PAGE TITLE HERE -->
    <title>My Wash - Smart Laundry</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="DexignLab">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://worldnic.dexignlab.com/xhtml">
    <meta name="keywords"
        content="WorldNIC admin dashboard, Bootstrap admin template, HTML admin panel, admin dashboard design, Bootstrap admin HTML, management dashboard, data visualization template, WorldNIC Bootstrap, admin panel features, web admin template, Bootstrap admin dashboard">
    <meta name="description" content="WorldNIC is a versatile admin dashboard Bootstrap HTML template. It offers a clean design and robust features for effective management and
				data visualization.">
    <!-- OG:META TAGS -->
    <meta property="og:title" content="WorldNIC - Admin Dashboard Bootstrap HTML Template">
    <meta property="og:description"
        content="WorldNIC is a versatile admin dashboard Bootstrap HTML template. It offers a clean design and robust features for effective management and data visualization.">
    <meta property="og:image" content="https://worldnic.dexignlab.com/xhtml/social-image.png">
    <meta name="format-detection" content="telephone=no">
    <!-- TWITTER:META TAGS -->
    <meta name="twitter:title" content="WorldNIC - Admin Dashboard Bootstrap HTML Template">
    <meta name="twitter:description"
        content="WorldNIC is a versatile admin dashboard Bootstrap HTML template. It offers a clean design and robust features for effective management and data visualization">
    <meta name="twitter:image" content="https://worldnic.dexignlab.com/xhtml/social-image.png">
    <meta name="twitter:card" content="summary_large_image">

    <!-- MOBILE SPECIFIC -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- FAVICONS ICON -->
    <link rel="shortcut icon" type="image/png" href="images/favicon.png">
    <link href="vendor/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet">
    <link class="main-css" href="css/style.css" rel="stylesheet">

    <style>
        .keypad {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 10px;
        }

        .key {
            font-size: 1rem;
            padding: 8px;
            cursor: pointer;
            background-color: #0074FF;
            color: #fff;
            border: none;
            border-radius: 4px;
            transition: background-color 0.2s ease;
        }

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

        .clear {
            grid-column: span 3;
            background-color: #c82333;
        }

        .clear:hover {
            background-color: #c82333;
        }

        /* Penempatan tombol 0 di tengah */
        .zero-key {
            grid-column: 2;
            /* Menempatkan tombol 0 di tengah kolom kedua */
            grid-row: 4;
            /* Menempatkan tombol 0 di baris terakhir */
        }
    </style>
</head>

<body>
    <div class="authincation d-flex flex-column flex-lg-row flex-column-fluid">
        <div class="login-aside text-center d-none d-sm-flex flex-column flex-row-auto justify-content-center align-items-center">
            <div class="aside-image" style="background-image:url(images/mywash.png); width: 80%; height: 50vh; background-size: contain; background-repeat: no-repeat;"></div>
        </div>
        <div class="container flex-row-fluid d-flex flex-column justify-content-center position-relative overflow-hidden p-7 mx-auto">
            <div class="d-flex justify-content-center h-100 align-items-center">
                <div class="authincation-content style-2">
                    <div class="row no-gutters">
                        <div class="col-xl-12">
                            <div class="auth-form">
                                <div class="text-center d-block d-sm-none mb-4 pt-5">
                                    <a href="login.php"><img src="images/mywash.png" width="80" class="dark-login" alt=""></a>
                                    <a href="login.php"><img src="images/mywash.png" width="" class="light-login" alt=""></a>
                                </div>
                                <h2 class="text-center mb-4" style="margin-top: 4vh;">Sign up your account</h4>
                                    <form action="signup_process.php" method="post">
                                        <div class="mb-3">
                                            <input type="text" id="phone-display" name="phone" class="form-control" placeholder="Phone number" readonly
                                                onclick="showKeyboard('phone-display')">
                                        </div>
                                        <div class="mb-3">
                                            <input type="password" id="pin-display" name="pin" class="form-control" placeholder="Enter PIN" readonly
                                                onclick="showKeyboard('pin-display')">
                                        </div>
                                        <div class="mb-3">
                                            <input type="text" id="name" name="name" class="form-control" placeholder="Full Name" readonly
                                                onclick="showKeyboard('name')">
                                        </div>
                                        <div id="keyboard-container" style="display: none;">
                                            <div class="keypad" id="numeric-keypad">
                                                <!-- Numeric keys -->
                                                <button class="key" type="button" onclick="appendCharacter('1')">1</button>
                                                <button class="key" type="button" onclick="appendCharacter('2')">2</button>
                                                <button class="key" type="button" onclick="appendCharacter('3')">3</button>
                                                <button class="key" type="button" onclick="appendCharacter('4')">4</button>
                                                <button class="key" type="button" onclick="appendCharacter('5')">5</button>
                                                <button class="key" type="button" onclick="appendCharacter('6')">6</button>
                                                <button class="key" type="button" onclick="appendCharacter('7')">7</button>
                                                <button class="key" type="button" onclick="appendCharacter('8')">8</button>
                                                <button class="key" type="button" onclick="appendCharacter('9')">9</button>
                                                <button class="key zero-key" type="button" onclick="appendCharacter('0')">0</button>
                                                <button class="key clear" type="button" onclick="clearDisplay()">Clear</button>
                                            </div>
                                            <div class="keypad" id="alphabet-keypad" style="display: none;">
                                                <!-- Alphabet keys from A to Z -->
                                                <button class="key" type="button" onclick="appendCharacter('A')">A</button>
                                                <button class="key" type="button" onclick="appendCharacter('B')">B</button>
                                                <button class="key" type="button" onclick="appendCharacter('C')">C</button>
                                                <button class="key" type="button" onclick="appendCharacter('D')">D</button>
                                                <button class="key" type="button" onclick="appendCharacter('E')">E</button>
                                                <button class="key" type="button" onclick="appendCharacter('F')">F</button>
                                                <button class="key" type="button" onclick="appendCharacter('G')">G</button>
                                                <button class="key" type="button" onclick="appendCharacter('H')">H</button>
                                                <button class="key" type="button" onclick="appendCharacter('I')">I</button>
                                                <button class="key" type="button" onclick="appendCharacter('J')">J</button>
                                                <button class="key" type="button" onclick="appendCharacter('K')">K</button>
                                                <button class="key" type="button" onclick="appendCharacter('L')">L</button>
                                                <button class="key" type="button" onclick="appendCharacter('M')">M</button>
                                                <button class="key" type="button" onclick="appendCharacter('N')">N</button>
                                                <button class="key" type="button" onclick="appendCharacter('O')">O</button>
                                                <button class="key" type="button" onclick="appendCharacter('P')">P</button>
                                                <button class="key" type="button" onclick="appendCharacter('Q')">Q</button>
                                                <button class="key" type="button" onclick="appendCharacter('R')">R</button>
                                                <button class="key" type="button" onclick="appendCharacter('S')">S</button>
                                                <button class="key" type="button" onclick="appendCharacter('T')">T</button>
                                                <button class="key" type="button" onclick="appendCharacter('U')">U</button>
                                                <button class="key" type="button" onclick="appendCharacter('V')">V</button>
                                                <button class="key" type="button" onclick="appendCharacter('W')">W</button>
                                                <button class="key" type="button" onclick="appendCharacter('X')">X</button>
                                                <button class="key" type="button" onclick="appendCharacter('Y')">Y</button>
                                                <button class="key" type="button" onclick="appendCharacter('Z')">Z</button>
                                                <button class="key clear" type="button" onclick="clearDisplay()">Clear</button>
                                            </div>
                                        </div>
                                        <div class="text-center mt-4">
                                            <button type="submit" class="btn btn-primary btn-block">Sign Up</button>
                                        </div>
                                    </form>
                                    <div class="new-account mt-3">
                                        <p>Have an account? <a class="text-primary" href="./login.php">Login</a></p>
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!--**********************************
        Scripts
    ***********************************-->
    <!-- Required vendors -->
    <script src="vendor/global/global.min.js"></script>
    <script src="vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script src="js/custom.min.js"></script>
    <script src="js/ic-sidenav-init.js"></script>

    <script>
        let activeInput = null;

        // Show the virtual keyboard
        function showKeyboard(inputId) {
            activeInput = document.getElementById(inputId);
            document.getElementById('keyboard-container').style.display = 'block';

            // Show numeric keypad for phone and pin
            if (inputId === 'phone-display' || inputId === 'pin-display') {
                document.getElementById('numeric-keypad').style.display = 'grid';
                document.getElementById('alphabet-keypad').style.display = 'none';
            }
            // Show alphabet keypad for name
            else if (inputId === 'name') {
                document.getElementById('numeric-keypad').style.display = 'none';
                document.getElementById('alphabet-keypad').style.display = 'grid';
            }
        }

        // Clear the active input field
        function clearDisplay() {
            if (activeInput) {
                activeInput.value = '';
            }
        }

        // Append a character (number or letter) to the active input field
        function appendCharacter(character) {
            if (activeInput) {
                activeInput.value += character;
            }
        }
    </script>
</body>

</html>