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

{% block title %}Detail Lembaga Adat{% endblock %}

{% block extra_css %}
<style>
    .profile-header {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        color: #333;
        border-radius: 12px;
        padding: 2rem;
        margin-bottom: 2rem;
    }

    .profile-logo {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid rgba(255, 255, 255, 0.3);
        margin-bottom: 1rem;
    }

    .profile-logo-placeholder {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        border: 4px solid rgba(255, 255, 255, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        color: #333;
        margin-bottom: 1rem;
    }

    .profile-name {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: #333;
    }

    .profile-title {
        font-size: 1rem;
        opacity: 0.8;
        margin-bottom: 1rem;
        color: #333;
    }

    .profile-badges {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .info-card {
        background: white;
        border: 1px solid #e3e6f0;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .info-card-header {
        border-bottom: 1px solid #e3e6f0;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .info-card-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #5a5c69;
        margin: 0;
    }

    .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f8f9fc;
    }

    .info-item:last-child {
        border-bottom: none;
    }

    .info-label {
        font-weight: 600;
        color: #5a5c69;
        min-width: 120px;
    }

    .info-value {
        color: #6c757d;
        text-align: right;
        flex: 1;
    }

    .badge {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
        border-radius: 6px;
    }

    .jabatan-badge {
        font-weight: 600;
    }

    .status-badge {
        font-weight: 600;
    }

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

    .action-btn {
        padding: 0.5rem 1rem;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .action-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .contact-info {
        background: #f8f9fc;
        border-radius: 8px;
        padding: 1rem;
        margin-top: 1rem;
    }

    .contact-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .contact-item:last-child {
        margin-bottom: 0;
    }

    .contact-icon {
        width: 20px;
        text-align: center;
        color: #6c757d;
    }

    .timeline {
        position: relative;
        padding-left: 2rem;
    }

    .timeline::before {
        content: '';
        position: absolute;
        left: 0.75rem;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e3e6f0;
    }

    .timeline-item {
        position: relative;
        margin-bottom: 1.5rem;
    }

    .timeline-item::before {
        content: '';
        position: absolute;
        left: -1.75rem;
        top: 0.5rem;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #4e73df;
        border: 3px solid white;
        box-shadow: 0 0 0 2px #e3e6f0;
    }

    .timeline-content {
        background: white;
        border: 1px solid #e3e6f0;
        border-radius: 8px;
        padding: 1rem;
    }

    .timeline-date {
        font-size: 0.8rem;
        color: #6c757d;
        margin-bottom: 0.5rem;
    }

    .timeline-title {
        font-weight: 600;
        color: #5a5c69;
        margin-bottom: 0.25rem;
    }

    .timeline-description {
        color: #6c757d;
        font-size: 0.9rem;
    }

    @media (max-width: 768px) {
        .profile-header {
            padding: 1.5rem;
        }

        .profile-logo,
        .profile-logo-placeholder {
            width: 80px;
            height: 80px;
        }

        .profile-name {
            font-size: 1.25rem;
        }

        .info-item {
            flex-direction: column;
            align-items: flex-start;
        }

        .info-label {
            min-width: auto;
            margin-bottom: 0.25rem;
        }

        .info-value {
            text-align: left;
        }

        .action-buttons {
            flex-direction: column;
        }

        .action-btn {
            justify-content: center;
        }
    }
</style>
{% endblock %}

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

    <div class="profile-header">
        <div class="row align-items-center">
            <div class="col-auto">
                {% if lembaga_adat.foto_kegiatan %}
                    <img src="{{ lembaga_adat.foto_kegiatan.url }}" alt="{{ lembaga_adat.nama_lembaga }}" class="profile-logo">
                {% else %}
                    <div class="profile-logo-placeholder">
                        <i class="fas fa-university"></i>
                    </div>
                {% endif %}
            </div>
            <div class="col">
                <div class="profile-name">{{ lembaga_adat.nama_lembaga }}</div>
                <div class="profile-title">{{ lembaga_adat.jenis_lembaga }}</div>
                <div class="profile-badges">
                    <span class="badge status-badge {% if lembaga_adat.status == 'aktif' %}bg-success{% else %}bg-secondary{% endif %}">
                        {{ lembaga_adat.get_status_display }}
                    </span>
                    {% if lembaga_adat.tanggal_terbentuk %}
                        <span class="badge bg-primary">
                            Terbentuk {{ lembaga_adat.tanggal_terbentuk|date:"Y" }}
                        </span>
                    {% endif %}
                </div>
            </div>
            <div class="col-auto">
                <div class="action-buttons">
                    <a href="{% url 'admin_panel:organization:admin_lembaga_adat_edit' lembaga_adat.id %}" class="action-btn btn btn-warning">
                        <i class="fas fa-edit"></i> Edit
                    </a>
                    <a href="{% url 'admin_panel:organization:admin_lembaga_adat_list' %}" class="action-btn btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Kembali
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="col-lg-6">
            <div class="info-card">
                <div class="info-card-header">
                    <h5 class="info-card-title">Informasi Lembaga</h5>
                </div>
                <div class="info-item">
                    <span class="info-label">Nama Lembaga</span>
                    <span class="info-value">{{ lembaga_adat.nama_lembaga }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Jenis Lembaga</span>
                    <span class="info-value">{{ lembaga_adat.jenis_lembaga }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Ketua</span>
                    <span class="info-value">{{ lembaga_adat.ketua }}</span>
                </div>
                {% if lembaga_adat.sekretaris %}
                <div class="info-item">
                    <span class="info-label">Sekretaris</span>
                    <span class="info-value">{{ lembaga_adat.sekretaris }}</span>
                </div>
                {% endif %}
                {% if lembaga_adat.bendahara %}
                <div class="info-item">
                    <span class="info-label">Bendahara</span>
                    <span class="info-value">{{ lembaga_adat.bendahara }}</span>
                </div>
                {% endif %}
                <div class="info-item">
                    <span class="info-label">Status</span>
                    <span class="info-value">
                        <span class="badge status-badge {% if lembaga_adat.status == 'aktif' %}bg-success{% else %}bg-secondary{% endif %}">
                            {{ lembaga_adat.get_status_display }}
                        </span>
                    </span>
                </div>
                {% if lembaga_adat.tanggal_terbentuk %}
                <div class="info-item">
                    <span class="info-label">Tanggal Terbentuk</span>
                    <span class="info-value">{{ lembaga_adat.tanggal_terbentuk|date:"d F Y" }}</span>
                </div>
                {% endif %}
                {% if lembaga_adat.alamat_sekretariat %}
                <div class="info-item">
                    <span class="info-label">Alamat Sekretariat</span>
                    <span class="info-value">{{ lembaga_adat.alamat_sekretariat }}</span>
                </div>
                {% endif %}
            </div>

            {% if lembaga_adat.kontak_phone %}
            <div class="info-card">
                <div class="info-card-header">
                    <h5 class="info-card-title">Informasi Kontak</h5>
                </div>
                <div class="contact-info">
                    {% if lembaga_adat.kontak_phone %}
                    <div class="contact-item">
                        <i class="fas fa-phone contact-icon"></i>
                        <span>{{ lembaga_adat.kontak_phone }}</span>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>

        <div class="col-lg-6">
            {% if lembaga_adat.deskripsi %}
            <div class="info-card">
                <div class="info-card-header">
                    <h5 class="info-card-title">Deskripsi</h5>
                </div>
                <p class="text-muted">{{ lembaga_adat.deskripsi }}</p>
            </div>
            {% endif %}

            {% if lembaga_adat.kegiatan_rutin %}
            <div class="info-card">
                <div class="info-card-header">
                    <h5 class="info-card-title">Kegiatan Rutin</h5>
                </div>
                <p class="text-muted">{{ lembaga_adat.kegiatan_rutin }}</p>
            </div>
            {% endif %}

            {% if lembaga_adat.jumlah_anggota %}
            <div class="info-card">
                <div class="info-card-header">
                    <h5 class="info-card-title">Informasi Anggota</h5>
                </div>
                <div class="info-item">
                    <span class="info-label">Jumlah Anggota</span>
                    <span class="info-value">{{ lembaga_adat.jumlah_anggota }} orang</span>
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="info-card">
                <div class="info-card-header">
                    <h5 class="info-card-title">Riwayat Aktivitas</h5>
                </div>
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-content">
                            <div class="timeline-date">{{ lembaga_adat.created_at|date:"d F Y, H:i" }}</div>
                            <div class="timeline-title">Data Lembaga Dibuat</div>
                            <div class="timeline-description">Data lembaga adat berhasil ditambahkan ke sistem</div>
                        </div>
                    </div>
                    {% if lembaga_adat.tanggal_terbentuk %}
                    <div class="timeline-item">
                        <div class="timeline-content">
                            <div class="timeline-date">{{ lembaga_adat.tanggal_terbentuk|date:"d F Y" }}</div>
                            <div class="timeline-title">Lembaga Terbentuk</div>
                            <div class="timeline-description">Lembaga adat {{ lembaga_adat.nama_lembaga }} terbentuk</div>
                        </div>
                    </div>
                    {% endif %}
                    {% if lembaga_adat.updated_at and lembaga_adat.updated_at != lembaga_adat.created_at %}
                    <div class="timeline-item">
                        <div class="timeline-content">
                            <div class="timeline-date">{{ lembaga_adat.updated_at|date:"d F Y, H:i" }}</div>
                            <div class="timeline-title">Data Diperbarui</div>
                            <div class="timeline-description">Informasi lembaga terakhir diperbarui</div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    console.log('Lembaga Adat detail page loaded');
    
    // Initialize responsive features if orgAPI is available
    if (typeof orgAPI !== 'undefined') {
        orgAPI.initResponsive();
    }
});
</script>
{% endblock %}