<?php
if ( ! defined( 'ABSPATH' ) ) exit;
// phpcs:ignoreFile

use Anbarak\Input;

$_nonce = wp_create_nonce('form_nonce');

if (isset($_GET['rebuild-product-expense-tag']) && isset($_GET['anbarak_rebuild_nonce']) && wp_verify_nonce(sanitize_text_field(wp_unslash($_GET['anbarak_rebuild_nonce'])), 'anbarak_rebuild_product_expense_tag')) {
	anbarak_rebuild_product_expenses_tags();
}
?>

<div>
	<header class="flex justify-between items-center mb-6">
		<h2 class="text-2xl font-bold"><?php esc_html_e('Tags List', 'anbarak'); ?></h2>
		<button data-micromodal-trigger="modal-new-tag" class="button button--primary flex items-center gap-2">
			<span class="dashicons dashicons-plus-alt"></span>
			<span><?php esc_html_e('Add New Tag', 'anbarak'); ?></span>
		</button>
	</header>

	<div class="">
		<div class="tags-container flex-grow">
			<?php echo wp_kses_post(anbarak_render_expenses_tags()) ?>
		</div>

		<small class="hidden">Tip: you cannot edit or remove a system tag. like <?php esc_html_e('Product Purchase', 'anbarak') ?></small>
	</div>

	<!-- New Tag Modal -->
	<div class="micro-modal micromodal-slide" id="modal-new-tag" aria-hidden="false">
		<div class="modal__overlay" tabindex="-1" data-micromodal-close="">
			<div class="modal__container box max-w-md" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
				<header class="modal__header flex justify-between items-center p-4 border-b border-gray-200">
					<h2 class="modal__title text-xl font-bold flex items-center gap-2">
						<span class="dashicons dashicons-tag"></span>
						<?php esc_html_e('Define New Tag', 'anbarak'); ?>
					</h2>
					<button class="modal__close text-gray-400 hover:text-gray-600" type="button" aria-label="<?php esc_attr_e('Close modal', 'anbarak'); ?>" data-micromodal-close>
						<span class="dashicons dashicons-no-alt"></span>
					</button>
				</header>
				<main class="modal__content p-4">
					<div class="new-tag-from-wrap">
						<form name="frm-new-tag" action="" method="POST" class="w-full space-y-4">
							<input type="hidden" name="form_nonce" value="<?php echo esc_attr($_nonce) ?>">
							<input type="hidden" name="action" value="anbarak_define_expenses_tag">
							<input type="hidden" name="security" value="<?php echo esc_attr(ANBARAK_AJAX_NONCE) ?>">
							
							<div class="form-group">
								<?php echo wp_kses_post(Input::render([
									'name' => 'name',
									'parent_class' => 'w-full',
									'label' => esc_html__('Tag Name', 'anbarak'),
									'placeholder' => esc_html__('e.g., Office Supplies', 'anbarak'),
								])); ?>
							</div>
							
							<div class="form-group">
								<label class="form-label font-semibold block mb-2">
									<?php esc_html_e('Tag Color', 'anbarak'); ?>
								</label>
								<input type="text" name="color" id="tag-color-picker-new" class="anbarak-color-picker" value="#202020">
							</div>
							
							<div class="form-group pt-2">
								<button type="submit" class="button button--primary w-full flex items-center justify-center gap-2">
									<span class="dashicons dashicons-saved"></span>
									<span><?php esc_html_e('Create Tag', 'anbarak'); ?></span>
								</button>
							</div>
						</form>
					</div>
				</main>
			</div>
		</div>
	</div>

	<!-- Edit Tag Modal -->
	<div class="micro-modal micromodal-slide" id="modal-edit-tag" aria-hidden="false">
		<div class="modal__overlay" tabindex="-1" data-micromodal-close="">
			<div class="modal__container box max-w-md" role="dialog" aria-modal="true" aria-labelledby="modal-edit-title">
				<header class="modal__header flex justify-between items-center p-4 border-b border-gray-200">
					<h2 class="modal__title text-xl font-bold flex items-center gap-2">
						<span class="dashicons dashicons-tag"></span>
						<?php esc_html_e('Edit Tag', 'anbarak'); ?>
					</h2>
					<button class="modal__close text-gray-400 hover:text-gray-600" type="button" aria-label="<?php esc_attr_e('Close modal', 'anbarak'); ?>" data-micromodal-close>
						<span class="dashicons dashicons-no-alt"></span>
					</button>
				</header>
				<main class="modal__content p-4">
					<div class="edit-tag-from-wrap">
						<form name="frm-edit-tag" action="" method="POST" class="w-full space-y-4">
							<input type="hidden" name="form_nonce" value="<?php echo esc_attr($_nonce) ?>">
							<input type="hidden" name="action" value="anbarak_edit_expenses_tag">
							<input type="hidden" name="id" id="edit-tag-id" value="">
							<input type="hidden" name="security" value="<?php echo esc_attr(ANBARAK_AJAX_NONCE) ?>">
							
							<div class="form-group">
								<?php echo wp_kses_post(Input::render([
									'name' => 'name',
									'parent_class' => 'w-full',
									'label' => esc_html__('Tag Name', 'anbarak'),
									'placeholder' => esc_html__('e.g., Office Supplies', 'anbarak'),
								])); ?>
							</div>
							
							<div class="form-group">
								<label class="form-label font-semibold block mb-2">
									<?php esc_html_e('Tag Color', 'anbarak'); ?>
								</label>
								<input type="text" name="color" id="tag-color-picker-edit" class="anbarak-color-picker" value="#202020">
							</div>
							
							<div class="form-group pt-2">
								<button type="submit" class="button button--primary w-full flex items-center justify-center gap-2">
									<span class="dashicons dashicons-saved"></span>
									<span><?php esc_html_e('Save Changes', 'anbarak'); ?></span>
								</button>
							</div>
						</form>
					</div>
				</main>
			</div>
		</div>
	</div>
</div>
