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

{% block title %}Dashboard Layanan - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
    .service-card {
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .service-card:hover {
        transform: translateY(-2px);
    }
    
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-2 sm:px-4 lg:px-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 sm:mb-6 gap-4">
        <div>
            <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-800 mb-1">Dashboard Layanan</h1>
            <p class="text-sm sm:text-base text-gray-600">Kelola layanan dan program HMI</p>
        </div>
        <div class="flex flex-col sm:flex-row gap-2 sm:gap-3">
            <a href="{% url 'admin_panel:layanan:admin_service_create' %}" class="bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors">
                <i class="fas fa-plus mr-1"></i>Tambah Layanan
            </a>
            <a href="{% url 'admin_panel:layanan:admin_service_statistics' %}" class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors">
                <i class="fas fa-chart-bar mr-1"></i>Statistik
            </a>
            <a href="{% url 'admin_panel:layanan:admin_service_export' %}" class="bg-emerald-600 hover:bg-emerald-700 text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors">
                <i class="fas fa-download mr-1"></i>Export
            </a>
        </div>
    </div>
    
    <!-- Quick Stats -->
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mb-6">
        <div class="bg-white rounded-xl shadow-sm p-3 sm:p-4">
            <div class="flex items-center">
                <div class="w-8 h-8 sm:w-10 sm:h-10 bg-blue-500 rounded-lg flex items-center justify-center mr-2 sm:mr-3">
                    <i class="fas fa-list text-white text-sm sm:text-base"></i>
                </div>
                <div>
                    <div class="text-lg sm:text-xl font-bold text-gray-800">{{ total_services|default:0 }}</div>
                    <div class="text-xs sm:text-sm text-gray-600">Total Layanan</div>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm p-3 sm:p-4">
            <div class="flex items-center">
                <div class="w-8 h-8 sm:w-10 sm:h-10 bg-green-500 rounded-lg flex items-center justify-center mr-2 sm:mr-3">
                    <i class="fas fa-check-circle text-white text-sm sm:text-base"></i>
                </div>
                <div>
                    <div class="text-lg sm:text-xl font-bold text-gray-800">{{ active_services|default:0 }}</div>
                    <div class="text-xs sm:text-sm text-gray-600">Aktif</div>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm p-3 sm:p-4">
            <div class="flex items-center">
                <div class="w-8 h-8 sm:w-10 sm:h-10 bg-yellow-500 rounded-lg flex items-center justify-center mr-2 sm:mr-3">
                    <i class="fas fa-star text-white text-sm sm:text-base"></i>
                </div>
                <div>
                    <div class="text-lg sm:text-xl font-bold text-gray-800">{{ featured_services|default:0 }}</div>
                    <div class="text-xs sm:text-sm text-gray-600">Featured</div>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm p-3 sm:p-4">
            <div class="flex items-center">
                <div class="w-8 h-8 sm:w-10 sm:h-10 bg-purple-500 rounded-lg flex items-center justify-center mr-2 sm:mr-3">
                    <i class="fas fa-eye text-white text-sm sm:text-base"></i>
                </div>
                <div>
                    <div class="text-lg sm:text-xl font-bold text-gray-800">{{ total_views|default:0 }}</div>
                    <div class="text-xs sm:text-sm text-gray-600">Total Views</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bulk Actions Toolbar -->
    {% if services %}
    <div class="bg-white rounded-xl shadow-sm p-3 sm:p-4 mb-4 hidden" id="bulkActionsToolbar">
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
            <div class="flex items-center gap-2">
                <span class="text-sm font-medium text-gray-700" id="selectedCount">0 dipilih</span>
            </div>
            <div class="flex flex-wrap gap-2">
                <select id="bulkActionSelect" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">Pilih Aksi</option>
                    <option value="activate">Aktifkan</option>
                    <option value="deactivate">Nonaktifkan</option>
                    <option value="feature">Jadikan Featured</option>
                    <option value="unfeature">Hapus dari Featured</option>
                    <option value="delete">Hapus</option>
                </select>
                <button id="applyBulkAction" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                    Terapkan
                </button>
                <button id="clearSelection" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                    Batal
                </button>
            </div>
        </div>
    </div>
    
    <!-- Services List - Mobile: 2 columns, Desktop: 3-4 columns -->
    <div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4">
        {% for service in services %}
        <div class="bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden service-card relative">
            <!-- Service Image -->
            <div class="relative h-24 sm:h-32 lg:h-40">
                {% if service.image %}
                <img src="{{ service.image.url }}" alt="{{ service.title }}" 
                     class="w-full h-full object-cover">
                {% else %}
                <div class="w-full h-full bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center text-white">
                    <i class="fas fa-image text-lg sm:text-xl"></i>
                </div>
                {% endif %}
                
                <!-- Status Badge -->
                <div class="absolute top-1 left-1">
                    <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-semibold
                        {% if service.status == 'active' %}bg-green-100 text-green-800
                        {% elif service.status == 'inactive' %}bg-gray-100 text-gray-800
                        {% elif service.status == 'coming_soon' %}bg-yellow-100 text-yellow-800
                        {% elif service.status == 'maintenance' %}bg-red-100 text-red-800{% endif %}">
                        {% if service.status == 'active' %}Aktif
                        {% elif service.status == 'inactive' %}Tidak Aktif
                        {% elif service.status == 'coming_soon' %}Segera Hadir
                        {% elif service.status == 'maintenance' %}Maintenance{% endif %}
                    </span>
                </div>
                
                <!-- Priority Badge -->
                <div class="absolute top-1 right-1">
                    <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-semibold
                        {% if service.priority == 'low' %}bg-blue-100 text-blue-800
                        {% elif service.priority == 'medium' %}bg-orange-100 text-orange-800
                        {% elif service.priority == 'high' %}bg-pink-100 text-pink-800
                        {% elif service.priority == 'urgent' %}bg-red-100 text-red-800{% endif %}">
                        {{ service.priority|title }}
                    </span>
                </div>
            </div>
            
            <!-- Card Body - Minimalis -->
            <div class="p-2 sm:p-3 relative">
                <!-- Checkbox for bulk selection -->
                <div class="absolute top-2 right-2 z-10">
                    <input type="checkbox" class="service-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 bg-white shadow-sm" 
                           value="{{ service.id }}" 
                           data-service-name="{{ service.title|escapejs }}">
                </div>
                <h5 class="font-semibold text-gray-800 text-xs sm:text-sm mb-1 line-clamp-2 pr-8">{{ service.title }}</h5>
                <p class="text-gray-600 text-xs mb-2 line-clamp-2">{{ service.description|truncatechars:50 }}</p>
                
                <!-- Features - Minimalis -->
                <div class="flex flex-wrap gap-1 mb-2">
                    {% if service.is_featured %}
                    <span class="bg-yellow-100 text-yellow-800 text-xs px-1.5 py-0.5 rounded-full">Featured</span>
                    {% endif %}
                    {% if service.is_popular %}
                    <span class="bg-green-100 text-green-800 text-xs px-1.5 py-0.5 rounded-full">Popular</span>
                    {% endif %}
                    {% if service.is_new %}
                    <span class="bg-blue-100 text-blue-800 text-xs px-1.5 py-0.5 rounded-full">New</span>
                    {% endif %}
                </div>
                
                <!-- Action Buttons - Minimalis -->
                <div class="flex gap-1">
                    <a href="{% url 'layanan_public:service_detail' service.slug %}" 
                       class="bg-blue-50 hover:bg-blue-100 text-blue-700 px-2 py-1 rounded text-xs font-medium transition-colors text-center flex-1" 
                       target="_blank">
                        <i class="fas fa-eye mr-1"></i>Lihat
                    </a>
                    <a href="{% url 'admin_panel:layanan:admin_service_update' service.slug %}" 
                       class="bg-yellow-50 hover:bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-xs font-medium transition-colors text-center flex-1">
                        <i class="fas fa-edit mr-1"></i>Edit
                    </a>
                    <button class="bg-red-50 hover:bg-red-100 text-red-700 px-2 py-1 rounded text-xs font-medium transition-colors delete-btn flex-1" 
                            data-service-name="{{ service.title|escapejs }}" 
                            data-delete-url="{% url 'admin_panel:layanan:admin_service_delete' service.slug %}">
                        <i class="fas fa-trash mr-1"></i>Hapus
                    </button>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    
    <!-- Pagination -->
    {% if is_paginated %}
    <div class="flex justify-center items-center gap-2 mt-6 sm:mt-8">
        {% if page_obj.has_previous %}
        <a href="?page=1" class="bg-blue-50 hover:bg-blue-100 text-blue-700 px-3 py-2 rounded-lg text-sm font-medium transition-colors">First</a>
        <a href="?page={{ page_obj.previous_page_number }}" class="bg-blue-50 hover:bg-blue-100 text-blue-700 px-3 py-2 rounded-lg text-sm font-medium transition-colors">Previous</a>
        {% endif %}
        
        {% for num in page_obj.paginator.page_range %}
        {% if page_obj.number == num %}
        <span class="bg-blue-600 text-white px-3 py-2 rounded-lg text-sm font-medium">{{ num }}</span>
        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
        <a href="?page={{ num }}" class="bg-blue-50 hover:bg-blue-100 text-blue-700 px-3 py-2 rounded-lg text-sm font-medium transition-colors">{{ num }}</a>
        {% endif %}
        {% endfor %}
        
        {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}" class="bg-blue-50 hover:bg-blue-100 text-blue-700 px-3 py-2 rounded-lg text-sm font-medium transition-colors">Next</a>
        <a href="?page={{ page_obj.paginator.num_pages }}" class="bg-blue-50 hover:bg-blue-100 text-blue-700 px-3 py-2 rounded-lg text-sm font-medium transition-colors">Last</a>
        {% endif %}
    </div>
    {% endif %}
    
    {% else %}
    <!-- Empty State -->
    <div class="text-center py-8 sm:py-12">
        <div class="text-gray-400 mb-4">
            <i class="fas fa-search text-4xl sm:text-5xl"></i>
        </div>
        <h4 class="text-gray-600 text-lg sm:text-xl font-semibold mb-2">Tidak ada layanan ditemukan</h4>
        <p class="text-gray-500 text-sm sm:text-base mb-6">Coba tambah layanan baru.</p>
        <a href="{% url 'admin_panel:layanan:admin_service_create' %}" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
            <i class="fas fa-plus mr-2"></i>Tambah Layanan Pertama
        </a>
    </div>
    {% endif %}
</div>

<!-- Hidden CSRF Token -->
{% csrf_token %}

<!-- Delete Confirmation Modal -->
<div class="fixed inset-0 bg-black bg-opacity-50 hidden z-50" id="deleteModal">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-xl shadow-xl max-w-md w-full">
            <div class="p-4 sm:p-6 border-b border-gray-200">
                <h5 class="text-lg font-semibold text-gray-800">Konfirmasi Hapus</h5>
            </div>
            <div class="p-4 sm:p-6">
                <p class="text-gray-700 mb-2">Apakah Anda yakin ingin menghapus layanan <strong id="serviceName"></strong>?</p>
                <p class="text-red-600 text-sm">Tindakan ini tidak dapat dibatalkan!</p>
            </div>
            <div class="p-4 sm:p-6 bg-gray-50 rounded-b-xl flex gap-3 justify-end">
                <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors" onclick="closeDeleteModal()">Batal</button>
                <button type="button" id="confirmDeleteBtn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">Hapus</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let currentDeleteUrl = '';
let selectedServices = new Set();

function confirmDelete(serviceName, deleteUrl) {
    document.getElementById('serviceName').textContent = serviceName;
    currentDeleteUrl = deleteUrl;
    document.getElementById('deleteModal').classList.remove('hidden');
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.add('hidden');
    currentDeleteUrl = '';
}

function deleteService() {
    if (!currentDeleteUrl) return;
    
    fetch(currentDeleteUrl, {
        method: 'POST',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRFToken': getCSRFToken(),
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            closeDeleteModal();
            location.reload();
        } else {
            alert('Error: ' + (data.message || 'Gagal menghapus layanan'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Terjadi kesalahan saat menghapus layanan');
    });
}

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() {
    const token = document.querySelector('[name=csrfmiddlewaretoken]');
    if (token) return token.value;
    return getCookie('csrftoken');
}

function updateBulkActionsToolbar() {
    const selectedCount = selectedServices.size;
    const toolbar = document.getElementById('bulkActionsToolbar');
    const countSpan = document.getElementById('selectedCount');
    
    if (selectedCount > 0) {
        toolbar.classList.remove('hidden');
        countSpan.textContent = selectedCount + ' dipilih';
    } else {
        toolbar.classList.add('hidden');
    }
}

function getSelectedServiceIds() {
    return Array.from(selectedServices);
}

function applyBulkAction() {
    const action = document.getElementById('bulkActionSelect').value;
    const serviceIds = getSelectedServiceIds();
    
    if (!action) {
        alert('Pilih aksi terlebih dahulu!');
        return;
    }
    
    if (serviceIds.length === 0) {
        alert('Pilih layanan terlebih dahulu!');
        return;
    }
    
    if (action === 'delete') {
        if (!confirm(`Apakah Anda yakin ingin menghapus ${serviceIds.length} layanan?`)) {
            return;
        }
    }
    
    const url = action === 'delete' 
        ? '{% url "admin_panel:layanan:admin_service_bulk_delete" %}'
        : '{% url "admin_panel:layanan:admin_service_bulk_update" %}';
    
    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCSRFToken()
        },
        body: JSON.stringify({
            service_ids: serviceIds,
            action: action
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Error: ' + (data.message || 'Gagal melakukan aksi'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Terjadi kesalahan saat melakukan aksi');
    });
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    // Delete button event listeners
    const deleteButtons = document.querySelectorAll('.delete-btn');
    deleteButtons.forEach(button => {
        button.addEventListener('click', function() {
            const serviceName = this.getAttribute('data-service-name');
            const deleteUrl = this.getAttribute('data-delete-url');
            confirmDelete(serviceName, deleteUrl);
        });
    });
    
    // Confirm delete button
    document.getElementById('confirmDeleteBtn').addEventListener('click', deleteService);
    
    // Close modal when clicking outside
    const deleteModal = document.getElementById('deleteModal');
    if (deleteModal) {
        deleteModal.addEventListener('click', function(e) {
            if (e.target === this) {
                closeDeleteModal();
            }
        });
    }
    
    // Checkbox event listeners for bulk selection
    const checkboxes = document.querySelectorAll('.service-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const serviceId = parseInt(this.value);
            if (this.checked) {
                selectedServices.add(serviceId);
            } else {
                selectedServices.delete(serviceId);
            }
            updateBulkActionsToolbar();
        });
    });
    
    // Select all checkbox (if exists)
    const selectAllCheckbox = document.getElementById('selectAll');
    if (selectAllCheckbox) {
        selectAllCheckbox.addEventListener('change', function() {
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
                const serviceId = parseInt(checkbox.value);
                if (this.checked) {
                    selectedServices.add(serviceId);
                } else {
                    selectedServices.delete(serviceId);
                }
            });
            updateBulkActionsToolbar();
        });
    }
    
    // Bulk action buttons
    document.getElementById('applyBulkAction').addEventListener('click', applyBulkAction);
    document.getElementById('clearSelection').addEventListener('click', function() {
        checkboxes.forEach(checkbox => {
            checkbox.checked = false;
        });
        selectedServices.clear();
        updateBulkActionsToolbar();
        document.getElementById('bulkActionSelect').value = '';
    });
});
</script>
{% endblock %}