<!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>THE FARM</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">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

    <!-- Main CSS-->
    <link href="./logs/css/main.css" rel="stylesheet" media="all">
</head>

<body>
    <div class="page-wrapper bg-gra-01 p-t-180 p-b-180 font-poppins">
       <div class="centered-heading">
  <h1 class="food-heading"><i>THE FARM</i></h1>
</div>

        <div class="wrapper wrapper--w780">
            

            <div class="card card-3">
                <div class="card-heading food-heading"></div>
              

                <div class="card-body">
                    <h2 class="title">User Details</h2>
                   <form id="login">
    <div class="input-group">
        <input class="input--style-3" type="text" placeholder="Username" name="username">
    </div>
   
    <div class="input-group">
        <div class="rs-select2 js-select-simple select--no-search">
            <select name="rank">
                <option disabled="disabled" selected="selected">Position</option>
                <option value="Waiter">Waitstaff</option>
                <option value="Manager">Manager</option>
                <option value="Cashier">Cashier</option>
            </select>
            <div class="select-dropdown"></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" name="validate" type="submit">Login</button>
    </div>
</form>


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

    <!-- Jquery JS-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    <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>
$(document).ready(function() {
  $('#login').on('submit', function(event) {
    event.preventDefault(); // Prevent the default form submission

    // Serialize the form data
    var formData = $(this).serialize();

    // Send an Ajax POST request to the server
    $.ajax({
      type: 'POST',
      url: './database/log.kts.php',
      data: formData,
      success: function(response) {
        if (response === 'success') {
          // If the login is successful, display a success toast
          toastr.success('Login Successful');
          // Redirect to the homepage after a successful login
          setTimeout(function() {
            window.location.href = 'index.php';
          }, 2000); // Adjust the delay as needed
        } else {
          // If the login fails, display an error toast
          toastr.error('Login Failed. Please check your credentials.');
        }
      }
    });
  });
});
</script>

</body>

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