{% extends 'base.html' %}
{% load static %}
{% block link %}
    <link rel="stylesheet" href="{% static 'assets/bundles/dropzonejs/dropzone.css' %}">
    <link rel="stylesheet" href="{% static 'assets/bundles/izitoast/css/iziToast.min.css' %}">
{% endblock link %}
{% block content %}
<section class="section">
    <div class="section-body">
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h4>Upload Campaign</h4>
            </div>
            <div class="card-body">
            <form method="post" class="dropzone" id="upload-form" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="text"  class="form-control col-md-6" id ="media_name" name ="media_name" placeholder="Enter campaign name" required/>
                <input class="form-control col-md-6 mt-3" name="file" id="file" type="file" multiple/>
                </div>
                <div class="card-footer">
                  <div class="row">
                    <!-- <input name="media_name"  id="media_name" class="form-control col-md-6" type="text" placeholder="Enter Campaign Name" required/> -->
                    <button class="btn btn-sm btn-primary" id="start-task-button">Submit</button>
                  </div>
                </div>   
            </form>
            <div class="progress">
              <div id="progress-bar" class="progress-bar bg-success" role="progressbar" style="width: 0%; background-color:whiteblack; color:black;">Progress:</div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal" tabindex="-1" role="dialog" id="myModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Success</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>The campaign has been uploaded succesfully. Select one of the actions below to continue</p>
            </div>
            <div class="modal-footer">
              <form action="{% url 'campaign-gallery' %}">
              <button type="submit" class="btn btn-primary">Campaign Gallery</button>
              </form>
              <form action="{% url 'media-upload' %}">
              <button type="submit" class="btn btn-primary">Upload Campaign</button>
             </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <div class="settingSidebar">
    <a href="javascript:void(0)" class="settingPanelToggle"> <i class="fa fa-spin fa-cog"></i>
    </a>
    <div class="settingSidebar-body ps-container ps-theme-default">
      <div class=" fade show active">
        <div class="setting-panel-header">Setting Panel
        </div>
        <div class="p-15 border-bottom">
          <h6 class="font-medium m-b-10">Select Layout</h6>
          <div class="selectgroup layout-color w-50">
            <label class="selectgroup-item">
              <input type="radio" name="value" value="1" class="selectgroup-input-radio select-layout" checked>
              <span class="selectgroup-button">Light</span>
            </label>
            <label class="selectgroup-item">
              <input type="radio" name="value" value="2" class="selectgroup-input-radio select-layout">
              <span class="selectgroup-button">Dark</span>
            </label>
          </div>
        </div>
        <div class="p-15 border-bottom">
          <h6 class="font-medium m-b-10">Sidebar Color</h6>
          <div class="selectgroup selectgroup-pills sidebar-color">
            <label class="selectgroup-item">
              <input type="radio" name="icon-input" value="1" class="selectgroup-input select-sidebar">
              <span class="selectgroup-button selectgroup-button-icon" data-toggle="tooltip"
                data-original-title="Light Sidebar"><i class="fas fa-sun"></i></span>
            </label>
            <label class="selectgroup-item">
              <input type="radio" name="icon-input" value="2" class="selectgroup-input select-sidebar" checked>
              <span class="selectgroup-button selectgroup-button-icon" data-toggle="tooltip"
                data-original-title="Dark Sidebar"><i class="fas fa-moon"></i></span>
            </label>
          </div>
        </div>
        <div class="p-15 border-bottom">
          <h6 class="font-medium m-b-10">Color Theme</h6>
          <div class="theme-setting-options">
            <ul class="choose-theme list-unstyled mb-0">
              <li title="white" class="active">
                <div class="white"></div>
              </li>
              <li title="cyan">
                <div class="cyan"></div>
              </li>
              <li title="black">
                <div class="black"></div>
              </li>
              <li title="purple">
                <div class="purple"></div>
              </li>
              <li title="orange">
                <div class="orange"></div>
              </li>
              <li title="green">
                <div class="green"></div>
              </li>
              <li title="red">
                <div class="red"></div>
              </li>
            </ul>
          </div>
        </div>
        <div class="p-15 border-bottom">
          <div class="theme-setting-options">
            <label class="m-b-0">
              <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input"
                id="mini_sidebar_setting">
              <span class="custom-switch-indicator"></span>
              <span class="control-label p-l-10">Mini Sidebar</span>
            </label>
          </div>
        </div>
        <div class="p-15 border-bottom">
          <div class="theme-setting-options">
            <label class="m-b-0">
              <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input"
                id="sticky_header_setting">
              <span class="custom-switch-indicator"></span>
              <span class="control-label p-l-10">Sticky Header</span>
            </label>
          </div>
        </div>
        <div class="mt-4 mb-4 p-3 align-center rt-sidebar-last-ele">
          <a href="#" class="btn btn-icon icon-left btn-primary btn-restore-theme">
            <i class="fas fa-undo"></i> Restore Default
          </a>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}

{% block script %}
<script src="{% static 'assets/bundles/izitoast/js/iziToast.min.js' %}"></script>
<!-- <script src="{% static 'assets/js/page/toastr.js' %}"></script> -->
<script>
  $('#myModal').modal('hide')
  function updateProgress(task_id) {
      $.get('/content/upload/status/' + task_id, function(data) {
        // update the progress bar with the task status
        $('#progress-bar').css('width', data.progress + '%');
        if (data['state'] != 'PENDING' && data['state'] != 'PROGRESS') {
               if ('result' in data) {

                   if (data['result'] === 'Completed!'){
                   $('#progress-bar').text(data['result']);
                  //       iziToast.success({
                  //             title: 'Success',
                  //             message: 'Files Uploaded. Proceed to the campaign gallery or upload new files!',
                  //             position: 'topRight'
                  //           });
                       $('#progress-bar').css('width', 100 + '%');
                       $('#myModal').appendTo("body").modal('show');

                   }else if(data['result'] === 'Failed!'){
                   $('#progress-bar').css('width', 0 + '%');
                   $('#progress-bar').text(data['result']);
                    iziToast.error({
                          title: 'Error!',
                          message: 'An error occured while uploading the file!',
                          position: 'topRight'
                        });
                   }
                   else{
                     // do nothing
                   }       
               }
               else {
                   // something unexpected happened
                   $('#progress-bar').text(data['result']);
               }
           }
           else {
               // rerun in 2 seconds
               setTimeout(function() {
                   updateProgress(task_id);
               }, 2000);
           }
      });
    }
        

   $('#upload-form').on('submit', function(e) {
      e.preventDefault();
      var form = document.getElementById('upload-form');
      const formData = new FormData(form);
      const files = document.querySelector('input[name="file"]').files;
      const name = document.querySelector('input[name="media_name"]').value;
      var csrf_token = $('[name="csrfmiddlewaretoken"]').attr('value');
      formData.append('file', files);
      formData.append('name', name);
      if (files.length > 10){
        iziToast.error({
                          title: 'Error!',
                          message: 'Maximum limit of 10 uploads exceeded',
                          position: 'topRight'
                        });
      }else{
         // Make an AJAX request to the server to execute the task
    $.ajax({
        url: '/content/upload/media',
        headers: {
                'X-CSRFTOKEN': csrf_token
              },
        type: 'POST',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function(response) {
            // Update the page with the result of the task
            var task_id = response.task_id;
            updateProgress(task_id);
        },
        error: function() {
          iziToast.error({
                          title: 'Error!',
                          message: 'Unexpected error!',
                          position: 'topRight'
                        });
           }
    });
      }
   
    
});
</script>
{% endblock script %}