Sindbad~EG File Manager

<?php
require_once '../../config/config.php';
checkLogin();

if (!isSuperuser() && !in_array(getAccessLevel(), ['area', 'district', 'assembly'])) {
    redirect('../../dashboard.php');
}

$pageTitle = "Event Forms - " . APP_NAME;
$db = Database::getInstance()->getConnection();
$success = '';
$error = '';

// Handle form submissions
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['create_form'])) {
        try {
            $formFields = [];
            if (isset($_POST['field_names'])) {
                foreach ($_POST['field_names'] as $index => $fieldName) {
                    if (!empty($fieldName)) {
                        $formFields[] = [
                            'name' => $fieldName,
                            'type' => $_POST['field_types'][$index],
                            'required' => isset($_POST['field_required'][$index]),
                            'label' => $_POST['field_labels'][$index] ?? $fieldName
                        ];
                    }
                }
            }
            
            $stmt = $db->prepare("
                INSERT INTO event_forms (event_id, form_name, form_fields) 
                VALUES (:event_id, :form_name, :form_fields)
            ");
            
            $result = $stmt->execute([
                'event_id' => $_POST['event_id'],
                'form_name' => $_POST['form_name'],
                'form_fields' => json_encode($formFields)
            ]);
            
            if ($result) {
                $success = "Event form created successfully!";
            } else {
                $error = "Failed to create event form";
            }
            
        } catch (Exception $e) {
            $error = "Error creating form: " . $e->getMessage();
        }
    }
}

// Get events and forms
$events = $db->query("SELECT * FROM events WHERE is_active = 1 ORDER BY start_date ASC")->fetchAll();
$forms = $db->query("
    SELECT ef.*, e.name as event_name 
    FROM event_forms ef 
    LEFT JOIN events e ON ef.event_id = e.id 
    ORDER BY ef.created_at DESC
")->fetchAll();

include '../../includes/header.php';
include '../../includes/sidebar.php';
?>

<main class="flex-1 md:ml-64 mt-16">
<div class="container mx-auto px-4 py-8">
    <div class="max-w-6xl mx-auto">
        <h1 class="text-3xl font-bold text-gray-800 mb-6">
            <i class="fas fa-wpforms mr-2 text-blue-500"></i>Event Forms Management
        </h1>
        
        <?php if ($success): ?>
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg mb-6">
                <?php echo $success; ?>
            </div>
        <?php endif; ?>
        
        <?php if ($error): ?>
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mb-6">
                <?php echo $error; ?>
            </div>
        <?php endif; ?>
        
        <!-- Create Form -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <h3 class="text-lg font-semibold mb-4">Create Registration Form</h3>
            <form method="POST" id="formBuilder">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Event</label>
                        <select name="event_id" required class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                            <option value="">Select Event...</option>
                            <?php foreach ($events as $event): ?>
                                <option value="<?php echo $event['id']; ?>">
                                    <?php echo htmlspecialchars($event['name']); ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Form Name</label>
                        <input type="text" name="form_name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                    </div>
                </div>
                
                <div class="mb-6">
                    <div class="flex justify-between items-center mb-4">
                        <h4 class="font-medium">Form Fields</h4>
                        <button type="button" onclick="addFormField()" class="bg-blue-500 text-white px-4 py-2 rounded-lg">
                            Add Field
                        </button>
                    </div>
                    <div id="formFields">
                        <!-- Default fields -->
                        <div class="form-field grid grid-cols-12 gap-2 mb-2">
                            <input type="text" name="field_names[]" value="first_name" placeholder="Field Name" class="col-span-3 px-3 py-2 border rounded" readonly>
                            <input type="text" name="field_labels[]" value="First Name" placeholder="Label" class="col-span-3 px-3 py-2 border rounded">
                            <select name="field_types[]" class="col-span-2 px-3 py-2 border rounded">
                                <option value="text" selected>Text</option>
                            </select>
                            <label class="col-span-2 flex items-center"><input type="checkbox" name="field_required[0]" checked> Required</label>
                            <button type="button" class="col-span-2 text-red-600" disabled>Required Field</button>
                        </div>
                        <div class="form-field grid grid-cols-12 gap-2 mb-2">
                            <input type="text" name="field_names[]" value="last_name" placeholder="Field Name" class="col-span-3 px-3 py-2 border rounded" readonly>
                            <input type="text" name="field_labels[]" value="Last Name" placeholder="Label" class="col-span-3 px-3 py-2 border rounded">
                            <select name="field_types[]" class="col-span-2 px-3 py-2 border rounded">
                                <option value="text" selected>Text</option>
                            </select>
                            <label class="col-span-2 flex items-center"><input type="checkbox" name="field_required[1]" checked> Required</label>
                            <button type="button" class="col-span-2 text-red-600" disabled>Required Field</button>
                        </div>
                        <div class="form-field grid grid-cols-12 gap-2 mb-2">
                            <input type="text" name="field_names[]" value="email" placeholder="Field Name" class="col-span-3 px-3 py-2 border rounded" readonly>
                            <input type="text" name="field_labels[]" value="Email" placeholder="Label" class="col-span-3 px-3 py-2 border rounded">
                            <select name="field_types[]" class="col-span-2 px-3 py-2 border rounded">
                                <option value="email" selected>Email</option>
                            </select>
                            <label class="col-span-2 flex items-center"><input type="checkbox" name="field_required[2]" checked> Required</label>
                            <button type="button" class="col-span-2 text-red-600" disabled>Required Field</button>
                        </div>
                    </div>
                </div>
                
                <button type="submit" name="create_form" class="bg-green-500 text-white px-6 py-2 rounded-lg">
                    Create Form
                </button>
            </form>
        </div>
        
        <!-- Existing Forms -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h3 class="text-lg font-semibold mb-4">Existing Forms</h3>
            <div class="overflow-x-auto">
                <table class="min-w-full border border-gray-200 rounded-lg">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Form Name</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Event</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Fields</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Created</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        <?php foreach ($forms as $form): ?>
                            <tr>
                                <td class="px-6 py-4 font-medium"><?php echo htmlspecialchars($form['form_name']); ?></td>
                                <td class="px-6 py-4"><?php echo htmlspecialchars($form['event_name']); ?></td>
                                <td class="px-6 py-4"><?php echo count(json_decode($form['form_fields'], true)); ?> fields</td>
                                <td class="px-6 py-4">
                                    <span class="px-2 py-1 text-xs rounded-full <?php echo $form['is_active'] ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'; ?>">
                                        <?php echo $form['is_active'] ? 'Active' : 'Inactive'; ?>
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-500"><?php echo date('M j, Y', strtotime($form['created_at'])); ?></td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</main>

<script>
let fieldIndex = 3;

function addFormField() {
    const fieldsContainer = document.getElementById('formFields');
    const fieldHtml = `
        <div class="form-field grid grid-cols-12 gap-2 mb-2">
            <input type="text" name="field_names[]" placeholder="Field Name" class="col-span-3 px-3 py-2 border rounded">
            <input type="text" name="field_labels[]" placeholder="Label" class="col-span-3 px-3 py-2 border rounded">
            <select name="field_types[]" class="col-span-2 px-3 py-2 border rounded">
                <option value="text">Text</option>
                <option value="email">Email</option>
                <option value="tel">Phone</option>
                <option value="number">Number</option>
                <option value="date">Date</option>
                <option value="textarea">Textarea</option>
                <option value="select">Select</option>
                <option value="checkbox">Checkbox</option>
            </select>
            <label class="col-span-2 flex items-center"><input type="checkbox" name="field_required[${fieldIndex}]"> Required</label>
            <button type="button" onclick="removeFormField(this)" class="col-span-2 text-red-600 hover:text-red-800">Remove</button>
        </div>
    `;
    fieldsContainer.insertAdjacentHTML('beforeend', fieldHtml);
    fieldIndex++;
}

function removeFormField(button) {
    button.closest('.form-field').remove();
}
</script>

<?php include '../../includes/footer.php'; ?>