<!DOCTYPE html>
<html dir="ltr" lang="en-US">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="Granny Restaurant">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="Purchase Manager Login - Granny Restaurant">
    <link href="../assets/images/favicon/favicon.png" rel="icon">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" type="text/css">

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- SweetAlert2 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

    <title>Purchase Manager Login - Granny Restaurant</title>

    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Raleway', sans-serif; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 15px; }
        .login-wrapper { width: 100%; max-width: 1200px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); background: white; min-height: 500px; }
        .login-welcome { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); padding: 50px 40px; display: flex; flex-direction: column; justify-content: center; color: white; position: relative; overflow: hidden; }
        .login-welcome::before { content: ''; position: absolute; top: -50%; right: -50%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 30px 30px; animation: moveBackground 15s linear infinite; }
        @keyframes moveBackground { 0% { transform: translate(0, 0); } 100% { transform: translate(30px, 30px); } }
        .welcome-content { position: relative; z-index: 1; }
        .welcome-title { font-size: 44px; font-weight: 700; margin-bottom: 18px; line-height: 1.2; }
        .welcome-emoji { font-size: 44px; margin-left: 8px; display: inline-block; animation: wave 2s ease-in-out infinite; }
        @keyframes wave { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(20deg); } }
        .welcome-description { font-size: 15px; font-weight: 300; margin-top: 25px; line-height: 1.6; opacity: 0.95; }
        .login-form-section { padding: 50px 40px; display: flex; flex-direction: column; justify-content: center; }
        .form-header { text-align: center; margin-bottom: 35px; }
        .form-header h2 { font-size: 28px; color: #333; margin-bottom: 8px; font-weight: 600; }
        .form-header p { color: #999; font-size: 13px; }
        .form-group { margin-bottom: 22px; }
        .form-group label { display: block; margin-bottom: 7px; color: #333; font-weight: 600; font-size: 13px; }
        .form-group input { width: 100%; padding: 11px 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 13px; font-family: 'Raleway', sans-serif; transition: all 0.3s ease; }
        .form-group input:focus { outline: none; border-color: #2a5298; box-shadow: 0 0 10px rgba(42, 82, 152, 0.1); }
        .form-group input::placeholder { color: #999; }
        .remember-forgot { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; font-size: 12px; }
        .remember-forgot a { color: #2a5298; text-decoration: none; cursor: pointer; }
        .remember-forgot a:hover { text-decoration: underline; }
        .login-btn { width: 100%; padding: 12px; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: 'Raleway', sans-serif; }
        .login-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(42, 82, 152, 0.3); }
        .login-btn:active { transform: translateY(0); }
        .login-btn.loading { opacity: 0.8; pointer-events: none; }
        .login-btn.loading::after { content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 8px; border: 3px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .back-link { text-align: center; margin-top: 18px; }
        .back-link a { color: #2a5298; text-decoration: none; font-size: 12px; }
        .back-link a:hover { text-decoration: underline; }

        @media (max-width: 768px) {
            .login-wrapper { grid-template-columns: 1fr; min-height: auto; border-radius: 15px; }
            .login-welcome { padding: 35px 25px; min-height: 250px; }
            .login-form-section { padding: 35px 25px; }
            .welcome-title { font-size: 32px; margin-bottom: 15px; }
            .welcome-emoji { font-size: 32px; }
            .welcome-description { font-size: 13px; margin-top: 20px; }
            .form-header h2 { font-size: 22px; margin-bottom: 6px; }
            .form-header p { font-size: 12px; margin-bottom: 20px; }
            .form-group { margin-bottom: 18px; }
            .form-group label { font-size: 12px; margin-bottom: 6px; }
            .form-group input { padding: 10px 12px; font-size: 13px; }
            .remember-forgot { margin-bottom: 20px; font-size: 11px; }
            .login-btn { padding: 11px; font-size: 14px; }
            .back-link { margin-top: 15px; }
        }

        @media (max-width: 480px) {
            body { padding: 12px; }
            .login-wrapper { border-radius: 12px; min-height: auto; }
            .login-welcome { padding: 25px 20px; min-height: 200px; display: none; }
            .login-form-section { padding: 25px 18px; }
            .form-header { margin-bottom: 25px; }
            .form-header h2 { font-size: 18px; margin-bottom: 5px; }
            .form-header p { font-size: 11px; }
            .form-group { margin-bottom: 15px; }
            .form-group label { font-size: 11px; margin-bottom: 5px; }
            .form-group input { padding: 10px 12px; border-radius: 6px; font-size: 13px; }
            .remember-forgot { margin-bottom: 18px; font-size: 10px; flex-direction: column; gap: 8px; align-items: flex-start; }
            .login-btn { padding: 12px; font-size: 13px; }
            .login-btn.loading::after { width: 12px; height: 12px; border-width: 2px; margin-left: 6px; }
            .back-link { margin-top: 12px; }
            .back-link a { font-size: 11px; }
        }
    </style>
</head>

<body>
    <div class="login-wrapper">
        <!-- Left Side -->
        <div class="login-welcome">
            <div class="welcome-content">
                <h1 class="welcome-title">
                    Purchase Manager
                    <span class="welcome-emoji">📦</span>
                </h1>
                <div class="welcome-description">
                    <p>Manage suppliers, create purchase orders, compare costs, and handle requisitions efficiently.</p>
                    <p style="margin-top: 15px;">Streamline your procurement process with our comprehensive purchase management system.</p>
                </div>
            </div>
        </div>

        <!-- Right Side -->
        <div class="login-form-section">
            <div class="form-header">
                <h2>Welcome Back</h2>
                <p>Sign in to your purchase manager account</p>
            </div>

            <form id="loginForm" onsubmit="handleLogin(event)">
                <div class="form-group">
                    <label for="email">Email Address</label>
                    <input 
                        type="email" 
                        id="email" 
                        name="email" 
                        placeholder="Enter your email" 
                        required
                    >
                </div>

                <div class="form-group">
                    <label for="password">Password</label>
                    <input 
                        type="password" 
                        id="password" 
                        name="password" 
                        placeholder="Enter your password" 
                        required
                    >
                </div>

                <div class="remember-forgot">
                    <label>
                        <input type="checkbox" id="rememberMe" name="rememberMe">
                        Remember me
                    </label>
                    <a href="#" onclick="handleForgotPassword(event)">Forgot password?</a>
                </div>

                <button type="submit" class="login-btn" id="loginBtn">Sign In</button>
            </form>

            <div class="back-link">
                <a href="../index.php">Back to Home</a>
            </div>
        </div>
    </div>

    <!-- SweetAlert2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>

    <script>
        async function handleLogin(event) {
            event.preventDefault();

            const email = document.getElementById('email').value.trim();
            const password = document.getElementById('password').value;
            const loginBtn = document.getElementById('loginBtn');

            // Validation
            if (!email || !password) {
                Swal.fire({
                    icon: 'error',
                    title: 'Validation Error',
                    text: 'Email and password are required'
                });
                return;
            }

            // Loading state
            loginBtn.disabled = true;
            loginBtn.classList.add('loading');

            try {
                const response = await fetch('../backend/purchase_manager_signin.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        email: email,
                        password: password
                    })
                });

                const data = await response.json();

                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Login Successful',
                        text: 'Welcome, ' + data.name,
                        timer: 1500,
                        showConfirmButton: false
                    }).then(() => {
                        // Redirect to dashboard
                        window.location.href = 'dashboard.php';
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Login Failed',
                        text: data.message
                    });
                }
            } catch (error) {
                console.error('Login error:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'An error occurred during login. Please try again.'
                });
            } finally {
                loginBtn.disabled = false;
                loginBtn.classList.remove('loading');
            }
        }

        function handleForgotPassword(event) {
            event.preventDefault();
            Swal.fire({
                icon: 'info',
                title: 'Password Reset',
                text: 'Please contact the administrator to reset your password.',
                confirmButtonText: 'Got it'
            });
        }

        // Remember me functionality
        document.addEventListener('DOMContentLoaded', function() {
            const rememberMe = document.getElementById('rememberMe');
            const email = document.getElementById('email');

            // Load saved email if exists
            const savedEmail = localStorage.getItem('pm_email');
            if (savedEmail) {
                email.value = savedEmail;
                rememberMe.checked = true;
            }

            // Save email on login
            email.addEventListener('change', function() {
                if (rememberMe.checked) {
                    localStorage.setItem('pm_email', this.value);
                } else {
                    localStorage.removeItem('pm_email');
                }
            });

            rememberMe.addEventListener('change', function() {
                if (this.checked) {
                    localStorage.setItem('pm_email', email.value);
                } else {
                    localStorage.removeItem('pm_email');
                }
            });
        });
    </script>
</body>

</html>
