<?= message_box('success'); ?>
<?= message_box('error'); ?>
<?php
$status_filters = array(
	'' => lang('all'),
	'open' => lang('open'),
	'in_progress' => lang('in_progress'),
	'answered' => lang('answered'),
	'closed' => lang('closed'),
);

$answered = 0;
$closed = 0;
$open = 0;
$in_progress = 0;

$progress_tickets_info = get_result('tbl_tickets', array('reporter' => $this->session->userdata('user_id')));
if (!empty($progress_tickets_info)):
	foreach ($progress_tickets_info as $v_tickets):
		if ($v_tickets->status == 'answered') {
			$answered += count(array($v_tickets->status));
		}
		if ($v_tickets->status == 'closed') {
			$closed += count(array($v_tickets->status));
		}
		if ($v_tickets->status == 'open') {
			$open += count(array($v_tickets->status));
		}
		if ($v_tickets->status == 'in_progress') {
			$in_progress += count(array($v_tickets->status));
		}
	endforeach;
endif;
?>

<div class="space-y-4">
	<div class="rounded-2xl border border-border bg-card p-4 shadow-sm">
		<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
			<button type="button"
				class="ticket-state-filter rounded-xl border border-border bg-white p-4 text-left shadow-sm transition-colors hover:border-slate-300 dark:bg-gray-800 dark:border-gray-700 dark:hover:border-gray-500"
				data-filter="answered">
				<p class="text-[11px] uppercase tracking-wide text-muted-foreground dark:text-gray-400">
					<?= lang('answered') . ' ' . lang('tickets') ?>
				</p>
				<p class="mt-2 text-2xl font-semibold text-foreground dark:text-gray-100">
					<?= $answered ?>
				</p>
			</button>

			<button type="button"
				class="ticket-state-filter rounded-xl border border-border bg-white p-4 text-left shadow-sm transition-colors hover:border-slate-300 dark:bg-gray-800 dark:border-gray-700 dark:hover:border-gray-500"
				data-filter="in_progress">
				<p class="text-[11px] uppercase tracking-wide text-muted-foreground dark:text-gray-400">
					<?= lang('in_progress') . ' ' . lang('tickets') ?>
				</p>
				<p class="mt-2 text-2xl font-semibold text-foreground dark:text-gray-100">
					<?= $in_progress ?>
				</p>
			</button>

			<button type="button"
				class="ticket-state-filter rounded-xl border border-border bg-white p-4 text-left shadow-sm transition-colors hover:border-slate-300 dark:bg-gray-800 dark:border-gray-700 dark:hover:border-gray-500"
				data-filter="open">
				<p class="text-[11px] uppercase tracking-wide text-muted-foreground dark:text-gray-400">
					<?= lang('open') . ' ' . lang('tickets') ?>
				</p>
				<p class="mt-2 text-2xl font-semibold text-foreground dark:text-gray-100">
					<?= $open ?>
				</p>
			</button>

			<button type="button"
				class="ticket-state-filter rounded-xl border border-border bg-white p-4 text-left shadow-sm transition-colors hover:border-slate-300 dark:bg-gray-800 dark:border-gray-700 dark:hover:border-gray-500"
				data-filter="closed">
				<p class="text-[11px] uppercase tracking-wide text-muted-foreground dark:text-gray-400">
					<?= lang('closed') . ' ' . lang('tickets') ?>
				</p>
				<p class="mt-2 text-2xl font-semibold text-foreground dark:text-gray-100">
					<?= $closed ?>
				</p>
			</button>
		</div>
	</div>

	<div class="rounded-2xl border border-border bg-card shadow-sm">
		<div class="flex flex-wrap items-center gap-3 border-b border-border px-4 py-3">
			<div class="flex flex-wrap items-center gap-2">
				<?php foreach ($status_filters as $key => $label) { ?>
					<button type="button"
						class="tickets-filter rounded-full border border-border px-3 py-1.5 text-xs font-semibold text-foreground hover:border-primary <?= $key === '' ? 'bg-primary text-white border-primary' : ''; ?>"
						data-filter="<?= html_escape($key); ?>">
						<?= $label; ?>
					</button>
				<?php } ?>
			</div>
		</div>

		<div class="overflow-x-auto p-4">
			<table class="table table-striped DataTables min-w-[900px] whitespace-nowrap" id="DataTables" cellspacing="0" width="100%">
				<thead>
				<tr>
					<th><?= lang('ticket_code') ?></th>
					<th><?= lang('subject') ?></th>
					<th class="col-date"><?= lang('date') ?></th>
					<?php if (!empty($role) && $role == '1') { ?>
						<th><?= lang('reporter') ?></th>
					<?php } ?>
					<th><?= lang('department') ?></th>
					<th><?= lang('status') ?></th>
					<?php $show_custom_fields = custom_form_table(7, null);
					if (!empty($show_custom_fields)) {
						foreach ($show_custom_fields as $c_label => $v_fields) {
							if (!empty($c_label)) {
								?>
								<th><?= $c_label ?> </th>
							<?php }
						}
					}
					?>
					<th><?= lang('action') ?></th>
				</tr>
				</thead>
				<tbody>
				<?php
				if (!empty($all_tickets_info)) {
					foreach ($all_tickets_info as $v_tickets_info) {
						if ($v_tickets_info->status == 'open') {
							$s_label = 'danger';
						} elseif ($v_tickets_info->status == 'closed') {
							$s_label = 'success';
						} else {
							$s_label = 'default';
						}
						$profile_info = $this->db->where(array('user_id' => $v_tickets_info->reporter))->get('tbl_account_details')->row();
						$dept_info = $this->db->where(array('departments_id' => $v_tickets_info->departments_id))->get('tbl_departments')->row();
						$dept_name = !empty($dept_info) ? $dept_info->deptname : '-';
						?>
						<tr>
							<td><span class="label label-success"><?= $v_tickets_info->ticket_code ?></span></td>
							<td>
								<a class="text-info" href="<?= base_url() ?>client/tickets/index/tickets_details/<?= $v_tickets_info->tickets_id ?>">
									<?= $v_tickets_info->subject ?>
								</a>
							</td>
							<td><?= display_date($v_tickets_info->created); ?></td>
							<?php if (!empty($role) && $role == '1') { ?>
								<td>
									<div class="flex items-center gap-2">
										<?php if (!empty($profile_info)) { ?>
											<img style="width: 28px;height: 28px;border: 1px solid #aaa;" src="<?= base_url() . $profile_info->avatar ?>" class="img-circle">
										<?php } ?>
										<span><?= !empty($profile_info) ? $profile_info->fullname : '-' ?></span>
									</div>
								</td>
							<?php } ?>
							<td><?= $dept_name; ?></td>
							<?php
							if ($v_tickets_info->status == 'in_progress') {
								$status = 'In Progress';
							} else {
								$status = $v_tickets_info->status;
							}
							?>
							<td><span class="label label-<?= $s_label ?>"><?= ucfirst($status) ?></span></td>
							<?php
							$custom_form_table = custom_form_table(7, $v_tickets_info->tickets_id);
							if (!empty($custom_form_table)) {
								foreach ($custom_form_table as $c_label => $v_fields) {
									?>
									<td><?= $v_fields ?></td>
								<?php }
							}
							?>
							<td><?= btn_view('client/tickets/index/tickets_details/' . $v_tickets_info->tickets_id) ?></td>
						</tr>
						<?php
					}
				}
				?>
				</tbody>
			</table>
		</div>
		<script type="text/javascript">
			list = base_url + "client/tickets/ticketsList";

			function reloadTickets(filter) {
				var url = list;
				if (filter) {
					url += "/" + filter;
				}
				if (typeof table_url !== "undefined") {
					table_url(url);
				} else if (typeof fire_datatable === "function") {
					fire_datatable(url, "DataTables");
				}
			}

			document.addEventListener('DOMContentLoaded', function () {
				var ticketsFilters = document.querySelectorAll('.tickets-filter');
				var ticketStateFilters = document.querySelectorAll('.ticket-state-filter');

				if (ticketsFilters.length) {
					ticketsFilters.forEach(function (btn) {
						btn.addEventListener('click', function () {
							ticketsFilters.forEach(function (item) {
								item.classList.remove('bg-primary', 'text-white', 'border-primary');
							});
							btn.classList.add('bg-primary', 'text-white', 'border-primary');
							var filterBy = btn.getAttribute('data-filter') || '';
							reloadTickets(filterBy);
						});
					});
				}

				if (ticketStateFilters.length) {
					ticketStateFilters.forEach(function (btn) {
						btn.addEventListener('click', function () {
							var filterBy = btn.getAttribute('data-filter') || '';
							reloadTickets(filterBy);
						});
					});
				}
			});
		</script>
	</div>
</div>
