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

{% load sizify %}
{% load sub_vtt %}
{% load srt_path %}
{% load format_time %}
{% load detect_language %}

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

{% block title %} Dashbord {% endblock title %}

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

{% block content %}
<!--begin::Toolbar-->
<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 mt-8">
				<!--begin::Tables Widget 9-->
				<div class="card card-xxl-stretch bg-body border-0 mb-5 mb-xl-8">
					<!--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"> All Processed Files </span>
						</h3>
					</div>
					<!--end::Header-->
					<!--begin::Body-->
					<div class="card-body py-3">
						<!--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-->
                                {% for video in transcripts %}
                                <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('{{ video.id_transcript|sub_vtt }}')" >
                                                        <!--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({% 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="{{ video.file_org.file_title }}">
                                                    <a class="text-gray-800 fw-bolder text-hover-primary mb-1 fs-6">{{ video.file_org.file_title|truncatechars:55 }}</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">{{ video.file_org.size|sizify }}</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">{{ video.file_org.duration|format_time}}</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="text-success fw-bold  d-block mb-1 fs-6 mt-5">{{ video.file_org.language|detect_language }}</span>
                                        </td>
                                        <td>
                                            <span class="text-muted d-block mb-1 fs-6 mt-5">
                                                <span class="text-muted font-weight-bolder">{{ video.file_org.when_uploaded|date:"Y-m-d H:m:s"}}</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="{% static video.path_srt_en|srt_path %}" 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 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="{% static video.path_srt_es|srt_path %}" 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 -->
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- end:: Show Files Uploaded With There SRT Files -->
                                </tbody>
                                {% endfor %}
                                <!--end::Table body-->
                            </table>
                            <!--end::Table-->
                        </div>
                        <!--end::Table container-->'
					</div>
					<!--begin::Body-->
				</div>
				<!--end::Tables Widget 9-->
			</div>
		</div>
		<!--end::Row-->
	</div>
	<!--end::Container-->
</div>
<!--end::Toolbar-->
{% 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 src="{% static 'js/upload.media.js' %}"></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/plyr/3.5.6/plyr.min.js'></script>
	<!--end::Page Custom Javascript-->

	<script>
		const players = Plyr.setup('.js-player',{captions: {update: true}});

		var init_video = function(data){
			// console.log("data:", data)
			var jsonObj = JSON.parse(data);
			var url = jsonObj.file; // extract the "file" property
			delete jsonObj.file; // remove the "file" property from the object


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

			source.src =  url;
			source.type = 'video/mp4';
			video.appendChild(source);

			// video section

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

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

			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 jsonObj) { // loop through the remaining properties in the object
				if (jsonObj.hasOwnProperty(key)) {
					// do something with each property (e.g. print its value)
					// console.log(key + ": " + jsonObj[key]);

					var track = document.createElement('track');
					track.kind = 'captions';
					track.label = detectLanguage(key);
					track.srclang = key;
					track.src = staticUrl + (jsonObj[key])
					video.appendChild(track);
				}
			}

			// To Stop Deplicated
			modal.addEventListener('hidden.bs.modal', function(){
				video.pause();
				video.currentTime = 0;
				toplay.destroy;
				player.innerHTML = "";
			});
		};
		//
		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';
		}
	</script>

	<script>
		htmx.onLoad(function() {
			// hundel tooltip in every load
			$('body>.tooltip').remove();
			$('div[data-bs-toggle="tooltip"]').tooltip({html: true});
			// hundel dropdown-menu in every load
			KTMenu.createInstances();
			// need more hundel(s)
			// console.log("Test :: HTMX AND Update Modal");
		});
	</script>
{% endblock javascripts %}