<!--begin::Card-->
<style>
.image_area {
	position: relative;
}

img {
	display: block;
	max-width: 100%;
}

.preview {
	overflow: hidden;
	width: 160px; 
	height: 160px;
	margin: 10px;
	border: 1px solid red; 
}

.modal-lg{
	max-width: 1000px !important;
}

.overlay {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	background-color: rgba(255, 255, 255, 0.5);
	overflow: hidden;
	height: 0;
	transition: .5s ease;
	width: 100%;
}

.image_area:hover .overlay {
	height: 50%;
	cursor: pointer;
}

.text {
	color: #333;
	font-size: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}
</style>
<div class="card card-custom gutter-b example example-compact">
	<div class="card-header">
		<h3 class="card-title"><?=$form_heading?>
		</h3>
	</div>
	<?=form_open_multipart('',['class'=>'form','autocomplete'=>'off','onsubmit'=>'blockPage()'])?>
	<div class="card-body">		
		<?php if($language_list){ ?>
			<div class="accordion accordion-toggle-arrow form-group" id="accordionLanguage">
			<?php foreach($language_list as $language){ ?>	
				<input type="hidden" name="video_album_ln_id_<?=$language['code']?>" value="<?=set_value('video_album_ln_id_'.$language['code'],$update_data['video_album_ln_id_'.$language['code']] ?? '')?>">
				<div class="card">
					<div class="card-header">
						<div class="card-title" data-toggle="collapse" data-target="#<?=$language['code']?>">
							<?=$language['name']?>
						</div>
					</div>
					<div id="<?=$language['code']?>" class="collapse show" data-parent="#accordionLanguage">
						<div class="card-body">
							<div class="form-group row">
								<label class="col-lg-1 col-form-label text-lg-right">Title</label>
								<div class="col-lg-5">
									<input type="text" name="title_<?=$language['code']?>" id="title_<?=$language['code']?>" value="<?=set_value('title_'.$language['code'],$update_data['title_'.$language['code']] ?? '')?>" class="form-control" placeholder="Title" required />					
									<?=$validation->showError('title_'.$language['code'])?>
								</div>
								<label class="col-lg-1 col-form-label text-lg-right">Meta Title</label>
								<div class="col-lg-5">
									<input required type="text" name="meta_title_<?=$language['code']?>" id="meta_title_<?=$language['code']?>" value="<?=set_value('meta_title_'.$language['code'],$update_data['meta_title_'.$language['code']] ?? '')?>" class="form-control" placeholder="Enter Meta Title in Selected Language"/>					
									<?=$validation->showError('meta_title_'.$language['code'])?>
								</div>
							</div>
							<div class="form-group row">				
								<label class="col-lg-1 col-form-label text-lg-right">Meta Keywords</label>
								<div class="col-lg-5">
									<textarea name="meta_keywords_<?=$language['code']?>" id="meta_keywords_<?=$language['code']?>" class="form-control" placeholder="Meta Keywords in Selected Language"><?=set_value('meta_keywords_'.$language['code'],$update_data['meta_keywords_'.$language['code']] ?? '')?></textarea>					
									<?=$validation->showError('meta_keywords_'.$language['code'])?>
								</div>
								<label class="col-lg-1 col-form-label text-lg-right">Meta Description</label>
								<div class="col-lg-5">
									<textarea name="meta_description_<?=$language['code']?>" id="meta_description_<?=$language['code']?>" class="form-control" placeholder="Meta Description in Selected Language"><?=set_value('meta_description_'.$language['code'],$update_data['meta_description_'.$language['code']] ?? '')?></textarea>					
									<?=$validation->showError('meta_description_'.$language['code'])?>
								</div>							
							</div>							
						</div>
					</div>
				</div>
			<?php } ?>
			</div>
		<?php } ?>
		<div class="form-group row">
			<label class="col-lg-1 col-form-label text-lg-right">Photo</label>
			<div class="col-lg-3">
				<div class="custom-file" data-toggle="tooltip" data-placement="bottom"  title="Image size should 900x600px or 3:2 Ratio">
					<input type="file" class="custom-file-input" id="photo_file" name="photo_file" accept=".png,.jpg,.gif,jpeg"/>
					<label class="custom-file-label" for="photo_file">Choose file</label>
				</div>
				<?=$validation->showError('photo_file')?>
		<?php $uploaded_photo_file = set_value('uploaded_photo_file',$update_data['photo_file'] ?? ''); ?>
				<input type="hidden" name="uploaded_photo_file" id="uploaded_photo_file" value="<?=set_value('uploaded_photo_file',$uploaded_photo_file)?>" />
				<?php if($uploaded_photo_file!=""){ ?>
					<div class="text-primary"><a href="javascript:;" onclick="viewPhotoFile();">View uploaded</a></div>					
				<?php } ?>
			</div>	
			<label class="col-lg-1 col-form-label text-lg-right">Url</label>
			<div class="col-lg-3">
				<input required type="text" name="video_album_url" id="video_album_url" value="<?=set_value('video_album_url',$update_data['video_album_url'] ?? '')?>" class="form-control" placeholder="Video Album Url"/>					
					<?=$validation->showError('video_album_url')?>
			</div>
			<div class="col-lg-1 pl-0 text-right">
				<button type="button" class="btn btn-info" style="width:100%" name="btn_generate_url" onclick="genAlnumStr('title_en','video_album_url');">Generate</button>
			</div>
			<label class="col-lg-1 col-form-label text-lg-right">Status</label>
			<div class="col-lg-2">
				<select required name="status" id="status" class="form-control">
						<?=$cmObj->get_status_options(set_value('status',($update_data['status'] ?? '')))?>
				</select>
					<?=$validation->showError('status')?>
			</div>
		</div>
	</div>
	<div class="card-footer">
		<div class="row">
			<div class="col-lg-12 text-center">
				<button type="submit" name="save" value="Save" class="btn btn-primary mr-2">Save</button>
			</div>
		</div>
	</div>
</form>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Crop Image Before Upload</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="img-container">
					<div class="row">
						<div class="col-md-8">
							<img src="" id="sample_image" />
						</div>
						<div class="col-md-4">
							<div class="preview"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" id="crop" class="btn btn-primary">Crop</button>
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
			</div>
		</div>
	</div>
</div>