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

{% load i18n %}
{% block content %}
<style>
  :root {
    --primary-btn-bg: #33B0CA;
    --disabled-btn-bg: #616161;
    --primary-bg: #FAFAFA;
    --heading-bg: #EAEAEA;
    --heading-color: #252525;
    --text-color: #616161;
    --cards-text-size: 10px;
    --para-text-size: 12px;
    --fullpage-para-text-size: 14px;
    --seb-heading-text-size: 16px;
    --menu-text-size: 16px;
    --primary-heading-text-size: 24px;
    --font-family: "Poppins", sans-serif;
  }

  .primary-btn-greeen {
    background: var(--primary-btn-bg) !important;
    font-family: var(--font-family) !important;
    border: none !important;
  }

  .symbol.symbol-primary .symbol-label {
    background-color: var(--primary-btn-bg) !important;
  }

  .green-stroke,
  .green-stroke-2 {
    background-color: var(--primary-bg) !important;
    border: 1px solid var(--primary-btn-bg) !important;
    color: var(--primary-btn-bg) !important;
  }

  .green-stroke-2:hover {
    cursor: default !important;
  }

  .green-stroke:hover {
    background-color: var(--primary-btn-bg) !important;
    color: var(--primary-bg) !important;
  }

  .text-hover-primary {
    color: var(--disabled-btn-bg) !important;
    font-size: 12px !important;
  }

  .text-hover-primary:hover {
    color: var(--primary-btn-bg) !important;
  }

  .primary-btn-color {
    background: transparent !important;
    width: 43px;
  }

  .primary-btn-color:hover {
    background: transparent !important
  }

  .gray-background {
    background: #EAEAEA !important;
    color: var(--disabled-btn-bg) !important;
  }

  .gray-background:hover {
    background: #EAEAEA !important;
    color: var(--disabled-btn-bg) !important;
    cursor: default !important;
  }

  .container-script {
    display: grid;
    grid-template-columns: 30vw 30vw 30vw;
    width: 90vw;
    margin: auto;
    padding-right: 100px;
  }

  .py-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .container-script .card {
    margin: 0.5em;
  }

  #wrap {
    word-wrap: break-word;
  }

  .dropdown_container {
    display: flex;
    justify-content: flex-end;
  }

  .actsic_builder {
    background-color: #ee3c4d;
    color: #fff;
  }

  .navi .navi-item {
    cursor: pointer;
  }

  .footer {
    position: fixed;
    bottom: 0;
    min-width: 100%;
  }

    {
    % comment %
  }

  ----------------FOOTER---------------- {
    % endcomment %
  }

  footer {
    display: flex;
    justify-content: space-around;
    background-color: #EAEAEA;
    width: 100%;
  }

  footer a {
    text-decoration: none;
    padding: 0 5px;
    color: #616161;
    position: relative !important;
  }

  .part2 {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  @media (max-width: 768px) {
    footer {
      flex-direction: column-reverse;
      justify-content: center;
      align-items: center;
      gap: 10px;
    }
  }

  @media (max-width: 590px) {
    .part2 {
      flex-direction: column;
    }
  }

  .container {
    min-height: calc(100vh - 100px);
    width: 100%;
    display: flex;
    flex-direction: column;
  }
</style>

<div id="mulitligule">
  <div style="text-align: center;">
    <h2 style="font-size: 24px; font-weight: 700;">My Audited Scripts</h2>
    <h6 style="font-size: 16px;">All your Audited Scripts are stored at blockchain.</h6>
    <h6 style="font-size: 16px;">mynextfilm.ai has no access to it.</h6>
  </div>

  <div class="container-script ">
    {% if user.is_authenticated %}
    {% if i %}
    {% for k in i %}

    <div class="grid-col ">
      <div class="">

        <div class="maindiv card card-custom gutter-b card-stretch">
          <div class="card-body pt-4">
            <div class="dropdown_container">
              <div class="dropdown dropdown-inline" data-toggle="tooltip" data-placement="left">
                <a href="#" class="btn primary-btn-color" data-toggle="dropdown" aria-haspopup="true"
                  aria-expanded="false">
                  <i class="ki ki-bold-more-hor"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-md dropdown-menu-right">
                  <ul class="navi navi-hover py-5">
                    <li class="navi-item">
                      <div href="#" class="navi-link delete-script" data-scriptid="{{k.scriptName}}"
                        data-url="{{url}}/audit/delete_scripts/{{k.scriptName}}">
                        <span class="navi-icon">
                          <i class="flaticon-interface-4"></i>
                        </span>
                        <span class="navi-text" style="font-size: 12px !important;">{% trans "Delete Script" %}</span>
                      </div>
                    </li>

                    <li class="navi-item">
                      <a onclick="downloadAuditedScriptOrigianal('{{url}}', '{{k.scriptid}}')" target="_blank"
                        class="navi-link" download>
                        <span class="navi-icon">
                          <i class="flaticon-download"></i>
                        </span>
                        <span class="navi-text" style="font-size: 12px !important;">{% trans "Download Original"
                          %}</span>
                      </a>
                    </li>

                    <li class="navi-item">
                      {% if k.iscomplete == "S" %}
                      <a onclick="downloadAuditedScriptReport('{{url}}', '{{k.scriptid}}')" target="_blank"
                        class="navi-link" download>
                        <span class="navi-icon">
                          <i class="flaticon-download"></i>
                        </span>
                        <span class="navi-text" style="font-size: 12px !important;">{% trans "Download Audited Report"
                          %}</span>
                      </a>
                      {% elif k.iscomplete == "R" %}
                      <a onclick="alert('your script is under processing please wait...');window.location.reload(false)"
                        class="navi-link" download>
                        <span class="navi-icon">
                          <i class="flaticon-download"></i>
                        </span>
                        <span class="navi-text">{% trans "Download Audited Report" %}</span>
                      </a>
                      {% elif k.iscomplete == "F" %}
                      <a onclick="alert('Sorry, We were unable to audit your script.');window.location.reload(false)"
                        class="navi-link" download>
                        <span class="navi-icon">
                          <i class="flaticon-download"></i>
                        </span>
                        <span class="navi-text">{% trans "Download Audited Report" %}</span>
                      </a>
                      {% endif %}
                    </li>

                  </ul>
                </div>
              </div>
            </div>
            <div class="d-flex align-items-center mb-7">
              <div class="flex-shrink-0 mr-4 mt-lg-0 mt-3">
                <div class="symbol symbol-circle symbol-lg-75 d-none">
                  <img src="assets/media/users/300_10.jpg" alt="image" />
                </div>
                <div class="symbol symbol-lg-75 symbol-circle symbol-primary">
                  <span class="symbol-label font-size-h1 font-weight-boldest"
                    style="text-transform: uppercase;">{{k.author|slice:":1"}}</span>
                </div>
              </div>
              <div class="d-flex flex-column wrap">
                <a href="#" class="text-dark font-weight-bold font-size-h4 mb-0 script-title"
                  style="word-wrap:break-all; max-width: 200px;cursor: default; color: #616161; font-size: 14px !important;">{{k.scriptName|slice:":12"}}</a>
                <span class="font-weight-bold" style="font-size: 12px;">{% trans "Copyright" %} </span>
              </div>
            </div>
            <div class="mb-7">
              <div class="d-flex justify-content-between align-items-center my-1">
                <span class="text-dark-75 font-weight-bolder mr-2" style="font-size: 12px !important;">{% trans
                  "Author:" %}</span>
                <span class="text-hover-primary">{{k.author }}</span>
              </div>
              <div class="d-flex justify-content-between align-items-center my-1">
                <span class="text-dark-75 font-weight-bolder mr-2" style="font-size: 12px !important;">{% trans
                  "Uploaded on:" %}</span>
                <span class="text-hover-primary">
                  {{ k.created_on }}
                </span>
              </div>
            </div>
            {% if k.iscomplete == "S" %}
            <button onclick="downloadAuditedScript('{{url}}', '{{k.scriptid}}')"
              class="btn btn-block btn-sm btn-light-success font-weight-bolder text-uppercase py-4 green-stroke">
              Download Audited Script (PDF)
            </button>
            <button onclick="downloadAuditedScriptDocs('{{url}}', '{{k.scriptid}}')"
              class="btn btn-block btn-sm btn-light-success font-weight-bolder text-uppercase py-4 green-stroke"
              download>
              Download Audited Script (DOCX)
            </button>
            <button onclick=redirectToScriptPad("{{k.scriptid}}")
              class="btn btn-block btn-sm btn-light-success font-weight-bolder text-uppercase py-4 green-stroke">
              View / Edit in Scriptpad
            </button>
            {% elif k.iscomplete == "R" %}
            <button onclick="alert('your script is under processing please wait...');window.location.reload(false)"
              class="btn btn-block btn-sm btn-light-warning font-weight-bolder text-uppercase py-4 green-stroke-2">
              {% trans "Download Audited Script (PDF)" %}
            </button>
            <button onclick="alert('your script is under processing please wait...');window.location.reload(false)"
              class="btn btn-block btn-sm btn-light-warning font-weight-bolder text-uppercase py-4 green-stroke-2">
              {% trans "Download Audited Script (DOCX)" %}
            </button>
            <button onclick="alert('your script is under processing please wait...');window.location.reload(false)"
              class="btn btn-block btn-sm btn-light-warning font-weight-bolder text-uppercase py-4 green-stroke-2">
              {% trans "View / Edit in Scriptpad" %}
            </button>
            {% elif k.iscomplete == "F" %}
            <button onclick="alert('Sorry, We were unable to audit your script.');window.location.reload(false)"
              class="btn btn-block btn-sm btn-light-danger font-weight-bolder text-uppercase py-4 gray-background">
              {% trans " Download Audited Script (PDF)" %}
            </button>
            <button onclick="alert('Sorry, We were unable to audit your script.');window.location.reload(false)"
              class="btn btn-block btn-sm btn-light-danger font-weight-bolder text-uppercase py-4 gray-background">
              {% trans " Download Audited Script (DOCX)" %}
            </button>
            <button onclick="alert('Sorry, We were unable to audit your script');window.location.reload(false)"
              class="btn btn-block btn-sm btn-light-danger font-weight-bolder text-uppercase py-4 gray-background">
              {% trans "View / Edit in Scriptpad" %}
            </button>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="container-script">
    <div style="
                  width: 42vw;
                  margin-left: 80%;
                  padding: 2em;
                  margin-top: 5%;
                  background-color: #FAFAFA;
                  border: 2px solid #616161;
                  text-align: center;
                ">
      <h4 style="font-size: 16px; font-weight: 600;">{% trans "Oops! You are yet to Audit your first script!!" %}</h4>
      <div style="margin: 15px auto 0 auto; display: flex; justify-content: center;">
        <button onclick="window.location.replace('/audit/home')" class="btn btn-primary primary-btn-greeen"
          style="margin-right: 1cm;">
          {% trans "Audit your Script Now" %}
        </button>
        <button onclick="window.location.replace('/audit/home')" class="btn btn-primary primary-btn-greeen">
          {% trans "Audit a Sample Script" %}
        </button>
      </div>
      <br />
      <p style="text-align: left; font-size: 12px;">
        P.S. - if you uploaded your script for Audit and are not yet seeing the Audited script OR had some difficulty
        in uploading your script, please"
        <a href="/contact">{% trans "contact us" %}</a>.
      </p>
    </div>
    {% csrf_token %}
  </div>
</div>
{% endif %} {% endif %}
</div>

{% comment %} -----------------------FOOTER----------------------- {% endcomment %}
<footer id="footer_mulitligule" class="py-3 footer toBottom handle-footer">
  <div>
    <p class="my-auto">&copy;2023 My Next Film PVT LTD</p>
  </div>
  <div class="my-auto part2">
    <a href="{%url 'agreement_base'%}" target="_blank">Agreement</a>
    <a href="{%url 'tnc_base'%}" target="_blank">Terms & Conditions</a>
    {% comment %} <a href="https://mynextfilm.com/static/homepage/PrivacyPolicy.html" target="_blank">Privacy Policy</a>
    {% endcomment %}
    <a href="{%url 'PrivacyPolicy_base'%}" target="_blank">Privacy Policy</a>
    <a href="{%url 'Refunds_base' %}#refunds" target="_blank">Refund & Cancellation Policy</a>
    <a href="{%url 'NDA_base'%}" target="_blank">N.D.A</a>
  </div>
</footer>

<script>

  function deleteFile(filename) {
    var xhr = new XMLHttpRequest();
    var url = 'data-url';
    var params = 'filename=' + encodeURIComponent(filename);

    xhr.open('DELETE', url, true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

    xhr.onreadystatechange = function () {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          console.log('File deleted:', filename);
        } else {
          console.error('Error deleting file:', filename);
        }
      }
    };

    xhr.send(params);
  }

  function deletescript() {
    var fileNameToDelete = 'example-file.txt';
    deleteFile(fileNameToDelete);
  }

</script>

<script>
  $(document).ready(function () {
    const deleteBtn = document.querySelectorAll(".delete-script");

    deleteBtn.forEach((btn) => {
      btn.addEventListener("click", async () => {
        console.log("maojsdf")
        //const sampleScriptMaindiv = btn.closest(".maindiv");
        //const scriptid = sampleScriptMaindiv.getAttribute("data-scriptid");
        const scriptid = btn.getAttribute("data-scriptid");
        const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
        const accessToken = localStorage.getItem("accessToken");
        console.log(scriptid)
        console.log(csrftoken)


        if (window.confirm("Are you sure to delete?")) {
          $.ajax({
            type: "delete",
            url: `/audit/delete_scripts/${scriptid}`,
            headers: {
              'X-CSRFToken': csrftoken,
              'Authorization': `Bearer ${accessToken}`
            },
            data: {
              'id': scriptid
            },
            success: function (response) {
              console.log("deleted successfully");
              window.location.reload();
            },
            error: function (response) {
              console.log("error in deletion process");
            }
          })
        }
      })
    })

  })        
</script>

<script>
  function downloadAuditedScript(url, id) {
    const accessToken = localStorage.getItem('accessToken')
    const apiUrl = `${url}/audit/download?script_id=${id}&type=script-pdf`;
    const headers = new Headers();
    headers.append('Authorization', `Bearer ${accessToken}`);
    const request = new Request(apiUrl, {
      method: 'GET',
      headers: headers,
    });
    {% comment %} window.location.reload() {% endcomment %}
    fetch(request)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.blob();
      })
      .then((blob) => {
        const blobUrl = window.URL.createObjectURL(blob);
        const downloadLink = document.createElement('a');
        downloadLink.href = blobUrl;
        downloadLink.download = 'AuditedPDF.pdf';
        downloadLink.style.display = 'none';
        document.body.appendChild(downloadLink);
        downloadLink.click();
        window.URL.revokeObjectURL(blobUrl);
      })
      .catch((error) => {
        console.error('Error downloading file:', error);
      });
    alert("Your Script is Downloading")
  }


  function downloadAuditedScriptDocs(url, id) {
    const apiUrl = `${url}/audit/download?script_id=${id}&type=script-docx`;
    const headers = new Headers();
    const accessToken = localStorage.getItem('accessToken')
    headers.append('Authorization', `Bearer ${accessToken}`);
    const request = new Request(apiUrl, {
      method: 'GET',
      headers: headers,
    });
    {% comment %} window.location.reload() {% endcomment %}
    fetch(request)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.blob();
      })
      .then((blob) => {
        const blobUrl = window.URL.createObjectURL(blob);
        const downloadLink = document.createElement('a');
        downloadLink.href = blobUrl;
        downloadLink.download = 'AuditedDocument.docx';
        downloadLink.style.display = 'none';
        document.body.appendChild(downloadLink);
        downloadLink.click();
        window.URL.revokeObjectURL(blobUrl);
      })
      .catch((error) => {
        console.error('Error downloading file:', error);
      });
    alert("Your Script is Downloading")
  }


  function downloadAuditedScriptOrigianal(url, id) {
    const apiUrl = `${url}/audit/download?script_id=${id}&type=script-original`;
    const headers = new Headers();
    const accessToken = localStorage.getItem('accessToken')
    headers.append('Authorization', `Bearer ${accessToken}`);
    const request = new Request(apiUrl, {
      method: 'GET',
      headers: headers,
    });
    {% comment %} window.location.reload() {% endcomment %}
    fetch(request)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.blob();
      })
      .then((blob) => {
        const blobUrl = window.URL.createObjectURL(blob);
        const downloadLink = document.createElement('a');
        downloadLink.href = blobUrl;
        downloadLink.download = 'OriginalFile';
        downloadLink.style.display = 'none';
        document.body.appendChild(downloadLink);
        downloadLink.click();
        window.URL.revokeObjectURL(blobUrl);
      })
      .catch((error) => {
        console.error('Error downloading file:', error);
      });
    alert("Your Script is Downloading")
  }

  function downloadAuditedScriptReport(url, id) {
    const apiUrl = `${url}/audit/download?script_id=${id}&type=audit-report`;
    const headers = new Headers();
    const accessToken = localStorage.getItem('accessToken')
    headers.append('Authorization', `Bearer ${accessToken}`);
    const request = new Request(apiUrl, {
      method: 'GET',
      headers: headers,
    });
    {% comment %} window.location.reload() {% endcomment %}
    fetch(request)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.blob();
      })
      .then((blob) => {
        const blobUrl = window.URL.createObjectURL(blob);
        const downloadLink = document.createElement('a');
        downloadLink.href = blobUrl;
        downloadLink.download = 'Audit Report';
        downloadLink.style.display = 'none';
        document.body.appendChild(downloadLink);
        downloadLink.click();
        window.URL.revokeObjectURL(blobUrl);
      })
      .catch((error) => {
        console.error('Error downloading file:', error);
      });
    alert("Your Script is Downloading")
  }

  // Handling Footer as per scrollbar - Aris
  // Check if the browser has a scrollbar
  function hasVerticalScrollbar() {
    const page = document.querySelector(".split-pane-component");
    return page.scrollHeight > window.innerHeight;
  }

  // Function to toggle the footer's position
  function toggleFooterPosition() {
    const footer = document.querySelector(".handle-footer");

    if (hasVerticalScrollbar()) {
      // If there is a scrollbar, make the footer scrollable
      footer.setAttribute('style', 'position:relative !important');
      footer.style.bottom = "auto";
      footer.style.overflowY = "auto";
      footer.style.maxHeight = "50vh";
    } else {
      // If there is no scrollbar, fix the footer at the bottom
      footer.setAttribute('style', 'position:fixed !important');
      footer.style.bottom = 0;
      footer.style.overflowY = "hidden";
      footer.style.maxHeight = "100%";
    }
  }


  // Call the function when the page loads and when it resizes
  window.addEventListener("load", toggleFooterPosition);
  window.addEventListener("resize", toggleFooterPosition);

</script>



<script>
  function redirectToScriptPad(id) {
    window.location.href = window.location.origin + "/scriptpad/#/" + id;
  }
</script>

{% endblock content %}