<?php

/**
 * Testing form to simulate Joomla user data input
 * This simulates how Joomla would pass user data to the Vue app
 */

function generateRandomUserId($length = 20)
{
    $characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    $charactersLength = strlen($characters);
    $randomId = '';

    for ($i = 0; $i < $length; $i++) {
        $randomId .= $characters[rand(0, $charactersLength - 1)];
    }

    return $randomId;
}

// Generate a random user ID for testing
$randomUserId = generateRandomUserId();
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue App Integration Test - User Data Input</title>
    <link rel="stylesheet" href="stylephp.css">
</head>

<body class="form-page-body">
    <div class="form-container">
        <h1>🧪 Vue App Integration Test</h1>

        <div class="help-text">
            <strong>Testing Simulation:</strong> This form simulates how Joomla would pass user data to the Vue app.
            Fill in the fields below and click "Launch Vue App" to test the integration.
        </div>

        <form action="app.php" method="POST">
            <div class="form-group">
                <label for="userId">User ID:</label>
                <div style="display: flex; gap: 10px; align-items: flex-end;">
                    <input type="text" id="userId" name="userId" value="<?php echo htmlspecialchars($randomUserId); ?>" placeholder="Auto-generated ID (you can modify)" required style="flex: 1;">

                </div>
            </div>

            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" placeholder="e.g., john@example.com" required>
            </div>

            <div class="form-group">
                <label for="phone">Phone:</label>
                <input type="text" id="phone" name="phone" placeholder="e.g., +40712345678">
            </div>

            <button type="submit" class="submit-btn">🚀 Launch Vue App</button>
        </form>
    </div>

</body>

</html>