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

<head>
    <!-- Required meta tags-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Kakashi Tech Solutions">
    <meta name="author" content="$Kakashi Tech Solutions">
    <meta name="keywords" content="Kakashi Tech Solutions">

    <!-- Title Page-->
    <title>Jacyjoka Apartment</title>

    <!-- Icons font CSS-->
    <link href="./logs/vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
    <link href="./logs/vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
    <!-- Font special for pages-->
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

    <!-- Vendor CSS-->
    <link href="./logs/vendor/select2/select2.min.css" rel="stylesheet" media="all">
    <link href="./logs/vendor/datepicker/daterangepicker.css" rel="stylesheet" media="all">

    <!-- Main CSS-->
    <link href="./logs/css/main.css" rel="stylesheet" media="all">
    <style>
 body {
            background-image: url("./imgs/login.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            height: 100vh;
        }
  </style>
    
    
     <style>
        .tabz {
            background-color: rgba(255, 255, 255, 0.5); /* Adjust the alpha (opacity) value as needed */
        }
    </style>

</head>

<body>
    <div class="page-wrapper bg-gra-01 p-t-180 p-b-100 font-poppins">
        <div class="wrapper wrapper--w780">
            <div class="card card-3">
                 <div class="card-heading food-heading"></div>
                <div class="card-body">
                    
                    
                    <h2 class="title">Jacyjoka Apartment</h2>
                   <form id="loginForm">
    <div class="input-group">
        <input class="input--style-3" type="text" placeholder="Username" name="username">
    </div>

    <div class="input-group">
        <div class="rs-select2 input--style-3 js-select-simple select--no-search">
            <select name="rank" class="input--style-3">
                <option disabled="disabled" selected="selected">Position</option>
                <option value="Cashier">Cashier</option>
                <option value="Waiter">Waiter</option>
                <option>Manager</option>
                <option>Receptionist</option>
            </select>
            <div class="select-dropdown input--style-3 rs-select2"></div>
        </div>
    </div>

    <div class="input-group">
        <input class="input--style-3" type="password" placeholder="Enter Password" name="password">
    </div>

    <div class="p-t-10">
        <button class="btn btn--pill btn--green" type="button" onclick="submitForm()">Submit</button>
    </div>
</form>

                </div>
            </div>
        </div>
    </div>

    <!-- Jquery JS-->
    <script src="./logs/vendor/jquery/jquery.min.js"></script>
    <!-- Vendor JS-->
    <script src="./logs/vendor/select2/select2.min.js"></script>
    <script src="./logs/vendor/datepicker/moment.min.js"></script>
    <script src="./logs/vendor/datepicker/daterangepicker.js"></script>

    <!-- Main JS-->
    <script src="./logs/js/global.js"></script>
<script>
    function submitForm() {
        var formData = $('#loginForm').serialize();

        $.ajax({
            type: 'POST',
            url: './database/log.kts.php',
            data: formData,
            success: function(response) {
                // Handle the response here
                if (response === 'success') {
                    // Redirect to index.php
                    window.location.replace('index.php');
                } else {
                    // Handle other responses or errors
                    console.log(response);
                }
            },
            error: function(error) {
                // Handle errors here
                console.log(error);
            }
        });
    }
</script>

</body>

</html>
<!-- end document-->