new-templane/resources/view/admin/index.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'
    ],
    'jsonld' => [
        'label' => 'JSON-LD',
        'icon' => 'M8 4a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1zm0 4a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1zm0 4a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z'
    ]
];

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['accent_color'] ?? '#FF6B35' ?>"
                                                       class="w-12 h-10 rounded border border-gray-300 cursor-pointer"
                                                       onchange="this.nextElementSibling.value = this.value">
                                                <input type="text" name='styles[accent_color]' value="<?= htmlspecialchars($styles['accent_color'] ?? '') ?>"
                                                       placeholder="#FF6B35"
                                                       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_border_color'] ?? '#E4E4E4' ?>"
                                                       class="w-12 h-10 rounded border border-gray-300 cursor-pointer"
                                                       onchange="this.nextElementSibling.value = this.value">
                                                <input type="text" name='styles[content_border_color]' value="<?= htmlspecialchars($styles['content_border_color'] ?? '') ?>"
                                                       placeholder="#E4E4E4"
                                                       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 space-y-8">

                                <!-- Hreflang Settings -->
                                <div x-data="{ 
                                    hreflangs: <?= htmlspecialchars(json_encode(isset($seo['hreflang']) ? json_decode($seo['hreflang'], true) ?: [] : []), ENT_QUOTES, 'UTF-8') ?>,
                                    addHreflang() {
                                        this.hreflangs.push({hreflang: '', href: ''});
                                    },
                                    removeHreflang(index) {
                                        this.hreflangs.splice(index, 1);
                                    }
                                }">
                                    <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="M7 2a1 1 0 011 1v1h3a1 1 0 110 2H9.578a18.87 18.87 0 01-1.724 4.78c.29.354.596.696.914 1.026a1 1 0 11-1.44 1.389c-.188-.196-.373-.396-.554-.6a18.9 18.9 0 01-2.62 3.624 1 1 0 11-1.44-1.389A16.9 16.9 0 003.578 8H2a1 1 0 110-2h2.578c.15-.667.34-1.32.578-1.96A1 1 0 015.5 4c.76 0 1.5.11 2.5.342V3a1 1 0 011-1zm1.578 6H7.422c.12.456.264.903.428 1.34.164-.437.308-.884.428-1.34zM17 6a3 3 0 11-6 0 3 3 0 016 0z" clip-rule="evenodd"/>
                                        </svg>
                                        Hreflang Settings
                                    </h3>
                                    
                                    <!-- Hidden input to store JSON data -->
                                    <input type="hidden" name="seo[hreflang]" x-bind:value="JSON.stringify(hreflangs)">
                                    
                                    <div class="space-y-4">
                                        <template x-for="(item, index) in hreflangs" :key="index">
                                            <div class="flex gap-4 items-end">
                                                <div class="flex-1">
                                                    <label class="block text-sm font-medium text-gray-700 mb-2">Language Code</label>
                                                    <input type="text" x-model="item.hreflang" placeholder="en, ru, de, x-default" 
                                                           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-2">
                                                    <label class="block text-sm font-medium text-gray-700 mb-2">URL</label>
                                                    <input type="url" x-model="item.href" placeholder="https://example.com/en/" 
                                                           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>
                                                <button type="button" @click="removeHreflang(index)" 
                                                        class="px-3 py-2 text-red-600 hover:text-red-800 border border-red-300 hover:border-red-500 rounded-md transition-colors">
                                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                                        <path fill-rule="evenodd" d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"/>
                                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                                                    </svg>
                                                </button>
                                            </div>
                                        </template>
                                        
                                        <button type="button" @click="addHreflang()" 
                                                class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/>
                                            </svg>
                                            Add Hreflang
                                        </button>
                                    </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 Settings
                                    </button>
                                </div>
                            </div>
                        </div>

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

                                <!-- Organization 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="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4z" clip-rule="evenodd"/>
                                        </svg>
                                        Organization
                                    </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">Organization Name</label>
                                            <input type="text" name='jsonld[organization_name]' value="<?= htmlspecialchars($jsonld['organization_name'] ?? '') ?>" 
                                                   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">Organization URL</label>
                                            <input type="url" name='jsonld[organization_url]' value="<?= htmlspecialchars($jsonld['organization_url'] ?? '') ?>" 
                                                   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">Same As URLs (one per line)</label>
                                            <textarea name='jsonld[organization_same_as]' 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($jsonld['organization_same_as'] ?? '') ?></textarea>
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">License URL</label>
                                            <input type="url" name='jsonld[license_url]' value="<?= htmlspecialchars($jsonld['license_url'] ?? '') ?>" 
                                                   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>

                                <!-- Breadcrumb 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="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                                        </svg>
                                        Breadcrumbs
                                    </h3>
                                    <div class="grid grid-cols-1 gap-6">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Breadcrumb Home Name</label>
                                            <input type="text" name='jsonld[breadcrumb_home_name]' value="<?= htmlspecialchars($jsonld['breadcrumb_home_name'] ?? '') ?>" 
                                                   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>

                                <!-- Rating & Review 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="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" clip-rule="evenodd"/>
                                        </svg>
                                        Reviews & Ratings
                                    </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">Rating Value</label>
                                            <input type="number" step="0.1" min="1" max="5" name='jsonld[rating_value]' value="<?= htmlspecialchars($jsonld['rating_value'] ?? '') ?>" 
                                                   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">Best Rating</label>
                                            <input type="number" name='jsonld[best_rating]' value="<?= htmlspecialchars($jsonld['best_rating'] ?? '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>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Worst Rating</label>
                                            <input type="number" name='jsonld[worst_rating]' value="<?= htmlspecialchars($jsonld['worst_rating'] ?? '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">Review Count</label>
                                            <input type="number" name='jsonld[review_count]' value="<?= htmlspecialchars($jsonld['review_count'] ?? '') ?>" 
                                                   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>

                                <!-- Software Application 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 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" clip-rule="evenodd"/>
                                        </svg>
                                        Software Application
                                    </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">App Name</label>
                                            <input type="text" name='jsonld[app_name]' value="<?= htmlspecialchars($jsonld['app_name'] ?? '') ?>" 
                                                   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">Operating System</label>
                                            <input type="text" name='jsonld[operating_system]' value="<?= htmlspecialchars($jsonld['operating_system'] ?? '') ?>" 
                                                   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">Application Category</label>
                                            <input type="text" name='jsonld[application_category]' value="<?= htmlspecialchars($jsonld['application_category'] ?? '') ?>" 
                                                   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">Download URL</label>
                                            <input type="url" name='jsonld[download_url]' value="<?= htmlspecialchars($jsonld['download_url'] ?? '') ?>" 
                                                   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 JSON-LD Settings
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>

<?php
$content = ob_get_clean();

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