<?php $isEdit = !is_null($field); $title = $isEdit ? 'Edit Profile Field' : 'Add New Profile Field'; ?>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-white font-weight-bold"><i class="fas fa-<?= $isEdit ? 'edit' : 'plus' ?> mr-2"></i><?= $title ?></h1>
    <a href="<?= $baseUrl ?>/profile-fields" class="glass-btn"><i class="fas fa-arrow-left mr-1"></i>Back to Fields</a>
</div>

<div class="glass-card">
    <form method="POST" action="<?= $baseUrl ?>/profile-fields/<?= $isEdit ? $field->id . '/update' : 'store' ?>">
        <div class="row">
            <div class="col-md-6 form-group">
                <label style="color: rgba(255,255,255,0.7);">Field Label *</label>
                <input type="text" name="label" class="form-control glass-input" value="<?= $isEdit ? htmlspecialchars($field->label) : '' ?>" required>
                <small style="color: rgba(255,255,255,0.4);">The display name shown to members on the profile form.</small>
            </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" id="fieldType" required>
                    <option value="text" <?= $isEdit && $field->field_type === 'text' ? 'selected' : '' ?>>Text</option>
                    <option value="textarea" <?= $isEdit && $field->field_type === 'textarea' ? 'selected' : '' ?>>Textarea</option>
                    <option value="email" <?= $isEdit && $field->field_type === 'email' ? 'selected' : '' ?>>Email</option>
                    <option value="number" <?= $isEdit && $field->field_type === 'number' ? 'selected' : '' ?>>Number</option>
                    <option value="select" <?= $isEdit && $field->field_type === 'select' ? 'selected' : '' ?>>Dropdown Select</option>
                    <option value="radio" <?= $isEdit && $field->field_type === 'radio' ? 'selected' : '' ?>>Radio Buttons</option>
                    <option value="checkbox" <?= $isEdit && $field->field_type === 'checkbox' ? 'selected' : '' ?>>Checkbox</option>
                    <option value="date" <?= $isEdit && $field->field_type === 'date' ? 'selected' : '' ?>>Date</option>
                    <option value="url" <?= $isEdit && $field->field_type === 'url' ? 'selected' : '' ?>>URL / Website</option>
                </select>
            </div>
            <div class="col-md-3 form-group">
                <label style="color: rgba(255,255,255,0.7);">Placeholder</label>
                <input type="text" name="placeholder" class="form-control glass-input" value="<?= $isEdit ? htmlspecialchars($field->placeholder ?? '') : '' ?>">
            </div>
        </div>

        <div class="form-group" id="optionsGroup" style="<?= ($isEdit && in_array($field->field_type, ['select', 'radio'])) ? '' : 'display:none;' ?>">
            <label style="color: rgba(255,255,255,0.7);">Options</label>
            <textarea name="options" class="form-control glass-input" rows="3"><?= $isEdit ? htmlspecialchars($field->options ?? '') : '' ?></textarea>
            <small style="color: rgba(255,255,255,0.4);">One option per line.</small>
        </div>

        <div class="form-group">
            <label style="color: rgba(255,255,255,0.7);">Help Text</label>
            <input type="text" name="help_text" class="form-control glass-input" value="<?= $isEdit ? htmlspecialchars($field->help_text ?? '') : '' ?>">
            <small style="color: rgba(255,255,255,0.4);">Shown below the field to guide the member.</small>
        </div>

        <div class="row mb-3">
            <div class="col-md-4">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" name="is_required" id="isRequired" value="1" <?= $isEdit && $field->is_required ? 'checked' : '' ?>>
                    <label class="custom-control-label" for="isRequired" style="color: rgba(255,255,255,0.7);">Required field</label>
                </div>
            </div>
            <div class="col-md-4">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" name="is_active" id="isActive" value="1" <?= !$isEdit || $field->is_active ? 'checked' : '' ?>>
                    <label class="custom-control-label" for="isActive" style="color: rgba(255,255,255,0.7);">Active (shown on form)</label>
                </div>
            </div>
            <div class="col-md-4">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" name="show_in_directory" id="showInDirectory" value="1" <?= $isEdit && $field->show_in_directory ? 'checked' : '' ?>>
                    <label class="custom-control-label" for="showInDirectory" style="color: rgba(255,255,255,0.7);">Show in member directory</label>
                </div>
            </div>
        </div>

        <div class="text-right">
            <a href="<?= $baseUrl ?>/profile-fields" class="glass-btn mr-2">Cancel</a>
            <button type="submit" class="glass-btn glass-btn-primary"><i class="fas fa-save mr-1"></i><?= $isEdit ? 'Update' : 'Create' ?> Field</button>
        </div>
    </form>
</div>

<script>
document.getElementById('fieldType')?.addEventListener('change', function() {
    var g = document.getElementById('optionsGroup');
    g.style.display = (this.value === 'select' || this.value === 'radio') ? '' : 'none';
});
</script>
