<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Настройки сайта - SmartSolTech Admin</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/fixes.css">
</head>
<body class="bg-gray-100">
    <!-- Admin Header -->
    <header class="bg-white shadow-sm border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <h1 class="text-xl font-semibold text-gray-900">
                        <i class="fas fa-cogs mr-2"></i>
                        SmartSolTech Admin
                    </h1>
                </div>
                <div class="flex items-center space-x-4">
                    <span class="text-sm text-gray-600">
                        Добро пожаловать, <%= user ? user.name : 'Admin' %>!
                    </span>
                    <a href="/" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-external-link-alt mr-1"></i>
                        Посмотреть сайт
                    </a>
                    <form action="/admin/logout" method="post" class="inline">
                        <button type="submit" class="text-red-600 hover:text-red-800">
                            <i class="fas fa-sign-out-alt mr-1"></i>
                            Выход
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </header>

    <div class="flex">
        <!-- Admin Sidebar -->
        <aside class="w-64 bg-white shadow-sm admin-sidebar min-h-screen">
            <nav class="mt-5 px-2">
                <div class="space-y-1">
                    <a href="/admin/dashboard" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
                        <i class="fas fa-tachometer-alt mr-3"></i>
                        Панель управления
                    </a>
                    <a href="/admin/portfolio" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
                        <i class="fas fa-briefcase mr-3"></i>
                        Портфолио
                    </a>
                    <a href="/admin/services" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
                        <i class="fas fa-cog mr-3"></i>
                        Услуги
                    </a>
                    <a href="/admin/contacts" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
                        <i class="fas fa-envelope mr-3"></i>
                        Сообщения
                    </a>
                    <a href="/admin/media" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
                        <i class="fas fa-images mr-3"></i>
                        Медиа
                    </a>
                    <a href="/admin/settings" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md bg-blue-100 text-blue-700">
                        <i class="fas fa-cogs mr-3"></i>
                        Настройки
                    </a>
                    <a href="/admin/telegram" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
                        <i class="fab fa-telegram mr-3"></i>
                        Telegram Bot
                    </a>
                    <a href="/admin/banner-editor" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
                        <i class="fas fa-paint-brush mr-3"></i>
                        Редактор баннеров
                    </a>
                </div>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 p-8">
            <div class="space-y-6">
                <!-- Header -->
                <div class="bg-white shadow rounded-lg p-6">
                    <h1 class="text-2xl font-bold text-gray-900 flex items-center">
                        <i class="fas fa-cogs mr-3 text-blue-600"></i>
                        Настройки сайта
                    </h1>
                    <p class="mt-2 text-gray-600">Управление основными параметрами сайта</p>
                </div>

                <!-- Site Settings -->
                <div class="bg-white shadow rounded-lg">
                    <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                        <h3 class="text-lg leading-6 font-medium text-gray-900">
                            <i class="fas fa-cogs mr-2"></i>
                            Настройки сайта
                        </h3>
                    </div>
    
    <form id="settingsForm" class="p-6">
        <div class="space-y-8">
            <!-- Basic Settings -->
            <div>
                <h4 class="text-lg font-medium text-gray-900 mb-4">Основные настройки</h4>
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <label for="siteName" class="block text-sm font-medium text-gray-700">Название сайта</label>
                        <input type="text" name="siteName" id="siteName" 
                               value="<%= settings.siteName || 'SmartSolTech' %>"
                               class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    
                    <div class="sm:col-span-2">
                        <label for="siteDescription" class="block text-sm font-medium text-gray-700">Описание сайта</label>
                        <textarea name="siteDescription" id="siteDescription" rows="3"
                                  class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"><%= settings.siteDescription || '' %></textarea>
                    </div>
                    
                    <div>
                        <label for="logo" class="block text-sm font-medium text-gray-700">Логотип</label>
                        <input type="file" name="logo" id="logo" accept="image/*"
                               class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                        <% if (settings.logo) { %>
                            <img src="<%= settings.logo %>" alt="Current logo" class="mt-2 h-16 w-auto">
                        <% } %>
                    </div>
                    
                    <div>
                        <label for="favicon" class="block text-sm font-medium text-gray-700">Favicon</label>
                        <input type="file" name="favicon" id="favicon" accept="image/*"
                               class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                        <% if (settings.favicon) { %>
                            <img src="<%= settings.favicon %>" alt="Current favicon" class="mt-2 h-8 w-8">
                        <% } %>
                    </div>
                </div>
            </div>
            
            <!-- Contact Information -->
            <div>
                <h4 class="text-lg font-medium text-gray-900 mb-4">Контактная информация</h4>
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <div>
                        <label for="contactEmail" class="block text-sm font-medium text-gray-700">Email</label>
                        <input type="email" name="contact.email" id="contactEmail" 
                               value="<%= settings.contact?.email || '' %>"
                               class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    
                    <div>
                        <label for="contactPhone" class="block text-sm font-medium text-gray-700">Телефон</label>
                        <input type="tel" name="contact.phone" id="contactPhone" 
                               value="<%= settings.contact?.phone || '' %>"
                               class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    
                    <div class="sm:col-span-2">
                        <label for="contactAddress" class="block text-sm font-medium text-gray-700">Адрес</label>
                        <textarea name="contact.address" id="contactAddress" rows="2"
                                  class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"><%= settings.contact?.address || '' %></textarea>
                    </div>
                </div>
            </div>
            
            <!-- Social Media -->
            <div>
                <h4 class="text-lg font-medium text-gray-900 mb-4">Социальные сети</h4>
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <div>
                        <label for="socialFacebook" class="block text-sm font-medium text-gray-700">Facebook</label>
                        <input type="url" name="social.facebook" id="socialFacebook" 
                               value="<%= settings.social?.facebook || '' %>"
                               class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    
                    <div>
                        <label for="socialTwitter" class="block text-sm font-medium text-gray-700">Twitter</label>
                        <input type="url" name="social.twitter" id="socialTwitter" 
                               value="<%= settings.social?.twitter || '' %>"
                               class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    
                    <div>
                        <label for="socialInstagram" class="block text-sm font-medium text-gray-700">Instagram</label>
                        <input type="url" name="social.instagram" id="socialInstagram" 
                               value="<%= settings.social?.instagram || '' %>"
                               class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    
                    <div>
                        <label for="socialLinkedin" class="block text-sm font-medium text-gray-700">LinkedIn</label>
                        <input type="url" name="social.linkedin" id="socialLinkedin" 
                               value="<%= settings.social?.linkedin || '' %>"
                               class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    </div>
                </div>
            </div>
            
            <!-- Telegram Bot Settings -->
            <div>
                <h4 class="text-lg font-medium text-gray-900 mb-4">Telegram Bot</h4>
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <div>
                        <label for="telegramBotToken" class="block text-sm font-medium text-gray-700">Bot Token</label>
                        <input type="text" name="telegram.botToken" id="telegramBotToken" 
                               value="<%= settings.telegram?.botToken || '' %>"
                               placeholder="123456789:AABBccDDeeFFggHHiiJJkkLLmmNNooP"
                               class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                        <p class="mt-1 text-sm text-gray-500">Получите токен у @BotFather</p>
                    </div>
                    
                    <div>
                        <label for="telegramChatId" class="block text-sm font-medium text-gray-700">Chat ID</label>
                        <input type="text" name="telegram.chatId" id="telegramChatId" 
                               value="<%= settings.telegram?.chatId || '' %>"
                               placeholder="-123456789"
                               class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                        <p class="mt-1 text-sm text-gray-500">ID чата для уведомлений</p>
                    </div>
                    
                    <div class="sm:col-span-2">
                        <button type="button" id="testTelegram" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium">
                            <i class="fab fa-telegram-plane mr-1"></i>
                            Проверить соединение
                        </button>
                        <div id="telegramStatus" class="mt-2"></div>
                    </div>
                </div>
            </div>
            
            <!-- SEO Settings -->
            <div>
                <h4 class="text-lg font-medium text-gray-900 mb-4">SEO настройки</h4>
                <div class="space-y-4">
                    <div>
                        <label for="seoTitle" class="block text-sm font-medium text-gray-700">Meta Title</label>
                        <input type="text" name="seo.title" id="seoTitle" 
                               value="<%= settings.seo?.title || '' %>"
                               class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    
                    <div>
                        <label for="seoDescription" class="block text-sm font-medium text-gray-700">Meta Description</label>
                        <textarea name="seo.description" id="seoDescription" rows="3"
                                  class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"><%= settings.seo?.description || '' %></textarea>
                    </div>
                    
                    <div>
                        <label for="seoKeywords" class="block text-sm font-medium text-gray-700">Keywords</label>
                        <input type="text" name="seo.keywords" id="seoKeywords" 
                               value="<%= settings.seo?.keywords || '' %>"
                               placeholder="веб-разработка, мобильные приложения, дизайн"
                               class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Submit Button -->
        <div class="mt-8 flex justify-end">
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                <i class="fas fa-save mr-1"></i>
                Сохранить настройки
            </button>
        </div>
    </form>
</div>

<script>
document.getElementById('settingsForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    try {
        const response = await fetch('/api/admin/settings', {
            method: 'POST',
            body: formData
        });
        
        const data = await response.json();
        
        if (data.success) {
            alert('Настройки успешно сохранены');
            location.reload();
        } else {
            alert('Ошибка при сохранении настроек: ' + data.message);
        }
    } catch (error) {
        console.error('Error:', error);
        alert('Ошибка при сохранении настроек');
    }
});

// Test Telegram connection
document.getElementById('testTelegram').addEventListener('click', async function() {
    const botToken = document.getElementById('telegramBotToken').value;
    const chatId = document.getElementById('telegramChatId').value;
    const statusDiv = document.getElementById('telegramStatus');
    
    if (!botToken || !chatId) {
        statusDiv.innerHTML = '<p class="text-red-600">Пожалуйста, заполните Bot Token и Chat ID</p>';
        return;
    }
    
    this.disabled = true;
    this.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Проверка...';
    
    try {
        const response = await fetch('/api/admin/telegram/test', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ botToken, chatId })
        });
        
        const data = await response.json();
        
        if (data.success) {
            statusDiv.innerHTML = '<p class="text-green-600"><i class="fas fa-check mr-1"></i> Соединение установлено успешно!</p>';
        } else {
            statusDiv.innerHTML = `<p class="text-red-600"><i class="fas fa-times mr-1"></i> Ошибка: ${data.message}</p>`;
        }
    } catch (error) {
        statusDiv.innerHTML = '<p class="text-red-600"><i class="fas fa-times mr-1"></i> Ошибка соединения</p>';
    }
    
    this.disabled = false;
    this.innerHTML = '<i class="fab fa-telegram-plane mr-1"></i> Проверить соединение';
});
</script>
            </div>
        </main>
    </div>

    <!-- JavaScript -->
    <script src="/js/main.js"></script>
</body>
</html>