#set($cat = $context.findValue("catid"))
#if(!$cat)
  #set($cat = $context.findValue("categoryid"))
#end

<div class="card shadow mb-4">
  <h5 class="card-header">[[Upload New Media]]</h5>
  <div class="card-body">
    <form id="uploadForm"
          action="$home$content.searchhome/upload/assetsfinish.html"
          method="POST"
          enctype="multipart/form-data">

      ## --- Metadata editor ---
      $context.putPageValue("searcher", $mediaarchive.getAssetSearcher())
      $context.putPageValue("view", "asset/assetupload")
      $pages.include("$apphome/components/xml/detaileditor.html", $context)

      <!-- File & Folder Picker -->
      <div id="filearea" class="mb-4 text-center border border-2 border-dashed rounded p-4 bg-light position-relative">
        <div class="btn-group" role="group">
          <label class="btn btn-outline-primary btn-lg position-relative overflow-hidden">
            <i class="bi bi-file-earmark-arrow-up me-2"></i> Select Files
            <input id="fileInputFiles"
                   type="file"
                   name="files[]"
                   multiple
                   class="position-absolute top-0 start-0 w-100 h-100 opacity-0"
                   style="cursor:pointer" />
          </label>
          <label class="btn btn-outline-secondary btn-lg position-relative overflow-hidden">
            <i class="bi bi-folder2-open me-2"></i> Select Folder
            <input id="fileInputFolder"
                   type="file"
                   name="files[]"
                   webkitdirectory
                   directory
                   multiple
                   class="position-absolute top-0 start-0 w-100 h-100 opacity-0"
                   style="cursor:pointer" />
          </label>
        </div>
        <div class="form-text mt-2 text-muted">
          You can upload individual files or an entire folder (subfolders preserved).
        </div>
      </div>

      <!-- Selected file list -->
      <div id="fileList" class="list-group mb-3"></div>

      <!-- Hidden catid -->
      #if($cat)
        <input type="hidden" name="catid" value="$cat" />
      #end

      <!-- Submit -->
      <div class="d-grid mb-3">
        <button type="submit" class="btn btn-primary">[[Start Upload]]</button>
      </div>

      <!-- Result -->
      <div id="result" class="mb-3"></div>
      <div id="uploadAlerts" class="mt-3">
  <div id="alertSuccess" class="alert alert-success d-none">
    [[All uploads completed successfully.]]
  </div>
  <div id="alertWarning" class="alert alert-warning d-none">
    [[Some uploads failed. Check above for details.]]
  </div>
</div>
      
    </form>
  </div>
</div>
<div id="fileTemplate" class="d-none">
  <div class="list-group-item d-flex flex-column align-items-start">
    <div class="fw-bold small text-truncate file-name"></div>
    <small class="text-muted mb-2 file-size"></small>
    <div class="progress w-100 mb-2">
      <div class="progress-bar progress-bar-striped progress-bar-animated file-progress"
           role="progressbar" style="width:0%">0%</div>
    </div>
    <button type="button" class="btn btn-sm btn-outline-danger align-self-end remove-file">
      <i class="bi bi-x-circle"></i> Remove
    </button>
  </div>
</div>

<script>
jQuery(function($){
  const formEl = $('#uploadForm');
  const inputFiles = $('#fileInputFiles');
  const inputFolder = $('#fileInputFolder');
  const listEl = $('#fileList');
  const uploadUrl = formEl.attr('action');
  const template = $('#fileTemplate .list-group-item');

  let fileList = [];
  let fileMap  = new Map();
  let uploading = false;

  function formatBytes(bytes) {
    if (!bytes) return '0 B';
    const k = 1024, sizes = ['B','KB','MB','GB'];
    const i = Math.floor(Math.log(bytes)/Math.log(k));
    return (bytes/Math.pow(k,i)).toFixed(1)+' '+sizes[i];
  }

  function addFiles(files) {
    for (const f of files) {
      if (fileMap.has(f.name)) continue; // avoid duplicate by filename
      const node = template.clone(true);
      node.find('.file-name').text(f.webkitRelativePath || f.name);
      node.find('.file-size').text(formatBytes(f.size));
      listEl.append(node);
      fileList.push(f);
      fileMap.set(f.name, node);
    }
  }

  inputFiles.on('change', function(){ addFiles(this.files); });
  inputFolder.on('change', function(){ addFiles(this.files); });

  listEl.on('click', '.remove-file', function(){
    if (uploading) return; // lock out during active uploads
    const item = $(this).closest('.list-group-item');
    const name = item.find('.file-name').text();
    fileMap.delete(name);
    fileList = fileList.filter(f => f.name !== name);
    item.fadeOut(200, ()=> item.remove());
  });

  async function uploadSequentially() {
    uploading = true;
    for (const file of [...fileList]) {
      const item = fileMap.get(file.name);
      const progressBar = item.find('.file-progress');
      const formData = new FormData(formEl[0]);
      formData.delete('files[]');
      formData.append('files[]', file, file.webkitRelativePath || file.name);

      await new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', uploadUrl);

        xhr.upload.onprogress = e => {
          if (e.lengthComputable) {
            const pct = Math.round((e.loaded / e.total) * 100);
            progressBar.css('width', pct + '%').text(pct + '%');
          }
        };

        xhr.onload = () => {
          if (xhr.status >= 200 && xhr.status < 300) {
            progressBar.removeClass('progress-bar-animated')
                       .addClass('bg-success').text('Done');
            item.delay(300).fadeOut(400, ()=> item.remove());
            fileMap.delete(file.name);
            resolve();
          } else {
            progressBar.removeClass('progress-bar-animated')
                       .addClass('bg-danger').text('Error');
            reject();
          }
        };

        xhr.onerror = () => {
          progressBar.removeClass('progress-bar-animated')
                     .addClass('bg-danger').text('Error');
          reject();
        };

        xhr.send(formData);
      });
    }
    fileList = [];
    uploading = false;
  }

  formEl.on('submit', function(e){
    e.preventDefault();
    if (uploading) return;
    if (!fileList.length) {
      alert('[[Please select one or more files or folders to upload]]');
      return;
    }
    $('#alertSuccess, #alertWarning').addClass('d-none');

    uploadSequentially()
      .then(() => $('#alertSuccess').removeClass('d-none'))
      .catch(() => $('#alertWarning').removeClass('d-none'));
  });
});
</script>