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

{% block title %}Gambar Profil HMI{% endblock %}

{% block extra_css %}
<style>
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .gradient-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .gradient-card-green {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    }
    .gradient-card-blue {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .gradient-card-orange {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    .gradient-card-purple {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes scaleIn {
        from { transform: scale(0.9); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
    .animate-fadeIn { animation: fadeIn 0.2s ease-out; }
    .animate-scaleIn { animation: scaleIn 0.3s ease-out; }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 p-3 sm:p-4 md:p-6 lg:p-8">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 sm:mb-6">
        <div class="mb-3 sm:mb-0">
            <h1 class="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900">Gambar Profil HMI</h1>
            <p class="text-gray-600 mt-1 text-sm sm:text-base">Kelola gambar-gambar untuk Profil HMI</p>
        </div>
        <a href="{% url 'admin_panel:tentang_hmi:profil_hmi_image_create' %}" 
           class="inline-flex items-center px-3 py-2 sm:px-4 sm:py-2 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-lg hover:from-green-700 hover:to-green-800 transition-all shadow-md hover:shadow-lg text-sm sm:text-base">
            <i class="fas fa-plus mr-2"></i>
            Tambah Gambar
        </a>
    </div>

    <!-- Filter & Search -->
    <div class="bg-white rounded-lg shadow-md mb-4 sm:mb-6">
        <div class="p-3 sm:p-4 md:p-6">
            <form method="GET" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
                <div class="sm:col-span-2">
                    <input type="text" name="search" value="{% if search %}{{ search }}{% endif %}" 
                           placeholder="Cari berdasarkan judul, deskripsi, atau Profil HMI..."
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm sm:text-base">
                </div>
                <div>
                    <select name="is_active" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm sm:text-base">
                        <option value="">Semua Status</option>
                        <option value="true" {% if is_active_filter == 'true' %}selected{% endif %}>Aktif</option>
                        <option value="false" {% if is_active_filter == 'false' %}selected{% endif %}>Tidak Aktif</option>
                    </select>
                </div>
                <div class="flex gap-2">
                    <button type="submit" class="flex-1 inline-flex items-center justify-center px-4 py-2 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-lg hover:from-green-700 hover:to-green-800 transition-all shadow-md text-sm sm:text-base">
                        <i class="fas fa-search mr-1"></i>
                        Cari
                    </button>
                    <a href="{% url 'admin_panel:tentang_hmi:profil_hmi_image' %}" 
                       class="flex-1 inline-flex items-center justify-center px-4 py-2 bg-gradient-to-r from-gray-600 to-gray-700 text-white rounded-lg hover:from-gray-700 hover:to-gray-800 transition-all shadow-md text-sm sm:text-base">
                        <i class="fas fa-refresh mr-1"></i>
                        Reset
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Data Display -->
    <div class="bg-white rounded-lg shadow-md">
        <div class="p-3 sm:p-4 md:p-6">
            {% if image_list %}
                <!-- Grid View - Responsive -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-5 md:gap-6">
                    {% for image in image_list %}
                    <div class="group relative bg-white border-2 border-gray-200 rounded-xl p-4 sm:p-5 hover:shadow-xl hover:border-blue-400 transition-all duration-300 transform hover:-translate-y-1">
                        <!-- Gradient Top Bar -->
                        <div class="absolute top-0 left-0 right-0 h-1 rounded-t-xl {% cycle 'gradient-card' 'gradient-card-green' 'gradient-card-blue' 'gradient-card-orange' 'gradient-card-purple' %}"></div>
                        <!-- Image -->
                        <div class="mb-3 sm:mb-4">
                            {% if image.image %}
                            <div class="w-full h-32 sm:h-40 rounded-lg overflow-hidden bg-gray-100 border-2 border-gray-200">
                                <img src="{{ image.image.url }}" alt="{{ image.title }}" 
                                     class="w-full h-full object-cover">
                            </div>
                            {% else %}
                            <div class="w-full h-32 sm:h-40 rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center border-2 border-gray-200">
                                <i class="fas fa-image text-gray-400 text-2xl sm:text-3xl"></i>
                            </div>
                            {% endif %}
                        </div>
                        
                        <!-- Content -->
                        <div class="mb-3 sm:mb-4">
                            <h3 class="text-sm sm:text-base font-bold text-gray-900 mb-2">{{ image.title|default:"-" }}</h3>
                            {% if image.description %}
                            <p class="text-xs sm:text-sm text-gray-600 line-clamp-3 leading-relaxed">{{ image.description }}</p>
                            {% endif %}
                        </div>
                        
                        <!-- Info -->
                        <div class="mb-3 sm:mb-4 space-y-2">
                            <div class="text-xs sm:text-sm text-gray-600">
                                <span class="font-semibold text-gray-900">Profil HMI:</span> {{ image.tentang_hmi.judul }}
                            </div>
                            <div class="text-xs sm:text-sm text-gray-600">
                                <span class="font-semibold text-gray-900">Urutan:</span> {{ image.order }}
                            </div>
                            <div class="text-xs sm:text-sm text-gray-600">
                                <span class="font-semibold text-gray-900">Dibuat:</span> {{ image.created_at|date:"d M Y" }}
                            </div>
                        </div>
                        
                        <!-- Status Badge -->
                        <div class="mb-3 sm:mb-4 text-center">
                            <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs sm:text-sm font-semibold {% if image.is_active %}bg-green-100 text-green-800 border-2 border-green-300{% else %}bg-red-100 text-red-800 border-2 border-red-300{% endif %}">
                                <i class="fas fa-{% if image.is_active %}check-circle{% else %}times-circle{% endif %} mr-1.5"></i>
                                {% if image.is_active %}Aktif{% else %}Tidak Aktif{% endif %}
                            </span>
                        </div>
                        
                        <!-- Action Buttons -->
                        <div class="flex items-center justify-center gap-2 pt-3 border-t-2 border-gray-100">
                            <a href="{% url 'public:about' %}" 
                               target="_blank"
                               class="flex-1 inline-flex items-center justify-center px-3 py-2 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg hover:from-green-600 hover:to-green-700 transition-all shadow-md hover:shadow-lg text-xs sm:text-sm font-semibold"
                               title="Lihat di Public">
                                <i class="fas fa-external-link-alt mr-1.5"></i>
                                <span class="hidden sm:inline">Lihat</span>
                            </a>
                            <a href="{% url 'admin_panel:tentang_hmi:profil_hmi_image_edit' image.id %}" 
                               class="flex-1 inline-flex items-center justify-center px-3 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-blue-700 transition-all shadow-md hover:shadow-lg text-xs sm:text-sm font-semibold"
                               title="Edit">
                                <i class="fas fa-edit mr-1.5"></i>
                                <span class="hidden sm:inline">Edit</span>
                            </a>
                            <button type="button" 
                                    onclick="showDeleteModal({{ image.id }}, '{{ image.title|escapejs }}')"
                                    class="flex-1 inline-flex items-center justify-center px-3 py-2 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-lg hover:from-red-600 hover:to-red-700 transition-all shadow-md hover:shadow-lg text-xs sm:text-sm font-semibold"
                                    title="Hapus">
                                <i class="fas fa-trash mr-1.5"></i>
                                <span class="hidden sm:inline">Hapus</span>
                            </button>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="text-center py-12 sm:py-16">
                    <div class="inline-block p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-full mb-4">
                        <i class="fas fa-image text-4xl sm:text-6xl text-gray-400"></i>
                    </div>
                    <h5 class="text-base sm:text-lg font-semibold text-gray-900 mb-2">Belum ada gambar Profil HMI</h5>
                    <p class="text-sm sm:text-base text-gray-600 mb-6">Mulai dengan menambahkan gambar pertama</p>
                    <a href="{% url 'admin_panel:tentang_hmi:profil_hmi_image_create' %}" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-lg hover:from-green-700 hover:to-green-800 transition-all shadow-md hover:shadow-lg">
                        <i class="fas fa-plus mr-2"></i>Tambah Gambar
                    </a>
                </div>
            {% endif %}
        </div>
    </div>

    <!-- Pagination -->
    {% if image_list.has_other_pages %}
    <div class="mt-6 flex flex-col sm:flex-row items-center justify-between gap-4">
        <div class="text-xs sm:text-sm text-gray-700">
            Menampilkan {{ image_list.start_index }} sampai {{ image_list.end_index }} dari {{ image_list.paginator.count }} hasil
        </div>
        <div class="flex flex-wrap items-center justify-center gap-2">
            {% if image_list.has_previous %}
            <a href="?page=1{% if search %}&search={{ search }}{% endif %}{% if is_active_filter %}&is_active={{ is_active_filter }}{% endif %}" 
               class="px-3 py-2 text-xs sm:text-sm font-medium text-gray-700 bg-white border-2 border-gray-300 rounded-lg hover:bg-gray-50 hover:border-blue-500 transition-all">
                First
            </a>
            <a href="?page={{ image_list.previous_page_number }}{% if search %}&search={{ search }}{% endif %}{% if is_active_filter %}&is_active={{ is_active_filter }}{% endif %}" 
               class="px-3 py-2 text-xs sm:text-sm font-medium text-gray-700 bg-white border-2 border-gray-300 rounded-lg hover:bg-gray-50 hover:border-blue-500 transition-all">
                <i class="fas fa-chevron-left mr-1"></i>Prev
            </a>
            {% endif %}
            
            <span class="px-4 py-2 text-xs sm:text-sm font-semibold text-white bg-gradient-to-r from-blue-600 to-blue-700 border-2 border-blue-600 rounded-lg shadow-md">
                {{ image_list.number }} / {{ image_list.paginator.num_pages }}
            </span>
            
            {% if image_list.has_next %}
            <a href="?page={{ image_list.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% if is_active_filter %}&is_active={{ is_active_filter }}{% endif %}" 
               class="px-3 py-2 text-xs sm:text-sm font-medium text-gray-700 bg-white border-2 border-gray-300 rounded-lg hover:bg-gray-50 hover:border-blue-500 transition-all">
                Next<i class="fas fa-chevron-right ml-1"></i>
            </a>
            <a href="?page={{ image_list.paginator.num_pages }}{% if search %}&search={{ search }}{% endif %}{% if is_active_filter %}&is_active={{ is_active_filter }}{% endif %}" 
               class="px-3 py-2 text-xs sm:text-sm font-medium text-gray-700 bg-white border-2 border-gray-300 rounded-lg hover:bg-gray-50 hover:border-blue-500 transition-all">
                Last
            </a>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>

<!-- Hidden Form untuk CSRF Token -->
<form id="csrf-form" style="display: none;">
    {% csrf_token %}
</form>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 bg-gray-900 bg-opacity-40 backdrop-blur-sm flex items-center justify-center z-50 hidden animate-fadeIn">
    <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4 border-2 border-red-300 transform transition-all animate-scaleIn">
        <!-- Modal Header -->
        <div class="flex items-center justify-between p-6 border-b-2 border-gray-200 bg-gradient-to-r from-white to-gray-50 rounded-t-2xl">
            <div class="flex items-center">
                <div class="bg-gradient-to-br from-red-500 to-red-600 rounded-xl p-3 mr-3 shadow-lg">
                    <i class="fas fa-exclamation-triangle text-white text-xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900">Konfirmasi Hapus</h3>
            </div>
            <button onclick="closeDeleteModal()" class="text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full p-2 transition-all duration-200">
                <i class="fas fa-times text-lg"></i>
            </button>
        </div>
        
        <!-- Modal Content -->
        <div class="p-6">
            <div class="text-center mb-4">
                <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-red-100 to-red-200 rounded-full p-4 mb-4 shadow-lg">
                    <i class="fas fa-exclamation-triangle text-red-600 text-3xl"></i>
                </div>
                <h4 class="text-2xl font-bold text-gray-900 mb-3">Apakah Anda yakin?</h4>
                <p class="text-base text-gray-700 mb-4 leading-relaxed">
                    Anda akan menghapus gambar <strong class="text-red-600 font-bold" id="deleteItemName">-</strong> secara permanen.
                </p>
                <div class="bg-gradient-to-r from-red-50 to-orange-50 border-2 border-red-200 rounded-xl p-4 mt-4 shadow-sm">
                    <p class="text-sm text-red-800 flex items-center justify-center font-medium">
                        <i class="fas fa-info-circle mr-2 text-red-600"></i>
                        Tindakan ini tidak dapat dibatalkan.
                    </p>
                </div>
            </div>
        </div>
        
        <!-- Modal Footer -->
        <div class="flex justify-end gap-3 p-5 border-t-2 border-gray-200 bg-gradient-to-br from-gray-50 to-white rounded-b-xl">
            <button onclick="closeDeleteModal()" 
                    class="px-6 py-3 bg-white border-2 border-gray-300 text-gray-700 text-sm font-semibold rounded-xl hover:bg-gray-50 hover:border-gray-400 transition-all duration-200 shadow-sm hover:shadow-md flex items-center">
                <i class="fas fa-times mr-2"></i>Batal
            </button>
            <button onclick="confirmDelete()" 
                    id="confirmDeleteBtn"
                    class="px-6 py-3 bg-gradient-to-r from-red-500 via-red-600 to-red-700 text-white text-sm font-bold rounded-xl hover:from-red-600 hover:via-red-700 hover:to-red-800 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105 active:scale-95 flex items-center border-2 border-red-400">
                <i class="fas fa-trash-alt mr-2"></i>Ya, Hapus
            </button>
        </div>
    </div>
</div>

<script>
// Global variables untuk menyimpan data yang akan dihapus
let deleteItemId = null;
let deleteItemName = null;

function showDeleteModal(id, title) {
    deleteItemId = id;
    deleteItemName = title;
    document.getElementById('deleteItemName').textContent = title || 'Gambar';
    document.getElementById('deleteModal').classList.remove('hidden');
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.add('hidden');
    deleteItemId = null;
    deleteItemName = null;
    // Reset button state if it was in loading state
    const deleteBtn = document.getElementById('confirmDeleteBtn');
    if (deleteBtn) {
        deleteBtn.disabled = false;
        deleteBtn.classList.remove('opacity-75', 'cursor-not-allowed');
        deleteBtn.innerHTML = '<i class="fas fa-trash-alt mr-2"></i>Ya, Hapus';
    }
}

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

function getCsrfToken() {
    // Try to get CSRF token from hidden form first
    const csrfInput = document.querySelector('#csrf-form [name=csrfmiddlewaretoken]');
    if (csrfInput) {
        return csrfInput.value;
    }
    
    // Try to get from any form
    const anyCsrfInput = document.querySelector('[name=csrfmiddlewaretoken]');
    if (anyCsrfInput) {
        return anyCsrfInput.value;
    }
    
    // Try to get from cookie
    let csrftoken = getCookie('csrftoken');
    if (csrftoken) {
        return csrftoken;
    }
    
    // Try to get from meta tag
    const metaTag = document.querySelector('meta[name="csrf-token"]');
    if (metaTag) {
        return metaTag.getAttribute('content');
    }
    
    return null;
}

function confirmDelete() {
    if (!deleteItemId) {
        return;
    }
    
    // Get CSRF token
    const csrfToken = getCsrfToken();
    
    if (!csrfToken) {
        alert('CSRF token tidak ditemukan. Silakan refresh halaman.');
        return;
    }

    // Disable button
    const deleteBtn = document.getElementById('confirmDeleteBtn');
    if (deleteBtn) {
        deleteBtn.disabled = true;
        deleteBtn.classList.add('opacity-75', 'cursor-not-allowed');
        deleteBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Menghapus...';
    }

    fetch(`/admin/tentang-hmi/profil-hmi-image/${deleteItemId}/delete/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': csrfToken,
            'Content-Type': 'application/json',
        },
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Show success message
            const modal = document.getElementById('deleteModal');
            modal.innerHTML = `
                <div class="bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 p-8 text-center">
                    <div class="inline-block bg-green-100 rounded-full p-4 mb-4">
                        <i class="fas fa-check-circle text-green-500 text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-2">Berhasil!</h3>
                    <p class="text-sm text-gray-600 mb-4">Gambar berhasil dihapus.</p>
                    <button onclick="location.reload()" class="px-5 py-2.5 bg-gradient-to-r from-blue-600 to-blue-700 text-white text-sm font-semibold rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all shadow-md">
                        OK
                    </button>
                </div>
            `;
            setTimeout(() => {
                location.reload();
            }, 1500);
        } else {
            alert('Terjadi kesalahan: ' + (data.error || 'Unknown error'));
            if (deleteBtn) {
                deleteBtn.disabled = false;
                deleteBtn.classList.remove('opacity-75', 'cursor-not-allowed');
                deleteBtn.innerHTML = '<i class="fas fa-trash-alt mr-2"></i>Ya, Hapus';
            }
        }
    })
    .catch(error => {
        console.error('Delete error:', error);
        alert('Terjadi kesalahan: ' + error.message);
        if (deleteBtn) {
            deleteBtn.disabled = false;
            deleteBtn.classList.remove('opacity-75', 'cursor-not-allowed');
            deleteBtn.innerHTML = '<i class="fas fa-trash-alt mr-2"></i>Ya, Hapus';
        }
    });
}

// Close modal when clicking outside
document.addEventListener('click', function(event) {
    const deleteModal = document.getElementById('deleteModal');
    if (event.target === deleteModal) {
        closeDeleteModal();
    }
});

// Close modal with ESC key
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        const deleteModal = document.getElementById('deleteModal');
        if (!deleteModal.classList.contains('hidden')) {
            closeDeleteModal();
        }
    }
});
</script>
{% endblock %}