<style>
	#cropImg {
		display: block;
		max-width: 100%;

	}

	.create-item-page .box-primary,
	.create-item-page .box-success,
	.create-item-page .create-item-card,
	.create-item-page .create-item-sidebar-card {
		border: 1px solid var(--border-color);
		border-radius: 24px;
		box-shadow: 0 24px 60px var(--box-shadow-soft);
		overflow: hidden;
	}

	.create-item-page .create-item-card {
		background: var(--card-background);
	}

	.create-item-page .create-item-sidebar-card {
		background: var(--card-background);
		margin-bottom: 24px;
	}

	.create-item-page .create-item-sticky {
		position: sticky;
		top: 90px;
	}

	.create-item-page .preview-toggle-wrap {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 12px;
	}

	.create-item-page .preview-toggle-btn {
		border: 1px solid var(--border-color);
		background: var(--card-background);
		color: var(--color);
	}

	.create-item-page .preview-toggle-btn .toggle-text-alt {
		display: none;
	}

	.create-item-page .create-item-sticky.is-collapsed .toggle-text {
		display: none;
	}

	.create-item-page .create-item-sticky.is-collapsed .toggle-text-alt {
		display: inline;
	}

	.create-item-page .create-item-floating-panel {
		transition: opacity .2s ease, transform .2s ease, max-height .25s ease, margin .25s ease;
	}

	.create-item-page .create-item-sticky.is-collapsed .create-item-floating-panel {
		opacity: 0;
		transform: translateY(-6px);
		max-height: 0;
		overflow: hidden;
		margin: 0;
		pointer-events: none;
	}

	.create-item-page .create-item-header {
		padding: 26px 30px 18px;
		border-bottom: 1px solid var(--border-color);
		background: linear-gradient(135deg, var(--soft-background), var(--card-background));
	}

	.create-item-page .create-item-header h4,
	.create-item-page .create-item-sidebar-card h4,
	.create-item-page .create-item-sidebar-card h3 {
		margin: 0;
		font-weight: 700;
	}

	.create-item-page .create-item-kicker {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 7px 14px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.88);
		color: var(--color);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		box-shadow: 0 10px 25px var(--box-shadow);
		margin-bottom: 12px;
		border: 1px solid var(--border-color);
	}

	.create-item-page .create-item-subtitle {
		margin: 10px 0 0;
		max-width: 720px;
		color: var(--color);
		font-size: 14px;
		line-height: 1.7;
		opacity: .8;
	}

	.create-item-page .card-body {
		padding: 30px;
	}

	.create-item-page .create-item-section {
		margin-bottom: 28px;
		padding-bottom: 22px;
		border-bottom: 1px solid var(--border-color);
	}

	.create-item-page .create-item-section:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.create-item-page .create-item-section-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-bottom: 16px;
	}

	.create-item-page .create-item-section-title h5 {
		margin: 0;
		font-size: 17px;
		font-weight: 700;
		color: var(--color);
	}

	.create-item-page .create-item-section-title p {
		margin: 6px 0 0;
		color: var(--color);
		font-size: 13px;
		opacity: .8;
	}

	.create-item-page .create-item-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 34px;
		height: 34px;
		padding: 0 12px;
		border-radius: 999px;
		background: var(--soft-background);
		color: var(--color);
		font-size: 12px;
		font-weight: 700;
		border: 1px solid var(--border-color);
	}

	.create-item-page .form-group label {
		font-weight: 700;
		color: var(--color);
		margin-bottom: 8px;
	}

	/* .create-item-page .form-control,
	.create-item-page .select2-selection--single,
	.create-item-page .select2-selection--multiple {
		min-height: 48px;
		border-radius: 14px !important;
		border-color: var(--border-color) !important;
		box-shadow: none !important;
		background: var(--background-color) !important;
		color: var(--color) !important;
	}

	.create-item-page textarea.form-control {
		min-height: 120px;
		padding-top: 13px;
	}

	.create-item-page .input-group-addon,
	.create-item-page .input-group-btn .btn,
	.create-item-page .btn {
		border-radius: 14px;
	}

	.create-item-page .input-group-addon.btn.btn-info,
	.create-item-page .aiBtn.btn-block {
		background: var(--soft-background);
		border-color: var(--border-color);
		color: var(--color);
	} */

	.create-item-page .defaultImg,
	.create-item-page .singleEximg {
		border-radius: 20px;
	}

	.create-item-page .card-footer {
		padding: 22px 30px 30px;
		border-top: 1px solid var(--border-color);
		background: var(--card-background);
	}

	.create-item-page .create-item-actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		flex-wrap: wrap;
	}

	.create-item-page .create-item-actions .btn {
		min-width: 160px;
		height: 46px;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.w_100p {
		width: 100%;
	}

	.create-item-page .create-item-sidebar-card .card-body {
		padding: 24px;
	}

	.create-item-page .create-item-preview {
		padding: 18px;
		border-radius: 22px;
		background: var(--background-color);
		border: 1px solid var(--border-color);
	}

	.create-item-page .create-item-preview-media {
		height: 180px;
		border-radius: 18px;
		background: var(--soft-background);
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		margin-bottom: 18px;
	}

	.create-item-page .create-item-preview-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.create-item-page .create-item-preview-placeholder {
		text-align: center;
		color: var(--color);
		opacity: .75;
	}

	.create-item-page .create-item-preview-placeholder i {
		font-size: 34px;
		margin-bottom: 10px;
	}

	.create-item-page .create-item-preview-category {
		display: inline-flex;
		align-items: center;
		padding: 6px 12px;
		border-radius: 999px;
		background: var(--soft-background);
		color: var(--color);
		font-size: 12px;
		font-weight: 700;
		margin-bottom: 12px;
		border: 1px solid var(--border-color);
	}

	.create-item-page .create-item-preview h3 {
		margin: 0 0 8px;
		font-size: 24px;
		font-weight: 800;
		color: var(--color);
	}

	.create-item-page .create-item-preview p {
		color: var(--color);
		line-height: 1.7;
		margin-bottom: 16px;
		opacity: .8;
	}

	.create-item-page .create-item-preview-meta {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.create-item-page .create-item-preview-stat {
		padding: 12px 14px;
		border-radius: 16px;
		background: var(--card-background);
		border: 1px solid var(--border-color);
	}

	.create-item-page .create-item-preview-stat span {
		display: block;
		font-size: 11px;
		font-weight: 700;
		color: var(--color);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		margin-bottom: 6px;
		opacity: .7;
	}

	.create-item-page .create-item-preview-stat strong {
		display: block;
		font-size: 15px;
		color: var(--color);
	}

	.create-item-page .create-item-list {
		margin: 18px 0 0;
		padding: 0;
		list-style: none;
	}

	.create-item-page .create-item-list li {
		display: flex;
		gap: 12px;
		align-items: flex-start;
		padding: 12px 0;
		border-bottom: 1px solid var(--border-color);
		color: var(--color);
	}

	.create-item-page .create-item-list li:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}

	.create-item-page .create-item-list i {
		width: 18px;
		margin-top: 3px;
		color: var(--color);
		opacity: .7;
	}

	.create-item-page .create-item-quicknav a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 13px 16px;
		border-radius: 16px;
		background: var(--background-color);
		color: var(--color);
		font-weight: 700;
		margin-bottom: 10px;
		transition: all 0.2s ease;
		border: 1px solid var(--border-color);
	}

	.create-item-page .create-item-quicknav a:hover {
		background: var(--soft-background);
		color: var(--color);
		text-decoration: none;
		transform: translateY(-1px);
	}

	.create-item-page .create-item-meta-card {
		padding: 18px;
		border-radius: 18px;
		background: var(--background-color);
		border: 1px solid var(--border-color);
		margin-bottom: 16px;
	}

	.create-item-page .create-item-meta-card h5 {
		margin: 0 0 8px;
		font-weight: 700;
		color: var(--color);
	}

	.create-item-page .create-item-meta-card p,
	.create-item-page .create-item-meta-card small,
	.create-item-page .create-item-actions span,
	.create-item-page .text-muted {
		color: var(--color) !important;
		opacity: .8;
	}

	.create-item-page .create-item-seo-title {
		font-size: 18px;
		font-weight: 700;
		color: var(--color);
		margin-bottom: 6px;
	}

	.create-item-page .create-item-seo-keywords,
	.create-item-page .create-item-seo-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 10px;
	}

	.create-item-page .create-item-seo-chip {
		display: inline-flex;
		align-items: center;
		padding: 6px 12px;
		border-radius: 999px;
		border: 1px solid var(--border-color);
		background: var(--soft-background);
		color: var(--color);
		font-size: 12px;
		font-weight: 600;
	}

	.create-item-page .create-item-right-section {
		margin-bottom: 18px;
	}

	.create-item-page .create-item-right-section .create-item-sidebar-card {
		margin-bottom: 16px;
	}

	.create-item-page .create-item-right-section .create-item-sidebar-card:last-child {
		margin-bottom: 0;
	}

	.create-item-page .create-item-right-section label {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	.create-item-page .create-item-right-group {
		margin-top: 14px;
	}

	.create-item-page .create-item-seo-url {
		font-size: 12px;
		word-break: break-all;
		margin-bottom: 8px;
	}

	.create-item-page .create-item-actions strong {
		color: var(--color);
	}

	.create-item-page .nav-tabs {
		border-bottom-color: var(--border-color);
	}

	.create-item-page .nav-tabs>li>a {
		color: var(--color);
		border-radius: 12px 12px 0 0;
	}

	@media only screen and (max-width: 991px) {
		.create-item-page .create-item-sticky {
			position: static;
		}

		.create-item-page .card-body,
		.create-item-page .card-footer,
		.create-item-page .create-item-header {
			padding-left: 20px;
			padding-right: 20px;
		}
	}

	.cropingArea {
		height: 400px;
		width: 100%;
		position: relative;
	}

	.showCroppingArea {
		width: 100%;
		height: 100%;
	}

	fieldset {
		margin-bottom: 2rem;
	}
</style>
<?php $get = $this->input->get(null, true); ?>
<?php $multilang = isset(restaurant()->is_multi_lang) && restaurant()->is_multi_lang == 1 ? 1 : 0; ?>
<?php if ($this->admin_m->count_table_user_id('menu_type') == 0) : ?>
	<div class="row">
		<div class="col-md-6">
			<div class="single_alert alert alert-warning alert-dismissible">
				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
				<div class="d_flex_alert">
					<h4><i class="icon fas fa-warning"></i> <?= lang('warning'); ?></h4>
					<div class="double_text">
						<div class="text-left">
							<h5><?= lang('insert_category'); ?></h5>
						</div>
						<a href="<?= base_url('admin/menu/category/'); ?>" class="re_url"><?= lang('click_here'); ?></a>
					</div>
				</div>
			</div>
		</div>
	</div>
<?php endif; ?>

<?php if ($this->admin_m->count_table_user_id('item_sizes') == 0) : ?>
	<div class="row hidden">
		<div class="col-md-6">
			<div class="single_alert alert alert-warning alert-dismissible">
				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
				<div class="d_flex_alert">
					<h4><i class="icon fas fa-warning"></i> <?= lang('warning'); ?></h4>
					<div class="double_text">
						<div class="text-left">
							<h5><?= lang('insert_item_size'); ?></h5>
							<p><?= lang('insert_item_size_msg'); ?></p>
						</div>
						<a href="<?= base_url('admin/menu/category/'); ?>" class="re_url"><?= lang('click_here'); ?></a>
					</div>
				</div>
			</div>
		</div>
	</div>
<?php endif; ?>

<div class="row">
	<?php include 'inc/limit_counter.php'; ?>
</div>
<?php if (isset($get['action']) && $get['action'] == 'copy') : ?>
	<div class="row">
		<?php if ($multilang == 1) : ?>
			<?php
			$controller = $this->uri->rsegment(1); // The Controller
			$function = $this->uri->rsegment(2);
			$params = $this->uri->rsegment(3);

			?>

			<div class="col-md-3">
				<div class="card">
					<select name="lang" class="form-control" onchange="location=this.value">
						<?php foreach (shop_languages(auth('id')) as $key => $row) : ?>
							<option value="<?= base_url("admin/{$controller}/{$function}/{$params}?action=copy&lang={$row->slug}"); ?>" <?= $lang == $row->slug ? "selected" : ""; ?>><?= $row->lang_name; ?></option>
						<?php endforeach; ?>
					</select>
				</div>
			</div>
		<?php endif; ?>
	</div>
<?php endif ?>

<?php $lang = isset($get['lang']) ? $get['lang'] : site_lang(); ?>
<?php $seo = isset($data['seo_config']) && !empty($data['seo_config']) ? json_decode($data['seo_config'], true) : []; ?>
<form action="<?= base_url('admin/menu/add_items') ?>" method="post" class="form-submit" enctype="multipart/form-data">
	<!-- csrf token -->
	<input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>">
	<?php $cat_id = isset($get['cat']) && !empty($get['cat']) ? $get['cat'] : (isset($data['cat_id']) ? $data['cat_id'] : 0); ?>
	<div class="row create-item-page"> <!-- create-item-page -->
		<div class="col-md-7">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title"><?= !empty(lang('add_items')) ? lang('add_items') : "add items"; ?> - <small class="text-mute"><i class="fa fa-language"></i> <?= lang_slug($get['lang'] ?? site_lang()); ?></small></h4>

				</div><!-- card-header -->
				<div class="card-body p-10">
					<fieldset class="itemFieldset">
						<legend><?= lang('basic_info'); ?></legend>
						<div class="row row-1">
							<div class="form-group col-md-6">
								<label for=""><?= !empty(lang('categories')) ? lang('categories') : "categories"; ?> <span class="error">*</span></label>
								<select name="cat_id" class="form-control" required>
									<option value=""><?= lang('select_category'); ?></option>
									<?php foreach ($menu_type as $key => $type) : ?>
										<option data-type="<?= html_escape($type['type']); ?>" <?= isset($data['cat_id']) && $data['cat_id'] == $type['category_id'] ? "selected" : ""; ?> <?= isset($cat_id) && $cat_id == md5($type['category_id']) ? "selected" : ""; ?> value="<?= $type['category_id']; ?>"><?= $type['name']; ?></option>
									<?php endforeach ?>
								</select>
							</div>
							<?php if (__sub() == 1) : ?>
								<?php if (isset($cat_id)): ?>
									<?php $isMd5 = preg_match('/^[a-f0-9]{32}$/i', $cat_id) ? true : false; ?>
									<?php $sub_category_list = $this->admin_m->get_subcategories_by_cat_id($cat_id, $_ENV['ID'], $is_md5 = $isMd5, $lang); ?>
								<?php endif ?>

								<div class="form-group col-md-6">
									<label for=""><?= !empty(lang('sub_categories')) ? lang('sub_categories') : "sub_categories"; ?></label>
									<select name="sub_category_id" class="form-control" id="sub_category">
										<option value=""><?= __('select'); ?></option>

										<?php if (isset($sub_category_list) && sizeof($sub_category_list) > 0) : ?>
											<?php foreach ($sub_category_list as $sub_cat) : ?>
												<option value="<?= $sub_cat['id']; ?>" <?= isset($sub_cat['id'], $data['sub_category_id']) && $sub_cat['id'] == $data['sub_category_id'] ? "selected" : ""; ?>><?= $sub_cat['sub_category_name']; ?></option>
											<?php endforeach ?>
										<?php else : ?>
											<option value=""><?= lang('select_category'); ?></option>
										<?php endif; ?>
									</select>
								</div>
							<?php endif; ?>
						</div> <!-- row-1 -->
					</fieldset>


					<fieldset class="itemFieldset">
						<legend><?= lang('pricing_inventory'); ?></legend>
						<div class="row row-2">
							<?php restaurant()->stock_status == 1 ? $is_stock = 1 : $is_stock = 0; ?>
							<div class="form-group <?= $is_stock == 1 ? "col-md-6" : "col-md-12"; ?>">
								<label for="title"><?= !empty(lang('title')) ? lang('title') : "Title"; ?> <span class="error">*</span></label>
								<div class="input-group">
									<input type="text" name="title" id="item_title" class="form-control" placeholder="<?= !empty(lang('item_name')) ? lang('item_name') : "item name"; ?>" value="<?= !empty($data['title']) ? html_escape($data['title']) : set_value('title'); ?>" required>
									<span class="input-group-addon btn btn-info" onclick="openAi('items', 'Title', '#item_title', {lang: '<?= $lang ?>'})" data-title="<?= __('ai_title_generator') ?>" data-toggle="tooltip">
										<i class="fa fa-robot"></i>
									</span>
								</div>
							</div>
							<?php if ($is_stock == 1) : ?>
								<div class="form-group <?= $is_stock == 1 ? "col-md-6" : "col-md-12"; ?>">
									<label><?= !empty(lang('in_stock')) ? lang('in_stock') : "in stock"; ?> <span class="error">*</span></label>

									<input type="text" name="in_stock" class="form-control" placeholder="<?= !empty(lang('in_stock')) ? lang('in_stock') : "in stock"; ?>" value="<?= !empty($data['in_stock']) ? html_escape($data['in_stock']) : 0; ?>">
								</div>
							<?php endif; ?>
						</div><!-- row-2 -->

						<div class="row row-3">
							<div class="form-group col-md-12 size_tag">
								<div class="d_flex_center">
									<label class="pointer label label bg-light-purple-soft vegs "><input <?= isset($data['is_size']) && $data['is_size'] == 1 ? 'checked' : ''; ?> type="checkbox" name="is_size" class="is_size defaultToggle" value="1">&nbsp; <?= !empty(lang('is_variants')) ? lang('is_variants') : "Is variants"; ?></label>
								</div>
							</div>
							<div class="rows show_price <?= isset($data['is_size']) && $data['is_size'] == 1 ? 'hidden' : ''; ?>">
								<div class="form-group col-md-6  ">
									<label for="price"><?= !empty(lang('current_price')) ? lang('current_price') : "Current price"; ?></label>
									<input type="text" name="price" id="price" class="form-control number" placeholder="<?= !empty(lang('price')) ? lang('price') : "price"; ?>" value="<?= !empty($data['price']) ? html_escape($data['price']) : set_value('price'); ?>">
								</div>
								<div class="form-group col-md-6">
									<label><?= __('previous_price'); ?></label>
									<input type="text" name="previous_price" class="form-control number" value="<?= !empty($data['previous_price']) ? html_escape($data['previous_price']) : set_value('previous_price'); ?>">
								</div>
							</div>

							<div class="col-md-12 show_size_price <?= isset($data['is_size']) && $data['is_size'] == 1 ? '' : 'hidden'; ?>">
								<div class="card mb-20">
									<div class="card-header space-between border-0">
										<h4><?= lang('variants'); ?></h4>
										<a href="#variantModal" data-toggle="modal" class="btn btn-secondary"><i class="fa fa-plus"></i><?= lang('add_variants'); ?></a>
									</div>
									<div class="card-body variant_body border-0 p-0">
										<div class="variantsLoad">
											<?php include APPPATH . 'views/backend/menu/inc/ajax_update_variants.php' ?>
										</div>
									</div>
								</div>
							</div>
						</div><!-- row-3 -->

					</fieldset>
					<fieldset>
						<legend><?= __('tax'); ?></legend>
						<div class="row row-4">
							<div class="form-group col-md-12 ml-0">
								<label><?= lang('tax_fee'); ?></label>
								<div class="row">

									<div class="col-md-6">
										<div class="input-group">
											<span class="input-group-addon">
												+
												<input type="hidden" name="tax_status" value="+">
											</span>
											<input type="number" name="tax_fee" id="tax_fee" class="form-control" placeholder="<?= !empty(lang('tax_fee')) ? lang('tax_fee') : "tax_fee"; ?>" value="<?= !empty($data['tax_fee']) ? html_escape($data['tax_fee']) : restaurant()->tax_fee; ?>">
											<span class="input-group-addon">%</span>
										</div>

									</div>
									<div class="col-md-12 ">
										<small><?= lang('price_tax_msg'); ?></small>
									</div>
								</div>
							</div>
						</div><!-- row-4 -->
					</fieldset>


					<fieldset>
						<legend><?= __('attributes_tags'); ?></legend>
						<div class="row row-5">
							<div class="form-group col-md-6">
								<label for=""><?= !empty(lang('veg_type')) ? lang('veg_type') : "Veg type"; ?></label>
								<div class="d_flex_center">
									<label class="pointer label success-light vegs"><input <?= isset($data['veg_type']) && $data['veg_type'] == 1 ? 'checked' : ''; ?> type="radio" name="veg_type" value="1">&nbsp; <?= !empty(lang('veg')) ? lang('veg') : "Veg"; ?></label>
									<label class="pointer label danger-light vegs"><input <?= isset($data['veg_type']) && $data['veg_type'] == 2 ? 'checked' : ''; ?> type="radio" name="veg_type" value="2">&nbsp; <?= !empty(lang('non_veg')) ? lang('non_veg') : "Non veg"; ?></label>

									<label class="pointer label default-light vegs"><input <?= isset($data['veg_type']) && $data['veg_type'] == 0 ? 'checked' : ''; ?> type="radio" name="veg_type" value="0">&nbsp; <?= lang('none'); ?></label>
								</div>
							</div>
						</div><!-- row-5 -->
						<div class="row row-6">
							<div class="form-group col-md-12">
								<label for=""><?= !empty(lang('allergens')) ? lang('allergens') : "allergens"; ?></label>
								<select name="allergen_id[]" class="form-control select2" id="" multiple style="min-height: 47px;">
									<option value=""><?= lang('select'); ?></option>
									<?php foreach ($allergens as $key => $value) : ?>
										<?php if (is_array(json_decode($data['allergen_id']))) : ?>
											<option <?= isset($data['allergen_id']) && in_array($value['id'], json_decode($data['allergen_id'])) == 1 ? "selected" : ""; ?> value="<?= $value['id']; ?>"><?= $value['name']; ?></option>
										<?php else : ?>
											<option <?= isset($data['allergen_id']) && $data['allergen_id'] == $value['id'] ? "selected" : ""; ?> value="<?= $value['id']; ?>"><?= $value['name']; ?></option>
										<?php endif; ?>
									<?php endforeach; ?>

								</select>
							</div><!-- row-6 -->
						</div>
						<div class="row row-7">
							<div class=" form-group col-md-12">
								<label><?= !empty(lang('small_description')) ? lang('small_description') : "small description"; ?> (<span class="characters small"></span>) <span class="error">*</span> </label>
								<div class="input-group">
									<textarea name="overview" id="item_overview" cols="5" rows="2" data-max="150" class="form-control count_text"><?= !empty($data['overview']) ? html_escape($data['overview']) : set_value('overview'); ?></textarea>
									<span class="input-group-addon btn btn-info" onclick="openAi('items', 'Description', '#item_overview', {lang: '<?= $lang ?>'})" data-title="<?= __('ai_overview_generator') ?>" data-toggle="tooltip">
										<i class="fa fa-robot"></i>
									</span>
								</div>
							</div>
						</div><!-- row-7 -->
						<div class="row row-8">
							<div class="form-group col-md-12">

								<label class="label label-info pointer label_input custom-checkbox mr-10"><input type="checkbox" name="is_features" <?= isset($data['is_features']) && $data['is_features'] == 1 ? 'checked' : ""; ?> value="1"> <?= lang('show_in_homepage'); ?></label>


								<?php if (is_highlight() == 1): ?>
									<label class="label label-danger pointer label_input custom-checkbox mr-10"><input type="checkbox" name="is_highlight" <?= isset($data['is_highlight']) && $data['is_highlight'] == 1 ? 'checked' : ""; ?> value="1"> <?= lang('mark_as_highlight'); ?></label>
								<?php endif; ?>

								<?php if (isset($get['action'])) : ?>
									<label class="label label-warning pointer label_input custom-checkbox ml-20"> <input type="checkbox" name="is_copy_extra" value="1"> <?= lang('add_those_extras_also'); ?></label>
								<?php endif; ?>
							</div>

							<div class="form-group col-md-12 mt-10">
								<label class="label success-light-active pl-3 label_input custom-radio"><input type="radio" name="is_pos_only" <?= isset($data['is_pos_only']) && $data['is_pos_only'] == 0 ? 'checked' : ""; ?> value="0" checked> <?= lang('all'); ?></label>
								<?php if (is_pos() == 1) : ?>
									<label class="label bg-purple-soft-active pl-3 label_input custom-radio"><input type="radio" name="is_pos_only" <?= isset($data['is_pos_only']) && $data['is_pos_only'] == 1 ? 'checked' : ""; ?> value="1"> <?= lang('only_for_pos'); ?></label>
								<?php endif ?>

								<label class="label primary-light-active pl-3 label_input custom-radio ml-10 <?= isset($data['is_size']) && $data['is_size'] == 1 ? "" : "hideArea" ?>"><input type="radio" name="is_pos_only" <?= isset($data['is_pos_only']) && $data['is_pos_only'] == 2 ? 'checked' : ""; ?> value="2"> <?= lang('only_for_package'); ?></label>

							</div>


						</div><!-- row-8 -->
						<div class="row mt-15 row-9">
							<div class="col-md-12 col-lg-12 col-sm-12">

								<ul class="nav nav-tabs">
									<li class="<?= !empty($data) ? "" : "active"; ?> <?= isset($data['img_type']) && $data['img_type'] == 1 ? 'active' : ''; ?>"><a data-toggle="tab" class="tab_li" data-value="img" href="#image_tab"><?= lang('image'); ?></a></li>
									<li class="<?= isset($data['img_type']) && $data['img_type'] == 2 ? 'active' : ''; ?>"><a data-toggle="tab" href="#link_tab" class="tab_li" data-value="link"><?= !empty(lang('img_url')) ? lang('img_url') : "Image URL"; ?></a></li>
								</ul>
								<div class="tab-content pt-10">
									<div id="image_tab" class="tab-pane <?= !empty($data) ? "" : "fade in active"; ?> <?= isset($data['img_type']) && $data['img_type'] == 1 ? 'fade in active' : ''; ?>">
										<div class="imgTab">
											<label class="defaultImg defultUpload">
												<?php if (!isset($get['action'])) : ?>
													<?php if (isset($data['id']) && !empty($data['id'])) : ?>
														<a href="<?= base_url('admin/restaurant/delete_img/' . $data['id'] . '/items'); ?>" class="deleteImg <?= isset($data['thumb']) && !empty($data['thumb']) ? "" : "opacity_0" ?>" data-msg="<?= !empty(lang('want_to_delete')) ? lang('want_to_delete') : "want to delete"; ?>"><i class="fa fa-close"></i></a>
													<?php endif; ?>
												<?php endif; ?>

												<img src="<?= isset($data['thumb']) && !empty($data['thumb']) ? base_url($data['thumb']) : "" ?>" alt="" class="imgPreview <?= isset($data['thumb']) && !empty($data['thumb']) ? "" : "opacity_0" ?>">

												<div class="imgPreviewDiv  <?= isset($data['thumb']) && !empty($data['thumb']) ? "opacity_0" : "" ?>">
													<i class="fa fa-upload"></i>
													<h4><?= lang('upload_image'); ?></h4>
													<p class="fw_normal mt-3"><?= lang('max'); ?>: 1000 x 900 px</p>
												</div>

												<input type="file" name="file[]" class="imgFile opacity_0" data-width="1000" data-height="900">
											</label>
											<!-- open with cropper -->
											<label class="defaultImg cropModalOpen <?= isset($data['thumb']) && !empty($data['thumb']) ? "opacity_0" : "" ?>">
												<?php if (!isset($get['action'])) : ?>
													<?php if (isset($data['id']) && !empty($data['id'])) : ?>
														<a href="<?= base_url('admin/restaurant/delete_img/' . $data['id'] . '/items'); ?>" class="deleteImg <?= isset($data['thumb']) && !empty($data['thumb']) ? "" : "opacity_0" ?>" data-msg="<?= !empty(lang('want_to_delete')) ? lang('want_to_delete') : "want to delete"; ?>"><i class="fa fa-close"></i></a>
													<?php endif; ?>
												<?php endif; ?>

												<img src="<?= isset($data['thumb']) && !empty($data['thumb']) ? base_url($data['thumb']) : "" ?>" alt="" class="imgPreview imgPreviewCrop <?= isset($data['thumb']) && !empty($data['thumb']) ? "" : "opacity_0" ?>">

												<div class="imgPreviewDiv imgPreviewDivCrop <?= isset($data['thumb']) && !empty($data['thumb']) ? "opacity_0" : "" ?>">
													<i class="fa fa-crop"></i>
													<h4><?= lang('upload_image'); ?></h4>
													<p class="fw_normal mt-3"><?= lang('upload_by_cropper'); ?></p>
												</div>


											</label>
											<!-- open with cropper -->

										</div>
										<button type="button" class="btn aiBtn btn-block" onclick="openAi('items', 'Image', '#item_img_url')" data-title="<?= __('ai_image_generator') ?>" data-toggle="tooltip">
											<i class="fa fa-robot"></i>
										</button>
										<span class="img_error"></span>
									</div>
									<div id="link_tab" class="tab-pane fade <?= isset($data['img_type']) && $data['img_type'] == 2 ? 'fade in active' : ''; ?>">
										<?php if (!empty($data['img_url'])) : ?>
											<img src="<?= $data['img_url']; ?>" alt="" class="urlimgPreview">
										<?php endif; ?>
										<div class="form-group">
											<label><?= !empty(lang('img_url')) ? lang('img_url') : "Image URL"; ?></label>
											<div class="inputFiled">
												<input type="text" name="img_url" id="item_img_url" class="form-control" value="<?= !empty($data['img_url']) ? $data['img_url'] : ""; ?>">
												<span class="input-group-btn hidden">
													<button type="button" class="btn-block btn btn-info" onclick="openAi('items', 'Image', '#item_img_url')">
														<i class="fa fa-robot"></i> AI
													</button>
												</span>
											</div>
										</div>
									</div>
									<input type="hidden" name="img_type" class="img_type" value="<?= isset($data['img_type']) ? $data['img_type'] : 1; ?>">
								</div><!-- Tab content -->


							</div>
						</div><!-- row-9 -->
					</fieldset>

				</div><!-- card-body -->
			</div><!-- card -->
		</div><!-- col-md-7 -->
		<div class="col-md-5">
			<div class="card">
				<div class="create-item-sticky" id="itemPreviewSticky">
					<div class="preview-toggle-wrap">
						<button type="button" class="btn preview-toggle-btn" id="toggleItemPreview">
							<i class="fa fa-eye"></i>
							<span class="toggle-text"> Hide Preview</span>
							<span class="toggle-text-alt"> Show Preview</span>
						</button>
					</div>
					<div class="create-item-floating-panel">
						<div class="card create-item-sidebar-card">
							<div class="card-body">
								<h4>Live Preview</h4>
								<p class="text-muted mt-5">Review the item card while you type so the page stays easier to use.</p>
								<div class="create-item-preview mt-15">
									<div class="create-item-preview-media">
										<img src="<?= isset($data['thumb']) && !empty($data['thumb']) ? base_url($data['thumb']) : ''; ?>" alt="" class="create-item-preview-image <?= isset($data['thumb']) && !empty($data['thumb']) ? '' : 'hidden'; ?>">
										<div class="create-item-preview-placeholder <?= isset($data['thumb']) && !empty($data['thumb']) ? 'hidden' : ''; ?>">
											<i class="fa fa-camera-retro"></i>
											<div>Item image preview</div>
										</div>
									</div>
									<div class="create-item-preview-category preview-category"><?= __('select'); ?></div>
									<h3 class="preview-title"><?= !empty($data['title']) ? html_escape($data['title']) : __('item_name'); ?></h3>
									<p class="preview-overview"><?= !empty($data['overview']) ? html_escape($data['overview']) : 'A short description preview will appear here.'; ?></p>
									<div class="create-item-preview-meta">
										<div class="create-item-preview-stat">
											<span>Price</span>
											<strong class="preview-price"><?= !empty($data['price']) ? html_escape($data['price']) : '--'; ?></strong>
										</div>
										<div class="create-item-preview-stat">
											<span>Stock</span>
											<strong class="preview-stock"><?= !empty($data['in_stock']) ? html_escape($data['in_stock']) : '0'; ?></strong>
										</div>
									</div>
									<hr>
									<div class="mt-20">
										<h5><?= __('meta_data'); ?></h5>
										<div class="create-item-seo-title preview-seo-title"><?= !empty($data['title']) ? html_escape($data['title']) : __('title'); ?></div>
										<div class="create-item-seo-url preview-seo-url hidden"><?= base_url('menu/item'); ?></div>
										<p class="preview-seo-description"><?= !empty($data['overview']) ? html_escape($data['overview']) : 'Your short description will act like a clean search preview here.'; ?></p>
										<div class="create-item-seo-keywords preview-seo-keywords">
											<span class="create-item-seo-chip"><?= __('keywords'); ?></span>
										</div>
										<div class="create-item-seo-tags preview-seo-tags">
											<span class="create-item-seo-chip"><?= __('desription'); ?></span>
										</div>
									</div>
									<hr>
									<p class="preview-details mt-20"><?= !empty($data['details']) ? character_limiter(strip_tags($data['details']), 180) : 'Detailed item content will appear here as a quick summary.'; ?></p>
								</div>


							</div>
						</div>
					</div>
				</div><!-- 	create-item-sticky -->
			</div><!-- card -->


			<div class="card">
				<div class="card-body p-10">
					<div class="row">
						<div class="col-md-12">
							<h5><?= !empty(lang('details')) ? lang('details') : "details"; ?> <button type="button" class="btn aiBtn btn-sm mt-2" onclick="openAi('items', 'Details', '#item_details', {lang: '<?= $lang ?>'})" data-title="<?= __('ai_description_generator') ?>" data-toggle="tooltip">
									<i class="fa fa-robot"></i> <?= __('ai_generate'); ?>
								</button></h5>
							<div class="form-group">
								<textarea name="details" id="item_details" cols="5" rows="6" class="form-control data_textarea" placeholder="Enter detailed item description..."><?= !empty($data['details']) ? html_escape($data['details']) : set_value('details'); ?></textarea>

							</div>
						</div>
					</div>
					<fieldset>
						<legend><?= __('meta_data'); ?></legend>
						<div class="create-item-right-group">
							<label for="seo_title"><?= __('title'); ?></label>
							<input type="text" name="seo_title" id="seo_title" class="form-control" value="<?= !empty($seo['seo_title']) ? html_escape($seo['seo_title']) : (!empty($data['title']) ? html_escape($data['title']) : ''); ?>" placeholder="Enter SEO title...">
						</div>

						<div class="create-item-right-group">
							<label for="seo_keywords"><?= __('keywords'); ?></label>
							<input type="text" name="seo_keywords" id="seo_keywords" class="form-control" value="<?= !empty($seo['seo_keywords']) ? html_escape($seo['seo_keywords']) : ''; ?>" placeholder="Enter keywords separated by commas...">
						</div>

						<div class="create-item-right-group">
							<label for="seo_description"><?= __('description'); ?></label>
							<input type="text" name="seo_description" id="seo_description" class="form-control" value="<?= !empty($seo['seo_description']) ? html_escape($seo['seo_description']) : ''; ?>" placeholder="Enter description...">
						</div>

					</fieldset>
				</div>
			</div><!-- card -->
			<div class="card mt-10">
				<div class="card-header space-between">
					<h5 class="card-title">
						<?= !empty(lang('images')) ? lang('images') : "images"; ?>
					</h5>
					<a href="#addimgModal" data-toggle="modal" class="btn btn-primary btn-sm">
						<i class="fa fa-plus"></i> <?= lang('add_more_image'); ?>
					</a>
				</div>
				<div class="card-body">
					<div class="extraImages">
						<?php if (!empty($data['extra_images'])) : ?>
							<?php $i = 1;
							foreach (json_decode($data['extra_images'], true) as $key => $img) : ?>
								<div class="singleEximg" id="hide_<?= $key;; ?>">
									<img src="<?= base_url($img['thumb']); ?>" alt="">
									<a href="<?= base_url('admin/menu/delete_extra_img/' . $data['id'] . '?img=' . $key); ?>" data-id="<?= $key; ?>" class="delete-img action_btn" data-msg="<?= lang('want_to_delete'); ?>"><i class="fa fa-trash"></i></a>
								</div>
							<?php $i++;
							endforeach ?>
						<?php endif; ?>
					</div>
				</div>
			</div>
			<div class="card-footer mt-10 space-between">
				<?php if (isset($lang) && !empty($lang)) : ?>
					<input type="hidden" name="language" value="<?= $lang; ?>">
				<?php else : ?>
					<input type="hidden" name="language" value="english">
				<?php endif; ?>


				<input type="hidden" name="images" id="ai_images" value="<?= isset($data['images']) && !empty($data['images']) ? $data['images'] : "" ?>">
				<input type="hidden" name="thumb" id="ai_thumb" value="<?= isset($data['thumb']) && !empty($data['thumb']) ? $data['thumb'] : "" ?>">
				<?php if (isset($get['action']) && $get['action'] == "copy") : ?>
					<input type="hidden" name="is_copy" value="1">
					<input type="hidden" name="id" value="<?= isset($data['id']) && $data['id'] != 0 ? html_escape($data['id']) : 0 ?>">
				<?php else : ?>
					<input type="hidden" name="id" value="<?= isset($data['id']) && $data['id'] != 0 ? html_escape($data['id']) : 0 ?>">
				<?php endif; ?>
				<div class="create-item-actions space-between d-flex w_100p">
					<a href="<?= base_url('admin/menu/item'); ?>" class="btn btn-secondary btn-flat"><?= !empty(lang('cancel')) ? lang('cancel') : "cancel"; ?></a>

					<?php if (isset($data['id']) && $data['id'] != 0) : ?>
						<button type="submit" name="register" class="btn btn-primary c_btn btn-flat"><?= !empty(lang('submit')) ? lang('submit') : "submit"; ?></button>
					<?php else : ?>
						<?php if (isset($active) && $active == 1) : ?>
							<button type="submit" name="register" class="btn btn-primary c_btn btn-flat"><?= !empty(lang('submit')) ? lang('submit') : "submit"; ?></button>
						<?php endif; ?>
					<?php endif; ?>
				</div>
			</div>
		</div><!-- col-md-5 -->
	</div>



</form>


<?php $dataPrice = !empty($data['price']) && isJson($data['price']) ? json_decode($data['price']) : ''; ?>
<!-- Modal -->
<div id="variantModal" class="modal fade" role="dialog">
	<div class="modal-dialog">
		<form action="<?= base_url('admin/menu/create_product_variants') ?>" method="post" enctype="multipart/form-data" class="productVariants">
			<!-- csrf token -->
			<input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>">
			<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title"><?= lang('add_variants'); ?></h4>
				</div>
				<div class="modal-body">
					<div class="variantModalBoday">
						<div class="form-group">
							<label><?= lang('variant_name'); ?></label>
							<input type="text" name="variant_name" class="form-control" placeholder="<?= __('variant_name_details') ?>" value="<?= isset($dataPrice->variant_name) && !empty($dataPrice->variant_name) ? $dataPrice->variant_name : ''; ?>">
						</div>
						<div class="form-group">
							<label> <?= lang('variant_options'); ?></label>
							<input type="text" name="variant_options" class="form-control" placeholder="<?= __('variant_description') ?>" value="">
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-secondary"><?= lang('submit'); ?></button>
				</div>
			</div>
		</form>
	</div>
</div>


<div id="addimgModal" class="modal fade" role="dialog">
	<div class="modal-dialog">
		<form action="<?= base_url('admin/menu/add_images/' . $data['id']) ?>" method="post" enctype="multipart/form-data">
			<!-- csrf token -->
			<input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>">
			<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title"><?= lang('add_new_images'); ?></h4>
				</div>
				<div class="modal-body">
					<div class="extrasBody">
						<div class="form-group">
							<input type="file" accept="image/*" class="info_file image_upload" name="file[]" multiple />
						</div>
					</div>
					<div class="img_progress">
						<div class="show_progress" style="display: none;">
							<div class="progress">
								<div class="progress-bar progress-bar-success progress-bar-striped myprogress" role="progressbar" style="width:0%">0%</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-default"><?= lang('save'); ?></button>
				</div>
			</div>
		</form>
	</div>
</div>


<!-- Image Cropper Modal -->
<div id="imageCropperModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title"><?= lang('upload_image'); ?></h4>
			</div>
			<div class="modal-body">
				<div class="cropingArea">
					<div class="showCroppingArea"></div>
					<input type="file" id="inputImage" class="opacity_0" style="position: absolute; z-index: -1;">
				</div>
				<div class="form-group ratioArea mt-20" style="display: none;">
					<label><?= lang('orientation'); ?></label>
					<div class="d_flex_center">
						<label class="custom-radio mr-10"> <input type="radio" name="ration" value="1" checked> <span class="landscape"></span> <?= lang('landscape'); ?></label>
						<label class="custom-radio mr-10"> <input type="radio" name="ration" value="2"> <span class="square"></span> <?= lang('square'); ?></label>
						<label class="custom-radio"> <input type="radio" name="ration" value="3"> <span class="rectangle"></span> <?= lang('rectangle'); ?></label>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<input type="hidden" name="cropData" id="cropData" value="">
				<button type="button" id="cropBtn" class="btn btn-primary"><?= lang('crop'); ?></button>
			</div>
		</div>
	</div>
</div>


<style>
	#crop-image,
	#cropImg {
		display: block;
		max-width: 100%;
	}

	.cropingArea {
		width: 100%;
		position: relative;
		background: #111;
		border-radius: 8px;
		margin-bottom: 20px;
		overflow: hidden;
	}

	.showCroppingArea {
		width: 100%;
		max-height: 60vh;
	}

	.showCroppingArea img {
		max-width: 100%;
		display: block;
	}
</style>


<script>
	$(document).ready(function() {
		function updateItemPreview() {
			const getVal = (selector, defaultValue = '') => $(selector).val() || defaultValue;
			const addChips = (selector, items, defaultValue = 'chip') => {
				const list = items.length ? items : [defaultValue];
				$(selector).html(list.map(v => `<span class="create-item-seo-chip">${v}</span>`).join(''));
			};

			const title = getVal('#item_title', '<?= addslashes(__('item_name')); ?>');
			const overview = getVal('#item_overview', 'A short description preview will appear here.');
			const category = $('[name="cat_id"] option:selected').text() || '<?= addslashes(__('select')); ?>';
			const price = getVal('#price', '--');
			const stock = getVal('[name="in_stock"]', '0');
			const details = $('<div>').html($('#item_details').val()).text() || 'Detailed item content will appear here as a quick summary.';

			const selectedAllergens = $('[name="allergen_id[]"] option:selected').map(function() {
				return $(this).text();
			}).get().filter(v => v && v !== '<?= addslashes(lang('select')); ?>');

			// SEO logic
			const seoTitle = getVal('#seo_title', title);
			const getList = (selector) => getVal(selector).split(',').map(v => v.trim()).filter(v => v);

			let keywords = getList('#seo_keywords');
			if (!keywords.length) {
				keywords = [title, category, ...selectedAllergens.slice(0, 3)].filter(v => v && v !== '<?= addslashes(__('item_name')); ?>' && v !== '<?= addslashes(__('select')); ?>');
			}

			let tags = getList('#seo_tags');
			if (!tags.length) {
				tags = [category, ...selectedAllergens].filter(v => v && v !== '<?= addslashes(__('select')); ?>');
			}

			keywords = [...new Set(keywords)];
			tags = [...new Set(tags)];

			// UI Updates
			$('.preview-title').text(title);
			$('.preview-overview, .preview-seo-description').text(overview);
			$('.preview-price').text(price);
			$('.preview-stock').text(stock);
			$('.preview-category').text(category);
			$('.preview-seo-title').text(seoTitle);
			$('.preview-seo-url').text(window.location.origin + '/menu/item');
			$('.preview-details').text(details.length > 180 ? details.substring(0, 180) + '...' : details);
			$('[name="seo_description"]').val(overview);
			$('[name="seo_title"]').val(title);
			// Sync back to fields (optional but keeping existing behavior)
			$('#seo_title').val(seoTitle);

			addChips('.preview-seo-keywords', keywords, 'keyword');
			addChips('.preview-seo-tags', tags, 'tag');

			const image = $('.imgPreview:visible').attr('src') || $('.imgPreviewCrop:visible').attr('src') || getVal('#item_img_url');
			$('.create-item-preview-image').attr('src', image || '').toggleClass('hidden', !image);
			$('.create-item-preview-placeholder').toggleClass('hidden', !!image);
		}

		updateItemPreview();
		$(document).on('input change', '#item_title, #item_overview, #item_details, #price, #item_img_url, [name="in_stock"], [name="cat_id"], [name="allergen_id[]"], #seo_title, #seo_keywords, #seo_tags', updateItemPreview);
		$(document).on('click', '#toggleItemPreview', function() {
			$('#itemPreviewSticky').toggleClass('is-collapsed');
		});

		$(document).on('click', '.cropModalOpen', function() {
			$('#inputImage').click();
		});

		let cropper = null;

		$('#imageCropperModal').on('shown.bs.modal', function() {
			if ($('#cropImg').length > 0) {
				var cropperElement = $('#cropImg');
				if (cropper) {
					cropper.destroy();
				}
				cropper = new Cropper(cropperElement[0], {
					aspectRatio: 16 / 9, // Set the aspect ratio (width/height)
				});

				$('[name="ration"]').off('click').on('click', function() {
					var value = $(this).val();
					var newRation = 16 / 9;
					if (value == 1) {
						newRation = 16 / 9;
					} else if (value == 2) {
						newRation = 1;
					} else {
						newRation = 4 / 3;
					}
					cropper.setAspectRatio(newRation);
				});

				// Handle crop button click
				$('#cropBtn').off('click').on('click', function() {
					if (!cropper) return;
					// Get the cropped canvas
					var croppedCanvas = cropper.getCroppedCanvas();

					// Convert the canvas to a data URL
					var croppedDataUrl = croppedCanvas.toDataURL('image/jpeg');

					$('.imgPreviewCrop').attr('src', croppedDataUrl);
					$('#cropData').val(croppedDataUrl);
					$('.imgPreviewDivCrop').slideUp();
					$('.imgPreviewCrop').slideDown().removeClass('opacity_0');
					$('.defultUpload').slideUp();
					updateItemPreview();
					// Close the modal
					$('#imageCropperModal').modal('hide');
				});
			}
		});

		$('#imageCropperModal').on('hidden.bs.modal', function() {
			if (cropper) {
				cropper.destroy();
				cropper = null;
			}
			$('.showCroppingArea').empty();
			$('#inputImage').val('');
		});

		$('#inputImage').on('change', function(e) {
			if (this.files && this.files[0]) {
				const reader = new FileReader();
				reader.onload = function() {
					$('.showCroppingArea').html('<img src="' + reader.result + '" id="cropImg" alt="Croppable Image" />');
					$('#imageCropperModal').modal('show');
					$('.ratioArea').slideDown();
				};
				reader.readAsDataURL(this.files[0]);
			}
		});
	});
</script>

<?php if (isset($page_title) && $page_title == "Items") : ?>
	<link rel="stylesheet" href="<?= asset_url('public/plugins/cropper.css'); ?>" />
	<script src="<?= asset_url('public/plugins/cropper.js') ?>"></script>
<?php endif; ?>