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

{% block title %}Ajukan Peminjaman - Inventaris HMI{% endblock %}
{% block page_title %}Ajukan Peminjaman{% endblock %}
{% block page_subtitle %}Formulir pengajuan peminjaman barang{% 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 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-xl shadow-lg border-2 border-green-100 p-3 sm:p-4 lg:p-6">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-2 sm:gap-3 lg:gap-4">
            <div class="flex-1">
                <h1 class="text-lg sm:text-xl lg:text-2xl xl:text-3xl font-bold text-gray-900">Ajukan Peminjaman Barang</h1>
                <p class="mt-1 sm:mt-2 text-xs sm:text-sm lg:text-base text-gray-600">Formulir pengajuan peminjaman untuk non-anggota HMI</p>
            </div>
            <div class="flex flex-col sm:flex-row gap-1.5 sm:gap-2 lg:gap-3">
                <a href="{% url 'inventaris:peminjaman_list' %}" class="inline-flex items-center justify-center px-3 sm:px-4 py-2 bg-white border-2 border-gray-300 text-gray-700 text-xs sm:text-sm font-medium rounded-lg hover:bg-gray-50 transition-all duration-200 shadow-sm">
                    <i class="fas fa-arrow-left mr-1.5 sm:mr-2"></i>Kembali
                </a>
            </div>
        </div>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-xl shadow-lg border-2 border-green-100 overflow-hidden">
        <div class="bg-gradient-to-r from-green-500 to-green-600 px-3 sm:px-4 lg:px-8 py-3 sm:py-4 lg:py-6">
            <h3 class="text-sm sm:text-base lg:text-lg font-bold text-white">
                <i class="fas fa-hand-paper mr-1.5 sm:mr-2"></i>
                Formulir Peminjaman Barang
            </h3>
        </div>

        <form method="post" enctype="multipart/form-data" class="px-3 sm:px-4 lg:px-8 py-3 sm:py-4 lg:py-6 space-y-4 sm:space-y-5 lg:space-y-8">
            {% csrf_token %}
            {{ form.is_non_anggota }}
            {{ form.barang }}

            <!-- Barang Section -->
            <div>
                <h4 class="text-sm sm:text-base lg:text-md font-semibold text-gray-900 mb-2 sm:mb-3 lg: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 flex-shrink-0">
                        <i class="fas fa-box text-white text-xs sm:text-sm"></i>
                    </div>
                    Pilih Barang
                </h4>
                <div class="w-full">
                    <label for="barang_search" class="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
                        Cari Barang <span class="text-red-500">*</span>
                        </label>
                    <div class="relative w-full">
                        <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" 
                               id="barang_search" 
                               name="barang_search"
                               placeholder="Ketik nama atau kode barang untuk mencari..." 
                               class="w-full pl-10 pr-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white text-gray-900 placeholder-gray-400">
                    </div>
                    <p class="mt-2 text-xs text-gray-500">Ketik minimal 2 karakter untuk mencari barang</p>
                    
                    <!-- Search Results -->
                    <div id="barang-search-results" class="relative z-20 w-full mt-2 bg-white border-2 border-green-200 rounded-lg shadow-xl hidden max-h-80 overflow-y-auto">
                        <div id="barang-search-loading" class="hidden p-3 text-center">
                            <div class="inline-block animate-spin rounded-full h-5 w-5 border-b-2 border-green-600"></div>
                            <span class="ml-2 text-sm text-gray-600">Mencari barang...</span>
                        </div>
                        <div id="barang-search-empty" class="hidden p-3 text-center text-gray-500 text-sm">
                            <i class="fas fa-search text-gray-400 mb-1 text-base"></i>
                            <p class="mt-1">Tidak ada barang yang ditemukan</p>
                        </div>
                        <div id="barang-search-list"></div>
                    </div>
                        
                            {% if form.barang.errors %}
                                <p class="mt-2 text-sm text-red-600">{{ form.barang.errors.0 }}</p>
                            {% endif %}
                        
                        <!-- Selected Barang Info -->
                        <div id="barang-info" class="mt-4 p-4 bg-gradient-to-br from-green-50 to-green-100 rounded-lg border-2 border-green-200 hidden">
                            <div class="flex items-start space-x-4">
                                <div class="w-16 h-16 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-xl"></i>
                                </div>
                                <div class="flex-1">
                                    <p class="text-base font-bold text-gray-900" id="barang-nama"></p>
                                    <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                                        <div class="bg-white rounded-lg p-2">
                                            <span class="text-gray-500">Kode:</span>
                                            <span class="font-semibold text-gray-900 ml-2" id="barang-kode"></span>
                                        </div>
                                        <div class="bg-white rounded-lg p-2">
                                            <span class="text-gray-500">Kondisi:</span>
                                            <span class="font-semibold text-gray-900 ml-2" id="barang-kondisi"></span>
                                        </div>
                                        <div class="bg-white rounded-lg p-2">
                                            <span class="text-gray-500">Lokasi:</span>
                                            <span class="font-semibold text-gray-900 ml-2" id="barang-lokasi"></span>
                                        </div>
                                        <div class="bg-white rounded-lg p-2">
                                            <span class="text-gray-500">Status:</span>
                                            <span class="font-semibold text-green-600 ml-2" id="barang-status"></span>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" onclick="clearBarangSelection()" class="text-gray-400 hover:text-red-600 transition-colors">
                                    <i class="fas fa-times text-lg"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Data Peminjam Section -->
            <div>
                <h4 class="text-md font-semibold text-gray-900 mb-4 flex items-center">
                    <div class="w-10 h-10 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-user text-white text-sm"></i>
                    </div>
                    Data Peminjam
                </h4>
                
                <!-- Toggle Anggota/Non-Anggota -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-3">Jenis Peminjam <span class="text-red-500">*</span></label>
                    <div class="flex flex-col sm:flex-row gap-3">
                        <label class="flex-1 cursor-pointer">
                            <input type="radio" name="jenis_peminjam" value="anggota" id="jenis_anggota" class="peer hidden" checked onchange="togglePeminjamForm('anggota')">
                            <div class="p-4 border-2 border-gray-300 rounded-lg peer-checked:border-green-500 peer-checked:bg-green-50 transition-all duration-200 hover:border-green-400">
                                <div class="flex items-center">
                                    <div class="w-5 h-5 border-2 border-gray-400 rounded-full mr-3 flex items-center justify-center peer-checked:border-green-600 peer-checked:bg-green-600">
                                        <div class="w-2 h-2 bg-white rounded-full hidden peer-checked:block"></div>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-gray-900">Anggota HMI</p>
                                        <p class="text-xs text-gray-600">Peminjam adalah anggota HMI</p>
                                    </div>
                                </div>
                            </div>
                        </label>
                        <label class="flex-1 cursor-pointer">
                            <input type="radio" name="jenis_peminjam" value="non_anggota" id="jenis_non_anggota" class="peer hidden" onchange="togglePeminjamForm('non_anggota')">
                            <div class="p-4 border-2 border-gray-300 rounded-lg peer-checked:border-green-500 peer-checked:bg-green-50 transition-all duration-200 hover:border-green-400">
                                <div class="flex items-center">
                                    <div class="w-5 h-5 border-2 border-gray-400 rounded-full mr-3 flex items-center justify-center peer-checked:border-green-600 peer-checked:bg-green-600">
                                        <div class="w-2 h-2 bg-white rounded-full hidden peer-checked:block"></div>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-gray-900">Non-Anggota</p>
                                        <p class="text-xs text-gray-600">Peminjam bukan anggota HMI</p>
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>

                <!-- Form Anggota -->
                <div id="form-anggota" class="space-y-4">
                    <div>
                        <label for="nama_peminjam_search" class="block text-sm font-medium text-gray-700 mb-2">
                            Cari Anggota <span class="text-red-500">*</span>
                        </label>
                        <div class="relative w-full">
                            <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" 
                                   id="nama_peminjam_search" 
                                   name="nama_peminjam_search"
                                   placeholder="Ketik nama, username, atau email anggota..." 
                                   class="w-full pl-10 pr-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white text-gray-900 placeholder-gray-400">
                        </div>
                        <p class="mt-2 text-xs text-gray-500">Ketik minimal 2 karakter untuk mencari anggota</p>
                        
                        <!-- Search Results Anggota -->
                        <div id="anggota-search-results" class="relative z-20 w-full mt-2 bg-white border-2 border-green-200 rounded-lg shadow-xl hidden max-h-80 overflow-y-auto">
                            <div id="anggota-search-loading" class="hidden p-3 text-center">
                                <div class="inline-block animate-spin rounded-full h-5 w-5 border-b-2 border-green-600"></div>
                                <span class="ml-2 text-sm text-gray-600">Mencari anggota...</span>
                            </div>
                            <div id="anggota-search-empty" class="hidden p-3 text-center text-gray-500 text-sm">
                                <i class="fas fa-search text-gray-400 mb-1 text-base"></i>
                                <p class="mt-1">Tidak ada anggota yang ditemukan</p>
                            </div>
                            <div id="anggota-search-list"></div>
                        </div>
                        
                        <!-- Hidden Peminjam Select -->
                        {{ form.peminjam }}
                        
                        <!-- Selected Anggota Info -->
                        <div id="selected-anggota-info" class="mt-4 p-4 bg-gradient-to-br from-green-50 to-green-100 rounded-lg border-2 border-green-200 hidden">
                            <div class="flex items-start justify-between">
                                <div class="flex items-start space-x-4 flex-1">
                                    <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center shadow-md flex-shrink-0">
                                        <i class="fas fa-user text-white text-base"></i>
                                    </div>
                                    <div class="flex-1">
                                        <p class="text-base font-bold text-gray-900" id="selected-anggota-nama"></p>
                                        <div class="mt-2 grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
                                            <div class="bg-white rounded-lg p-2">
                                                <span class="text-gray-500">Email:</span>
                                                <span class="font-semibold text-gray-900 ml-2" id="selected-anggota-email"></span>
                                            </div>
                                            <div class="bg-white rounded-lg p-2">
                                                <span class="text-gray-500">No. HP:</span>
                                                <span class="font-semibold text-gray-900 ml-2" id="selected-anggota-hp"></span>
                                            </div>
                                            <div class="bg-white rounded-lg p-2 sm:col-span-2">
                                                <span class="text-gray-500">Alamat:</span>
                                                <span class="font-semibold text-gray-900 ml-2" id="selected-anggota-alamat"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" onclick="clearAnggotaSelection()" class="text-gray-400 hover:text-red-600 transition-colors ml-2">
                                    <i class="fas fa-times text-lg"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Form Non-Anggota -->
                <div id="form-non-anggota" class="hidden space-y-4">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                        <div class="sm:col-span-2">
                            <label for="{{ form.nama_lengkap_non_anggota.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                Nama Lengkap <span class="text-red-500">*</span>
                            </label>
                            {{ form.nama_lengkap_non_anggota }}
                            {% if form.nama_lengkap_non_anggota.errors %}
                                <p class="mt-2 text-sm text-red-600">{{ form.nama_lengkap_non_anggota.errors.0 }}</p>
                            {% endif %}
                        </div>
                        
                        <div>
                            <label for="{{ form.no_ktp_non_anggota.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                Nomor KTP <span class="text-red-500">*</span>
                            </label>
                            {{ form.no_ktp_non_anggota }}
                            {% if form.no_ktp_non_anggota.errors %}
                                <p class="mt-2 text-sm text-red-600">{{ form.no_ktp_non_anggota.errors.0 }}</p>
                            {% endif %}
                        </div>
                        
                        <div>
                            <label for="{{ form.no_hp_non_anggota.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                Nomor HP <span class="text-red-500">*</span>
                            </label>
                            {{ form.no_hp_non_anggota }}
                            {% if form.no_hp_non_anggota.errors %}
                                <p class="mt-2 text-sm text-red-600">{{ form.no_hp_non_anggota.errors.0 }}</p>
                            {% endif %}
                        </div>
                        
                        <div>
                            <label for="{{ form.email_non_anggota.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                Email
                            </label>
                            {{ form.email_non_anggota }}
                            {% if form.email_non_anggota.errors %}
                                <p class="mt-2 text-sm text-red-600">{{ form.email_non_anggota.errors.0 }}</p>
                            {% endif %}
                        </div>
                        
                        <div>
                            <label for="{{ form.instansi_non_anggota.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                Instansi/Organisasi
                            </label>
                            {{ form.instansi_non_anggota }}
                            {% if form.instansi_non_anggota.errors %}
                                <p class="mt-2 text-sm text-red-600">{{ form.instansi_non_anggota.errors.0 }}</p>
                            {% endif %}
                        </div>
                        
                        <div class="sm:col-span-2">
                            <label for="{{ form.alamat_non_anggota.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                                Alamat Lengkap <span class="text-red-500">*</span>
                            </label>
                            {{ form.alamat_non_anggota }}
                            {% if form.alamat_non_anggota.errors %}
                                <p class="mt-2 text-sm text-red-600">{{ form.alamat_non_anggota.errors.0 }}</p>
                        {% endif %}
                        </div>
                    </div>
                </div>
                    </div>

            <!-- Jaminan dan Dokumen Section (Only for Non-Anggota) -->
            <div id="jaminan-dokumen-section" class="hidden">
                <h4 class="text-md font-semibold text-gray-900 mb-4 flex items-center">
                    <div class="w-10 h-10 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-file-alt text-white text-sm"></i>
                    </div>
                    Jaminan dan Dokumen
                </h4>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                    <div>
                        <label for="{{ form.jaminan.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            Jaminan
                        </label>
                        <div class="relative">
                            {{ form.jaminan }}
                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                <i class="fas fa-chevron-down text-gray-400 text-sm"></i>
                            </div>
                        </div>
                        {% if form.jaminan.errors %}
                            <p class="mt-2 text-sm text-red-600">{{ form.jaminan.errors.0 }}</p>
                        {% endif %}
                    </div>

                    <div>
                        <label for="{{ form.foto_peminjam.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            Foto Peminjam
                        </label>
                        <div class="relative">
                            {{ form.foto_peminjam }}
                        </div>
                        {% if form.foto_peminjam.errors %}
                            <p class="mt-2 text-sm text-red-600">{{ form.foto_peminjam.errors.0 }}</p>
                        {% endif %}
                        <p class="mt-1 text-xs text-gray-500">Format: JPG, PNG (Max 5MB)</p>
                    </div>
                    
                    <div>
                        <label for="{{ form.dokumen_surat_peminjam.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            Surat Peminjam
                        </label>
                        <div class="relative">
                            {{ form.dokumen_surat_peminjam }}
                        </div>
                        {% if form.dokumen_surat_peminjam.errors %}
                            <p class="mt-2 text-sm text-red-600">{{ form.dokumen_surat_peminjam.errors.0 }}</p>
                        {% endif %}
                        <p class="mt-1 text-xs text-gray-500">Format: PDF, DOC, DOCX (Max 10MB)</p>
                                </div>
                    
                                <div>
                        <label for="{{ form.dokumen_ktp.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            Scan KTP
                        </label>
                        <div class="relative">
                            {{ form.dokumen_ktp }}
                                </div>
                        {% if form.dokumen_ktp.errors %}
                            <p class="mt-2 text-sm text-red-600">{{ form.dokumen_ktp.errors.0 }}</p>
                        {% endif %}
                        <p class="mt-1 text-xs text-gray-500">Format: JPG, PNG, PDF (Max 5MB)</p>
                            </div>
                    
                    <div class="sm:col-span-2">
                        <label for="{{ form.dokumen_lainnya.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            Dokumen Lainnya
                        </label>
                        <div class="relative">
                            {{ form.dokumen_lainnya }}
                        </div>
                        {% if form.dokumen_lainnya.errors %}
                            <p class="mt-2 text-sm text-red-600">{{ form.dokumen_lainnya.errors.0 }}</p>
                        {% endif %}
                        <p class="mt-1 text-xs text-gray-500">Dokumen pendukung lainnya (jika ada)</p>
                    </div>
                </div>
            </div>

            <!-- Tanggal Section -->
            <div>
                <h4 class="text-md font-semibold text-gray-900 mb-4 flex items-center">
                    <div class="w-10 h-10 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-calendar text-white text-sm"></i>
                    </div>
                    Jadwal Peminjaman
                </h4>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                    <div>
                        <label for="{{ form.tanggal_pinjam.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            Tanggal Pinjam <span class="text-red-500">*</span>
                        </label>
                        {{ form.tanggal_pinjam }}
                        {% if form.tanggal_pinjam.errors %}
                            <p class="mt-2 text-sm text-red-600">{{ form.tanggal_pinjam.errors.0 }}</p>
                        {% endif %}
                    </div>
                    <div>
                        <label for="{{ form.tanggal_kembali_rencana.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            Tanggal Kembali Rencana <span class="text-red-500">*</span>
                        </label>
                        {{ form.tanggal_kembali_rencana }}
                        {% if form.tanggal_kembali_rencana.errors %}
                            <p class="mt-2 text-sm text-red-600">{{ form.tanggal_kembali_rencana.errors.0 }}</p>
                        {% endif %}
                        <div class="mt-2 text-xs text-gray-500">
                            Durasi peminjaman akan dihitung otomatis
                        </div>
                    </div>
                </div>
                
                <!-- Duration Display -->
                <div id="duration-info" class="mt-4 p-4 bg-gradient-to-br from-green-50 to-green-100 rounded-lg border-2 border-green-200 hidden">
                    <div class="flex items-center">
                        <div class="w-10 h-10 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-clock text-white text-sm"></i>
                        </div>
                        <span class="text-sm font-semibold text-gray-900">
                            Durasi peminjaman: <span id="duration-days" class="text-green-600"></span> hari
                        </span>
                    </div>
                </div>
            </div>

            <!-- Detail Section -->
            <div>
                <h4 class="text-md font-semibold text-gray-900 mb-4 flex items-center">
                    <div class="w-10 h-10 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-info-circle text-white text-sm"></i>
                    </div>
                    Detail Peminjaman
                </h4>
                <div class="grid grid-cols-1 gap-6">
                    <div>
                        <label for="{{ form.keperluan.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            Keperluan Peminjaman <span class="text-red-500">*</span>
                        </label>
                        {{ form.keperluan }}
                        {% if form.keperluan.errors %}
                            <p class="mt-2 text-sm text-red-600">{{ form.keperluan.errors.0 }}</p>
                        {% endif %}
                        <div class="mt-2 text-xs text-gray-500">
                            Jelaskan secara detail untuk apa barang akan digunakan
                        </div>
                    </div>
                    <div>
                        <label for="{{ form.kondisi_saat_pinjam.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
                            Kondisi Saat Pinjam <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            {{ form.kondisi_saat_pinjam }}
                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                <i class="fas fa-chevron-down text-gray-400 text-sm"></i>
                            </div>
                        </div>
                        {% if form.kondisi_saat_pinjam.errors %}
                            <p class="mt-2 text-sm text-red-600">{{ form.kondisi_saat_pinjam.errors.0 }}</p>
                        {% endif %}
                        <div class="mt-2 text-xs text-gray-500">
                            Pastikan kondisi barang sesuai dengan kondisi aktual
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Errors -->
            {% if form.non_field_errors %}
                <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-circle text-red-400"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-red-800">Terjadi kesalahan:</h3>
                            <div class="mt-2 text-sm text-red-700">
                                {{ form.non_field_errors.0 }}
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

            <!-- Form Actions -->
            <div class="flex flex-col sm:flex-row items-center justify-end space-y-2 sm:space-y-0 sm:space-x-4 pt-4 sm:pt-6 border-t-2 border-gray-200">
                <a href="{% url 'inventaris:peminjaman_list' %}" class="w-full sm:w-auto inline-flex items-center justify-center px-6 py-3 bg-white border-2 border-gray-300 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 transition-all duration-200 shadow-sm">
                    <i class="fas fa-times mr-2"></i>Batal
                </a>
                <button type="submit" class="w-full sm:w-auto inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white text-sm font-medium rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" id="submit-btn">
                    <i class="fas fa-paper-plane mr-2"></i>
                    Ajukan Peminjaman
                </button>
            </div>
        </form>
    </div>

    <!-- Tips Section -->
    <div class="bg-white rounded-xl shadow-lg border-2 border-green-100 p-6">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <div class="w-12 h-12 bg-gradient-to-br from-green-100 to-green-200 rounded-lg flex items-center justify-center">
                    <i class="fas fa-lightbulb text-green-600 text-xl"></i>
                </div>
            </div>
            <div class="ml-4 flex-1">
                <h4 class="text-base font-bold text-gray-900 mb-3">Tips Pengajuan Peminjaman:</h4>
                <div class="space-y-2 text-sm text-gray-700">
                    <div class="flex items-start">
                        <i class="fas fa-check-circle text-green-600 mr-2 mt-0.5"></i>
                        <span>Pastikan barang yang dipilih dalam status "Aktif" dan siap dipinjam</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check-circle text-green-600 mr-2 mt-0.5"></i>
                        <span>Isi keperluan peminjaman dengan jelas dan detail</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check-circle text-green-600 mr-2 mt-0.5"></i>
                        <span>Tentukan tanggal kembali yang realistis sesuai kebutuhan</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check-circle text-green-600 mr-2 mt-0.5"></i>
                        <span>Lengkapi semua dokumen yang diperlukan (KTP, Surat, dll)</span>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-check-circle text-green-600 mr-2 mt-0.5"></i>
                        <span>Peminjaman akan diproses setelah mendapat persetujuan admin</span>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Barang Search Elements
    const barangSearchInput = document.getElementById('barang_search');
    const barangSearchResults = document.getElementById('barang-search-results');
    const barangSearchList = document.getElementById('barang-search-list');
    const barangSearchLoading = document.getElementById('barang-search-loading');
    const barangSearchEmpty = document.getElementById('barang-search-empty');
    const barangInfo = document.getElementById('barang-info');
    const barangHiddenInput = document.getElementById('{{ form.barang.id_for_label }}');
    
    // Date Elements
    const tanggalPinjam = document.getElementById('{{ form.tanggal_pinjam.id_for_label }}');
    const tanggalKembali = document.getElementById('{{ form.tanggal_kembali_rencana.id_for_label }}');
    const durationInfo = document.getElementById('duration-info');
    const durationDays = document.getElementById('duration-days');
    
    let barangSearchTimeout;
    
    // Check if elements exist
    if (!barangSearchInput) {
        console.error('barang_search element not found');
        return;
    }

    // Barang Search Functionality
    barangSearchInput.addEventListener('input', function() {
            const query = this.value.trim();
            
            if (query.length < 2) {
            hideBarangSearchResults();
                return;
            }

        clearTimeout(barangSearchTimeout);
        barangSearchTimeout = setTimeout(() => {
            searchBarang(query);
            }, 300);
        });

    // Search Barang Function
    function searchBarang(query) {
        showBarangSearchLoading();
        
        fetch(`/inventaris/ajax/barang/search/?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {
                hideBarangSearchLoading();
                if (data.error) {
                    showError('Kesalahan Pencarian', data.error);
                    return;
                }
                displayBarangSearchResults(data.barang || []);
            })
            .catch(error => {
                hideBarangSearchLoading();
                console.error('Error searching barang:', error);
                showError('Kesalahan', 'Terjadi kesalahan saat mencari barang. Silakan coba lagi.');
            });
    }

    // Display Barang Search Results
    function displayBarangSearchResults(barangList) {
        if (!barangSearchList || !barangSearchResults) return;
        
        barangSearchList.innerHTML = '';
        
        if (barangList.length === 0) {
            if (barangSearchEmpty) barangSearchEmpty.classList.remove('hidden');
            barangSearchResults.classList.remove('hidden');
            return;
        }

        if (barangSearchEmpty) barangSearchEmpty.classList.add('hidden');
        
        barangList.forEach(barang => {
            const item = document.createElement('div');
            item.className = 'px-3 py-2 hover:bg-green-50 cursor-pointer border-b border-green-100 last:border-b-0 transition-colors';
            item.innerHTML = `
                <div class="flex items-center gap-2.5">
                    <div class="w-8 h-8 bg-gradient-to-br from-green-500 to-green-600 rounded-md flex items-center justify-center flex-shrink-0 shadow-sm">
                        <i class="fas fa-box text-white text-xs"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-semibold text-gray-900 truncate leading-tight">${barang.nama}</p>
                        <p class="text-xs text-gray-500 truncate leading-tight mt-0.5">${barang.kode_barang} • ${barang.kondisi} • ${barang.lokasi}</p>
                        ${barang.jumlah_tersedia !== undefined ? `<p class="text-xs ${barang.jumlah_tersedia > 0 ? 'text-green-600' : 'text-red-600'} font-medium mt-0.5">Tersedia: ${barang.jumlah_tersedia} unit</p>` : ''}
                    </div>
                    <div class="flex-shrink-0">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${barang.is_available && barang.jumlah_tersedia > 0 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}">
                            ${barang.is_available && barang.jumlah_tersedia > 0 ? 'Tersedia' : 'Tidak Tersedia'}
                        </span>
                    </div>
                </div>
            `;
            item.addEventListener('click', () => selectBarang(barang));
            barangSearchList.appendChild(item);
        });
        
        barangSearchResults.classList.remove('hidden');
    }

    // Select Barang
    function selectBarang(barang) {
        // Check if barang is available
        if (barang.jumlah_tersedia !== undefined && barang.jumlah_tersedia <= 0) {
            showError('Barang Tidak Tersedia', `Maaf, barang "${barang.nama}" sedang tidak tersedia. Semua unit sedang dipinjam.`);
            return;
        }
        
        if (!barang.is_available && barang.jumlah_tersedia === undefined) {
            showWarning('Barang Tidak Tersedia', `Barang "${barang.nama}" mungkin sedang tidak tersedia.`);
        }
        
        if (barangHiddenInput) barangHiddenInput.value = barang.id;
        if (barangSearchInput) barangSearchInput.value = barang.nama;
        
        // Show selected barang info
        const barangNama = document.getElementById('barang-nama');
        const barangKode = document.getElementById('barang-kode');
        const barangKondisi = document.getElementById('barang-kondisi');
        const barangLokasi = document.getElementById('barang-lokasi');
        const barangStatus = document.getElementById('barang-status');
        
        if (barangNama) barangNama.textContent = barang.nama;
        if (barangKode) barangKode.textContent = barang.kode_barang;
        if (barangKondisi) barangKondisi.textContent = barang.kondisi;
        if (barangLokasi) barangLokasi.textContent = barang.lokasi;
        if (barangStatus) {
            let statusText = barang.status;
            if (barang.jumlah_tersedia !== undefined) {
                statusText += ` (Tersedia: ${barang.jumlah_tersedia})`;
            }
            barangStatus.textContent = statusText;
        }
        if (barangInfo) barangInfo.classList.remove('hidden');
        
        hideBarangSearchResults();
        
        // Show success notification
        if (barang.jumlah_tersedia !== undefined && barang.jumlah_tersedia > 0) {
            showSuccess('Barang Dipilih', `Barang "${barang.nama}" telah dipilih. Tersedia: ${barang.jumlah_tersedia} unit`, { duration: 2000 });
        }
    }

    // Clear Barang Selection
    window.clearBarangSelection = function() {
        if (barangSearchInput) barangSearchInput.value = '';
        if (barangHiddenInput) barangHiddenInput.value = '';
        if (barangInfo) barangInfo.classList.add('hidden');
    }

    // Helper Functions for Barang Search
    function showBarangSearchLoading() {
        if (barangSearchLoading) barangSearchLoading.classList.remove('hidden');
        if (barangSearchEmpty) barangSearchEmpty.classList.add('hidden');
        if (barangSearchList) barangSearchList.innerHTML = '';
        if (barangSearchResults) barangSearchResults.classList.remove('hidden');
    }

    function hideBarangSearchLoading() {
        if (barangSearchLoading) barangSearchLoading.classList.add('hidden');
    }

    function hideBarangSearchResults() {
        if (barangSearchResults) barangSearchResults.classList.add('hidden');
    }

    // Calculate Duration Function
    function calculateDuration() {
        if (!tanggalPinjam || !tanggalKembali || !durationDays || !durationInfo) {
            return;
        }
        
        const pinjamDate = new Date(tanggalPinjam.value);
        const kembaliDate = new Date(tanggalKembali.value);
        
        if (pinjamDate && kembaliDate && kembaliDate > pinjamDate) {
            const diffTime = Math.abs(kembaliDate - pinjamDate);
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
            
            durationDays.textContent = diffDays;
            durationInfo.classList.remove('hidden');
        } else {
            durationInfo.classList.add('hidden');
        }
    }

    // Date Event Listeners
    if (tanggalPinjam) {
        tanggalPinjam.addEventListener('change', calculateDuration);
    }
    if (tanggalKembali) {
        tanggalKembali.addEventListener('change', calculateDuration);
    }

    // Click outside to close search results
    document.addEventListener('click', function(event) {
        if (!event.target.closest('#barang_search') && !event.target.closest('#barang-search-results')) {
            hideBarangSearchResults();
        }
        if (!event.target.closest('#nama_peminjam_search') && !event.target.closest('#anggota-search-results')) {
            hideAnggotaSearchResults();
        }
    });

    // Toggle Peminjam Form
    window.togglePeminjamForm = function(jenis) {
        const formAnggota = document.getElementById('form-anggota');
        const formNonAnggota = document.getElementById('form-non-anggota');
        const isNonAnggotaInput = document.getElementById('{{ form.is_non_anggota.id_for_label }}');
        
        if (jenis === 'anggota') {
            formAnggota.classList.remove('hidden');
            formNonAnggota.classList.add('hidden');
            const jaminanSection = document.getElementById('jaminan-dokumen-section');
            if (jaminanSection) jaminanSection.classList.add('hidden');
            if (isNonAnggotaInput) {
                isNonAnggotaInput.value = 'False';
                isNonAnggotaInput.checked = false;
            }
            // Clear non-anggota fields
            clearNonAnggotaFields();
        } else {
            formAnggota.classList.add('hidden');
            formNonAnggota.classList.remove('hidden');
            const jaminanSection = document.getElementById('jaminan-dokumen-section');
            if (jaminanSection) jaminanSection.classList.remove('hidden');
            if (isNonAnggotaInput) {
                isNonAnggotaInput.value = 'True';
                isNonAnggotaInput.checked = true;
            }
            // Clear anggota fields
            clearAnggotaSelection();
        }
    };

    // Anggota Search Elements
    const anggotaSearchInput = document.getElementById('nama_peminjam_search');
    const anggotaSearchResults = document.getElementById('anggota-search-results');
    const anggotaSearchList = document.getElementById('anggota-search-list');
    const anggotaSearchLoading = document.getElementById('anggota-search-loading');
    const anggotaSearchEmpty = document.getElementById('anggota-search-empty');
    const peminjamSelect = document.getElementById('{{ form.peminjam.id_for_label }}');
    const selectedAnggotaInfo = document.getElementById('selected-anggota-info');
    
    let anggotaSearchTimeout;

    // Anggota Search Functionality
    if (anggotaSearchInput) {
        anggotaSearchInput.addEventListener('input', function() {
            const query = this.value.trim();
            
            if (query.length < 2) {
                hideAnggotaSearchResults();
                return;
            }

            clearTimeout(anggotaSearchTimeout);
            anggotaSearchTimeout = setTimeout(() => {
                searchAnggota(query);
            }, 300);
        });
    }

    // Search Anggota Function
    function searchAnggota(query) {
        showAnggotaSearchLoading();
        
        fetch(`/inventaris/ajax/users/search/?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {
                hideAnggotaSearchLoading();
                if (data.error) {
                    showError('Kesalahan Pencarian', data.error);
                    return;
                }
                displayAnggotaSearchResults(data.users || []);
            })
            .catch(error => {
                hideAnggotaSearchLoading();
                console.error('Error searching anggota:', error);
                showError('Kesalahan', 'Terjadi kesalahan saat mencari anggota. Silakan coba lagi.');
            });
    }

    // Display Anggota Search Results
    function displayAnggotaSearchResults(anggotaList) {
        if (!anggotaSearchList || !anggotaSearchResults) return;
        
        anggotaSearchList.innerHTML = '';
        
        if (anggotaList.length === 0) {
            if (anggotaSearchEmpty) anggotaSearchEmpty.classList.remove('hidden');
            anggotaSearchResults.classList.remove('hidden');
            return;
        }

        if (anggotaSearchEmpty) anggotaSearchEmpty.classList.add('hidden');
        
        anggotaList.forEach(anggota => {
            const item = document.createElement('div');
            item.className = 'px-3 py-2 hover:bg-green-50 cursor-pointer border-b border-green-100 last:border-b-0 transition-colors';
            item.innerHTML = `
                <div class="flex items-center gap-2.5">
                    <div class="w-8 h-8 bg-gradient-to-br from-green-500 to-green-600 rounded-md flex items-center justify-center flex-shrink-0 shadow-sm">
                        <i class="fas fa-user text-white text-xs"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-semibold text-gray-900 truncate leading-tight">${anggota.nama_lengkap || anggota.username}</p>
                        <p class="text-xs text-gray-500 truncate leading-tight mt-0.5">${anggota.email || anggota.username}</p>
                    </div>
                </div>
            `;
            item.addEventListener('click', () => selectAnggota(anggota));
            anggotaSearchList.appendChild(item);
        });
        
        anggotaSearchResults.classList.remove('hidden');
    }

    // Select Anggota
    function selectAnggota(anggota) {
        if (peminjamSelect) peminjamSelect.value = anggota.id;
        if (anggotaSearchInput) anggotaSearchInput.value = anggota.nama_lengkap || anggota.username;
        
        // Show selected anggota info
        const selectedAnggotaNama = document.getElementById('selected-anggota-nama');
        const selectedAnggotaEmail = document.getElementById('selected-anggota-email');
        const selectedAnggotaHp = document.getElementById('selected-anggota-hp');
        const selectedAnggotaAlamat = document.getElementById('selected-anggota-alamat');
        
        if (selectedAnggotaNama) selectedAnggotaNama.textContent = anggota.nama_lengkap || anggota.username;
        if (selectedAnggotaEmail) selectedAnggotaEmail.textContent = anggota.email || '-';
        if (selectedAnggotaHp) selectedAnggotaHp.textContent = anggota.no_telepon || anggota.no_hp || '-';
        if (selectedAnggotaAlamat) selectedAnggotaAlamat.textContent = anggota.alamat || '-';
        if (selectedAnggotaInfo) selectedAnggotaInfo.classList.remove('hidden');
        
        hideAnggotaSearchResults();
    }

    // Clear Anggota Selection
    window.clearAnggotaSelection = function() {
        if (anggotaSearchInput) anggotaSearchInput.value = '';
        if (peminjamSelect) peminjamSelect.value = '';
        if (selectedAnggotaInfo) selectedAnggotaInfo.classList.add('hidden');
    }

    // Clear Non-Anggota Fields
    function clearNonAnggotaFields() {
        const fieldIds = [
            '{{ form.nama_lengkap_non_anggota.id_for_label }}',
            '{{ form.no_ktp_non_anggota.id_for_label }}',
            '{{ form.no_hp_non_anggota.id_for_label }}',
            '{{ form.email_non_anggota.id_for_label }}',
            '{{ form.instansi_non_anggota.id_for_label }}',
            '{{ form.alamat_non_anggota.id_for_label }}'
        ];
        fieldIds.forEach(fieldId => {
            const field = document.getElementById(fieldId);
            if (field) field.value = '';
        });
    }

    // Helper Functions for Anggota Search
    function showAnggotaSearchLoading() {
        if (anggotaSearchLoading) anggotaSearchLoading.classList.remove('hidden');
        if (anggotaSearchEmpty) anggotaSearchEmpty.classList.add('hidden');
        if (anggotaSearchList) anggotaSearchList.innerHTML = '';
        if (anggotaSearchResults) anggotaSearchResults.classList.remove('hidden');
    }

    function hideAnggotaSearchLoading() {
        if (anggotaSearchLoading) anggotaSearchLoading.classList.add('hidden');
    }

    function hideAnggotaSearchResults() {
        if (anggotaSearchResults) anggotaSearchResults.classList.add('hidden');
    }

    // Set default dates
    if (tanggalPinjam && tanggalKembali) {
        const today = new Date();
        const nextWeek = new Date(today);
        nextWeek.setDate(today.getDate() + 7);
        
        if (!tanggalPinjam.value) {
            tanggalPinjam.value = today.toISOString().split('T')[0];
        }
        if (!tanggalKembali.value) {
            tanggalKembali.value = nextWeek.toISOString().split('T')[0];
        }
        
        // Calculate initial duration
        calculateDuration();
    }
});
</script>
{% endblock %}