{% extends 'mnfapp/base.html'%}
{% load static %}
{% csrf_token %}

{% block title %}Conversion Room {%endblock%}
{% block content1 %}
{% endblock %}
{%block content%}
<style>
	.error {
		color: rgb(228, 68, 68);
	}

	.uploadFile button {
		border: solid grey dashed 1px;
		padding-left: 1em;
		padding-right: 1em;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		border-radius: 10px;
		margin-left: 25vw;
		border: 0;
		background-color: rgb(228, 68, 68);
		color: white;
		font-size: 1.3em;
		width: 10vw;
		margin-top: 0.3em;

	}

	.uploadFile input {
		transform: translate(-50%, -50%);
		margin-left: 50%;
		margin-top: 5%;
	}
	
</style>
<script>
	var myDropzone = new Dropzone("div#myDZ", {
		url: "/script"
	});
	$("div#myDZ").dropzone({
		url: "/script"
	});

</script>
<div class="container-995">
	<div class="card-body pb-0">
		<div class="card card-custom">
			<div class="card-body">
				<h3 class="mb-5">Welcome to the Conversion Studio!</h3>
				<p class="lead">We are not stopping at narration, we have capabilities to convert your script to
					language of your choice. You must have faced problems converting scripts to different languages.
					Finding people to do it for you is a huge challenge and it takes eternity for humans to translate.
				</p>
				<p class="lead">Our AI engine is doing it for thousands of scripts in minutes, just upload your script
					and enjoy the results. Also, our script editor section follows the standard script writing format
					where you can write your scripts and edit it on the go.</p>
				<p class="lead">A tech enabled writing pad awaits for you to write your imaginations!</p>
			</div>
		</div>
	</div>
	<!--begin::Form-->
	<form id="import" name="UScript" class="uploadFile" action="{% url 'conversion' %}" method="post" enctype="multipart/form-data">
		{% csrf_token%}
		<div class="dropzone fallback">
			<input id="con_file" type="file" name="script" value="add files">
		</div>
		<button type="submit">upload</button>
	</form>

	<form class="form" action="{% url 'script'%}" id="inputForm" method="post" enctype="multipart/form-data">
		{% csrf_token %}
		<!--
		<div class="card-body">
			<div class="card card-custom">
				<div class="card-body">
					<div class="form-group mb-0">
						<label class="">Upload Script</label>
						<div class="">
							<div name="upload" value="Upload" accept=".docx" class="dropzone dropzone-default"
								id="kt_dropzone_2" required="required">
								<div class="dropzone-msg dz-message needsclick">
									<h3 class="dropzone-msg-title">Drop files here or click to upload.</h3>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		-->
		<input type="text" name="fileUpload" value='{{fileName}}' id="filePath" style="display: none;" />
		<input type="text" name="script_title" value='{{script_title}}' id="filePath1" style="display: none;" />
		<input type="text" name="author_name" value='{{author_name}}' id="filePath2" style="display: none;" />

		<div class="card-body pb-0">
			<h3>
				We have detected the following information from your source script. Feel free to change it.
			</h3>
		</div>
		<div class="custom-grid-two-columns">
			<div class="card card-custom">
				<div class="card-header">
					<h3 class="card-title mb-0">
						Source File Details
					</h3>
				</div>
				<!-- <input type="text" name="" value="{{dial_src_lang}}" id="primary_lang" style="display: none;"> -->
				<input type="text" name="" value="{{non_dial_src_lang}}" id="primary_lang2" style="display: none;">
				<div class="card-body pb-0 custom-grid-columns-250">
					<div class="form-group">
						<label for="exampleSelectl">Language of Screenplay </label>
						<select id="language" class="form-control select2 form-control-md kt-select2">
							{% if non_dial_src_lang %}
							<option value="{{non_dial_src_lang}}">{{non_dial_src_lang_full}}</option>
							{%endif%}
						</select>
						<span class='error' id=language_error></span>

					</div>

					<div class="form-group">
						<label for="exampleSelectd">Script of Screenplay</label>
						<select class="form-control select2 form-control-md kt-select2">
							{% if non_dial_src_script %}
							<option value="{{non_dial_src_script}}">{{non_dial_src_script}}</option>
							{%endif%}
							
						</select>
						<span class='error' id=language1_error></span>

					</div>


					<div class="form-group">
						<label>Language of Dialogues</label>
						<select id="language2" class="form-control form-control-md">
							{% if dial_src_lang %}
							<option value="{{dial_src_lang}}" id="primary_lang">{{dial_src_lang_full}}</option>
							{%endif%}
							<option value="hi">Hindi</option>
							<option value="en">English</option>
							<option value="ur">Urdu</option>
							<option value="ar">Arabic</option>
							<option value="kn">Kannada</option>
							<option value="ta">Tamil</option>
							<option value="bg">Bulgarian</option>
							<option value="bn">Bangla</option>
							<option value="ml">Malayalam</option>
							<option value="ru">Russian</option>
							<option value="sr">Serbian</option>
							<option value="uk">Ukranian</option>
							<option value="hr">Croatian</option>
							<option value="ga">Irish</option>
							<option value="sq">Albanian</option>
							<option value="mr">Marathi</option>
							<option value="fa">Persian</option>
							<option value="tr">Turkish</option>
							<option value="hu">Hungarian</option>
							<option value="it">Italian</option>
							<option value="ro">Romanian</option>
							<option value="pa">Punjabi</option>
							<option value="gu">Gujrati</option>
							<option value="or">Odia</option>
							<option value="zh">Chienese</option>
							<option value="ne">Nepali</option>
							<option value="fr">French</option>
							<option value="es">Spanish</option>
							<option value="id">Indonesian</option>b
							

						</select>
					</div>

					<div class="form-group">
						<label>Script of Dialogues</label>
						<select class="form-control select2 form-control-md kt-select2">
							{% if dial_src_script %}
							<option value="{{dial_src_script}}">{{dial_src_script}}</option>
							{% else %}
							<option value="">Select a Language Option</option>
							{%endif%}
							
						</select>
						<span class='error' id="language3_error"></span>

					</div>


				</div>
			</div>
			<div class="card card-custom">
				<div class="card-header">
					<h3 class="card-title mb-0">
						Desired File Details
					</h3>
				</div>
				<div class="card-body pb-0">
					<div class="form-group">
						<label for="exampleSelect">Language of Screenplay </label>
						<select name="nondial_dest_language" id="language4"
							class="form-control select2 form-control-md kt-select2">
							 <option value="">Select a Language Option</option>
							<!--<option value="hi">Hindi</option>
							<option value="en">English</option>
							<option value="germen">German</option> -->
						</select>
						<span class='error' id="language4_error"></span>

					</div>
					<div class="form-group">
						<label for="exampleSelectd">Script of Screenplay</label>
						<select name="translated_screenplay_script"
							class="form-control select2 form-control-md kt-select2">
							<option value="">Select a Language Option</option>
							<option value="Devanagri">Devanagri</option>
							
							<option value="Latin">Latin</option>

						</select>
						<span class='error' id="language5_error"></span>

					</div>
					<div class="form-group">
						<label>Language of Dialogues</label>
						<select name="dial_dest_language" id="language6"
							class="form-control select2 form-control-md kt-select2">
							<option value="">Select a Language Option</option>
							<!-- <option value="hi">Hindi</option>
							<option value="gu">Gujrati</option>
							<option value="de">German</option>
							<option value="es">Spanish</option>
							<option value="mr">Marathi</option>
							<option value="en">English</option>
							<option value="ta">Tamil</option> -->
						</select>
						<span class='error' id="language6_error"></span>

					</div>
					<div class="form-group">
						<label>Script of Dialogues</label>
						<select name="dial_dest_script"
							class="form-control select2 form-control-md kt-select2">
							<option value="">Select a Language Option</option>
							<option value="Devanagri">Devanagri</option>
							<option value="Latin">Latin</option>							
							<option value="Tamil">Tamil</option>
						</select>
						<span class='error' id="language7_error"></span>

					</div>
				</div>
			</div>
		</div>
		<div class="card-body pt-0">
			<div class="card card-custom">
				<div class="card-body pb-0">
					<div class="form-group">
						<div class="checkbox-list">
							<div>
								<label class="checkbox checkbox-square">
									<input name="dual_dial_script" type="checkbox" checked="checked" name="Action" />
									<span></span>Generate a Dual Dialogue Script</label>
							</div>
						</div>
					</div>
				</div>
				<div class="card-footer">
					<button type="submit" id="submitForm" class="btn btn-primary mr-2">Submit</button>
					<button type="reset" class="btn btn-secondary">Cancel</button>
				</div>
			</div>
		</div>
	</form>
	<!--end::Form-->
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
	var myfile = "";
	$('#uploadFile').on('change', function () {
		myfile = $(this).val();
		var ext = myfile.split('.').pop();
		if (ext == "docx") {
		} else {
			alert("File Type Not Allowed");
			location.reload()
		}
	});
	$('#inputForm').hide();
	if (document.getElementById('filePath').value != '') {
		$('#inputForm').show();
		$('#import').hide();
	}
	
var myfile = "";
  $('#con_file').on('change', function () {
    myfile = $(this).val();
    var ext = myfile.split('.').pop();
    if (ext == "docx") {
    } else {
      alert("File Type Not Allowed. upload docx file");
      location.reload()
    }
  });


	const obj = [
        {
          key: "English",
          options: ["Hindi","English", "Urdu",'Kannada','Tamil','Arabic', 
          'Bulgarian','Telugu', 'Bengali','Malyalam', 'Russian','Serbian', 
          'Ukranian','Croation', 'Irish','Albanian', 'Marathi','Persian', 'Turkish','Hungarian', 'Italian','Romanian',
           'Punjabi','Gujrati', 'Odia','Chinese', 'Nepali','French', 'Spanish','Indonesian'],
          codeSrc:'en',
        },
        {
          key: "Hindi",
          options: ["English","Hindi", "Urdu","Marathi", "Tamil","Telugu", "Malayalam",],
          codeSrc:'hi',

        },
        {
          key: "Urdu",
          options: ["English", "Arabic","Hindi"],
          codeSrc:'ur',

        },
        {
          key: "Kannada",
          options: ["English"],
          codeSrc:'kn',

        },
        {
          key: "Arabic",
          options: ["Urdu"],
          codeSrc:'kn',

        },

        {
          key: "Tamil",
          options: ["English","Kannada","Telugu", "Malayalam",],
          codeSrc:'ta',

        },
        {
          key: "Bulgarian",
          options: ["English"],
          codeSrc:'bg',
        },
        {
          key: "Malayalam",
          options: ["English","Kannada","Tamil","Telugu", 'Persian'],
          codeSrc:'ml',

        },
        {
          key: "Russian",
          options: ["English","Russian", "Serbian","Ukranian", "Persian", "Urdu","Bulgarian", "Croatian"],
          codeSrc:'ru',

        },
        
        {
          key: "Serbian",
          options: ["English","Russian", "Russian","Ukranian", "Persian", "Urdu","Bulgarian", "Croatian"],
          codeSrc:'sr',

        },
        {
          key: "Ukranian",
          options: ["English","Russian", "Russian","Serbian", "Persian", "Urdu","Bulgarian", "Croatian"],
          codeSrc:'uk',

        },
        {
          key: "Croatian",
          options: ["English","Russian", "Russian","Serbian", "Persian", "Urdu","Bulgarian" ,"Ukranian"],
          codeSrc:'hr',

        },
        {
          key: "Irish",
          options: ["Albanian", "Hungarian","Ukranian", "Italian", "Romanian"],
          codeSrc:'ga',

        },
        {
          key: "Hungarian",
          options: ["Russian", "Serbian","Ukranian", "Croatian", "Italian","Albanian"],
          codeSrc:'hu',

        },
        {
          key: "Romanian",
          options: ["Ukranian", "Croatian", "Italian","Albanian","Irish"],
          codeSrc:'ro',
        },
        {
          key: "Albanian",
          options: ["Russian", "Serbian","Ukranian", "Croatian", "Italian"],
          codeSrc:'sq',

        },
        {
          key: "Persian",
          options: ["Russian", "Serbian","Ukranian", "Persian", "Urdu"],
          codeSrc:'',

        },
        {
          key: "Punjabi",
          options: ["English","Arabic", "Hindi","Gujrati","Odia", "Chinese","French","Nepali","Spanish","Indonesian"],
          codeSrc:'pa',

        },
        {
          key: "Odia",
          options: ["English","Arabic", "Hindi","Gujrati","Punjabi", "Chinese","French","Nepali","Spanish","Indonesian"],
          codeSrc:'or',

        },
        {
          key: "Gujrati",
          options: ["English","Hindi","Punjabi","Odia", "Chinese","French","Nepali","Spanish","Indonesian"],
          codeSrc:'gu',

        },
        {
          key: "Chinese",
          options: ["English","Arabic","Urdu","Punjabi","Odia", "Gujrati","French","Nepali","Spanish","Indonesian"],
          codeSrc:'zh',

        },
        {
          key: "Nepali",
          options: ["English","Urdu","Punjabi","Odia", "Gujrati","French","Chinese","Spanish","Indonesian"],
          codeSrc:'ne',

        },
        {
          key: "French",
          options: ["English","Arabic","Urdu","Punjabi","Odia", "Gujrati","Chinese","Nepali","Spanish","Indonesian"],
          codeSrc:'fr',

        },
        {
          key: "Spanish",
          options: ["English","Arabic","Urdu","Punjabi","Odia", "Gujrati","Chinese","Nepali","French","Indonesian"],
          codeSrc:'es',

        },
        {
          key: "Indonesian",
          options: ["English"],
          codeSrc:'id',

        },
        
        
        {
          key: "Italian",
          options: ["Persian","Bengali", "Turkish", "Albanian","Hungarian","Irish","Romanian","Bulgarian"],
          codeSrc:'it',
        },

        
        

      ];
		
      const primaryLangSelectElem2 = document.getElementById("primary_lang2");
	
      const secondaryLangSelectElem2 = document.getElementById("language4");
      const primaryLangSelectElem = document.getElementById("primary_lang");
      const secondaryLangSelectElem = document.getElementById("language6");
	  const primaryLangSelectElem1 = document.getElementById("language2");
      function clearOptions(elem) {
        var length = elem.options.length;
        for (i = length - 1; i >= 0; i--) {
          elem.options[i] = null;
        }
      }


      function createOption2(elem, key) {
        var option = document.createElement("option");
        option.value = key;
        option.innerHTML = key;
        elem.appendChild(option);
      }


      function renderSecondaryLang(codeSrc) {
        const selectedPrimaryObj = obj.find(
          (item) => item.codeSrc === codeSrc 
        );
        selectedPrimaryObj.options.map((lang) => {
            createOption2(secondaryLangSelectElem, lang);          
        });
      }
	  function renderSecondaryLang2(codeSrc) {
        const selectedPrimaryObj = obj.find(
          (item) => item.codeSrc === codeSrc 
        );
        selectedPrimaryObj.options.map((lang) => {
            createOption2(secondaryLangSelectElem2, lang);          
        });
      }



      const codeValue = primaryLangSelectElem.value;
	  const codeValue2 = primaryLangSelectElem2.value;
	  
      renderSecondaryLang(codeValue);
      renderSecondaryLang2(codeValue2);
      primaryLangSelectElem1.addEventListener("change", (e) => {
        clearOptions(secondaryLangSelectElem);
        renderSecondaryLang(e.target.value);
      });
	  
      
//	$("#language2 option").val(function (idx, val) {
//		$(this).siblings('[value="' + val + '"]').remove();
//	});

var seen = {};
jQuery('#language2').children().each(function() {
    var txt = jQuery(this).attr('value');
    if (seen[txt]) {
        jQuery(this).remove();
    } else {
        seen[txt] = true;
    }
});
</script>


{% endblock %}