{% extends 'admin_panel/base.html' %}
{% load static %}

{% block page_description %}Daftar semua surat keluar yang telah diarsipkan.{% endblock %}
{% block extra_css %}<link rel="stylesheet" href="{% static 'css/admin/letters/surat_keluar.css' %}">{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="card shadow-sm">
        <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <a href="{% url 'admin_panel:letters:admin_surat_dashboard' %}" class="btn btn-outline-light btn-sm me-3">
                    <i class="fas fa-arrow-left"></i> Kembali ke Dashboard
                </a>
                <h5 class="mb-0">{{ page_title }}</h5>
            </div>
            <a href="{% url 'admin_panel:letters:admin_upload_surat' %}?type=keluar" class="btn btn-light btn-sm">
                <i class="fas fa-plus me-2"></i>Upload Surat Keluar Baru
            </a>
        </div>
        <div class="card-body">
            <form method="get" class="row g-2 mb-3">
                <div class="col-md-4">
                    <input type="text" name="q" value="{{ request.GET.q }}" class="form-control" placeholder="Cari judul/deskripsi/penduduk..." />
                </div>
                <div class="col-md-3">
                    <select name="category_fk" class="form-select">
                        <option value="">Semua Kategori (DB)</option>
                        {% for c in categories_db %}
                        <option value="{{ c.id }}" {% if request.GET.category_fk == c.id|stringformat:'s' %}selected{% endif %}>{{ c.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary w-100">Filter</button>
                </div>
                <div class="col-md-3">
                    <a href="?" class="btn btn-outline-secondary w-100">Reset</a>
                </div>
            </form>
            <div class="table-responsive" id="letters-table-wrapper" data-type="keluar" data-api-url="{% url 'admin_panel:letters:admin_letters_list_api' %}">
                <table class="table table-hover table-striped" id="letters-table">
                    <thead>
                        <tr>
                            <th>Nomor Surat</th>
                            <th>Judul</th>
                            <th>Deskripsi</th>
                            <th>Penduduk Terkait</th>
                            <th>Tanggal Dibuat</th>
                            <th>Dibuat Oleh</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="letters-tbody">
                        <tr><td colspan="7" class="text-center">Memuat...</td></tr>
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center" id="letters-pagination"></ul>
            </nav>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function(){
  const wrapper = document.getElementById('letters-table-wrapper');
  if(!wrapper) return;
  const api = wrapper.getAttribute('data-api-url');
  const type = wrapper.getAttribute('data-type');
  const tbody = document.getElementById('letters-tbody');
  const pagination = document.getElementById('letters-pagination');

  async function load(page=1){
    const params = new URLSearchParams();
    params.set('type', type);
    params.set('page', page);
    params.set('per_page', 20);
    const q = document.querySelector('input[name="q"]');
    const cat = document.querySelector('select[name="category_fk"]');
    if(q && q.value) params.set('q', q.value);
    if(cat && cat.value) params.set('category_fk', cat.value);
    tbody.innerHTML = '<tr><td colspan="7" class="text-center">Memuat...</td></tr>';
    const resp = await fetch(`${api}?${params.toString()}`);
    const data = await resp.json();
    renderTable(data.items);
    renderPagination(data.pagination);
  }

  function renderTable(items){
    if(!items.length){
      tbody.innerHTML = '<tr><td colspan="7" class="text-center">Tidak ada data.</td></tr>';
      return;
    }
    const basePath = window.location.pathname.replace('keluar/','');
    tbody.innerHTML = items.map(it => `
      <tr>
        <td>${it.letter_number}</td>
        <td>${it.title}</td>
        <td>${it.description}</td>
        <td>${it.resident || '-'}</td>
        <td>${it.created_date}</td>
        <td>${it.created_by}</td>
        <td>
          <a href="${basePath}${it.id}/" class="btn btn-info btn-sm" title="Detail"><i class="fas fa-eye"></i></a>
          <a href="${basePath}${it.id}/edit/" class="btn btn-warning btn-sm" title="Edit"><i class="fas fa-edit"></i></a>
          <a href="${basePath}${it.id}/preview/" class="btn btn-secondary btn-sm" title="Preview"><i class="fas fa-eye"></i></a>
          <a href="${basePath}${it.id}/download/" class="btn btn-success btn-sm" title="Download"><i class="fas fa-download"></i></a>
        </td>
      </tr>
    `).join('');
  }

  function renderPagination(p){
    let html = '';
    if(p.has_previous){
      html += `<li class=\"page-item\"><a class=\"page-link\" href=\"#\" data-page=\"1\">First</a></li>`;
      html += `<li class=\"page-item\"><a class=\"page-link\" href=\"#\" data-page=\"${p.current-1}\">Previous</a></li>`;
    }
    html += `<li class=\"page-item active\"><span class=\"page-link\">${p.current} of ${p.total_pages}</span></li>`;
    if(p.has_next){
      html += `<li class=\"page-item\"><a class=\"page-link\" href=\"#\" data-page=\"${p.current+1}\">Next</a></li>`;
      html += `<li class=\"page-item\"><a class=\"page-link\" href=\"#\" data-page=\"${p.total_pages}\">Last</a></li>`;
    }
    pagination.innerHTML = html;
    pagination.querySelectorAll('a[data-page]').forEach(a => {
      a.addEventListener('click', (e)=>{ e.preventDefault(); load(parseInt(a.getAttribute('data-page'))); });
    });
  }

  const filterForm = wrapper.closest('.card-body').querySelector('form');
  if(filterForm){
    filterForm.addEventListener('submit', function(e){ e.preventDefault(); load(1); });
  }

  load(1);
})();
</script>
{% endblock %}