<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<?php
$edited = can_action('39', 'edited');
$deleted = can_action('39', 'deleted');

$group = $this->db->where('customer_group_id', $items_info->customer_group_id)->get('tbl_customer_group')->row();
$currency = $this->db->where('code', config_item('default_currency'))->get('tbl_currencies')->row();
$manufacturer_info = get_row('tbl_manufacturer', array('manufacturer_id' => $items_info->manufacturer_id));
$currency_symbol = !empty($currency->symbol) ? $currency->symbol : default_currency();

$tax_html = '-';
$tax_rates = null;
if (!empty($items_info->tax_rates_id) && !is_numeric($items_info->tax_rates_id)) {
	$tax_rates = json_decode((string) $items_info->tax_rates_id);
}
if (!empty($tax_rates)) {
	$tax_rows = array();
	foreach ($tax_rates as $key => $tax_id) {
		$taxes_info = $this->db->where('tax_rates_id', $tax_id)->get('tbl_tax_rates')->row();
		if (!empty($taxes_info)) {
			$tax_rows[] = '<div>' . ($key + 1) . '. ' . html_escape($taxes_info->tax_rate_name) . ' (' . html_escape($taxes_info->tax_rate_percent) . '%)</div>';
		}
	}
	if (!empty($tax_rows)) {
		$tax_html = '<div class="space-y-1">' . implode('', $tax_rows) . '</div>';
	}
}

$invoice_view = config_item('invoice_view');
$group_name = !empty($group->customer_group) ? $group->customer_group : '-';
$manufacturer_name = !empty($manufacturer_info->manufacturer) ? $manufacturer_info->manufacturer : '-';
$company_name = config_item('company_name') ?: config_item('website_name');
$company_address = config_item('company_address') ?: '';
$uploaded_file = array();
if (!empty($items_info->upload_file)) {
	$uploaded_file = json_decode($items_info->upload_file);
}
$details_rows = array(
	array('label' => lang('name'), 'value' => $items_info->item_name),
	array('label' => lang('code'), 'value' => !empty($items_info->code) ? $items_info->code : '-'),
	array('label' => lang('barcode_symbology'), 'value' => !empty($items_info->barcode_symbology) ? $items_info->barcode_symbology : '-'),
	array('label' => lang('group'), 'value' => $group_name),
	array('label' => lang('manufacturer'), 'value' => $manufacturer_name),
	array('label' => lang('unit') . ' ' . lang('type'), 'value' => !empty($items_info->unit_type) ? $items_info->unit_type : '-'),
);

if (!empty($invoice_view) && $invoice_view == '2') {
	$details_rows[] = array('label' => lang('hsn_code'), 'value' => !empty($items_info->hsn_code) ? $items_info->hsn_code : '-');
}
$pdf_url = base_url('admin/items/items_details_pdf/' . $items_info->saved_items_id);
?>

<style>
	.item-print-header {
		display: none;
	}

	@media print {
		@page {
			size: A4;
			margin: 12mm;
		}

		html,
		body {
			background: #ffffff !important;
			color: #111827 !important;
			font-size: 11px !important;
			line-height: 1.35 !important;
		}

		body * {
			visibility: hidden !important;
		}

		#print_items,
		#print_items * {
			visibility: visible !important;
		}

		#print_items {
			position: absolute !important;
			inset: 0 auto auto 0 !important;
			width: 100% !important;
			max-width: none !important;
			padding: 0 !important;
			background: #ffffff !important;
			display: block !important;
			gap: 0 !important;
		}

		.item-details-actions,
		#app-sidebar-shell,
		#app-header-shell,
		#app-topbar-preload,
		[data-dismiss="modal"] {
			display: none !important;
		}

		.item-print-header {
			display: table !important;
			width: 100% !important;
			margin: 0 0 14px !important;
			padding: 0 0 12px !important;
			border-bottom: 2px solid #111827 !important;
		}

		.item-print-brand,
		.item-print-title {
			display: table-cell !important;
			vertical-align: top !important;
		}

		.item-print-brand strong {
			display: block !important;
			font-size: 18px !important;
			line-height: 1.2 !important;
			color: #111827 !important;
		}

		.item-print-brand span {
			display: block !important;
			margin-top: 3px !important;
			font-size: 10px !important;
			color: #64748b !important;
		}

		.item-print-title {
			text-align: right !important;
			font-size: 22px !important;
			font-weight: 800 !important;
			color: #0f766e !important;
		}

		#print_items > .rounded-2xl:first-of-type {
			margin: 0 0 12px !important;
			padding: 14px !important;
			border: 1px solid #dbe3ea !important;
			border-radius: 10px !important;
			background: #f8fafc !important;
		}

		#print_items > .rounded-2xl:first-of-type > .flex {
			display: block !important;
		}

		#print_items > .rounded-2xl:first-of-type .inline-flex:first-child {
			display: none !important;
		}

		#print_items h2 {
			margin: 0 0 6px !important;
			font-size: 22px !important;
			line-height: 1.2 !important;
			font-weight: 800 !important;
			color: #111827 !important;
		}

		#print_items h3 {
			margin: 0 !important;
			font-size: 10px !important;
			letter-spacing: .08em !important;
			text-transform: uppercase !important;
			color: #334155 !important;
		}

		#print_items .flex.flex-wrap.items-center.gap-2 {
			display: block !important;
			margin-top: 6px !important;
		}

		#print_items .flex.flex-wrap.items-center.gap-2 span {
			display: inline-block !important;
			margin: 3px 4px 0 0 !important;
			padding: 4px 8px !important;
			border: 1px solid #cbd5e1 !important;
			border-radius: 999px !important;
			background: #ffffff !important;
			font-size: 9px !important;
			font-weight: 700 !important;
			color: #334155 !important;
		}

		#print_items > .rounded-2xl:first-of-type > .mt-5.grid {
			display: grid !important;
			grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
			gap: 8px !important;
			margin-top: 12px !important;
		}

		#print_items > .rounded-2xl:first-of-type > .mt-5.grid > div {
			padding: 9px !important;
			border: 1px solid #dbe3ea !important;
			border-radius: 8px !important;
			background: #ffffff !important;
		}

		#print_items > .grid {
			display: grid !important;
			grid-template-columns: 175px minmax(0, 1fr) !important;
			gap: 12px !important;
			margin-top: 0 !important;
		}

		#print_items > .grid > .space-y-5,
		#print_items .space-y-5 {
			display: block !important;
		}

		#print_items .space-y-5 > * + * {
			margin-top: 12px !important;
		}

		#print_items .border-b {
			border-bottom: 1px solid #dbe3ea !important;
			background: #f1f5f9 !important;
			padding: 8px 10px !important;
		}

		#print_items .p-5 {
			padding: 10px !important;
		}

		#product-image {
			width: 150px !important;
			height: 150px !important;
			aspect-ratio: auto !important;
			padding: 5px !important;
			border: 1px solid #dbe3ea !important;
			border-radius: 9px !important;
			background: #ffffff !important;
		}

		#product-image img {
			width: 100% !important;
			height: 100% !important;
			object-fit: contain !important;
			border-radius: 6px !important;
		}

		#product-image-wrap > .grid {
			display: none !important;
		}

		#print_items .md\:grid-cols-2 {
			display: grid !important;
			grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
			gap: 8px !important;
		}

		#print_items .md\:col-span-2 {
			grid-column: span 2 / span 2 !important;
		}

		#print_items .md\:grid-cols-2 > div,
		#print_items .mb-4.grid > div {
			padding: 9px !important;
			border: 1px solid #dbe3ea !important;
			border-radius: 8px !important;
			background: #ffffff !important;
		}

		#print_items .mb-4.grid {
			display: grid !important;
			grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
			gap: 8px !important;
			margin-bottom: 10px !important;
		}

		#print_items .overflow-x-auto {
			overflow: visible !important;
		}

		#print_items .mt-3 {
			margin-top: 6px !important;
		}

		#print_items .px-4.py-4 {
			padding: 9px !important;
		}

		#print_items .bcimg {
			max-width: 220px !important;
			height: auto !important;
		}

		#print_items .rounded-2xl,
		#print_items .rounded-xl {
			border-radius: 8px !important;
		}

		#print_items .bg-card,
		#print_items .bg-background,
		#print_items .bg-muted\/20,
		#print_items .bg-muted\/30 {
			background: #ffffff !important;
		}

		#print_items .border,
		#print_items .border-border {
			border-color: #d1d5db !important;
		}

		#print_items .shadow-sm {
			box-shadow: none !important;
		}

		#print_items p,
		#print_items td,
		#print_items th,
		#print_items span,
		#print_items div {
			color: #111827 !important;
		}

		#print_items .text-muted-foreground {
			color: #6b7280 !important;
		}

		#print_items table {
			border-collapse: collapse !important;
			width: 100% !important;
		}

		#print_items th {
			background: #f8fafc !important;
			font-size: 9px !important;
			text-transform: uppercase !important;
			letter-spacing: .06em !important;
			color: #475569 !important;
		}

		#print_items th,
		#print_items td {
			padding: 7px 8px !important;
			border-bottom: 1px solid #e5e7eb !important;
		}

		#print_items tr,
		#print_items .barcode-card,
		#print_items .rounded-xl,
		#print_items .rounded-2xl {
			break-inside: avoid;
			page-break-inside: avoid;
		}
	}
</style>

<div id="print_items" class="space-y-5">
	<div class="item-print-header">
		<div class="item-print-brand">
			<strong><?= html_escape($company_name ?: '-') ?></strong>
			<?php if (!empty($company_address)) { ?>
				<span><?= html_escape($company_address) ?></span>
			<?php } ?>
			<span><?= html_escape(display_date(date('Y-m-d'))) ?></span>
		</div>
		<div class="item-print-title"><?= html_escape(lang('items_details')) ?></div>
	</div>
	<div class="rounded-2xl border border-border bg-card p-5 shadow-sm md:p-6">
		<div class="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
			<div class="space-y-2">
				<div class="inline-flex items-center gap-2 rounded-full border border-border bg-background px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
					<i data-lucide="package-search" class="h-3.5 w-3.5"></i>
					<?= lang('items') ?>
				</div>
				<h2 class="text-2xl font-semibold text-foreground"><?= html_escape($items_info->item_name); ?></h2>
				<div class="flex flex-wrap items-center gap-2">
					<span class="inline-flex items-center rounded-full border border-border bg-background px-3 py-1 text-xs font-medium text-foreground"><?= lang('group') ?>: <?= html_escape($group_name) ?></span>
					<span class="inline-flex items-center rounded-full border border-border bg-background px-3 py-1 text-xs font-medium text-foreground"><?= lang('manufacturer') ?>: <?= html_escape($manufacturer_name) ?></span>
					<?php if (!empty($items_info->code)) { ?>
						<span class="inline-flex items-center rounded-full border border-border bg-background px-3 py-1 text-xs font-medium text-foreground"><?= lang('code') ?>: <?= html_escape($items_info->code) ?></span>
					<?php } ?>
				</div>
			</div>
			<div class="item-details-actions flex flex-wrap items-center gap-2">
				<button type="button" class="inline-flex h-9 items-center gap-2 rounded-lg border border-border bg-background px-3 text-xs font-semibold text-foreground hover:bg-muted" onclick="print_items('print_items')">
					<i data-lucide="printer" class="h-4 w-4"></i>
					<?= lang('print'); ?>
				</button>
				<a class="inline-flex h-9 items-center gap-2 rounded-lg border border-sky-200 bg-sky-50 px-3 text-xs font-semibold text-sky-700 shadow-sm hover:bg-sky-100 dark:border-sky-800 dark:bg-sky-900/30 dark:text-sky-300 dark:hover:bg-sky-900/40" href="<?= $pdf_url ?>" target="_blank">
					<i data-lucide="file-text" class="h-4 w-4"></i>
					<?= lang('pdf'); ?>
				</a>
				<?php if (!empty($edited)) { ?>
					<a class="inline-flex h-9 items-center gap-2 rounded-lg bg-primary px-3 text-xs font-semibold text-white shadow-sm hover:bg-primary/90" href="<?= base_url('admin/items/new_items/' . $items_info->saved_items_id); ?>">
						<i data-lucide="pencil" class="h-4 w-4"></i>
						<?= lang('edit'); ?>
					</a>
				<?php } ?>
				<button type="button" class="inline-flex h-9 items-center gap-2 rounded-lg border border-border bg-background px-3 text-xs font-semibold text-foreground hover:bg-muted" data-dismiss="modal">
					<i data-lucide="x" class="h-4 w-4"></i>
					<?= lang('close'); ?>
				</button>
			</div>
		</div>

		<div class="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
			<div class="rounded-xl border border-border bg-card p-3">
				<p class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('code') ?></p>
				<p class="mt-2 text-sm font-medium text-foreground"><?= !empty($items_info->code) ? html_escape($items_info->code) : '-' ?></p>
			</div>
			<div class="rounded-xl border border-border bg-card p-3">
				<p class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('unit_price') ?></p>
				<p class="mt-2 text-sm font-medium text-foreground"><?= display_money($items_info->unit_cost, $currency_symbol) ?></p>
			</div>
			<div class="rounded-xl border border-border bg-card p-3">
				<p class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('cost_price') ?></p>
				<p class="mt-2 text-sm font-medium text-foreground"><?= display_money($items_info->cost_price, $currency_symbol) ?></p>
			</div>
			<div class="rounded-xl border border-border bg-card p-3">
				<p class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('unit') . ' ' . lang('type') ?></p>
				<p class="mt-2 text-sm font-medium text-foreground"><?= !empty($items_info->unit_type) ? html_escape($items_info->unit_type) : '-' ?></p>
			</div>
		</div>
	</div>

	<div class="grid gap-5 lg:grid-cols-[320px_1fr]">
		<div class="space-y-5">
			<div class="rounded-2xl border border-border bg-card shadow-sm">
				<div class="border-b border-border px-5 py-4">
					<h3 class="text-sm font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('image') ?></h3>
				</div>
				<div class="p-5">
					<div id="product-image-wrap" class="space-y-3">
						<?php if (!empty($uploaded_file)) { ?>
							<?php
							if (!empty($uploaded_file[0]->is_image) && $uploaded_file[0]->is_image == 1) {
								$imageURL = base_url($uploaded_file[0]->path);
							} else {
								$imageURL = base_url('assets/img/filepreview.jpg');
							}
							?>
							<div id="product-image" class="aspect-square overflow-hidden rounded-xl border border-border bg-muted/20 p-2">
								<img src="<?= $imageURL ?>" id="0" class="h-full w-full rounded-lg object-cover" alt="<?= $uploaded_file[0]->fileName ?>">
							</div>

							<div class="grid grid-cols-4 gap-2">
								<?php foreach ($uploaded_file as $key => $v_files_image) { ?>
									<?php
									if (!empty($v_files_image->is_image) && $v_files_image->is_image == 1) {
										$imageURL = base_url($v_files_image->path);
									} else {
										$imageURL = base_url('assets/img/filepreview.jpg');
									}
									?>
									<div class="rounded-lg border border-border bg-background p-1">
										<img src="<?= $imageURL ?>" id="<?= $key + 1 ?>" class="h-16 w-full rounded-md object-cover" onclick="preview(this)" alt="<?= $v_files_image->fileName ?>">
									</div>
								<?php } ?>
							</div>
						<?php } else { ?>
							<div class="rounded-xl border border-dashed border-border bg-muted/20 px-4 py-12 text-center text-sm text-muted-foreground">
								<?= lang('no_file_uploaded'); ?>
							</div>
						<?php } ?>
					</div>
				</div>
			</div>
		</div>

		<div class="space-y-5">
			<div class="rounded-2xl border border-border bg-card shadow-sm">
				<div class="border-b border-border px-5 py-4">
					<h3 class="text-sm font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('item') . ' ' . lang('details'); ?></h3>
				</div>
				<div class="grid gap-3 p-5 md:grid-cols-2">
					<?php foreach ($details_rows as $row) { ?>
						<div class="rounded-xl border border-border bg-background p-4">
							<p class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"><?= html_escape($row['label']) ?></p>
							<p class="mt-2 text-sm font-medium text-foreground"><?= html_escape($row['value']) ?></p>
						</div>
					<?php } ?>
					<div class="rounded-xl border border-border bg-background p-4 md:col-span-2">
						<p class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('barcode') ?></p>
						<div class="mt-3 overflow-x-auto rounded-lg border border-border bg-card px-4 py-4">
							<?= !empty($barcode) ? $barcode : '-' ?>
						</div>
					</div>
					<div class="rounded-xl border border-border bg-background p-4 md:col-span-2">
						<p class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('tax') ?></p>
						<div class="mt-2 text-sm text-foreground"><?= $tax_html ?></div>
					</div>
				</div>
			</div>

			<?php if (!empty(admin()) && !empty($warehouse_info)) { ?>
				<div class="rounded-2xl border border-border bg-card shadow-sm">
					<div class="border-b border-border px-5 py-4">
						<h3 class="text-sm font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('warehouse') ?></h3>
					</div>
					<div class="p-5">
						<div class="mb-4 grid gap-3 sm:grid-cols-3">
							<?php foreach ($warehouse_info as $warehouse) { ?>
								<div class="rounded-xl border border-border bg-background p-3">
									<p class="truncate text-sm font-medium text-foreground"><?= html_escape($warehouse->warehouse_name); ?></p>
									<p class="mt-1 text-xs text-muted-foreground"><?= lang('quantity'); ?></p>
									<p class="mt-1 text-lg font-semibold text-foreground"><?= html_escape($warehouse->quantity); ?></p>
								</div>
							<?php } ?>
						</div>
						<div class="overflow-x-auto rounded-xl border border-border">
							<table class="min-w-full text-sm">
								<thead class="bg-muted/30 text-[11px] uppercase tracking-wide text-muted-foreground">
									<tr>
										<th class="px-4 py-3 text-left"><?= lang('warehouse') ?></th>
										<th class="px-4 py-3 text-right"><?= lang('quantity') ?></th>
									</tr>
								</thead>
								<tbody class="divide-y divide-border">
									<?php foreach ($warehouse_info as $warehouse) { ?>
										<tr>
											<td class="px-4 py-3 text-foreground"><?= html_escape($warehouse->warehouse_name); ?></td>
											<td class="px-4 py-3 text-right font-medium text-foreground"><?= html_escape($warehouse->quantity); ?></td>
										</tr>
									<?php } ?>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			<?php } elseif (!empty($staff_warehouse_info)) { ?>
				<div class="rounded-2xl border border-border bg-card shadow-sm">
					<div class="border-b border-border px-5 py-4">
						<h3 class="text-sm font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('warehouse') ?></h3>
					</div>
					<div class="p-5 text-sm text-foreground">
						<div class="rounded-xl border border-border bg-background p-4">
							<p class="text-sm font-medium text-foreground"><?= html_escape($staff_warehouse_info->warehouse_name); ?></p>
							<p class="mt-1 text-xs text-muted-foreground"><?= lang('quantity'); ?></p>
							<p class="mt-1 text-lg font-semibold text-foreground"><?= html_escape($staff_warehouse_info->quantity); ?></p>
						</div>
					</div>
				</div>
			<?php } ?>

			<?php if (!empty($items_info->item_desc)) { ?>
				<div class="rounded-2xl border border-border bg-card shadow-sm">
					<div class="border-b border-border px-5 py-4">
						<h3 class="text-sm font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('description'); ?></h3>
					</div>
					<div class="p-5 text-sm leading-6 text-foreground">
						<?= strip_html_tags($items_info->item_desc); ?>
					</div>
				</div>
			<?php } ?>
		</div>
	</div>
</div>

<script type="text/javascript">
	var lastImg = null;
	var firstThumb = document.querySelector('#product-image-wrap img[id="1"]');
	if (firstThumb) {
		lastImg = firstThumb.id;
		firstThumb.classList.add('ring-2', 'ring-primary');
	}

	function preview(img) {
		if (lastImg) {
			var prev = document.getElementById(lastImg);
			if (prev) {
				prev.classList.remove('ring-2', 'ring-primary');
			}
		}
		img.classList.add('ring-2', 'ring-primary');
		if (document.getElementById(0)) {
			document.getElementById(0).src = img.src;
		}
		lastImg = img.id;
	}

	function print_items(print_items) {
		window.print();
	}
</script>
