
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hotel Kottaram Regency</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;80&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=rak51cOHJtQ0U2uvbWDMqpCwhvD4mMLdcJg2PKj4zKdtDNkOQxOcIVQY3RMgnRzuhzCFlMtfzFFNJ-CPW_TbU6pz0Lej7RwyYyZMHm5oVII" charset="UTF-8"></script><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

    <!-- ============ LOGIN PAGE ============ -->
    <div id="loginPage" class="login-page">
        <div class="login-bg-mesh"></div>
        <div class="login-particles" id="loginParticles"></div>
        <div class="login-container animate-fadeInUp">
            <div class="login-card">
                <div class="login-card-inner">
                    <div class="login-header">
                        <div class="login-logo">
                            
                           <img src="3.jpg" width="50%">
                        </div>
                    
                    </div>
                    <form id="loginForm" class="login-form" onsubmit="return false;">
                        <div class="form-floating-custom">
                            <div class="input-icon-wrapper">
                                <i class="bi bi-envelope"></i>
                                <input type="text" id="loginEmail" class="login-input" placeholder=" "  required>
                                <label for="loginEmail">Username</label>
                            </div>
                        </div>
                        <div class="form-floating-custom">
                            <div class="input-icon-wrapper">
                                <i class="bi bi-shield-lock"></i>
                                <input type="password" id="loginPassword" class="login-input" placeholder=" "  required>
                                <label for="loginPassword">Password</label>
                            </div>
                        </div>
                        
                        <button type="submit" class="login-btn" id="loginBtn" onclick="submitLogin()">
                            <span class="btn-text">Sign In</span>
                            <span class="btn-loader" id="btnLoader"><i class="bi bi-arrow-repeat spin"></i></span>
                        </button>
                      
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!-- TOAST NOTIFICATION -->
    <div class="toast-container" id="toastContainer"></div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="main.js"></script>
    <script>
        function submitLogin() {
            var username = $('#loginEmail').val().trim();
            var password = $('#loginPassword').val().trim();
            
            if (!username || !password) {
                alert('Please enter both username and password');
                return;
            }
            
            var formData = new FormData();
            formData.append('username', username);
            formData.append('password', password);
            
            $.ajax({
                type: "POST",
                url: "login_save.php",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    if (response === 'success') {
                        window.location.href = 'add_rooms.php';
                    } else {
                        alert(response);
                    }
                },
                error: function() {
                    alert('Error logging in. Please try again.');
                }
            });
        }
    </script>
</body>
</html>