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

{% block title %}Dashboard Inventaris - HMI Management System{% endblock %}
{% block page_title %}Dashboard Inventaris{% endblock %}
{% block page_subtitle %}Sistem Manajemen Inventaris HMI{% endblock %}

{% block content %}
<div class="space-y-4 sm:space-y-6 px-2 sm:px-0">
    <!-- Welcome Section -->
    <div class="inventory-gradient rounded-xl sm:rounded-2xl p-4 sm:p-6 text-white relative overflow-hidden border-2 border-white/20 shadow-xl">
        <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 items-start sm:items-center justify-between gap-4">
                <div class="flex-1">
                    <h1 class="text-lg sm:text-2xl font-bold">Selamat Datang, {{ user.nama_lengkap|default:user.username }}!</h1>
                </div>
                <div class="hidden sm:block">
                    <div class="w-16 h-16 sm:w-20 sm:h-20 bg-white/20 rounded-full flex items-center justify-center border-2 border-white/30">
                        <i class="fas fa-boxes text-2xl sm: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>

    <!-- Quick Stats -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6">
        <!-- Total Barang -->
        <div class="bg-white rounded-xl border-2 border-gray-200 shadow-md hover:shadow-xl transition-all duration-300 p-4 sm:p-6 hover:border-inventory-300">
            <div class="flex flex-col items-center sm:items-start gap-2">
                <p class="text-xs font-medium text-gray-600">Total</p>
                <p class="text-xl sm:text-3xl font-bold text-gray-900">{{ total_barang|default:0 }}</p>
                <div class="w-10 h-10 sm:w-14 sm:h-14 bg-inventory-100 rounded-lg flex items-center justify-center border-2 border-inventory-200">
                    <i class="fas fa-boxes text-inventory-600 text-base sm:text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Barang Aktif -->
        <div class="bg-white rounded-xl border-2 border-gray-200 shadow-md hover:shadow-xl transition-all duration-300 p-4 sm:p-6 hover:border-success-300">
            <div class="flex flex-col items-center sm:items-start gap-2">
                <p class="text-xs font-medium text-gray-600">Aktif</p>
                <p class="text-xl sm:text-3xl font-bold text-gray-900">{{ barang_aktif|default:0 }}</p>
                <div class="w-10 h-10 sm:w-14 sm:h-14 bg-success-100 rounded-lg flex items-center justify-center border-2 border-success-200">
                    <i class="fas fa-check-circle text-success-600 text-base sm:text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Barang Dipinjam -->
        <div class="bg-white rounded-xl border-2 border-gray-200 shadow-md hover:shadow-xl transition-all duration-300 p-4 sm:p-6 hover:border-warning-300">
            <div class="flex flex-col items-center sm:items-start gap-2">
                <p class="text-xs font-medium text-gray-600">Dipinjam</p>
                <p class="text-xl sm:text-3xl font-bold text-gray-900">{{ barang_dipinjam|default:0 }}</p>
                <div class="w-10 h-10 sm:w-14 sm:h-14 bg-warning-100 rounded-lg flex items-center justify-center border-2 border-warning-200">
                    <i class="fas fa-hand-paper text-warning-600 text-base sm:text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Barang Rusak -->
        <div class="bg-white rounded-xl border-2 border-gray-200 shadow-md hover:shadow-xl transition-all duration-300 p-4 sm:p-6 hover:border-danger-300">
            <div class="flex flex-col items-center sm:items-start gap-2">
                <p class="text-xs font-medium text-gray-600">Rusak</p>
                <p class="text-xl sm:text-3xl font-bold text-gray-900">{{ barang_rusak|default:0 }}</p>
                <div class="w-10 h-10 sm:w-14 sm:h-14 bg-danger-100 rounded-lg flex items-center justify-center border-2 border-danger-200">
                    <i class="fas fa-exclamation-triangle text-danger-600 text-base sm:text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts and Analytics -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
        <!-- Inventory Overview Chart -->
        <div class="bg-white rounded-xl border-2 border-gray-200 shadow-md hover:shadow-xl transition-all duration-300 p-4 sm:p-6">
            <div class="flex items-center justify-between mb-4 sm:mb-6">
                <h3 class="text-sm sm:text-lg font-semibold text-gray-900">
                    <i class="fas fa-chart-pie text-inventory-600 mr-2"></i>
                    Overview
                </h3>
            </div>
            <div class="relative h-48 sm:h-64">
                <canvas id="inventoryChart"></canvas>
            </div>
        </div>

        <!-- Recent Activities -->
        <div class="bg-white rounded-xl border-2 border-gray-200 shadow-md hover:shadow-xl transition-all duration-300 p-4 sm:p-6">
            <div class="flex items-center justify-between mb-4 sm:mb-6">
                <h3 class="text-sm sm:text-lg font-semibold text-gray-900">
                    <i class="fas fa-clock text-inventory-600 mr-2"></i>
                    Aktivitas
                </h3>
                <a href="#" class="text-xs text-inventory-600 hover:text-inventory-700">Semua</a>
            </div>
            <div class="space-y-2 sm:space-y-4 max-h-64 sm:max-h-96 overflow-y-auto">
                {% if recent_peminjaman %}
                    {% for peminjaman in recent_peminjaman %}
                        <div class="flex items-start space-x-2 p-2 bg-gray-50 rounded-lg border border-gray-200 hover:border-gray-300 transition-colors">
                            <div class="w-6 h-6 bg-inventory-100 rounded-full flex items-center justify-center flex-shrink-0 border border-inventory-200">
                                <i class="fas fa-hand-paper text-inventory-600 text-xs"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-xs font-medium text-gray-900 truncate">{{ peminjaman.barang.nama }}</p>
                                <p class="text-xs text-gray-500 truncate">{{ peminjaman.created_at|timesince }}</p>
                            </div>
                            <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium border
                                {% if peminjaman.status == 'pending' %}bg-warning-100 text-warning-800 border-warning-200
                                {% elif peminjaman.status == 'disetujui' %}bg-inventory-100 text-inventory-800 border-inventory-200
                                {% elif peminjaman.status == 'dipinjam' %}bg-success-100 text-success-800 border-success-200
                                {% else %}bg-gray-100 text-gray-800 border-gray-200{% endif %}">
                                {{ peminjaman.get_status_display|slice:":3" }}
                            </span>
                        </div>
                    {% endfor %}
                {% else %}
                    <div class="text-center py-6 border-2 border-dashed border-gray-200 rounded-lg">
                        <i class="fas fa-inbox text-2xl text-gray-300 mb-2"></i>
                        <p class="text-xs text-gray-500">Tidak ada</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Status Summary -->
    <div class="grid grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-6">
        <!-- Peminjaman Status -->
        <div class="bg-white rounded-xl border-2 border-gray-200 shadow-md hover:shadow-xl transition-all duration-300 p-3 sm:p-6">
            <h3 class="text-xs sm:text-lg font-semibold text-gray-900 mb-3 sm:mb-4 border-b border-gray-200 pb-2">
                <i class="fas fa-handshake text-inventory-600 mr-1"></i>
                Status
            </h3>
            <div class="space-y-2">
                <div class="flex items-center justify-between p-1.5 bg-gray-50 rounded-lg border border-gray-200">
                    <div class="flex items-center">
                        <div class="w-2 h-2 bg-warning-500 rounded-full mr-2"></div>
                        <span class="text-xs text-gray-600">Pending</span>
                    </div>
                    <span class="text-xs font-semibold text-gray-900 bg-white px-1.5 py-0.5 rounded border border-gray-200">{{ peminjaman_pending|default:0 }}</span>
                </div>
                <div class="flex items-center justify-between p-1.5 bg-gray-50 rounded-lg border border-gray-200">
                    <div class="flex items-center">
                        <div class="w-2 h-2 bg-success-500 rounded-full mr-2"></div>
                        <span class="text-xs text-gray-600">Aktif</span>
                    </div>
                    <span class="text-xs font-semibold text-gray-900 bg-white px-1.5 py-0.5 rounded border border-gray-200">{{ peminjaman_dipinjam|default:0 }}</span>
                </div>
                <div class="flex items-center justify-between p-1.5 bg-gray-50 rounded-lg border border-gray-200">
                    <div class="flex items-center">
                        <div class="w-2 h-2 bg-danger-500 rounded-full mr-2"></div>
                        <span class="text-xs text-gray-600">Terlambat</span>
                    </div>
                    <span class="text-xs font-semibold text-gray-900 bg-white px-1.5 py-0.5 rounded border border-gray-200">{{ peminjaman_terlambat|default:0 }}</span>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="bg-white rounded-xl border-2 border-gray-200 shadow-md hover:shadow-xl transition-all duration-300 p-3 sm:p-6">
            <h3 class="text-xs sm:text-lg font-semibold text-gray-900 mb-3 sm:mb-4 border-b border-gray-200 pb-2">
                <i class="fas fa-bolt text-inventory-600 mr-1"></i>
                Aksi
            </h3>
            <div class="space-y-1.5 sm:space-y-3">
                <a href="{% url 'inventaris:barang_create' %}" class="flex items-center p-2 bg-inventory-50 hover:bg-inventory-100 rounded-lg transition-all duration-300 group border border-inventory-200 hover:border-inventory-300">
                    <div class="w-6 h-6 bg-inventory-600 rounded-lg flex items-center justify-center mr-2 border border-inventory-700">
                        <i class="fas fa-plus text-white text-xs"></i>
                    </div>
                    <span class="text-xs font-medium text-gray-900 group-hover:text-inventory-700">Tambah</span>
                </a>
                <a href="{% url 'inventaris:peminjaman_create' %}" class="flex items-center p-2 bg-success-50 hover:bg-success-100 rounded-lg transition-all duration-300 group border border-success-200 hover:border-success-300">
                    <div class="w-6 h-6 bg-success-600 rounded-lg flex items-center justify-center mr-2 border border-success-700">
                        <i class="fas fa-hand-paper text-white text-xs"></i>
                    </div>
                    <span class="text-xs font-medium text-gray-900 group-hover:text-success-700">Pinjam</span>
                </a>
                <a href="{% url 'inventaris:perawatan_create' %}" class="flex items-center p-2 bg-warning-50 hover:bg-warning-100 rounded-lg transition-all duration-300 group border border-warning-200 hover:border-warning-300">
                    <div class="w-6 h-6 bg-warning-600 rounded-lg flex items-center justify-center mr-2 border border-warning-700">
                        <i class="fas fa-tools text-white text-xs"></i>
                    </div>
                    <span class="text-xs font-medium text-gray-900 group-hover:text-warning-700">Perawatan</span>
                </a>
            </div>
        </div>

        <!-- System Alerts -->
        <div class="bg-white rounded-xl border-2 border-gray-200 shadow-md hover:shadow-xl transition-all duration-300 p-3 sm:p-6 col-span-2 lg:col-span-1">
            <h3 class="text-xs sm:text-lg font-semibold text-gray-900 mb-3 sm:mb-4 border-b border-gray-200 pb-2">
                <i class="fas fa-bell text-inventory-600 mr-1"></i>
                Alert
            </h3>
            <div class="space-y-1.5 sm:space-y-3">
                {% if low_stock > 0 %}
                    <div class="flex items-start p-2 bg-danger-50 rounded-lg border border-danger-200">
                        <div class="w-6 h-6 bg-danger-100 rounded-full flex items-center justify-center mr-2 border border-danger-300">
                            <i class="fas fa-exclamation-triangle text-danger-600 text-xs"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-xs font-medium text-danger-900">{{ low_stock }} rusak</p>
                        </div>
                    </div>
                {% endif %}
                
                {% if peminjaman_terlambat > 0 %}
                    <div class="flex items-start p-2 bg-warning-50 rounded-lg border border-warning-200">
                        <div class="w-6 h-6 bg-warning-100 rounded-full flex items-center justify-center mr-2 border border-warning-300">
                            <i class="fas fa-clock text-warning-600 text-xs"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-xs font-medium text-warning-900">{{ peminjaman_terlambat }} terlambat</p>
                        </div>
                    </div>
                {% endif %}
                
                {% if peminjaman_pending > 0 %}
                    <div class="flex items-start p-2 bg-inventory-50 rounded-lg border border-inventory-200">
                        <div class="w-6 h-6 bg-inventory-100 rounded-full flex items-center justify-center mr-2 border border-inventory-300">
                            <i class="fas fa-clock text-inventory-600 text-xs"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-xs font-medium text-inventory-900">{{ peminjaman_pending }} pending</p>
                        </div>
                    </div>
                {% endif %}
                
                {% if not low_stock and not peminjaman_terlambat and not peminjaman_pending %}
                    <div class="flex items-center p-2 bg-success-50 rounded-lg border border-success-200">
                        <div class="w-6 h-6 bg-success-100 rounded-full flex items-center justify-center mr-2 border border-success-300">
                            <i class="fas fa-check-circle text-success-600 text-xs"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-xs font-medium text-success-900">Normal</p>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Navigation Grid -->
    <div class="bg-white rounded-xl border-2 border-gray-200 shadow-md hover:shadow-xl transition-all duration-300 p-3 sm:p-6">
        <h3 class="text-xs sm:text-lg font-semibold text-gray-900 mb-3 sm:mb-6 border-b border-gray-200 pb-2">
            <i class="fas fa-th-large text-inventory-600 mr-1"></i>
            Menu
        </h3>
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2 sm:gap-4">
            <a href="{% url 'inventaris:barang_list' %}" class="flex flex-col items-center p-2 sm:p-4 bg-gray-50 hover:bg-inventory-50 rounded-lg transition-all duration-300 group border-2 border-gray-200 hover:border-inventory-300 hover:shadow-md">
                <div class="w-8 h-8 sm:w-12 sm:h-12 bg-inventory-100 group-hover:bg-inventory-200 rounded-lg flex items-center justify-center mb-1 sm:mb-3 transition-colors border-2 border-inventory-200 group-hover:border-inventory-300">
                    <i class="fas fa-boxes text-inventory-600 text-sm sm:text-xl"></i>
                </div>
                <span class="text-xs font-medium text-gray-900 group-hover:text-inventory-700 text-center">Barang</span>
            </a>
            
            <a href="{% url 'inventaris:peminjaman_list' %}" class="flex flex-col items-center p-2 sm:p-4 bg-gray-50 hover:bg-success-50 rounded-lg transition-all duration-300 group border-2 border-gray-200 hover:border-success-300 hover:shadow-md">
                <div class="w-8 h-8 sm:w-12 sm:h-12 bg-success-100 group-hover:bg-success-200 rounded-lg flex items-center justify-center mb-1 sm:mb-3 transition-colors border-2 border-success-200 group-hover:border-success-300">
                    <i class="fas fa-hand-paper text-success-600 text-sm sm:text-xl"></i>
                </div>
                <span class="text-xs font-medium text-gray-900 group-hover:text-success-700 text-center">Pinjam</span>
            </a>
            
            <a href="{% url 'inventaris:perawatan_list' %}" class="flex flex-col items-center p-2 sm:p-4 bg-gray-50 hover:bg-warning-50 rounded-lg transition-all duration-300 group border-2 border-gray-200 hover:border-warning-300 hover:shadow-md">
                <div class="w-8 h-8 sm:w-12 sm:h-12 bg-warning-100 group-hover:bg-warning-200 rounded-lg flex items-center justify-center mb-1 sm:mb-3 transition-colors border-2 border-warning-200 group-hover:border-warning-300">
                    <i class="fas fa-tools text-warning-600 text-sm sm:text-xl"></i>
                </div>
                <span class="text-xs font-medium text-gray-900 group-hover:text-warning-700 text-center">Rawatan</span>
            </a>
            
            <a href="{% url 'inventaris:kategori_list' %}" class="flex flex-col items-center p-2 sm:p-4 bg-gray-50 hover:bg-purple-50 rounded-lg transition-all duration-300 group border-2 border-gray-200 hover:border-purple-300 hover:shadow-md">
                <div class="w-8 h-8 sm:w-12 sm:h-12 bg-purple-100 group-hover:bg-purple-200 rounded-lg flex items-center justify-center mb-1 sm:mb-3 transition-colors border-2 border-purple-200 group-hover:border-purple-300">
                    <i class="fas fa-folder text-purple-600 text-sm sm:text-xl"></i>
                </div>
                <span class="text-xs font-medium text-gray-900 group-hover:text-purple-700 text-center">Kategori</span>
            </a>
            
            <a href="{% url 'inventaris:lokasi_list' %}" class="flex flex-col items-center p-2 sm:p-4 bg-gray-50 hover:bg-red-50 rounded-lg transition-all duration-300 group border-2 border-gray-200 hover:border-red-300 hover:shadow-md">
                <div class="w-8 h-8 sm:w-12 sm:h-12 bg-red-100 group-hover:bg-red-200 rounded-lg flex items-center justify-center mb-1 sm:mb-3 transition-colors border-2 border-red-200 group-hover:border-red-300">
                    <i class="fas fa-map-marker-alt text-red-600 text-sm sm:text-xl"></i>
                </div>
                <span class="text-xs font-medium text-gray-900 group-hover:text-red-700 text-center">Lokasi</span>
            </a>
            
            <a href="{% url 'inventaris:reports_dashboard' %}" class="flex flex-col items-center p-2 sm:p-4 bg-gray-50 hover:bg-indigo-50 rounded-lg transition-all duration-300 group border-2 border-gray-200 hover:border-indigo-300 hover:shadow-md">
                <div class="w-8 h-8 sm:w-12 sm:h-12 bg-indigo-100 group-hover:bg-indigo-200 rounded-lg flex items-center justify-center mb-1 sm:mb-3 transition-colors border-2 border-indigo-200 group-hover:border-indigo-300">
                    <i class="fas fa-chart-bar text-indigo-600 text-sm sm:text-xl"></i>
                </div>
                <span class="text-xs font-medium text-gray-900 group-hover:text-indigo-700 text-center">Laporan</span>
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<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
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        padding: 20,
                        usePointStyle: true
                    }
                }
            }
        }
    });
});
</script>
{% endblock %}