<?php
session_start();
require 'db.php'; // Include the database connection

if (!isset($_SESSION['otp'])) {
    header("Location: signup.php");
    exit();
}

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $inputOtp = $_POST['otp'];

    // Verify the OTP
    if ($inputOtp == $_SESSION['otp']) {
        // OTP is correct, proceed to insert user data into the database
        $user_data = $_SESSION['user_data'];
        $phone = $user_data['phone'];
        $pin = password_hash($user_data['pin'], PASSWORD_DEFAULT); // Hash the PIN for security
        $name = $user_data['name'];

        // Prepare and bind
        $stmt = $conn->prepare("INSERT INTO users (phone, pin, name) VALUES (?, ?, ?)");
        $stmt->bind_param("sss", $phone, $pin, $name);

        // Execute the statement
        if ($stmt->execute()) {
            // Clear the session data
            unset($_SESSION['otp']);
            unset($_SESSION['user_data']);

            // Set a success message in the session
            $_SESSION['signup_success'] = "Signup successful!";

            // Redirect to the login page
            header("Location: login.php");
            exit(); // Ensure to exit after redirection
        } else {
            echo "Error: " . $stmt->error;
        }

        $stmt->close();
        $conn->close();
    } else {
        $error = "Invalid OTP. Please try again.";
    }
}
?>
<!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;
        }

        .key {
            font-size: 1rem;
            padding: 6px;
            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: #dc3545;
        }

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

        .zero {
            grid-column: 2;
        }
    </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;">enter the OTP code sent to your WhatsApp.</h4>
                                    <form action="" method="post" onsubmit="return handleSubmit()">
                                        <!-- Keypad Input untuk Nomor Telepon -->
                                        <div class="mb-3">
                                            <input type="text" name="otp" id="otp-display" class="form-control" placeholder="Enter OTP" required>
                                            <div class="keypad mt-3">
                                                <button class="key" type="button" onclick="appendNumber(1)">1</button>
                                                <button class="key" type="button" onclick="appendNumber(2)">2</button>
                                                <button class="key" type="button" onclick="appendNumber(3)">3</button>
                                                <button class="key" type="button" onclick="appendNumber(4)">4</button>
                                                <button class="key" type="button" onclick="appendNumber(5)">5</button>
                                                <button class="key" type="button" onclick="appendNumber(6)">6</button>
                                                <button class="key" type="button" onclick="appendNumber(7)">7</button>
                                                <button class="key" type="button" onclick="appendNumber(8)">8</button>
                                                <button class="key" type="button" onclick="appendNumber(9)">9</button>
                                                <button class="key zero" type="button" onclick="appendNumber(0)">0</button>
                                                <button class="key clear" type="button" onclick="clearDisplay()">Clear</button>
                                            </div>
                                        </div>
                                        <div class="text-center">
                                            <button type="submit" class="btn btn-primary btn-block">Verify</button>
                                        </div>
                                    </form>
                            </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>
        function appendNumber(number) {
            const display = document.getElementById('otp-display'); // Referensi ke input OTP
            display.value += number; // Tambahkan angka ke input
        }

        function clearDisplay() {
            const display = document.getElementById('otp-display'); // Referensi ke input OTP
            display.value = ''; // Kosongkan input
        }
    </script>
</body>

</html>