<?php
require_once('config.php');
require_once('inc/header.php');
?>
<main id="main" class="main">
  <div class="row">
    <div class="col-6 align-items-center">
      <div class="pagetitle mb-0 mt-1">
        <h1><?php echo $page_title ?></h1>
      </div>
    </div>
    <div class="col-6 text-end">
      <a href="media-library.php" class="btn btn-primary btn-sm"><i class="ri-arrow-left-line"></i> Media Library</a>
    </div>
  </div>
  <section class="section mt-3">
    <div class="row">
      <div class="col-12">
        <!-- Our markup, the important part here! -->
        <script type="text/javascript">
        $(function(){
          $('#drag-and-drop-zone').dmUploader({ //
            url: 'inc/upload.php',
            maxFileSize: 3000000,
            onDragEnter: function(){
              this.addClass('active');
            },
            onDragLeave: function(){
              this.removeClass('active');
            },
            onNewFile: function(id, file){
              ui_multi_add_file(id, file);
            },
            onBeforeUpload: function(id){
              ui_multi_update_file_status(id, 'uploading', 'Uploading...');
              ui_multi_update_file_progress(id, 0, '', true);
            },
            onUploadProgress: function(id, percent){
              ui_multi_update_file_progress(id, percent);
            },
            onUploadSuccess: function(id, data){
              ui_multi_update_file_status(id, 'success', 'Upload Complete');
              ui_multi_update_file_progress(id, 100, 'success', false);
            },
            onUploadError: function(id, xhr, status, message){
              ui_multi_update_file_status(id, 'danger', message);
              ui_multi_update_file_progress(id, 0, 'danger', false);
            },
            onFileSizeError: function(file){
              alert('File \'' + file.name + '\' cannot be added: size excess limit', 'danger');
            }
          });
        });
        </script>
        <div id="drag-and-drop-zone" class="dm-uploader p-5 text-center">
          <h3 class="text-muted">Drop files to upload</h3>
          <p class="m-0">or</p>
          <div class="btn btn-outline-primary mt-2">
              <span>Select Files</span>
              <input type="file" title='Click to add Files' />
          </div>
          <p class="mb-0 mt-2">Maximum upload file size: 3 MB.</p>
        </div>
      </div>
      <div class="col-12 mt-3" id="files"></div>
    </div>
  </section>
</main>

<!-- File item template -->
<script type="text/html" id="files-template">
  <div class="upload_list media-body mb-2">
    <p class="mb-2">
      <strong>%%filename%%</strong> -   <span class="text-muted">Waiting</span>
    </p>
    <div class="progress mb-1">
      <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
        role="progressbar"
        style="width: 0%"
        aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
      </div>
    </div>
  </div>
</script>

<?php require_once('inc/footer.php'); ?>
