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

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

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-4 px-2 sm:px-4 lg:px-6 xl:px-8">
    <div class="w-full space-y-6">
        <!-- Back Button -->
        <div>
            <a href="{% url 'inventaris_admin:peminjaman_list' %}" 
               class="inline-flex items-center px-4 py-2 bg-white border-2 border-green-200 rounded-lg text-sm font-medium text-green-700 hover:bg-green-50 hover:border-green-300 transition-all duration-200 shadow-sm">
                <i class="fas fa-arrow-left mr-2"></i>
                Kembali ke Daftar
            </a>
        </div>

        <!-- Header Card -->
        <div class="bg-white rounded-xl shadow-lg border-2 border-green-100 overflow-hidden">
            <div class="bg-gradient-to-r from-green-500 to-green-600 px-6 py-6 text-white">
                <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                    <div class="flex items-center space-x-4">
                        <div class="w-16 h-16 bg-white bg-opacity-20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                            <i class="fas fa-hand-paper text-white text-2xl"></i>
                        </div>
                        <div>
                            <h1 class="text-2xl sm:text-3xl font-bold">Detail Peminjaman</h1>
                            <p class="text-green-100 mt-1">ID: #{{ peminjaman.id }}</p>
                        </div>
                    </div>
                    <div>
                        <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold shadow-sm
                            {% if peminjaman.status == 'pending' %}bg-gradient-to-r from-yellow-400 to-yellow-500 text-white
                            {% elif peminjaman.status == 'disetujui' %}bg-gradient-to-r from-blue-500 to-blue-600 text-white
                            {% elif peminjaman.status == 'dipinjam' %}bg-gradient-to-r from-green-500 to-green-600 text-white
                            {% elif peminjaman.status == 'dikembalikan' %}bg-gradient-to-r from-gray-400 to-gray-500 text-white
                            {% elif peminjaman.status == 'ditolak' %}bg-gradient-to-r from-red-500 to-red-600 text-white
                            {% else %}bg-gradient-to-r from-purple-500 to-purple-600 text-white{% endif %}">
                            {{ peminjaman.get_status_display }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content Grid -->
        <div class="grid grid-cols-1 xl:grid-cols-3 gap-4 sm:gap-6">
            <!-- Left Column - Main Info -->
            <div class="xl:col-span-2 space-y-6">
                <!-- Barang Info Card -->
                <div class="bg-white rounded-xl shadow-lg border-2 border-green-100 p-6">
                    <div class="flex items-center space-x-3 mb-6">
                        <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center shadow-md">
                            <i class="fas fa-box text-white text-xl"></i>
                        </div>
                        <h2 class="text-xl font-bold text-gray-900">Informasi Barang</h2>
                    </div>
                    <div class="space-y-4">
                        <div class="flex items-start space-x-4">
                            {% if peminjaman.barang.gambar %}
                                <img class="h-24 w-24 rounded-lg object-cover shadow-md" src="{{ peminjaman.barang.gambar.url }}" alt="{{ peminjaman.barang.nama }}">
                            {% else %}
                                <div class="h-24 w-24 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center shadow-md">
                                    <i class="fas fa-box text-white text-2xl"></i>
                                </div>
                            {% endif %}
                            <div class="flex-1">
                                <h3 class="text-lg font-bold text-gray-900 mb-1">{{ peminjaman.barang.nama }}</h3>
                                <p class="text-sm text-gray-600 mb-2">Kode: {{ peminjaman.barang.kode_barang }}</p>
                                <div class="flex flex-wrap gap-2">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                        <i class="fas fa-folder mr-1"></i>{{ peminjaman.barang.kategori.nama }}
                                    </span>
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                        <i class="fas fa-map-marker-alt mr-1"></i>{{ peminjaman.barang.lokasi.nama }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Peminjam Info Card -->
                <div class="bg-white rounded-xl shadow-lg border-2 border-green-100 p-6">
                    <div class="flex items-center space-x-3 mb-6">
                        <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center shadow-md">
                            <i class="fas fa-user text-white text-xl"></i>
                        </div>
                        <h2 class="text-xl font-bold text-gray-900">Informasi Peminjam</h2>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div class="bg-green-50 rounded-lg p-4">
                            <p class="text-xs font-medium text-gray-500 mb-1">Nama Lengkap</p>
                            <p class="text-base font-semibold text-gray-900">
                                {% if peminjaman.is_non_anggota %}
                                    {{ peminjaman.nama_lengkap_non_anggota }}
                                {% elif peminjaman.peminjam.profil %}
                                    {{ peminjaman.peminjam.profil.nama_lengkap }}
                                {% else %}
                                    {{ peminjaman.peminjam.get_full_name|default:peminjaman.peminjam.username }}
                                {% endif %}
                            </p>
                        </div>
                        <div class="bg-green-50 rounded-lg p-4">
                            <p class="text-xs font-medium text-gray-500 mb-1">Email</p>
                            <p class="text-base font-semibold text-gray-900">
                                {% if peminjaman.is_non_anggota %}
                                    {{ peminjaman.email_non_anggota|default:"-" }}
                                {% else %}
                                    {{ peminjaman.peminjam.email|default:"-" }}
                                {% endif %}
                            </p>
                        </div>
                        <div class="bg-green-50 rounded-lg p-4">
                            <p class="text-xs font-medium text-gray-500 mb-1">No. Telepon</p>
                            <p class="text-base font-semibold text-gray-900">
                                {% if peminjaman.is_non_anggota %}
                                    {{ peminjaman.no_hp_non_anggota|default:"-" }}
                                {% elif peminjaman.peminjam.profil %}
                                    {{ peminjaman.peminjam.profil.no_telepon|default:"-" }}
                                {% else %}
                                    -
                                {% endif %}
                            </p>
                        </div>
                        <div class="bg-green-50 rounded-lg p-4">
                            <p class="text-xs font-medium text-gray-500 mb-1">Alamat</p>
                            <p class="text-base font-semibold text-gray-900">
                                {% if peminjaman.is_non_anggota %}
                                    {{ peminjaman.alamat_non_anggota|default:"-" }}
                                {% elif peminjaman.peminjam.profil %}
                                    {{ peminjaman.peminjam.profil.alamat|default:"-" }}
                                {% else %}
                                    -
                                {% endif %}
                            </p>
                        </div>
                        {% if peminjaman.is_non_anggota %}
                        <div class="bg-green-50 rounded-lg p-4">
                            <p class="text-xs font-medium text-gray-500 mb-1">Instansi</p>
                            <p class="text-base font-semibold text-gray-900">{{ peminjaman.instansi_non_anggota|default:"-" }}</p>
                        </div>
                        <div class="bg-green-50 rounded-lg p-4">
                            <p class="text-xs font-medium text-gray-500 mb-1">No. KTP</p>
                            <p class="text-base font-semibold text-gray-900">{{ peminjaman.no_ktp_non_anggota|default:"-" }}</p>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Non-Anggota Documents -->
                {% if peminjaman.is_non_anggota %}
                <div class="bg-white rounded-xl shadow-lg border-2 border-green-100 p-6">
                    <div class="flex items-center space-x-3 mb-6">
                        <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center shadow-md">
                            <i class="fas fa-file-alt text-white text-xl"></i>
                        </div>
                        <h2 class="text-xl font-bold text-gray-900">Dokumen</h2>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        {% if peminjaman.jaminan %}
                        <div class="bg-green-50 rounded-lg p-4">
                            <p class="text-xs font-medium text-gray-500 mb-2">Jaminan</p>
                            <a href="{{ peminjaman.jaminan.url }}" target="_blank" 
                               class="inline-flex items-center px-3 py-2 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-lg transition-colors duration-200">
                                <i class="fas fa-file-pdf mr-2"></i>
                                <span class="text-sm font-medium">Lihat Dokumen</span>
                            </a>
                        </div>
                        {% endif %}
                        {% if peminjaman.foto_peminjam %}
                        <div class="bg-green-50 rounded-lg p-4">
                            <p class="text-xs font-medium text-gray-500 mb-2">Foto Peminjam</p>
                            <a href="{{ peminjaman.foto_peminjam.url }}" target="_blank" 
                               class="inline-flex items-center px-3 py-2 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-lg transition-colors duration-200">
                                <i class="fas fa-image mr-2"></i>
                                <span class="text-sm font-medium">Lihat Foto</span>
                            </a>
                        </div>
                        {% endif %}
                        {% if peminjaman.dokumen_surat_peminjam %}
                        <div class="bg-green-50 rounded-lg p-4">
                            <p class="text-xs font-medium text-gray-500 mb-2">Surat Peminjam</p>
                            <a href="{{ peminjaman.dokumen_surat_peminjam.url }}" target="_blank" 
                               class="inline-flex items-center px-3 py-2 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-lg transition-colors duration-200">
                                <i class="fas fa-file-pdf mr-2"></i>
                                <span class="text-sm font-medium">Lihat Dokumen</span>
                            </a>
                        </div>
                        {% endif %}
                        {% if peminjaman.dokumen_ktp %}
                        <div class="bg-green-50 rounded-lg p-4">
                            <p class="text-xs font-medium text-gray-500 mb-2">KTP</p>
                            <a href="{{ peminjaman.dokumen_ktp.url }}" target="_blank" 
                               class="inline-flex items-center px-3 py-2 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-lg transition-colors duration-200">
                                <i class="fas fa-file-pdf mr-2"></i>
                                <span class="text-sm font-medium">Lihat Dokumen</span>
                            </a>
                        </div>
                        {% endif %}
                        {% if peminjaman.dokumen_lainnya %}
                        <div class="bg-green-50 rounded-lg p-4">
                            <p class="text-xs font-medium text-gray-500 mb-2">Dokumen Lainnya</p>
                            <a href="{{ peminjaman.dokumen_lainnya.url }}" target="_blank" 
                               class="inline-flex items-center px-3 py-2 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-lg transition-colors duration-200">
                                <i class="fas fa-file-pdf mr-2"></i>
                                <span class="text-sm font-medium">Lihat Dokumen</span>
                            </a>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}
            </div>

            <!-- Right Column - Timeline & Actions -->
            <div class="xl:col-span-1 space-y-6">
                <!-- Timeline Card -->
                <div class="bg-white rounded-xl shadow-lg border-2 border-green-100 p-6">
                    <div class="flex items-center space-x-3 mb-6">
                        <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center shadow-md">
                            <i class="fas fa-calendar-alt text-white text-xl"></i>
                        </div>
                        <h2 class="text-xl font-bold text-gray-900">Timeline</h2>
                    </div>
                    <div class="space-y-4">
                        <div class="flex items-start space-x-3">
                            <div class="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
                            <div class="flex-1">
                                <p class="text-sm font-semibold text-gray-900">Tanggal Pinjam</p>
                                <p class="text-xs text-gray-600">{{ peminjaman.tanggal_pinjam|date:"d M Y H:i" }}</p>
                            </div>
                        </div>
                        <div class="flex items-start space-x-3">
                            <div class="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
                            <div class="flex-1">
                                <p class="text-sm font-semibold text-gray-900">Tanggal Kembali Rencana</p>
                                <p class="text-xs text-gray-600">{{ peminjaman.tanggal_kembali_rencana|date:"d M Y H:i" }}</p>
                            </div>
                        </div>
                        {% if peminjaman.tanggal_kembali_aktual %}
                        <div class="flex items-start space-x-3">
                            <div class="w-2 h-2 bg-gray-500 rounded-full mt-2"></div>
                            <div class="flex-1">
                                <p class="text-sm font-semibold text-gray-900">Tanggal Kembali Aktual</p>
                                <p class="text-xs text-gray-600">{{ peminjaman.tanggal_kembali_aktual|date:"d M Y H:i" }}</p>
                            </div>
                        </div>
                        {% endif %}
                        <div class="flex items-start space-x-3">
                            <div class="w-2 h-2 bg-purple-500 rounded-full mt-2"></div>
                            <div class="flex-1">
                                <p class="text-sm font-semibold text-gray-900">Dibuat</p>
                                <p class="text-xs text-gray-600">{{ peminjaman.created_at|date:"d M Y H:i" }}</p>
                            </div>
                        </div>
                        {% if peminjaman.approved_by %}
                        <div class="flex items-start space-x-3">
                            <div class="w-2 h-2 bg-yellow-500 rounded-full mt-2"></div>
                            <div class="flex-1">
                                <p class="text-sm font-semibold text-gray-900">Disetujui Oleh</p>
                                <p class="text-xs text-gray-600">{{ peminjaman.approved_by.get_full_name|default:peminjaman.approved_by.username }}</p>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Actions Card -->
                {% if peminjaman.status == 'pending' %}
                <div class="bg-white rounded-xl shadow-lg border-2 border-green-100 p-6">
                    <div class="flex items-center space-x-3 mb-6">
                        <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center shadow-md">
                            <i class="fas fa-check-circle text-white text-xl"></i>
                        </div>
                        <h2 class="text-xl font-bold text-gray-900">Aksi</h2>
                    </div>
                    <div class="space-y-3">
                        <a href="{% url 'inventaris_admin:peminjaman_approve' peminjaman.pk %}" 
                           class="w-full inline-flex items-center justify-center px-4 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white text-sm font-medium rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                            <i class="fas fa-check mr-2"></i>
                            Setujui Peminjaman
                        </a>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}