<?php
// formtest.php - Comprehensive form testing for cremote MCP tools
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cremote Form Testing - Multiple Field Types</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="password"],
        input[type="number"],
        input[type="date"],
        select,
        textarea {
            width: 100%;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            box-sizing: border-box;
        }
        input[type="checkbox"],
        input[type="radio"] {
            margin-right: 8px;
        }
        .checkbox-group,
        .radio-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .inline-group {
            display: flex;
            gap: 15px;
            align-items: center;
        }
        button {
            background-color: #007cba;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #005a87;
        }
        .reset-btn {
            background-color: #666;
        }
        .reset-btn:hover {
            background-color: #444;
        }
        .results {
            background-color: #e8f5e8;
            border: 2px solid #4caf50;
            padding: 20px;
            border-radius: 4px;
            margin-top: 20px;
        }
        .results h2 {
            color: #2e7d32;
            margin-top: 0;
        }
        .field-result {
            margin-bottom: 10px;
            padding: 8px;
            background-color: white;
            border-radius: 4px;
        }
        .field-name {
            font-weight: bold;
            color: #1976d2;
        }
        .field-value {
            color: #333;
            margin-left: 10px;
        }
        .empty-value {
            color: #999;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🧪 Cremote Form Testing Suite</h1>
        
        <?php if ($_SERVER['REQUEST_METHOD'] === 'POST'): ?>
            <div class="results">
                <h2>📋 Form Submission Results</h2>
                <p><strong>Submission Time:</strong> <?php echo date('Y-m-d H:i:s'); ?></p>
                <p><strong>Total Fields Submitted:</strong> <?php echo count($_POST); ?></p>
                
                <?php foreach ($_POST as $field => $value): ?>
                    <div class="field-result">
                        <span class="field-name"><?php echo htmlspecialchars($field); ?>:</span>
                        <span class="field-value <?php echo empty($value) ? 'empty-value' : ''; ?>">
                            <?php 
                            if (is_array($value)) {
                                echo htmlspecialchars(implode(', ', $value));
                            } else {
                                echo empty($value) ? '(empty)' : htmlspecialchars($value);
                            }
                            ?>
                        </span>
                    </div>
                <?php endforeach; ?>
                
                <hr style="margin: 20px 0;">
                <h3>🔍 Raw POST Data (for debugging):</h3>
                <pre style="background: #f0f0f0; padding: 10px; border-radius: 4px; overflow-x: auto;"><?php print_r($_POST); ?></pre>
            </div>
            <hr style="margin: 30px 0;">
        <?php endif; ?>

        <form id="test-form" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
            <h2>📝 Personal Information</h2>
            
            <div class="form-group">
                <label for="firstName">First Name:</label>
                <input type="text" id="firstName" name="firstName" placeholder="Enter your first name">
            </div>
            
            <div class="form-group">
                <label for="lastName">Last Name:</label>
                <input type="text" id="lastName" name="lastName" placeholder="Enter your last name">
            </div>
            
            <div class="form-group">
                <label for="email">Email Address:</label>
                <input type="email" id="email" name="email" placeholder="your.email@example.com">
            </div>
            
            <div class="form-group">
                <label for="phone">Phone Number:</label>
                <input type="tel" id="phone" name="phone" placeholder="+1-555-123-4567">
            </div>
            
            <div class="form-group">
                <label for="birthDate">Birth Date:</label>
                <input type="date" id="birthDate" name="birthDate">
            </div>
            
            <div class="form-group">
                <label for="age">Age:</label>
                <input type="number" id="age" name="age" min="1" max="120" placeholder="25">
            </div>

            <h2>🏠 Address Information</h2>
            
            <div class="form-group">
                <label for="address">Street Address:</label>
                <input type="text" id="address" name="address" placeholder="123 Main Street">
            </div>
            
            <div class="form-group">
                <label for="city">City:</label>
                <input type="text" id="city" name="city" placeholder="New York">
            </div>
            
            <div class="form-group">
                <label for="state">State/Province:</label>
                <select id="state" name="state">
                    <option value="">Select a state...</option>
                    <option value="AL">Alabama</option>
                    <option value="CA">California</option>
                    <option value="FL">Florida</option>
                    <option value="NY">New York</option>
                    <option value="TX">Texas</option>
                    <option value="WA">Washington</option>
                    <option value="OTHER">Other</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="zipCode">ZIP/Postal Code:</label>
                <input type="text" id="zipCode" name="zipCode" placeholder="12345">
            </div>

            <h2>🎯 Preferences</h2>
            
            <div class="form-group">
                <label>Preferred Contact Method:</label>
                <div class="radio-group">
                    <div class="inline-group">
                        <input type="radio" id="contactEmail" name="contactMethod" value="email">
                        <label for="contactEmail">Email</label>
                    </div>
                    <div class="inline-group">
                        <input type="radio" id="contactPhone" name="contactMethod" value="phone">
                        <label for="contactPhone">Phone</label>
                    </div>
                    <div class="inline-group">
                        <input type="radio" id="contactMail" name="contactMethod" value="mail">
                        <label for="contactMail">Mail</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label>Interests (check all that apply):</label>
                <div class="checkbox-group">
                    <div class="inline-group">
                        <input type="checkbox" id="interestTech" name="interests[]" value="technology">
                        <label for="interestTech">Technology</label>
                    </div>
                    <div class="inline-group">
                        <input type="checkbox" id="interestSports" name="interests[]" value="sports">
                        <label for="interestSports">Sports</label>
                    </div>
                    <div class="inline-group">
                        <input type="checkbox" id="interestMusic" name="interests[]" value="music">
                        <label for="interestMusic">Music</label>
                    </div>
                    <div class="inline-group">
                        <input type="checkbox" id="interestTravel" name="interests[]" value="travel">
                        <label for="interestTravel">Travel</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label for="newsletter">
                    <input type="checkbox" id="newsletter" name="newsletter" value="yes">
                    Subscribe to newsletter
                </label>
            </div>

            <h2>💬 Additional Information</h2>
            
            <div class="form-group">
                <label for="comments">Comments or Questions:</label>
                <textarea id="comments" name="comments" rows="4" placeholder="Enter any additional comments or questions..."></textarea>
            </div>
            
            <div class="form-group">
                <label for="password">Password (for testing):</label>
                <input type="password" id="password" name="password" placeholder="Enter a test password">
            </div>

            <div class="form-group" style="margin-top: 30px;">
                <button type="submit" id="submitBtn">🚀 Submit Form</button>
                <button type="reset" class="reset-btn">🔄 Reset Form</button>
            </div>
        </form>

        <div style="margin-top: 40px; padding: 20px; background-color: #f0f8ff; border-radius: 4px;">
            <h3>🧪 Testing Instructions for Cremote MCP Tools</h3>
            <p><strong>Form ID:</strong> <code>#test-form</code></p>
            <p><strong>Submit Button:</strong> <code>#submitBtn</code></p>
            
            <h4>Example MCP Tool Usage:</h4>
            <pre style="background: #f5f5f5; padding: 10px; border-radius: 4px; font-size: 14px;">
// Test bulk form filling
web_form_fill_bulk_cremotemcp:
  form_selector: "#test-form"
  fields:
    firstName: "John"
    lastName: "Doe"
    email: "john.doe@example.com"
    phone: "+1-555-123-4567"
    address: "123 Test Street"
    city: "Test City"
    state: "CA"
    zipCode: "12345"
    contactMethod: "email"
    interests: ["technology", "travel"]
    newsletter: "yes"
    comments: "This is a test submission"
            </pre>
        </div>
    </div>

    <script>
        // Add some JavaScript for enhanced testing
        document.getElementById('test-form').addEventListener('submit', function(e) {
            console.log('Form submission detected');
            console.log('Form data:', new FormData(this));
        });
        
        // Log when fields are filled (useful for debugging MCP tools)
        document.querySelectorAll('input, select, textarea').forEach(function(element) {
            element.addEventListener('change', function() {
                console.log('Field changed:', this.name, '=', this.value);
            });
        });
    </script>
</body>
</html>
