<style>
	.language-container {
		padding: 30px 20px;
		max-width: 1400px;
		margin: 0 auto;
	}
	
	.info-banner {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 15px;
		padding: 30px;
		margin-bottom: 30px;
		box-shadow: 0 10px 40px rgba(102, 126, 234, 0.2);
		color: white;
		position: relative;
		overflow: hidden;
	}
	
	.info-banner::before {
		content: '';
		position: absolute;
		top: -50px;
		right: -50px;
		width: 200px;
		height: 200px;
		background: rgba(255,255,255,0.1);
		border-radius: 50%;
	}
	
	.info-banner h4 {
		font-size: 24px;
		font-weight: 600;
		margin-bottom: 15px;
		display: flex;
		align-items: center;
		gap: 12px;
	}
	
	.info-banner h4 i {
		font-size: 28px;
	}
	
	.info-banner p {
		font-size: 16px;
		line-height: 1.7;
		margin-bottom: 8px;
		opacity: 0.95;
	}
	
	.add-keyword-card {
		background: var(--background-color);
		border-radius: 15px;
		box-shadow: 0 5px 20px rgba(0,0,0,0.08);
		padding: 25px;
		margin-bottom: 30px;
		border: 1px solid var(--border-color);
	}
	
	.add-keyword-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		padding-bottom: 15px;
		border-bottom: 2px solid var(--border-color);
	}
	
	.add-keyword-header h4 {
		margin: 0;
		font-size: 20px;
		font-weight: 600;
		color: var(--color);
		display: flex;
		align-items: center;
		gap: 10px;
	}
	
	.checkbox-label {
		display: flex;
		align-items: center;
		gap: 8px;
		font-weight: 500;
		color: var(--color);
		cursor: pointer;
	}
	
	.checkbox-label input[type="checkbox"] {
		width: 18px;
		height: 18px;
		cursor: pointer;
	}
	
	.form-row-modern {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 20px;
		align-items: end;
	}
	
	.form-group-modern {
		margin-bottom: 0;
	}
	
	.form-group-modern label {
		font-weight: 600;
		color: var(--color);
		margin-bottom: 8px;
		display: block;
		font-size: 13px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}
	
	.form-control-modern {
		border: 2px solid var(--border-color);
		border-radius: 8px;
		padding: 10px 15px;
		font-size: 14px;
		transition: all 0.3s ease;
		width: 100%;
		background: var(--background-color);
		color: var(--color);
	}
	
	.form-control-modern:focus {
		border-color: #667eea;
		box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
		outline: none;
	}
	
	.language-card {
		background: var(--background-color);
		border-radius: 20px;
		box-shadow: 0 10px 40px rgba(0,0,0,0.1);
		overflow: hidden;
		border: 1px solid var(--border-color);
	}
	
	.language-header {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 25px 30px;
		color: white;
		position: relative;
	}
	
	.language-header-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		flex-wrap: wrap;
		gap: 15px;
	}
	
	.language-header h3 {
		margin: 0;
		font-size: 24px;
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 12px;
	}
	
	.language-header h3 i {
		font-size: 28px;
	}
	
	.search-controls {
		display: flex;
		gap: 15px;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.limit-select {
		border: 2px solid rgba(255,255,255,0.3);
		background: rgba(255,255,255,0.2);
		color: white;
		border-radius: 8px;
		padding: 8px 15px;
		font-size: 14px;
		cursor: pointer;
		transition: all 0.3s ease;
	}
	
	.limit-select:focus {
		outline: none;
		border-color: rgba(255,255,255,0.5);
		background: rgba(255,255,255,0.3);
	}
	
	.limit-select option {
		background: #667eea;
		color: white;
	}
	
	.search-form-modern {
		display: flex;
		gap: 0;
	}
	
	.search-input-modern {
		border: 2px solid rgba(255,255,255,0.3);
		background: rgba(255,255,255,0.2);
		color: white;
		border-radius: 8px 0 0 8px;
		padding: 10px 15px;
		font-size: 14px;
		width: 250px;
		transition: all 0.3s ease;
	}
	
	.search-input-modern::placeholder {
		color: rgba(255,255,255,0.7);
	}
	
	.search-input-modern:focus {
		outline: none;
		border-color: rgba(255,255,255,0.5);
		background: rgba(255,255,255,0.3);
	}
	
	.search-btn-modern {
		background: rgba(255,255,255,0.3);
		border: 2px solid rgba(255,255,255,0.3);
		border-left: none;
		border-radius: 0 8px 8px 0;
		padding: 10px 20px;
		color: white;
		cursor: pointer;
		transition: all 0.3s ease;
	}
	
	.search-btn-modern:hover {
		background: rgba(255,255,255,0.4);
	}
	
	.nav-tabs-modern {
		border-bottom: 2px solid var(--border-color);
		padding: 0 30px;
		margin: 0;
		background: var(--background-color);
	}
	
	.nav-tabs-modern li {
		margin-bottom: -2px;
	}
	
	.nav-tabs-modern li a {
		border: none;
		border-radius: 8px 8px 0 0;
		padding: 12px 20px;
		color: var(--color);
		font-weight: 500;
		transition: all 0.3s ease;
		margin-right: 5px;
	}
	
	.nav-tabs-modern li.active a,
	.nav-tabs-modern li a:hover {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		border: none;
	}
	
	.tab-content-modern {
		padding: 30px;
		background: var(--background-color);
	}
	
	.export-buttons {
		display: flex;
		gap: 10px;
		justify-content: flex-end;
		margin-bottom: 20px;
	}
	
	.btn-export {
		padding: 10px 20px;
		border-radius: 8px;
		font-weight: 600;
		font-size: 14px;
		transition: all 0.3s ease;
		border: none;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		text-decoration: none;
	}
	
	.btn-import {
		background: #28a745;
		color: white;
	}
	
	.btn-import:hover {
		background: #218838;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
		color: white;
		text-decoration: none;
	}
	
	.btn-export-file {
		background: #6c757d;
		color: white;
	}
	
	.btn-export-file:hover {
		background: #5a6268;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
		color: white;
		text-decoration: none;
	}
	
	.table-modern {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
	}
	
	.table-modern thead th {
		padding: 15px;
		font-weight: 600;
		text-align: left;
		border: none;
		font-size: 14px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}
	
	.table-modern thead th:first-child {
		border-radius: 10px 0 0 0;
	}
	
	.table-modern thead th:last-child {
		border-radius: 0 10px 0 0;
	}
	
	.table-modern tbody tr {
		transition: all 0.2s ease;
	}
	
	.table-modern tbody tr {
		background: var(--background-color);
	}

	
	.table-modern tbody td {
		padding: 15px;
		border-bottom: 1px solid var(--border-color);
		vertical-align: middle;
		color: var(--color);
	}
	
	.table-modern tbody tr:last-child td {
		border-bottom: none;
	}
	
	.table-modern tbody input.form-control {
		border: 2px solid var(--border-color);
		border-radius: 6px;
		padding: 8px 12px;
		font-size: 14px;
		transition: all 0.3s ease;
		width: 100%;
		background: var(--background-color);
		color: var(--color);
	}
	
	.table-modern tbody input.form-control:focus {
		border-color: #667eea;
		box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
		outline: none;
	}
	
	.save-btn-modern {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		border: none;
		padding: 12px 30px;
		border-radius: 10px;
		font-weight: 600;
		font-size: 15px;
		cursor: pointer;
		transition: all 0.3s ease;
		width: 100%;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}
	
	.save-btn-modern:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
	}
	
	.btn-submit-modern {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		border: none;
		padding: 10px 25px;
		border-radius: 8px;
		font-weight: 600;
		font-size: 14px;
		cursor: pointer;
		transition: all 0.3s ease;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}
	
	.btn-submit-modern:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
	}
	
	.modal-modern .modal-content {
		border-radius: 15px;
		border: 1px solid var(--border-color);
		box-shadow: 0 10px 40px rgba(0,0,0,0.2);
		background: var(--background-color);
	}
	
	.modal-modern .modal-header {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		border-radius: 15px 15px 0 0;
		padding: 20px 25px;
		border: none;
	}
	
	.modal-modern .modal-header .close {
		color: white;
		opacity: 0.9;
		font-size: 28px;
	}
	
	.modal-modern .modal-header .close:hover {
		opacity: 1;
	}
	
	.modal-modern .modal-title {
		font-weight: 600;
		font-size: 20px;
	}
	
	.modal-modern .modal-body {
		padding: 25px;
		background: var(--background-color);
		color: var(--color);
	}
	
	.modal-modern .modal-body input[type="file"] {
		border: 2px dashed var(--border-color);
		border-radius: 8px;
		padding: 15px;
		width: 100%;
		transition: all 0.3s ease;
		background: var(--background-color);
		color: var(--color);
	}
	
	.modal-modern .modal-body input[type="file"]:hover {
		border-color: #667eea;
		background: var(--background-color);
	}
	
	.modal-modern .modal-body label {
		color: var(--color);
	}
	
	.modal-modern .modal-body small {
		color: var(--color);
		opacity: 0.8;
	}
	
	.modal-modern .modal-footer {
		border: none;
		padding: 20px 25px;
	}
	
	.pagination-modern {
		padding: 20px 0;
		text-align: center;
	}
	
	@media (max-width: 768px) {
		.language-container {
			padding: 20px 15px;
		}
		
		.form-row-modern {
			grid-template-columns: 1fr;
		}
		
		.language-header-top {
			flex-direction: column;
			align-items: stretch;
		}
		
		.search-controls {
			flex-direction: column;
		}
		
		.search-input-modern {
			width: 100%;
		}
		
		.export-buttons {
			flex-direction: column;
		}
		
		.btn-export {
			width: 100%;
			justify-content: center;
		}
	}

	.custom-pagination.text-center {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 15px;
	}
</style>

<div class="language-container">

	<div class="add-keyword-card">
		<div class="add-keyword-header">
			<h4>
				<i class="fas fa-plus-circle"></i>
				Add New Keyword
			</h4>
			<div class="hide_lang_details">
				<label class="checkbox-label">
					<input type="checkbox" value="1" class="details_check"> 
					<?= lang('show_details'); ?>
				</label>
			</div>
		</div>
		<form action="<?= base_url('admin/home/add_keyword') ;?>" method="post">
			<!-- csrf token -->
			<input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>">
			<div class="form-row-modern">
				<div class="form-group-modern">
					<label>
						<i class="fas fa-key"></i> <?= lang('keyword'); ?>
					</label>
					<input type="text" name="keyword" class="form-control-modern" placeholder="Enter keyword" required>
				</div>
				<div class="form-group-modern">
					<label>
						<i class="fas fa-font"></i> <?= lang('values'); ?>
					</label>
					<input type="text" name="value" class="form-control-modern" placeholder="Enter value" required>
				</div>
				<div class="form-group-modern">
					<label>
						<i class="fas fa-tag"></i> Types
					</label>
					<select name="types" class="form-control-modern">
						<option value="admin">Admin</option>
						<option value="user">User</option>
						<option value="home">Frontend</option>
						<option value="label">Label</option>
					</select>
				</div>
				<div class="form-group-modern">
					<button type="submit" class="btn-submit-modern" style="width: 100%;">
						<i class="fas fa-check"></i> <?= lang('submit'); ?>
					</button>
				</div>
			</div>
		</form>
	</div>

	<div class="language-card">
		<div class="language-header">
			<div class="language-header-top">
				<h3>
					<i class="fas fa-list-alt"></i>
					<?= !empty(lang('language_dashboard'))?lang('language_dashboard'):"Language Dashboard";?>
				</h3>
				<div class="search-controls">
					<select name="limit" class="limit-select" onchange="location=this.value;">
						<option value="<?= base_url('admin/home/dashboard_languages?limit=30') ;?>" <?= isset($_GET['limit']) && $_GET['limit']== 30?"selected":"";?>>30 per page</option>
						<option value="<?= base_url('admin/home/dashboard_languages?limit=50') ;?>" <?= isset($_GET['limit']) && $_GET['limit']== 50?"selected":"";?>>50 per page</option>
						<option value="<?= base_url('admin/home/dashboard_languages?limit=100') ;?>" <?= isset($_GET['limit']) && $_GET['limit']== 100?"selected":"";?>>100 per page</option>
						<option value="<?= base_url('admin/home/dashboard_languages?limit=200') ;?>" <?= isset($_GET['limit']) && $_GET['limit']== 200?"selected":"";?>>200 per page</option>
						<option value="<?= base_url('admin/home/dashboard_languages?limit=300') ;?>" <?= isset($_GET['limit']) && $_GET['limit']== 300?"selected":"";?>>300 per page</option>
						<option value="<?= base_url('admin/home/dashboard_languages?limit=500') ;?>" <?= isset($_GET['limit']) && $_GET['limit']== 500?"selected":"";?>>500 per page</option>
					</select>
					<form action="<?= base_url("admin/home/dashboard_languages");?>" method="get" class="search-form-modern">
						<input type="text" name="q" class="search-input-modern" placeholder="<?= lang('search');?>..." value="<?= isset($_GET['q'])?html_escape($_GET['q']):'';?>">
						<button class="search-btn-modern" type="submit">
							<i class="fas fa-search"></i>
						</button>
					</form>
				</div>
			</div>
		</div>

		<div class="box-body" style="padding: 0;">
			<ul class="nav nav-tabs">
				<?php foreach ($languages as $key => $row): ?>
					<li class="<?= $key ==0?"active":"";?>">
						<a data-toggle="tab" href="#<?= html_escape($row['slug']);?>">
							<i class="fas fa-flag"></i> <?= html_escape($row['lang_name']);?>
						</a>
					</li>
				<?php endforeach ?>
			</ul>

			<div class="tab-content tab-content-modern">
				<?php foreach ($languages as $key => $row): ?>
					<div id="<?= html_escape($row['slug']);?>" class="tab-pane fade in <?= $key ==0?"active":"";?>">
						<div class="export-buttons">
							<a href="#lnModal_<?= $row['slug'];?>" data-toggle="modal" class="btn-export btn-import">
								<i class="fas fa-upload"></i> <?= lang('import');?>
							</a>
							<a href="<?= base_url("admin/auth/exportjson/{$row['slug']}");?>" class="btn-export btn-export-file">
								<i class="fas fa-download"></i> <?= lang('export');?>
							</a>
						</div>

						<form action="<?php echo base_url('admin/home/add_languages_value/'.$row['slug']); ?>" method="post">
							<!-- csrf token -->
							<input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>">

							<div class="table-responsive">
								<table class="table table-modern">
									<thead>
										<tr>
											<th width="5%"><?= !empty(lang('sl'))?lang('sl'):"#";?></th>
											<th width="20%"><?= !empty(lang('keywords'))?lang('keywords'):"Keywords";?></th>
											<th class="hide_details" width="30%"><?= !empty(lang('details'))?lang('details'):"Details";?></th>
											<th width="45%"><?= !empty(lang('value'))?lang('value'):"Value";?></th>
										</tr>
									</thead>
									<tbody>
										<?php foreach($admin_languages as $key2 => $value): ?>
											<tr>
												<td><?= $key2+1;?></td>
												<td><strong><?= $value['keyword']?></strong></td>
												<td class="hide_details">
													<input type="text" name="details[]" class="form-control" value="<?= $value['details']?>">
												</td>
												<td>
													<input type="text" name="<?= $row['slug'];?>[]" class="form-control" value="<?= $value[$row['slug']]?>">
												</td>
											</tr>
											<input type="hidden" name="keyword[]" value="<?= $value['keyword'];?>">
										<?php endforeach ?>
									</tbody>
								</table>
							</div>
							<div class="form-group" style="margin-top: 25px;">
								<button type="submit" class="save-btn-modern">
									<i class="fas fa-save"></i> <?= !empty(lang('save_change'))?lang('save_change'):"Save Changes";?>
								</button>
							</div>
						</form>
					</div>
				<?php endforeach ?>
			</div>
		</div>

		
	</div>
		<div class="custom-pagination text-center">
			<?= $this->pagination->create_links();?>
		</div>
</div>

<?php foreach ($languages as $key => $ln): ?>
<!-- Modal -->
<div id="lnModal_<?= $ln['slug'];?>" class="modal fade modal-modern" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">
			<i class="fas fa-upload"></i> Import JSON - <?= $ln['lang_name'];?>
		</h4>
      </div>
      <form action="<?= base_url("admin/auth/import_json/{$ln['slug']}");?>" method="post" enctype="multipart/form-data">
		<?= csrf();?>
		<div class="modal-body">
			<label style="font-weight: 600; margin-bottom: 10px; display: block; color: var(--color);">
				<i class="fas fa-file-code"></i> Select JSON File
			</label>
			<input type="file" name="file" required accept=".json" style="border: 2px dashed var(--border-color); border-radius: 8px; padding: 15px; width: 100%; transition: all 0.3s ease; background: var(--background-color); color: var(--color);">
			<small style="color: var(--color); opacity: 0.8; margin-top: 10px; display: block;">
				<i class="fas fa-info-circle"></i> Please select a valid JSON file containing language translations
			</small>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-secondary" data-dismiss="modal" style="margin-right: 10px;">
				<i class="fas fa-times"></i> Cancel
			</button>
			<button type="submit" class="btn btn-success" style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%); border: none; padding: 10px 25px; border-radius: 8px; font-weight: 600;">
				<i class="fas fa-check"></i> <?= lang('submit');?>
			</button>
		</div>
	</form>
  </div>
</div>
<?php endforeach; ?>