{% extends "base.html" %}
{% block title %}Subir facturas en lote{% endblock %}
{% block page_title %}Subir facturas en lote{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('facturas.masivo_index') }}" class="btn btn-outline-secondary btn-sm">
  <i class="bi bi-archive me-1"></i>Ver archivo
</a>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-7">
    <div class="card">
      <div class="card-header py-3"><i class="bi bi-cloud-upload me-2"></i>Selecciona las facturas a subir</div>
      <div class="card-body p-4">
        <form method="post" enctype="multipart/form-data" id="formSubir">
          <div id="dropZone" class="rounded-3 p-5 text-center mb-3"
               style="border: 2px dashed #dee2e6; cursor:pointer; transition: border-color .2s, background .2s;">
            <i class="bi bi-file-earmark-arrow-up text-muted" style="font-size:3rem"></i>
            <h5 class="mt-3 mb-1 text-muted">Arrastra los archivos aquí</h5>
            <p class="text-muted small mb-3">o haz clic para seleccionarlos</p>
            <input type="file" name="facturas" id="inputArchivos" multiple
                   accept=".pdf,.png,.jpg,.jpeg" class="d-none">
            <button type="button" class="btn btn-outline-primary"
                    onclick="document.getElementById('inputArchivos').click()">
              <i class="bi bi-folder2-open me-1"></i>Seleccionar archivos
            </button>
          </div>

          <div id="listaArchivos" class="mb-3"></div>

          <div class="d-flex justify-content-between align-items-center">
            <p class="text-muted small mb-0">
              <i class="bi bi-info-circle me-1"></i>Formatos aceptados: PDF, PNG, JPG
            </p>
            <button type="submit" class="btn btn-primary" id="btnSubir" disabled>
              <i class="bi bi-arrow-right-circle me-1"></i>Subir y asignar proveedores
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<div id="uploadOverlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;flex-direction:column;align-items:center;justify-content:center;gap:16px">
  <div class="spinner-border text-light" style="width:3.5rem;height:3.5rem"></div>
  <div class="text-white fs-5 fw-semibold">Procesando <span id="overlayCount">0</span> archivo(s)...</div>
  <div class="text-white-50 small">Por favor espera, esto puede tardar unos segundos</div>
</div>
<script>
document.getElementById('formSubir').addEventListener('submit', function() {
  const count = document.getElementById('inputArchivos').files.length;
  document.getElementById('overlayCount').textContent = count;
  const ov = document.getElementById('uploadOverlay');
  ov.style.display = 'flex';
  document.getElementById('btnSubir').disabled = true;
});

const dropZone = document.getElementById('dropZone');
const input    = document.getElementById('inputArchivos');
const lista    = document.getElementById('listaArchivos');
const btn      = document.getElementById('btnSubir');

function mostrarArchivos(files) {
  lista.innerHTML = '';
  if (!files.length) { btn.disabled = true; return; }
  const ul = document.createElement('ul');
  ul.className = 'list-group';
  [...files].forEach(f => {
    const isPdf = f.name.toLowerCase().endsWith('.pdf');
    const icon  = isPdf ? 'bi-file-earmark-pdf text-danger' : 'bi-file-earmark-image text-primary';
    const li = document.createElement('li');
    li.className = 'list-group-item d-flex align-items-center gap-2 py-2';
    li.innerHTML = `<i class="bi ${icon} fs-5"></i>
      <span class="small flex-grow-1">${f.name}</span>
      <span class="text-muted small">${(f.size/1024).toFixed(0)} KB</span>`;
    ul.appendChild(li);
  });
  lista.appendChild(ul);
  btn.disabled = false;
}

input.addEventListener('change', () => mostrarArchivos(input.files));

dropZone.addEventListener('dragover', e => {
  e.preventDefault();
  dropZone.style.borderColor = '#4f86f7';
  dropZone.style.background  = '#f0f5ff';
});
dropZone.addEventListener('dragleave', () => {
  dropZone.style.borderColor = '#dee2e6';
  dropZone.style.background  = '';
});
dropZone.addEventListener('drop', e => {
  e.preventDefault();
  dropZone.style.borderColor = '#dee2e6';
  dropZone.style.background  = '';
  const dt = new DataTransfer();
  [...e.dataTransfer.files].forEach(f => dt.items.add(f));
  input.files = dt.files;
  mostrarArchivos(input.files);
});
dropZone.addEventListener('click', e => {
  if (e.target === dropZone || e.target.tagName === 'I' || e.target.tagName === 'H5' || e.target.tagName === 'P')
    input.click();
});
</script>
{% endblock %}