{% extends "base.html" %}
{% block title %}رفع وثائق — سجل العقارات{% endblock %}

{% block content %}
<div class="page-header page-header-hero">
  <div>
    <span class="page-kicker">منصة الأرشفة والمراجعة</span>
    <h1>بطاقات معلومات الملكية العقارية</h1>
    <p class="subtitle">ارفع صور أو ملفات PDF، ثم راجع النتائج واستكمل البحث من واجهة واحدة واضحة وسريعة.</p>
  </div>
  <div class="header-actions">
    <a href="/search" class="btn btn-secondary">فتح البحث</a>
    <a href="/documents" class="btn btn-primary">عرض الوثائق</a>
  </div>
</div>

{% if stats and stats.total %}
<div class="stats-bar">
  <div class="stat"><span class="stat-num">{{ stats.total }}</span><span class="stat-label">إجمالي الوثائق</span></div>
  <div class="stat confirmed"><span class="stat-num">{{ stats.confirmed or 0 }}</span><span class="stat-label">مؤكّدة</span></div>
  <div class="stat pending"><span class="stat-num">{{ stats.pending_review or 0 }}</span><span class="stat-label">بانتظار المراجعة</span></div>
  {% if stats.errors %}<div class="stat error"><span class="stat-num">{{ stats.errors }}</span><span class="stat-label">أخطاء</span></div>{% endif %}
</div>
{% if stats.pending_review %}
<div class="alert-banner">
  <a href="/review/next">ابدأ مراجعة {{ stats.pending_review }} وثيقة →</a>
</div>
{% endif %}
{% endif %}

<div class="upload-card">
  <div class="card-heading">
    <div>
      <h2>رفع ملفات جديدة</h2>
      <p>اختر دفعة صور أو PDF، ثم حدّد محرك الاستخراج قبل بدء المعالجة.</p>
    </div>
  </div>
  <form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="files" id="fileInput" multiple accept=".jpg,.jpeg,.png,.webp,.pdf" class="file-input">
    <label for="fileInput" class="drop-zone" id="dropZone">
      <div class="drop-icon">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
      </div>
      <p class="drop-text">اسحب الملفات هنا أو انقر للاختيار</p>
      <p class="drop-hint">JPG، PNG، PDF — يمكن رفع عدة ملفات دفعة واحدة</p>
    </label>

    <div id="fileList" class="file-list hidden"></div>

    <!-- Provider selector -->
    <div id="providerSection" class="provider-section hidden">
      <label class="provider-label">محرك الاستخراج:</label>
      <div class="provider-options">
        {% for p in providers %}
        <label class="provider-option">
          <input type="radio" name="provider" value="{{ p.id }}"
                 {{ 'checked' if p.id == default_provider else '' }}>
          <span class="provider-card {{ 'provider-free' if p.id == 'easyocr' else 'provider-ai' }}">
            <span class="provider-name">{{ p.name }}</span>
            <span class="provider-model">{{ p.model }}</span>
          </span>
        </label>
        {% endfor %}
      </div>
    </div>

    <div id="uploadActions" class="upload-actions hidden">
      <button type="submit" class="btn btn-primary btn-large">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
        رفع ومعالجة
      </button>
      <button type="button" class="btn btn-secondary" onclick="clearFiles()">إلغاء</button>
    </div>
  </form>
</div>

<div class="quick-links">
  <a href="/search" class="quick-link-card">
    <span class="ql-icon">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
    </span>
    <span>
      <strong>البحث في قاعدة البيانات</strong>
      <small>ابحث بالأسماء أو بالعقارات مع نتائج منظّمة.</small>
    </span>
  </a>
  <a href="/documents" class="quick-link-card">
    <span class="ql-icon">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
    </span>
    <span>
      <strong>قائمة جميع الوثائق</strong>
      <small>تابع الحالات، افتح المراجعة، أو احذف المستندات غير المطلوبة.</small>
    </span>
  </a>
</div>
{% endblock %}

{% block scripts %}
<script>
const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('fileInput');
const fileList = document.getElementById('fileList');
const uploadActions = document.getElementById('uploadActions');

// label[for] natively triggers the file input on all platforms including iOS

dropZone.addEventListener('dragover', e => {
  e.preventDefault();
  dropZone.classList.add('drag-over');
});
dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
dropZone.addEventListener('drop', e => {
  e.preventDefault();
  dropZone.classList.remove('drag-over');
  fileInput.files = e.dataTransfer.files;
  showFiles(fileInput.files);
});

fileInput.addEventListener('change', () => showFiles(fileInput.files));

function showFiles(files) {
  if (!files.length) return;
  fileList.innerHTML = Array.from(files).map(f =>
    `<div class="file-item">${f.name} <span class="file-size">${(f.size/1024).toFixed(0)} KB</span></div>`
  ).join('');
  fileList.classList.remove('hidden');
  document.getElementById('providerSection').classList.remove('hidden');
  uploadActions.classList.remove('hidden');
}

function clearFiles() {
  fileInput.value = '';
  fileList.innerHTML = '';
  fileList.classList.add('hidden');
  document.getElementById('providerSection').classList.add('hidden');
  uploadActions.classList.add('hidden');
}

document.getElementById('uploadForm').addEventListener('submit', function() {
  document.querySelector('.btn-primary').textContent = 'جارٍ الرفع...';
  document.querySelector('.btn-primary').disabled = true;
});
</script>
{% endblock %}