<!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 id="shopname"></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: 100%;
        }
  </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" id="shopname1"></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>
                <option>CEO</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>
<!-- SweetAlert2 CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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,
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    // Show success alert
                    Swal.fire({
                        icon: 'success',
                        title: 'Login Successful',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => {
                        // Handle redirect based on response
                        if (response.redirect) {
                            // Special case for cashiers needing to start shift
                            window.location.href = response.redirect;
                        } else {
                            // Default redirect for successful login
                            window.location.href = 'index.php';
                        }
                    });
                } else {
                    // Show error alert
                    Swal.fire({
                        icon: 'error',
                        title: 'Login Failed',
                        text: response.message
                    }).then(() => {
                        // Handle redirect for failed cases (like waiter logout)
                        if (response.redirect) {
                            window.location.href = response.redirect;
                        }
                    });
                }
            },
            error: function(xhr, status, error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Request Failed',
                    text: 'Unable to connect to the server. Error: ' + error
                });
            }
        });
    }
</script>

    <script>
    // JavaScript code to fetch data and display it
    function fetchBusinessDetails() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', './database/fetch_business.kts.php', true);
        xhr.onload = function() {
            if (this.status === 200) {
                var data = JSON.parse(this.responseText);
                
                console.log(data);  // Check if contact2 is present in the response
                
                // Check if no error
                if (!data.error) {
                    // Update the span elements with the fetched data
                    document.getElementById('shopname').innerText = data.shop_name || '';
                    document.getElementById('shopname1').innerText = data.shop_name || '';
                    document.getElementById('location').innerText = data.location || '';
                    document.getElementById('quote').innerText = data.quote || '';
                    document.getElementById('street').innerText = data.street || '';
                    document.getElementById('address').innerText = data.address || '';
                    document.getElementById('pin').innerText = data.pin || '';
                    document.getElementById('contact1').innerText = data.contact1 || '';
                    document.getElementById('contact2').innerText = data.contact2 || ''; // This should populate contact2
                } else {
                    console.error("Error: " + data.error);
                }
            } else {
                console.error("Failed to fetch data");
            }
        };
        xhr.send();
    }

    // Call the function as soon as the DOM is fully loaded
    document.addEventListener('DOMContentLoaded', fetchBusinessDetails);
</script>

</body>

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