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

{% block title %}
آپدیت لیست غذا ها
{% endblock %}

{% block header.scripts %}
    <script type="text/javascript">
      function fileSelected() {
        var file = document.getElementById('fileToUpload').files[0];
        if (file) {
          var fileSize = 0;
          if (file.size > 1024 * 1024)
            fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
          else
            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

          //document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
          //document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
          //document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
        }
      }

      function uploadFile() {
        $("#dynamic")
        .css("width", 0 + "%")
        var fd = new FormData();
        if (document.getElementById("userName").value == ""){
            alert("نام کاربری را وارد کنید");
            return 0;
        }
        if (document.getElementById("password").value == ""){
            alert("رمز عبور را وارد کنید");
            return 0;
        }
        if (document.getElementById('fileToUpload').files[0] == null){
            alert("فایل اکسل را انتخاب کنید");
            return 0;
        }

        fd.append("file", document.getElementById('fileToUpload').files[0]);
        fd.append("password", document.getElementById('password').value);
        fd.append("userName", document.getElementById('userName').value);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.open("POST", "");
        xhr.send(fd);
        document.getElementById('status').innerHTML = 'در حال ارسال فایل';
      }

      function uploadProgress(evt) {
        if (evt.lengthComputable) {
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
          if (percentComplete == 100){
              document.getElementById('status').innerHTML = 'در حال پردازش';
          }
          document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
          $("#dynamic")
          .css("width", percentComplete + "%")

        }
        else {
          document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
      }

      function uploadComplete(evt) {
        /* This event is raised when the server send back a response */
        document.getElementById('status').innerHTML = '';
        try {
            var j = JSON.parse(evt.target.responseText);
            alert(j.message);
        }
        catch (e) {
            console.log(evt.target.responseText);
            alert(e.toString());
        }
      }

      function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
      }

      function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
      }
    </script>
{% endblock %}

{% block body.content %}
    <!-- Form Element area Start-->
    <div class="form-element-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="form-element-list mg-t-30">
                    <h5 class="text-center" id="status" style="color: #2edd58"></h5>
                    <div class="cmp-tb-hd">
                        <h2 class="text-right">بروز رسانی لیست غذا ها</h2>
                        <p class="text-right" dir="rtl">به منظور آپدیت لیست غذا ها، فایل اکسل را در قالب تعین شده انتخاب نمایید. ترتیب ستون ها تغییر نکند. برای ممیز از حالت استاندارد آن استفاده کنید (نه از نقطه). در صورت بروز مشکل به پشتیبانی اطلاع دهید.</p>
                    </div>
                    <div class="row">
                        <div class="wrapper fadeInDown">
                          <div id="formContent">
                            <!-- Tabs Titles -->

                            <!-- Icon -->
                            <div class="fadeIn first">
                              <img class="col-lg-2 col-md-2" src={% static "images/logo.png" %} id="icon" alt="Idia Icon" />
                            </div>


                    {#        <!-- Login Form -->#}
                              <form id="form1" enctype="multipart/form-data" method="post" action="">

                                <div class="wrap-input100 validate-input" data-validate = "Valid email is required: ex@abc.xyz">
                                    <input class="input100" id="userName" type="text" name="userName" placeholder="UserName">
                                    <span class="focus-input100-1"></span>
                                    <span class="focus-input100-2"></span>
                                </div>

                                <div class="wrap-input100 rs1 validate-input" data-validate="Password is required">
                                    <input class="input100" id="password" type="password" name="password" placeholder="Password">
                                    <span class="focus-input100-1"></span>
                                    <span class="focus-input100-2"></span>
                                </div>




                                <div>
                                    <input type="file" name="file" id="fileToUpload" onchange="fileSelected();"/>
                                </div>

                                <div id="fileName"></div>
                                <div id="fileSize"></div>
                                <div id="fileType"></div>

                                <input type="button" class="btn-success btn-primary" onclick="uploadFile();" value="بفرست" />

                                <div id="progressNumber"></div>
                                <div class="progress">
                                  <div id="dynamic" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                                    <span id="current-progress"></span>
                                  </div>
                                </div>
                              </form>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
    <!-- Form Element area End-->
{% endblock %}

{% block scripts.other %}

{% endblock %}