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

{% block page_title %}Detail Dusun{% endblock %}

{% block extra_css %}
<style>

.detail-container {
    background: #f8f9fa;
    min-height: 100vh;
    padding: 1.5rem 0;
}

.detail-card {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 1.5rem;
    background: white;
    transition: all 0.2s ease;
}

.detail-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.detail-card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
    border-radius: 8px 8px 0 0;
}

.detail-card-header h6 {
    margin: 0;
    font-weight: 600;
    color: #495057;
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.detail-card-header i {
    margin-right: 0.5rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.detail-card-body {
    padding: 1.5rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.info-item {
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 3px solid #007bff;
    transition: all 0.2s ease;
}

.info-item:hover {
    background: #e9ecef;
    transform: translateX(2px);
}

.info-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.25rem;
}

.info-value {
    font-size: 0.9rem;
    font-weight: 500;
    color: #212529 !important;
    word-break: break-word;
}

.detail-card .info-value {
    color: #212529 !important;
}

.detail-card .card-body .info-value {
    color: #212529 !important;
}

.detail-card .info-value *,
.detail-card .card-body .info-value *,
.info-item .info-value,
.info-item .info-value * {
    color: #212529 !important;
}

.detail-card .info-value .badge,
.detail-card .card-body .info-value .badge {
    color: #212529 !important;
}

.detail-card .info-value span,
.detail-card .card-body .info-value span,
.detail-card .info-value div,
.detail-card .card-body .info-value div {
    color: #212529 !important;
}

.detail-container * {
    color: #212529 !important;
}

.detail-container .card-header,
.detail-container .card-header *,
.detail-container .btn,
.detail-container .btn *,
.detail-container .badge,
.detail-container .badge * {
    color: inherit !important;
}

.detail-container .info-value,
.detail-container .info-value *,
.detail-container .info-item,
.detail-container .info-item * {
    color: #212529 !important;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-badge.active {
    background: #d4edda;
    color: #155724;
}

.status-badge.inactive {
    background: #f8d7da;
    color: #721c24;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
}

.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    text-decoration: none;
}

.action-btn i {
    margin-right: 0.4rem;
    font-size: 0.8rem;
}

.action-btn.edit {
    background: #ffc107;
    color: #212529;
}

.action-btn.delete {
    background: #dc3545;
    color: white;
}

.action-btn.back {
    background: #6c757d;
    color: white;
}

.quick-actions {
    position: sticky;
    top: 1rem;
}

@media (max-width: 768px) {
    .detail-container {
        padding: 1rem 0;
    }

    .detail-card-body {
        padding: 1rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .info-item {
        padding: 0.5rem;
    }

    .action-buttons {
        gap: 0.4rem;
    }

    .action-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
    }

    .quick-actions {
        position: static;
        margin-top: 1rem;
    }
}

@media (max-width: 576px) {
    .detail-card-header {
        padding: 0.75rem 1rem;
    }

    .detail-card-body {
        padding: 0.75rem;
    }

    .info-grid {
        gap: 0.5rem;
    }
}
</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-map-marker-alt text-success mr-2"></i>
                            Detail Dusun
                        </h1>
                        <p class="text-muted mb-0">Informasi lengkap data dusun</p>
                    </div>
                    <div class="d-flex flex-wrap">
                        <a href="{% url 'admin_panel:references_dusun_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_dusun_edit' dusun.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">
                        <h6>
                            <i class="fas fa-info-circle"></i>
                            Informasi Dasar
                        </h6>
                    </div>
                    <div class="detail-card-body">
                        <div class="info-grid">
                            <div class="info-item">
                                <div class="info-label">Nama Dusun</div>
                                <div class="info-value">{{ dusun.name|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Kode Dusun</div>
                                <div class="info-value">{{ dusun.code|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Deskripsi</div>
                                <div class="info-value">{{ dusun.description|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Luas Area</div>
                                <div class="info-value">
                                    {% if dusun.area_size %}
                                        {{ dusun.area_size }} hektar
                                    {% else %}
                                        -
                                    {% endif %}
                                </div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Jumlah Penduduk</div>
                                <div class="info-value">{{ dusun.population_count|default:"0" }} jiwa</div>
                            </div>
                        </div>
                    </div>
                </div>

                {% if dusun.kepala_dusun %}
                <div class="detail-card">
                    <div class="detail-card-header">
                        <h6>
                            <i class="fas fa-user-tie"></i>
                            Informasi Kepala Dusun
                        </h6>
                    </div>
                    <div class="detail-card-body">
                        <div class="info-grid">
                            <div class="info-item">
                                <div class="info-label">Nama Lengkap</div>
                                <div class="info-value">{{ dusun.kepala_dusun.name|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">NIK</div>
                                <div class="info-value">{{ dusun.kepala_dusun.nik|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Jenis Kelamin</div>
                                <div class="info-value">{{ dusun.kepala_dusun.get_gender_display|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Tanggal Lahir</div>
                                <div class="info-value">
                                    {% if dusun.kepala_dusun.birth_date %}
                                        {{ dusun.kepala_dusun.birth_date|date:"d M Y" }}
                                    {% else %}
                                        -
                                    {% endif %}
                                </div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Tempat Lahir</div>
                                <div class="info-value">{{ dusun.kepala_dusun.birth_place|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Agama</div>
                                <div class="info-value">{{ dusun.kepala_dusun.religion|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Pendidikan</div>
                                <div class="info-value">{{ dusun.kepala_dusun.get_education_display|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Pekerjaan</div>
                                <div class="info-value">{{ dusun.kepala_dusun.occupation|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Status Perkawinan</div>
                                <div class="info-value">{{ dusun.kepala_dusun.get_marital_status_display|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Nomor Telepon</div>
                                <div class="info-value">{{ dusun.kepala_dusun.phone_number|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Alamat Lengkap</div>
                                <div class="info-value">{{ dusun.kepala_dusun.full_address|default:"-" }}</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">RT/RW</div>
                                <div class="info-value">
                                    {% if dusun.kepala_dusun.rt_number and dusun.kepala_dusun.rw_number %}
                                        RT {{ dusun.kepala_dusun.rt_number }}/RW {{ dusun.kepala_dusun.rw_number }}
                                    {% else %}
                                        -
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}

                <div class="detail-card">
                    <div class="detail-card-header">
                        <h6>
                            <i class="fas fa-chart-bar"></i>
                            Statistik
                        </h6>
                    </div>
                    <div class="detail-card-body">
                        <div class="info-grid">
                            <div class="info-item">
                                <div class="info-label">Total Lorong</div>
                                <div class="info-value">{{ dusun.lorong_set.count }} lorong</div>
                            </div>
                            <div class="info-item">
                                <div class="info-label">Total RT</div>
                                <div class="info-value">{{ dusun.rt_set.count }} RT</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

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

                <div class="detail-card quick-actions">
                    <div class="detail-card-header">
                        <h6>
                            <i class="fas fa-bolt"></i>
                            Aksi Cepat
                        </h6>
                    </div>
                    <div class="detail-card-body">
                        <div class="action-buttons">
                            {% if user|can_change:"references" %}
                            <a href="{% url 'admin_panel:references_dusun_edit' dusun.id %}" class="action-btn edit">
                                <i class="fas fa-edit"></i>Edit Data
                            </a>
                            {% endif %}
                            {% if user|can_delete:"references" %}
                            <a href="{% url 'admin_panel:references_dusun_delete' dusun.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>$(document).ready(function() {
    $('[title]').tooltip();
});
</script>
{% endblock %}