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

{% block title %}Detail Peminjaman - Inventaris HMI{% endblock %}
{% block page_title %}Detail Peminjaman{% endblock %}
{% block page_subtitle %}Informasi lengkap peminjaman barang{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-green-50 via-white to-green-50 py-4 px-4 sm:px-6 lg:px-8">
    <div class="max-w-5xl mx-auto space-y-6">
        <!-- Back Button -->
        <div>
            <a href="{% url 'inventaris: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 lg:grid-cols-3 gap-6">
            <!-- Left Column - Main Info -->
            <div class="lg: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.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">{{ peminjaman.peminjam.email|default:"-" }}</p>
                        </div>
                        <div class="bg-green-50 rounded-lg p-4">
                            <p class="text-xs font-medium text-gray-500 mb-1">Username</p>
                            <p class="text-base font-semibold text-gray-900">{{ peminjaman.peminjam.username }}</p>
                        </div>
                        {% if peminjaman.peminjam.profil and peminjaman.peminjam.profil.no_telepon %}
                        <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">{{ peminjaman.peminjam.profil.no_telepon }}</p>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Keperluan 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-4">
                        <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">Keperluan</h2>
                    </div>
                    <div class="bg-green-50 rounded-lg p-4">
                        <p class="text-sm text-gray-700 leading-relaxed">{{ peminjaman.keperluan|default:"Tidak ada keperluan yang disebutkan" }}</p>
                    </div>
                </div>
            </div>

            <!-- Right Column - Timeline & Actions -->
            <div class="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-4">
                            <div class="flex-shrink-0">
                                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                                    <i class="fas fa-calendar text-green-600"></i>
                                </div>
                            </div>
                            <div class="flex-1">
                                <p class="text-xs font-medium text-gray-500">Tanggal Pinjam</p>
                                <p class="text-sm font-semibold text-gray-900">{{ peminjaman.tanggal_pinjam|date:"d M Y" }}</p>
                                <p class="text-xs text-gray-600">{{ peminjaman.tanggal_pinjam|time:"H:i" }}</p>
                            </div>
                        </div>
                        <div class="flex items-start space-x-4">
                            <div class="flex-shrink-0">
                                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                                    <i class="fas fa-calendar-check text-blue-600"></i>
                                </div>
                            </div>
                            <div class="flex-1">
                                <p class="text-xs font-medium text-gray-500">Tanggal Kembali Rencana</p>
                                <p class="text-sm font-semibold text-gray-900">{{ peminjaman.tanggal_kembali_rencana|date:"d M Y" }}</p>
                                <p class="text-xs text-gray-600">{{ peminjaman.tanggal_kembali_rencana|time:"H:i" }}</p>
                            </div>
                        </div>
                        {% if peminjaman.tanggal_kembali_aktual %}
                        <div class="flex items-start space-x-4">
                            <div class="flex-shrink-0">
                                <div class="w-10 h-10 bg-emerald-100 rounded-full flex items-center justify-center">
                                    <i class="fas fa-check-circle text-emerald-600"></i>
                                </div>
                            </div>
                            <div class="flex-1">
                                <p class="text-xs font-medium text-gray-500">Tanggal Kembali Aktual</p>
                                <p class="text-sm font-semibold text-gray-900">{{ peminjaman.tanggal_kembali_aktual|date:"d M Y" }}</p>
                                <p class="text-xs text-gray-600">{{ peminjaman.tanggal_kembali_aktual|time:"H:i" }}</p>
                            </div>
                        </div>
                        {% endif %}
                        <div class="flex items-start space-x-4">
                            <div class="flex-shrink-0">
                                <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
                                    <i class="fas fa-clock text-purple-600"></i>
                                </div>
                            </div>
                            <div class="flex-1">
                                <p class="text-xs font-medium text-gray-500">Durasi</p>
                                <p class="text-sm font-semibold text-gray-900" id="duration-detail"></p>
                                {% if peminjaman.is_terlambat %}
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-700 mt-1">
                                        <i class="fas fa-exclamation-triangle mr-1"></i>
                                        Terlambat
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Actions Card -->
                <div class="bg-white rounded-xl shadow-lg border-2 border-green-100 p-6">
                    <h2 class="text-lg font-bold text-gray-900 mb-4">Aksi</h2>
                    <div class="space-y-3">
                        {% if peminjaman.status == 'pending' %}
                            <a href="{% url 'inventaris: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-md hover:shadow-lg">
                                <i class="fas fa-check mr-2"></i>
                                Setujui Peminjaman
                            </a>
                        {% endif %}
                        <button onclick="deletePeminjaman({{ peminjaman.pk }}, '{{ peminjaman.barang.nama }}')" 
                                class="w-full inline-flex items-center justify-center px-4 py-3 bg-gradient-to-r from-red-600 to-red-700 text-white text-sm font-medium rounded-lg hover:from-red-700 hover:to-red-800 transition-all duration-200 shadow-md hover:shadow-lg">
                            <i class="fas fa-trash mr-2"></i>
                            Hapus Peminjaman
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div x-data="{ open: false, peminjaman: null }" x-show="open" x-cloak 
     class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
     @delete-peminjaman.window="open = true; peminjaman = $event.detail">
    <div class="bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 p-6">
        <div class="text-center">
            <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-exclamation-triangle text-red-600 text-2xl"></i>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Konfirmasi Hapus</h3>
            <p class="text-gray-600 mb-6">
                Apakah Anda yakin ingin menghapus peminjaman untuk barang 
                <strong x-text="peminjaman?.barang_nama"></strong>?
            </p>
            <div class="flex justify-center space-x-3">
                <button @click="open = false" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors">
                    Batal
                </button>
                <button @click="confirmDelete()" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
                    <i class="fas fa-trash mr-2"></i>Hapus
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Calculate duration
document.addEventListener('DOMContentLoaded', function() {
    const startDate = new Date('{{ peminjaman.tanggal_pinjam|date:"Y-m-d" }}');
    const endDate = new Date('{{ peminjaman.tanggal_kembali_rencana|date:"Y-m-d" }}');
    const diffTime = Math.abs(endDate - startDate);
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    
    document.getElementById('duration-detail').textContent = diffDays + ' hari';
});

// Delete peminjaman function
function deletePeminjaman(id, barangNama) {
    const peminjaman = {
        id: id,
        barang_nama: barangNama
    };
    
    window.dispatchEvent(new CustomEvent('delete-peminjaman', {
        detail: peminjaman
    }));
}

// Confirm delete function
function confirmDelete() {
    // In a real implementation, you'd submit the delete form
    console.log('Delete confirmed');
    window.location.href = '{% url "inventaris:peminjaman_delete" peminjaman.pk %}';
}
</script>
{% endblock %}