<?= message_box('success'); ?>
<?= message_box('error');
$edited = can_action('160', 'edited');
$deleted = can_action('160', 'deleted');
$edit_id = $this->uri->segment(5);
$action_url = base_url() . 'admin/settings/tags/update_tags';
$submit_label = lang('add');
$tag_name = '';
$border_val = lang('border');
$bg_val = lang('background');
$color_val = lang('color');
$tag_style = '';
if (!empty($edit_id) && !empty($method_info)) {
    $action_url = base_url() . 'admin/settings/tags/update_tags/' . $method_info->tag_id;
    $submit_label = lang('update');
    $tag_name = $method_info->name;
    $border_val = get_style($method_info->style, 'border');
    $bg_val = get_style($method_info->style, 'background');
    $color_val = get_style($method_info->style, 'color');
    $tag_style = $method_info->style;
}

?>
<div class="space-y-6">
    <div class="rounded-2xl border border-border bg-card shadow-sm">
        <div class="p-6">
			<?php if (!empty($edited)) { ?>
				<div class="rounded-2xl border border-dashed border-border bg-card mb-3 p-4 space-y-4">
					<form method="post" action="<?= $action_url ?>" class="space-y-4">
						<?= form_input_group('name', lang('name'), $tag_name, 'text', true, array('class' => 'result', 'placeholder' => lang('name'))); ?>
						<div class="space-y-3 rounded-xl border border-border bg-muted/30 p-3">
							<button type="button" style="margin-right:1px;<?= $tag_style ?>" class="me_name inline-flex rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-semibold text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"><?= !empty($tag_name) ? $tag_name : lang('result') ?></button>
							<div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
								<div class="space-y-1">
									<?= form_colorpicker('border_picker', '', $border_val, false, array('class' => 'colorborder-picker')); ?>
									<?= form_input_group('border', '', $border_val, 'text', false, array('class' => 'colorborder-text', 'placeholder' => '#d9d9d9')); ?>
								</div>
								<div class="space-y-1">
									<?= form_colorpicker('background_picker', '', $bg_val, false, array('class' => 'colorbackground-picker')); ?>
									<?= form_input_group('background', '', $bg_val, 'text', false, array('class' => 'colorbackground-text', 'placeholder' => '#f8f8f8')); ?>
								</div>
								<div class="space-y-1">
									<?= form_colorpicker('color_picker', '', $color_val, false, array('class' => 'colorpickerinput-picker')); ?>
									<?= form_input_group('color', '', $color_val, 'text', false, array('class' => 'colorpickerinput-text', 'placeholder' => '#111111')); ?>
								</div>
							</div>
						</div>
						<div class="flex items-center gap-2">
							<button type="submit" class="btn btn-sm btn-primary inline-flex items-center gap-2">
								<i data-lucide="check" class="h-4 w-4"></i>
								<?= $submit_label ?>
							</button>
							<?php if (!empty($edit_id)) { ?>
								<a href="<?= base_url('admin/settings/tags/') ?>" class="btn btn-danger btn-sm"><?= lang('cancel') ?></a>
							<?php } ?>
						</div>
					</form>
				</div>
			<?php } ?>

			<div class="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
				<?php
				if (!empty($all_method_info)) {
					foreach ($all_method_info as $v_method_info) {
						?>
						<div id="tags_<?= $v_method_info->tag_id ?>" class="rounded-xl border border-border bg-muted/30 p-4">
							<div class="flex items-start justify-between gap-2">
								<div>
									<span class="label" style="<?= $v_method_info->style ?>"><?= $v_method_info->name ?></span>
								</div>
								<div class="flex items-center gap-0">
									<?php if (!empty($edited)) { ?>
										<?= btn_edit('admin/settings/tags/edit_tags/' . $v_method_info->tag_id) ?>
									<?php } ?>
									<?php if (!empty($deleted)) { ?>
										<?php echo ajax_anchor(base_url("admin/settings/delete_tags/" . $v_method_info->tag_id), '', array("class" => "", "title" => '', "data-fade-out-on-success" => "#tags_" . $v_method_info->tag_id)); ?>
									<?php } ?>
								</div>
							</div>
						</div>
					<?php }
				}
				?>
			</div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $(document).on("keyup", '.result', function () {
            $('.me_name').html($(this).val());
        });

        function extractHex(value) {
            value = (value || '').trim();
            if (!value) return '';
            var match = value.match(/#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b/);
            if (match && match[0]) return match[0];
            return value;
        }

        function normalizeHex(value) {
            value = extractHex(value);
            if (!value) return '';
            if (value.charAt(0) !== '#') value = '#' + value;
            var shortMatch = /^#([0-9a-fA-F]{3})$/;
            var longMatch = /^#([0-9a-fA-F]{6})$/;
            if (shortMatch.test(value)) {
                var s = value.substring(1);
                return '#' + s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
            }
            if (longMatch.test(value)) {
                return value.toLowerCase();
            }
            return '';
        }

        function bindColor(pickerSelector, textSelector, applyCss) {
            var $picker = $(pickerSelector);
            var $text = $(textSelector);
            var initial = normalizeHex($text.val()) || normalizeHex($picker.val());
            if (initial) {
                $picker.val(initial);
                $text.val(initial);
                applyCss(initial);
            }

            $picker.on('input change', function () {
                var hex = normalizeHex($(this).val());
                if (!hex) return;
                $picker.val(hex);
                $text.val(hex);
                applyCss(hex);
            });

            $text.on('input change', function () {
                var hex = normalizeHex($(this).val());
                if (!hex) return;
                $picker.val(hex);
                $text.val(hex);
                applyCss(hex);
            });
        }

        bindColor('.colorborder-picker', '.colorborder-text', function (hex) {
            $('.me_name').css('border', '1px solid ' + hex);
        });
        bindColor('.colorbackground-picker', '.colorbackground-text', function (hex) {
            $('.me_name').css('background', hex);
        });
        bindColor('.colorpickerinput-picker', '.colorpickerinput-text', function (hex) {
            $('.me_name').css('color', hex);
        });
    });
</script>
