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

{% block title %}Detail Pelajar - Admin Panel{% endblock %}

{% block page_title %}Detail Pelajar{% endblock %}

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

{% 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-graduation-cap text-primary mr-2"></i>
                        Detail Pelajar
                    </h1>
                    <p class="text-muted mb-0">Informasi lengkap data pelajar</p>
                </div>
                <div class="d-flex">
                    <a href="{% url 'admin_panel:references_pelajar_list' %}" class="btn btn-outline-secondary mr-2">
                        <i class="fas fa-arrow-left mr-1"></i>
                        Kembali
                    </a>
                    {% if user|can_change:"references" %}
                    <a href="{% url 'admin_panel:references_pelajar_edit' pelajar.id %}" class="btn btn-warning mr-2">
                        <i class="fas fa-edit mr-1"></i>
                        Edit
                    </a>
                    {% endif %}
                    {% if user|can_export:"references" %}
                    <button class="btn btn-outline-info" onclick="exportData()">
                        <i class="fas fa-download mr-1"></i>
                        Export
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

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

        <div class="detail-card">
            <div class="card-body">
                <div class="photo-container">
                    {% if pelajar.penduduk.photo and pelajar.penduduk.photo.url %}
                        <img src="{{ pelajar.penduduk.photo.url }}" alt="{{ pelajar.penduduk.name }}" class="photo-large">
                    {% else %}
                        <div class="photo-placeholder-large">
                            <i class="fas fa-user"></i>
                        </div>
                    {% endif %}
                    <h5 class="mb-1">{{ pelajar.penduduk.name }}</h5>
                    <p class="text-muted mb-0">{{ pelajar.penduduk.nik }}</p>
                    {% if pelajar.status %}
                        <span class="badge badge-{% if pelajar.status == 'aktif' %}success{% else %}secondary{% endif %} mt-2">
                            {{ pelajar.status|title }}
                        </span>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="detail-card">
            <div class="card-header">
                <h6 class="card-title mb-0">Aksi Cepat</h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{% url 'admin_panel:references_penduduk_detail' pelajar.penduduk.id %}" class="btn btn-info btn-custom">
                        <i class="fas fa-user mr-2"></i>Lihat Data Penduduk
                    </a>
                </div>
            </div>
        </div>
    </div>

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

        <div class="detail-card">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="fas fa-graduation-cap mr-2"></i>Informasi Pendidikan
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Jenjang Pendidikan</div>
                            <div class="info-value">
                                <span class="badge badge-info">{{ pelajar.get_jenjang_display|default:"-" }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Nama Sekolah</div>
                            <div class="info-value">{{ pelajar.sekolah|default:"-" }}</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Tahun Masuk</div>
                            <div class="info-value">{{ pelajar.tahun_masuk|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 badge-{% if pelajar.status == 'aktif' %}success{% else %}secondary{% endif %}">
                                    {{ pelajar.get_status_display|default:"-" }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="info-item">
                    <div class="info-label">Keterangan</div>
                    <div class="info-value">{{ pelajar.keterangan|default:"-" }}</div>
                </div>
            </div>
        </div>

        <div class="detail-card">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="fas fa-user mr-2"></i>Informasi Pribadi Lengkap
                </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">{{ pelajar.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">{{ pelajar.penduduk.nik|default:"-" }}</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <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 pelajar.penduduk.gender == 'L' %}primary{% else %}danger{% endif %}">
                                    {{ pelajar.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">{{ pelajar.penduduk.age }} tahun</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Tanggal Lahir</div>
                            <div class="info-value">
                                {% if pelajar.penduduk.birth_date %}
                                    {{ pelajar.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">{{ pelajar.penduduk.birth_place|default:"-" }}</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Agama</div>
                            <div class="info-value">{{ pelajar.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">{{ pelajar.penduduk.get_education_display|default:"-" }}</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Pekerjaan</div>
                            <div class="info-value">{{ pelajar.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">{{ pelajar.penduduk.get_marital_status_display|default:"-" }}</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Nomor Telepon</div>
                            <div class="info-value">{{ pelajar.penduduk.phone_number|default:"-" }}</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Dusun</div>
                            <div class="info-value">
                                {% if pelajar.penduduk.dusun %}
                                    <span class="badge badge-info">{{ pelajar.penduduk.dusun.name }}</span>
                                {% else %}
                                    -
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">RT/RW</div>
                            <div class="info-value">
                                {% if pelajar.penduduk.rt_number and pelajar.penduduk.rw_number %}
                                    RT {{ pelajar.penduduk.rt_number }}/RW {{ pelajar.penduduk.rw_number }}
                                {% else %}
                                    -
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Nomor Rumah</div>
                            <div class="info-value">{{ pelajar.penduduk.house_number|default:"-" }}</div>
                        </div>
                    </div>
                </div>

                <div class="info-item">
                    <div class="info-label">Alamat Lengkap</div>
                    <div class="info-value">{{ pelajar.penduduk.full_address|default:"-" }}</div>
                </div>
            </div>
        </div>

        <div class="detail-card">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="fas fa-users mr-2"></i>Informasi Keluarga
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Nomor KK</div>
                            <div class="info-value">{{ pelajar.penduduk.kk_number|default:"-" }}</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Hubungan dengan Kepala Keluarga</div>
                            <div class="info-value">{{ pelajar.penduduk.get_relationship_to_head_display|default:"-" }}</div>
                        </div>
                    </div>
                </div>

                {% if pelajar.penduduk.family %}
                <div class="row">
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Kepala Keluarga</div>
                            <div class="info-value">{{ pelajar.penduduk.family.head_of_family.name|default:"-" }}</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">Jumlah Anggota Keluarga</div>
                            <div class="info-value">{{ pelajar.penduduk.family.members.count }} orang</div>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
</div>

<script>function showNotificationToast(message, type) {

    $('.notification-toast').remove();

    let bgColor, icon, title;
    if (type === 'success') {
        bgColor = 'linear-gradient(135deg, #28a745 0%, #20c997 100%)';
        icon = 'fa-check-circle';
        title = 'Berhasil';
    } else if (type === 'error') {
        bgColor = 'linear-gradient(135deg, #dc3545 0%, #c82333 100%)';
        icon = 'fa-times-circle';
        title = 'Error';
    } else if (type === 'warning') {
        bgColor = 'linear-gradient(135deg, #ffc107 0%, #e0a800 100%)';
        icon = 'fa-exclamation-triangle';
        title = 'Peringatan';
    } else {
        bgColor = 'linear-gradient(135deg, #17a2b8 0%, #138496 100%)';
        icon = 'fa-info-circle';
        title = 'Informasi';
    }

    const toast = $(`
        <div class="notification-toast" style="
            position: fixed;
            top: 20px;
            right: 20px;
            background: ${bgColor};
            color: white;
            padding: 1rem 1.5rem;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            z-index: 10000;
            min-width: 300px;
            max-width: 400px;
            transform: translateX(100%);
            transition: transform 0.3s ease;
        ">
            <div class="d-flex align-items-center">
                <i class="fas ${icon} fa-lg mr-3"></i>
                <div class="flex-grow-1">
                    <div class="font-weight-bold mb-1">${title}</div>
                    <div class="small">${message}</div>
                </div>
                <button type="button" class="btn-close text-white ml-2" style="
                    background: none;
                    border: none;
                    font-size: 1.2rem;
                    opacity: 0.8;
                    cursor: pointer;
                ">&times;</button>
            </div>
        </div>
    `);

    $('body').append(toast);

    setTimeout(() => {
        toast.css('transform', 'translateX(0)');
    }, 100);

    setTimeout(() => {
        toast.css('transform', 'translateX(100%)');
        setTimeout(() => {
            toast.remove();
        }, 300);
    }, 2000);

    toast.find('.btn-close').on('click', function() {
        toast.css('transform', 'translateX(100%)');
        setTimeout(() => {
            toast.remove();
        }, 300);
    });
}

$(document).ready(function() {
    {% if messages %}
        var messages = [];
        {% for message in messages %}
            messages.push({
                text: '{{ message|escapejs }}',
                type: '{{ message.tags }}'
            });
        {% endfor %}

        var uniqueMessages = [];
        messages.forEach(function(msg) {
            if (!uniqueMessages.some(function(unique) {
                return unique.text === msg.text && unique.type === msg.type;
            })) {
                uniqueMessages.push(msg);
            }
        });

        if (uniqueMessages.length > 0) {
            showNotificationToast(uniqueMessages[0].text, uniqueMessages[0].type);
        }
    {% endif %}
});
</script>
{% endblock %}