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

{% block title %}Laporan Inventaris - HMI Website{% endblock %}
{% block page_title %}Laporan Inventaris{% endblock %}
{% block page_subtitle %}Kelola dan ekspor laporan inventaris{% endblock %}

{% block extra_css %}
<style>
    /* Custom Filter Styles */
    .filter-container {
        background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
        border: 2px solid #dcfce7;
        box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.1);
    }
    
    .filter-header {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 0.75rem 0.75rem 0 0;
        margin: -1.5rem -1.5rem 1.5rem -1.5rem;
    }
    
    .filter-select-wrapper {
        position: relative;
    }
    
    .filter-select {
        width: 100%;
        padding: 0.75rem 2.5rem 0.75rem 1rem;
        border: 2px solid #d1d5db;
        border-radius: 0.75rem;
        background-color: #ffffff;
        color: #111827;
        font-size: 0.875rem;
        transition: all 0.2s;
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2310b981' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.75rem center;
        background-repeat: no-repeat;
        background-size: 1.25rem;
    }
    
    .filter-select:focus {
        outline: none;
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    }
    
    .filter-select:hover {
        border-color: #9ca3af;
    }
    
    .filter-input-wrapper {
        position: relative;
    }
    
    .filter-input {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #d1d5db;
        border-radius: 0.75rem;
        background-color: #ffffff;
        color: #111827;
        font-size: 0.875rem;
        transition: all 0.2s;
    }
    
    .filter-input:focus {
        outline: none;
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    }
    
    .filter-input:hover {
        border-color: #9ca3af;
    }
    
    .filter-button {
        padding: 0.75rem 1.5rem;
        border-radius: 0.75rem;
        font-weight: 600;
        transition: all 0.2s;
        border: none;
        cursor: pointer;
    }
    
    .filter-button-primary {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3);
    }
    
    .filter-button-primary:hover {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        box-shadow: 0 6px 12px -2px rgba(16, 185, 129, 0.4);
        transform: translateY(-1px);
    }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-green-50 via-white to-green-50 py-2 sm:py-4 lg:py-6 px-2 sm:px-4 lg:px-8">
    <div class="max-w-7xl mx-auto space-y-3 sm:space-y-4 lg:space-y-6">
        <!-- Header -->
        <div class="bg-white rounded-2xl shadow-xl p-3 sm:p-4 lg:p-6 border-2 border-green-100">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
                <div class="flex-1">
                    <div class="flex items-center space-x-2 sm:space-x-3 mb-1 sm:mb-2">
                        <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-lg flex-shrink-0">
                            <i class="fas fa-chart-bar text-white text-base sm:text-lg lg:text-xl"></i>
                        </div>
                        <div class="min-w-0 flex-1">
                            <h1 class="text-lg sm:text-xl lg:text-2xl xl:text-3xl font-bold text-gray-900">Laporan Inventaris</h1>
                            <p class="text-xs sm:text-sm lg:text-base text-gray-600 mt-0.5 sm:mt-1">Kelola dan ekspor laporan inventaris</p>
                        </div>
                    </div>
                </div>
                
                <div class="flex flex-wrap items-center gap-2 sm:gap-3">
                    <button onclick="exportToExcel()" 
                            class="inline-flex items-center px-3 sm:px-4 py-2 bg-gradient-to-r from-green-500 to-green-600 text-white text-xs sm:text-sm font-semibold rounded-lg hover:from-green-600 hover:to-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 shadow-md hover:shadow-lg">
                        <i class="fas fa-file-excel mr-1.5 sm:mr-2"></i>
                        <span class="hidden sm:inline">Export Excel</span>
                        <span class="sm:hidden">Excel</span>
                    </button>
                    
                    <button onclick="exportToCSV()" 
                            class="inline-flex items-center px-3 sm:px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white text-xs sm:text-sm font-semibold rounded-lg hover:from-blue-600 hover:to-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-md hover:shadow-lg">
                        <i class="fas fa-file-csv mr-1.5 sm:mr-2"></i>
                        <span class="hidden sm:inline">Export CSV</span>
                        <span class="sm:hidden">CSV</span>
                    </button>
                    
                    <button onclick="exportToPDF()" 
                            class="inline-flex items-center px-3 sm:px-4 py-2 bg-gradient-to-r from-red-500 to-red-600 text-white text-xs sm:text-sm font-semibold rounded-lg hover:from-red-600 hover:to-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all duration-200 shadow-md hover:shadow-lg">
                        <i class="fas fa-file-pdf mr-1.5 sm:mr-2"></i>
                        <span class="hidden sm:inline">Export PDF</span>
                        <span class="sm:hidden">PDF</span>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Filter Options -->
        <div class="filter-container rounded-2xl shadow-xl p-3 sm:p-4 lg:p-6">
            <div class="filter-header">
                <h3 class="text-base sm:text-lg font-bold flex items-center">
                    <i class="fas fa-filter mr-2"></i>
                    Filter Laporan
                </h3>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4">
                <div>
                    <label for="filter-lokasi" class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">
                        <i class="fas fa-map-marker-alt text-green-600 mr-1"></i>Lokasi
                    </label>
                    <div class="filter-select-wrapper">
                        <select id="filter-lokasi" class="filter-select">
                            <option value="">Semua Lokasi</option>
                            <option value="gudang">Gudang</option>
                            <option value="kantor">Kantor</option>
                            <option value="lapangan">Lapangan</option>
                        </select>
                    </div>
                </div>
                
                <div>
                    <label for="filter-status" class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">
                        <i class="fas fa-info-circle text-green-600 mr-1"></i>Status
                    </label>
                    <div class="filter-select-wrapper">
                        <select id="filter-status" class="filter-select">
                            <option value="">Semua Status</option>
                            <option value="baik">Baik</option>
                            <option value="rusak">Rusak</option>
                            <option value="hilang">Hilang</option>
                        </select>
                    </div>
                </div>
                
                <div>
                    <label for="filter-tanggal" class="block text-xs sm:text-sm font-semibold text-gray-700 mb-1.5 sm:mb-2">
                        <i class="fas fa-calendar-alt text-green-600 mr-1"></i>Periode
                    </label>
                    <div class="filter-input-wrapper">
                        <input type="date" id="filter-tanggal" class="filter-input">
                    </div>
                </div>
            </div>
            
            <div class="mt-3 sm:mt-4">
                <button onclick="applyFilter()" 
                        class="filter-button filter-button-primary inline-flex items-center">
                    <i class="fas fa-filter mr-2"></i>
                    Terapkan Filter
                </button>
            </div>
        </div>
        
        <!-- Report Summary -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 lg:gap-6">
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-5 lg:p-6 border-2 border-gray-200 hover:border-blue-300 transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-boxes text-white text-lg sm:text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-3 sm:ml-4 flex-1 min-w-0">
                        <p class="text-xs sm:text-sm font-medium text-gray-500">Total Barang</p>
                        <p class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 mt-0.5">{{ total_barang_count }}</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-5 lg:p-6 border-2 border-gray-200 hover:border-green-300 transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-check-circle text-white text-lg sm:text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-3 sm:ml-4 flex-1 min-w-0">
                        <p class="text-xs sm:text-sm font-medium text-gray-500">Kondisi Baik</p>
                        <p class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 mt-0.5">
                            {% for item in total_barang_per_kondisi %}
                                {% if item.kondisi__nama == 'Baik' %}{{ item.count }}{% endif %}
                            {% empty %}0{% endfor %}
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-5 lg:p-6 border-2 border-gray-200 hover:border-yellow-300 transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-exclamation-triangle text-white text-lg sm:text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-3 sm:ml-4 flex-1 min-w-0">
                        <p class="text-xs sm:text-sm font-medium text-gray-500">Perlu Perbaikan</p>
                        <p class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 mt-0.5">
                            {% for item in total_barang_per_kondisi %}
                                {% if item.kondisi__nama == 'Cukup Baik' or item.kondisi__nama == 'Rusak Ringan' %}
                                    {% if forloop.first %}{{ item.count|add:0 }}{% else %}{{ item.count|add:0 }}{% endif %}
                                {% endif %}
                            {% empty %}0{% endfor %}
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-5 lg:p-6 border-2 border-gray-200 hover:border-red-300 transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-times-circle text-white text-lg sm:text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-3 sm:ml-4 flex-1 min-w-0">
                        <p class="text-xs sm:text-sm font-medium text-gray-500">Rusak/Hilang</p>
                        <p class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 mt-0.5">
                            {% for item in total_barang_per_kondisi %}
                                {% if item.kondisi__nama == 'Rusak Berat' or item.kondisi__nama == 'Hilang' %}
                                    {% if forloop.first %}{{ item.count|add:0 }}{% else %}{{ item.count|add:0 }}{% endif %}
                                {% endif %}
                            {% empty %}0{% endfor %}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Charts Section -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-4 lg:gap-6">
            <!-- Chart by Category -->
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-5 lg:p-6 border-2 border-gray-200">
                <h4 class="text-base sm:text-lg font-bold text-gray-900 mb-3 sm:mb-4 flex items-center">
                    <div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center mr-2 sm:mr-3 shadow-md">
                        <i class="fas fa-chart-pie text-white text-sm sm:text-base"></i>
                    </div>
                    Distribusi per Kategori
                </h4>
                <div class="space-y-2.5 sm:space-y-3">
                    {% for item in total_barang_per_kategori %}
                    <div class="flex items-center justify-between">
                        <span class="text-xs sm:text-sm text-gray-600 truncate flex-1 min-w-0 mr-2">{{ item.kategori__nama }}</span>
                        <div class="flex items-center space-x-2 flex-shrink-0">
                            <div class="w-24 sm:w-32 bg-gray-200 rounded-full h-2">
                                <div class="bg-gradient-to-r from-blue-500 to-blue-600 h-2 rounded-full" style="width: {% widthratio item.count total_barang_per_kategori.0.count 100 %}%"></div>
                            </div>
                            <span class="text-xs sm:text-sm font-semibold text-gray-900 min-w-[2rem] text-right">{{ item.count }}</span>
                        </div>
                    </div>
                    {% empty %}
                    <p class="text-xs sm:text-sm text-gray-500 text-center py-4">Tidak ada data kategori</p>
                    {% endfor %}
                </div>
            </div>
            
            <!-- Chart by Location -->
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-5 lg:p-6 border-2 border-gray-200">
                <h4 class="text-base sm:text-lg font-bold text-gray-900 mb-3 sm:mb-4 flex items-center">
                    <div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center mr-2 sm:mr-3 shadow-md">
                        <i class="fas fa-map-marked-alt text-white text-sm sm:text-base"></i>
                    </div>
                    Distribusi per Lokasi
                </h4>
                <div class="space-y-2.5 sm:space-y-3">
                    {% for item in total_barang_per_lokasi %}
                    <div class="flex items-center justify-between">
                        <span class="text-xs sm:text-sm text-gray-600 truncate flex-1 min-w-0 mr-2">{{ item.lokasi__nama }}</span>
                        <div class="flex items-center space-x-2 flex-shrink-0">
                            <div class="w-24 sm:w-32 bg-gray-200 rounded-full h-2">
                                <div class="bg-gradient-to-r from-green-500 to-green-600 h-2 rounded-full" style="width: {% widthratio item.count total_barang_per_lokasi.0.count 100 %}%"></div>
                            </div>
                            <span class="text-xs sm:text-sm font-semibold text-gray-900 min-w-[2rem] text-right">{{ item.count }}</span>
                        </div>
                    </div>
                    {% empty %}
                    <p class="text-xs sm:text-sm text-gray-500 text-center py-4">Tidak ada data lokasi</p>
                    {% endfor %}
                </div>
            </div>
        </div>
        
        <!-- Condition Summary -->
        <div class="bg-white rounded-xl shadow-lg p-4 sm:p-5 lg:p-6 border-2 border-gray-200">
            <h4 class="text-base sm:text-lg font-bold text-gray-900 mb-3 sm:mb-4 flex items-center">
                <div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center mr-2 sm:mr-3 shadow-md">
                    <i class="fas fa-clipboard-check text-white text-sm sm:text-base"></i>
                </div>
                Ringkasan Kondisi Barang
            </h4>
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4">
                {% for item in total_barang_per_kondisi %}
                <div class="text-center p-2 sm:p-3 bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl border border-gray-200 hover:shadow-md transition-all duration-200">
                    <div class="inline-flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full {% if item.kondisi__nama == 'Baik' %}bg-green-100 text-green-600{% elif item.kondisi__nama == 'Cukup Baik' %}bg-yellow-100 text-yellow-600{% elif item.kondisi__nama == 'Rusak Ringan' %}bg-orange-100 text-orange-600{% elif item.kondisi__nama == 'Rusak Berat' %}bg-red-100 text-red-600{% elif item.kondisi__nama == 'Hilang' %}bg-gray-100 text-gray-600{% else %}bg-blue-100 text-blue-600{% endif %} mb-2 shadow-sm">
                        <i class="fas fa-box text-sm sm:text-base"></i>
                    </div>
                    <p class="text-base sm:text-lg lg:text-xl font-bold text-gray-900">{{ item.count }}</p>
                    <p class="text-xs sm:text-sm text-gray-500 mt-0.5 line-clamp-2">{{ item.kondisi__nama }}</p>
                </div>
                {% empty %}
                <div class="col-span-full text-center py-6 sm:py-8">
                    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-inbox text-gray-400 text-2xl"></i>
                    </div>
                    <p class="text-xs sm:text-sm text-gray-500">Tidak ada data kondisi</p>
                </div>
                {% endfor %}
            </div>
        </div>
        
        <!-- Recent Items Table -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-gray-200">
            <div class="px-3 sm:px-4 lg:px-6 py-3 sm:py-4 border-b-2 border-gray-200 bg-gradient-to-r from-gray-50 to-gray-100">
                <h4 class="text-base sm:text-lg font-bold text-gray-900 flex items-center">
                    <div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-lg flex items-center justify-center mr-2 sm:mr-3 shadow-md">
                        <i class="fas fa-list text-white text-sm sm:text-base"></i>
                    </div>
                    Barang Terbaru
                </h4>
            </div>
            
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gradient-to-r from-green-50 to-emerald-50">
                        <tr>
                            <th class="px-3 sm:px-4 lg:px-6 py-2 sm:py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                                Kode
                            </th>
                            <th class="px-3 sm:px-4 lg:px-6 py-2 sm:py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                                Nama Barang
                            </th>
                            <th class="px-3 sm:px-4 lg:px-6 py-2 sm:py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider hidden sm:table-cell">
                                Kategori
                            </th>
                            <th class="px-3 sm:px-4 lg:px-6 py-2 sm:py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider hidden md:table-cell">
                                Lokasi
                            </th>
                            <th class="px-3 sm:px-4 lg:px-6 py-2 sm:py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                                Kondisi
                            </th>
                            <th class="px-3 sm:px-4 lg:px-6 py-2 sm:py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider hidden lg:table-cell">
                                Tanggal
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for barang in recent_barang %}
                        <tr class="hover:bg-green-50 transition-colors duration-200">
                            <td class="px-3 sm:px-4 lg:px-6 py-2 sm:py-3 whitespace-nowrap text-xs sm:text-sm font-semibold text-gray-900">
                                {{ barang.kode_barang }}
                            </td>
                            <td class="px-3 sm:px-4 lg:px-6 py-2 sm:py-3 whitespace-nowrap text-xs sm:text-sm text-gray-900">
                                {{ barang.nama|truncatechars:30 }}
                            </td>
                            <td class="px-3 sm:px-4 lg:px-6 py-2 sm:py-3 whitespace-nowrap text-xs sm:text-sm text-gray-500 hidden sm:table-cell">
                                {{ barang.kategori.nama }}
                            </td>
                            <td class="px-3 sm:px-4 lg:px-6 py-2 sm:py-3 whitespace-nowrap text-xs sm:text-sm text-gray-500 hidden md:table-cell">
                                {{ barang.lokasi.nama }}
                            </td>
                            <td class="px-3 sm:px-4 lg:px-6 py-2 sm:py-3 whitespace-nowrap">
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold 
                                    {% if barang.kondisi.nama == 'Baik' %}bg-green-100 text-green-800
                                    {% elif barang.kondisi.nama == 'Cukup Baik' %}bg-yellow-100 text-yellow-800
                                    {% elif barang.kondisi.nama == 'Rusak Ringan' %}bg-orange-100 text-orange-800
                                    {% elif barang.kondisi.nama == 'Rusak Berat' %}bg-red-100 text-red-800
                                    {% elif barang.kondisi.nama == 'Hilang' %}bg-gray-100 text-gray-800
                                    {% else %}bg-blue-100 text-blue-800{% endif %}">
                                    {{ barang.kondisi.nama }}
                                </span>
                            </td>
                            <td class="px-3 sm:px-4 lg:px-6 py-2 sm:py-3 whitespace-nowrap text-xs sm:text-sm text-gray-500 hidden lg:table-cell">
                                {{ barang.tanggal_masuk|date:"d M Y" }}
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="6" class="px-3 sm:px-4 lg:px-6 py-6 sm:py-8 text-center">
                                <div class="flex flex-col items-center">
                                    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-3">
                                        <i class="fas fa-inbox text-gray-400 text-2xl"></i>
                                    </div>
                                    <p class="text-xs sm:text-sm text-gray-500">Tidak ada data barang</p>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            
            {% if recent_barang %}
            <div class="px-3 sm:px-4 lg:px-6 py-3 bg-gradient-to-r from-gray-50 to-gray-100 border-t-2 border-gray-200">
                <div class="text-center">
                    <a href="{% url 'inventaris:barang_list' %}" class="inline-flex items-center text-xs sm:text-sm font-semibold text-green-600 hover:text-green-700 transition-colors">
                        <span>Lihat semua barang</span>
                        <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function applyFilter() {
        const lokasi = document.getElementById('filter-lokasi').value;
        const status = document.getElementById('filter-status').value;
        const tanggal = document.getElementById('filter-tanggal').value;
        
        // Apply filter logic here
        console.log('Filter applied:', { lokasi, status, tanggal });
        showInfo('Filter Diterapkan', 'Filter laporan telah diterapkan. Fitur ini akan segera diimplementasikan.');
    }
    
    function exportToExcel() {
        // Export to Excel logic
        showInfo('Export Excel', 'Fitur export ke Excel akan segera diimplementasikan.');
        // window.location.href = '{% url "inventaris:export_barang" %}?format=excel';
    }
    
    function exportToCSV() {
        // Export to CSV logic
        showInfo('Export CSV', 'Fitur export ke CSV akan segera diimplementasikan.');
        // window.location.href = '{% url "inventaris:export_barang" %}?format=csv';
    }
    
    function exportToPDF() {
        // Export to PDF logic
        showInfo('Export PDF', 'Fitur export ke PDF akan segera diimplementasikan.');
        // window.location.href = '{% url "inventaris:export_barang" %}?format=pdf';
    }
</script>
{% endblock %}