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

{% block title %}Dashboard Inventaris - Admin Panel{% endblock %}
{% block page_title %}Dashboard Inventaris{% endblock %}

{% block content %}
<!-- Mobile-First Responsive Dashboard -->
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-4 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        <!-- Welcome Header -->
        <div class="mb-6 sm:mb-8">
            <div class="bg-gradient-to-r from-blue-600 to-blue-700 rounded-2xl p-6 sm:p-8 text-white relative overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-r from-white/10 to-transparent"></div>
                <div class="relative z-10">
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                        <div class="mb-4 sm:mb-0">
                            <h1 class="text-2xl sm:text-3xl font-bold mb-2">
                                Selamat Datang, {{ user.nama_lengkap|default:user.username }}!
                            </h1>
                            <p class="text-blue-100 text-sm sm:text-base">
                                Kelola inventaris organisasi HMI dengan mudah dan efisien
                            </p>
                        </div>
                        <div class="hidden sm:block">
                            <div class="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center">
                                <i class="fas fa-boxes text-3xl"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Decorative Elements -->
                <div class="absolute -top-4 -right-4 w-24 h-24 bg-white/10 rounded-full"></div>
                <div class="absolute -bottom-4 -left-4 w-16 h-16 bg-white/10 rounded-full"></div>
            </div>
        </div>

        <!-- Quick Stats -->
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 lg:gap-6 mb-6 sm:mb-8">
            <!-- Total Barang -->
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6 hover:shadow-xl transition-all duration-200 transform hover:-translate-y-1">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-boxes text-blue-600 text-lg"></i>
                        </div>
                    </div>
                    <div class="ml-3 flex-1 min-w-0">
                        <p class="text-xs sm:text-sm font-medium text-gray-500 truncate">Total Barang</p>
                        <p class="text-lg sm:text-xl font-bold text-gray-900">{{ total_barang|default:0 }}</p>
                        <p class="text-xs text-green-600 mt-1">
                            <i class="fas fa-arrow-up mr-1"></i>+12% dari bulan lalu
                        </p>
                    </div>
                </div>
            </div>

            <!-- Barang Aktif -->
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6 hover:shadow-xl transition-all duration-200 transform hover:-translate-y-1">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-check-circle text-green-600 text-lg"></i>
                        </div>
                    </div>
                    <div class="ml-3 flex-1 min-w-0">
                        <p class="text-xs sm:text-sm font-medium text-gray-500 truncate">Barang Aktif</p>
                        <p class="text-lg sm:text-xl font-bold text-gray-900">{{ barang_aktif|default:0 }}</p>
                        <p class="text-xs text-green-600 mt-1">
                            <i class="fas fa-check-circle mr-1"></i>Siap digunakan
                        </p>
                    </div>
                </div>
            </div>

            <!-- Barang Dipinjam -->
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6 hover:shadow-xl transition-all duration-200 transform hover:-translate-y-1">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-hand-paper text-yellow-600 text-lg"></i>
                        </div>
                    </div>
                    <div class="ml-3 flex-1 min-w-0">
                        <p class="text-xs sm:text-sm font-medium text-gray-500 truncate">Sedang Dipinjam</p>
                        <p class="text-lg sm:text-xl font-bold text-gray-900">{{ barang_dipinjam|default:0 }}</p>
                        <p class="text-xs text-yellow-600 mt-1">
                            <i class="fas fa-hand-paper mr-1"></i>Dalam penggunaan
                        </p>
                    </div>
                </div>
            </div>

            <!-- Barang Rusak -->
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6 hover:shadow-xl transition-all duration-200 transform hover:-translate-y-1">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-exclamation-triangle text-red-600 text-lg"></i>
                        </div>
                    </div>
                    <div class="ml-3 flex-1 min-w-0">
                        <p class="text-xs sm:text-sm font-medium text-gray-500 truncate">Perlu Perawatan</p>
                        <p class="text-lg sm:text-xl font-bold text-gray-900">{{ barang_rusak|default:0 }}</p>
                        <p class="text-xs text-red-600 mt-1">
                            <i class="fas fa-exclamation-triangle mr-1"></i>Memerlukan perhatian
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts and Analytics -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 mb-6 sm:mb-8">
            <!-- Inventory Overview Chart -->
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6">
                <div class="flex items-center justify-between mb-4 sm:mb-6">
                    <h3 class="text-lg font-semibold text-gray-900">
                        <i class="fas fa-chart-pie text-blue-600 mr-2"></i>
                        Overview Inventaris
                    </h3>
                    <div class="flex items-center space-x-2">
                        <button class="text-sm text-gray-500 hover:text-gray-700">Minggu ini</button>
                        <i class="fas fa-chevron-down text-gray-400"></i>
                    </div>
                </div>
                <div class="relative h-48 sm:h-64">
                    <canvas id="inventoryChart"></canvas>
                </div>
            </div>

            <!-- Recent Activities -->
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6">
                <div class="flex items-center justify-between mb-4 sm:mb-6">
                    <h3 class="text-lg font-semibold text-gray-900">
                        <i class="fas fa-clock text-blue-600 mr-2"></i>
                        Aktivitas Terbaru
                    </h3>
                    <a href="{% url 'inventaris_admin:peminjaman_list' %}" class="text-sm text-blue-600 hover:text-blue-700">Lihat semua</a>
                </div>
                <div class="space-y-3">
                    {% if recent_peminjaman %}
                        {% for peminjaman in recent_peminjaman %}
                            <div class="flex items-start space-x-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors duration-200">
                                <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-hand-paper text-blue-600 text-sm"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-medium text-gray-900 truncate">{{ peminjaman.barang.nama }}</p>
                                    <p class="text-sm text-gray-600">Dipinjam oleh {{ peminjaman.peminjam.nama_lengkap }}</p>
                                    <p class="text-xs text-gray-500 mt-1">{{ peminjaman.created_at|timesince }} yang lalu</p>
                                </div>
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium
                                    {% if peminjaman.status == 'pending' %}bg-yellow-100 text-yellow-800
                                    {% elif peminjaman.status == 'disetujui' %}bg-blue-100 text-blue-800
                                    {% elif peminjaman.status == 'dipinjam' %}bg-green-100 text-green-800
                                    {% else %}bg-gray-100 text-gray-800{% endif %}">
                                    {{ peminjaman.get_status_display }}
                                </span>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="text-center py-8">
                            <div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fas fa-inbox text-gray-400 text-xl"></i>
                            </div>
                            <p class="text-gray-500 text-sm">Belum ada aktivitas terbaru</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Status Summary -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6 mb-6 sm:mb-8">
            <!-- Peminjaman Status -->
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">
                    <i class="fas fa-handshake text-blue-600 mr-2"></i>
                    Status Peminjaman
                </h3>
                <div class="space-y-3">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-yellow-500 rounded-full mr-3"></div>
                            <span class="text-sm text-gray-600">Pending Approval</span>
                        </div>
                        <span class="text-sm font-semibold text-gray-900">{{ peminjaman_pending|default:0 }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
                            <span class="text-sm text-gray-600">Sedang Dipinjam</span>
                        </div>
                        <span class="text-sm font-semibold text-gray-900">{{ peminjaman_dipinjam|default:0 }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-red-500 rounded-full mr-3"></div>
                            <span class="text-sm text-gray-600">Terlambat</span>
                        </div>
                        <span class="text-sm font-semibold text-gray-900">{{ peminjaman_terlambat|default:0 }}</span>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">
                    <i class="fas fa-link text-blue-600 mr-2"></i>
                    Tautan Cepat
                </h3>
                <div class="space-y-3">
                    <a href="{% url 'inventaris_admin:barang_list' %}" 
                       class="flex items-center p-3 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors duration-200 group">
                        <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-boxes text-white text-sm"></i>
                        </div>
                        <span class="text-sm font-medium text-gray-900 group-hover:text-blue-700">Daftar Barang</span>
                    </a>
                    <a href="{% url 'inventaris_admin:peminjaman_list' %}" 
                       class="flex items-center p-3 bg-green-50 hover:bg-green-100 rounded-lg transition-colors duration-200 group">
                        <div class="w-8 h-8 bg-green-600 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-hand-holding text-white text-sm"></i>
                        </div>
                        <span class="text-sm font-medium text-gray-900 group-hover:text-green-700">Daftar Peminjaman</span>
                    </a>
                    <a href="{% url 'inventaris_admin:perawatan_list' %}" 
                       class="flex items-center p-3 bg-yellow-50 hover:bg-yellow-100 rounded-lg transition-colors duration-200 group">
                        <div class="w-8 h-8 bg-yellow-600 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-tools text-white text-sm"></i>
                        </div>
                        <span class="text-sm font-medium text-gray-900 group-hover:text-yellow-700">Daftar Perawatan</span>
                    </a>
                </div>
            </div>

            <!-- System Alerts -->
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">
                    <i class="fas fa-bell text-red-600 mr-2"></i>
                    Peringatan Sistem
                </h3>
                <div class="space-y-3">
                    {% if low_stock > 0 %}
                        <div class="flex items-start p-3 bg-red-50 rounded-lg">
                            <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-3 mt-0.5">
                                <i class="fas fa-exclamation-triangle text-red-600 text-sm"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium text-red-900">{{ low_stock }} barang rusak berat</p>
                                <p class="text-xs text-red-700 mt-1">Memerlukan perhatian segera</p>
                            </div>
                        </div>
                    {% endif %}
                    
                    {% if peminjaman_terlambat > 0 %}
                        <div class="flex items-start p-3 bg-yellow-50 rounded-lg">
                            <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center mr-3 mt-0.5">
                                <i class="fas fa-clock text-yellow-600 text-sm"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium text-yellow-900">{{ peminjaman_terlambat }} peminjaman terlambat</p>
                                <p class="text-xs text-yellow-700 mt-1">Perlu tindak lanjut</p>
                            </div>
                        </div>
                    {% endif %}
                    
                    {% if peminjaman_pending > 0 %}
                        <div class="flex items-start p-3 bg-blue-50 rounded-lg">
                            <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-0.5">
                                <i class="fas fa-clock text-blue-600 text-sm"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium text-blue-900">{{ peminjaman_pending }} peminjaman pending</p>
                                <p class="text-xs text-blue-700 mt-1">Menunggu persetujuan</p>
                            </div>
                        </div>
                    {% endif %}
                    
                    {% if not low_stock and not peminjaman_terlambat and not peminjaman_pending %}
                        <div class="flex items-center p-3 bg-green-50 rounded-lg">
                            <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-check-circle text-green-600 text-sm"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium text-green-900">Semua sistem normal</p>
                                <p class="text-xs text-green-700 mt-1">Tidak ada peringatan</p>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Navigation Grid -->
        <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4 sm:mb-6">
                <i class="fas fa-th-large text-blue-600 mr-2"></i>
                Menu Navigasi
            </h3>
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4">
                <a href="{% url 'inventaris_admin:barang_list' %}" 
                   class="flex flex-col items-center p-3 sm:p-4 bg-gray-50 hover:bg-blue-50 rounded-lg transition-colors duration-200 group">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-blue-100 group-hover:bg-blue-200 rounded-lg flex items-center justify-center mb-2 sm:mb-3 transition-colors duration-200">
                        <i class="fas fa-boxes text-blue-600 text-lg sm:text-xl"></i>
                    </div>
                    <span class="text-xs sm:text-sm font-medium text-gray-900 group-hover:text-blue-700 text-center">Kelola Barang</span>
                </a>
                
                <a href="{% url 'inventaris_admin:peminjaman_list' %}" 
                   class="flex flex-col items-center p-3 sm:p-4 bg-gray-50 hover:bg-green-50 rounded-lg transition-colors duration-200 group">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-green-100 group-hover:bg-green-200 rounded-lg flex items-center justify-center mb-2 sm:mb-3 transition-colors duration-200">
                        <i class="fas fa-hand-paper text-green-600 text-lg sm:text-xl"></i>
                    </div>
                    <span class="text-xs sm:text-sm font-medium text-gray-900 group-hover:text-green-700 text-center">Peminjaman</span>
                </a>
                
                <a href="{% url 'inventaris_admin:perawatan_list' %}" 
                   class="flex flex-col items-center p-3 sm:p-4 bg-gray-50 hover:bg-yellow-50 rounded-lg transition-colors duration-200 group">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-yellow-100 group-hover:bg-yellow-200 rounded-lg flex items-center justify-center mb-2 sm:mb-3 transition-colors duration-200">
                        <i class="fas fa-tools text-yellow-600 text-lg sm:text-xl"></i>
                    </div>
                    <span class="text-xs sm:text-sm font-medium text-gray-900 group-hover:text-yellow-700 text-center">Perawatan</span>
                </a>
                
                <a href="{% url 'inventaris_admin:kategori_list' %}" 
                   class="flex flex-col items-center p-3 sm:p-4 bg-gray-50 hover:bg-purple-50 rounded-lg transition-colors duration-200 group">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-purple-100 group-hover:bg-purple-200 rounded-lg flex items-center justify-center mb-2 sm:mb-3 transition-colors duration-200">
                        <i class="fas fa-folder text-purple-600 text-lg sm:text-xl"></i>
                    </div>
                    <span class="text-xs sm:text-sm font-medium text-gray-900 group-hover:text-purple-700 text-center">Kategori</span>
                </a>
                
                <a href="{% url 'inventaris_admin:lokasi_list' %}" 
                   class="flex flex-col items-center p-3 sm:p-4 bg-gray-50 hover:bg-red-50 rounded-lg transition-colors duration-200 group">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-red-100 group-hover:bg-red-200 rounded-lg flex items-center justify-center mb-2 sm:mb-3 transition-colors duration-200">
                        <i class="fas fa-map-marker-alt text-red-600 text-lg sm:text-xl"></i>
                    </div>
                    <span class="text-xs sm:text-sm font-medium text-gray-900 group-hover:text-red-700 text-center">Lokasi</span>
                </a>
                
                <a href="{% url 'inventaris_admin:reports_dashboard' %}" 
                   class="flex flex-col items-center p-3 sm:p-4 bg-gray-50 hover:bg-indigo-50 rounded-lg transition-colors duration-200 group">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-indigo-100 group-hover:bg-indigo-200 rounded-lg flex items-center justify-center mb-2 sm:mb-3 transition-colors duration-200">
                        <i class="fas fa-chart-bar text-indigo-600 text-lg sm:text-xl"></i>
                    </div>
                    <span class="text-xs sm:text-sm font-medium text-gray-900 group-hover:text-indigo-700 text-center">Laporan</span>
                </a>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Inventory Chart
    const ctx = document.getElementById('inventoryChart').getContext('2d');
    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Aktif', 'Dipinjam', 'Rusak', 'Nonaktif'],
            datasets: [{
                data: [{{ barang_aktif|default:0 }}, {{ barang_dipinjam|default:0 }}, {{ barang_rusak|default:0 }}, {{ barang_nonaktif|default:0 }}],
                backgroundColor: [
                    '#22c55e',
                    '#f59e0b', 
                    '#ef4444',
                    '#6b7280'
                ],
                borderWidth: 0,
                hoverOffset: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        padding: 20,
                        usePointStyle: true,
                        font: {
                            size: 12
                        }
                    }
                }
            },
            cutout: '60%'
        }
    });

    // Mobile-friendly interactions
    if ('ontouchstart' in window) {
        document.querySelectorAll('a, button').forEach(element => {
            element.addEventListener('touchstart', function() {
                this.style.transform = 'scale(0.98)';
            });
            element.addEventListener('touchend', function() {
                this.style.transform = 'scale(1)';
            });
        });
    }
});
</script>

<style>
/* Mobile-first responsive improvements */
@media (max-width: 640px) {
    .grid-cols-2 {
        gap: 0.75rem;
    }
    
    .p-4 {
        padding: 1rem;
    }
    
    .text-xs {
        font-size: 0.75rem;
    }
    
    .text-sm {
        font-size: 0.875rem;
    }
    
    .h-48 {
        height: 12rem;
    }
}

/* Enhanced hover effects */
.hover\:shadow-xl:hover {
}

/* Smooth transitions */
* {
    transition: all 0.2s ease;
}

/* Custom scrollbar for mobile */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 4px;
    }
    
    ::-webkit-scrollbar-track {
        background: #f1f5f9;
    }
    
    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 2px;
    }
}
</style>
{% endblock %}