{% extends 'web/base.html.twig' %}
{% block title %}
  Нүүр хуудас | Toyota Dream Car Art Contest
{% endblock %}
{% block body %}
  <div class="container" style="margin-top: 300px">
    <div id="uploading" class="uploading" style="display: none;">
      <div class="msg" id="progressPerc">Хуулж байна: 0%</div>
      <div class="progress">
        <div id="progressBar" class="progress-bar bg-success" role="progressbar" style="width: 0; height: 6px" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
    </div>
    <form id="form" method="post" enctype="multipart/form-data">
      <input id="videoFile" type="file" name="videoFile" onchange="fileUpload()">
    </form>
  </div>
{% endblock %}

{% block js %}
<script>

  var uploading=false;
  function fileUpload() {
    var fd = new FormData();
    var files = $('#videoFile')[0].files[0];
    fd.append('file', files);

    startUpload()
    $.ajax({
      url:'{{ path('web_upload_video') }}',
      type: 'post',
      data: fd,
      contentType: false,
      processData: false,
      xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
          if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            percentComplete = parseInt(percentComplete * 100);
            console.log(percentComplete);

            if (percentComplete === 100) {
              percentComplete=99;
            }
            var percentVal = percentComplete + '%';
            console.log('percent: ', percentVal)
            $('#progressBar').css("width",percentVal);
            $('#progressPerc').text('Хуулж байна: '+percentVal);

          }
        }, false);

        return xhr;
      },
      success: function(response){
        console.log('res: ', response)
        console.log('res: ', response.data)
        if(response != 0){
          alert('file uploaded');
        }
        else{
          alert('file not uploaded');
        }
        success()

      },
    });
  }

  function success(){
    $("#uploading").hide();
    $("#form").show();
  }

  function checkForm(){
    var f=document.getElementById("file").files[0];
    var maxByte = 314572800;
    var maxMega = 300;

    if(!$('#file').val()){
      window.alert("Та файлаа сонгоно уу!");
      return false;
    }else if(f.size > maxByte) {
      window.alert("Файлын хэмжээ хэтэрсэн байна! Хамгийн ихдээ "+maxMega+" Мегабайт файл сонгоно уу.");
      return false;
    }
    else {
      return true;
    }
  }

  function startUpload(){

    console.log("upload starting");
    // if(uploading) {return;}
    uploading=true;
    $("#uploading").show();
    $("#form").hide();
    $("#progressBar").css('width','0%');
  }


</script>
{% endblock %}