{% 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">Setujui 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 approve-card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-check-circle text-success"></i> Konfirmasi Persetujuan</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>

            <!-- Approval Form -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-check"></i> Form Persetujuan</h5>
                </div>
                <div class="card-body">
                    <form method="POST" id="approveForm">
                        {% csrf_token %}
                        
                        <div class="alert alert-success">
                            <i class="fas fa-info-circle"></i>
                            <strong>Konfirmasi:</strong> Anda akan menyetujui request surat ini. 
                            Setelah disetujui, request akan berubah status menjadi "Disetujui" dan 
                            dapat diproses lebih lanjut.
                        </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="Tambahkan catatan untuk request ini..."></textarea>
                        </div>
                        
                        <div class="mb-3">
                            <label for="due_date" class="form-label">Tanggal Jatuh Tempo (Opsional)</label>
                            <input type="datetime-local" name="due_date" id="due_date" class="form-control">
                        </div>
                        
                        <div class="mb-3">
                            <label for="assigned_to" class="form-label">Ditugaskan Kepada (Opsional)</label>
                            <select name="assigned_to" id="assigned_to" class="form-select">
                                <option value="">Pilih Admin</option>
                                <!-- This would be populated with staff users -->
                            </select>
                        </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-check"></i> Setujui 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>

            <!-- Timeline -->
            <div class="card mb-4">
                <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 class="text-success">Menunggu Persetujuan</h6>
                            <p class="text-muted small">Saat ini</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Aksi Cepat</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_reject' request_letter.pk %}" 
                           class="btn btn-outline-danger">
                            <i class="fas fa-times"></i> Tolak Request
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Set default due date to 7 days from now
    const dueDateInput = document.getElementById('due_date');
    const now = new Date();
    now.setDate(now.getDate() + 7);
    const dueDate = now.toISOString().slice(0, 16);
    dueDateInput.value = dueDate;
    
    // Form submission confirmation
    const form = document.getElementById('approveForm');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        if (confirm('Apakah Anda yakin ingin menyetujui request ini?')) {
            // 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 admin notes with template
    const adminNotes = document.getElementById('admin_notes');
    adminNotes.addEventListener('focus', function() {
        if (!this.value) {
            this.value = 'Request disetujui. Silakan proses sesuai dengan ketentuan yang berlaku.';
        }
    });
});
</script>
{% endblock %}