sark
/
new-templane


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel</title>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.15.0/cdn.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/8.1.2/tinymce.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link rel="stylesheet" href="/css/admin/style.css">
</head>

<body class="bg-gray-100 font-sans">
    <div x-data="{ sidebarOpen: false }" class="flex h-screen">
        <!-- Sidebar -->
        <div :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'" 
             class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0">
            <div class="flex items-center justify-center h-16 bg-blue-600">
                <h1 class="text-xl font-semibold text-white">Admin Panel</h1>
            </div>
            <nav class="mt-5">
                <div class="px-2">
                    <a href="index.php" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-blue-600 bg-blue-50">
                        <svg class="mr-3 h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                            <path 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"/>
                        </svg>
                        Site Settings
                    </a>
                    <a href="pages.php" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50 mt-1">
                        <svg class="mr-3 h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"/>
                        </svg>
                        Dynamic Pages
                    </a>
                </div>
            </nav>
        </div>

        <!-- Mobile sidebar overlay -->
        <div x-show="sidebarOpen" 
             @click="sidebarOpen = false" 
             class="fixed inset-0 z-40 bg-gray-600 bg-opacity-75 lg:hidden"
             x-transition:enter="transition-opacity ease-linear duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition-opacity ease-linear duration-300"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"></div>

        <!-- Main content -->
        <div class="flex-1 overflow-hidden">
            <!-- Top bar -->
            <div class="bg-white shadow-sm lg:hidden">
                <div class="px-4 py-2">
                    <button @click="sidebarOpen = true" class="text-gray-500 hover:text-gray-600">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                        </svg>
                    </button>
                </div>
            </div>
            
            <!-- Page content -->
            <main class="flex-1 overflow-y-auto p-6">

                <div class="bg-white rounded-lg shadow-sm">
                    <div class="border-b border-gray-200">
                        <nav class="-mb-px flex space-x-8" x-data="{ activeTab: 'content' }">
                            <button @click="activeTab = 'content'" 
                                    :class="activeTab === 'content' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                                    class="py-2 px-1 border-b-2 font-medium text-sm">
                                Content
                            </button>
                            <button @click="activeTab = 'options'" 
                                    :class="activeTab === 'options' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                                    class="py-2 px-1 border-b-2 font-medium text-sm">
                                Options
                            </button>
                            <button @click="activeTab = 'styles'" 
                                    :class="activeTab === 'styles' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                                    class="py-2 px-1 border-b-2 font-medium text-sm">
                                Styles
                            </button>
                            <button @click="activeTab = 'seo'" 
                                    :class="activeTab === 'seo' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                                    class="py-2 px-1 border-b-2 font-medium text-sm">
                                SEO & Meta
                            </button>
                        </nav>
                    </div>

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

                        <!-- Content Tab -->
                        <div x-show="activeTab === 'content'" class="p-6">
                            <h2 class="text-lg font-medium text-gray-900 mb-6">Page Content</h2>

                            <div class="grid grid-cols-1 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="<?= $content['title'] ?? '' ?>" 
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                                </div>

                                <div>
                                    <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-blue-500 focus:border-blue-500"><?= urldecode($content['top_text'] ?? '') ?></textarea>
                                </div>

                    <div class="item">
                        <h3>Bottom Text</h3>
                        <textarea class="secondary-content" name='content[bottom_text]'><?= htmlspecialchars($content['bottom_text'] ?? '', ENT_QUOTES, 'UTF-8') ?></textarea>
                    </div>

                    <div class="item">
                        <span>Author name</span>
                        <input type="text" name='content[author-name]' value="<?= $content['author-name'] ?? '' ?>">
                    </div>

                    <div class="item">
                        <span>Modified date</span>
                        <input type="text" name='content[modified-date]' value="<?= $content['modified-date'] ?? '' ?>">
                    </div>

                    <div class="item">
                        <span>Text login button</span>
                        <input type="text" name='content[login]' value="<?= $content['login'] ?? '' ?>">
                    </div>

                    <div class="item">
                        <span>Text password button</span>
                        <input type="text" name='content[password]' value="<?= $content['password'] ?? '' ?>">
                    </div>

                    <div class="item">
                        <span>Faq title</span>
                        <input type="text" name='content[faq-title]' value="<?= $content['faq-title'] ?? '' ?>">
                    </div>

                    <div class="item">
                        <span>Footer text</span>
                        <textarea name='content[footer__text]'><?= $content['footer__text'] ?? '' ?></textarea>
                    </div>

                    <div class="item">
                        <span>Copyright</span>
                        <textarea name='content[copyright]'><?= $content['copyright'] ?? '' ?></textarea>
                    </div>


                    <h3>Casino/Review Settings</h3>
                    <hr>

                    <div class="item">
                        <span>Review casino count</span>
                        <input type="text" name='content[review-count]' value="<?= $content['review-count'] ?? '' ?>">
                    </div>

                    <div class="item">
                        <span>h2 - Casino listing</span>
                        <input type="text" name='content[listing]' value="<?= $content['listing'] ?? '' ?>">
                    </div>

                    <div class="item">
                        <span>Text content button</span>
                        <input type="text" name='content[content_btn]' value="<?= $content['content_btn'] ?? '' ?>">
                    </div>

                    <div class="item">
                        <span>Hide login-password btns</span>
                        <input type="hidden" name="content[hide-btns]" value="0">
                        <input type="checkbox" name="content[hide-btns]" value="1" <?= !empty($content['hide-btns']) ? 'checked' : '' ?>>
                    </div>


                    <h3>Images & Media</h3>
                    <hr>

                    <div class="img-block">
                        <div class="item">
                            <?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="img-thumb" src="../<?= $headerLogo['src'] ?>" alt="Header Logo">
                            <?php endif; ?>
                            <span>Header logo</span>
                            <input type="file" name="content[header-logo]">
                        </div>
                        <div>
                            <span>Header logo title</span>
                            <input type="text" name='content[header-logo][title]' value="<?= htmlspecialchars($headerLogo['title'] ?? '') ?>">
                            <span>Header logo alt</span>
                            <input type="text" name='content[header-logo][alt]' value="<?= htmlspecialchars($headerLogo['alt'] ?? '') ?>">
                        </div>
                    </div>

                    <div class="img-block">
                        <div class="item">
                            <?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="img-thumb" src="../<?= $bannerLogo['src'] ?>" alt="Banner Image">
                            <?php endif; ?>
                            <span>Banner Image</span>
                            <input type="file" name="content[banner-logo]">
                        </div>
                        <div>
                            <span>Banner logo title</span>
                            <input type="text" name='content[banner-logo][title]' value="<?= htmlspecialchars($bannerLogo['title'] ?? '') ?>">
                            <span>Banner logo alt</span>
                            <input type="text" name='content[banner-logo][alt]' value="<?= htmlspecialchars($bannerLogo['alt'] ?? '') ?>">
                            <span>Banner logo width</span>
                            <input type="text" name='content[banner-logo][width]' value="<?= htmlspecialchars($bannerLogo['width'] ?? '') ?>">
                            <span>Banner logo height</span>
                            <input type="text" name='content[banner-logo][height]' value="<?= htmlspecialchars($bannerLogo['height'] ?? '') ?>">
                        </div>
                    </div>

                    <div class="img-block">
                        <div class="item">
                            <?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="img-thumb" src="../<?= $footerLogo['src'] ?>" alt="Footer Logo">
                            <?php endif; ?>
                            <span>Footer logo</span>
                            <input type="file" name="content[footer-logo]">
                        </div>
                        <div>
                            <span>Footer logo title</span>
                            <input type="text" name='content[footer-logo][title]' value="<?= htmlspecialchars($footerLogo['title'] ?? '') ?>">
                            <span>Footer logo alt</span>
                            <input type="text" name='content[footer-logo][alt]' value="<?= htmlspecialchars($footerLogo['alt'] ?? '') ?>">
                        </div>
                    </div>

                    <div class="item">
                        <?php if (!empty($content['favicon'])): ?>
                            <img class="img-thumb" src="../<?= $content['favicon'] ?>" alt="Favicon">
                        <?php endif; ?>
                        <span>Favicon</span>
                        <input type="file" name="content[favicon]">
                    </div>

                    <div class="item">
                        <?php if (!empty($content['author-img'])): ?>
                            <img class="img-thumb" src="../<?= $content['author-img'] ?>" alt="author-img">
                        <?php endif; ?>
                        <span>Author img</span>
                        <input type="file" name="content[author-img]">
                    </div>


                    <h3>Dynamic Content</h3>
                    <hr>

                    <!-- FAQ Section -->
                    <div x-data="{ 
                        faqItems: <?= htmlspecialchars(json_encode($faqItems ?? []), ENT_QUOTES, 'UTF-8'); ?> || []
                    }">
                        <h4>FAQ Items</h4>
                        <button type="button" @click="faqItems.push({ question: '', answer: '' })" style="background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; margin-bottom: 15px; cursor: pointer; font-size: 14px;">+ Add FAQ Item</button>

                        <template x-for="(item, index) in faqItems" :key="index">
                            <div style="margin-bottom: 15px; padding: 15px; border: 1px solid #ddd;">
                                <div style="display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: start;">
                                    <div style="display: flex; flex-direction: column; gap: 10px;">
                                        <div>
                                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Question</label>
                                            <input type="text" x-model="item.question" :name="`content[faq][${index}][question]`" placeholder="Question" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                        </div>
                                        <div>
                                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Answer</label>
                                            <textarea x-model="item.answer" :name="`content[faq][${index}][answer]`" placeholder="Answer" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; min-height: 80px;"></textarea>
                                        </div>
                                    </div>
                                    <button type="button" @click="faqItems.splice(index, 1)" style="background: #dc3545; color: white; border: none; padding: 8px 12px; border-radius: 4px;">Remove</button>
                                </div>
                            </div>
                        </template>
                    </div>

                    <!-- Menu Section -->
                    <div x-data="{ 
                        menuItems: <?= htmlspecialchars(json_encode($menuItems ?? []), ENT_QUOTES, 'UTF-8'); ?> || []
                    }">
                        <h4>Menu Items</h4>
                        <button type="button" @click="menuItems.push({ title: '', anchor: '' })" style="background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; margin-bottom: 15px; cursor: pointer; font-size: 14px;">+ Add Menu Item</button>

                        <template x-for="(item, index) in menuItems" :key="index">
                            <div style="margin-bottom: 15px; padding: 15px; border: 1px solid #ddd;">
                                <div style="display: grid; grid-template-columns: 1fr 1fr auto; gap: 15px; align-items: center;">
                                    <div>
                                        <label style="display: block; margin-bottom: 5px; font-weight: bold;">Menu Title</label>
                                        <input type="text" x-model="item.title" :name="`content[menu][${index}][title]`" placeholder="Menu Title" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                    </div>
                                    <div>
                                        <label style="display: block; margin-bottom: 5px; font-weight: bold;">Anchor Link</label>
                                        <input type="text" x-model="item.anchor" :name="`content[menu][${index}][anchor]`" placeholder="#section" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                    </div>
                                    <button type="button" @click="menuItems.splice(index, 1)" style="background: #dc3545; color: white; border: none; padding: 8px 12px; border-radius: 4px; margin-top: 25px;">Remove</button>
                                </div>
                            </div>
                        </template>
                    </div>

                    <!-- Casino List Section -->
                    <div x-data="{ 
                        casinoItems: <?= htmlspecialchars(json_encode($casinoItems ?? []), ENT_QUOTES, 'UTF-8'); ?> || []
                    }">
                        <h4>Casino List</h4>
                        <button type="button" @click="casinoItems.push({ heading: '', text: '', button: '', rating: '' })" style="background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; margin-bottom: 15px; cursor: pointer; font-size: 14px;">+ Add Casino</button>

                        <template x-for="(item, index) in casinoItems" :key="index">
                            <div style="margin-bottom: 20px; padding: 15px; border: 1px solid #ddd;">
                                <div style="display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: start;">
                                    <div style="display: flex; flex-direction: column; gap: 10px;">
                                        <div>
                                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Casino Name</label>
                                            <input type="text" x-model="item.heading" :name="`content[casino_list][${index}][heading]`" placeholder="Casino Name" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                        </div>
                                        <div>
                                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Bonus Text</label>
                                            <input type="text" x-model="item.text" :name="`content[casino_list][${index}][text]`" placeholder="Bonus Text" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                        </div>
                                        <div>
                                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Button Text</label>
                                            <input type="text" x-model="item.button" :name="`content[casino_list][${index}][button]`" placeholder="Button Text" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                        </div>
                                        <div>
                                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Rating</label>
                                            <input type="text" x-model="item.rating" :name="`content[casino_list][${index}][rating]`" placeholder="Rating (e.g. 9.5)" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                        </div>
                                        <div>
                                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Casino Image</label>
                                            <input type="file" :name="`casino_image_${index}`" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                        </div>
                                    </div>
                                    <button type="button" @click="casinoItems.splice(index, 1)" style="background: #dc3545; color: white; border: none; padding: 8px 12px; border-radius: 4px;">Remove</button>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>

                <!-- Options Tab -->
                <div x-show="activeTab === 'options'" x-transition class="tab-content">
                    <h2>Additional Options</h2>
                    <hr>

                    <h3>Hash Fields</h3>
                    <hr>

                    <div class="item">
                        <span>Hash:</span>
                        <input type="text" name='content[hash]' value="<?= $content['hash'] ?? '' ?>">
                    </div>

                    <div class="item">
                        <span>Hash-1:</span>
                        <input type="text" name='content[hash-1]' value="<?= $content['hash-1'] ?? '' ?>">
                    </div>

                    <div class="item">
                        <span>Hash-2:</span>
                        <input type="text" name='content[hash-2]' value="<?= $content['hash-2'] ?? '' ?>">
                    </div>

                    <div class="item">
                        <span>Hash-3:</span>
                        <input type="text" name='content[hash-3]' value="<?= $content['hash-3'] ?? '' ?>">
                    </div>

                    <div class="item">
                        <span>Hash-4:</span>
                        <input type="text" name='content[hash-4]' value="<?= $content['hash-4'] ?? '' ?>">
                    </div>

                    <div class="item">
                        <span>Hash-5:</span>
                        <input type="text" name='content[hash-5]' value="<?= $content['hash-5'] ?? '' ?>">
                    </div>
                </div>

                <!-- Styles Tab -->
                <div x-show="activeTab === 'styles'" x-transition class="tab-content">
                    <h2>Design & Colors</h2>
                    <hr>

                    <div class="style-grid">
                        <div class="item">
                            <span>Main color (body background)</span>
                            <div>
                                <input type="color" class="inp-color">
                                <input type="text" class="inp-color-text" name='styles[main_color]' value="<?= $styles['main_color'] ?? '' ?>">
                            </div>
                        </div>

                        <div class="item">
                            <span>Secondary color</span>
                            <div>
                                <input type="color" class="inp-color">
                                <input type="text" class="inp-color-text" name='styles[secondary_color]' value="<?= $styles['secondary_color'] ?? '' ?>">
                            </div>
                        </div>

                        <div class="item">
                            <span>Accent color</span>
                            <div>
                                <input type="color" class="inp-color">
                                <input type="text" class="inp-color-text" name='styles[accent_color]' value="<?= $styles['accent_color'] ?? '' ?>">
                            </div>
                        </div>

                        <div class="item">
                            <span>Font color</span>
                            <div>
                                <input type="color" class="inp-color">
                                <input type="text" class="inp-color-text" name='styles[font_color]' value="<?= $styles['font_color'] ?? '' ?>">
                            </div>
                        </div>

                        <div class="item">
                            <span>Link color</span>
                            <div>
                                <input type="color" class="inp-color">
                                <input type="text" class="inp-color-text" name='styles[link_color]' value="<?= $styles['link_color'] ?? '' ?>">
                            </div>
                        </div>

                        <div class="item">
                            <span>Header background</span>
                            <div>
                                <input type="color" class="inp-color">
                                <input type="text" class="inp-color-text" name='styles[header_color]' value="<?= $styles['header_color'] ?? '' ?>">
                            </div>
                        </div>

                        <div class="item">
                            <span>Footer background</span>
                            <div>
                                <input type="color" class="inp-color">
                                <input type="text" class="inp-color-text" name='styles[footer_color]' value="<?= $styles['footer_color'] ?? '' ?>">
                            </div>
                        </div>

                        <div class="item">
                            <span>Hover link color</span>
                            <div>
                                <input type="color" class="inp-color">
                                <input type="text" class="inp-color-text" name='styles[hover_link_color]' value="<?= $styles['hover_link_color'] ?? '' ?>">
                            </div>
                        </div>

                        <div class="item">
                            <span>Login btn font color</span>
                            <div>
                                <input type="color" class="inp-color">
                                <input type="text" class="inp-color-text" name='styles[login_btn_color]' value="<?= $styles['login_btn_color'] ?? '' ?>">
                            </div>
                        </div>

                        <div class="item">
                            <span>Password btn font color</span>
                            <div>
                                <input type="color" class="inp-color">
                                <input type="text" class="inp-color-text" name='styles[pass_btn_color]' value="<?= $styles['pass_btn_color'] ?? '' ?>">
                            </div>
                        </div>

                        <div class="item">
                            <span>Table bgcolor</span>
                            <div>
                                <input type="color" class="inp-color">
                                <input type="text" class="inp-color-text" name='styles[table]' value="<?= $styles['table'] ?? '' ?>">
                            </div>
                        </div>

                        <div class="item">
                            <span>Table caption bgcolor</span>
                            <div>
                                <input type="color" class="inp-color">
                                <input type="text" class="inp-color-text" name='styles[caption]' value="<?= $styles['caption'] ?? '' ?>">
                            </div>
                        </div>

                        <div class="item">
                            <span>Faq title font color</span>
                            <div>
                                <input type="color" class="inp-color">
                                <input type="text" class="inp-color-text" name='styles[faq-title-font-color]' value="<?= $styles['faq-title-font-color'] ?? '' ?>">
                            </div>
                        </div>

                        <div class="item">
                            <span>Faq title hover font color</span>
                            <div>
                                <input type="color" class="inp-color">
                                <input type="text" class="inp-color-text" name='styles[faq-title-hover-font-color]' value="<?= $styles['faq-title-hover-font-color'] ?? '' ?>">
                            </div>
                        </div>

                        <div class="item">
                            <span>Mobile burger menu color</span>
                            <div>
                                <input type="color" class="inp-color">
                                <input type="text" class="inp-color-text" name='styles[burger-color]' value="<?= $styles['burger-color'] ?? '' ?>">
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <span>Font-family</span>
                        <input type="text" name='styles[main-fz]' value="<?= $styles['main-fz'] ?? '' ?>">
                    </div>
                </div>

                <!-- SEO Tab -->
                <div x-show="activeTab === 'seo'" x-transition class="tab-content">
                        <h2>SEO & Meta Data</h2>
                        <hr>

                        <!-- Debug: <?= json_encode($seo) ?> -->
                        <div class="item">
                            <span>SEO Title:</span>
                            <input type="text" name='seo[title]' value="<?= $seo['title'] ?? '' ?>">
                        </div>

                        <div class="item">
                            <span>Meta Description:</span>
                            <textarea name='seo[description]'><?= $seo['description'] ?? '' ?></textarea>
                        </div>

                        <div class="item">
                            <span>Meta Keywords:</span>
                            <textarea name='seo[keywords]'><?= $seo['keywords'] ?? '' ?></textarea>
                        </div>

                        <div class="item">
                            <span>Canonical URL:</span>
                            <input type="text" name='seo[canonical]' value="<?= $seo['canonical'] ?? '' ?>">
                        </div>

                        <h3>Open Graph Data</h3>
                        <hr>

                        <div class="item">
                            <span>og:type</span>
                            <input type="text" name='seo[og-type]' value="<?= $seo['og-type'] ?? '' ?>">
                        </div>
                        <div class="item">
                            <span>og:title</span>
                            <input type="text" name='seo[og-title]' value="<?= $seo['og-title'] ?? '' ?>">
                        </div>
                        <div class="item">
                            <span>og:description</span>
                            <textarea name='seo[og-description]'><?= $seo['og-description'] ?? '' ?></textarea>
                        </div>
                        <div class="item">
                            <span>og:locale</span>
                            <input type="text" name='seo[og-locale]' value="<?= $seo['og-locale'] ?? '' ?>">
                        </div>
                        <div class="item">
                            <?php if (!empty($seo['og-image'])): ?>
                                <img class="img-thumb" src="../<?= $seo['og-image'] ?>" alt="OG Image">
                            <?php endif; ?>
                            <span>og:image</span>
                            <input type="file" name="seo[og-image]">
                        </div>

                        <h3>Language & Localization</h3>
                        <hr>

                        <div class="item">
                            <span>Lang home:</span>
                            <input type="text" name='seo[lang]' value="<?= $seo['lang'] ?? '' ?>">
                        </div>

                        <div class="item">
                            <span>Lang page:</span>
                            <input type="text" name='seo[lang-page]' value="<?= $seo['lang-page'] ?? '' ?>">
                        </div>

                        <h3>Hreflang Settings</h3>
                        <hr>

                        <div x-data="{ 
                            hreflangItems: <?= htmlspecialchars(json_encode(isset($seo['hreflang']) ? json_decode($seo['hreflang'], true) ?? [] : []), ENT_QUOTES, 'UTF-8'); ?> || []
                        }">
                            <button type="button" @click="hreflangItems.push({ hreflang: '', href: '' })" style="background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; margin-bottom: 15px; cursor: pointer; font-size: 14px;">+ Add Hreflang Item</button>

                            <template x-for="(item, index) in hreflangItems" :key="index">
                                <div style="margin-bottom: 15px; padding: 15px; border: 1px solid #ddd;">
                                    <div style="display: grid; grid-template-columns: 1fr 1fr auto; gap: 15px; align-items: center;">
                                        <div>
                                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Hreflang</label>
                                            <input type="text" x-model="item.hreflang" :name="`seo[hreflang][${index}][hreflang]`" placeholder="en, es, fr, etc." style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                        </div>
                                        <div>
                                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Href URL</label>
                                            <input type="text" x-model="item.href" :name="`seo[hreflang][${index}][href]`" placeholder="https://example.com/en/" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                        </div>
                                        <button type="button" @click="hreflangItems.splice(index, 1)" style="background: #dc3545; color: white; border: none; padding: 8px 12px; border-radius: 4px; margin-top: 25px;">Remove</button>
                                    </div>
                                </div>
                            </template>
                        </div>

                </div>
                
                <div class="form__btn-block">
                    <button type="submit" class="form__submit">Save All Changes</button>
                </div>
            </form>
        </div>
    </div>

    <script src='/js/admin/scripts.js'></script>
</body>

</html>