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

{% block page_title %}Detail RT {{ rt.rt_number }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/references/references-detail.css' %}">
<style>

</style>
{% endblock %}

{% block content %}
<div class="detail-container">
    <div class="container-fluid">

    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center">
                <div class="mb-3 mb-md-0">
                    <h1 class="h3 mb-1 text-dark font-weight-bold">
                        <i class="fas fa-home text-primary mr-2"></i>
                        Detail RT {{ rt.rt_number }}
                    </h1>
                    <p class="text-muted mb-0">Informasi lengkap RT {{ rt.rt_number }}</p>
                </div>
                <div class="d-flex flex-wrap">
                    <a href="{% url 'admin_panel:references_rt_list' %}" class="btn btn-outline-secondary mr-2 mb-2">
                        <i class="fas fa-arrow-left mr-1"></i>
                        Kembali
                    </a>
                    <a href="{% url 'admin_panel:references_rt_edit' rt.id %}" class="btn btn-warning mr-2 mb-2">
                        <i class="fas fa-edit mr-1"></i>
                        Edit
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="col-lg-8">

            <div class="detail-card">
                <div class="detail-card-header">
                    <h5>
                        <i class="fas fa-info-circle"></i>
                        Informasi Dasar RT
                    </h5>
                </div>

                <div class="detail-card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Nomor RT</div>
                                <div class="info-value"><strong>{{ rt.rt_number }}</strong></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">RW</div>
                                <div class="info-value">
                                    <span class="badge badge-info">RW {{ rt.rw.rw_number }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Dusun</div>
                                <div class="info-value">
                                    <span class="badge badge-info">{{ rt.rw.dusun.name }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Ketua RT</div>
                                <div class="info-value">
                                    {% if rt.ketua_rt %}
                                        {{ rt.ketua_rt.name }}
                                    {% else %}
                                        <span class="text-muted">Belum ditentukan</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Jumlah Penduduk</div>
                                <div class="info-value">
                                    <span class="badge badge-success">{{ rt.get_population_count }} orang</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Status</div>
                                <div class="info-value">
                                    {% if rt.is_active %}
                                        <span class="badge badge-success"><i class="fas fa-check-circle mr-1"></i>Aktif</span>
                                    {% else %}
                                        <span class="badge badge-danger"><i class="fas fa-times-circle mr-1"></i>Tidak Aktif</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        {% if rt.description %}
                        <div class="col-12">
                            <div class="info-item">
                                <div class="info-label">Deskripsi</div>
                                <div class="info-value">{{ rt.description }}</div>
                            </div>
                        </div>
                        {% endif %}
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Dibuat</div>
                                <div class="info-value">{{ rt.created_at|date:"d M Y" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Terakhir Diupdate</div>
                                <div class="info-value">{{ rt.updated_at|date:"d M Y" }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">

            <div class="detail-card">
                <div class="detail-card-header">
                    <h5>
                        <i class="fas fa-chart-bar"></i>
                        Statistik
                    </h5>
                </div>
                <div class="detail-card-body">
                    <div class="stats-card">
                        <div class="stats-number">{{ rt.get_population_count }}</div>
                        <div class="stats-label">Total Penduduk</div>
                    </div>
                </div>
            </div>

            {% if rt.ketua_rt %}
            <div class="detail-card">
                <div class="detail-card-header">
                    <h5>
                        <i class="fas fa-user-tie"></i>
                        Ketua RT
                    </h5>
                </div>
                <div class="detail-card-body">
                    <div class="text-center">
                        <div class="ketua-avatar mb-3">
                            <i class="fas fa-user"></i>
                        </div>
                        <h6 class="font-weight-bold mb-2">{{ rt.ketua_rt.name }}</h6>
                        <p class="text-muted small mb-1">NIK: {{ rt.ketua_rt.nik }}</p>
                        {% if rt.ketua_rt.phone_number or rt.ketua_rt.mobile_number %}
                        <p class="text-muted small mb-0">
                            <i class="fas fa-phone mr-1"></i>
                            {{ rt.ketua_rt.mobile_number|default:rt.ketua_rt.phone_number }}
                        </p>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endif %}

            <div class="detail-card quick-actions">
                <div class="detail-card-header">
                    <h5>
                        <i class="fas fa-bolt"></i>
                        Aksi Cepat
                    </h5>
                </div>
                <div class="detail-card-body">
                    <div class="action-buttons">
                        <a href="{% url 'admin_panel:references_rt_edit' rt.id %}" class="action-btn edit">
                            <i class="fas fa-edit"></i>Edit Data
                        </a>
                        <button type="button" class="action-btn delete" onclick="deleteRT()">
                            <i class="fas fa-trash"></i>Hapus Data
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">
                    <i class="fas fa-exclamation-triangle text-warning me-2"></i>
                    Konfirmasi Hapus
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Apakah Anda yakin ingin menghapus <strong>RT {{ rt.rt_number }}</strong>?</p>
                <p class="text-danger"><small>Data yang dihapus tidak dapat dikembalikan.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="fas fa-trash me-1"></i>
                    Hapus
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>function deleteRT() {
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    modal.show();

    $('#confirmDeleteBtn').off('click').on('click', function() {
        const btn = $(this);
        const originalText = btn.html();

        btn.html('<i class="fas fa-spinner fa-spin me-1"></i>Menghapus...');
        btn.prop('disabled', true);

        fetch('{% url "admin_panel:references_rt_delete" rt.id %}', {
            method: 'POST',
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.href = '{% url "admin_panel:references_rt_list" %}';
            } else {
                showWarning('Error: ' + data.error);
                btn.html(originalText);
                btn.prop('disabled', false);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showWarning('Terjadi kesalahan saat menghapus data');
            btn.html(originalText);
            btn.prop('disabled', false);
        });
    });
}

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
</script>
{% endblock %}