<?php $title = 'Profile Fields - Membership Form Builder'; ?>
<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-layer-group mr-2"></i>Profile Fields Builder</h1>
    <a href="<?= $baseUrl ?>/profile-fields/create" class="glass-btn glass-btn-primary"><i class="fas fa-plus mr-1"></i>Add New Field</a>
</div>

<div class="glass-card">
    <div class="mb-3" style="border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 0.8rem;">
        <h5 class="font-weight-bold mb-0" style="color: #4e73df;">Membership Profile Fields</h5>
        <small style="color: rgba(255,255,255,0.4);">Drag and drop to reorder. These fields appear on the membership profile form.</small>
    </div>
    <?php if (empty($fields)): ?>
    <div class="text-center py-5" style="color: rgba(255,255,255,0.4);">
        <i class="fas fa-inbox" style="font-size: 3rem; margin-bottom: 1rem; display: block;"></i>
        No custom profile fields yet. <a href="<?= $baseUrl ?>/profile-fields/create" style="color: #4e73df;">Add your first field</a>
    </div>
    <?php else: ?>
    <div class="glass-table">
        <table class="table" id="fieldsTable">
            <thead><tr><th style="width: 40px;"></th><th>Field Label</th><th>Type</th><th>Required</th><th>Active</th><th>In Directory</th><th>Actions</th></tr></thead>
            <tbody id="fieldList">
                <?php foreach ($fields as $f): ?>
                <tr data-id="<?= $f->id ?>">
                    <td class="drag-handle" style="cursor: grab; color: rgba(255,255,255,0.3);"><i class="fas fa-grip-vertical"></i></td>
                    <td><strong><?= htmlspecialchars($f->label) ?></strong><br><small style="color: rgba(255,255,255,0.4);"><?= htmlspecialchars($f->field_name) ?></small></td>
                    <td><span class="glass-badge" style="background: rgba(78,115,223,0.15); color: #4e73df;"><?= htmlspecialchars($f->field_type) ?></span></td>
                    <td><?= $f->is_required ? '<span style="color: #1cc88a;"><i class="fas fa-check-circle"></i></span>' : '<span style="color: rgba(255,255,255,0.3);"><i class="fas fa-times-circle"></i></span>' ?></td>
                    <td><?= $f->is_active ? '<span style="color: #1cc88a;"><i class="fas fa-check-circle"></i></span>' : '<span style="color: rgba(255,255,255,0.3);"><i class="fas fa-times-circle"></i></span>' ?></td>
                    <td><?= $f->show_in_directory ? '<span style="color: #1cc88a;"><i class="fas fa-check-circle"></i></span>' : '<span style="color: rgba(255,255,255,0.3);"><i class="fas fa-times-circle"></i></span>' ?></td>
                    <td>
                        <a href="<?= $baseUrl ?>/profile-fields/<?= $f->id ?>/edit" class="glass-btn btn-sm"><i class="fas fa-edit"></i></a>
                        <form method="POST" action="<?= $baseUrl ?>/profile-fields/<?= $f->id ?>/delete" style="display:inline;" onsubmit="return confirm('Delete this field and all its values?')">
                            <button type="submit" class="glass-btn btn-sm" style="border-color: rgba(231,74,59,0.3); color: #e74a3b;"><i class="fas fa-trash"></i></button>
                        </form>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php endif; ?>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.css">
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
$(function() {
    var list = document.getElementById('fieldList');
    if (list) {
        Sortable.create(list, {
            handle: '.drag-handle',
            animation: 150,
            ghostClass: 'sortable-ghost',
            dragClass: 'sortable-drag',
            onEnd: function() {
                var ids = [];
                $('#fieldList tr').each(function() {
                    ids.push($(this).data('id'));
                });
                $.post('<?= $baseUrl ?>/profile-fields/reorder', { ids: ids }, function(res) {
                    if (!res.success) alert('Error saving order');
                }, 'json');
            }
        });
    }
});
</script>
<style>
.sortable-ghost { opacity: 0.4; background: rgba(78,115,223,0.15); }
.sortable-drag { opacity: 0.9; }
.drag-handle:hover { color: rgba(255,255,255,0.7) !important; }
</style>
