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

{% block title %}{{ title }} - Admin Panel{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8">
    <div class="max-w-7xl mx-auto">
        <!-- Header Card -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
            <div class="bg-gradient-to-r from-purple-600 to-pink-600 px-6 py-8 sm:px-8">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-images text-3xl text-white"></i>
                        </div>
                        <div class="ml-4">
                            <h1 class="text-2xl sm:text-3xl font-bold text-white">{{ title }}</h1>
                            <p class="mt-2 text-purple-100 text-sm sm:text-base">Kelola semua gambar website</p>
                        </div>
                    </div>
                    <div class="flex space-x-2">
                    </div>
                </div>
            </div>
            
            <div class="p-6 sm:p-8">
                <!-- Filter dan Search -->
                <div class="bg-gray-50 rounded-lg p-6 mb-6">
                    <form method="get" class="space-y-4 sm:space-y-0 sm:flex sm:items-center sm:space-x-4">
                        <div class="flex-1">
                            <label for="search" class="block text-sm font-medium text-gray-700 mb-2">Cari Gambar</label>
                            <input type="text" 
                                   id="search" 
                                   name="search" 
                                   value="{{ search_query }}"
                                   placeholder="Cari berdasarkan judul..."
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                        </div>
                        <div class="sm:w-48">
                            <label for="category" class="block text-sm font-medium text-gray-700 mb-2">Kategori</label>
                            <select id="category" 
                                    name="category" 
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                                <option value="">Semua Kategori</option>
                                {% for cat in categories %}
                                    <option value="{{ cat }}" {% if category_filter == cat %}selected{% endif %}>{{ cat }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="flex space-x-2">
                            <button type="submit" 
                                    class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md transition-colors duration-200 flex items-center">
                                <i class="fas fa-search mr-2"></i>
                                Cari
                            </button>
                            <a href="{% url 'admin_panel:image_gallery_settings' %}" 
                               class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md transition-colors duration-200 flex items-center">
                                <i class="fas fa-times mr-2"></i>
                                Reset
                            </a>
                        </div>
                    </form>
                </div>
                
                <!-- Bulk Actions -->
                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
                    <form id="bulkForm" method="post" action="{% url 'admin_panel:image_bulk_action' %}">
                        {% csrf_token %}
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-3 sm:space-y-0">
                            <div class="flex items-center space-x-4">
                                <select name="action" 
                                        class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent">
                                    <option value="">Pilih Aksi</option>
                                    <option value="optimize_selected">Optimasi Terpilih</option>
                                    <option value="delete_selected">Hapus Terpilih</option>
                                </select>
                                <button type="submit" 
                                        id="bulkActionBtn"
                                        disabled
                                        class="bg-yellow-600 hover:bg-yellow-700 disabled:bg-gray-400 text-white px-4 py-2 rounded-md transition-colors duration-200 flex items-center">
                                    <i class="fas fa-play mr-2"></i>
                                    Jalankan Aksi
                                </button>
                            </div>
                            <div class="text-sm text-gray-600">
                                <span id="selectedCount">0</span> gambar dipilih
                            </div>
                        </div>
                    </form>
                </div>
                
                <!-- Gallery Grid -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                    {% for image in images %}
                    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-200">
                        <div class="relative">
                            <input type="checkbox" 
                                   name="selected_images" 
                                   value="{{ image.model }}:{{ image.id }}"
                                   class="absolute top-2 left-2 z-10 image-checkbox">
                            {% if image.image %}
                                <img src="{{ image.image.url }}" 
                                     alt="{{ image.title }}"
                                     class="w-full h-48 object-cover">
                            {% else %}
                                <div class="w-full h-48 bg-gray-200 flex items-center justify-center">
                                    <div class="text-center text-gray-500">
                                        <i class="fas fa-image text-3xl mb-2"></i>
                                        <p class="text-sm">Tidak ada gambar</p>
                                    </div>
                                </div>
                            {% endif %}
                            <div class="absolute top-2 right-2">
                                <span class="bg-{{ image.category|lower }}-500 text-white text-xs px-2 py-1 rounded-full">
                                    {{ image.category }}
                                </span>
                            </div>
                        </div>
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-900 text-sm mb-2 line-clamp-2">{{ image.title }}</h3>
                            <div class="flex items-center justify-between text-xs text-gray-500">
                                <span>{{ image.created_at|date:"d M Y" }}</span>
                                <span>{{ image.model }}</span>
                            </div>
                            <div class="mt-3 flex space-x-2">
                                <button data-model="{{ image.model }}" data-id="{{ image.id }}" 
                                        class="optimize-btn flex-1 bg-blue-600 hover:bg-blue-700 text-white text-xs py-1 px-2 rounded transition-colors duration-200">
                                    <i class="fas fa-compress-arrows-alt mr-1"></i>
                                    Optimasi
                                </button>
                                {% if image.image %}
                                <button data-image-url="{{ image.image.url }}" data-image-title="{{ image.title }}" 
                                        class="view-btn flex-1 bg-green-600 hover:bg-green-700 text-white text-xs py-1 px-2 rounded transition-colors duration-200">
                                {% else %}
                                <button disabled
                                        class="flex-1 bg-gray-400 text-white text-xs py-1 px-2 rounded cursor-not-allowed">
                                {% endif %}
                                    <i class="fas fa-eye mr-1"></i>
                                    Lihat
                                </button>
                            </div>
                        </div>
                    </div>
                    {% empty %}
                    <div class="col-span-full text-center py-12">
                        <i class="fas fa-images text-6xl text-gray-300 mb-4"></i>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">Tidak ada gambar ditemukan</h3>
                        <p class="text-gray-500">Coba ubah filter pencarian atau tambahkan gambar baru.</p>
                    </div>
                    {% endfor %}
                </div>
                
                <!-- Pagination -->
                {% if images.has_other_pages %}
                <div class="mt-8 flex justify-center">
                    <nav class="flex items-center space-x-2">
                        {% if images.has_previous %}
                            <a href="?page={{ images.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if category_filter %}&category={{ category_filter }}{% endif %}" 
                               class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                                <i class="fas fa-chevron-left"></i>
                            </a>
                        {% endif %}
                        
                        {% for num in images.paginator.page_range %}
                            {% if images.number == num %}
                                <span class="px-3 py-2 text-sm font-medium text-white bg-purple-600 border border-purple-600 rounded-md">
                                    {{ num }}
                                </span>
                            {% elif num > images.number|add:'-3' and num < images.number|add:'3' %}
                                <a href="?page={{ num }}{% if search_query %}&search={{ search_query }}{% endif %}{% if category_filter %}&category={{ category_filter }}{% endif %}" 
                                   class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                                    {{ num }}
                                </a>
                            {% endif %}
                        {% endfor %}
                        
                        {% if images.has_next %}
                            <a href="?page={{ images.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if category_filter %}&category={{ category_filter }}{% endif %}" 
                               class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                                <i class="fas fa-chevron-right"></i>
                            </a>
                        {% endif %}
                    </nav>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Image Modal -->
<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-lg max-w-4xl max-h-full overflow-hidden">
        <div class="flex items-center justify-between p-4 border-b">
            <h3 id="modalTitle" class="text-lg font-semibold text-gray-900"></h3>
            <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <div class="p-4">
            <img id="modalImage" src="" alt="" class="max-w-full max-h-96 mx-auto rounded">
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Handle checkbox selection
    const checkboxes = document.querySelectorAll('.image-checkbox');
    const bulkActionBtn = document.getElementById('bulkActionBtn');
    const selectedCount = document.getElementById('selectedCount');
    
    function updateBulkActions() {
        const checkedBoxes = document.querySelectorAll('.image-checkbox:checked');
        const count = checkedBoxes.length;
        
        selectedCount.textContent = count;
        bulkActionBtn.disabled = count === 0;
        
        if (count > 0) {
            bulkActionBtn.classList.remove('bg-gray-400');
            bulkActionBtn.classList.add('bg-yellow-600', 'hover:bg-yellow-700');
        } else {
            bulkActionBtn.classList.add('bg-gray-400');
            bulkActionBtn.classList.remove('bg-yellow-600', 'hover:bg-yellow-700');
        }
    }
    
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateBulkActions);
    });
    
    // Select all checkbox
    function toggleSelectAll() {
        const allChecked = Array.from(checkboxes).every(cb => cb.checked);
        checkboxes.forEach(checkbox => {
            checkbox.checked = !allChecked;
        });
        updateBulkActions();
    }
    
    // View image modal
    function viewImage(imageUrl, title) {
        document.getElementById('modalImage').src = imageUrl;
        document.getElementById('modalTitle').textContent = title;
        document.getElementById('imageModal').classList.remove('hidden');
    }
    
    function closeModal() {
        document.getElementById('imageModal').classList.add('hidden');
    }
    
    // Optimize single image
    function optimizeImage(model, id) {
        if (confirm('Apakah Anda yakin ingin mengoptimasi gambar ini?')) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{% url "admin_panel:image_bulk_action" %}';
            
            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = 'csrfmiddlewaretoken';
            csrfInput.value = csrfToken;
            
            const actionInput = document.createElement('input');
            actionInput.type = 'hidden';
            actionInput.name = 'action';
            actionInput.value = 'optimize_selected';
            
            const imageInput = document.createElement('input');
            imageInput.type = 'hidden';
            imageInput.name = 'selected_images';
            imageInput.value = model + ':' + id;
            
            form.appendChild(csrfInput);
            form.appendChild(actionInput);
            form.appendChild(imageInput);
            
            document.body.appendChild(form);
            form.submit();
        }
    }
    
    // Event listeners for buttons
    document.addEventListener('click', function(e) {
        if (e.target.closest('.view-btn')) {
            const btn = e.target.closest('.view-btn');
            const imageUrl = btn.dataset.imageUrl;
            const imageTitle = btn.dataset.imageTitle;
            viewImage(imageUrl, imageTitle);
        }
        
        if (e.target.closest('.optimize-btn')) {
            const btn = e.target.closest('.optimize-btn');
            const model = btn.dataset.model;
            const id = btn.dataset.id;
            optimizeImage(model, id);
        }
    });
    
    // Close modal on escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeModal();
        }
    });
    
    // Close modal on backdrop click
    document.getElementById('imageModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeModal();
        }
    });
</script>

<style>
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .image-checkbox:checked + img {
        opacity: 0.7;
    }
    
    .image-checkbox:checked {
        background-color: #3b82f6;
        border-color: #3b82f6;
    }
</style>
{% endblock %}