<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

session_start();
include 'db.php';

$error = "";

// Login form submit
if (isset($_POST['login'])) {
    $email = trim($_POST['email']);
    $password = trim($_POST['password']);

    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $error = "Please enter a valid email address.";
    } else {
        $stmt = $conn->prepare("SELECT * FROM users WHERE email = ? LIMIT 1");
        if ($stmt === false) {
            die("Prepare failed: " . htmlspecialchars($conn->error));
        }
        $stmt->bind_param("s", $email);
        $stmt->execute();
        $result = $stmt->get_result();
        $user = $result->fetch_assoc();

        if ($user && password_verify($password, $user['password'])) {
            $_SESSION['user_id'] = $user['id'];
            $_SESSION['user_name'] = $user['name'];
            $_SESSION['role'] = $user['role'];

            header("Location: index.php");
            exit;
        } else {
            $error = "Invalid Email or Password!";
        }

        $stmt->close();
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Tameer Al Madina</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Inter', sans-serif;
        }

        body {
            background-color: #f4f6f9; /* Clean light gray background dominant */
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow-x: hidden;
            z-index: 1;
        }

        /* --- BACKGROUND ACCENTS MATCHING REFERENCE IMAGE --- */
        
        /* Top Right Dark Blue & Orange Accents */
        body::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 35vw;
            height: 45vh;
            background: #0d233a;
            clip-path: polygon(100% 0, 100% 100%, 35% 0);
            z-index: -1;
        }

        .top-orange-line {
            position: absolute;
            top: 0;
            right: 0;
            width: 36vw;
            height: 46vh;
            background: #f15a24;
            clip-path: polygon(100% 0, 100% 100%, 33% 0);
            z-index: -2;
        }

        /* Bottom Left Dark Blue & Orange Accents */
        body::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 30vw;
            height: 35vh;
            background: #0d233a;
            clip-path: polygon(0 40%, 100% 100%, 0 100%);
            z-index: -1;
        }

        .bottom-orange-wrap {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 25vw;
            height: 30vh;
            background: #f15a24;
            clip-path: polygon(0 50%, 85% 100%, 0 100%);
            z-index: -1;
        }

        /* --- MAIN INTERFACE SPLIT RESTRUCTURE --- */
        
        .main-wrapper {
            display: flex;
            flex: 1;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            min-height: calc(100vh - 54px);
            padding: 0 40px;
        }

        /* Left Side: Logo Presentation Area */
        .left-panel {
            flex: 1.1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 40px;
        }

        .brand-center-group {
            text-align: center;
        }

        .logo-graphic-box {
            width: 260px;
            margin: 0 auto 20px auto;
        }

        .logo-graphic-box img {
            width: 100%;
            height: auto;
            object-fit: contain;
        }

        .display-title {
            font-size: 32px;
            font-weight: 700;
            color: #0d233a;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
        }

        .display-title span {
            color: #f15a24;
        }

        .display-tagline {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 4px;
            color: #718096;
            font-weight: 600;
        }

        /* Right Side: Elevated Form Workspace */
        .right-panel {
            flex: 0.9;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px;
        }

        .login-elevation-card {
            background: #ffffff;
            width: 100%;
            max-width: 460px;
            border-radius: 24px;
            padding: 45px 40px;
            box-shadow: 0 15px 35px rgba(13, 35, 58, 0.08);
            border: 1px solid rgba(13, 35, 58, 0.03);
        }

        .panel-heading {
            text-align: center;
            margin-bottom: 35px;
        }

        .heading-avatar {
            width: 54px;
            height: 54px;
            background: #0d233a;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 16px auto;
            color: #ffffff;
            font-size: 18px;
        }

        .panel-heading h2 {
            font-size: 32px;
            color: #0d233a;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .panel-heading p {
            font-size: 14px;
            color: #718096;
        }

        .orange-bar {
            width: 40px;
            height: 3px;
            background: #f15a24;
            margin: 14px auto 0 auto;
            border-radius: 2px;
        }

        /* Form Layout Elements */
        .input-row {
            margin-bottom: 24px;
        }

        .input-row label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: #4a5568;
            margin-bottom: 8px;
        }

        .input-row label i {
            margin-right: 6px;
            color: #718096;
        }

        .field-container {
            position: relative;
        }

        .field-container input {
            width: 100%;
            padding: 14px 16px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            font-size: 14px;
            color: #2d3748;
            transition: all 0.2s ease;
        }

        .field-container input:focus {
            outline: none;
            border-color: #cbd5e1;
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(241, 90, 36, 0.05);
        }

        .eye-toggle {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #a0aec0;
            cursor: pointer;
            font-size: 14px;
        }

        .meta-options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            font-size: 13.5px;
        }

        .checkbox-label {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #4a5568;
            cursor: pointer;
        }

        .forgot-link {
            color: #f15a24;
            text-decoration: none;
            font-weight: 600;
        }

        /* Interaction Elements */
        .submit-trigger-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(90deg, #f15a24 0%, #ff733b 100%);
            color: #ffffff;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            box-shadow: 0 5px 15px rgba(241, 90, 36, 0.25);
            transition: all 0.2s ease;
        }

        .submit-trigger-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 7px 18px rgba(241, 90, 36, 0.35);
        }

        .split-divider {
            text-align: center;
            margin: 24px 0;
            position: relative;
        }

        .split-divider::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            height: 1px;
            background: #e2e8f0;
            z-index: 1;
        }

        .split-divider span {
            background: #ffffff;
            padding: 0 16px;
            font-size: 13px;
            color: #a0aec0;
            position: relative;
            z-index: 2;
        }

        .guest-access-btn {
            width: 100%;
            padding: 14px;
            background: #ffffff;
            color: #0d233a;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            font-size: 14.5px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            transition: background 0.2s ease;
        }

        .guest-access-btn:hover {
            background: #f8fafc;
        }

        .runtime-error-box {
            background: #fff5f5;
            border-left: 4px solid #e53e3e;
            color: #c53030;
            padding: 12px 15px;
            border-radius: 8px;
            margin-bottom: 22px;
            font-size: 13.5px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* Global Structural Footer */
        .system-footer {
            background: #0d233a;
            color: rgba(255, 255, 255, 0.5);
            font-size: 13px;
            text-align: center;
            padding: 18px;
            margin-top: auto;
            position: relative;
            z-index: 5;
        }

        /* Responsive Breakpoints Optimized for Top Shifting */
        @media (max-width: 992px) {
            body {
                background-color: #f4f6f9;
            }
            .main-wrapper {
                flex-direction: column;
                justify-content: flex-start; /* Shifts up naturally */
                align-items: center;
                padding: 0px 15px 10px 15px; /* Removed top padding completely */
                min-height: auto;
            }
            
            .left-panel {
                padding: 5px 0 0px 0; /* Reduced top gap to pull logo up */
                flex: none;
                width: 100%;
                max-width: 380px;
            }
            
            .logo-graphic-box {
                width: 160px; 
                margin: 0 auto 2px auto; /* Tight margin under logo */
            }
            .display-title {
                font-size: 16px;
                margin-bottom: 1px;
            }
            .display-tagline {
                font-size: 8.5px;
                letter-spacing: 1px;
            }

            .right-panel {
                padding: 4px 0 10px 0; /* Squeezed card panel space to push up */
                flex: none;
                width: 100%;
                max-width: 380px;
            }
            .login-elevation-card {
                padding: 22px 20px;
                border-radius: 16px;
                box-shadow: 0 8px 24px rgba(13, 35, 58, 0.05);
                border: 1px solid #e2e8f0;
                background: #ffffff;
            }
            
            .panel-heading {
                margin-bottom: 18px;
            }
            .heading-avatar {
                width: 40px;
                height: 40px;
                font-size: 14px;
                margin-bottom: 10px;
            }
            .panel-heading h2 {
                font-size: 22px;
                margin-bottom: 4px;
            }
            .panel-heading p {
                font-size: 12px;
            }
            .orange-bar {
                margin: 8px auto 0 auto;
            }

            .input-row {
                margin-bottom: 14px;
            }
            .input-row label {
                font-size: 12px;
                margin-bottom: 5px;
            }
            .field-container input {
                padding: 10px 14px;
                font-size: 13px;
                border-radius: 8px;
            }
            .meta-options {
                margin-bottom: 18px;
                font-size: 12px;
            }
            .submit-trigger-btn {
                padding: 11px;
                font-size: 14px;
                border-radius: 8px;
            }
            .split-divider {
                margin: 14px 0;
            }
            .guest-access-btn {
                padding: 10px;
                font-size: 13.5px;
                border-radius: 8px;
            }
            .runtime-error-box {
                padding: 10px;
                margin-bottom: 14px;
                font-size: 12.5px;
            }

            body::before, body::after, .top-orange-line, .bottom-orange-wrap {
                display: none;
            }
        }
    </style>
</head>
<body>

    <div class="top-orange-line"></div>
    <div class="bottom-orange-wrap"></div>

    <div class="main-wrapper">
        <div class="left-panel">
            <div class="brand-center-group">
                <div class="logo-graphic-box">
                    <img src="tameer logo.png" alt="Tameer Al Madina Logo">
                </div>
                <h1 class="display-title">Tameer <span>Al Madina</span></h1>
                <div class="display-tagline">Building a Stronger Future</div>
            </div>
        </div>

        <div class="right-panel">
            <div class="login-elevation-card">
                <div class="panel-heading">
                    <div class="heading-avatar">
                        <i class="fa-regular fa-user"></i>
                    </div>
                    <h2>Welcome Back</h2>
                    <p>Login to manage your factory software</p>
                    <div class="orange-bar"></div>
                </div>

                <?php if ($error): ?>
                    <div class="runtime-error-box">
                        <i class="fa-solid fa-circle-exclamation"></i>
                        <span><?php echo htmlspecialchars($error); ?></span>
                    </div>
                <?php endif; ?>

                <form method="POST">
                    <div class="input-row">
                        <label for="email"><i class="fa-regular fa-user"></i> Username / Email</label>
                        <div class="field-container">
                            <input type="email" id="email" name="email" required placeholder="Enter your username or email" value="<?php echo isset($email) ? htmlspecialchars($email) : ''; ?>">
                        </div>
                    </div>

                    <div class="input-row">
                        <label for="password"><i class="fa-solid fa-lock"></i> Password</label>
                        <div class="field-container">
                            <input type="password" id="password" name="password" required placeholder="Enter your password">
                            <i class="fa-regular fa-eye eye-toggle"></i>
                        </div>
                    </div>

                    <div class="meta-options">
                        <label class="checkbox-label">
                            <input type="checkbox"> Remember me
                        </label>
                        <a href="#" class="forgot-link">Forgot Password?</a>
                    </div>

                    <button type="submit" name="login" class="submit-trigger-btn">
                        <i class="fa-solid fa-lock-open"></i> Login
                    </button>
                </form>

                <div class="split-divider">
                    <span>or</span>
                </div>

                <button class="guest-access-btn">
                    <i class="fa-solid fa-city"></i> Continue as Guest
                </button>
            </div>
        </div>
    </div>

    <footer class="system-footer">
        &copy; <?php echo date('Y'); ?> Tameer Al Madina &mdash; All Rights Reserved
    </footer>

</body>
</html>