<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="Mondriaan Montessori School - Secure Student Portal Login">
    <meta name="keywords" content="school, mondriaan, montessori, olongapo school, student portal">
    <title>MMADLBHS - Student Portal</title>
    
    <!-- Debug Information -->
  
    
    <!-- Favicon -->
  <link rel="icon" href="../../datapack/icon/logo.png">
    
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <style>
        :root {
            --primary-color: #2563eb;
            --secondary-color: #1e40af;
            --accent-color: #3b82f6;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --dark-color: #1f2937;
            --light-color: #f8fafc;
            --border-color: #e5e7eb;
            --text-primary: #111827;
            --text-secondary: #6b7280;
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .login-container {
            width: 100%;
            max-width: 1000px;
            background: white;
            border-radius: 20px;
            box-shadow: var(--shadow-lg);
            overflow: hidden;
            display: flex;
            min-height: 600px;
        }

        .login-image {
            flex: 1;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .login-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('assets/images/test.jpg') center/cover;
            opacity: 0.1;
        }

        .login-image-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: white;
            padding: 40px;
        }

        .login-image h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .login-image p {
            font-size: 1.1rem;
            opacity: 0.9;
            line-height: 1.6;
        }

        .login-form {
            flex: 1;
            padding: 60px 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .logo-section {
            text-align: center;
            margin-bottom: 40px;
        }

        .logo-section img {
            max-width: 200px;
            height: auto;
        }

        .welcome-text {
            text-align: center;
            margin-bottom: 40px;
        }

        .welcome-text h1 {
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .welcome-text p {
            color: var(--text-secondary);
            font-size: 1rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--text-primary);
            font-size: 0.9rem;
        }

        .form-control {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid var(--border-color);
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: white;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        .input-group {
            position: relative;
        }

        .input-group .form-control {
            padding-left: 45px;
        }

        .input-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
            z-index: 2;
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 1.5rem;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .checkbox-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--primary-color);
        }

        .checkbox-item label {
            font-size: 0.9rem;
            color: var(--text-secondary);
            cursor: pointer;
        }

        .btn-login {
            width: 100%;
            padding: 14px 24px;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            border: none;
            border-radius: 10px;
            color: white;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 1.5rem;
        }

        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .btn-login:active {
            transform: translateY(0);
        }

        .forgot-password {
            text-align: center;
            margin-bottom: 2rem;
        }

        .forgot-password a {
            color: var(--primary-color);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

        .forgot-password a:hover {
            color: var(--secondary-color);
        }

        .footer-info {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid var(--border-color);
        }

        .footer-info p {
            color: var(--text-secondary);
            font-size: 0.85rem;
            margin-bottom: 0.5rem;
        }

        .footer-info a {
            color: var(--primary-color);
            text-decoration: none;
        }

        .current-date {
            background: var(--light-color);
            padding: 8px 16px;
            border-radius: 8px;
            display: inline-block;
            font-size: 0.85rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .loading-spinner {
            display: none;
            width: 20px;
            height: 20px;
            border: 2px solid #ffffff;
            border-top: 2px solid transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 8px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .login-container {
                flex-direction: column;
                max-width: 400px;
            }

            .login-image {
                display: none;
            }

            .login-form {
                padding: 40px 30px;
            }

            .welcome-text h1 {
                font-size: 1.75rem;
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 10px;
            }

            .login-form {
                padding: 30px 20px;
            }

            .checkbox-group {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
        }

        /* Animation */
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
    <div class="login-container fade-in">
        <!-- Left Side - Image/Info -->
        <div class="login-image">
            <div class="login-image-content">
                <h2>Welcome Back!</h2>
                <p>Access your academic portal and stay connected with your educational journey at Mondriaan Montessori School.</p>
            </div>
        </div>

        <!-- Right Side - Login Form -->
        <div class="login-form">
            <!-- Logo -->
            <div class="logo-section">
                <img src="assets/images/logojoin.png" alt="MMADLBHS Logo" class="img-fluid">
          </div>

            <!-- Welcome Text -->
            <div class="welcome-text">
                <h1>Student Portal</h1>
                <p>Sign in to access your account</p>
              </div>

            <!-- Login Form -->
            <form id="loginForm" method="POST" action="connect.php">
                <!-- Username Field -->
                  <div class="form-group">
                    <label for="user" class="form-label">Username</label>
                    <div class="input-group">
                        <i class="fas fa-user input-icon"></i>
                        <input 
                            type="text" 
                            name="user" 
                            id="user" 
                            class="form-control" 
                            placeholder="Enter your username"
                            value=""
                            autocomplete="username"
                            required
                        >
                    </div>
                </div>

                <!-- Password Field -->
                <div class="form-group">
                    <label for="pwd" class="form-label">Password</label>
                    <div class="input-group">
                        <i class="fas fa-lock input-icon"></i>
                        <input 
                            type="password" 
                            name="pwd" 
                            id="pwd" 
                            class="form-control" 
                            placeholder="Enter your password"
                            value=""
                            autocomplete="current-password"
                            required
                        >
                  </div>
                  </div>  

                <!-- Remember Me & Auto Login -->
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input 
                            type="checkbox" 
                            name="remember" 
                            id="remember"
                            
                        >
                    <label for="remember">Remember me</label>
                    </div>
                    <div class="checkbox-item">
                        <input 
                            type="checkbox" 
                            name="autologin" 
                            id="autologin"
                            
                        >
                        <label for="autologin">Auto login</label>
                    </div>
                    </div>
                  
                <!-- Login Button -->
                <button type="submit" class="btn-login" id="loginBtn">
                    <span class="loading-spinner" id="loadingSpinner"></span>
                    <span id="loginText">Sign In</span>
                </button>
            </form>

            <!-- Forgot Password -->
            <div class="forgot-password">
                <a href="https://www.facebook.com/mondriaanmontessoriofficial" target="_blank">
                    <i class="fas fa-question-circle mr-1"></i>
                    Forgot password? Contact administrator
                </a>
            </div>

            <!-- Footer Information -->
            <div class="footer-info">
                <p>
                    <i class="fas fa-info-circle mr-1"></i>
                    For inquiries, visit our 
                    <a href="https://www.facebook.com/mondriaanmontessoriofficial" target="_blank">
                        Facebook page
                    </a>
                </p>
              
          </div>
        </div>
      </div>
      
    <!-- Scripts -->
    <script>
        // Error handling for external scripts
        window.addEventListener('error', function(e) {
            // Ignore errors from browser extensions or external scripts
            if (e.filename && (
                e.filename.includes('extend-native-history-api.js') ||
                e.filename.includes('requests.js') ||
                e.filename.includes('location.js') ||
                e.filename.includes('chrome-extension') ||
                e.filename.includes('moz-extension')
            )) {
                e.preventDefault();
                return false;
            }
        }, true);
    </script>
    
    <!-- jQuery with fallback -->
    <script>
        (function() {
            function loadScript(src, callback) {
                var script = document.createElement('script');
                script.src = src;
                script.onload = callback;
                script.onerror = function() {
                    console.warn('Failed to load:', src);
                    if (callback) callback();
                };
                document.head.appendChild(script);
            }
            
            // Load jQuery first
            loadScript('https://code.jquery.com/jquery-3.6.0.min.js', function() {
                // Load Bootstrap after jQuery
                loadScript('https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js', function() {
                    // Initialize our custom script after both are loaded
                    initializeLoginScript();
                });
            });
        })();
    </script>
    
    <script>
        function initializeLoginScript() {
            $(document).ready(function() {
                // Form submission handling
                $('#loginForm').on('submit', function(e) {
                    e.preventDefault();
                    
                    // Show loading state
                    $('#loadingSpinner').show();
                    $('#loginText').text('Signing In...');
                    $('#loginBtn').prop('disabled', true);
                    
                    // Get form data
                    const formData = new FormData(this);
                    
                    // Submit form via AJAX
                    $.ajax({
                        url: 'connect.php',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            try {
                                // Check if response is already an object or needs parsing
                                let data;
                                if (typeof response === 'string') {
                                    // Try to parse JSON response
                                    data = JSON.parse(response);
                                } else if (typeof response === 'object') {
                                    // Response is already an object
                                    data = response;
                                } else {
                                    // Handle unexpected response type
                                    console.warn('Unexpected response type:', typeof response);
                                    data = { success: false, message: 'Invalid response format' };
                                }

                                if (data.success) {
                                    // Show success message and redirect
                                    Swal.fire({
                                        title: 'Welcome!',
                                        text: data.message,
                                        icon: 'success',
                                        timer: 2000,
                                        showConfirmButton: false
                                    }).then(() => {
                                        window.location.href = data.redirect;
                                    });
                                } else {
                                    // Show error message
                                    Swal.fire({
                                        title: 'Login Failed!',
                                        text: data.message || 'Login failed. Please try again.',
                                        icon: 'error',
                                        confirmButtonColor: '#2563eb'
                                    });
                                }
                            } catch (e) {
                                console.error('Error processing response:', e);
                                console.log('Raw response:', response);
                                
                                // Handle non-JSON response (traditional form submission)
                                if (typeof response === 'string') {
                                    if (response.includes('success') || response.includes('dashboard')) {
                                        window.location.href = response.includes('accounting') ? 
                                            '../accounting/sms.php?page=dashboard' : 
                                            '../portal/sms.php?page=dashboard';
                                        return;
                                    }
                                }
                                
                                // Fallback error message
                                Swal.fire({
                                    title: 'Login Failed!',
                                    text: 'Invalid credentials. Please try again.',
                                    icon: 'error',
                                    confirmButtonColor: '#2563eb'
                                });
                            }
                        },
                        error: function() {
                            Swal.fire({
                                title: 'Connection Error!',
                                text: 'Unable to connect to server. Please check your internet connection.',
                                icon: 'error',
                                confirmButtonColor: '#2563eb'
                            });
                        },
                        complete: function() {
                            // Reset button state
                            $('#loadingSpinner').hide();
                            $('#loginText').text('Sign In');
                            $('#loginBtn').prop('disabled', false);
                        }
                    });
                });

                // Auto-focus on username field
                $('#user').focus();

                // Enter key to submit form
                $(document).keypress(function(e) {
                    if (e.which === 13) {
                        $('#loginForm').submit();
                    }
                });

                // Input validation
                $('.form-control').on('input', function() {
                    if ($(this).val().trim() !== '') {
                        $(this).removeClass('is-invalid').addClass('is-valid');
                    } else {
                        $(this).removeClass('is-valid is-invalid');
                    }
                });

                // Show/hide password toggle
                $('#pwd').after('<i class="fas fa-eye-slash password-toggle" style="position: absolute; right: 16px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #6b7280;"></i>');
                
                $('.password-toggle').click(function() {
                    const passwordField = $('#pwd');
                    const icon = $(this);
                    
                    if (passwordField.attr('type') === 'password') {
                        passwordField.attr('type', 'text');
                        icon.removeClass('fa-eye-slash').addClass('fa-eye');
                    } else {
                        passwordField.attr('type', 'password');
                        icon.removeClass('fa-eye').addClass('fa-eye-slash');
                    }
                });
            });
        }
    </script>
    
    <!-- JavaScript Fallback for Cookie Handling -->
    <script>
        // Fallback if PHP cookies are not working
        function setCookieValues() {
            // Get cookies using JavaScript
            function getCookie(name) {
                const value = `; ${document.cookie}`;
                const parts = value.split(`; ${name}=`);
                if (parts.length === 2) return parts.pop().split(';').shift();
                return '';
            }
            
            // Decode URL-encoded values
            function decodeCookie(value) {
                try {
                    return decodeURIComponent(value);
                } catch (e) {
                    return value; // Return original if decoding fails
                }
            }
            
            // Set username if empty
            const userField = document.getElementById('user');
            if (userField && userField.value === '') {
                const savedUser = getCookie('user_login');
                if (savedUser) {
                    userField.value = decodeCookie(savedUser);
                }
            }
            
            // Set password if empty
            const pwdField = document.getElementById('pwd');
            if (pwdField && pwdField.value === '') {
                const savedPwd = getCookie('userpassword');
                if (savedPwd) {
                    pwdField.value = decodeCookie(savedPwd);
                }
            }
            
            // Set checkboxes
            const rememberCheckbox = document.getElementById('remember');
            if (rememberCheckbox) {
                rememberCheckbox.checked = getCookie('remember') !== '';
            }
            
            const autologinCheckbox = document.getElementById('autologin');
            if (autologinCheckbox) {
                autologinCheckbox.checked = getCookie('autologin') !== '';
            }
        }
        
        // Run fallback on page load
        document.addEventListener('DOMContentLoaded', setCookieValues);
    </script>
</body>
</html>