<?php
session_start();

// If already logged in, redirect to dashboard
if(isset($_SESSION['username'])) {
    header("Location: index.php");
    exit();
}

include('includes/db.php');
include('includes/tx.php');

$error = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = mysqli_real_escape_string($conn, $_POST['username']);
    $password = mysqli_real_escape_string($conn, $_POST['password']);
    
    $sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
    $result = mysqli_query($conn, $sql);
    
    if (mysqli_num_rows($result) == 1) {
        $user = mysqli_fetch_assoc($result);
        $_SESSION['username'] = $user['username'];
        $_SESSION['user_id'] = $user['id'];
        $_SESSION['role'] = $user['role'];
        $_SESSION['login_time'] = date('Y-m-d H:i:s');
        
        header("Location: index.php");
        exit();
    } else {
        $error = "Invalid username or password!";
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login | Petrol Pump Management System</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Poppins Font for Body -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- Times New Roman for Headings -->
    <link href="https://fonts.googleapis.com/css2?family=Times+New+Roman&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            min-height: 100vh;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            position: relative;
            overflow-x: hidden;
        }
        
        /* Animated Background */
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23A04657" fill-opacity="0.05" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,165.3C1248,149,1344,107,1392,85.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') repeat-x bottom;
            background-size: cover;
            opacity: 0.3;
            pointer-events: none;
        }
        
        /* Headings use Times New Roman */
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Times New Roman', serif;
        }
        
        .login-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            position: relative;
            z-index: 1;
        }
        
        .login-box {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            padding: 45px;
            border-radius: 30px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.25);
            width: 100%;
            max-width: 480px;
            animation: fadeInUp 0.6s ease;
            border: 1px solid rgba(160,70,87,0.2);
            position: relative;
            overflow: hidden;
        }
        
        .login-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, #A04657, #6b2a36, #A04657);
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .login-icon {
            text-align: center;
            margin-bottom: 20px;
        }
        
        .login-icon .icon-circle {
            width: 90px;
            height: 90px;
            background: linear-gradient(135deg, #A04657 0%, #6b2a36 100%);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            animation: pulse 2s infinite;
            box-shadow: 0 10px 25px rgba(160,70,87,0.3);
            overflow: hidden;
        }
        
        .login-icon .icon-circle img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
        
        .login-icon .icon-circle i {
            font-size: 45px;
            color: #fff;
        }
        
        @keyframes pulse {
            0%, 100% { 
                transform: scale(1);
                box-shadow: 0 10px 25px rgba(160,70,87,0.3);
            }
            50% { 
                transform: scale(1.05);
                box-shadow: 0 15px 35px rgba(160,70,87,0.5);
            }
        }
        
        .login-box h2 {
            text-align: center;
            margin-bottom: 8px;
            color: #1a1a2e;
            font-size: 28px;
            font-weight: bold;
            letter-spacing: -0.5px;
        }
        
        .login-box h4 {
            text-align: center;
            margin-bottom: 30px;
            color: #6c757d;
            font-size: 14px;
            font-weight: 500;
            position: relative;
        }
        
        .login-box h4:first-of-type {
            text-transform: uppercase;
            color: #A04657;
            font-weight: 700;
            margin-bottom: 5px;
            font-size: 18px;
        }
        
        .login-box h4:last-of-type {
            margin-bottom: 35px;
        }
        
        .login-box h4::before,
        .login-box h4::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 60px;
            height: 1px;
            background: #e0e0e0;
        }
        
        .login-box h4::before {
            left: 0;
        }
        
        .login-box h4::after {
            right: 0;
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        .form-label {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 13px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            display: block;
        }
        
        .form-label i {
            color: #A04657;
            margin-right: 8px;
            font-size: 14px;
        }
        
        .input-group-custom {
            position: relative;
        }
        
        .input-group-custom i:first-child {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #A04657;
            font-size: 16px;
            z-index: 1;
        }
        
        .form-control {
            padding: 14px 15px 14px 45px;
            font-size: 14px;
            border-radius: 12px;
            border: 2px solid #e8e8e8;
            transition: all 0.3s;
            font-weight: 500;
            background: #fff;
            width: 100%;
        }
        
        .form-control:focus {
            border-color: #A04657;
            box-shadow: 0 0 0 4px rgba(160,70,87,0.1);
            outline: none;
        }
        
        .toggle-password {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #999;
            z-index: 2;
        }
        
        .btn-login {
            background: linear-gradient(135deg, #A04657 0%, #6b2a36 100%);
            border: none;
            padding: 14px;
            font-size: 16px;
            font-weight: 600;
            width: 100%;
            border-radius: 12px;
            transition: all 0.3s;
            color: #fff;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        .btn-login::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }
        
        .btn-login:hover::before {
            left: 100%;
        }
        
        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(160,70,87,0.4);
        }
        
        .alert {
            border-radius: 12px;
            font-weight: 500;
            margin-bottom: 25px;
            padding: 12px 18px;
            border: none;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .alert-danger {
            background: #fee2e2;
            color: #dc2626;
            border-left: 4px solid #dc2626;
        }
        
        .alert-success {
            background: #dcfce7;
            color: #16a34a;
            border-left: 4px solid #16a34a;
        }
        
        /* Footer Links */
        .login-footer {
            text-align: center;
            margin-top: 25px;
            font-size: 11px;
            color: #adb5bd;
        }
        
        .login-footer a {
            color: #A04657;
            text-decoration: none;
        }
        
        .login-footer a:hover {
            text-decoration: underline;
        }
        
        /* Responsive */
        @media (max-width: 576px) {
            .login-box {
                padding: 30px 20px;
                margin: 15px;
            }
            
            .login-box h2 {
                font-size: 24px;
            }
            
            .login-icon .icon-circle {
                width: 70px;
                height: 70px;
            }
            
            .login-icon .icon-circle i {
                font-size: 35px;
            }
            
            .login-box h4::before,
            .login-box h4::after {
                width: 30px;
            }
            
            .form-control {
                padding: 12px 12px 12px 40px;
                font-size: 13px;
            }
        }
        
        /* Loading animation for button */
        .btn-login.loading {
            pointer-events: none;
            opacity: 0.7;
        }
        
        .btn-login.loading::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            top: 50%;
            right: 20px;
            margin-top: -10px;
            border: 2px solid #fff;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 0.6s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-box">
            <div class="login-icon">
                <div class="icon-circle">
                    <?php if(file_exists('assets/images/logo.jpeg')): ?>
                        <img src="assets/images/logo.jpeg" alt="Logo" class="login-logo">
                    <?php else: ?>
                        <i class="fas fa-gas-pump"></i>
                    <?php endif; ?>
                </div>
            </div>
            <h4>ALfateh Petrol Pump</h4>
            <h4>Secure Access Portal</h4>
            
            <?php if($error): ?>
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle"></i>
                    <span><?php echo $error; ?></span>
                </div>
            <?php endif; ?>
            
            <form method="POST" action="" id="loginForm">
                <div class="form-group">
                    <label class="form-label"><i class="fas fa-user"></i> Username</label>
                    <div class="input-group-custom">
                        <i class="fas fa-user-circle"></i>
                        <input type="text" name="username" class="form-control" required autocomplete="off" placeholder="Enter your username">
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label"><i class="fas fa-lock"></i> Password</label>
                    <div class="input-group-custom">
                        <i class="fas fa-key"></i>
                        <input type="password" name="password" id="password" class="form-control" required placeholder="Enter your password">
                        <i class="fas fa-eye-slash toggle-password"></i>
                    </div>
                </div>
                
                <button type="submit" class="btn-login" id="loginBtn">
                    <i class="fas fa-sign-in-alt me-2"></i> Login to Dashboard
                </button>
            </form>
            
            <div class="login-footer">
                <p>&copy; <?php echo date('Y'); ?> Petrol Pump Management System | v2.0</p>
            </div>
        </div>
    </div>
    
    <script>
        // Toggle password visibility
        document.querySelector('.toggle-password')?.addEventListener('click', function() {
            const passwordInput = document.getElementById('password');
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            this.classList.toggle('fa-eye');
            this.classList.toggle('fa-eye-slash');
        });
        
        // Add loading state on submit
        document.getElementById('loginForm')?.addEventListener('submit', function() {
            const btn = document.getElementById('loginBtn');
            btn.classList.add('loading');
            btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> Logging in...';
        });
        
        // Remove loading state if there's an error (page will reload anyway)
        <?php if($error): ?>
        document.getElementById('loginBtn')?.classList.remove('loading');
        document.getElementById('loginBtn')?.innerHTML = '<i class="fas fa-sign-in-alt me-2"></i> Login to Dashboard';
        <?php endif; ?>
    </script>
</body>
</html>