{% extends 'esign/base.html' %}
{% load static %}
{% block content %}

<div class="container my-5">
  <div class="row justify-content-center">
    <div class="col-12 col-lg-10">

      <!-- Card -->
      <div class="card shadow-lg border-0 rounded-4">
        <div class="card-header bg-dark text-white text-center py-3">
          <h4 class="mb-0"><i class="bi bi-upload"></i> Upload Document</h4>
        </div>
        <div class="card-body p-4">

          <!-- Flex Row: Form + Preview -->
          <div class="row g-4">
            <!-- Form Column -->
            <div class="col-12 col-md-6">
              <form method="post" enctype="multipart/form-data">
                {% csrf_token %}

                <!-- Title Field -->
                <div class="mb-3">
                  <label for="{{ form.title.id_for_label }}" class="form-label fw-semibold">Document Title</label>
                  {{ form.title }}
                </div>


                                <div class="mb-3" hidden>
  <label for="{{ form.category.id_for_label }}" class="form-label fw-semibold">Template Category</label>
  {{ form.category }}
</div>

                <!-- File Field -->
                <div class="mb-3">
                  <label for="{{ form.file.id_for_label }}" class="form-label fw-semibold">Select File</label>
                  {{ form.file }}
                </div>

                <!-- Submit Button -->
                <div class="d-grid mt-4">
                  <button type="submit" class="btn btn-bw btn-lg py-2">
                    <i class="bi bi-upload me-1"></i> Upload Document
                  </button>
                </div>
              </form>
            </div>

            <!-- Preview Column -->
            <div class="col-12 col-md-6">
              <label class="form-label fw-semibold">Preview</label>
              <div id="file-preview" class="border rounded-3 p-2 text-center text-muted" style="min-height:300px; background:#f9f9f9;">
                No file selected
              </div>
            </div>
          </div> <!-- /row -->

        </div> <!-- /card-body -->
      </div> <!-- /card -->

    </div>
  </div>
</div>

<!-- JS for Live Preview -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  const fileInput = document.querySelector('input[type="file"]');
  const preview = document.getElementById('file-preview');

  fileInput.addEventListener('change', function() {
    const file = this.files[0];
    preview.innerHTML = "";

    if (!file) {
      preview.textContent = "No file selected";
      return;
    }

    const fileType = file.type;

    if (fileType.startsWith('image/')) {
      const img = document.createElement('img');
      img.src = URL.createObjectURL(file);
      img.classList.add('img-fluid', 'rounded');
      img.style.maxHeight = '400px';
      preview.appendChild(img);

    } else if (fileType === 'application/pdf') {
      const pdfFrame = document.createElement('iframe');
      pdfFrame.src = URL.createObjectURL(file);
      pdfFrame.style.width = '100%';
      pdfFrame.style.height = '400px';
      pdfFrame.classList.add('border', 'rounded');
      preview.appendChild(pdfFrame);

    } else {
      preview.textContent = "Preview not available for this file type.";
    }
  });
});
</script>

{% endblock %}