{% extends "mnfapp/base.html" %}
<!DOCTYPE html>
{% load static %}
{% load poll_extras1 %}
{% block content %}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Conversion</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="{% static 'conversion2/style_input.css' %}">
    <script src="{% static 'conversion2/script_input2.js' %}" defer></script>
    <style>

    </style>
</head>

<body>
    {% if messages %}
    <ul class="messages">
        {% for message in messages %}
        {% if message.tags %} <script>alert("{{message}}");</script>{% endif %}>
        {% endfor %}
    </ul>
    {% endif %}
    <div id="container_loader" class="container_loader_class">
        <div id="conatiner_sub" class="container_sub">
            <div id="thank-you-message">
                <div class="loading-spinner"></div>
                <p class="loader_font">
                    We are processing your script. Please Wait .
                </p>
            </div>
        </div>
    </div>
    <div class="conversion-landing-page-wrapper">
        <div class="content-container mt">
            <div class="content-container-inner">
                <div class="doodle-container hide_mobile">
                    <img src="{% static 'conversion2/conversion-doodle.png' %}" alt="conversion doodle">
                </div>
                <div>
                    <h1 class="dark-text">Welcome to the Conversion Studio !</h1>
                    <ul>
                        <li class="light-text mobile_flex">
                            <span class="display_none display_mobile"><img
                                    src="{% static 'conversion2/conversion-doodle.png' %}" alt="conversion doodle"
                                    class="doodle-img"></span>
                            By converting your screenplay in several different languages, you can significantly
                            increase the possibility of getting a film made on it.
                        </li>
                        <li class="light-text">In MNF Conversion Studio you can convert your screenplay written in any
                            language into
                            114 more languages.
                        </li>
                        <li class="light-text">It's simple. Upload your screenplay, wait for a few minutes and be ready
                            to
                            send it to
                            many more
                            producers.</li>
                        <li class="light-text">You may even opt for dual language dialogues in which dialogues in source
                            language and
                            destination
                            language are written side by side.
                        </li>
                    </ul>
                </div>
            </div>
            <div class="conversion_block">
                <img src="{% static 'conversion2/conversion_screen.png' %}" alt="conversion video">
                <h2 class="dark-text">Your Screenplays are Secured by Blockchain. <span class="c-green-text">MNF</span>
                    has no
                    access to Them.</h2>
            </div>
            <form id="import" action="{% url 'conversion' %}" method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="uplod_scripts" id="uplodDivscript">
                    <span>
                        <input type="radio" name="upload_script" id="uploadScript" checked>
                        <label for="uploadScript">Upload Script</label>
                    </span>
                    <span>
                        <input type="radio" name="upload_script" id="chooseScript">
                        <label for="chooseScript" id="choosebtntext">Choose from existing Script</label>
                    </span>
                </div>
                <select class="browse_btn" id="scriptDwopdwn" onchange="put_existing_link_url();">
                    <option value="" hidden selected>Choose existing Scripts</option>
                    {% for script in exsiting_scripts %}
                    <option value="{{script.0}}">{{script.1|get_script_name}}</option>
                    {% endfor %}
                </select>
                <button type="button" class="browse_btn" onclick="uploadscript()" id="browserFile">Choose a
                    file from
                    browser</button>
                <input type="file" name="script" id="con_file" class="display_none" accept=".docx, .fdx, .pdf" />
                <p class="red-text">Please upload your script in "Docx", "Fdx", "Pdf" format only..</p>
                <button type="submit" class="c-green-bg conversion-btn" id="UploadBlockchain">Upload on
                    Blockchain</button>
            </form>
            <!-- <p class="light-text or-text">OR</p>
            <button class="cd-green-border conversion-btn" onclick="window.location='/mnfapp/samplescriptC'">Test
                Screenplay
                Conversion</button> -->
        </div>
    </div>
    <!-- mobile version -->

    <script>
        const importForm = document.getElementById("import");
        const conFile = document.getElementById("con_file");
        const existingScripts = document.getElementById("scriptDwopdwn");
        importForm.addEventListener("submit", (e) => {
            const uploadScriptRadio = document.querySelector("#uploadScript").checked;
            const existingScriptRadio = document.querySelector("#chooseScript").checked;
            if (uploadScriptRadio && conFile.value === "") {
                alert("Please choose a file");
                e.preventDefault();
            } else if (existingScriptRadio && existingScripts.value === "") {
                alert("Please choose any existing file");
                e.preventDefault();
            } else {
                console.log("REached here")
                document.getElementById("container_loader").style.display = "flex";
                document.querySelector(".split-pane-component").style.overflow = "none";
                document.getElementById("mulitligule").style.display = "none";
                document.getElementById("footer_mulitligule").style.display = "none"
            }

        });
        function uploadscript() {
            document.getElementById('con_file').click();
        }
        document.getElementById('con_file').addEventListener('change', function () {
            var file = this.files[0];
            let fname = file.name;
            document.getElementById('browserFile').innerHTML = fname;
        });
    </script>
    <script>
        var URL = window.location.origin
    </script>
</body>

</html>
{% endblock %}