{% extends "admin/base.html" %}

{% block title %}Visi & Misi 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">Visi & Misi HMI</h1>
            <p class="text-gray-600 mt-1 text-sm sm:text-base">Kelola visi, misi, dan tujuan HMI</p>
        </div>
        <div>
            <a href="{% url 'admin_panel:tentang_hmi:visi_misi_create' %}" class="inline-flex items-center px-3 py-2 sm:px-4 sm:py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all shadow-md hover:shadow-lg text-sm sm:text-base">
                <i class="fas fa-plus mr-2"></i>Tambah Visi/Misi
            </a>
        </div>
    </div>

    <!-- Filter -->
    <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-3 gap-3 sm:gap-4">
                <div>
                    <label for="tipe" class="block text-xs sm:text-sm font-medium text-gray-700 mb-2">Tipe</label>
                    <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm sm:text-base" 
                            id="tipe" name="tipe">
                        <option value="">Semua Tipe</option>
                        {% for value, label in tipe_choices %}
                        <option value="{{ value }}" {% if request.GET.tipe == value %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label for="aktif" class="block text-xs sm:text-sm font-medium text-gray-700 mb-2">Status</label>
                    <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm sm:text-base" 
                            id="aktif" name="aktif">
                        <option value="">Semua Status</option>
                        <option value="true" {% if request.GET.aktif == 'true' %}selected{% endif %}>Aktif</option>
                        <option value="false" {% if request.GET.aktif == 'false' %}selected{% endif %}>Tidak Aktif</option>
                    </select>
                </div>
                <div class="flex items-end 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-2"></i>Filter
                    </button>
                    <a href="{% url 'admin_panel:tentang_hmi:visi_misi' %}" 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-times mr-2"></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 visi_misi_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 visi_misi in visi_misi_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>
                        <!-- Tipe Badge -->
                        <div class="mb-3 sm:mb-4">
                            <div class="text-center mb-2 sm:mb-3">
                                <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs sm:text-sm font-semibold {% if visi_misi.tipe == 'visi' %}bg-blue-100 text-blue-800 border-2 border-blue-300{% else %}bg-green-100 text-green-800 border-2 border-green-300{% endif %}">
                                    <i class="fas fa-{% if visi_misi.tipe == 'visi' %}eye{% else %}target{% endif %} mr-1.5"></i>
                                    {{ visi_misi.get_tipe_display }}
                                </span>
                            </div>
                            <p class="text-xs sm:text-sm text-gray-600 line-clamp-4 text-center leading-relaxed">{{ visi_misi.konten }}</p>
                        </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 visi_misi.aktif %}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 visi_misi.aktif %}check-circle{% else %}times-circle{% endif %} mr-1.5"></i>
                                {% if visi_misi.aktif %}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:visi_misi_edit' visi_misi.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({{ visi_misi.id }}, '{{ visi_misi.get_tipe_display|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-info-circle 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 data visi/misi</h5>
                    <p class="text-sm sm:text-base text-gray-500 mb-6">Klik tombol "Tambah Visi/Misi" untuk menambahkan data pertama</p>
                    <a href="{% url 'admin_panel:tentang_hmi:visi_misi_create' %}" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all shadow-md hover:shadow-lg">
                        <i class="fas fa-plus mr-2"></i>Tambah Visi/Misi
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
</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 <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, tipeDisplay) {
    deleteItemId = id;
    deleteItemName = tipeDisplay;
    document.getElementById('deleteItemName').textContent = tipeDisplay;
    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/visi-misi/${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">Visi/Misi 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 %}