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

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

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/letters/request_detail.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">Tolak request surat dari penduduk</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 reject-card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-times-circle text-danger"></i> Konfirmasi Penolakan</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>Tanggal Request</h6>
                                <p class="text-muted">{{ request_letter.created_date|date:"d M Y H:i" }}</p>
                                
                                <h6>Prioritas</h6>
                                <span class="badge bg-{{ request_letter.get_priority_color }} status-badge">
                                    {{ request_letter.get_priority_display }}
                                </span>
                            </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>

            <!-- Rejection Form -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-times"></i> Form Penolakan</h5>
                </div>
                <div class="card-body">
                    <form method="POST" id="rejectForm">
                        {% csrf_token %}
                        
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle"></i>
                            <strong>Peringatan:</strong> Anda akan menolak request surat ini. 
                            Pastikan alasan penolakan jelas dan dapat dipahami oleh penduduk.
                        </div>
                        
                        <div class="rejection-reasons mb-4">
                            <h6><i class="fas fa-list"></i> Alasan Penolakan Umum:</h6>
                            <ul class="list-unstyled">
                                <li><i class="fas fa-check text-muted"></i> Dokumen tidak lengkap</li>
                                <li><i class="fas fa-check text-muted"></i> Tidak memenuhi syarat</li>
                                <li><i class="fas fa-check text-muted"></i> Informasi tidak valid</li>
                                <li><i class="fas fa-check text-muted"></i> Duplikasi request</li>
                                <li><i class="fas fa-check text-muted"></i> Lainnya (sebutkan)</li>
                            </ul>
                        </div>
                        
                        <div class="mb-3">
                            <label for="rejection_reason" class="form-label required-field">
                                Alasan Penolakan <span class="text-danger">*</span>
                            </label>
                            <textarea name="rejection_reason" id="rejection_reason" class="form-control" rows="4" 
                                      placeholder="Jelaskan alasan penolakan request ini secara detail..." required></textarea>
                            <div class="form-text">
                                Alasan penolakan akan dikirimkan kepada penduduk yang mengajukan request.
                            </div>
                        </div>
                        
                        <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="Catatan internal untuk admin..."></textarea>
                        </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-danger btn-lg">
                                <i class="fas fa-times"></i> Tolak 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-warning status-badge mb-3">
                        {{ request_letter.get_status_display }}
                    </span>
                    <p class="text-muted small">
                        Request sedang menunggu persetujuan
                    </p>
                </div>
            </div>

            <!-- Rejection Guidelines -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Panduan Penolakan</h5>
                </div>
                <div class="card-body">
                    <div class="small">
                        <h6>Alasan yang Valid:</h6>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-success"></i> Dokumen tidak lengkap</li>
                            <li><i class="fas fa-check text-success"></i> Tidak memenuhi persyaratan</li>
                            <li><i class="fas fa-check text-success"></i> Informasi salah/keliru</li>
                            <li><i class="fas fa-check text-success"></i> Duplikasi request</li>
                        </ul>
                        
                        <h6 class="mt-3">Tips Penolakan:</h6>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-lightbulb text-warning"></i> Jelaskan alasan dengan jelas</li>
                            <li><i class="fas fa-lightbulb text-warning"></i> Berikan solusi jika memungkinkan</li>
                            <li><i class="fas fa-lightbulb text-warning"></i> Gunakan bahasa yang sopan</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Aksi Lainnya</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{% url 'admin_panel:letters:admin_request_letter_edit' request_letter.pk %}" 
                           class="btn btn-outline-primary">
                            <i class="fas fa-edit"></i> Edit Request
                        </a>
                        <a href="{% url 'admin_panel:letters:admin_request_letter_approve' request_letter.pk %}" 
                           class="btn btn-outline-success">
                            <i class="fas fa-check"></i> Setujui Request
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Form submission confirmation
    const form = document.getElementById('rejectForm');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const rejectionReason = document.getElementById('rejection_reason').value.trim();
        
        if (!rejectionReason) {
            alert('Alasan penolakan wajib diisi');
            return;
        }
        
        if (confirm('Apakah Anda yakin ingin menolak request ini? Tindakan ini tidak dapat dibatalkan.')) {
            // Show loading state
            const submitBtn = form.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memproses...';
            submitBtn.disabled = true;
            
            // Submit form
            form.submit();
        }
    });
    
    // Auto-fill rejection reason templates
    const rejectionReason = document.getElementById('rejection_reason');
    const templates = {
        'incomplete': 'Request ditolak karena dokumen yang dilampirkan tidak lengkap. Silakan lengkapi dokumen yang diperlukan dan ajukan kembali.',
        'requirements': 'Request ditolak karena tidak memenuhi persyaratan yang ditetapkan. Silakan periksa kembali persyaratan yang berlaku.',
        'invalid': 'Request ditolak karena informasi yang diberikan tidak valid atau tidak sesuai dengan data yang ada.',
        'duplicate': 'Request ditolak karena sudah pernah diajukan sebelumnya. Silakan periksa status request sebelumnya.'
    };
    
    // Add quick template buttons
    const templateButtons = document.createElement('div');
    templateButtons.className = 'mb-3';
    templateButtons.innerHTML = `
        <label class="form-label">Template Cepat:</label>
        <div class="btn-group-vertical w-100" role="group">
            <button type="button" class="btn btn-outline-secondary btn-sm" data-template="incomplete">
                <i class="fas fa-file-alt"></i> Dokumen Tidak Lengkap
            </button>
            <button type="button" class="btn btn-outline-secondary btn-sm" data-template="requirements">
                <i class="fas fa-exclamation-triangle"></i> Tidak Memenuhi Syarat
            </button>
            <button type="button" class="btn btn-outline-secondary btn-sm" data-template="invalid">
                <i class="fas fa-times"></i> Informasi Tidak Valid
            </button>
            <button type="button" class="btn btn-outline-secondary btn-sm" data-template="duplicate">
                <i class="fas fa-copy"></i> Duplikasi Request
            </button>
        </div>
    `;
    
    rejectionReason.parentNode.insertBefore(templateButtons, rejectionReason);
    
    // Handle template button clicks
    templateButtons.addEventListener('click', function(e) {
        if (e.target.classList.contains('btn')) {
            const template = e.target.dataset.template;
            if (templates[template]) {
                rejectionReason.value = templates[template];
                rejectionReason.focus();
            }
        }
    });
    
    // Character counter for rejection reason
    const charCounter = document.createElement('div');
    charCounter.className = 'form-text text-end';
    charCounter.innerHTML = '<span id="charCount">0</span> / 500 karakter';
    rejectionReason.parentNode.appendChild(charCounter);
    
    rejectionReason.addEventListener('input', function() {
        const count = this.value.length;
        document.getElementById('charCount').textContent = count;
        
        if (count > 500) {
            charCounter.classList.add('text-danger');
        } else {
            charCounter.classList.remove('text-danger');
        }
    });
});
</script>
{% endblock %}