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

{% block title %}Detail Iuran - {{ block.super }}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex items-center space-x-4 mb-4">
                <a href="{% url 'anggota:keuangan_iuran_list' %}" class="text-gray-600 hover:text-gray-900">
                    <i class="fas fa-arrow-left text-xl"></i>
                </a>
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">Detail Iuran</h1>
                    <p class="text-gray-600">Informasi lengkap pembayaran iuran</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-8">
            <!-- Status Badge -->
            <div class="mb-6">
                {% if iuran.status == 'confirmed' %}
                    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold bg-green-100 text-green-800">
                        <i class="fas fa-check-circle mr-2"></i>
                        Terkonfirmasi
                    </span>
                {% elif iuran.status == 'pending' %}
                    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold bg-yellow-100 text-yellow-800">
                        <i class="fas fa-clock mr-2"></i>
                        Pending
                    </span>
                {% else %}
                    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold bg-red-100 text-red-800">
                        <i class="fas fa-times-circle mr-2"></i>
                        Dibatalkan
                    </span>
                {% endif %}
            </div>

            <!-- Iuran Details -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <p class="text-sm text-gray-600 mb-1">Tipe Iuran</p>
                    <p class="text-lg font-semibold text-gray-900">{{ iuran.get_tipe_display }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600 mb-1">Jumlah</p>
                    <p class="text-lg font-semibold text-gray-900">{{ iuran.jumlah|currency }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600 mb-1">Periode</p>
                    <p class="text-lg font-semibold text-gray-900">{{ iuran.periode }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-600 mb-1">Tanggal Dibuat</p>
                    <p class="text-lg font-semibold text-gray-900">{{ iuran.created_at|date:"d F Y, H:i" }}</p>
                </div>
            </div>

            <!-- Bukti Pembayaran -->
            {% if iuran.bukti_pembayaran %}
            <div class="mb-6">
                <p class="text-sm text-gray-600 mb-2">Bukti Pembayaran</p>
                <img src="{{ iuran.bukti_pembayaran.url }}" alt="Bukti Pembayaran" class="max-w-md rounded-lg border border-gray-200">
            </div>
            {% endif %}

            <!-- Catatan -->
            {% if iuran.catatan %}
            <div class="mb-6">
                <p class="text-sm text-gray-600 mb-2">Catatan</p>
                <p class="text-gray-900 bg-gray-50 p-4 rounded-lg">{{ iuran.catatan }}</p>
            </div>
            {% endif %}

            <!-- Back Button -->
            <div class="mt-8">
                <a href="{% url 'anggota:keuangan_iuran_list' %}" class="inline-flex items-center px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold rounded-lg transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Kembali
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}