<style type="text/css">
	.progress-bar-purple {
		background-color: #564aa3 !important
	}
</style>
<?= message_box('success'); ?>
<?= message_box('error'); ?>
<?php
$created = can_action('69', 'created');
$edited = can_action('69', 'edited');
$deleted = can_action('69', 'deleted');
$is_department_head = is_department_head();
$selected_goal_type = !empty($goal_info->goal_type_id) ? $goal_info->goal_type_id : '';
$selected_account_id = !empty($goal_info->account_id) ? $goal_info->account_id : '';
$selected_goal_type_label = '';
$selected_account_label = '';

if (!empty($selected_goal_type)) {
	$selected_goal_type_info = $this->db
		->select('goal_type_id, type_name')
		->where('goal_type_id', $selected_goal_type)
		->get('tbl_goal_type')
		->row();
	if (!empty($selected_goal_type_info)) {
		$selected_goal_type_label = lang($selected_goal_type_info->type_name);
	}
}

if (!empty($selected_account_id)) {
	$selected_account_info = $this->db
		->select('account_id, account_name')
		->where('account_id', $selected_account_id)
		->get('tbl_accounts')
		->row();
	if (!empty($selected_account_info)) {
		$selected_account_label = $selected_account_info->account_name;
	}
}
?>

<div class="space-y-6">
	<div class="rounded-2xl border border-border bg-card shadow-sm">
		<div class="p-5">
			<form role="form" enctype="multipart/form-data" id="form" data-parsley-validate="" novalidate=""
				action="<?php echo base_url(); ?>admin/goal_tracking/save_goal_tracking/<?php if (!empty($goal_info)) {
																							echo $goal_info->goal_tracking_id;
																						} ?>" method="post"
				class="space-y-6">
				<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
					<div class="rounded-xl border border-border bg-card p-4 space-y-4">
						<div class="flex items-center gap-2 text-sm font-semibold text-foreground border-b border-border pb-3">
							<i data-lucide="target" class="h-4 w-4 text-muted-foreground"></i>
							<h4 class="text-sm font-semibold text-foreground"><?= lang('goal') . ' ' . lang('details') ?></h4>
						</div>
						<?= form_input_group('subject', lang('subject'), !empty($goal_info) ? $goal_info->subject : '', 'text', true); ?>

						<?= form_lookup_group('goal_type_id', lang('goal') . ' ' . lang('type'), $selected_goal_type, $selected_goal_type_label, true, array('id' => 'goal_type_id'), '', array('type' => 'goal_type', 'min_length' => 0)); ?>

						<div id="account" style="<?php if (!empty($goal_info->goal_type_id) && ($goal_info->goal_type_id == 2 || $goal_info->goal_type_id == 4)) {
														echo 'display:block';
													} else {
														echo 'display:none';
													} ?>">
							<?= form_lookup_group('account_id', lang('account'), $selected_account_id, $selected_account_label, false, array('id' => 'account_id'), '', array('type' => 'account', 'min_length' => 0)); ?>
						</div>

						<?= form_input_group('achievement', lang('achievement'), !empty($goal_info) ? $goal_info->achievement : '', 'number', true); ?>
					</div>

					<div class="rounded-xl border border-border bg-card p-4 space-y-4">
						<div class="flex items-center gap-2 text-sm font-semibold text-foreground border-b border-border pb-3">
							<i data-lucide="calendar" class="h-4 w-4 text-muted-foreground"></i>
							<h4 class="text-sm font-semibold text-foreground"><?= lang('schedule') ?></h4>
						</div>
						<?= form_datepicker('start_date', lang('start_date'), !empty($goal_info->start_date) ? $goal_info->start_date : date('Y-m-d'), true, array('class' => 'start_date', 'data-date-format' => config_item('date_picker_format'))); ?>

						<?= form_datepicker('end_date', lang('end_date'), !empty($goal_info->end_date) ? $goal_info->end_date : date('Y-m-d', safe_strtotime('+1 days')), true, array('class' => 'end_date', 'data-date-format' => config_item('date_picker_format'))); ?>

						<?= form_textarea_group('description', lang('description'), !empty($goal_info) ? $goal_info->description : '', 4); ?>
					</div>
				</div>

				<?php
				$permissionL = null;
				if (!empty($goal_info->permission)) {
					$permissionL = $goal_info->permission;
				}
				?>
				<div class="rounded-xl border border-border bg-card p-4 space-y-4">
					<div class="flex items-center gap-2 text-sm font-semibold text-foreground border-b border-border pb-3">
						<i data-lucide="shield" class="h-4 w-4 text-muted-foreground"></i>
						<h4 class="text-sm font-semibold text-foreground"><?= lang('permission') ?></h4>
					</div>
					<?= form_permission_modern($permission_user, $permissionL); ?>

					<div class="space-y-3">
						<?= form_checkbox('notify_goal_achive', lang('notify_goal_achive'), (!empty($goal_info->notify_goal_achive) && $goal_info->notify_goal_achive == 'on')); ?>
						<?= form_checkbox('notify_goal_not_achive', lang('notify_goal_not_achive'), (!empty($goal_info->notify_goal_not_achive) && $goal_info->notify_goal_not_achive == 'on')); ?>
					</div>
				</div>

				<div class="flex items-center justify-end gap-2 border-t border-border pt-4">
					<?php if (!empty($goal_info)) { ?>
						<button type="submit" class="inline-flex items-center rounded-lg bg-indigo-600 px-3 py-2 text-xs font-semibold text-white shadow-sm hover:bg-indigo-500"><?= lang('updates') ?></button>
						<button type="button" onclick="goBack()" class="inline-flex items-center rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-xs font-semibold text-rose-600 hover:bg-rose-100"><?= lang('cancel') ?></button>
					<?php } else { ?>
						<button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
							<i data-lucide="save" class="h-4 w-4"></i>
							<?= lang('save') ?>
						</button>
					<?php } ?>
				</div>
			</form>
		</div>
	</div>
</div>

<script type="text/javascript">
	function goBack() {
		if (document.referrer && new URL(document.referrer).origin === window.location.origin) {
			window.history.back();
		}
	}
	document.addEventListener('DOMContentLoaded', function() {
		var goalTypeWrapper = document.querySelector('[data-lookup][data-lookup-type="goal_type"]');
		var accountWrap = document.getElementById('account');
		if (!goalTypeWrapper || !accountWrap) {
			return;
		}

		var accountHidden = accountWrap.querySelector('input[name="account_id"][data-lookup-hidden]');
		var accountInput = accountWrap.querySelector('[data-lookup-input]');

		function toggleAccount(goalTypeId) {
			var showAccount = goalTypeId === '2' || goalTypeId === '4';
			accountWrap.style.display = showAccount ? 'block' : 'none';
			if (accountHidden) {
				if (showAccount) {
					accountHidden.removeAttribute('disabled');
				} else {
					accountHidden.value = '';
					accountHidden.setAttribute('disabled', 'disabled');
				}
			}
			if (accountInput) {
				if (showAccount) {
					accountInput.removeAttribute('disabled');
				} else {
					accountInput.value = '';
					accountInput.setAttribute('disabled', 'disabled');
				}
			}
		}

		var initialGoalType = goalTypeWrapper.querySelector('[data-lookup-hidden]');
		if (initialGoalType) {
			toggleAccount(initialGoalType.value || '');
		}

		goalTypeWrapper.addEventListener('lookup:change', function(event) {
			if (!event.detail || event.detail.type !== 'goal_type') {
				return;
			}
			toggleAccount(String(event.detail.id || ''));
		});
	});
</script>
