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

{% block page_title %}Detail Lorong{% 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-road text-primary mr-2"></i>
                        Detail Lorong
                    </h1>
                    <p class="text-muted mb-0">Informasi lengkap data lorong</p>
                </div>
                <div class="d-flex flex-wrap">
                    <a href="{% url 'admin_panel:references_lorong_list' %}" class="btn btn-outline-secondary mr-2 mb-2">
                        <i class="fas fa-arrow-left mr-1"></i>
                        Kembali
                    </a>
                    <a href="#" class="btn btn-outline-primary mr-2 mb-2" id="editBtn">
                        <i class="fas fa-edit mr-1"></i>
                        Edit
                    </a>
                    <a href="#" class="btn btn-outline-danger mb-2" id="deleteBtn">
                        <i class="fas fa-trash mr-1"></i>
                        Hapus
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">

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

            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-info-circle mr-2"></i>
                        Informasi Dasar
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Nama Lorong</div>
                                <div class="info-value">{{ lorong.nama_lorong|default:"-" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Kode Lorong</div>
                                <div class="info-value">
                                    <span class="badge badge-primary">{{ lorong.kode|default:"-" }}</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">{{ lorong.dusun.name|default:"-" }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Ketua Lorong</div>
                                <div class="info-value">{{ lorong.ketua_lorong|default:"-" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Status</div>
                                <div class="info-value">
                                    <span class="badge {% if lorong.is_active %}badge-success{% else %}badge-warning{% endif %}">
                                        {% if lorong.is_active %}Aktif{% else %}Tidak Aktif{% endif %}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Panjang Lorong</div>
                                <div class="info-value">{{ lorong.length|default:"-" }} meter</div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="info-item">
                                <div class="info-label">Deskripsi</div>
                                <div class="info-value">{{ lorong.description|default:"-" }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {% if lorong.ketua_lorong_penduduk %}
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-user-tie mr-2"></i>
                        Informasi Ketua Lorong
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Nama Lengkap</div>
                                <div class="info-value">{{ lorong.ketua_lorong_penduduk.name|default:"-" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">NIK</div>
                                <div class="info-value">{{ lorong.ketua_lorong_penduduk.nik|default:"-" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Jenis Kelamin</div>
                                <div class="info-value">
                                    <span class="badge badge-{% if lorong.ketua_lorong_penduduk.gender == 'L' %}primary{% else %}danger{% endif %}">
                                        {{ lorong.ketua_lorong_penduduk.get_gender_display }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Umur</div>
                                <div class="info-value">{{ lorong.ketua_lorong_penduduk.age }} tahun</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Tanggal Lahir</div>
                                <div class="info-value">
                                    {% if lorong.ketua_lorong_penduduk.birth_date %}
                                        {{ lorong.ketua_lorong_penduduk.birth_date|date:"d M Y" }}
                                    {% else %}
                                        -
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Tempat Lahir</div>
                                <div class="info-value">{{ lorong.ketua_lorong_penduduk.birth_place|default:"-" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Agama</div>
                                <div class="info-value">{{ lorong.ketua_lorong_penduduk.religion|default:"-" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Pendidikan</div>
                                <div class="info-value">{{ lorong.ketua_lorong_penduduk.get_education_display|default:"-" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Pekerjaan</div>
                                <div class="info-value">{{ lorong.ketua_lorong_penduduk.occupation|default:"-" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Status Perkawinan</div>
                                <div class="info-value">{{ lorong.ketua_lorong_penduduk.get_marital_status_display|default:"-" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">Nomor Telepon</div>
                                <div class="info-value">{{ lorong.ketua_lorong_penduduk.phone_number|default:"-" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <div class="info-label">RT/RW</div>
                                <div class="info-value">
                                    {% if lorong.ketua_lorong_penduduk.rt_number and lorong.ketua_lorong_penduduk.rw_number %}
                                        RT {{ lorong.ketua_lorong_penduduk.rt_number }}/RW {{ lorong.ketua_lorong_penduduk.rw_number }}
                                    {% else %}
                                        -
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="info-item">
                                <div class="info-label">Alamat Lengkap</div>
                                <div class="info-value">{{ lorong.ketua_lorong_penduduk.full_address|default:"-" }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}

            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-bar mr-2"></i>
                        Statistik Lorong
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="stat-item">
                                <div class="stat-icon">
                                    <i class="fas fa-home text-primary"></i>
                                </div>
                                <div class="stat-content">
                                    <div class="stat-number">{{ lorong.rt_number|default:"-" }}</div>
                                    <div class="stat-label">RT</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="stat-item">
                                <div class="stat-icon">
                                    <i class="fas fa-home text-success"></i>
                                </div>
                                <div class="stat-content">
                                    <div class="stat-number">{{ lorong.house_count|default:"0" }}</div>
                                    <div class="stat-label">Jumlah Rumah</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="stat-item">
                                <div class="stat-icon">
                                    <i class="fas fa-user-friends text-info"></i>
                                </div>
                                <div class="stat-content">
                                    <div class="stat-number">{{ lorong.population_count|default:"0" }}</div>
                                    <div class="stat-label">Total Penduduk</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="stat-item">
                                <div class="stat-icon">
                                    <i class="fas fa-ruler text-warning"></i>
                                </div>
                                <div class="stat-content">
                                    <div class="stat-number">{{ lorong.length|default:"-" }}</div>
                                    <div class="stat-label">Panjang (m)</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-file-alt mr-2"></i>
                        Deskripsi
                    </h6>
                </div>
                <div class="card-body">
                    <p class="text-muted">
                        {{ lorong.description|default:"Tidak ada deskripsi tersedia." }}
                    </p>
                </div>
            </div>
        </div>

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

            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-image mr-2"></i>
                        Foto Lorong
                    </h6>
                </div>
                <div class="card-body text-center">
                    <div class="beneficiary-photo-large">
                        <div class="beneficiary-photo-placeholder-large">
                            <i class="fas fa-road fa-3x"></i>
                            <p class="mt-2 text-muted">{{ lorong.nama_lorong|default:"Lorong" }}</p>
                        </div>
                    </div>
                    <button class="btn btn-outline-primary btn-sm mt-3">
                        <i class="fas fa-camera mr-1"></i>
                        Upload Foto
                    </button>
                </div>
            </div>

            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-bolt mr-2"></i>
                        Aksi Cepat
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{% url 'admin_panel:references_lorong_edit' lorong.id %}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-edit mr-1"></i>
                            Edit Data
                        </a>
                        {% if lorong.is_active %}
                        <a href="#" class="btn btn-outline-warning btn-sm" onclick="toggleStatus({{ lorong.id }}, false)">
                            <i class="fas fa-times mr-1"></i>
                            Nonaktifkan
                        </a>
                        {% else %}
                        <a href="#" class="btn btn-outline-success btn-sm" onclick="toggleStatus({{ lorong.id }}, true)">
                            <i class="fas fa-check mr-1"></i>
                            Aktifkan
                        </a>
                        {% endif %}
                        <a href="#" class="btn btn-outline-secondary btn-sm" onclick="exportData()">
                            <i class="fas fa-file-excel mr-1"></i>
                            Export Excel
                        </a>
                    </div>
                </div>
            </div>

            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-link mr-2"></i>
                        Data Terkait
                    </h6>
                </div>
                <div class="card-body">
                    <div class="list-group list-group-flush">
                        <a href="{% url 'admin_panel:references_penduduk_list' %}?lorong={{ lorong.id }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-users mr-2"></i>
                                Data Penduduk
                            </div>
                            <span class="badge badge-primary badge-pill">{{ lorong.population_count|default:"0" }}</span>
                        </a>
                        <a href="{% url 'admin_panel:references_keluarga_list' %}?lorong={{ lorong.id }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-home mr-2"></i>
                                Data Keluarga
                            </div>
                            <span class="badge badge-success badge-pill">{{ lorong.house_count|default:"0" }}</span>
                        </a>
                        <a href="{% url 'admin_panel:references_dusun_detail' lorong.dusun.id %}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-map-marker-alt mr-2"></i>
                                Data Dusun
                            </div>
                            <span class="badge badge-info badge-pill">{{ lorong.dusun.name|default:"-" }}</span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-info mr-2"></i>
                        Informasi Sistem
                    </h6>
                </div>
                <div class="card-body">
                    <div class="info-item">
                        <div class="info-label">Dibuat</div>
                        <div class="info-value">{{ lorong.created_at|date:"d F Y"|default:"-" }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Diperbarui</div>
                        <div class="info-value">{{ lorong.updated_at|date:"d F Y"|default:"-" }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Status</div>
                        <div class="info-value">
                            <span class="badge {% if lorong.is_active %}badge-success{% else %}badge-warning{% endif %}">
                                {% if lorong.is_active %}Aktif{% else %}Tidak Aktif{% endif %}
                            </span>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">ID Data</div>
                        <div class="info-value">{{ lorong.kode|default:"-" }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
{% endblock %}

{% block extra_js %}
<script>$(document).ready(function() {

    $('#editBtn').click(function() {
        window.location.href = "{% url 'admin_panel:references_lorong_edit' lorong.id %}";
    });

    $('#deleteBtn').click(function() {
        if (confirm('Apakah Anda yakin ingin menghapus data lorong ini?')) {
            window.location.href = "{% url 'admin_panel:references_lorong_delete' lorong.id %}";
        }
    });
});

function toggleStatus(lorongId, isActive) {
    const action = isActive ? 'mengaktifkan' : 'menonaktifkan';
    if (confirm(`Apakah Anda yakin ingin ${action} lorong ini?`)) {

        showWarning(`Lorong berhasil ${action}`);
        location.reload();
    }
}

function exportData() {
    showWarning('Data lorong berhasil diexport ke Excel');
}
</script>
{% endblock %}