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

{% block title %}{{ page_title }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/letters/request_form.css' %}">
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">{{ page_title }}</h1>
                    <p class="text-muted">Upload dokumen yang sudah dibuat untuk request ini</p>
                </div>
                <div>
                    <a href="{% url 'admin_panel:letters:admin_request_letter_detail' request_letter.pk %}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left"></i> Kembali ke Detail
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Request Information -->
            <div class="card upload-card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-upload"></i> Informasi Request</h5>
                </div>
                <div class="card-body">
                    <div class="request-info">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>Nomor Request</h6>
                                <p class="text-muted">{{ request_letter.request_number }}</p>
                                
                                <h6>Judul Request</h6>
                                <p>{{ request_letter.title }}</p>
                                
                                <h6>Kategori</h6>
                                <p class="text-muted">{{ request_letter.category.name|default:"-" }}</p>
                            </div>
                            <div class="col-md-6">
                                <h6>Penduduk</h6>
                                <p>{{ request_letter.resident.name|default:request_letter.resident_name_manual }}</p>
                                
                                <h6>Status</h6>
                                <span class="badge bg-success">{{ request_letter.get_status_display }}</span>
                                
                                <h6>Tanggal Disetujui</h6>
                                <p class="text-muted">{{ request_letter.approved_date|date:"d M Y H:i" }}</p>
                            </div>
                        </div>
                        
                        <h6 class="mt-3">Deskripsi Request</h6>
                        <div class="bg-white p-3 rounded border">
                            {{ request_letter.description|linebreaks }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Upload Form -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-file-upload"></i> Upload Dokumen</h5>
                </div>
                <div class="card-body">
                    <form method="POST" enctype="multipart/form-data" id="uploadForm">
                        {% csrf_token %}
                        
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i>
                            <strong>Informasi:</strong> Upload dokumen yang sudah dibuat sesuai dengan request ini. 
                            Setelah dokumen diupload, status request akan berubah menjadi "Selesai".
                        </div>
                        
                        <div class="file-upload-area" id="uploadArea">
                            <i class="fas fa-cloud-upload-alt fa-4x text-info mb-3"></i>
                            <h5>Drag & Drop File atau Klik untuk Memilih</h5>
                            <p class="text-muted mb-3">Format yang didukung: PDF, Word (.docx, .doc)</p>
                            <p class="text-muted small">Ukuran maksimal: 10MB</p>
                            <input type="file" name="generated_document" id="generated_document" 
                                   class="form-control" accept=".pdf,.doc,.docx" required>
                        </div>
                        
                        <!-- File Preview -->
                        <div id="filePreview" class="mt-3" style="display: none;">
                            <h6>Preview File:</h6>
                            <div class="d-flex align-items-center">
                                <img id="previewImage" class="upload-preview me-3" style="display: none;">
                                <div>
                                    <p class="mb-1"><strong id="fileName"></strong></p>
                                    <p class="text-muted small mb-0" id="fileSize"></p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-4">
                            <div class="mb-3">
                                <label for="admin_notes" class="form-label">Catatan Admin (Opsional)</label>
                                <textarea name="admin_notes" id="admin_notes" class="form-control" rows="3" 
                                          placeholder="Tambahkan catatan untuk dokumen yang diupload..."></textarea>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'admin_panel:letters:admin_request_letter_detail' request_letter.pk %}" 
                               class="btn btn-outline-secondary">
                                <i class="fas fa-times"></i> Batal
                            </a>
                            <button type="submit" class="btn btn-success btn-lg">
                                <i class="fas fa-upload"></i> Upload & Selesaikan Request
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Current Status -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Status Saat Ini</h5>
                </div>
                <div class="card-body text-center">
                    <span class="badge bg-success status-badge mb-3">
                        {{ request_letter.get_status_display }}
                    </span>
                    <p class="text-muted small">
                        Request sudah disetujui, siap untuk upload dokumen
                    </p>
                </div>
            </div>

            <!-- Upload Guidelines -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Panduan Upload</h5>
                </div>
                <div class="card-body">
                    <div class="small">
                        <h6>Format yang Didukung:</h6>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-file-pdf text-danger"></i> PDF (.pdf)</li>
                            <li><i class="fas fa-file-word text-primary"></i> Word (.docx, .doc)</li>
                        </ul>
                        
                        <h6 class="mt-3">Persyaratan:</h6>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-success"></i> Ukuran maksimal 10MB</li>
                            <li><i class="fas fa-check text-success"></i> File tidak rusak/korup</li>
                            <li><i class="fas fa-check text-success"></i> Dokumen sesuai request</li>
                        </ul>
                        
                        <h6 class="mt-3">Tips:</h6>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-lightbulb text-warning"></i> Pastikan dokumen sudah final</li>
                            <li><i class="fas fa-lightbulb text-warning"></i> Periksa kualitas dokumen</li>
                            <li><i class="fas fa-lightbulb text-warning"></i> Tambahkan catatan jika perlu</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Timeline -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Timeline</h5>
                </div>
                <div class="card-body">
                    <div class="timeline">
                        <div class="timeline-item">
                            <h6>Request Dibuat</h6>
                            <p class="text-muted small">{{ request_letter.created_date|date:"d M Y H:i" }}</p>
                        </div>
                        
                        <div class="timeline-item">
                            <h6>Request Disetujui</h6>
                            <p class="text-muted small">{{ request_letter.approved_date|date:"d M Y H:i" }}</p>
                        </div>
                        
                        <div class="timeline-item">
                            <h6 class="text-info">Menunggu Upload</h6>
                            <p class="text-muted small">Saat ini</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const uploadArea = document.getElementById('uploadArea');
    const fileInput = document.getElementById('generated_document');
    const filePreview = document.getElementById('filePreview');
    const previewImage = document.getElementById('previewImage');
    const fileName = document.getElementById('fileName');
    const fileSize = document.getElementById('fileSize');
    
    // Click to upload
    uploadArea.addEventListener('click', () => fileInput.click());
    
    // Drag and drop
    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.classList.add('dragover');
    });
    
    uploadArea.addEventListener('dragleave', () => {
        uploadArea.classList.remove('dragover');
    });
    
    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('dragover');
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            handleFileSelect(files[0]);
        }
    });
    
    // File input change
    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length > 0) {
            handleFileSelect(e.target.files[0]);
        }
    });
    
    function handleFileSelect(file) {
        // Validate file type
        const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
        if (!allowedTypes.includes(file.type)) {
            alert('Format file tidak didukung. Gunakan PDF atau Word (.docx, .doc)');
            fileInput.value = '';
            return;
        }
        
        // Validate file size (10MB)
        if (file.size > 10 * 1024 * 1024) {
            alert('Ukuran file terlalu besar. Maksimal 10MB');
            fileInput.value = '';
            return;
        }
        
        // Show file info
        fileName.textContent = file.name;
        fileSize.textContent = (file.size / 1024 / 1024).toFixed(2) + ' MB';
        filePreview.style.display = 'block';
        
        // Show preview for images (if it's a PDF, show PDF icon)
        if (file.type === 'application/pdf') {
            previewImage.src = '/static/images/pdf-icon.png';
            previewImage.style.display = 'block';
        } else if (file.type.includes('word')) {
            previewImage.src = '/static/images/word-icon.png';
            previewImage.style.display = 'block';
        }
    }
    
    // Form submission
    const form = document.getElementById('uploadForm');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        if (!fileInput.files.length) {
            alert('Pilih file untuk diupload');
            return;
        }
        
        if (confirm('Apakah Anda yakin ingin mengupload dokumen ini? Request akan diselesaikan setelah upload.')) {
            // Show loading state
            const submitBtn = form.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Mengupload...';
            submitBtn.disabled = true;
            
            // Submit form
            form.submit();
        }
    });
    
    // Auto-fill admin notes
    const adminNotes = document.getElementById('admin_notes');
    adminNotes.addEventListener('focus', function() {
        if (!this.value) {
            this.value = 'Dokumen telah selesai dibuat dan diupload sesuai dengan request.';
        }
    });
});
</script>
{% endblock %}