sark
/
new-templane


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571
							<!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>
    <link rel="stylesheet" href="/css/admin/style.css">
</head>

<body>
    <div class="container">
        <div style="margin-bottom: 20px;">
            <a href="pages.php" style="display: inline-block; padding: 10px 20px; background: #007bff; color: white; text-decoration: none; border-radius: 4px; margin-bottom: 10px;">📄 Manage Dynamic Pages</a>
        </div>

        <!-- Navigation Tabs -->
        <div x-data="{ activeTab: 'content' }" x-cloak class="tabs-container">
            <div class="tabs">
                <div class="tab" :class="{ 'active': activeTab === 'content' }" @click="activeTab = 'content'">Content</div>
                <div class="tab" :class="{ 'active': activeTab === 'options' }" @click="activeTab = 'options'">Options</div>
                <div class="tab" :class="{ 'active': activeTab === 'styles' }" @click="activeTab = 'styles'">Styles</div>
                <div class="tab" :class="{ 'active': activeTab === 'seo' }" @click="activeTab = 'seo'">SEO & Meta</div>
            </div>

            <!-- Debug: Active tab is: <span x-text="activeTab"></span> -->

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

                <!-- Content Tab -->
                <div x-show="activeTab === 'content'" x-transition class="tab-content">
                    <h2>Page Content</h2>
                    <hr>

                    <div class="item">
                        <span>Page Title (H1):</span>
                        <input type="text" name='content[title]' value="<?= $content['title'] ?? '' ?>">
                    </div>

                    <div class="item">
                        <h3>Top Text</h3>
                        <textarea class="secondary-content" name='content[top_text]'><?= 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>