<div class="row">
	<div class="col-md-10">
		<div class="row">

			<?php foreach ($available_addons as $addon): ?>
				<?php
				$installed = $addonsList[$addon['slug']] ?? null;
				$state     = addon_state($addon, $installed);
				?>

				<div class="col-md-4 col-sm-6 mb-20">
					<div class="addon-card h-100 card border-light-soft shadow-sm p-0 overflow-hidden">

						<!-- Thumbnail -->
						<div class="addon-thumb position-relative">

							<img src="<?= asset_url($addon['thumb']); ?>"
								class="w_100 h_100 object-fit-cover addon-thumb-img">

							<!-- Installed Badge -->
							<?php if ($state['state'] === 'installed'): ?>
								<div class="position-absolute" style="top:10px; right:10px;">
									<span class="label label-success shadow-sm">
										<i class="fa fa-check"></i> Installed
									</span>
								</div>
							<?php endif; ?>

							<!-- Prerequisite / Block Message -->
							<?php if (in_array($state['state'], ['license_required', 'dependency_missing', 'demo_blocked'])): ?>
								<p class="pre-requisite">
									<?= $state['message'] ?? $addon['prerequisite']; ?>
								</p>
							<?php endif; ?>

						</div>

						<!-- Card Body -->
						<div class="card-body p-15 min-height-150">

							<div class="addonContent">
								<h5 class="m-0 font-weight-bold text-dark">
									<?= $addon['name']; ?>
								</h5>

								<p class="text-muted small mt-5 mb-15 h-40 overflow-hidden">
									<?= $addon['details']; ?>
								</p>
							</div>

							<div class="d-flex justify-content-between align-items-center mt-auto">

								<?php if ($state['state'] === 'installed'): ?>

									<div class="flex-column mb-5 w_100">

										<a href="javascript:;"
											data-id="<?= html_escape($state['id']); ?>"
											data-status="<?= html_escape($state['status']); ?>"
											data-table="addons_list"
											class="badge <?= $state['status'] == 1 ? 'badge-success-soft' : 'badge-danger-soft' ?> change_status mb-10">
											<i class="fa <?= $state['status'] == 1 ? 'fa-circle' : 'fa-circle-o' ?>"></i>
											<?= $state['status'] == 1 ? "Active" : "Hidden"; ?>
										</a>

										<div class="d-flex gap-5 space-between mt-10">
										

											<a href="<?= base_url("admin/addons/uninstall/{$state['id']}"); ?>"
												class="btn btn-danger btn-sm action_btn">
												<i class="fa fa-trash"></i> <?= __('uninstall'); ?>
											</a>

										</div>
									</div>

								<?php elseif ($state['state'] === 'ready'): ?>

									<?php if ($state['is_authentication'] == 1): ?>
										<div class="d-flex flex-column space-between w_100">
											<?php if (!empty($state['link'])): ?>
												<a href="<?= prep_url($state['link']); ?>"
													target="_blank"
													class="btn btn-danger btn-sm btn-block mb-10">
													<i class="fa fa-link"></i> Get add-ons
												</a>
											<?php endif; ?>
											<a href="javascript:;"
												data-slug="<?= $addon['slug']; ?>"
												data-name="<?= $addon['name']; ?>"
												class="btn btn-primary btn-sm btn-block install-auth-btn">
												<i class="fa fa-download"></i> <?= __('install'); ?>
											</a>
										</div>
									<?php else: ?>
										<a href="<?= base_url("admin/addons/install_local_addon/{$addon['slug']}"); ?>"
											class="btn btn-primary btn-sm btn-block action_btn">
											<i class="fa fa-download"></i> <?= __('install'); ?>
										</a>
									<?php endif; ?>

								<?php elseif ($state['state'] === 'dependency_missing'): ?>

									<a href="javascript:;"
										class="btn btn-primary btn-sm btn-block"
										data-toggle="tooltip"
										title="<?= $state['message']; ?>">
										<i class="fa fa-download"></i> <?= __('install'); ?>
									</a>

								<?php elseif ($state['state'] === 'demo_blocked'): ?>
									<div class="d-flex flex-column space-between w_100">
										<?php if (!empty($state['link'])): ?>
											<a href="<?= prep_url($state['link']); ?>"
												target="_blank"
												class="btn btn-warning btn-sm btn-block mb-10">
												<i class="fa fa-link"></i> Get add-ons
											</a>
										<?php endif; ?>
										<a href="javascript:;" class="btn btn-danger btn-sm btn-block">
											<i class="fa fa-lock"></i> Demo Mode (Not Installable)
										</a>
									</div>

								<?php endif; ?>

							</div>
						</div>
					</div>
				</div>

			<?php endforeach; ?>

		</div>
	</div>
</div>


<!-- Authentication Modal -->
<div class="modal fade" id="authInstallModal">
	<div class="modal-dialog">
		<form action="<?= base_url("admin/addons/install_addons"); ?>" method="post" class="custom-fields" enctype="multipart/form-data">
			<?= csrf(); ?>
			<input type="hidden" name="addon_slug" id="modal_addon_slug">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title">Install <span id="modal_addon_name"></span></h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label>Addons Purchase Code</label>
						<input type="text" name="purchase_code" class="form-control" placeholder="JAE73-H8TY7-R4Q3F" value="JAE73-H8TY7-R4Q3F" required value="">
					</div>
					<div class="form-group">
						<label>Script Purchase Code</label>
						<input type="text" name="script_purchase_code" class="form-control" placeholder="JAE73-H8TY7-R4Q3F" value="JAE73-H8TY7-R4Q3F" required value="">
					</div>
					<div class="form-group">
						<label>upload addon zip</label>
						<input type="file" name="addon_zip" class="form-control">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary"><?= lang('submit'); ?></button>
				</div>
			</div>
		</form>
	</div>
</div>

<!-- Legacy Modal (Keep it for manual Addons if needed, but we typically use the grid now) -->
<div class="modal fade" id="addNewModal">
	<div class="modal-dialog">
		<form action="<?= base_url("admin/addons/install_addons"); ?>" method="post" class="custom-fields" enctype="multipart/form-data">
			<?= csrf(); ?>
			<div class="modal-content">
				<div class="modal-header text-nowrap">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title"><?= lang('add_new'); ?></h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label>Addons Purchase Code</label>
						<input type="text" name="purchase_code" class="form-control">
					</div>
					<div class="form-group">
						<label>Script Purchase Code</label>
						<input type="text" name="script_purchase_code" class="form-control">
					</div>
					<div class="form-group">
						<label>upload addon zip</label>
						<input type="file" name="addon_zip" class="form-control">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary"><?= lang('submit'); ?></button>
				</div>
			</div>
		</form>
	</div>
</div>

<script>
	$(document).on('click', '.install-auth-btn', function() {
		let slug = $(this).data('slug');
		let name = $(this).data('name');
		$('#modal_addon_slug').val(slug);
		$('#modal_addon_name').text(name);
		$('#authInstallModal').modal('show');
	});
</script>

<style>
	.w_100 {
		width: 100% !important;
	}

	.h_100 {
		height: 100% !important;
	}

	.object-fit-cover {
		object-fit: cover;
	}

	.addon-thumb {
		width: 100%;
		height: auto;
		max-height: 350px;
		overflow: hidden;
		background: var(--background-color);
	}

	@media (max-width: 768px) {
		.addon-thumb {
			height: 180px;
		}
	}

	.addon-thumb-img {
		transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.addon-card:hover .addon-thumb-img {
		transform: scale(1.1);
	}

	.addon-card {
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.addon-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
	}

	.badge-success-soft {
		background: #e6fcf5;
		color: #0ca678;
		border: 1px solid #0ca678;
	}

	.badge-danger-soft {
		background: #fff5f5;
		color: #f03e3e;
		border: 1px solid #f03e3e;
	}

	.gap-5 {
		gap: 5px;
	}

	.min-height-150 {
		min-height: 150px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.pre-requisite {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		padding: 5px 10px;
		font-size: 11px;
		margin: 0;
		z-index: 2;
		height: auto;
		bottom: auto;
	}
</style>