{% extends "portal_base.html" %}

{% block title %}Upload Files - OTB Cloud{% endblock %}

{% block portal_content %}
<div class="portal-page-header">
  <div>
    <h1 class="portal-page-title">Upload Files</h1>
    <p class="portal-client-name">{{ user_email }}</p>
    <p class="portal-page-subtitle">
      Upload files into the <strong>{{ device.device_name }}</strong> device originals area.
    </p>
  </div>

  <div class="portal-toolbar" style="display:flex;flex-direction:column;align-items:flex-end;gap:10px;">
    <div style="display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;">
      <a class="portal-btn" href="{{ url_for('main.dashboard') }}">Back to Dashboard</a>
    </div>
  </div>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    <section style="margin-bottom:22px;">
      {% for category, message in messages %}
        <div class="service-card" style="padding:14px 18px; margin-bottom:10px;">
          <strong>{{ category|capitalize }}:</strong> {{ message }}
        </div>
      {% endfor %}
    </section>
  {% endif %}
{% endwith %}

<section class="services-grid">
  <article class="service-card status-beta" style="max-width:900px;">
    <div class="service-card-header">
      <div>
        <h2>Upload to {{ device.device_name }}</h2>
        <p>Selected files will be stored as immutable originals.</p>
      </div>
      <div>
        <span class="service-badge service-badge-beta">{{ device.device_type|capitalize }}</span>
      </div>
    </div>

    <div class="service-card-actions">
      <form method="post" action="{{ url_for('main.upload_files', device_id=device.id) }}" enctype="multipart/form-data">
        <div style="display:grid;gap:16px;max-width:780px;">

          <div>
            <label for="files" style="display:block;margin-bottom:6px;font-weight:700;">Choose Files</label>
            <input
              id="files"
              name="files"
              type="file"
              multiple
              style="width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);color:white;"
            >
          </div>

          <div>
            <label for="folder_files" style="display:block;margin-bottom:6px;font-weight:700;">Choose Folder</label>
            <input
              id="folder_files"
              name="files"
              type="file"
              webkitdirectory
              directory
              multiple
              style="width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);color:white;"
            >
          </div>

          <div style="display:flex;gap:10px;flex-wrap:wrap;">
            <button class="portal-btn primary" type="submit">Upload Selected Files</button>
            <a class="portal-btn" href="{{ url_for('main.dashboard') }}">Cancel</a>
          </div>

          <div style="opacity:0.8;font-size:0.95rem;">
            Files uploaded here are stored in the device originals folder and recorded in the database.
          </div>

          <div id="upload-info" style="margin-top:10px;font-size:0.95rem;opacity:0.85;"></div>
          <div id="upload-warning" style="margin-top:10px;color:#ffcc00;font-size:0.9rem;"></div>
        </div>
      </form>
    </div>
  </article>
</section>

<script>
const fileInput = document.getElementById('files');
const folderInput = document.getElementById('folder_files');
const info = document.getElementById('upload-info');
const warn = document.getElementById('upload-warning');

function updateUploadInfo(sourceLabel, inputEl) {
    const count = inputEl.files.length;

    if (!count) {
        info.innerText = "";
        warn.innerText = "";
        return;
    }

    info.innerText = `${sourceLabel}: selected ${count} file(s)`;

    if (count > 100) {
        warn.innerText = "Large upload detected. Use WiFi or wired connection if possible, and keep this browser tab open until the upload completes.";
    } else {
        warn.innerText = "";
    }
}

fileInput.addEventListener('change', function() {
    if (this.files.length) {
        folderInput.value = "";
    }
    updateUploadInfo("Files", this);
});

folderInput.addEventListener('change', function() {
    if (this.files.length) {
        fileInput.value = "";
    }
    updateUploadInfo("Folder", this);
});
</script>
{% endblock %}