new-templane/resources/view/admin/index_new.php

<?php 
$pageTitle = 'Site Settings - Admin Panel';
$headerTitle = 'Site Settings';
$activeTab = 'content';

$tabs = [
    'content' => [
        'label' => 'Content',
        'icon' => 'M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z'
    ],
    'options' => [
        'label' => 'Options',
        'icon' => 'M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z'
    ],
    'styles' => [
        'label' => 'Styles',
        'icon' => 'M4 2a2 2 0 00-2 2v11a3 3 0 106 0V4a2 2 0 00-2-2H4z'
    ],
    'seo' => [
        'label' => 'SEO & Meta',
        'icon' => 'M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z'
    ]
];

ob_start();
?>
<?php include __DIR__ . '/partials/tabs.php'; ?>

<!-- Form -->
                    <form method="POST" action="" enctype="multipart/form-data">
                        <input type="hidden" name="form_submitted" value="1">

                        <!-- Content Tab -->
                        <div x-show="activeTab === 'content'" class="bg-white rounded-lg shadow-sm">
                            <div class="p-6 space-y-8">

                                <!-- Button Settings -->
                                <div>
                                    <h3 class="text-lg font-medium text-gray-900 mb-6 flex items-center">
                                        <svg class="w-5 h-5 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                        </svg>
                                        Header Button Settings
                                    </h3>
                                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Header Button Text 1</label>
                                            <input type="text" name='content[header_btn_1]' value="<?= htmlspecialchars($content['header_btn_1'] ?? '') ?>"
                                                   class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        </div>

                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Header Button Text 2</label>
                                            <input type="text" name='content[header_btn_2]' value="<?= htmlspecialchars($content['header_btn_2'] ?? '') ?>"
                                                   class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        </div>

                                        <div class="flex items-center lg:col-span-2">
                                            <input type="hidden" name="content[hide-btns]" value="0">
                                            <input type="checkbox" name="content[hide-btns]" value="1" <?= !empty($content['hide-btns']) ? 'checked' : '' ?>
                                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                            <label class="ml-2 block text-sm text-gray-900">Hide header buttons</label>
                                        </div>
                                    </div>
                                </div>

                                <!-- Images & Media Section -->
                                <div>
                                    <h3 class="text-lg font-medium text-gray-900 mb-6 flex items-center">
                                        <svg class="w-5 h-5 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"/>
                                        </svg>
                                        Images & Media
                                    </h3>
                                    
                                    <!-- Header Logo -->
                                    <div class="bg-gray-50 p-4 rounded-lg mb-6">
                                        <h4 class="text-md font-medium text-gray-800 mb-4">Header Logo</h4>
                                        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                                            <div>
                                                <?php 
                                                $headerLogo = [];
                                                if (isset($content['header-logo']) && !empty($content['header-logo'])) {
                                                    $headerLogo = json_decode($content['header-logo'], true) ?: [];
                                                }
                                                ?>
                                                <?php if (!empty($headerLogo['src'])): ?>
                                                    <img class="w-24 h-24 object-cover rounded-lg border mb-2" src="../<?= $headerLogo['src'] ?>" alt="Header Logo">
                                                <?php endif; ?>
                                                <label class="block text-sm font-medium text-gray-700 mb-2">Upload Header Logo</label>
                                                <input type="file" name="content[header-logo]" accept="image/*" 
                                                       class="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">
                                            </div>
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-2">Title</label>
                                                <input type="text" name='content[header-logo][title]' value="<?= htmlspecialchars($headerLogo['title'] ?? '') ?>" 
                                                       class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            </div>
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-2">Alt Text</label>
                                                <input type="text" name='content[header-logo][alt]' value="<?= htmlspecialchars($headerLogo['alt'] ?? '') ?>" 
                                                       class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Banner Logo -->
                                    <div class="bg-gray-50 p-4 rounded-lg mb-6">
                                        <h4 class="text-md font-medium text-gray-800 mb-4">Banner Image</h4>
                                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                                            <div>
                                                <?php 
                                                $bannerLogo = [];
                                                if (isset($content['banner-logo']) && !empty($content['banner-logo'])) {
                                                    $bannerLogo = json_decode($content['banner-logo'], true) ?: [];
                                                }
                                                ?>
                                                <?php if (!empty($bannerLogo['src'])): ?>
                                                    <img class="w-full h-24 object-cover rounded-lg border mb-2" src="../<?= $bannerLogo['src'] ?>" alt="Banner Image">
                                                <?php endif; ?>
                                                <label class="block text-sm font-medium text-gray-700 mb-2">Upload Banner Image</label>
                                                <input type="file" name="content[banner-logo]" accept="image/*" 
                                                       class="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">
                                            </div>
                                            <div class="space-y-4">
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700 mb-2">Title</label>
                                                    <input type="text" name='content[banner-logo][title]' value="<?= htmlspecialchars($bannerLogo['title'] ?? '') ?>" 
                                                           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                                </div>
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700 mb-2">Alt Text</label>
                                                    <input type="text" name='content[banner-logo][alt]' value="<?= htmlspecialchars($bannerLogo['alt'] ?? '') ?>" 
                                                           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                                </div>
                                                <div class="grid grid-cols-2 gap-4">
                                                    <div>
                                                        <label class="block text-sm font-medium text-gray-700 mb-2">Width</label>
                                                        <input type="text" name='content[banner-logo][width]' value="<?= htmlspecialchars($bannerLogo['width'] ?? '') ?>" 
                                                               class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                                    </div>
                                                    <div>
                                                        <label class="block text-sm font-medium text-gray-700 mb-2">Height</label>
                                                        <input type="text" name='content[banner-logo][height]' value="<?= htmlspecialchars($bannerLogo['height'] ?? '') ?>" 
                                                               class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Footer Logo -->
                                    <div class="bg-gray-50 p-4 rounded-lg mb-6">
                                        <h4 class="text-md font-medium text-gray-800 mb-4">Footer Logo</h4>
                                        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                                            <div>
                                                <?php 
                                                $footerLogo = [];
                                                if (isset($content['footer-logo']) && !empty($content['footer-logo'])) {
                                                    $footerLogo = json_decode($content['footer-logo'], true) ?: [];
                                                }
                                                ?>
                                                <?php if (!empty($footerLogo['src'])): ?>
                                                    <img class="w-24 h-24 object-cover rounded-lg border mb-2" src="../<?= $footerLogo['src'] ?>" alt="Footer Logo">
                                                <?php endif; ?>
                                                <label class="block text-sm font-medium text-gray-700 mb-2">Upload Footer Logo</label>
                                                <input type="file" name="content[footer-logo]" accept="image/*" 
                                                       class="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">
                                            </div>
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-2">Title</label>
                                                <input type="text" name='content[footer-logo][title]' value="<?= htmlspecialchars($footerLogo['title'] ?? '') ?>" 
                                                       class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            </div>
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-2">Alt Text</label>
                                                <input type="text" name='content[footer-logo][alt]' value="<?= htmlspecialchars($footerLogo['alt'] ?? '') ?>" 
                                                       class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Other Images -->
                                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                                        <div class="bg-gray-50 p-4 rounded-lg">
                                            <h4 class="text-md font-medium text-gray-800 mb-4">Favicon</h4>
                                            <?php if (!empty($content['favicon'])): ?>
                                                <img class="w-16 h-16 object-cover rounded border mb-2" src="../<?= $content['favicon'] ?>" alt="Favicon">
                                            <?php endif; ?>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Upload Favicon</label>
                                            <input type="file" name="content[favicon]" accept="image/*"
                                                   class="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">
                                        </div>
                                    </div>
                                </div>

                                <!-- Footer Settings -->
                                <div>
                                    <h3 class="text-lg font-medium text-gray-900 mb-6 flex items-center">
                                        <svg class="w-5 h-5 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                                        </svg>
                                        Footer Content
                                    </h3>
                                    <div class="grid grid-cols-1 gap-6">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Footer Text</label>
                                            <textarea name='content[footer__text]' rows="4" 
                                                      class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"><?= htmlspecialchars($content['footer__text'] ?? '') ?></textarea>
                                        </div>

                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Copyright</label>
                                            <textarea name='content[copyright]' rows="2" 
                                                      class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"><?= htmlspecialchars($content['copyright'] ?? '') ?></textarea>
                                        </div>
                                    </div>
                                </div>

                                <!-- Save Button -->
                                <div class="pt-6 border-t border-gray-200">
                                    <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                        </svg>
                                        Save Changes
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Options Tab -->
                        <div x-show="activeTab === 'options'" class="bg-white rounded-lg shadow-sm">
                            <div class="p-6 space-y-8">
                                
                                <!-- Hash Fields Section -->
                                <div>
                                    <h3 class="text-lg font-medium text-gray-900 mb-6 flex items-center">
                                        <svg class="w-5 h-5 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z" clip-rule="evenodd"/>
                                        </svg>
                                        Hash Fields
                                    </h3>
                                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Hash</label>
                                            <input type="text" name='content[hash]' value="<?= htmlspecialchars($content['hash'] ?? '') ?>" 
                                                   class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        </div>

                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Hash 1</label>
                                            <input type="text" name='content[hash-1]' value="<?= htmlspecialchars($content['hash-1'] ?? '') ?>" 
                                                   class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        </div>

                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Hash 2</label>
                                            <input type="text" name='content[hash-2]' value="<?= htmlspecialchars($content['hash-2'] ?? '') ?>" 
                                                   class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        </div>

                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Hash 3</label>
                                            <input type="text" name='content[hash-3]' value="<?= htmlspecialchars($content['hash-3'] ?? '') ?>" 
                                                   class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        </div>

                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Hash 4</label>
                                            <input type="text" name='content[hash-4]' value="<?= htmlspecialchars($content['hash-4'] ?? '') ?>" 
                                                   class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        </div>

                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Hash 5</label>
                                            <input type="text" name='content[hash-5]' value="<?= htmlspecialchars($content['hash-5'] ?? '') ?>" 
                                                   class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        </div>
                                    </div>
                                </div>

                                <!-- Save Button -->
                                <div class="pt-6 border-t border-gray-200">
                                    <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                        </svg>
                                        Save Changes
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Styles Tab -->
                        <div x-show="activeTab === 'styles'" class="bg-white rounded-lg shadow-sm">
                            <div class="p-6 space-y-8">

                                <!-- Color Settings Section -->
                                <div>
                                    <h3 class="text-lg font-medium text-gray-900 mb-6 flex items-center">
                                        <svg class="w-5 h-5 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v11a3 3 0 106 0V4a2 2 0 00-2-2H4z" clip-rule="evenodd"/>
                                        </svg>
                                        Цветовые настройки
                                    </h3>
                                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                                        <!-- Цвет хедера -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Цвет хедера (шапки сайта)</label>
                                            <div class="flex gap-3">
                                                <input type="color" value="<?= $styles['header_color'] ?? '#1E1E1E' ?>"
                                                       class="w-12 h-10 rounded border border-gray-300 cursor-pointer"
                                                       onchange="this.nextElementSibling.value = this.value">
                                                <input type="text" name='styles[header_color]' value="<?= htmlspecialchars($styles['header_color'] ?? '') ?>"
                                                       placeholder="#1E1E1E"
                                                       class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            </div>
                                        </div>

                                        <!-- Цвет body (фон) -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Цвет body (фон сайта)</label>
                                            <div class="flex gap-3">
                                                <input type="color" value="<?= $styles['body_bg_color'] ?? '#0A0A0A' ?>"
                                                       class="w-12 h-10 rounded border border-gray-300 cursor-pointer"
                                                       onchange="this.nextElementSibling.value = this.value">
                                                <input type="text" name='styles[body_bg_color]' value="<?= htmlspecialchars($styles['body_bg_color'] ?? '') ?>"
                                                       placeholder="#0A0A0A"
                                                       class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            </div>
                                        </div>

                                        <!-- Цвет контентной части -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Цвет контентной части</label>
                                            <div class="flex gap-3">
                                                <input type="color" value="<?= $styles['content_bg_color'] ?? '#1A1A1A' ?>"
                                                       class="w-12 h-10 rounded border border-gray-300 cursor-pointer"
                                                       onchange="this.nextElementSibling.value = this.value">
                                                <input type="text" name='styles[content_bg_color]' value="<?= htmlspecialchars($styles['content_bg_color'] ?? '') ?>"
                                                       placeholder="#1A1A1A"
                                                       class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            </div>
                                        </div>

                                        <!-- Цвет текста основного -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Цвет текста основного</label>
                                            <div class="flex gap-3">
                                                <input type="color" value="<?= $styles['text_color'] ?? '#FFFFFF' ?>"
                                                       class="w-12 h-10 rounded border border-gray-300 cursor-pointer"
                                                       onchange="this.nextElementSibling.value = this.value">
                                                <input type="text" name='styles[text_color]' value="<?= htmlspecialchars($styles['text_color'] ?? '') ?>"
                                                       placeholder="#FFFFFF"
                                                       class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            </div>
                                        </div>

                                        <!-- Цвет текста ссылок в контенте -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Цвет текста ссылок в контенте</label>
                                            <div class="flex gap-3">
                                                <input type="color" value="<?= $styles['link_color'] ?? '#4A9EFF' ?>"
                                                       class="w-12 h-10 rounded border border-gray-300 cursor-pointer"
                                                       onchange="this.nextElementSibling.value = this.value">
                                                <input type="text" name='styles[link_color]' value="<?= htmlspecialchars($styles['link_color'] ?? '') ?>"
                                                       placeholder="#4A9EFF"
                                                       class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            </div>
                                        </div>

                                        <!-- Цвет таблицы -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Цвет таблицы (фон)</label>
                                            <div class="flex gap-3">
                                                <input type="color" value="<?= $styles['table_bg_color'] ?? '#1A1A1A' ?>"
                                                       class="w-12 h-10 rounded border border-gray-300 cursor-pointer"
                                                       onchange="this.nextElementSibling.value = this.value">
                                                <input type="text" name='styles[table_bg_color]' value="<?= htmlspecialchars($styles['table_bg_color'] ?? '') ?>"
                                                       placeholder="#1A1A1A"
                                                       class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            </div>
                                        </div>

                                        <!-- Цвет шапки таблицы -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Цвет шапки таблицы (thead)</label>
                                            <div class="flex gap-3">
                                                <input type="color" value="<?= $styles['table_header_color'] ?? '#2A2A2A' ?>"
                                                       class="w-12 h-10 rounded border border-gray-300 cursor-pointer"
                                                       onchange="this.nextElementSibling.value = this.value">
                                                <input type="text" name='styles[table_header_color]' value="<?= htmlspecialchars($styles['table_header_color'] ?? '') ?>"
                                                       placeholder="#2A2A2A"
                                                       class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            </div>
                                        </div>

                                        <!-- Цвет фона футера -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Цвет фона футера</label>
                                            <div class="flex gap-3">
                                                <input type="color" value="<?= $styles['footer_bg_color'] ?? '#1E1E1E' ?>"
                                                       class="w-12 h-10 rounded border border-gray-300 cursor-pointer"
                                                       onchange="this.nextElementSibling.value = this.value">
                                                <input type="text" name='styles[footer_bg_color]' value="<?= htmlspecialchars($styles['footer_bg_color'] ?? '') ?>"
                                                       placeholder="#1E1E1E"
                                                       class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Save Button -->
                                <div class="pt-6 border-t border-gray-200">
                                    <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                        </svg>
                                        Сохранить изменения
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- SEO Tab -->
                        <div x-show="activeTab === 'seo'" class="bg-white rounded-lg shadow-sm">
                            <div class="p-6">
                                <div class="text-center py-12">
                                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                    </svg>
                                    <h3 class="mt-2 text-sm font-medium text-gray-900">SEO Coming Soon</h3>
                                    <p class="mt-1 text-sm text-gray-500">SEO settings will be implemented in the next update.</p>
                                </div>
                            </div>
                        </div>
                    </form>

<?php
$content = ob_get_clean();

include __DIR__ . '/partials/layout.php';
?>