{% extends "layouts/base.html" %}
{% load static %}

{% load srt_path %}

{% block stylesheet %}
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
<style>
	.plyr {
		border-radius: 6px !important;
	}
	.media_show {
		border-radius: 10px !important;
	}
</style>
{% endblock stylesheet %}

{% block title %} Upload {% endblock title %}

{% block body_class %} class="header-fixed header-tablet-and-mobile-fixed toolbar-enabled" {% endblock body_class %}

{% block content %}
<div class="toolbar d-flex flex-column flex-row-fluid py-2 py-lg-2" id="kt_toolbar">
	<!--begin::Container-->
	<div id="kt_toolbar_container" class="container-xxl py-5">
    <!--begin::Row-->
		<div class="row gy-0 gx-10">
			<div class="col-xl-12">
				<!--begin::Engage widget 2-->
				<div class="card card-xl-stretch bg-body border-0 mb-5 mb-xl-0">
					<!--begin::Body-->
					<div class="card-body d-flex flex-column flex-lg-row flex-stack justify-content-center p-lg-15">
						<!--begin::Info-->
						<div class="d-flex flex-column justify-content-center align-items-center align-items-lg-center me-10 text-center text-lg-start">
							<!--begin::Title-->
							<div class="d-flex align-items-center text-center unselectable">
								<h2 class="fs-1hx line-height-lg mb-5">
									Click on the "Choose File" button to upload a file
								</h2>
							</div>
							<!--end::Title-->
              				<form class="login100-form validate-form" action=" {% url 'interface:upload' %}" method="post" enctype="multipart/form-data">
                				{% csrf_token %}
								<div class="d-flex flex-column mb-8 fv-row fv-plugins-icon-container">
									<input type="file" name="filename" class="form-control form-control-solid" id="inputGroupFile01">
								</div>
								<div class="text-center">
									<input class="btn btn-success fw-bold px-6 mt-5 py-3" type="submit">
								</div>
              				</form>
            			</div>
						<!--end::Info-->
					</div>
					<!--end::Body-->
				</div>
				<!--end::Engage widget 2-->
			</div>
			<div class="col-xl-12 mt-8">
				<!--begin::Tables Widget 9-->
				<div class="card card-xxl-stretch bg-body border-0 mb-5 mb-xl-8">
					{% if id_file %}
						<!--begin::Header-->
						<div class="card-header border-0 pt-5">
							<h3 class="card-title align-items-start flex-column unselectable">
								<span class="card-label fw-bolder fs-3 mb-1"> uploaded File </span>
							</h3>
						</div>
						<!--end::Header-->
						<!--begin::Body-->
						<div class="card-body py-3">
							<!--begin::Body-->
							<div class="d-flex flex-column my-5"  id="transcript-container">
								<!--begin::Title-->
								<h1 class="fw-bold text-muted  text-center fs-2">
									Please wait while your file is being processed  
									<span id="wait">.</span>
								</h1>
								<!--end::Title-->
								<!--begin::Illustration-->
								<div class="flex-grow-2 bgi-no-repeat bgi-size-contain bgi-position-x-center h-450px mh-450px"></div>
								<!--end::Illustration-->
							</div>
							<!--end::Body-->
							<script>
								//
								function set_table(transcript) {
									var file = transcript.file_org; 
									var table = '\
										<!--begin::Table container--> \
										<div class="table-responsive"> \
											<!--begin::Table-->  \
											<table class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4"> \
												<!--begin::Table head--> \
												<thead> \
													<tr class="fw-bolder text-muted"> \
														<th class="min-w-255px"> Video </th> \
														<th class="min-w-5px"> Original Language </th> \
														<th class="min-w-5px"> Upload date </th> \
														<th class="min-w-250px text-end"> SRT Files </th> \
													</tr> \
												</thead> \
												<!--end::Table head--> \
												<!--begin::Table body--> \
												<tbody> \
													<!-- begin:: Show Files Uploaded With There SRT Files --> \
													<tr class="odd"> \
														<td> \
															<div class="d-flex align-items-center"> \
																<div class="col-md-5 mb-1 mb-md-0 " data-bs-toggle="tooltip" data-bs-trigger="hover" title=" Click here to view File"> \
																	<!--begin::Overlay-->\
																	<a class="d-block overlay m-3" data-fslightbox="lightbox-hot-sales" href="#"  data-bs-toggle="modal" data-bs-target="#streamModal" onclick="'+init_video(transcript)+'"> \
																		<!--begin::Image--> \
																		<div class="overlay-wrapper bgi-position-center bgi-no-repeat bgi-size-cover h-50px card-rounded mb-3" style="background-image:url(http://173.212.199.208:3000/static/images/default.jpg)"></div> \
																		<!--end::Image--> \
																		<!--begin::Action-->\
																		<div class="overlay-layer card-rounded bg-dark bg-opacity-50"> \
																			<!--begin::Svg Icon | path: /images/icons/duotune/arrows/arr027.svg--> \
																			<span class="svg-icon svg-icon-muted svg-icon-2hx"> \
																				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> \
																					<path d="M16.9 10.7L7 5V19L16.9 13.3C17.9 12.7 17.9 11.3 16.9 10.7Z" fill="currentColor"/> \
																				</svg> \
																			</span> \
																			<!--end::Svg Icon--> \
																		</div> \
																		<!--end::Action--> \
																	</a> \
																	<!--end::Overlay--> \
																</div>\
																<div class="d-flex flex-column flex-grow-1" data-bs-toggle="tooltip" data-bs-trigger="hover" title=" '+ file[0].file_title +' "> \
																	<a class="text-gray-800 fw-bolder text-hover-primary mb-1 fs-6"> '+ shortenFileName(file[0].file_title) +' </a> \
																	<span class="text-muted font-size-sm text-gray-400 fw-semibold d-block fs-7"> \
																		<span class="text-dark-75 font-weight-bolder"> Size: </span> \
																		<span class="text-muted font-weight-bolder"> '+ sizify(file[0].size) +'</span> \
																	</span> \
																	<span class="text-muted font-size-sm text-gray-400 fw-semibold d-block fs-7"> \
																		<span class="text-dark-75 font-weight-bolder"> Duration: </span> \
																		<span class="text-muted font-weight-bolder"> '+ secondsToTime(file[0].duration) +' </span> \
																	</span> \
																</div> \
															</div>\
														</td> \
														<td> \
															<span class="text-success fw-bold  d-block mb-1 fs-6 mt-5"> '+ detectLanguage(file[0].language) +' </span> \
														</td> \
														<td> \
															<span class="text-muted d-block mb-1 fs-6 mt-5"> \
																<span class="text-muted font-weight-bolder"> '+ formatDatetime(file[0].when_uploaded) +' </span> \
															</span> \
														</td> \
														<td class="text-end" data-kt-filemanager-table="action_dropdown" style="width: 300px;">  \
															<div class="d-flex justify-content-end">  \
																<!-- begin:: Media Processing English SRT -->  \
																<div class="ms-2 " data-bs-toggle="tooltip" data-bs-trigger="hover" title=" Click here to download English SRT">  \
																	<a type="button" class="btn btn-sm btn-light btn-active-light-primary" href="'+get_srt_local(transcript.path_srt_en)+'" download>  \
																		<span class="fas fa-closed-captioning fa-xl svg-icon svg-icon-3x m-0"></span>  \
																		English  \
																	</a>  \
																</div>  \
																<!-- end:: Media Processing English SRT -->  \
																<!-- begin:: Media Processing Frensh SRT -->  \
																<div class="ms-2 " data-bs-toggle="tooltip" data-bs-trigger="hover" title=" Click here to download Frensh SRT">  \
																	<a type="button" class="btn btn-sm btn-light btn-active-light-primary" href="'+get_srt_local(transcript.path_srt_fr)+'" download>  \
																		<span class="fas fa-closed-captioning fa-xl svg-icon svg-icon-3x m-0"></span>  \
																		Frensh  \
																	</a>  \
																</div>  \
																<!-- end:: Media Processing Frensh SRT -->  \
																<!-- begin:: Media Processing Spanish SRT -->  \
																<div class="ms-2 " data-bs-toggle="tooltip" data-bs-trigger="hover" title=" Click here to download Spanish SRT">  \
																	<a type="button" class="btn btn-sm btn-light btn-active-light-primary" href="'+get_srt_local(transcript.path_srt_es)+'" download>  \
																		<span class="fas fa-closed-captioning fa-xl svg-icon svg-icon-3x m-0"></span>  \
																		Spanish  \
																	</a>  \
																</div>  \
																<!-- end:: Media Processing Spanish SRT -->  \
																<!-- begin:: Media Processing Portuguese SRT -->  \
																<div class="ms-2 " data-bs-toggle="tooltip" data-bs-trigger="hover" title=" Click here to download Portuguese SRT">  \
																	<a type="button" class="btn btn-sm btn-light btn-active-light-primary" href="'+get_srt_local(transcript.path_srt_po)+'" download>  \
																		<span class="fas fa-closed-captioning fa-xl svg-icon svg-icon-3x m-0"></span>  \
																		Portuguese  \
																	</a>  \
																</div>  \
																<!-- end:: Media Processing Portuguese SRT -->  \
															</div>  \
														</td>  \
													</tr> \
													<!-- end:: Show Files Uploaded With There SRT Files --> \
												</tbody> \
												<!--end::Table body--> \
											</table>\
											<!--end::Table-->  \
										</div>\
										<!--end::Table container-->';
									var table_place = document.querySelector("#transcript-container");
									table_place.innerHTML = "";
									table_place.innerHTML = table;
								}
								//
								function waitCheck() {
									var wait = document.getElementById("wait");
									if ( wait.innerHTML.length > 3 ) {wait.innerHTML = "";}
									else {wait.innerHTML += ".";}
								}
								//
								function checkTranscriptStatus() { 
							  		// Send a request to check the transcript status
							  		fetch('http://173.212.199.208:3000/interface/check-transcript-status/{{ id_file }}')
									.then(response => response.json())
									.then(data => {
										if (data["status"] === 2) {
											//
											clearInterval(waitId);
									  		// Show Table With All Data
											set_table(data.transcript);
											// Stop the interval timer
      										clearInterval(intervalId);
										}
									});
								}
								//		
								const waitId = setInterval(waitCheck, 100);
								// Check the transcript status every 8 seconds
								const intervalId = setInterval(checkTranscriptStatus, 8000);
					  		</script>
						</div>
					<!--begin::Body-->
					{% else %}
						<div class="card-body py-3">
							<div id="transcript-container">
								<!--begin::Body-->
								<div class="d-flex flex-column my-5">
									<!--begin::Title-->
									<h1 class="fw-bold text-muted  text-center fs-2">
										Welcome To Transcript Generator
									</h1>
									<!--end::Title-->
									<!--begin::Illustration-->
									<div class="flex-grow-2 bgi-no-repeat bgi-size-contain bgi-position-x-center h-450px mh-450px"></div>
									<!--end::Illustration-->
								</div>
								<!--end::Body-->
							</div>
						</div>
					{% endif %}
				</div>
				<!--end::Tables Widget 9-->
			</div>
		</div>
		<!--end::Row-->
	</div>
</div>
{% endblock content %}

{% block javascripts %}
	<!--begin::Page Custom Javascript(used by this page)-->
	<script src="https://cdn.plyr.io/3.7.3/plyr.js"></script>
	<script src="{% static 'js/widgets.bundle.js' %}"></script>
	<script src="{% static 'js/custom/widgets.js' %}"></script>
	<script>
		//
		function secondsToTime(seconds) {
			const hours = Math.floor(seconds / 3600);
			seconds = seconds % 3600;
			const minutes = Math.floor(seconds / 60);
			seconds = seconds % 60;
			var duration = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
			return duration.split('.')[0] 
		};
		//
		const LANGUAGE_NAMES = {
			'en': 'English',
			'fr': 'French',
			'es': 'Spanish',
			'de': 'German',
			'it': 'Italian',
			'po': 'Portuguese',
			'pt': 'Portuguese', // Add Portuguese language
		};
		function detectLanguage(text) {
			const word = text.toLowerCase().split('-')[0];
			if (word in LANGUAGE_NAMES) {
				return LANGUAGE_NAMES[word];
			}
			return 'Unknown';
		}
		//		
		function formatDatetime(datetimeStr) {
			const datetime = new Date(datetimeStr);
			const year = datetime.getFullYear();
			const month = ('0' + (datetime.getMonth() + 1)).slice(-2);
			const day = ('0' + datetime.getDate()).slice(-2);
			const hours = ('0' + datetime.getHours()).slice(-2);
			const minutes = ('0' + datetime.getMinutes()).slice(-2);
			const seconds = ('0' + datetime.getSeconds()).slice(-2);
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		}
		//
		function shortenFileName(fileName) {
			if (fileName.length > 50) {
				var parts = fileName.split('.');
				if (parts.length > 1) {
					var extension = parts.pop();
					var baseName = parts.join('.');
					if (baseName.length > 47) {
						baseName = baseName.substr(0, 47) + '...';
					}
					return baseName + '.' + extension;
				} else {
					if (fileName.length > 47) {
						return fileName.substr(0, 47) + '...';
					} else {
						return fileName;
					}
				}
			} else {
				return fileName;
			}
		};
		//
		function sizify(value) {
			if (value) {
				value = parseInt(value);
				if (value < 512000) {
				value = value / 1024.0;
				ext = 'KB';
				} else if (value < 4194304000) {
				value = value / 1048576.0;
				ext = 'MB';
				} else {
				value = value / 1073741824.0;
				ext = 'GB';
				}
				return `${value.toFixed(2)} ${ext}`;
			}
			return '--';
		}

		function get_srt_local(srt_url){
			// To Add All Transcripts
			var staticUrl = "{% static 'subtitles/srt/' %}";
			// Return SRT URL 
			if (srt_url.includes("mp4")) {
				return  (staticUrl + (srt_url.split('/').pop()).split(".")[0])+".srt"
			} else {
				return  (staticUrl + srt_url.split('/').pop())
			} 
			
		}
		//
		const players = Plyr.setup('.js-player',{captions: {update: true}});

		var init_video = function(data){
			// Extract file_s3_url and delete file_org and id_transcript
			const fileS3Url = data.file_org[0].file_s3_url;
			delete data.file_org;
			delete data.id_transcript;

			var modal = document.querySelector('#streamModal');
			var player = modal.querySelector('#player');
			var video = document.createElement('video');
			video.src = fileS3Url; 

			video.classList.add("d-flex");
			video.style='border-radius: 6px';

			//video.poster = "";
			video.autoplay = false;
			video.controls = true;
			video.preload="auto";

			video.height = 450; // 👈️ in px
			video.width = 800//"100%"; // 👈️ in px

			player.appendChild(video);

			var toplay =  new Plyr(video,);
			toplay.on('mute', event => {
				// functions that I'd like to add
				console.log("Event Mute ...")
			});

			//  To Add All Transcripts
			var staticUrl = "{% static 'subtitles/vtt/' %}";
			for (var key in data) { // loop through the remaining properties in the object
				var real_key = key.replace("path_srt_","");
				if (data.hasOwnProperty(key)) {
					var track = document.createElement('track');
					track.kind = 'captions';
					track.label = detectLanguage(real_key);
					track.srclang = real_key;
					
					if (data[key].includes("mp4")) {
						track.src = staticUrl + (data[key].split('/').pop()).split(".")[0] + ".vtt"
					} else {
						track.src = staticUrl + data[key].split('/').pop().replace('.srt', `.vtt`)
					} 
					video.appendChild(track);
				}
			}

			modal.addEventListener('hidden.bs.modal', function(){
				video.pause();
				video.currentTime = 0;
				// toplay.destroy;
				// player.innerHTML = "";
			});

		};
	</script> 
	
{% endblock javascripts %}