<?php
include 'common/config.php';
if(isset($_SESSION['user_id'])) { header("Location: index.php"); exit; }

$msg = "";
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    $type = $_POST['type'];
    if($type == 'login') {
        $email = $conn->real_escape_string($_POST['email']);
        $pass = $_POST['password'];
        $sql = "SELECT * FROM users WHERE email='$email' OR phone='$email'";
        $result = $conn->query($sql);
        if($result->num_rows > 0) {
            $row = $result->fetch_assoc();
            if(password_verify($pass, $row['password'])) {
                $_SESSION['user_id'] = $row['id'];
                header("Location: index.php"); exit;
            } else { $msg = "Wrong password!"; }
        } else { $msg = "User not found!"; }
    } elseif($type == 'signup') {
         $name = $conn->real_escape_string($_POST['name']);
         $phone = $conn->real_escape_string($_POST['phone']);
         $email = $conn->real_escape_string($_POST['email']);
         $pass = password_hash($_POST['password'], PASSWORD_DEFAULT);
         
         $sql = "INSERT INTO users (name, phone, email, password) VALUES ('$name', '$phone', '$email', '$pass')";
         if($conn->query($sql)) { $msg = "Account created! Now Login."; } 
         else { $msg = "Email or Phone already exists!"; }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login & Register</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Black Topup er moto font family set kora hoyeche */
        body { 
            font-family: 'Poppins', 'Hind Siliguri', sans-serif; 
            background-color: #f3f4f6; 
        }
        .card { background: #ffffff; border-radius: 12px; border: 1px solid #e5e7eb; }
        input { border-radius: 8px !important; }
        button { border-radius: 8px !important; }
        
        /* Purple theme color from image */
        .text-purple-theme { color: #701382; }
        .bg-purple-theme { background-color: #701382; }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen p-4">

<div class="card w-full max-w-sm shadow-sm overflow-hidden">
    
    <div class="p-6 text-center">
        <h1 id="title" class="text-2xl font-bold text-gray-800">Welcome</h1>
        <p id="desc" class="text-gray-500 text-sm mt-1">Please login to your account</p>
    </div>

    <div class="px-6 mb-4">
        <div class="flex bg-gray-100 p-1 rounded-lg">
            <button onclick="switchTab('login')" id="t-login" class="flex-1 py-2 text-sm font-bold bg-white text-[#701382] shadow-sm transition-all">Login</button>
            <button onclick="switchTab('signup')" id="t-signup" class="flex-1 py-2 text-sm font-bold text-gray-500 transition-all">Register</button>
        </div>
    </div>

    <div class="p-6 pt-2">
        <?php if($msg): ?>
            <div class="bg-red-50 text-red-600 p-3 rounded-lg mb-4 text-center text-xs font-bold border border-red-100 italic">
                <?php echo $msg; ?>
            </div>
        <?php endif; ?>

        <form id="f-login" method="POST" class="space-y-4">
            <input type="hidden" name="type" value="login">
            <div class="relative">
                <i class="fa fa-envelope absolute left-3 top-3.5 text-gray-400 text-sm"></i>
                <input type="text" name="email" placeholder="Email or Phone" required class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 focus:outline-none focus:border-[#701382] text-sm">
            </div>
            <div class="relative">
                <i class="fa fa-lock absolute left-3 top-3.5 text-gray-400 text-sm"></i>
                <input type="password" name="password" placeholder="Password" required class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 focus:outline-none focus:border-[#701382] text-sm">
            </div>
            <button type="submit" class="w-full bg-[#701382] text-white py-3 font-bold hover:opacity-90 transition-all shadow-md">
                Login
            </button>
        </form>

        <form id="f-signup" method="POST" class="space-y-4 hidden">
            <input type="hidden" name="type" value="signup">
            <div class="relative">
                <i class="fa fa-user absolute left-3 top-3.5 text-gray-400 text-sm"></i>
                <input type="text" name="name" placeholder="Full Name" required class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 focus:outline-none focus:border-[#701382] text-sm">
            </div>
            <div class="relative">
                <i class="fa fa-phone absolute left-3 top-3.5 text-gray-400 text-sm"></i>
                <input type="number" name="phone" placeholder="Phone Number" required class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 focus:outline-none focus:border-[#701382] text-sm">
            </div>
            <div class="relative">
                <i class="fa fa-at absolute left-3 top-3.5 text-gray-400 text-sm"></i>
                <input type="email" name="email" placeholder="Email Address" required class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 focus:outline-none focus:border-[#701382] text-sm">
            </div>
            <div class="relative">
                <i class="fa fa-key absolute left-3 top-3.5 text-gray-400 text-sm"></i>
                <input type="password" name="password" placeholder="Password" required class="w-full pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 focus:outline-none focus:border-[#701382] text-sm">
            </div>
            <button type="submit" class="w-full bg-gray-800 text-white py-3 font-bold hover:bg-black transition-all">
                Create Account
            </button>
        </form>
    </div>

    <div class="bg-gray-50 p-4 text-center border-t border-gray-100">
        <p class="text-[10px] text-gray-400 font-bold tracking-widest uppercase">Secure Login System</p>
    </div>
</div>

<script>
    function switchTab(tab) {
        const loginBtn = document.getElementById('t-login');
        const signupBtn = document.getElementById('t-signup');
        const loginForm = document.getElementById('f-login');
        const signupForm = document.getElementById('f-signup');
        const title = document.getElementById('title');
        const desc = document.getElementById('desc');

        if(tab === 'login') {
            loginForm.classList.remove('hidden');
            signupForm.classList.add('hidden');
            title.innerText = "Welcome";
            desc.innerText = "Please login to your account";
            loginBtn.classList.add('bg-white', 'text-[#701382]', 'shadow-sm');
            loginBtn.classList.remove('text-gray-500');
            signupBtn.classList.remove('bg-white', 'text-[#701382]', 'shadow-sm');
            signupBtn.classList.add('text-gray-500');
        } else {
            loginForm.classList.add('hidden');
            signupForm.classList.remove('hidden');
            title.innerText = "Register";
            desc.innerText = "Create a new account";
            signupBtn.classList.add('bg-white', 'text-[#701382]', 'shadow-sm');
            signupBtn.classList.remove('text-gray-500');
            loginBtn.classList.remove('bg-white', 'text-[#701382]', 'shadow-sm');
            loginBtn.classList.add('text-gray-500');
        }
    }
</script>
</body>
</html>