{% extends 'admin/base.html' %}
{% load static %}
{% load currency_filters %}

{% block title %}Detail Anggota - Admin Panel{% endblock %}
{% block page_title %}Detail Anggota{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Profile Card -->
        <div class="lg:col-span-1">
            <div class="bg-white shadow rounded-lg">
                <div class="px-4 lg:px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Profil Anggota</h3>
                </div>
                <div class="p-4 lg:p-6">
                    <div class="text-center">
                        {% if anggota.foto_profil %}
                        <img class="mx-auto h-24 w-24 rounded-full object-cover" src="{{ anggota.foto_profil.url }}" alt="{{ anggota.nama_lengkap }}">
                        {% else %}
                        <div class="mx-auto h-24 w-24 rounded-full bg-gray-300 flex items-center justify-center">
                            <i class="fas fa-user text-3xl text-gray-600"></i>
                        </div>
                        {% endif %}
                        <h3 class="mt-4 text-lg font-medium text-gray-900">{{ anggota.nama_lengkap }}</h3>
                        <p class="text-sm text-gray-500">
                            {% if anggota.active_role %}{{ anggota.active_role.name }}{% else %}Anggota{% endif %}
                        </p>
                        
                        <div class="mt-4 space-y-2">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                                {% if anggota.status == 'aktif' %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
                                {{ anggota.get_status_display }}
                            </span>
                        </div>
                    </div>
                    
                    <div class="mt-6 space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">NIM</label>
                            <p class="mt-1 text-sm text-gray-900">{{ anggota.nim }}</p>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Email</label>
                            <p class="mt-1 text-sm text-gray-900">{{ anggota.email }}</p>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Telepon</label>
                            <p class="mt-1 text-sm text-gray-900">{{ anggota.no_telepon|default:"-" }}</p>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Tanggal Bergabung</label>
                            <p class="mt-1 text-sm text-gray-900">{{ anggota.tanggal_bergabung|date:"d F Y" }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Transaction History -->
        <div class="lg:col-span-2">
            <div class="bg-white shadow rounded-lg">
                <div class="px-4 lg:px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">Riwayat Iuran</h3>
                    <p class="text-sm text-gray-500">Transaksi iuran untuk {{ anggota.nama_lengkap }}</p>
                </div>
                
                {% if iuran_transaksi %}
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Judul</th>
                                <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jumlah</th>
                                <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tanggal</th>
                                <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for transaksi in iuran_transaksi %}
                            <tr>
                                <td class="px-4 lg:px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ transaksi.judul }}</div>
                                    <div class="text-sm text-gray-500">{{ transaksi.deskripsi|truncatechars:50 }}</div>
                                </td>
                                <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">
                                    Rp {{ transaksi.jumlah|number_idr }}
                                </td>
                                <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ transaksi.tanggal|date:"d M Y" }}</td>
                                <td class="px-4 lg:px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                                        {% if transaksi.status == 'approved' %}bg-green-100 text-green-800
                                        {% elif transaksi.status == 'pending' %}bg-yellow-100 text-yellow-800
                                        {% else %}bg-red-100 text-red-800{% endif %}">
                                        {{ transaksi.get_status_display }}
                                    </span>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-8">
                    <i class="fas fa-receipt text-3xl text-gray-400 mb-2"></i>
                    <p class="text-gray-500">Belum ada riwayat iuran</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- Actions -->
    <div class="mt-6 bg-white shadow rounded-lg">
        <div class="px-4 lg:px-6 py-4 bg-gray-50 border-t border-gray-200">
            <div class="flex flex-col sm:flex-row justify-between items-center space-y-3 sm:space-y-0">
                <div class="text-sm text-gray-500">
                    <i class="fas fa-info-circle mr-1"></i>
                    Anda hanya dapat melihat detail anggota. Untuk mengedit, gunakan modul anggota.
                </div>
                <div class="flex space-x-3">
                    <a href="{% url 'admin_panel:keuangan_anggota_list' %}" 
                       class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Kembali ke Daftar
                    </a>
                    <a href="{% url 'admin_panel:keuangan_dashboard' %}" 
                       class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
                        <i class="fas fa-tachometer-alt mr-2"></i>
                        Dashboard Keuangan
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}