<?php
$all_form = $this->db->order_by('form_id', 'DESC')->get('tbl_form')->result();
$all_form_map = array();
if (!empty($all_form)) {
	foreach ($all_form as $v_form) {
		$all_form_map[$v_form->form_id] = lang($v_form->form_name);
	}
}

$selected_form_id = !empty($field_info->form_id) ? $field_info->form_id : '';
$selected_form_label = !empty($selected_form_id) && isset($all_form_map[$selected_form_id]) ? $all_form_map[$selected_form_id] : '';
$field_label_value = !empty($field_info->field_label) ? $field_info->field_label : '';
$help_text_value = !empty($field_info->help_text) ? $field_info->help_text : '';
$field_type_value = !empty($field_info->field_type) ? $field_info->field_type : 'text';
$default_values = !empty($field_info->default_value) ? json_decode($field_info->default_value, true) : array();
if (!is_array($default_values)) {
	$default_values = array();
}
$text_default_value = '';
if (($field_type_value === 'text' || $field_type_value === 'email' || $field_type_value === 'numeric' || $field_type_value === 'date' || $field_type_value === 'textarea') && !empty($default_values[0])) {
	$text_default_value = $default_values[0];
}
$checkbox_default_value = !empty($field_info->field_type) && $field_info->field_type === 'checkbox' && !empty($default_values[0]) ? $default_values[0] : '';
$field_type_options = array(
	'text' => lang('text_field'),
	'textarea' => lang('textarea'),
	'dropdown' => lang('select'),
	'email' => lang('email'),
	'date' => lang('date'),
	'checkbox' => lang('checkbox'),
	'numeric' => lang('numeric'),
);
$checkbox_default_options = array(
	'checked' => lang('checked'),
	'unchecked' => lang('unchecked'),
);
$is_edit = !empty($field_info);
$header_label = $is_edit ? lang('update') . ' ' . lang('field') : lang('new_field');
?>

<div class="space-y-5">
	<form role="form"
		enctype="multipart/form-data"
		id="custom-field-form"
		data-parsley-validate=""
		novalidate=""
		action="<?= base_url(); ?>admin/settings/save_custom_field/<?php if (!empty($field_info)) { echo $field_info->custom_field_id; } ?>"
		method="post"
		class="space-y-5">
		<div class="rounded-2xl border border-border bg-card shadow-sm">
			<div class="border-b border-border px-5 py-4">
				<h2 class="text-base font-semibold text-foreground"><?= $header_label; ?></h2>
				<p class="text-sm text-muted-foreground"><?= lang('define_field_behavior_visibility_and_defaults'); ?></p>
			</div>

			<div class="grid gap-5 p-5 lg:grid-cols-2">
				<div class="space-y-4">
					<div class="rounded-2xl border border-border bg-background p-4">
						<div class="mb-3 text-sm font-semibold text-foreground"><?= lang('field') . ' ' . lang('settings'); ?></div>
						<div class="space-y-4">
							<?= form_lookup_group('form_id', lang('custom_field_for'), $selected_form_id, $selected_form_label, true, array('id' => 'custom_field_form_id'), '', array('type' => 'form', 'min_length' => 0, 'placeholder' => lang('search') . ' ' . lang('modules'))); ?>
							<?= form_input_group('field_label', lang('field_label'), $field_label_value, 'text', true, array('placeholder' => lang('field_label'))); ?>
							<?= form_select_group('field_type', lang('field_type'), $field_type_options, $field_type_value, true, array('id' => 'type')); ?>
						</div>
					</div>

					<div class="rounded-2xl border border-border bg-background p-4">
						<div class="mb-3 text-sm font-semibold text-foreground"><?= lang('help_text'); ?></div>
						<?= form_editor('help_text', lang('help_text'), $help_text_value, false); ?>
					</div>
				</div>

				<div class="space-y-4">
					<div class="rounded-2xl border border-border bg-background p-4">
						<div class="mb-3 flex items-center justify-between">
							<div>
								<div class="text-sm font-semibold text-foreground"><?= lang('default_value') . ' & ' . lang('option'); ?></div>
								<div class="text-xs text-muted-foreground"><?= lang('configure_default_values_based_on_field_type'); ?></div>
							</div>
							<button type="button" id="add-option-trigger" class="inline-flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-xs font-semibold text-foreground hover:bg-muted">
								<i data-lucide="plus" class="h-4 w-4"></i>
								<?= lang('add') . ' ' . lang('option'); ?>
							</button>
						</div>

						<div class="space-y-4">
							<div class="default_value type">
								<?= form_input_group('default_value[]', lang('default_value'), $text_default_value, 'text', false, array('id' => 'text_default_value', 'placeholder' => lang('default_value'))); ?>
							</div>

							<div class="checkbox_type type">
								<?= form_select_group('default_value[]', lang('default_value'), $checkbox_default_options, $checkbox_default_value, true); ?>
							</div>

							<div id="show_dropdown" class="rounded-xl border border-dashed border-border bg-card/60 p-4">
								<div class="mb-3 text-sm font-semibold text-foreground"><?= lang('option'); ?></div>
								<div id="option" class="space-y-3"></div>
							</div>
						</div>
					</div>

					<div class="rounded-2xl border border-border bg-background p-4">
						<div class="mb-3 text-sm font-semibold text-foreground"><?= lang('visibility') . ' & ' . lang('behavior'); ?></div>
						<div class="grid gap-3 sm:grid-cols-2">
							<?= form_checkbox('required', lang('required'), !empty($field_info->required) && $field_info->required == 'on'); ?>
							<?= form_checkbox('show_on_table', lang('show_on_table'), !empty($field_info->show_on_table) && $field_info->show_on_table == 'on'); ?>
							<?= form_checkbox('show_on_details', lang('show_on_details'), !empty($field_info->show_on_details) && $field_info->show_on_details == 'on'); ?>
							<?= form_checkbox('visible_for_admin', lang('visible_for_admin'), !empty($field_info->visible_for_admin) && $field_info->visible_for_admin == 'on'); ?>
							<?= form_checkbox('visible_for_client', lang('visible_for_client'), !empty($field_info->visible_for_client) && $field_info->visible_for_client == 'on'); ?>
							<div class="rounded-lg border border-border bg-card p-3">
								<?= form_switch_radio('status', lang('active'), !empty($field_info->status) ? $field_info->status : 'active', false, array(), 'stacked', array('active' => lang('yes'), 'deactive' => lang('no'))); ?>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="flex flex-col-reverse gap-3 border-t border-border pt-4 sm:flex-row sm:justify-end">
			<button type="button" class="inline-flex items-center justify-center gap-2 rounded-xl border border-border bg-card px-5 py-2.5 text-sm font-semibold text-foreground transition hover:bg-muted" data-dismiss="modal">
				<i data-lucide="x" class="h-4 w-4"></i>
				<?= lang('close'); ?>
			</button>
			<button type="submit" class="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-slate-950 to-slate-800 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-slate-900/20 transition hover:from-slate-800 hover:to-slate-700 dark:from-slate-100 dark:to-white dark:text-slate-900 dark:shadow-none">
				<i data-lucide="save" class="h-4 w-4"></i>
				<?= $is_edit ? lang('update') : lang('save'); ?>
			</button>
		</div>
	</form>

	<div id="newOption" class="hidden items-center gap-3 rounded-xl border border-border bg-card p-3">
		<input type="text" class="input-group-option flex-1 rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-slate-400" placeholder="<?= lang('option'); ?>">
		<button type="button" class="deleteOption inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-card text-rose-600 hover:bg-rose-50">
			<i data-lucide="x" class="h-4 w-4"></i>
		</button>
	</div>
</div>

<script type="text/javascript">
	var option = 0;

	$(document).ready(function () {
		$("#type").change(function () {
			var value = $(this).val();
			if (value === "dropdown" || value === "checkbox") {
				if ($("#option").children().length === 0) {
					<?php if (!empty($field_info->field_type) && ($field_info->field_type == 'dropdown' || $field_info->field_type == 'checkbox') && !empty($default_values)) { ?>
						<?php foreach ($default_values as $optionValue) { ?>
							addOption("<?= html_escape($optionValue); ?>");
						<?php } ?>
					<?php } else { ?>
						removeAllOption();
						addOption("");
						addOption("");
					<?php } ?>
				}
				$('#show_dropdown').show();
				$('.show_dropdown :input, #option :input').attr("disabled", false);
			} else {
				$('#show_dropdown').hide();
				$('#option :input').attr("disabled", true);
			}
		});

		$('#type').trigger('change');

		$('#add-option-trigger').on('click', function () {
			addOption("");
		});
	});

	function addOption(default_value) {
		var newOption = $('#newOption').clone().removeAttr('id').removeClass('hidden').show();
		newOption.find('.input-group-option').attr('name', 'default_value[]').val(default_value);
		newOption.find('.deleteOption').attr('onclick', 'removeOption(this)');
		$('#option').append(newOption);
	}

	function removeOption(el) {
		$(el).parent().remove();
	}

	function removeAllOption() {
		$('#option').children().remove();
	}
</script>
