{% extends 'base.html' %}
{% block page_title %}Documents{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <div>
    <h4 class="fw-bold mb-1">Document Management</h4>
    <p class="text-muted mb-0" style="font-size:0.85rem;">Store and manage organisation documents</p>
  </div>
  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploadModal">
    <i class="bi bi-upload me-2"></i>Upload Document
  </button>
</div>

<!-- FILTER -->
<div class="card mb-3">
  <div class="card-body py-2 px-3">
    <form method="GET" class="d-flex gap-2 align-items-center flex-wrap">
      <select name="category" class="form-select form-select-sm" style="width:auto;">
        <option value="">All Categories</option>
        {% for cat in ['general','policy','report','proposal','financial','hr','legal','other'] %}
        <option value="{{ cat }}" {% if filter_category==cat %}selected{% endif %}>{{ cat.title() }}</option>
        {% endfor %}
      </select>
      <button type="submit" class="btn btn-sm btn-outline-primary">Filter</button>
      {% if filter_category %}
      <a href="{{ url_for('documents_list') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
      {% endif %}
    </form>
  </div>
</div>

<div class="card">
  <div class="card-body p-0">
    <table class="table table-hover mb-0">
      <thead><tr>
        <th class="ps-3">Document</th>
        <th>Category</th>
        <th>Project</th>
        <th>Uploaded By</th>
        <th>Size</th>
        <th>Date</th>
        <th>Actions</th>
      </tr></thead>
      <tbody>
      {% for doc in documents %}
      <tr>
        <td class="ps-3">
          <div class="d-flex align-items-center gap-2">
            <div style="font-size:1.4rem;">
              {% if doc.original_filename.endswith('.pdf') %}📄
              {% elif doc.original_filename.endswith(('.doc','.docx')) %}📝
              {% elif doc.original_filename.endswith(('.xls','.xlsx')) %}📊
              {% elif doc.original_filename.endswith(('.jpg','.jpeg','.png')) %}🖼️
              {% else %}📁{% endif %}
            </div>
            <div>
              <div class="fw-bold" style="font-size:0.87rem;">{{ doc.name }}</div>
              {% if doc.description %}
              <div style="font-size:0.72rem;color:#999;">{{ doc.description[:50] }}{% if doc.description|length > 50 %}…{% endif %}</div>
              {% endif %}
            </div>
          </div>
        </td>
        <td>
          <span class="badge" style="font-size:0.7rem;background:#e8f5ee;color:#1b6b3a;padding:4px 10px;border-radius:20px;">
            {{ doc.category.title() }}
          </span>
        </td>
        <td style="font-size:0.82rem;color:#666;">
          {% if doc.project_id %}
            {% for p in projects %}{% if p.id == doc.project_id %}{{ p.name[:25] }}{% endif %}{% endfor %}
          {% else %}—{% endif %}
        </td>
        <td style="font-size:0.82rem;">{{ doc.uploaded_by or '—' }}</td>
        <td style="font-size:0.82rem;color:#888;">{{ doc.file_size_display }}</td>
        <td style="font-size:0.82rem;color:#888;">{{ doc.created_at.strftime('%d %b %Y') }}</td>
        <td>
          <a href="{{ url_for('documents_download', doc_id=doc.id) }}"
             class="btn btn-sm btn-outline-primary me-1" style="font-size:0.75rem;">
            <i class="bi bi-download"></i>
          </a>
          {% if current_user.is_admin() %}
          <form method="POST" action="{{ url_for('documents_delete', doc_id=doc.id) }}"
                class="d-inline" onsubmit="return confirm('Delete this document?')">
            <button class="btn btn-sm btn-outline-danger" style="font-size:0.75rem;">
              <i class="bi bi-trash"></i>
            </button>
          </form>
          {% endif %}
        </td>
      </tr>
      {% else %}
      <tr>
        <td colspan="7" class="text-center py-5 text-muted">
          <i class="bi bi-folder" style="font-size:3rem;opacity:0.2;display:block;"></i>
          <p class="mt-3 mb-1 fw-bold">No documents yet</p>
          <p style="font-size:0.85rem;">Upload your first document using the button above</p>
        </td>
      </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- UPLOAD MODAL -->
<div class="modal fade" id="uploadModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold" style="font-size:1rem;">Upload Document</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST" action="{{ url_for('documents_upload') }}" enctype="multipart/form-data">
        <div class="modal-body">
          <div class="row g-3">
            <div class="col-12">
              <label class="form-label">File *</label>
              <input type="file" name="file" class="form-control" required>
            </div>
            <div class="col-12">
              <label class="form-label">Document Name</label>
              <input type="text" name="name" class="form-control"
                     placeholder="Leave blank to use filename">
            </div>
            <div class="col-12">
              <label class="form-label">Description</label>
              <textarea name="description" class="form-control" rows="2"></textarea>
            </div>
            <div class="col-md-6">
              <label class="form-label">Category</label>
              <select name="category" class="form-select">
                {% for cat in ['general','policy','report','proposal','financial','hr','legal','other'] %}
                <option value="{{ cat }}">{{ cat.title() }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">Related Project</label>
              <select name="project_id" class="form-select">
                <option value="">None</option>
                {% for p in projects %}
                <option value="{{ p.id }}">{{ p.name[:30] }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary"><i class="bi bi-upload me-1"></i>Upload</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}