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

{% block title %}Daftar Peminjaman - Inventaris HMI{% endblock %}
{% block page_title %}Daftar Peminjaman{% endblock %}
{% block page_subtitle %}Kelola peminjaman barang inventaris{% 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-7xl mx-auto space-y-6">
    <!-- Header Actions -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">Daftar Peminjaman</h1>
            <p class="mt-1 text-sm sm:text-base text-gray-600">Kelola dan monitoring peminjaman barang inventaris</p>
        </div>
        <div class="mt-4 sm:mt-0 flex space-x-3">
            <a href="{% url 'inventaris:peminjaman_create' %}" class="inline-flex items-center px-4 py-2 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-plus mr-2"></i>Ajukan Peminjaman
            </a>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 lg:gap-6">
        <div class="bg-gradient-to-br from-yellow-400 to-yellow-500 rounded-xl shadow-lg p-4 sm:p-6 hover:shadow-xl hover:scale-105 transition-all duration-200">
            <div class="flex items-center justify-between">
                <div class="flex-1 min-w-0">
                    <p class="text-xs sm:text-sm font-medium text-yellow-100 truncate">Pending Approval</p>
                    <p class="text-lg sm:text-xl lg:text-2xl font-bold text-white mt-2">{{ pending_count|default:0 }}</p>
                </div>
                <div class="w-10 h-10 sm:w-12 sm:h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center backdrop-blur-sm flex-shrink-0 ml-3">
                    <i class="fas fa-clock text-white text-lg sm:text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl shadow-lg p-4 sm:p-6 hover:shadow-xl hover:scale-105 transition-all duration-200">
            <div class="flex items-center justify-between">
                <div class="flex-1 min-w-0">
                    <p class="text-xs sm:text-sm font-medium text-green-100 truncate">Sedang Dipinjam</p>
                    <p class="text-lg sm:text-xl lg:text-2xl font-bold text-white mt-2">{{ aktif_count|default:0 }}</p>
                </div>
                <div class="w-10 h-10 sm:w-12 sm:h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center backdrop-blur-sm flex-shrink-0 ml-3">
                    <i class="fas fa-play-circle text-white text-lg sm:text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl shadow-lg p-4 sm:p-6 hover:shadow-xl hover:scale-105 transition-all duration-200">
            <div class="flex items-center justify-between">
                <div class="flex-1 min-w-0">
                    <p class="text-xs sm:text-sm font-medium text-emerald-100 truncate">Dikembalikan</p>
                    <p class="text-lg sm:text-xl lg:text-2xl font-bold text-white mt-2">{{ dikembalikan_count|default:0 }}</p>
                </div>
                <div class="w-10 h-10 sm:w-12 sm:h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center backdrop-blur-sm flex-shrink-0 ml-3">
                    <i class="fas fa-check-circle text-white text-lg sm:text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-br from-red-500 to-red-600 rounded-xl shadow-lg p-4 sm:p-6 hover:shadow-xl hover:scale-105 transition-all duration-200">
            <div class="flex items-center justify-between">
                <div class="flex-1 min-w-0">
                    <p class="text-xs sm:text-sm font-medium text-red-100 truncate">Terlambat</p>
                    <p class="text-lg sm:text-xl lg:text-2xl font-bold text-white mt-2">{{ terlambat_count|default:0 }}</p>
                </div>
                <div class="w-10 h-10 sm:w-12 sm:h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center backdrop-blur-sm flex-shrink-0 ml-3">
                    <i class="fas fa-exclamation-circle text-white text-lg sm:text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter & Pencarian Section -->
    <div class="bg-white rounded-xl shadow-lg border-2 border-green-100 overflow-hidden">
        <!-- Header -->
        <div class="bg-gradient-to-r from-green-500 to-green-600 px-4 sm:px-6 py-3 sm:py-4">
            <div class="flex items-center space-x-2">
                <i class="fas fa-filter text-white text-sm sm:text-base"></i>
                <h3 class="text-base sm:text-lg font-bold text-white">Filter & Pencarian</h3>
            </div>
        </div>

        <!-- Filter Form -->
        <form method="get" class="p-4 sm:p-6">
            <!-- First Row: Status, Cari Peminjam, Dari Tanggal, Sampai Tanggal -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
                <!-- Status -->
                <div>
                    <label for="status" class="block text-xs sm:text-sm font-medium text-gray-700 mb-2">
                        Status
                    </label>
                    <div class="filter-select-wrapper">
                        <select name="status" id="status" class="filter-select">
                            <option value="">Semua Status</option>
                            <option value="pending" {% if request.GET.status == 'pending' %}selected{% endif %}>Pending</option>
                            <option value="disetujui" {% if request.GET.status == 'disetujui' %}selected{% endif %}>Disetujui</option>
                            <option value="dipinjam" {% if request.GET.status == 'dipinjam' %}selected{% endif %}>Dipinjam</option>
                            <option value="dikembalikan" {% if request.GET.status == 'dikembalikan' %}selected{% endif %}>Dikembalikan</option>
                            <option value="ditolak" {% if request.GET.status == 'ditolak' %}selected{% endif %}>Ditolak</option>
                            <option value="terlambat" {% if request.GET.status == 'terlambat' %}selected{% endif %}>Terlambat</option>
                        </select>
                    </div>
                </div>

                <!-- Cari Peminjam -->
                <div>
                    <label for="nama_peminjam_search" class="block text-xs sm:text-sm font-medium text-gray-700 mb-2">
                        Cari Peminjam
                    </label>
                    <div class="filter-input-wrapper">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-search text-gray-400 text-sm"></i>
                        </div>
                        <input type="text" 
                               name="nama_peminjam_search" 
                               id="nama_peminjam_search" 
                               value="{{ request.GET.nama_peminjam_search }}" 
                               placeholder="Nama, username, atau email..." 
                               class="filter-input">
                    </div>
                </div>

                <!-- Dari Tanggal -->
                <div>
                    <label for="tanggal_dari" class="block text-xs sm:text-sm font-medium text-gray-700 mb-2">
                        Dari Tanggal
                    </label>
                    <div class="filter-input-wrapper">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-calendar-alt text-gray-400 text-sm"></i>
                        </div>
                        <input type="date" 
                               name="tanggal_dari" 
                               id="tanggal_dari" 
                               value="{{ request.GET.tanggal_dari }}" 
                               class="filter-input">
                    </div>
                </div>

                <!-- Sampai Tanggal -->
                <div>
                    <label for="tanggal_sampai" class="block text-xs sm:text-sm font-medium text-gray-700 mb-2">
                        Sampai Tanggal
                    </label>
                    <div class="filter-input-wrapper">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-calendar-alt text-gray-400 text-sm"></i>
                        </div>
                        <input type="date" 
                               name="tanggal_sampai" 
                               id="tanggal_sampai" 
                               value="{{ request.GET.tanggal_sampai }}" 
                               class="filter-input">
                    </div>
                </div>
            </div>

            <!-- Second Row: Action Buttons -->
            <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
                <button type="submit" 
                        class="flex-1 sm:flex-initial inline-flex items-center justify-center px-4 sm:px-6 py-2.5 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 transform hover:-translate-y-0.5">
                    <i class="fas fa-search mr-2"></i>
                    Filter
                </button>
                <a href="{% url 'inventaris:peminjaman_list' %}" 
                   class="flex-1 sm:flex-initial inline-flex items-center justify-center px-4 sm:px-6 py-2.5 bg-white border-2 border-gray-300 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 hover:border-gray-400 transition-all duration-200 shadow-sm">
                    <i class="fas fa-redo mr-2"></i>
                    Reset
                </a>
                <button type="button" 
                        onclick="exportData()"
                        class="flex-1 sm:flex-initial inline-flex items-center justify-center px-4 sm:px-6 py-2.5 bg-gradient-to-r from-green-500 to-green-600 text-white text-sm font-medium rounded-lg hover:from-green-600 hover:to-green-700 transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                    <i class="fas fa-download mr-2"></i>
                    Export
                </button>
            </div>
        </form>
    </div>

    <!-- Results Info & View Toggle -->
    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <p class="text-sm text-gray-600">
            Menampilkan {{ page_obj.start_index }}-{{ page_obj.end_index }} dari {{ page_obj.paginator.count }} peminjaman
        </p>
        <div class="flex items-center space-x-3">
            {% if request.GET.nama_peminjam_search %}
                <div class="flex items-center space-x-2">
                    <span class="text-sm text-gray-600">Filter aktif:</span>
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        Nama: "{{ request.GET.nama_peminjam_search }}"
                        <a href="?{% for key, value in request.GET.items %}{% if key != 'nama_peminjam_search' %}{{ key }}={{ value }}&{% endif %}{% endfor %}" class="ml-1.5 text-green-600 hover:text-green-800">
                            <i class="fas fa-times"></i>
                        </a>
                    </span>
                </div>
            {% endif %}
            <!-- View Toggle -->
            <div class="flex items-center bg-white border-2 border-green-200 rounded-lg p-1 shadow-sm">
                <button id="gridViewBtn" onclick="switchView('grid')" class="view-toggle-btn active px-3 py-2 rounded-md transition-all duration-200">
                    <i class="fas fa-th-large text-sm"></i>
                </button>
                <button id="listViewBtn" onclick="switchView('list')" class="view-toggle-btn px-3 py-2 rounded-md transition-all duration-200">
                    <i class="fas fa-list text-sm"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- Grid View -->
    <div id="gridView" class="view-container">
        {% if page_obj.object_list %}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
                {% for peminjaman in page_obj %}
                    <div class="bg-white rounded-xl shadow-lg border-2 border-green-100 overflow-hidden hover:shadow-xl hover:border-green-300 transition-all duration-200">
                        <div class="p-4 sm:p-6">
                            <!-- Header Card -->
                            <div class="flex items-start justify-between mb-4">
                                <div class="flex items-center space-x-3 flex-1 min-w-0">
                                    {% if peminjaman.barang.gambar %}
                                        <img class="h-12 w-12 sm:h-14 sm:w-14 rounded-lg object-cover shadow-md flex-shrink-0" src="{{ peminjaman.barang.gambar.url }}" alt="{{ peminjaman.barang.nama }}">
                                    {% else %}
                                        <div class="h-12 w-12 sm:h-14 sm:w-14 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center shadow-md flex-shrink-0">
                                            <i class="fas fa-box text-white text-base sm:text-lg"></i>
                                        </div>
                                    {% endif %}
                                    <div class="min-w-0 flex-1">
                                        <h3 class="text-sm sm:text-base font-bold text-gray-900 truncate">{{ peminjaman.barang.nama }}</h3>
                                        <p class="text-xs text-gray-600 truncate">{{ peminjaman.barang.kode_barang }}</p>
                                    </div>
                                </div>
                                <!-- Status Badge -->
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold shadow-sm ml-2 flex-shrink-0
                                    {% 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>

                            <!-- Peminjam Info -->
                            <div class="flex items-center space-x-3 mb-4 pb-4 border-b border-green-100">
                                <div class="h-10 w-10 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center shadow-md flex-shrink-0">
                                    <i class="fas fa-user text-white text-sm"></i>
                                </div>
                                <div class="min-w-0 flex-1">
                                    <p class="text-sm font-semibold text-gray-900 truncate">
                                        {% if peminjaman.peminjam.profil %}
                                            {{ peminjaman.peminjam.profil.nama_lengkap }}
                                        {% else %}
                                            {{ peminjaman.peminjam.get_full_name|default:peminjaman.peminjam.username }}
                                        {% endif %}
                                    </p>
                                    <p class="text-xs text-gray-600 truncate">{{ peminjaman.peminjam.email|default:"-" }}</p>
                                </div>
                            </div>

                            <!-- Date Info -->
                            <div class="space-y-2 mb-4">
                                <div class="flex items-center text-sm text-gray-700">
                                    <i class="fas fa-calendar text-green-600 mr-2 w-5"></i>
                                    <span class="font-medium">Pinjam:</span>
                                    <span class="ml-2">{{ peminjaman.tanggal_pinjam|date:"d M Y" }}</span>
                                </div>
                                <div class="flex items-center text-sm text-gray-700">
                                    <i class="fas fa-calendar-check text-green-600 mr-2 w-5"></i>
                                    <span class="font-medium">Kembali:</span>
                                    <span class="ml-2">{{ peminjaman.tanggal_kembali_rencana|date:"d M Y" }}</span>
                                    {% if peminjaman.is_terlambat %}
                                        <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-gradient-to-r from-red-500 to-red-600 text-white shadow-sm">
                                            <i class="fas fa-exclamation-triangle mr-1"></i>
                                            Terlambat
                                        </span>
                                    {% endif %}
                                </div>
                                <div class="flex items-center text-sm text-gray-700">
                                    <i class="fas fa-clock text-green-600 mr-2 w-5"></i>
                                    <span class="font-medium">Durasi:</span>
                                    <span data-duration-start="{{ peminjaman.tanggal_pinjam|date:'Y-m-d' }}" data-duration-end="{{ peminjaman.tanggal_kembali_rencana|date:'Y-m-d' }}" class="ml-2"></span>
                                </div>
                            </div>

                            <!-- Actions -->
                            <div class="flex items-center justify-end space-x-2 pt-4 border-t border-green-100">
                                <a href="{% url 'inventaris:peminjaman_detail' peminjaman.pk %}" 
                                   class="inline-flex items-center px-3 py-2 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100 transition-all duration-200 shadow-sm hover:shadow-md text-xs sm:text-sm font-medium">
                                    <i class="fas fa-eye mr-1"></i>
                                    Detail
                                </a>
                                {% if peminjaman.status == 'pending' %}
                                    <a href="{% url 'inventaris:peminjaman_approve' peminjaman.pk %}" 
                                       class="inline-flex items-center px-3 py-2 bg-green-50 text-green-700 rounded-lg hover:bg-green-100 transition-all duration-200 shadow-sm hover:shadow-md text-xs sm:text-sm font-medium">
                                        <i class="fas fa-check mr-1"></i>
                                        Setujui
                                    </a>
                                {% endif %}
                                <button onclick="deletePeminjaman({{ peminjaman.pk }}, '{{ peminjaman.barang.nama|escapejs }}')" 
                                        class="inline-flex items-center px-3 py-2 bg-red-50 text-red-700 rounded-lg hover:bg-red-100 transition-all duration-200 shadow-sm hover:shadow-md text-xs sm:text-sm font-medium">
                                    <i class="fas fa-trash mr-1"></i>
                                    Hapus
                                </button>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="text-center py-12 sm:py-16 bg-white rounded-xl shadow-lg border-2 border-green-100">
                <div class="w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-green-100 to-green-200 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
                    <i class="fas fa-hand-paper text-green-600 text-3xl sm:text-4xl"></i>
                </div>
                <h3 class="text-lg sm:text-xl font-bold text-gray-900 mb-2">Belum ada peminjaman</h3>
                <p class="text-gray-600 mb-6 text-sm sm:text-base">Ajukan peminjaman barang untuk memulai tracking</p>
                <a href="{% url 'inventaris:peminjaman_create' %}" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white text-sm sm:text-base 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-plus mr-2"></i>Ajukan Peminjaman Pertama
                </a>
            </div>
        {% endif %}
    </div>

    <!-- List View (Table) -->
    <div id="listView" class="view-container hidden">
        <div class="bg-white rounded-xl shadow-lg border-2 border-green-100 overflow-hidden">
        {% if page_obj.object_list %}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-green-100">
                    <thead class="bg-gradient-to-r from-green-500 to-green-600">
                        <tr>
                            <th scope="col" class="px-4 sm:px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">
                                Barang
                            </th>
                            <th scope="col" class="px-4 sm:px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">
                                Peminjam
                            </th>
                            <th scope="col" class="px-4 sm:px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">
                                Tanggal Pinjam
                            </th>
                            <th scope="col" class="px-4 sm:px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">
                                Tanggal Kembali
                            </th>
                            <th scope="col" class="px-4 sm:px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">
                                Status
                            </th>
                            <th scope="col" class="px-4 sm:px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">
                                Durasi
                            </th>
                            <th scope="col" class="px-4 sm:px-6 py-3 text-right text-xs font-bold text-white uppercase tracking-wider">
                                Aksi
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-green-100">
                        {% for peminjaman in page_obj %}
                            <tr class="hover:bg-green-50 transition-all duration-200 border-l-4 border-transparent hover:border-green-500">
                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        {% if peminjaman.barang.gambar %}
                                            <img class="h-10 w-10 sm:h-12 sm:w-12 rounded-lg object-cover mr-3 shadow-md" src="{{ peminjaman.barang.gambar.url }}" alt="{{ peminjaman.barang.nama }}">
                                        {% else %}
                                            <div class="h-10 w-10 sm:h-12 sm:w-12 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center mr-3 shadow-md">
                                                <i class="fas fa-box text-white text-sm"></i>
                                            </div>
                                        {% endif %}
                                        <div>
                                            <div class="text-sm font-semibold text-gray-900">{{ peminjaman.barang.nama }}</div>
                                            <div class="text-xs text-gray-600">{{ peminjaman.barang.kode_barang }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="h-8 w-8 sm:h-10 sm:w-10 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center mr-3 shadow-md">
                                            <i class="fas fa-user text-white text-xs sm:text-sm"></i>
                                        </div>
                                        <div>
                                            <div class="text-sm 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 %}
                                            </div>
                                            <div class="text-xs text-gray-600">{{ peminjaman.peminjam.email|default:"-" }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    <div class="flex items-center">
                                        <i class="fas fa-calendar text-green-600 mr-2"></i>
                                        <span class="font-medium">{{ peminjaman.tanggal_pinjam|date:"d M Y" }}</span>
                                    </div>
                                </td>
                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    <div class="flex items-center flex-wrap">
                                        <i class="fas fa-calendar-check text-green-600 mr-2"></i>
                                        <span class="font-medium">{{ peminjaman.tanggal_kembali_rencana|date:"d M Y" }}</span>
                                        {% if peminjaman.is_terlambat %}
                                            <span class="ml-2 inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-red-500 to-red-600 text-white shadow-sm">
                                                <i class="fas fa-exclamation-triangle mr-1"></i>
                                                Terlambat
                                            </span>
                                        {% endif %}
                                    </div>
                                </td>
                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs 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>
                                </td>
                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                                    <div class="flex items-center">
                                        <i class="fas fa-clock text-green-600 mr-1"></i>
                                        <span data-duration-start="{{ peminjaman.tanggal_pinjam|date:'Y-m-d' }}" data-duration-end="{{ peminjaman.tanggal_kembali_rencana|date:'Y-m-d' }}" class="font-medium"></span>
                                    </div>
                                </td>
                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <div class="flex items-center justify-end space-x-2">
                                        <a href="{% url 'inventaris:peminjaman_detail' peminjaman.pk %}" 
                                           class="text-blue-600 hover:text-blue-800 p-2 rounded-lg hover:bg-blue-50 transition-all duration-200 shadow-sm hover:shadow-md">
                                            <i class="fas fa-eye text-sm"></i>
                                        </a>
                                        {% if peminjaman.status == 'pending' %}
                                            <a href="{% url 'inventaris:peminjaman_approve' peminjaman.pk %}" 
                                               class="text-green-600 hover:text-green-800 p-2 rounded-lg hover:bg-green-50 transition-all duration-200 shadow-sm hover:shadow-md">
                                                <i class="fas fa-check text-sm"></i>
                                            </a>
                                        {% endif %}
                                        <button onclick="deletePeminjaman({{ peminjaman.pk }}, '{{ peminjaman.barang.nama|escapejs }}')" 
                                                class="text-red-600 hover:text-red-800 p-2 rounded-lg hover:bg-red-50 transition-all duration-200 shadow-sm hover:shadow-md">
                                            <i class="fas fa-trash text-sm"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="text-center py-12 sm:py-16">
                <div class="w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-green-100 to-green-200 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
                    <i class="fas fa-hand-paper text-green-600 text-3xl sm:text-4xl"></i>
                </div>
                <h3 class="text-lg sm:text-xl font-bold text-gray-900 mb-2">Belum ada peminjaman</h3>
                <p class="text-gray-600 mb-6 text-sm sm:text-base">Ajukan peminjaman barang untuk memulai tracking</p>
                <a href="{% url 'inventaris:peminjaman_create' %}" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white text-sm sm:text-base 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-plus mr-2"></i>Ajukan Peminjaman Pertama
                </a>
            </div>
        {% endif %}
        </div>
    </div>

    <!-- Pagination -->
    {% if page_obj.has_other_pages %}
        <div class="bg-white rounded-xl shadow-lg border-2 border-green-100 px-4 sm:px-6 py-4">
            <div class="flex items-center justify-between">
                <div class="flex-1 flex justify-between sm:hidden">
                    {% if page_obj.has_previous %}
                        <a href="?page={{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}" 
                           class="relative inline-flex items-center px-4 py-2 border-2 border-green-300 text-sm font-medium rounded-lg text-green-700 bg-white hover:bg-green-50 hover:border-green-400 transition-all duration-200 shadow-sm">
                            <i class="fas fa-chevron-left mr-2"></i>Sebelumnya
                        </a>
                    {% endif %}
                    {% if page_obj.has_next %}
                        <a href="?page={{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}" 
                           class="ml-3 relative inline-flex items-center px-4 py-2 border-2 border-green-300 text-sm font-medium rounded-lg text-green-700 bg-white hover:bg-green-50 hover:border-green-400 transition-all duration-200 shadow-sm">
                            Selanjutnya<i class="fas fa-chevron-right ml-2"></i>
                        </a>
                    {% endif %}
                </div>
                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm sm:text-base text-gray-700">
                            Menampilkan <span class="font-semibold text-green-700">{{ page_obj.start_index }}</span> sampai 
                            <span class="font-semibold text-green-700">{{ page_obj.end_index }}</span> dari 
                            <span class="font-semibold text-green-700">{{ page_obj.paginator.count }}</span> hasil
                        </p>
                    </div>
                    <div>
                        <nav class="relative z-0 inline-flex rounded-lg shadow-sm -space-x-px border-2 border-green-200 overflow-hidden" aria-label="Pagination">
                            {% if page_obj.has_previous %}
                                <a href="?page={{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}" 
                                   class="relative inline-flex items-center px-3 sm:px-4 py-2 border-r-2 border-green-200 bg-white text-sm font-medium text-green-700 hover:bg-green-50 transition-all duration-200">
                                    <i class="fas fa-chevron-left"></i>
                                </a>
                            {% endif %}
                            
                            {% for num in page_obj.paginator.page_range %}
                                {% if page_obj.number == num %}
                                    <span class="relative inline-flex items-center px-4 py-2 border-r-2 border-green-200 bg-gradient-to-r from-green-500 to-green-600 text-sm font-semibold text-white">
                                        {{ num }}
                                    </span>
                                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                    <a href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}" 
                                       class="relative inline-flex items-center px-4 py-2 border-r-2 border-green-200 bg-white text-sm font-medium text-gray-700 hover:bg-green-50 transition-all duration-200">
                                        {{ num }}
                                    </a>
                                {% endif %}
                            {% endfor %}
                            
                            {% if page_obj.has_next %}
                                <a href="?page={{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}" 
                                   class="relative inline-flex items-center px-3 sm:px-4 py-2 bg-white text-sm font-medium text-green-700 hover:bg-green-50 transition-all duration-200">
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                            {% endif %}
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50 flex items-center justify-center p-4">
    <div class="relative mx-auto w-full max-w-md bg-white rounded-xl shadow-2xl border-2 border-red-100 overflow-hidden">
        <div class="p-6 sm:p-8">
            <div class="text-center">
                <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-gradient-to-br from-red-100 to-red-200 mb-4">
                    <i class="fas fa-exclamation-triangle text-red-600 text-2xl"></i>
                </div>
                <h3 class="text-lg sm:text-xl font-bold text-gray-900 mb-3">Konfirmasi Hapus</h3>
                <div class="mb-6">
                    <p class="text-sm sm:text-base text-gray-600">
                        Apakah Anda yakin ingin menghapus peminjaman untuk barang <span id="peminjamanBarangName" class="font-semibold text-gray-900"></span>?
                    </p>
                    <p class="text-xs sm:text-sm text-red-600 mt-2 font-medium">Tindakan ini tidak dapat dibatalkan.</p>
                </div>
                <div class="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-3">
                    <button onclick="closeDeleteModal()" 
                            class="w-full sm:w-auto px-6 py-2.5 bg-gray-100 text-gray-800 text-sm sm:text-base font-medium rounded-lg shadow-sm hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 transition-all duration-200">
                        Batal
                    </button>
                    <form id="deleteForm" method="post" class="inline w-full sm:w-auto">
                        {% csrf_token %}
                        <button type="submit" 
                                class="w-full sm:w-auto px-6 py-2.5 bg-gradient-to-r from-red-600 to-red-700 text-white text-sm sm:text-base font-medium rounded-lg shadow-md hover:from-red-700 hover:to-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 transition-all duration-200 transform hover:-translate-y-0.5">
                            <i class="fas fa-trash mr-2"></i>Hapus
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
// View peminjaman function - redirect to detail page
function viewPeminjaman(id) {
    window.location.href = '{% url "inventaris:peminjaman_detail" 0 %}'.replace('0', id);
}

// Delete peminjaman function
function deletePeminjaman(id, barangNama) {
    const nameElement = document.getElementById('peminjamanBarangName');
    const formElement = document.getElementById('deleteForm');
    const modalElement = document.getElementById('deleteModal');
    
    if (nameElement && formElement && modalElement) {
        nameElement.textContent = barangNama;
        formElement.action = '{% url "inventaris:peminjaman_delete" 0 %}'.replace('0', id);
        modalElement.classList.remove('hidden');
    }
}

// Close delete modal
function closeDeleteModal() {
    const modalElement = document.getElementById('deleteModal');
    if (modalElement) {
        modalElement.classList.add('hidden');
    }
}

// Export data function
function exportData() {
    // In a real implementation, you'd generate and download a report
    showInfo('Fitur Export', 'Fitur export akan diimplementasikan. Data akan diekspor ke Excel/PDF.');
}

// View Toggle Function
function switchView(viewType) {
    const gridView = document.getElementById('gridView');
    const listView = document.getElementById('listView');
    const gridBtn = document.getElementById('gridViewBtn');
    const listBtn = document.getElementById('listViewBtn');
    
    if (viewType === 'grid') {
        gridView.classList.remove('hidden');
        listView.classList.add('hidden');
        gridBtn.classList.add('active');
        listBtn.classList.remove('active');
        localStorage.setItem('peminjamanView', 'grid');
    } else {
        gridView.classList.add('hidden');
        listView.classList.remove('hidden');
        gridBtn.classList.remove('active');
        listBtn.classList.add('active');
        localStorage.setItem('peminjamanView', 'list');
    }
}

// Load saved view preference and setup
document.addEventListener('DOMContentLoaded', function() {
    // Close modal when clicking outside
    const deleteModal = document.getElementById('deleteModal');
    if (deleteModal) {
        deleteModal.addEventListener('click', function(e) {
            if (e.target === this) {
                closeDeleteModal();
            }
        });
    }
    
    // Set initial state - grid view visible, list view hidden
    const gridView = document.getElementById('gridView');
    const listView = document.getElementById('listView');
    const gridBtn = document.getElementById('gridViewBtn');
    const listBtn = document.getElementById('listViewBtn');
    
    // Load saved preference or default to grid
    const savedView = localStorage.getItem('peminjamanView') || 'grid';
    
    if (savedView === 'list') {
        gridView.classList.add('hidden');
        listView.classList.remove('hidden');
        gridBtn.classList.remove('active');
        listBtn.classList.add('active');
    } else {
        gridView.classList.remove('hidden');
        listView.classList.add('hidden');
        gridBtn.classList.add('active');
        listBtn.classList.remove('active');
    }
    
    // Calculate and display duration for each peminjaman
    const durationElements = document.querySelectorAll('[data-duration-start]');
    durationElements.forEach(function(el) {
        const startDate = new Date(el.getAttribute('data-duration-start'));
        const endDate = new Date(el.getAttribute('data-duration-end'));
        const diffTime = Math.abs(endDate - startDate);
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
        el.textContent = diffDays + ' hari';
    });
});

// Auto-refresh notifications
setInterval(function() {
    // Check for new notifications every 30 seconds
    // In a real implementation, you'd fetch from an API endpoint
}, 30000);
</script>

<style>
/* Custom Filter Styles */
.filter-select-wrapper {
    position: relative;
}

.filter-select-wrapper::after {
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6b7280;
    font-size: 12px;
}

.filter-select {
    width: 100%;
    padding: 8px 32px 8px 40px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    background-color: white;
    font-size: 14px;
    color: #374151;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.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: 8px 12px 8px 40px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    background-color: white;
    font-size: 14px;
    color: #374151;
    transition: all 0.2s ease;
}

.filter-input::placeholder {
    color: #9ca3af;
}

.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;
}

/* Date input styling */
.filter-input[type="date"] {
    cursor: pointer;
}

.filter-input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0;
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .filter-select,
    .filter-input {
        padding: 10px 32px 10px 40px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .filter-select-wrapper::after {
        right: 16px;
    }
}

/* Smooth transitions */
.filter-select,
.filter-input {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Custom scrollbar for select dropdown */
.filter-select::-ms-expand {
    display: none;
}

/* Focus ring animation */
@keyframes filterFocus {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3);
    }
    100% {
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    }
}

.filter-select:focus,
.filter-input:focus {
    animation: filterFocus 0.3s ease;
}

/* View Toggle Button Styles */
.view-toggle-btn {
    color: #6b7280;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.view-toggle-btn:hover {
    color: #10b981;
    background-color: #f0fdf4;
}

.view-toggle-btn.active {
    color: #ffffff;
    background: linear-gradient(to right, #10b981, #059669);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.view-toggle-btn.active:hover {
    background: linear-gradient(to right, #059669, #047857);
}

/* View Container */
.view-container {
    transition: opacity 0.3s ease;
}

.view-container.hidden {
    display: none;
}

/* Grid View Animations */
#gridView .grid > div {
    animation: fadeInUp 0.4s ease forwards;
    opacity: 0;
}

#gridView .grid > div:nth-child(1) { animation-delay: 0.05s; }
#gridView .grid > div:nth-child(2) { animation-delay: 0.1s; }
#gridView .grid > div:nth-child(3) { animation-delay: 0.15s; }
#gridView .grid > div:nth-child(4) { animation-delay: 0.2s; }
#gridView .grid > div:nth-child(5) { animation-delay: 0.25s; }
#gridView .grid > div:nth-child(6) { animation-delay: 0.3s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments for toggle */
@media (max-width: 640px) {
    .view-toggle-btn {
        padding: 8px 12px;
    }
}
</style>
{% endblock %}