{% 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">Konfirmasi penghapusan request surat</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">
            <!-- Warning Section -->
            <div class="warning-section mb-4">
                <div class="d-flex align-items-center">
                    <i class="fas fa-exclamation-triangle fa-2x text-warning me-3"></i>
                    <div>
                        <h5 class="mb-1">Peringatan!</h5>
                        <p class="mb-0">Anda akan menghapus request surat ini secara permanen. Tindakan ini tidak dapat dibatalkan.</p>
                    </div>
                </div>
            </div>

            <!-- Request Information -->
            <div class="card delete-card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-trash text-danger"></i> Request yang akan dihapus</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-{{ request_letter.get_status_color }}">
                                    {{ request_letter.get_status_display }}
                                </span>
                                
                                <h6>Tanggal Dibuat</h6>
                                <p class="text-muted">{{ request_letter.created_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>

            <!-- Delete Form -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-trash"></i> Konfirmasi Penghapusan</h5>
                </div>
                <div class="card-body">
                    <form method="POST" id="deleteForm">
                        {% csrf_token %}
                        
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-circle"></i>
                            <strong>Data yang akan dihapus:</strong>
                            <ul class="mb-0 mt-2">
                                <li>Informasi request surat</li>
                                <li>Dokumen pendukung (jika ada)</li>
                                <li>Dokumen yang dihasilkan (jika ada)</li>
                                <li>Catatan admin</li>
                                <li>Riwayat status</li>
                            </ul>
                        </div>
                        
                        <div class="mb-3">
                            <label for="confirm_text" class="form-label">
                                Ketik <strong>"HAPUS"</strong> untuk konfirmasi:
                            </label>
                            <input type="text" name="confirm_text" id="confirm_text" class="form-control" 
                                   placeholder="HAPUS" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="delete_reason" class="form-label">Alasan Penghapusan (Opsional)</label>
                            <textarea name="delete_reason" id="delete_reason" class="form-control" rows="3" 
                                      placeholder="Jelaskan alasan penghapusan request ini..."></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" id="deleteBtn" disabled>
                                <i class="fas fa-trash"></i> Hapus Request
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Impact Information -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Dampak Penghapusan</h5>
                </div>
                <div class="card-body">
                    <div class="small">
                        <h6>Data yang Hilang:</h6>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-times text-danger"></i> Request surat</li>
                            <li><i class="fas fa-times text-danger"></i> Dokumen pendukung</li>
                            <li><i class="fas fa-times text-danger"></i> Dokumen hasil</li>
                            <li><i class="fas fa-times text-danger"></i> Catatan admin</li>
                            <li><i class="fas fa-times text-danger"></i> Riwayat status</li>
                        </ul>
                        
                        <h6 class="mt-3">Alternatif:</h6>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-success"></i> Ubah status menjadi "Dibatalkan"</li>
                            <li><i class="fas fa-check text-success"></i> Arsipkan request</li>
                            <li><i class="fas fa-check text-success"></i> Edit informasi request</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Alternative Actions -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Alternatif 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>
                        {% if request_letter.status == 'pending' %}
                        <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>
                        <a href="{% url 'admin_panel:letters:admin_request_letter_reject' request_letter.pk %}" 
                           class="btn btn-outline-warning">
                            <i class="fas fa-times"></i> Tolak Request
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const confirmText = document.getElementById('confirm_text');
    const deleteBtn = document.getElementById('deleteBtn');
    const deleteForm = document.getElementById('deleteForm');
    
    // Enable/disable delete button based on confirmation text
    confirmText.addEventListener('input', function() {
        if (this.value.toUpperCase() === 'HAPUS') {
            deleteBtn.disabled = false;
            deleteBtn.classList.remove('btn-danger');
            deleteBtn.classList.add('btn-danger');
        } else {
            deleteBtn.disabled = true;
        }
    });
    
    // Form submission with double confirmation
    deleteForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const confirmText = document.getElementById('confirm_text').value;
        if (confirmText.toUpperCase() !== 'HAPUS') {
            alert('Konfirmasi tidak sesuai. Ketik "HAPUS" untuk melanjutkan.');
            return;
        }
        
        if (confirm('Apakah Anda YAKIN ingin menghapus request ini? Tindakan ini TIDAK DAPAT DIBATALKAN!')) {
            if (confirm('PERINGATAN: Data akan dihapus PERMANEN. Lanjutkan?')) {
                // Show loading state
                deleteBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Menghapus...';
                deleteBtn.disabled = true;
                
                // Submit form
                deleteForm.submit();
            }
        }
    });
    
    // Auto-fill delete reason
    const deleteReason = document.getElementById('delete_reason');
    deleteReason.addEventListener('focus', function() {
        if (!this.value) {
            this.value = 'Request dihapus karena alasan administratif.';
        }
    });
    
    // Prevent accidental submission
    let submitAttempts = 0;
    deleteForm.addEventListener('submit', function(e) {
        submitAttempts++;
        if (submitAttempts === 1) {
            e.preventDefault();
            alert('Klik sekali lagi untuk konfirmasi penghapusan.');
        }
    });
});
</script>
{% endblock %}