<!-- Portfolio List -->
<div class="bg-white shadow rounded-lg">
    <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-lg leading-6 font-medium text-gray-900">
                    <i class="fas fa-briefcase mr-2"></i>
                    Управление портфолио
                </h3>
                <p class="mt-1 text-sm text-gray-500">
                    Всего проектов: <%= portfolio ? portfolio.length : 0 %>
                </p>
            </div>
            <div class="flex space-x-3">
                <div class="flex rounded-md shadow-sm">
                    <input type="text" id="searchInput" placeholder="Поиск проектов..." 
                           class="block w-full rounded-l-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    <button type="button" onclick="searchProjects()" 
                            class="relative -ml-px inline-flex items-center px-3 py-2 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                <select id="categoryFilter" onchange="filterByCategory()" class="rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm">
                    <option value="">Все категории</option>
                    <option value="web-development">Веб-разработка</option>
                    <option value="mobile-app">Мобильное приложение</option>
                    <option value="ui-ux-design">UI/UX дизайн</option>
                    <option value="e-commerce">E-commerce</option>
                    <option value="enterprise">Корпоративное</option>
                    <option value="other">Другое</option>
                </select>
                <a href="/admin/portfolio/add" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium inline-flex items-center">
                    <i class="fas fa-plus mr-2"></i>
                    Добавить проект
                </a>
            </div>
        </div>
    </div>
    
    <div class="bg-white shadow overflow-hidden sm:rounded-md">
        <ul role="list" class="divide-y divide-gray-200">
            <% if (portfolio && portfolio.length > 0) { %>
                <% portfolio.forEach(item => { %>
                    <li class="portfolio-item" data-category="<%= item.category %>" data-title="<%= item.title.toLowerCase() %>">
                        <div class="px-4 py-4">
                            <div class="flex items-start justify-between">
                                <div class="flex items-start space-x-4">
                                    <div class="flex-shrink-0">
                                        <% if (item.images && item.images.length > 0) { %>
                                            <img class="h-16 w-16 rounded-lg object-cover border border-gray-200" src="<%= item.images[0].url %>" alt="<%= item.title %>">
                                        <% } else { %>
                                            <div class="h-16 w-16 rounded-lg bg-gray-100 border border-gray-200 flex items-center justify-center">
                                                <i class="fas fa-image text-gray-400 text-xl"></i>
                                            </div>
                                        <% } %>
                                    </div>
                                    <div class="min-w-0 flex-1">
                                        <div class="flex items-center">
                                            <h4 class="text-base font-medium text-gray-900 truncate"><%= item.title %></h4>
                                            <div class="ml-3 flex items-center space-x-2">
                                                <% if (item.featured) { %>
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                        <i class="fas fa-star mr-1"></i>
                                                        Рекомендуемое
                                                    </span>
                                                <% } %>
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium <%= item.isPublished ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' %>">
                                                    <i class="fas <%= item.isPublished ? 'fa-check-circle' : 'fa-clock' %> mr-1"></i>
                                                    <%= item.isPublished ? 'Опубликовано' : 'Черновик' %>
                                                </span>
                                            </div>
                                        </div>
                                        <p class="mt-1 text-sm text-gray-600 line-clamp-2"><%= item.shortDescription || 'Описание не указано' %></p>
                                        <div class="mt-2 flex items-center text-sm text-gray-500 space-x-4">
                                            <div class="flex items-center">
                                                <i class="fas fa-folder mr-1"></i>
                                                <span class="capitalize"><%= item.category.replace('-', ' ') %></span>
                                            </div>
                                            <div class="flex items-center">
                                                <i class="fas fa-calendar mr-1"></i>
                                                <%= new Date(item.createdAt).toLocaleDateString('ru-RU') %>
                                            </div>
                                            <% if (item.viewCount && item.viewCount > 0) { %>
                                                <div class="flex items-center">
                                                    <i class="fas fa-eye mr-1"></i>
                                                    <%= item.viewCount %> просмотров
                                                </div>
                                            <% } %>
                                            <% if (item.technologies && item.technologies.length > 0) { %>
                                                <div class="flex items-center">
                                                    <i class="fas fa-code mr-1"></i>
                                                    <%= item.technologies.slice(0, 2).join(', ') %><%= item.technologies.length > 2 ? '...' : '' %>
                                                </div>
                                            <% } %>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-1 ml-4">
                                    <% if (item.isPublished) { %>
                                        <a href="/portfolio/<%= item.id %>" target="_blank" 
                                           class="inline-flex items-center justify-center w-8 h-8 rounded-md text-gray-400 hover:text-blue-600 hover:bg-blue-50 transition-colors">
                                            <i class="fas fa-external-link-alt text-sm"></i>
                                        </a>
                                    <% } %>
                                    <button onclick="togglePublish('<%= item.id %>', '<%= item.isPublished %>')" 
                                            class="inline-flex items-center justify-center w-8 h-8 rounded-md text-gray-400 hover:text-green-600 hover:bg-green-50 transition-colors"
                                            title="<%= item.isPublished ? 'Скрыть' : 'Опубликовать' %>">
                                        <i class="fas <%= item.isPublished ? 'fa-eye-slash' : 'fa-eye' %> text-sm"></i>
                                    </button>
                                    <a href="/admin/portfolio/edit/<%= item.id %>" 
                                       class="inline-flex items-center justify-center w-8 h-8 rounded-md text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 transition-colors"
                                       title="Редактировать">
                                        <i class="fas fa-edit text-sm"></i>
                                    </a>
                                    <button onclick="duplicatePortfolio('<%= item.id %>')" 
                                            class="inline-flex items-center justify-center w-8 h-8 rounded-md text-gray-400 hover:text-yellow-600 hover:bg-yellow-50 transition-colors"
                                            title="Дублировать">
                                        <i class="fas fa-copy text-sm"></i>
                                    </button>
                                    <button onclick="deletePortfolio('<%= item.id %>', '<%= item.title %>')" 
                                            class="inline-flex items-center justify-center w-8 h-8 rounded-md text-gray-400 hover:text-red-600 hover:bg-red-50 transition-colors"
                                            title="Удалить">
                                        <i class="fas fa-trash text-sm"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </li>
                <% }) %>
            <% } else { %>
                <li>
                    <div class="px-4 py-8 text-center">
                        <i class="fas fa-briefcase text-4xl text-gray-300 mb-4"></i>
                        <p class="text-gray-500">Проекты не найдены</p>
                        <a href="/admin/portfolio/add" class="mt-2 inline-block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
                            Добавить первый проект
                        </a>
                    </div>
                </li>
            <% } %>
        </ul>
    </div>
    
    <!-- Pagination -->
    <% if (pagination && pagination.total > 1) { %>
        <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
            <div class="flex-1 flex justify-between sm:hidden">
                <% if (pagination.hasPrev) { %>
                    <a href="?page=<%= pagination.current - 1 %>" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        Предыдущая
                    </a>
                <% } %>
                <% if (pagination.hasNext) { %>
                    <a href="?page=<%= pagination.current + 1 %>" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        Следующая
                    </a>
                <% } %>
            </div>
        </div>
    <% } %>
</div>

<script>
function deletePortfolio(id, title) {
    if (confirm(`Вы уверены, что хотите удалить проект "${title}"?\n\nЭто действие нельзя отменить.`)) {
        const button = event.target.closest('button');
        const originalContent = button.innerHTML;
        button.innerHTML = '<i class="fas fa-spinner fa-spin text-sm"></i>';
        button.disabled = true;
        
        fetch(`/admin/portfolio/${id}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Проект успешно удален', 'success');
                // Плавное удаление элемента
                const listItem = button.closest('li');
                listItem.style.opacity = '0.5';
                listItem.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    listItem.remove();
                    updateProjectCount();
                }, 300);
            } else {
                showNotification(data.message || 'Ошибка при удалении проекта', 'error');
                button.innerHTML = originalContent;
                button.disabled = false;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('Ошибка при удалении проекта', 'error');
            button.innerHTML = originalContent;
            button.disabled = false;
        });
    }
}

function togglePublish(id, currentStatus) {
    const button = event.target.closest('button');
    const originalContent = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin text-sm"></i>';
    button.disabled = true;
    
    fetch(`/admin/portfolio/${id}/toggle-publish`, {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showNotification(data.message, 'success');
            // Обновляем интерфейс
            const listItem = button.closest('li');
            const statusSpan = listItem.querySelector('.inline-flex');
            const newStatus = data.isPublished;
            
            // Обновляем иконку кнопки
            button.innerHTML = `<i class="fas ${newStatus ? 'fa-eye-slash' : 'fa-eye'} text-sm"></i>`;
            button.title = newStatus ? 'Скрыть' : 'Опубликовать';
            
            // Обновляем статус
            statusSpan.className = `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${newStatus ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`;
            statusSpan.innerHTML = `<i class="fas ${newStatus ? 'fa-check-circle' : 'fa-clock'} mr-1"></i>${newStatus ? 'Опубликовано' : 'Черновик'}`;
            
            button.disabled = false;
        } else {
            showNotification(data.message || 'Ошибка при изменении статуса', 'error');
            button.innerHTML = originalContent;
            button.disabled = false;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('Ошибка при изменении статуса', 'error');
        button.innerHTML = originalContent;
        button.disabled = false;
    });
}

function duplicatePortfolio(id) {
    if (confirm('Создать копию этого проекта?')) {
        const button = event.target.closest('button');
        const originalContent = button.innerHTML;
        button.innerHTML = '<i class="fas fa-spinner fa-spin text-sm"></i>';
        button.disabled = true;
        
        // Здесь можно добавить API для дублирования
        showNotification('Функция дублирования будет добавлена позже', 'info');
        button.innerHTML = originalContent;
        button.disabled = false;
    }
}

function searchProjects() {
    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
    const items = document.querySelectorAll('.portfolio-item');
    
    items.forEach(item => {
        const title = item.dataset.title;
        if (title.includes(searchTerm)) {
            item.style.display = 'block';
        } else {
            item.style.display = 'none';
        }
    });
    
    updateProjectCount();
}

function filterByCategory() {
    const selectedCategory = document.getElementById('categoryFilter').value;
    const items = document.querySelectorAll('.portfolio-item');
    
    items.forEach(item => {
        const category = item.dataset.category;
        if (!selectedCategory || category === selectedCategory) {
            item.style.display = 'block';
        } else {
            item.style.display = 'none';
        }
    });
    
    updateProjectCount();
}

function updateProjectCount() {
    const visibleItems = document.querySelectorAll('.portfolio-item[style="display: block"], .portfolio-item:not([style*="display: none"])').length;
    const totalItems = document.querySelectorAll('.portfolio-item').length;
    const countElement = document.querySelector('h3 + p');
    if (countElement) {
        countElement.textContent = `Показано проектов: ${visibleItems} из ${totalItems}`;
    }
}

function showNotification(message, type = 'info') {
    // Создаем уведомление
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 z-50 px-4 py-3 rounded-md shadow-lg text-white max-w-sm transform transition-all duration-300 translate-x-full`;
    
    switch(type) {
        case 'success':
            notification.classList.add('bg-green-600');
            break;
        case 'error':
            notification.classList.add('bg-red-600');
            break;
        case 'info':
            notification.classList.add('bg-blue-600');
            break;
        default:
            notification.classList.add('bg-gray-600');
    }
    
    notification.innerHTML = `
        <div class="flex items-center">
            <i class="fas ${type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle'} mr-2"></i>
            <span>${message}</span>
        </div>
    `;
    
    document.body.appendChild(notification);
    
    // Показываем уведомление
    setTimeout(() => {
        notification.classList.remove('translate-x-full');
    }, 100);
    
    // Скрываем уведомление через 3 секунды
    setTimeout(() => {
        notification.classList.add('translate-x-full');
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
}

// Обработчик для поиска по Enter
document.getElementById('searchInput').addEventListener('keyup', function(event) {
    if (event.key === 'Enter') {
        searchProjects();
    }
});

// Инициализация
document.addEventListener('DOMContentLoaded', function() {
    updateProjectCount();
});
</script>