<?php
$add_contact = $this->uri->segment(6);
if (!empty($add_contact)) :
	$user_id = $this->uri->segment(7);
	$languages = $this->db->where('active', 1)->order_by('name', 'ASC')->get('tbl_languages')->result();
	$locales = $this->db->order_by('name', 'ASC')->get('tbl_locales')->result();
?>
	<?php
	$edited = can_action('4', 'edited');
	if (!empty($edited)) {
		$account_details = $this->client_model->check_by(array('user_id' => $user_id), 'tbl_account_details');
		$user_info = $this->client_model->check_by(array('user_id' => $user_id), 'tbl_users');
	?>
		<form role="form" data-parsley-validate="" novalidate="" enctype="multipart/form-data" id="form"
			action="<?php echo base_url(); ?>admin/client/save_contact/<?php
																		if (!empty($account_details)) {
																			echo $account_details->user_id;
																		}
																		?>" method="post">
				<?php
				$selected_language = !empty($account_details->language) ? $account_details->language : $this->config->item('language');
				$selected_locale = $this->config->item('locale');
				$selected_direction = !empty($account_details->direction) ? $account_details->direction : (!empty(config_item('RTL')) ? 'rtl' : 'ltr');
				$all_client_menu = $this->db->where('parent', 0)->order_by('sort')->get('tbl_client_menu')->result();
				$user_menu_ids = array();
				if (!empty($user_info)) {
					$user_menu = $this->db->where('user_id', $user_info->user_id)->get('tbl_client_role')->result();
					foreach ($user_menu as $v_u_menu) {
						$user_menu_ids[] = (int) $v_u_menu->menu_id;
					}
				} else {
					$client_menu = unserialize(config_item('client_default_menu'));
					if (!empty($client_menu['client_default_menu'])) {
						$user_menu_ids = array_map('intval', $client_menu['client_default_menu']);
					}
				}
				$active_permissions = 0;
				foreach ($all_client_menu as $v_menu) {
					if (in_array((int) $v_menu->menu_id, $user_menu_ids, true)) {
						$active_permissions++;
					}
				}
				$is_edit_contact = !empty($account_details) && !empty($account_details->user_id);
				$password_required = $is_edit_contact ? '' : ' required';
				$password_required_mark = $is_edit_contact ? '' : ' <span class="text-rose-500">*</span>';
				$password_placeholder = $is_edit_contact ? 'Leave blank to keep current password' : '********';
				$icon_field_class = 'h-9 w-full rounded-lg border border-slate-300 bg-white pl-9 pr-3 text-sm text-slate-900 shadow-sm outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:placeholder:text-slate-500 dark:focus:border-blue-400 dark:focus:ring-blue-400/20';
				$select_class = 'h-9 w-full appearance-none rounded-lg border border-slate-300 bg-white pl-9 pr-8 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:focus:border-blue-400 dark:focus:ring-blue-400/20';
				$direction_select_class = 'h-9 w-full appearance-none rounded-lg border border-slate-300 bg-white px-3 pr-8 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:focus:border-blue-400 dark:focus:ring-blue-400/20';
				?>
				<div class="">
					

					<div class="grid grid-cols-1 gap-5  lg:grid-cols-12">
						<input type="hidden" name="r_url" value="<?= base_url() ?>admin/client/details/<?= $client_details->client_id ?>/contacts">
						<input type="hidden" name="company" value="<?= $client_details->client_id ?>">
						<input type="hidden" name="role_id" value="2">
						<input type="hidden" id="user_id" value="<?= !empty($account_details) ? html_escape($account_details->user_id) : '' ?>">

						<section class="px-5 py-4 pb-24 rounded-lg border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-800 lg:col-span-9
						space-y-6"
						>
							<div class="space-y-7 p-7">
								<div>
									<h4 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Personal Information</h4>
									<div class="mt-3 border-t border-slate-100 pt-4 dark:border-slate-800">
										<div class="grid grid-cols-1 gap-x-5 gap-y-4 md:grid-cols-2">
											<label class="block space-y-2">
												<span class="text-xs font-semibold text-slate-700 dark:text-slate-300"><?= lang('full_name') ?> <span class="text-rose-500">*</span></span>
												<span class="relative block">
													<i data-lucide="user" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400"></i>
													<input type="text" name="fullname" required value="<?= html_escape(!empty($account_details->fullname) ? $account_details->fullname : '') ?>" placeholder="e.g. John Doe" class="<?= $icon_field_class ?>">
												</span>
											</label>
											<label class="block space-y-2">
												<span class="text-xs font-semibold text-slate-700 dark:text-slate-300">Email Address <span class="text-rose-500">*</span></span>
												<span class="relative block">
													<i data-lucide="mail" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400"></i>
													<input type="email" name="email" id="check_email_addrees" required value="<?= html_escape(!empty($user_info->email) ? $user_info->email : '') ?>" placeholder="me@domain.com" class="<?= $icon_field_class ?>">
												</span>
											</label>
											<div class="-mt-2 text-xs font-medium text-rose-500 md:col-span-2"><span id="email_addrees_error" class="required"></span></div>
											<label class="block space-y-2">
												<span class="text-xs font-semibold text-slate-700 dark:text-slate-300">Phone Number</span>
												<span class="relative block">
													<i data-lucide="phone" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400"></i>
													<input type="text" name="phone" value="<?= html_escape(!empty($account_details->phone) ? $account_details->phone : '') ?>" placeholder="+52 782 983 434" class="<?= $icon_field_class ?>">
												</span>
											</label>
											<label class="block space-y-2">
												<span class="text-xs font-semibold text-slate-700 dark:text-slate-300">Mobile Number</span>
												<span class="relative block">
													<i data-lucide="smartphone" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400"></i>
													<input type="text" name="mobile" value="<?= html_escape(!empty($account_details->mobile) ? $account_details->mobile : '') ?>" placeholder="+8801723611125" class="<?= $icon_field_class ?>">
												</span>
											</label>
											<label class="block space-y-2 md:col-span-2">
												<span class="text-xs font-semibold text-slate-700 dark:text-slate-300">Skype ID</span>
												<span class="relative block">
													<i data-lucide="message-circle" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400"></i>
													<input type="text" name="skype" value="<?= html_escape(!empty($account_details->skype) ? $account_details->skype : '') ?>" placeholder="john.doe" class="<?= $icon_field_class ?>">
												</span>
											</label>
										</div>
									</div>
								</div>

								<div>
									<h4 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Regional Settings</h4>
									<div class="mt-3 border-t border-slate-100 pt-4 dark:border-slate-800">
										<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
											<label class="block space-y-2">
												<span class="text-xs font-semibold text-slate-700 dark:text-slate-300"><?= lang('language') ?></span>
												<span class="relative block">
													<i data-lucide="globe-2" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400"></i>
													<select name="language" class="<?= $select_class ?>">
														<?php foreach ($languages as $lang) : ?>
															<option value="<?= html_escape($lang->name) ?>" <?= (string) $selected_language === (string) $lang->name ? 'selected' : '' ?>><?= html_escape(ucfirst($lang->name)) ?></option>
														<?php endforeach; ?>
													</select>
													<i data-lucide="chevron-down" class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400"></i>
												</span>
											</label>
											<label class="block space-y-2">
												<span class="text-xs font-semibold text-slate-700 dark:text-slate-300"><?= lang('locale') ?></span>
												<span class="relative block">
													<i data-lucide="globe-2" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400"></i>
													<select name="locale" class="<?= $select_class ?>">
														<?php foreach ($locales as $loc) : ?>
															<option value="<?= html_escape($loc->locale) ?>" <?= (string) $selected_locale === (string) $loc->locale ? 'selected' : '' ?>><?= html_escape($loc->name) ?></option>
														<?php endforeach; ?>
													</select>
													<i data-lucide="chevron-down" class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400"></i>
												</span>
											</label>
											<label class="block space-y-2">
												<span class="text-xs font-semibold text-slate-700 dark:text-slate-300"><?= lang('direction') ?></span>
												<span class="relative block">
													<select name="direction" class="<?= $direction_select_class ?>">
														<option value="ltr" <?= $selected_direction === 'ltr' ? 'selected' : '' ?>>LTR (Left to Right)</option>
														<option value="rtl" <?= $selected_direction === 'rtl' ? 'selected' : '' ?>>RTL (Right to Left)</option>
													</select>
													<i data-lucide="chevron-down" class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400"></i>
												</span>
											</label>
										</div>
									</div>
								</div>

								<div>
									<h4 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Security &amp; Authentication</h4>
									<div class="mt-3 border-t border-slate-100 pt-4 dark:border-slate-800">
										<div class="grid grid-cols-1 gap-x-5 gap-y-4 md:grid-cols-2">
											<label class="block space-y-2 md:col-span-2">
												<span class="text-xs font-semibold text-slate-700 dark:text-slate-300"><?= lang('username') ?> <span class="text-rose-500">*</span></span>
												<span class="relative block">
													<i data-lucide="user" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400"></i>
													<input type="text" name="username" id="check_username" required value="<?= html_escape(!empty($user_info->username) ? $user_info->username : set_value('username')) ?>" placeholder="johndoe" class="<?= $icon_field_class ?>">
												</span>
											</label>
											<div class="-mt-2 text-xs font-medium text-rose-500 md:col-span-2">
												<div class="required" id="check_username_error"></div>
											</div>
											<label class="block space-y-2">
												<span class="text-xs font-semibold text-slate-700 dark:text-slate-300"><?= lang('password') ?><?= $password_required_mark ?></span>
												<span class="relative block">
													<i data-lucide="lock" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400"></i>
													<input type="password" name="password" id="new_password"<?= $password_required ?> value="<?= html_escape(set_value('password')) ?>" placeholder="<?= html_escape($password_placeholder) ?>" class="<?= $icon_field_class ?>">
												</span>
											</label>
											<label class="block space-y-2">
												<span class="text-xs font-semibold text-slate-700 dark:text-slate-300"><?= lang('confirm_password') ?><?= $password_required_mark ?></span>
												<span class="relative block">
													<i data-lucide="lock" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400"></i>
													<input type="password" name="confirm_password"<?= $password_required ?> data-parsley-equalto="#new_password" value="<?= html_escape(set_value('confirm_password')) ?>" placeholder="<?= html_escape($password_placeholder) ?>" class="<?= $icon_field_class ?>">
												</span>
											</label>
											<label class="flex cursor-pointer items-center gap-3 md:col-span-2">
												<input type="checkbox" name="send_email_password" class="h-4 w-4 rounded border-slate-300 bg-white text-blue-600 focus:ring-2 focus:ring-blue-500/20 dark:border-slate-700 dark:bg-slate-900" checked>
												<span class="text-sm font-medium text-slate-700 dark:text-slate-300">Email login credentials to user</span>
											</label>
										</div>
									</div>
								</div>
							</div>
						</section>

						<aside class="rounded-lg border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-800 lg:col-span-3 lg:self-start">
							<div class="flex h-12 items-center justify-between border-b border-slate-100 px-5 dark:border-slate-800">
								<div class="flex items-center gap-2">
									<i data-lucide="shield-check" class="h-4 w-4 text-blue-600 dark:text-blue-400"></i>
									<h4 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Module Permissions</h4>
								</div>
								<span id="client-permission-active-count" class="rounded border border-slate-200 px-2 py-1 text-xs font-semibold text-slate-500 dark:border-slate-700 dark:text-slate-300"><?= $active_permissions ?> Active</span>
							</div>
							<div class="space-y-4 p-5">
								<?php foreach ($all_client_menu as $v_menu) :
									$is_checked = in_array((int) $v_menu->menu_id, $user_menu_ids, true);
									$permission_id = 'client_permission_' . (int) $v_menu->menu_id;
								?>
									<div class="flex min-h-5 items-center justify-between gap-4">
										<label for="<?= $permission_id ?>" data-client-permission-label class="mb-0 cursor-pointer text-sm font-semibold <?= $is_checked ? 'text-slate-900 dark:text-slate-100' : 'text-slate-500 dark:text-slate-400' ?>"><?= html_escape(lang($v_menu->label)) ?></label>
										<label for="<?= $permission_id ?>" class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center">
											<input id="<?= $permission_id ?>" type="checkbox" name="<?= html_escape($v_menu->label) ?>" value="<?= (int) $v_menu->menu_id ?>" class="peer sr-only" data-client-permission-switch <?= $is_checked ? 'checked' : '' ?>>
											<span class="relative h-5 w-9 rounded-full bg-slate-200 transition-colors after:absolute after:left-0.5 after:top-0.5 after:h-4 after:w-4 after:rounded-full after:bg-white after:shadow-sm after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full dark:bg-slate-700"></span>
										</label>
									</div>
								<?php endforeach; ?>
							</div>
						</aside>
					</div>
					<script>
						document.addEventListener('DOMContentLoaded', function() {
							const switches = Array.from(document.querySelectorAll('[data-client-permission-switch]'));
							const countBadge = document.getElementById('client-permission-active-count');
							const updatePermissions = function() {
								let active = 0;
								switches.forEach(function(input) {
									const row = input.closest('.flex');
									const label = row ? row.querySelector('[data-client-permission-label]') : null;
									if (input.checked) {
										active += 1;
										if (label) {
											label.classList.add('text-slate-900', 'dark:text-slate-100');
											label.classList.remove('text-slate-500', 'dark:text-slate-400');
										}
									} else if (label) {
										label.classList.remove('text-slate-900', 'dark:text-slate-100');
										label.classList.add('text-slate-500', 'dark:text-slate-400');
									}
								});
								if (countBadge) {
									countBadge.textContent = active + ' Active';
								}
							};
							switches.forEach(function(input) {
								input.addEventListener('change', updatePermissions);
							});
							updatePermissions();
						});
					</script>

					<div class="">
						<div class="flex justify-end gap-2">
							<a href="<?= base_url() ?>admin/client/details/<?= $client_details->client_id ?>/contacts"
								class="inline-flex h-10 items-center justify-center rounded-lg border border-slate-300 bg-white px-5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800">Cancel</a>
							<button type="submit" id="new_uses_btn"
								class="inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-blue-600 bg-blue-600 px-5 text-sm font-semibold text-white shadow-sm ring-2 ring-blue-500/20 transition hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-500/25">
								<i data-lucide="save" class="h-4 w-4"></i>
								Save Contact
							</button>
						</div>
					</div>
				</div>
		</form>
	<?php } ?>
<?php else : ?>
	<section class="rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-800">
		<div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-5 py-4 dark:border-slate-700">
			<div>
				<h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100"><?= lang('contacts') ?></h3>
				<p class="text-xs text-slate-500 dark:text-slate-400"><?= lang('client') ?> &bull; <?= html_escape($client_details->name ?? '') ?></p>
			</div>
			<div>
				<?php
				$edited = can_action('4', 'edited');
				if (!empty($edited)) {
				?>
					<a href="<?= base_url() ?>admin/client/details/<?= $client_details->client_id ?>/contacts/add_contacts"
						class="inline-flex items-center rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"><?= lang('add_contact') ?></a>
				<?php } ?>
			</div>
		</div>
		<div class="p-5">
			<div class="overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700">
				<div class="overflow-x-auto">
				<table class="min-w-[860px] w-full text-sm" id="datatable_action" cellspacing="0" width="100%">
					<thead>
						<tr class="bg-slate-50 text-xs uppercase tracking-wide text-slate-500 dark:bg-slate-900/60 dark:text-slate-300">
							<th class="px-4 py-3 text-left"><?= lang('full_name') ?></th>
							<th class="px-4 py-3 text-left"><?= lang('email') ?></th>
							<th class="px-4 py-3 text-left hidden md:table-cell"><?= lang('phone') ?></th>
							<th class="px-4 py-3 text-left hidden lg:table-cell"><?= lang('mobile') ?></th>
							<th class="px-4 py-3 text-left hidden lg:table-cell"><?= lang('skype_id') ?></th>
							<th class="px-4 py-3 text-left hidden xl:table-cell"><?= lang('last_login') ?></th>
							<th class="px-4 py-3 text-left"><?= lang('action') ?></th>
						</tr>
					</thead>
					<tbody>
						<?php
						$client_contacts = $this->client_model->get_client_contacts($client_details->client_id);
						if (!empty($client_contacts)) {
							foreach ($client_contacts as $key => $contact) {
						?>
								<tr class="border-t border-slate-100 transition hover:bg-slate-50/80 dark:border-slate-700 dark:hover:bg-slate-900/40">
									<td class="px-4 py-3 font-medium text-slate-800 dark:text-slate-100"><?= html_escape($contact->fullname) ?></td>
									<td class="px-4 py-3 text-sky-600 dark:text-sky-300"><?= html_escape($contact->email) ?></td>
									<td class="px-4 py-3 hidden md:table-cell"><a href="tel:<?= html_escape($contact->phone) ?>" class="text-slate-700 hover:underline dark:text-slate-200"><?= html_escape($contact->phone) ?></a></td>
									<td class="px-4 py-3 hidden lg:table-cell"><a href="tel:<?= html_escape($contact->mobile) ?>" class="text-slate-700 hover:underline dark:text-slate-200"><?= html_escape($contact->mobile) ?></a>
									</td>
									<td class="px-4 py-3 hidden lg:table-cell">
										<a href="skype:<?= html_escape($contact->skype) ?>?call" class="text-slate-700 hover:underline dark:text-slate-200"><?= html_escape($contact->skype) ?></a>
									</td>
									<?php
									if ($contact->last_login == '0000-00-00 00:00:00' || empty($contact->last_login)) {
										$login_time = "-";
									} else {
										$login_time = display_date($contact->last_login) . ' ' . display_time($contact->last_login);
									} ?>
									<td class="px-4 py-3 hidden xl:table-cell"><?= $login_time ?></td>
									<td class="px-4 py-3">
										<div class="flex items-center gap-1.5">
										<a href="<?= base_url() ?>admin/client/make_primary/<?= $contact->user_id ?>/<?= $client_details->client_id ?>"
											data-toggle="tooltip" class="inline-flex h-8 w-8 items-center justify-center rounded-lg <?php
																				if ($client_details->primary_contact == $contact->user_id) {
																					echo "bg-emerald-500 text-white";
																				} else {
																					echo "bg-slate-200 text-slate-700 dark:bg-slate-700 dark:text-slate-200";
																				}
																				?>" title="<?= lang('primary_contact') ?>">
											<i data-lucide="link" class="h-4 w-4"></i> </a>
										<a href="<?= base_url() ?>admin/client/details/<?= $client_details->client_id . '/contacts/add_contacts/' . $contact->user_id ?>"
											class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-500 text-white" title="<?= lang('edit') ?>">
											<i data-lucide="square-pen" class="h-4 w-4"></i> </a>
										<a href="<?= base_url() ?>admin/client/delete_contacts/<?= $client_details->client_id . '/' . $contact->user_id ?>"
											class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-rose-500 text-white" title="<?= lang('delete') ?>">
											<i data-lucide="trash-2" class="h-4 w-4"></i> </a>
										</div>
									</td>
								</tr>
							<?php
							}
						} else { ?>
							<tr>
								<td colspan="7" class="px-4 py-8 text-center text-sm text-slate-500 dark:text-slate-400"><?= lang('no_record_found') ?></td>
							</tr>
						<?php }
						?>
					</tbody>
				</table>
				</div>
			</div>
		</div>
	</section>
<?php endif ?>
