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">
                                
                                <!-- Basic Content 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 d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                        Basic Content
                                    </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">Page Title (H1)</label>
                                            <input type="text" name='content[title]' value="<?= htmlspecialchars($content['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">FAQ Title</label>
                                            <input type="text" name='content[faq-title]' value="<?= htmlspecialchars($content['faq-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 class="lg:col-span-2">
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Top Text</label>
                                            <textarea name='content[top_text]' rows="6" 
                                                      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['top_text'] ?? '') ?></textarea>
                                        </div>

                                        <div class="lg:col-span-2">
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Bottom Text</label>
                                            <textarea name='content[bottom_text]' rows="6" 
                                                      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['bottom_text'] ?? '') ?></textarea>
                                        </div>
                                    </div>
                                </div>

                                <!-- Author & Meta 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="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
                                        </svg>
                                        Author & Meta
                                    </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">Author Name</label>
                                            <input type="text" name='content[author-name]' value="<?= htmlspecialchars($content['author-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">Modified Date</label>
                                            <input type="date" name='content[modified-date]' value="<?= htmlspecialchars($content['modified-date'] ?? '') ?>" 
                                                   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>

                                <!-- 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>
                                        Button Settings
                                    </h3>
                                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Login Button Text</label>
                                            <input type="text" name='content[login]' value="<?= htmlspecialchars($content['login'] ?? '') ?>" 
                                                   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">Password Button Text</label>
                                            <input type="text" name='content[password]' value="<?= htmlspecialchars($content['password'] ?? '') ?>" 
                                                   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">Content Button Text</label>
                                            <input type="text" name='content[content_btn]' value="<?= htmlspecialchars($content['content_btn'] ?? '') ?>" 
                                                   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>

                                <!-- Casino 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 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2h-2.22l.123.489.804.804A1 1 0 0113 18H7a1 1 0 01-.707-1.707l.804-.804L7.22 15H5a2 2 0 01-2-2V5zm5.771 7H5V5h10v7H8.771z" clip-rule="evenodd"/>
                                        </svg>
                                        Casino/Review 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">Casino Listing Title (H2)</label>
                                            <input type="text" name='content[listing]' value="<?= htmlspecialchars($content['listing'] ?? '') ?>" 
                                                   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="text" name='content[review-count]' value="<?= htmlspecialchars($content['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 class="flex items-center">
                                            <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 login/password 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 class="bg-gray-50 p-4 rounded-lg">
                                            <h4 class="text-md font-medium text-gray-800 mb-4">Author Image</h4>
                                            <?php if (!empty($content['author-img'])): ?>
                                                <img class="w-16 h-16 object-cover rounded-full border mb-2" src="../<?= $content['author-img'] ?>" alt="Author Image">
                                            <?php endif; ?>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Upload Author Image</label>
                                            <input type="file" name="content[author-img]" 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">
                                
                                <!-- Background Colors 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>
                                        Background Colors
                                    </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">Main Color (Body Background)</label>
                                            <div class="flex gap-3">
                                                <input type="color" value="<?= $styles['main_color'] ?? '#1a1a2e' ?>" 
                                                       class="w-12 h-10 rounded border border-gray-300 cursor-pointer"
                                                       onchange="this.nextElementSibling.value = this.value">
                                                <input type="text" name='styles[main_color]' value="<?= htmlspecialchars($styles['main_color'] ?? '') ?>" 
                                                       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">Secondary Color</label>
                                            <div class="flex gap-3">
                                                <input type="color" value="<?= $styles['secondary_color'] ?? '#16213e' ?>" 
                                                       class="w-12 h-10 rounded border border-gray-300 cursor-pointer"
                                                       onchange="this.nextElementSibling.value = this.value">
                                                <input type="text" name='styles[secondary_color]' value="<?= htmlspecialchars($styles['secondary_color'] ?? '') ?>" 
                                                       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">Header Color</label>
                                            <div class="flex gap-3">
                                                <input type="color" value="<?= $styles['header_color'] ?? '#2c2c54' ?>" 
                                                       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'] ?? '') ?>" 
                                                       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">Footer Color</label>
                                            <div class="flex gap-3">
                                                <input type="color" value="<?= $styles['footer_color'] ?? '#0f0f23' ?>" 
                                                       class="w-12 h-10 rounded border border-gray-300 cursor-pointer"
                                                       onchange="this.nextElementSibling.value = this.value">
                                                <input type="text" name='styles[footer_color]' value="<?= htmlspecialchars($styles['footer_color'] ?? '') ?>" 
                                                       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>

                                <!-- Accent & Text Colors 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 d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"/>
                                        </svg>
                                        Accent & Text Colors
                                    </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">Accent Color</label>
                                            <div class="flex gap-3">
                                                <input type="color" value="<?= $styles['accent_color'] ?? '#e94560' ?>" 
                                                       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'] ?? '') ?>" 
                                                       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">Font Color</label>
                                            <div class="flex gap-3">
                                                <input type="color" value="<?= $styles['font_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[font_color]' value="<?= htmlspecialchars($styles['font_color'] ?? '') ?>" 
                                                       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">Link Color</label>
                                            <div class="flex gap-3">
                                                <input type="color" value="<?= $styles['link_color'] ?? '#3498db' ?>" 
                                                       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'] ?? '') ?>" 
                                                       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">Main Font Family</label>
                                            <input type="text" name='styles[main-fz]' value="<?= htmlspecialchars($styles['main-fz'] ?? '') ?>" 
                                                   placeholder="Arial, sans-serif"
                                                   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>

                                <!-- Button Colors 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 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>
                                        Button Colors
                                    </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">Login Button Color</label>
                                            <div class="flex gap-3">
                                                <input type="color" value="<?= $styles['login_btn_color'] ?? '#27ae60' ?>" 
                                                       class="w-12 h-10 rounded border border-gray-300 cursor-pointer"
                                                       onchange="this.nextElementSibling.value = this.value">
                                                <input type="text" name='styles[login_btn_color]' value="<?= htmlspecialchars($styles['login_btn_color'] ?? '') ?>" 
                                                       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">Password Button Color</label>
                                            <div class="flex gap-3">
                                                <input type="color" value="<?= $styles['pass_btn_color'] ?? '#e74c3c' ?>" 
                                                       class="w-12 h-10 rounded border border-gray-300 cursor-pointer"
                                                       onchange="this.nextElementSibling.value = this.value">
                                                <input type="text" name='styles[pass_btn_color]' value="<?= htmlspecialchars($styles['pass_btn_color'] ?? '') ?>" 
                                                       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>
                                        Save Changes
                                    </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';
?>