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

{% block page_title %}Detail Penduduk{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/references/references-detail.css' %}">
{% 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-user text-primary mr-2"></i>
                            Detail Penduduk
                        </h1>
                        <p class="text-muted mb-0">Informasi lengkap data penduduk</p>
                    </div>
                    <div class="d-flex flex-wrap">
                        <a href="{% url 'admin_panel:references_penduduk_list' %}" class="btn btn-outline-secondary mr-2 mb-2">
                            <i class="fas fa-arrow-left mr-1"></i>Kembali
                        </a>
                        {% if user|can_change:"references" %}
                        <a href="{% url 'admin_panel:references_penduduk_edit' penduduk.id %}" class="btn btn-warning mr-2 mb-2">
                            <i class="fas fa-edit mr-1"></i>Edit
                        </a>
                        {% endif %}
                    </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-user"></i>
                            Informasi Personal
                        </h5>
                    </div>
                    <div class="detail-card-body">
                        <div class="info-grid">
                            <div class="info-item">
                                <div class="info-label">NIK</div>
                                <div class="info-value">{{ penduduk.nik|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Nama Lengkap</div>
                                <div class="info-value">{{ penduduk.name|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Tempat, Tanggal Lahir</div>
                                <div class="info-value">
                                    {{ penduduk.birth_place|default:"-" }},
                                    {% if penduduk.birth_date %}
                                        {{ penduduk.birth_date|date:"d F Y" }}
                                    {% else %}
                                        -
                                    {% endif %}
                                </div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Jenis Kelamin</div>
                                <div class="info-value">
                                    <span class="badge badge-{% if penduduk.gender == 'L' %}primary{% else %}success{% endif %} status-badge">
                                        <i class="fas fa-{% if penduduk.gender == 'L' %}male{% else %}female{% endif %} mr-1"></i>
                                        {{ penduduk.get_gender_display|default:"-" }}
                                    </span>
                                </div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Agama</div>
                                <div class="info-value">{{ penduduk.religion|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Status Perkawinan</div>
                                <div class="info-value">{{ penduduk.get_marital_status_display|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Pekerjaan</div>
                                <div class="info-value">{{ penduduk.occupation|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Pendidikan Terakhir</div>
                                <div class="info-value">{{ penduduk.get_education_display|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Alamat Lengkap</div>
                                <div class="info-value">{{ penduduk.address|default:"-" }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="detail-card">
                    <div class="detail-card-header">
                        <h5>
                            <i class="fas fa-map-marker-alt"></i>
                            Informasi Alamat
                        </h5>
                    </div>
                    <div class="detail-card-body">
                        <div class="info-grid">
                            <div class="info-item">
                                <div class="info-label">Dusun</div>
                                <div class="info-value">{{ penduduk.dusun.name|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Lorong</div>
                                <div class="info-value">{{ penduduk.lorong.name|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">RT</div>
                                <div class="info-value">{{ penduduk.rt_number|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">RW</div>
                                <div class="info-value">{{ penduduk.rw_number|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Nomor Rumah</div>
                                <div class="info-value">{{ penduduk.house_number|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Kode Pos</div>
                                <div class="info-value">{{ penduduk.postal_code|default:"-" }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="detail-card">
                    <div class="detail-card-header">
                        <h5>
                            <i class="fas fa-phone"></i>
                            Informasi Kontak
                        </h5>
                    </div>
                    <div class="detail-card-body">
                        <div class="info-grid">
                            <div class="info-item">
                                <div class="info-label">Nomor Telepon</div>
                                <div class="info-value">{{ penduduk.phone_number|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Nomor HP</div>
                                <div class="info-value">{{ penduduk.mobile_number|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Email</div>
                                <div class="info-value">{{ penduduk.email|default:"-" }}</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-camera"></i>
                            Foto Profil
                        </h5>
                    </div>
                    <div class="profile-photo-container">
                        {% if penduduk.photo and penduduk.photo.url %}
                            <img src="{{ penduduk.photo.url }}" alt="{{ penduduk.name }}" class="profile-photo">
                        {% else %}
                            <div class="profile-photo-placeholder">
                                <i class="fas fa-user"></i>
                            </div>
                        {% endif %}
                        <p class="text-muted mb-3">
                            {% if penduduk.photo %}
                                Foto Profil
                            {% else %}
                                Tidak ada foto
                            {% endif %}
                        </p>
                        {% if user|can_change:"references" %}
                        <button class="btn btn-primary btn-sm">
                            <i class="fas fa-upload mr-1"></i>Ganti Foto
                        </button>
                        {% endif %}
                    </div>
                </div>

                <div class="detail-card">
                    <div class="detail-card-header">
                        <h5>
                            <i class="fas fa-info-circle"></i>
                            Status Data
                        </h5>
                    </div>
                    <div class="detail-card-body">
                        <div class="text-center mb-3">
                            <span class="status-badge {% if penduduk.is_active %}active{% else %}inactive{% endif %}">
                                <i class="fas fa-{% if penduduk.is_active %}check-circle{% else %}times-circle{% endif %} mr-1"></i>
                                {% if penduduk.is_active %}Aktif{% else %}Tidak Aktif{% endif %}
                            </span>
                        </div>
                        <div class="info-item">
                            <div class="info-label">Dibuat</div>
                            <div class="info-value">{{ penduduk.created_at|date:"d M Y" }}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">Diupdate</div>
                            <div class="info-value">{{ penduduk.updated_at|date:"d M Y" }}</div>
                        </div>
                    </div>
                </div>

                <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">
                            {% if user|can_change:"references" %}
                            <a href="{% url 'admin_panel:references_penduduk_edit' penduduk.id %}" class="action-btn edit">
                                <i class="fas fa-edit"></i>Edit Data
                            </a>
                            {% endif %}
                            <button onclick="exportData()" class="action-btn export">
                                <i class="fas fa-download"></i>Export Data
                            </button>
                            {% if user|can_delete:"references" %}
                            <a href="{% url 'admin_panel:references_penduduk_delete' penduduk.id %}" class="action-btn delete">
                                <i class="fas fa-trash"></i>Hapus Data
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>function exportData() {
    showLoading('Mengekspor data...');
    setTimeout(() => {
        hideLoading();
        showSuccess('Data berhasil diekspor');
    }, 2000);
}

function showLoading(message) {
    const overlay = $('<div class="loading-overlay"><div class="loading-spinner"><i class="fas fa-spinner fa-spin"></i><p>' + message + '</p></div></div>');
    $('body').append(overlay);
}

function hideLoading() {
    $('.loading-overlay').remove();
}

function showSuccess(message) {
    const notification = $(`
        <div class="alert alert-success alert-dismissible fade show position-fixed" style="top: 20px; right: 20px; z-index: 9999;">
            <i class="fas fa-check-circle mr-2"></i>${message}
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>
    `);
    $('body').append(notification);

    setTimeout(() => {
        notification.showWarning('close');
    }, 3000);
}

$(document).ready(function() {
    $('[title]').tooltip();
});
</script>
{% endblock %}