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


{% block extra_css %}<link rel="stylesheet" href="{% static 'css/admin/letters/upload_surat.css' %}">{% endblock %}
{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const residentSelect = document.getElementById('id_resident');
    if (residentSelect) {
        residentSelect.insertAdjacentHTML('beforebegin', '<input type="text" id="resident_search" class="form-control mb-2" placeholder="Cari penduduk (nama/NIK)..." />');
        const searchInput = document.getElementById('resident_search');
        let typingTimer;
        searchInput.addEventListener('input', function() {
            clearTimeout(typingTimer);
            typingTimer = setTimeout(async () => {
                const q = searchInput.value.trim();
                if (q.length < 2) return;
                try {
                    const resp = await fetch(`/api/references/api/penduduk/search/?q=${encodeURIComponent(q)}&no_pagination=true`);
                    if (!resp.ok) return;
                    const data = await resp.json();
                    if (data && (data.data || data.results || data.residents)) {
                        const items = data.data || data.results || data.residents;
                        residentSelect.innerHTML = '<option value="">---</option>';
                        for (const r of items) {
                            const id = r.id;
                            const name = r.name || r.nama || '';
                            const nik = r.nik || '';
                            const label = nik ? `${name} - ${nik}` : name;
                            const opt = document.createElement('option');
                            opt.value = id;
                            opt.textContent = label;
                            residentSelect.appendChild(opt);
                        }
                    }
                } catch (e) {
                    console.error(e);
                }
            }, 300);
        });
    }
});
</script>
{% endblock %}

{% block content %}
<div class="form-container">
    <div class="form-card">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>{{ page_title }}</h2>
            <a href="{% url 'admin_panel:letters:admin_surat_dashboard' %}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> Kembali ke Dashboard
            </a>
        </div>
        
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            
            <div class="form-group">
                <label for="{{ form.title.id_for_label }}">{{ form.title.label }}</label>
                {{ form.title }}
                {% if form.title.errors %}
                    <div class="error-message">{{ form.title.errors.0 }}</div>
                {% endif %}
            </div>
            
            <div class="form-group">
                <label for="{{ form.letter_type.id_for_label }}">{{ form.letter_type.label }}</label>
                {{ form.letter_type }}
                {% if form.letter_type.errors %}
                    <div class="error-message">{{ form.letter_type.errors.0 }}</div>
                {% endif %}
            </div>
            
            <div class="form-group">
                <label for="{{ form.category_fk.id_for_label }}">{{ form.category_fk.label }}</label>
                {{ form.category_fk }}
                {% if form.category_fk.errors %}
                    <div class="error-message">{{ form.category_fk.errors.0 }}</div>
                {% endif %}
            </div>

            <div class="form-group">
                <label for="{{ form.description.id_for_label }}">{{ form.description.label }}</label>
                {{ form.description }}
                {% if form.description.errors %}
                    <div class="error-message">{{ form.description.errors.0 }}</div>
                {% endif %}
            </div>

            <div class="form-group">
                <label for="{{ form.resident.id_for_label }}">{{ form.resident.label }}</label>
                {{ form.resident }}
                <small class="form-text text-muted">Cari penduduk atau pilih manual jika tidak ada.</small>
                {% if form.resident.errors %}
                    <div class="error-message">{{ form.resident.errors.0 }}</div>
                {% endif %}
            </div>

            <div class="form-group">
                <label for="{{ form.resident_name_manual.id_for_label }}">{{ form.resident_name_manual.label }}</label>
                {{ form.resident_name_manual }}
                {% if form.resident_name_manual.errors %}
                    <div class="error-message">{{ form.resident_name_manual.errors.0 }}</div>
                {% endif %}
            </div>
            
            <div class="form-group">
                <label>{{ form.document_file.label }}</label>
                <div class="file-upload-area">
                    <div class="file-upload-icon">
                        <i class="fas fa-cloud-upload-alt"></i>
                    </div>
                    <div class="file-upload-text">Upload File Surat</div>
                    <div class="file-upload-hint">Format: PDF, DOCX, DOC (Maksimal 10MB)</div>
                    {{ form.document_file }}
                </div>
                {% if form.document_file.errors %}
                    <div class="error-message">{{ form.document_file.errors.0 }}</div>
                {% endif %}
                <div class="help-text">{{ form.document_file.help_text }}</div>
            </div>
            
            <div class="form-actions">
                <a href="{% url 'admin_panel:letters:admin_surat_dashboard' %}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Kembali
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Upload Surat
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}