<?php
$errors = session()->getFlashdata('errors') ?? [];
$old = session()->getFlashdata('_ci_old_input') ?? [];
$oldPost = $old['post'] ?? [];

function cfVal($old, $key, $default = '') {
    return $old[$key] ?? $default;
}
?>

<div class="space-y-6 max-w-7xl">
    <div class="flex items-center gap-3">
        <div class="w-11 h-11 rounded-2xl bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center shadow-md">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5.5 h-5.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
            </svg>
        </div>
        <div>
            <h3 class="text-xl font-bold text-slate-800">Lead Custom Fields</h3>
            <p class="text-sm text-slate-500">Define additional fields for lead records</p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-1">
            <div class="glass rounded-2xl p-6 shadow-sm border border-slate-200/60 sticky top-6">
                <div class="flex items-center gap-3 mb-5">
                    <div class="w-9 h-9 rounded-xl bg-purple-100 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                        </svg>
                    </div>
                    <div>
                        <h4 class="text-sm font-bold text-slate-800">Add Field</h4>
                        <p class="text-xs text-slate-500">Create a new custom field</p>
                    </div>
                </div>

                <?php if (!empty($errors)): ?>
                    <div class="mb-5 rounded-xl border border-red-200/70 bg-red-50/50 p-4">
                        <ul class="list-disc list-inside text-xs text-red-700 space-y-0.5">
                            <?php foreach ($errors as $e): ?>
                                <li><?= esc($e) ?></li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                <?php endif; ?>

                <?= form_open('/admin/lead-custom-fields', ['class' => 'space-y-4']) ?>
                <?= csrf_field() ?>

                <div>
                    <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">Field Name <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                            </svg>
                        </span>
                        <input type="text" name="field_name" value="<?= esc(cfVal($oldPost, 'field_name')) ?>" class="w-full pl-11 pr-4 py-2.5 rounded-xl bg-white border border-slate-200 text-sm text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition font-mono" placeholder="e.g. annual_income">
                    </div>
                    <p class="mt-1 text-[11px] text-slate-400">Machine name: lowercase, underscores, no spaces</p>
                    <?php if (isset($errors['field_name'])): ?>
                        <p class="mt-1 text-xs text-red-600"><?= esc($errors['field_name']) ?></p>
                    <?php endif; ?>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">Field Label <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                            </svg>
                        </span>
                        <input type="text" name="field_label" value="<?= esc(cfVal($oldPost, 'field_label')) ?>" class="w-full pl-11 pr-4 py-2.5 rounded-xl bg-white border border-slate-200 text-sm text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition" placeholder="e.g. Annual Income">
                    </div>
                    <?php if (isset($errors['field_label'])): ?>
                        <p class="mt-1 text-xs text-red-600"><?= esc($errors['field_label']) ?></p>
                    <?php endif; ?>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">Field Type <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7" />
                            </svg>
                        </span>
                        <select name="field_type" class="appearance-none w-full pl-11 pr-10 py-2.5 rounded-xl bg-white border border-slate-200 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition">
                            <option value="text" <?= (cfVal($oldPost, 'field_type') === 'text') ? 'selected' : '' ?>>Text</option>
                            <option value="textarea" <?= (cfVal($oldPost, 'field_type') === 'textarea') ? 'selected' : '' ?>>Textarea</option>
                            <option value="select" <?= (cfVal($oldPost, 'field_type') === 'select') ? 'selected' : '' ?>>Select (Dropdown)</option>
                            <option value="number" <?= (cfVal($oldPost, 'field_type') === 'number') ? 'selected' : '' ?>>Number</option>
                            <option value="email" <?= (cfVal($oldPost, 'field_type') === 'email') ? 'selected' : '' ?>>Email</option>
                            <option value="date" <?= (cfVal($oldPost, 'field_type') === 'date') ? 'selected' : '' ?>>Date</option>
                        </select>
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400 absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                        </svg>
                    </div>
                    <?php if (isset($errors['field_type'])): ?>
                        <p class="mt-1 text-xs text-red-600"><?= esc($errors['field_type']) ?></p>
                    <?php endif; ?>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">Options (Select only)</label>
                    <textarea name="options" rows="3" class="w-full px-4 py-2.5 rounded-xl bg-white border border-slate-200 text-sm text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition resize-y" placeholder="Option 1, Option 2, Option 3"><?= esc(cfVal($oldPost, 'options')) ?></textarea>
                    <p class="mt-1 text-[11px] text-slate-400">Comma-separated values for dropdown options</p>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">Sort Order</label>
                    <div class="relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
                            </svg>
                        </span>
                        <input type="number" name="sort_order" value="<?= esc(cfVal($oldPost, 'sort_order', '0')) ?>" class="w-full pl-11 pr-4 py-2.5 rounded-xl bg-white border border-slate-200 text-sm text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition" placeholder="0">
                    </div>
                </div>

                <div class="flex items-center justify-between p-3 rounded-xl bg-slate-50/50 border border-slate-100">
                    <div>
                        <p class="text-xs font-semibold text-slate-700">Required Field</p>
                        <p class="text-[11px] text-slate-400 mt-0.5">Must be filled in forms</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="required" value="1" class="sr-only peer" <?= (!empty(cfVal($oldPost, 'required'))) ? 'checked' : '' ?>>
                        <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
                    </label>
                </div>

                <button type="submit" class="w-full inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-gradient-to-r from-purple-600 to-pink-600 text-white text-sm font-semibold rounded-xl shadow-md hover:shadow-lg hover:-translate-y-0.5 transition-all">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                    </svg>
                    Add Field
                </button>

                </form>
            </div>
        </div>

        <div class="lg:col-span-2">
            <div class="glass rounded-2xl shadow-sm border border-slate-200/60 overflow-hidden">
                <div class="px-6 py-4 bg-slate-50/50 border-b border-slate-200/60 flex items-center justify-between">
                    <div>
                        <h4 class="text-sm font-bold text-slate-800">Fields List</h4>
                        <p class="text-xs text-slate-500"><?= count($fields) ?> field<?= count($fields) !== 1 ? 's' : '' ?> defined</p>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="bg-white/30 border-b border-slate-100">
                                <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Label</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Machine Name</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Type</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Options</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider w-24">Order</th>
                                <th class="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider w-32">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            <?php if (empty($fields)): ?>
                                <tr>
                                    <td colspan="6" class="px-6 py-16 text-center">
                                        <div class="flex flex-col items-center gap-3">
                                            <div class="w-14 h-14 rounded-2xl bg-slate-100 flex items-center justify-center">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                                                </svg>
                                            </div>
                                            <p class="text-sm font-medium text-slate-600">No custom fields yet</p>
                                            <p class="text-xs text-slate-400">Add your first custom field using the form</p>
                                        </div>
                                    </td>
                                </tr>
                            <?php else: ?>
                                <?php foreach ($fields as $f): ?>
                                    <?php
                                    $typeBadge = [
                                        'text'     => ['bg' => 'bg-blue-100', 'text' => 'text-blue-700', 'label' => 'Text'],
                                        'textarea' => ['bg' => 'bg-indigo-100', 'text' => 'text-indigo-700', 'label' => 'Textarea'],
                                        'select'   => ['bg' => 'bg-amber-100', 'text' => 'text-amber-700', 'label' => 'Select'],
                                        'number'   => ['bg' => 'bg-emerald-100', 'text' => 'text-emerald-700', 'label' => 'Number'],
                                        'email'    => ['bg' => 'bg-cyan-100', 'text' => 'text-cyan-700', 'label' => 'Email'],
                                        'date'     => ['bg' => 'bg-rose-100', 'text' => 'text-rose-700', 'label' => 'Date'],
                                    ];
                                    $type = $typeBadge[$f['field_type']] ?? ['bg' => 'bg-slate-100', 'text' => 'text-slate-700', 'label' => $f['field_type']];
                                    $options = !empty($f['options_json']) ? json_decode($f['options_json'], true) : [];
                                    $optionsText = !empty($options) ? implode(', ', $options) : '';
                                    ?>
                                    <tr class="hover:bg-slate-50/40 transition">
                                        <td class="px-6 py-4">
                                            <div class="flex items-center gap-2">
                                                <span class="text-sm font-semibold text-slate-800"><?= esc($f['field_label']) ?></span>
                                                <?php if (!empty($f['required'])): ?>
                                                    <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-red-100 text-red-600 text-[10px] font-bold" title="Required">
                                                        *
                                                    </span>
                                                <?php endif; ?>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4">
                                            <code class="inline-flex items-center px-2 py-1 rounded-lg bg-slate-100 font-mono text-[11px] text-slate-600">
                                                <?= esc($f['field_name']) ?>
                                            </code>
                                        </td>
                                        <td class="px-6 py-4">
                                            <span class="inline-flex items-center px-2.5 py-1 rounded-lg text-[11px] font-semibold <?= $type['bg'] ?> <?= $type['text'] ?>">
                                                <?= $type['label'] ?>
                                            </span>
                                        </td>
                                        <td class="px-6 py-4">
                                            <?php if (!empty($options)): ?>
                                                <div class="flex flex-wrap gap-1">
                                                    <?php foreach (array_slice($options, 0, 3) as $opt): ?>
                                                        <span class="inline-flex items-center px-2 py-0.5 rounded-md bg-slate-100 text-[10px] font-medium text-slate-600 border border-slate-200">
                                                            <?= esc($opt) ?>
                                                        </span>
                                                    <?php endforeach; ?>
                                                    <?php if (count($options) > 3): ?>
                                                        <span class="inline-flex items-center px-2 py-0.5 rounded-md bg-slate-50 text-[10px] font-medium text-slate-500 border border-slate-200/60">
                                                            +<?= count($options) - 3 ?>
                                                        </span>
                                                    <?php endif; ?>
                                                </div>
                                            <?php else: ?>
                                                <span class="text-[11px] text-slate-300">—</span>
                                            <?php endif; ?>
                                        </td>
                                        <td class="px-6 py-4">
                                            <span class="inline-flex items-center justify-center min-w-[2rem] h-8 px-2 rounded-lg bg-slate-100 text-xs font-semibold text-slate-700">
                                                <?= esc($f['sort_order'] ?? 0) ?>
                                            </span>
                                        </td>
                                        <td class="px-6 py-4">
                                            <div class="flex items-center justify-end gap-1">
                                                <button type="button" class="edit-field-btn p-2 rounded-lg text-purple-600 hover:bg-purple-50 transition"
                                                    data-id="<?= (int) $f['id'] ?>"
                                                    data-field-name="<?= esc($f['field_name']) ?>"
                                                    data-field-label="<?= esc($f['field_label']) ?>"
                                                    data-field-type="<?= esc($f['field_type']) ?>"
                                                    data-options="<?= esc($optionsText) ?>"
                                                    data-sort-order="<?= esc($f['sort_order'] ?? 0) ?>"
                                                    data-required="<?= !empty($f['required']) ? '1' : '0' ?>"
                                                    title="Edit">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                                    </svg>
                                                </button>
                                                <form method="get" action="<?= site_url('/admin/lead-custom-fields/delete/' . (int) $f['id']) ?>" onsubmit="return confirm('Delete this custom field? All saved values for this field will also be deleted.');" class="inline">
                                                    <button type="submit" class="p-2 rounded-lg text-red-500 hover:bg-red-50 transition" title="Delete">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                                        </svg>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="editFieldModal" class="fixed inset-0 z-50 hidden items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm">
    <div class="glass w-full max-w-lg rounded-2xl shadow-2xl border border-slate-200/60 p-6 fade-in max-h-[90vh] overflow-y-auto scrollbar-thin">
        <div class="flex items-center justify-between mb-5">
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 rounded-xl bg-purple-100 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                </div>
                <div>
                    <h4 class="text-sm font-bold text-slate-800">Edit Custom Field</h4>
                    <p class="text-xs text-slate-500">Update field configuration</p>
                </div>
            </div>
            <button type="button" id="closeFieldModal" class="p-2 rounded-lg hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <?= form_open('', ['id' => 'editFieldForm', 'class' => 'space-y-4']) ?>
        <?= csrf_field() ?>

        <div>
            <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">Field Name <span class="text-red-500">*</span></label>
            <div class="relative">
                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                    </svg>
                </span>
                <input type="text" id="edit_field_name" name="field_name" class="w-full pl-11 pr-4 py-2.5 rounded-xl bg-white border border-slate-200 text-sm text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition font-mono" required>
            </div>
            <p class="mt-1 text-[11px] text-slate-400">Machine name: lowercase, underscores, no spaces</p>
        </div>

        <div>
            <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">Field Label <span class="text-red-500">*</span></label>
            <div class="relative">
                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                    </svg>
                </span>
                <input type="text" id="edit_field_label" name="field_label" class="w-full pl-11 pr-4 py-2.5 rounded-xl bg-white border border-slate-200 text-sm text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition" required>
            </div>
        </div>

        <div>
            <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">Field Type <span class="text-red-500">*</span></label>
            <div class="relative">
                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7" />
                    </svg>
                </span>
                <select id="edit_field_type" name="field_type" class="appearance-none w-full pl-11 pr-10 py-2.5 rounded-xl bg-white border border-slate-200 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition">
                    <option value="text">Text</option>
                    <option value="textarea">Textarea</option>
                    <option value="select">Select (Dropdown)</option>
                    <option value="number">Number</option>
                    <option value="email">Email</option>
                    <option value="date">Date</option>
                </select>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400 absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                </svg>
            </div>
        </div>

        <div>
            <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">Options (Select only)</label>
            <textarea id="edit_options" name="options" rows="3" class="w-full px-4 py-2.5 rounded-xl bg-white border border-slate-200 text-sm text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition resize-y" placeholder="Option 1, Option 2, Option 3"></textarea>
            <p class="mt-1 text-[11px] text-slate-400">Comma-separated values for dropdown options</p>
        </div>

        <div>
            <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">Sort Order</label>
            <div class="relative">
                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
                    </svg>
                </span>
                <input type="number" id="edit_sort_order" name="sort_order" class="w-full pl-11 pr-4 py-2.5 rounded-xl bg-white border border-slate-200 text-sm text-slate-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition" placeholder="0">
            </div>
        </div>

        <div class="flex items-center justify-between p-3 rounded-xl bg-slate-50/50 border border-slate-100">
            <div>
                <p class="text-xs font-semibold text-slate-700">Required Field</p>
                <p class="text-[11px] text-slate-400 mt-0.5">Must be filled in forms</p>
            </div>
            <label class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" id="edit_required" name="required" value="1" class="sr-only peer">
                <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
            </label>
        </div>

        <div class="flex items-center justify-end gap-3 pt-2">
            <button type="button" id="cancelFieldBtn" class="px-4 py-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 text-sm font-semibold transition">
                Cancel
            </button>
            <button type="submit" class="inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-gradient-to-r from-purple-600 to-pink-600 text-white text-sm font-semibold rounded-xl shadow-md hover:shadow-lg transition-all">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                </svg>
                Save Changes
            </button>
        </div>

        </form>
    </div>
</div>

<script>
(function () {
    const modal = document.getElementById('editFieldModal');
    const form = document.getElementById('editFieldForm');
    const fName = document.getElementById('edit_field_name');
    const fLabel = document.getElementById('edit_field_label');
    const fType = document.getElementById('edit_field_type');
    const fOptions = document.getElementById('edit_options');
    const fSortOrder = document.getElementById('edit_sort_order');
    const fRequired = document.getElementById('edit_required');
    const closeBtn = document.getElementById('closeFieldModal');
    const cancelBtn = document.getElementById('cancelFieldBtn');

    function openModal(data) {
        fName.value = data.fieldName;
        fLabel.value = data.fieldLabel;
        fType.value = data.fieldType;
        fOptions.value = data.options;
        fSortOrder.value = data.sortOrder;
        fRequired.checked = data.required === '1' || data.required === true || data.required === 1;
        form.action = <?= json_encode(site_url('/admin/lead-custom-fields/update/')) ?> + data.id;
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        setTimeout(() => fLabel.focus(), 50);
    }

    function closeModal() {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    document.querySelectorAll('.edit-field-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            openModal({
                id: btn.getAttribute('data-id'),
                fieldName: btn.getAttribute('data-field-name'),
                fieldLabel: btn.getAttribute('data-field-label'),
                fieldType: btn.getAttribute('data-field-type'),
                options: btn.getAttribute('data-options'),
                sortOrder: btn.getAttribute('data-sort-order'),
                required: btn.getAttribute('data-required'),
            });
        });
    });

    closeBtn.addEventListener('click', closeModal);
    cancelBtn.addEventListener('click', closeModal);
    modal.addEventListener('click', function (e) {
        if (e.target === modal) closeModal();
    });

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && !modal.classList.contains('hidden')) closeModal();
    });
})();
</script>
