<?php $title = 'Edit Form: ' . htmlspecialchars($form->title); ?>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-white font-weight-bold">Edit: <?= htmlspecialchars($form->title) ?></h1>
</div>
<div class="row">
    <div class="col-lg-9">
        <div class="glass-card">
            <form method="POST" action="<?= $baseUrl ?>/forms/<?= $form->id ?>/update">
                <div class="row">
                    <div class="col-md-8 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Form Title</label>
                        <input type="text" name="title" class="form-control glass-input" value="<?= htmlspecialchars($form->title) ?>" required>
                    </div>
                    <div class="col-md-4">
                        <div class="custom-control custom-checkbox mt-4">
                            <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" value="1" <?= $form->is_active ? 'checked' : '' ?>>
                            <label class="custom-control-label" for="is_active" style="color: rgba(255,255,255,0.7);">Active</label>
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="requires_auth" name="requires_auth" value="1" <?= $form->requires_auth ? 'checked' : '' ?>>
                            <label class="custom-control-label" for="requires_auth" style="color: rgba(255,255,255,0.7);">Requires Login</label>
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="allow_public_submissions" name="allow_public_submissions" value="1" <?= $form->allow_public_submissions ? 'checked' : '' ?>>
                            <label class="custom-control-label" for="allow_public_submissions" style="color: rgba(255,255,255,0.7);">Allow Public</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label style="color: rgba(255,255,255,0.7);">Description</label>
                    <textarea name="description" class="form-control glass-input" rows="2"><?= htmlspecialchars($form->description ?? '') ?></textarea>
                </div>

                <h5 class="text-white font-weight-bold mt-4 mb-3"><i class="fas fa-list mr-2"></i>Form Fields</h5>
                <div id="fieldsContainer">
                    <?php if (!empty($form->fields)): ?>
                        <?php foreach ($form->fields as $i => $field): ?>
                        <div class="field-row glass-card-dark mb-3">
                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label style="color: rgba(255,255,255,0.7);">Field Label</label>
                                    <input type="text" name="field_label[]" class="form-control glass-input" value="<?= htmlspecialchars($field->label) ?>" required>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label style="color: rgba(255,255,255,0.7);">Field Type</label>
                                    <select name="field_type[]" class="form-control glass-input" onchange="toggleOptions(this)">
                                        <?php foreach (['text','textarea','email','phone','number','select','checkbox','radio','date','file','url'] as $ft): ?>
                                        <option value="<?= $ft ?>" <?= $field->field_type === $ft ? 'selected' : '' ?>><?= ucfirst($ft) ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-md-3 form-group">
                                    <div class="placeholder-field" style="display: <?= in_array($field->field_type, ['select','radio']) ? 'none' : 'block' ?>;">
                                        <label style="color: rgba(255,255,255,0.7);">Placeholder</label>
                                        <input type="text" name="field_placeholder[]" class="form-control glass-input" value="<?= htmlspecialchars($field->placeholder ?? '') ?>" placeholder="Placeholder text">
                                    </div>
                                    <div class="options-field" style="display: <?= in_array($field->field_type, ['select','radio']) ? 'block' : 'none' ?>;">
                                        <label style="color: rgba(255,255,255,0.7);">Options</label>
                                        <input type="text" name="field_options[]" class="form-control glass-input" value="<?= htmlspecialchars($field->options ?? '') ?>" placeholder="Option 1, Option 2, Option 3">
                                        <small style="color: rgba(255,255,255,0.4);">Comma-separated</small>
                                    </div>
                                </div>
                                <div class="col-md-2 form-group d-flex align-items-end">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="req_<?= $i ?>" name="field_required[<?= $i ?>]" value="1" <?= $field->is_required ? 'checked' : '' ?>>
                                        <label class="custom-control-label" for="req_<?= $i ?>" style="color: rgba(255,255,255,0.7);">Required</label>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-danger ml-2" onclick="this.closest('.field-row').remove()"><i class="fas fa-times"></i></button>
                                </div>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
                <button type="button" class="glass-btn mb-3" onclick="addField()"><i class="fas fa-plus mr-1"></i>Add Field</button>

                <div class="text-right mt-3">
                    <a href="<?= $baseUrl ?>/forms" class="glass-btn mr-2">Cancel</a>
                    <button type="submit" class="glass-btn glass-btn-primary"><i class="fas fa-save mr-1"></i>Update Form</button>
                </div>
            </form>
        </div>
    </div>

    <div class="col-lg-3">
        <div class="glass-card">
            <h6 class="font-weight-bold mb-3"><i class="fas fa-cube mr-1" style="color: #f6c23e;"></i>Field Templates</h6>
            <?php if (!empty($fieldTemplates)): ?>
                <div style="max-height: 400px; overflow-y: auto;">
                <?php foreach ($fieldTemplates as $ft): ?>
                <div class="mb-2 p-2" style="border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; cursor: pointer;" onclick="addFieldFromTemplate(<?= htmlspecialchars(json_encode($ft)) ?>)">
                    <small><span class="glass-badge" style="font-size: 0.6rem;"><?= htmlspecialchars(ucfirst($ft->field_type)) ?></span></small>
                    <div style="color: #fff; font-size: 0.85rem; font-weight: 600;"><?= htmlspecialchars($ft->name) ?></div>
                    <small style="color: rgba(255,255,255,0.4);"><?= htmlspecialchars($ft->label) ?></small>
                </div>
                <?php endforeach; ?>
                </div>
            <?php else: ?>
                <p style="color: rgba(255,255,255,0.4); font-size: 0.85rem;">No field templates yet. Create them in the Forms section.</p>
            <?php endif; ?>
            <div class="mt-2 text-center">
                <a href="<?= $baseUrl ?>/forms/field-templates" class="glass-btn btn-sm" style="font-size: 0.75rem;"><i class="fas fa-cog mr-1"></i>Manage Templates</a>
            </div>
        </div>
    </div>
</div>
<script>
let fieldIndex = 999;

function toggleOptions(sel) {
    var row = sel.closest('.field-row');
    if (!row) return;
    var ph = row.querySelector('.placeholder-field');
    var opt = row.querySelector('.options-field');
    var val = sel.value;
    if (val === 'select' || val === 'radio') {
        if (ph) ph.style.display = 'none';
        if (opt) opt.style.display = 'block';
    } else {
        if (ph) ph.style.display = 'block';
        if (opt) opt.style.display = 'none';
    }
}

function addField() {
    const container = document.getElementById('fieldsContainer');
    const i = fieldIndex++;
    const div = document.createElement('div');
    div.className = 'field-row glass-card-dark mb-3';
    div.innerHTML = `
        <div class="row">
            <div class="col-md-4 form-group">
                <label style="color: rgba(255,255,255,0.7);">Field Label</label>
                <input type="text" name="field_label[]" class="form-control glass-input" placeholder="Field label" required>
            </div>
            <div class="col-md-3 form-group">
                <label style="color: rgba(255,255,255,0.7);">Field Type</label>
                <select name="field_type[]" class="form-control glass-input" onchange="toggleOptions(this)">
                    <option value="text">Text</option>
                    <option value="textarea">Textarea</option>
                    <option value="email">Email</option>
                    <option value="number">Number</option>
                    <option value="select">Select</option>
                    <option value="checkbox">Checkbox</option>
                    <option value="radio">Radio</option>
                    <option value="date">Date</option>
                    <option value="file">File</option>
                    <option value="url">URL</option>
                </select>
            </div>
            <div class="col-md-3 form-group">
                <div class="placeholder-field">
                    <label style="color: rgba(255,255,255,0.7);">Placeholder</label>
                    <input type="text" name="field_placeholder[]" class="form-control glass-input" placeholder="Placeholder text">
                </div>
                <div class="options-field" style="display: none;">
                    <label style="color: rgba(255,255,255,0.7);">Options</label>
                    <input type="text" name="field_options[]" class="form-control glass-input" placeholder="Option 1, Option 2, Option 3">
                    <small style="color: rgba(255,255,255,0.4);">Comma-separated</small>
                </div>
            </div>
            <div class="col-md-2 form-group d-flex align-items-end">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="req_n${i}" name="field_required[${i}]" value="1">
                    <label class="custom-control-label" for="req_n${i}" style="color: rgba(255,255,255,0.7);">Required</label>
                </div>
                <button type="button" class="btn btn-sm btn-danger ml-2" onclick="this.closest('.field-row').remove()"><i class="fas fa-times"></i></button>
            </div>
        </div>
    `;
    container.appendChild(div);
}

function addFieldFromTemplate(ft) {
    const container = document.getElementById('fieldsContainer');
    const i = fieldIndex++;
    var showOpt = (ft.field_type === 'select' || ft.field_type === 'radio');
    const div = document.createElement('div');
    div.className = 'field-row glass-card-dark mb-3';
    div.innerHTML = `
        <div class="row">
            <div class="col-md-4 form-group">
                <label style="color: rgba(255,255,255,0.7);">Field Label</label>
                <input type="text" name="field_label[]" class="form-control glass-input" value="${$('<span>').text(ft.label).html()}" required>
            </div>
            <div class="col-md-3 form-group">
                <label style="color: rgba(255,255,255,0.7);">Field Type</label>
                <select name="field_type[]" class="form-control glass-input" onchange="toggleOptions(this)">
                    ${['text','textarea','email','number','select','checkbox','radio','date','file','url'].map(t => '<option value="' + t + '"' + (ft.field_type === t ? ' selected' : '') + '>' + t.charAt(0).toUpperCase() + t.slice(1) + '</option>').join('')}
                </select>
            </div>
            <div class="col-md-3 form-group">
                <div class="placeholder-field" style="display: ${showOpt ? 'none' : 'block'};">
                    <label style="color: rgba(255,255,255,0.7);">Placeholder</label>
                    <input type="text" name="field_placeholder[]" class="form-control glass-input" value="${$('<span>').text(ft.placeholder || '').html()}" placeholder="Placeholder text">
                </div>
                <div class="options-field" style="display: ${showOpt ? 'block' : 'none'};">
                    <label style="color: rgba(255,255,255,0.7);">Options</label>
                    <input type="text" name="field_options[]" class="form-control glass-input" value="${$('<span>').text(ft.options || '').html()}" placeholder="Option 1, Option 2, Option 3">
                    <small style="color: rgba(255,255,255,0.4);">Comma-separated</small>
                </div>
            </div>
            <div class="col-md-2 form-group d-flex align-items-end">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="req_ft${i}" name="field_required[${i}]" value="1" ${ft.is_required ? 'checked' : ''}>
                    <label class="custom-control-label" for="req_ft${i}" style="color: rgba(255,255,255,0.7);">Required</label>
                </div>
                <button type="button" class="btn btn-sm btn-danger ml-2" onclick="this.closest('.field-row').remove()"><i class="fas fa-times"></i></button>
            </div>
        </div>
    `;
    container.appendChild(div);
}
</script>
