<?php



 
HookSystem::addAction('admin.appearance_render.footer', function (array $vars): void {
    $settings = $vars['settings'] ?? $vars;
    $fc = FooterConfig::get();
    $columns = $fc['columns'] ?? [];
    $bottom = $fc['bottom'] ?? [];
    $social = $fc['social'] ?? [];
    $colCount = count($columns);
    if ($colCount < 1) $colCount = 4;
    $types = FooterConfig::columnTypes();
    $pages = Page::allPublished();
    $badgeIconOptions = FooterConfig::badgeIcons();

    $typeIcons = [
        'logo'         => 'fa-image',
        'navigation'   => 'fa-bars',
        'pages'        => 'fa-file-lines',
        'custom_links' => 'fa-link',
        'badges'       => 'fa-certificate',
        'text'         => 'fa-code',
        'social'       => 'fa-share-nodes',
    ];

    $typeLabels = [
        'logo'         => 'Logo',
        'navigation'   => 'Navigation',
        'pages'        => 'Pages',
        'custom_links' => 'Links',
        'badges'       => 'Badges',
        'text'         => 'Text/HTML',
        'social'       => 'Social',
    ];
    ?>

    <style>
    .ft-panel{display:none}
    .ft-panel.active{display:block}

    .ft-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}
    .ft-type-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .15s;background:#fff;text-align:center}
    .ft-type-btn:hover{border-color:#c7d2fe;background:#fafafe}
    .ft-type-btn.active{border-color:#4f46e5;background:#eef2ff;color:#4f46e5}
    .ft-type-btn i{font-size:16px;color:#9ca3af}
    .ft-type-btn.active i{color:#4f46e5}
    .ft-type-btn span{font-size:11px;font-weight:600;color:#6b7280;line-height:1.2}
    .ft-type-btn.active span{color:#4f46e5}

    .ft-header-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid #f3f4f6}
    .ft-header-row .ft-toggle{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0}
    .ft-header-row .ft-toggle input{opacity:0;width:0;height:0}
    .ft-header-row .ft-toggle-slider{position:absolute;cursor:pointer;inset:0;background:#d1d5db;border-radius:20px;transition:.2s}
    .ft-header-row .ft-toggle-slider:before{content:'';position:absolute;height:16px;width:16px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:.2s}
    .ft-header-row .ft-toggle input:checked+.ft-toggle-slider{background:#4f46e5}
    .ft-header-row .ft-toggle input:checked+.ft-toggle-slider:before{transform:translateX(16px)}
    .ft-col-name{font-size:13px;font-weight:600;color:#374151}
    .ft-status-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:9999px}
    .ft-status-badge.on{background:#dcfce7;color:#15803d}
    .ft-status-badge.off{background:#f3f4f6;color:#6b7280}
    .ft-title-sep{color:#e5e7eb;font-size:13px;margin:0 2px}
    .ft-title-label{font-size:12px;font-weight:500;color:#9ca3af;flex-shrink:0}
    .ft-title-input{flex:1;min-width:120px;max-width:280px;padding:5px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;outline:none;transition:border-color .15s}
    .ft-title-input:focus{border-color:#818cf8;box-shadow:0 0 0 2px rgba(129,140,248,.15)}

    .ft-social-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
    .ft-social-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:#f3f4f6;color:#6b7280;flex-shrink:0}
    .ft-social-icon i{font-size:15px}
    .ft-social-row input{flex:1;padding:7px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;outline:none;transition:border-color .15s}
    .ft-social-row input:focus{border-color:#818cf8;box-shadow:0 0 0 2px rgba(129,140,248,.15)}

    .ft-toggle-card{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:2px solid #e5e7eb;border-radius:10px;transition:border-color .15s,background .15s;cursor:pointer}
    .ft-toggle-card:hover{border-color:#d1d5db}
    .ft-toggle-card.checked{border-color:#c7d2fe;background:#fafaff}
    .ft-toggle-card input[type=checkbox]{margin-top:2px;width:16px;height:16px;border-radius:4px;border:1px solid #d1d5db;accent-color:#4f46e5;cursor:pointer;flex-shrink:0}
    .ft-toggle-card .ft-card-body{flex:1;min-width:0}
    .ft-toggle-card .ft-card-label{font-size:13px;font-weight:600;color:#374151;display:flex;align-items:center;gap:6px}
    .ft-toggle-card .ft-card-label i{font-size:12px;color:#9ca3af}
    .ft-toggle-card .ft-card-input{margin-top:8px}
    .ft-toggle-card .ft-card-input input,
    .ft-toggle-card .ft-card-input textarea{width:100%;padding:6px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;outline:none;transition:border-color .15s}
    .ft-toggle-card .ft-card-input input:focus,
    .ft-toggle-card .ft-card-input textarea:focus{border-color:#818cf8;box-shadow:0 0 0 2px rgba(129,140,248,.15)}
    .ft-toggle-card .ft-card-input textarea{resize:vertical;font-family:inherit}
    .ft-toggle-card .ft-card-hint{font-size:11px;color:#9ca3af;margin-top:2px}

    @media(max-width:639px){
        .ft-tab{padding:8px 12px;font-size:12px}
        .ft-panel{padding:14px}
        .ft-type-grid{gap:6px}
        .ft-type-btn{padding:8px 4px}
        .ft-type-btn i{font-size:14px}
        .ft-type-btn span{font-size:10px}
        .ft-header-row{flex-direction:column;align-items:flex-start;gap:6px}
        .ft-title-input{max-width:100%;width:100%}
        .ft-title-sep{display:none}
        .ft-title-label{display:none}
        .col-panel{padding:14px}
        .ft-toggle-card{padding:10px 12px}
        .ft-social-row{gap:6px}
        .ft-social-icon{width:32px;height:32px;border-radius:6px}
        .ft-social-icon i{font-size:13px}
        .ft-social-row input{padding:6px 8px;font-size:12px}
    }
    @media(max-width:479px){
        .ft-type-grid{grid-template-columns:repeat(3,1fr)}
        .ft-type-btn{padding:7px 3px}
        .col-panel{padding:10px}
    }
    </style>

    <form method="POST" action="/admin/appearance" id="footerForm" enctype="multipart/form-data">
        <?= Router::csrfField() ?>
        <input type="hidden" name="_tab" value="appearance">
        <input type="hidden" name="_sub" value="footer">

        
        <div class="mb-6 border-b border-gray-200">
            <nav class="flex gap-1 -mb-px admin-tabs">
                <a href="#" class="ft-tab-link px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-primary-600 text-primary-600" data-tab="columns">Columns</a>
                <a href="#" class="ft-tab-link px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="bottombar">Bottom Bar</a>
            </nav>
        </div>

        <div>

            
            <div class="ft-panel active" id="ft-columns">
                <div class="space-y-5">

                    
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Number of columns</label>
                        <div class="flex flex-wrap gap-2">
                            <?php for ($n = 1; $n <= 4; $n++): ?>
                                <label class="cursor-pointer" onclick="setColumnCount(<?= $n ?>)">
                                    <input type="radio" name="_col_count_visual" value="<?= $n ?>" class="sr-only peer" <?= $colCount === $n ? 'checked' : '' ?>>
                                    <div id="colBtn<?= $n ?>" class="border-2 rounded-lg p-2.5 text-center transition-all min-w-[60px]
                                                <?= $colCount === $n ? 'border-primary-600 bg-primary-50' : 'border-gray-200 hover:border-gray-300' ?>">
                                        <div class="flex gap-1 justify-center mb-1.5">
                                            <?php for ($j = 0; $j < $n; $j++): ?>
                                                <div class="h-5 rounded-sm <?= $colCount === $n ? 'bg-primary-400' : 'bg-gray-300' ?>" style="width: <?= round(48 / $n) ?>px"></div>
                                            <?php endfor; ?>
                                        </div>
                                        <span class="text-xs font-semibold text-gray-700"><?= $n ?></span>
                                    </div>
                                </label>
                            <?php endfor; ?>
                        </div>
                    </div>
                    <input type="hidden" name="footer_col_count" id="footerColCount" value="<?= $colCount ?>">

                    
                    <div class="border-b border-gray-200 mb-1" id="colPills">
                        <nav class="flex gap-1 -mb-px admin-tabs">
                            <?php for ($i = 0; $i < 4; $i++):
                                $colEnabled = $columns[$i]['enabled'] ?? true;
                            ?>
                                <a href="#" onclick="event.preventDefault();showColumn(<?= $i ?>)"
                                   id="colPill<?= $i ?>"
                                   class="col-pill px-4 py-2.5 text-sm font-medium border-b-2 transition-colors <?= $i === 0 ? 'border-primary-600 text-primary-600' : ($i < $colCount ? 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' : 'hidden') ?> <?= !$colEnabled && $i < $colCount ? 'opacity-50' : '' ?>">
                                    Column <?= $i + 1 ?><?= !$colEnabled ? ' <span class="text-[10px]">(off)</span>' : '' ?>
                                </a>
                            <?php endfor; ?>
                        </nav>
                    </div>

                    
                    <?php for ($i = 0; $i < 4; $i++):
                        $col = $columns[$i] ?? ['type' => 'text', 'title' => ''];
                        $colType = $col['type'] ?? 'text';
                        $colEnabled = $col['enabled'] ?? true;
                    ?>
                    <div class="col-panel border border-gray-200 rounded-lg p-5 <?= $i === 0 ? '' : 'hidden' ?>" id="colPanel<?= $i ?>">
                        <div class="space-y-5">

                            
                            <div class="ft-header-row">
                                <label class="ft-toggle">
                                    <input type="checkbox" name="footer_col_enabled[<?= $i ?>]" value="1"
                                           id="colEnabled<?= $i ?>"
                                           onchange="toggleColumn(<?= $i ?>, this.checked)"
                                           <?= $colEnabled ? 'checked' : '' ?>>
                                    <span class="ft-toggle-slider"></span>
                                </label>
                                <span class="ft-col-name">Column <?= $i + 1 ?></span>
                                <span id="colStatus<?= $i ?>" class="ft-status-badge <?= $colEnabled ? 'on' : 'off' ?>"><?= $colEnabled ? 'Enabled' : 'Disabled' ?></span>
                                <span class="ft-title-sep">|</span>
                                <span class="ft-title-label">Title:</span>
                                <input type="text" name="footer_col_title[<?= $i ?>]"
                                       value="<?= htmlspecialchars($col['title'] ?? '') ?>"
                                       placeholder="e.g. Navigation"
                                       class="ft-title-input">
                                <?= hentaiTranslateButton('footer_col_title_' . $i, 'Column ' . ($i + 1) . ' title', 'input', $col['_translations']['title'] ?? [], 'footer_col_title_translations[' . $i . ']') ?>
                            </div>

                            <div id="colBody<?= $i ?>" class="space-y-5 <?= $colEnabled ? '' : 'opacity-40 pointer-events-none' ?>">

                            
                            <div>
                                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Content type</label>
                                <input type="hidden" name="footer_col_type[<?= $i ?>]" id="colType<?= $i ?>" value="<?= htmlspecialchars($colType) ?>">
                                <div class="ft-type-grid">
                                    <?php foreach ($types as $tk => $tInfo):
                                        $icon = $typeIcons[$tk] ?? 'fa-puzzle-piece';
                                        $shortLabel = $typeLabels[$tk] ?? $tInfo['label'];
                                    ?>
                                        <button type="button"
                                                onclick="selectColType(<?= $i ?>, '<?= $tk ?>')"
                                                id="typeBtn_<?= $i ?>_<?= $tk ?>"
                                                class="ft-type-btn colTypeBtn_<?= $i ?> <?= $colType === $tk ? 'active' : '' ?>">
                                            <i class="fa-solid <?= $icon ?>"></i>
                                            <span><?= htmlspecialchars($shortLabel) ?></span>
                                        </button>
                                    <?php endforeach; ?>
                                </div>
                            </div>

                            
                            <div class="col-config col-config-logo <?= $colType === 'logo' ? '' : 'hidden' ?>" id="colConfigLogo<?= $i ?>">
                                <?php
                                    $ftLogoCustom = $col['custom_logo'] ?? '';
                                    $ftLogoHeight = (int) ($col['logo_height'] ?? 32);
                                    $showDesc = $col['show_description'] ?? true;
                                    $currentLogo = $ftLogoCustom ?: Setting::get('site_logo_dark', '') ?: Setting::get('site_logo', '');
                                ?>
                                <div class="space-y-5">

                                    
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Logo</label>
                                        <div class="flex items-center gap-4">
                                            <div class="flex items-center justify-center w-[120px] h-[60px] rounded-lg border border-gray-200 bg-gray-900 p-2 flex-shrink-0">
                                                <?php if ($currentLogo): ?>
                                                    <img src="/uploads/branding/<?= htmlspecialchars($currentLogo) ?>" alt="Footer logo" id="ftLogoPreview<?= $i ?>" style="height:<?= $ftLogoHeight ?>px;max-width:100%;object-fit:contain;">
                                                <?php else: ?>
                                                    <span class="text-gray-500 text-xs" id="ftLogoPreview<?= $i ?>">No logo</span>
                                                <?php endif; ?>
                                            </div>
                                            <div class="flex-1">
                                                <input type="file" name="footer_col_logo[<?= $i ?>]" accept="image/jpeg,image/png,image/gif,image/webp,image/svg+xml"
                                                       class="block w-full text-sm text-gray-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 file:cursor-pointer file:transition-colors">
                                                <p class="text-[11px] text-gray-400 mt-1"><i class="fa-solid fa-circle-info mr-0.5" style="font-size:9px;"></i> Leave empty to use the site logo from Branding settings.</p>
                                                <?php if ($ftLogoCustom): ?>
                                                    <label class="inline-flex items-center gap-1.5 mt-1 text-xs text-red-500 cursor-pointer hover:text-red-700">
                                                        <input type="checkbox" name="footer_col_remove_logo[<?= $i ?>]" value="1" class="w-3 h-3 rounded border-gray-300">
                                                        Remove custom logo
                                                    </label>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>

                                    
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Logo height</label>
                                        <div class="flex items-center gap-3 max-w-xs">
                                            <input type="range" name="footer_col_logo_height[<?= $i ?>]" min="16" max="64" step="2" value="<?= $ftLogoHeight ?>"
                                                   class="flex-1 accent-primary-600"
                                                   oninput="document.getElementById('ftLogoHVal<?= $i ?>').textContent=this.value+'px';var img=document.querySelector('#ftLogoPreview<?= $i ?>');if(img&&img.tagName==='IMG')img.style.height=this.value+'px'">
                                            <span id="ftLogoHVal<?= $i ?>" class="text-xs font-mono text-gray-500 w-10 text-right"><?= $ftLogoHeight ?>px</span>
                                        </div>
                                    </div>

                                    
                                    <div>
                                        <label class="flex items-center gap-2 mb-2 cursor-pointer">
                                            <input type="checkbox" name="footer_col_show_desc[<?= $i ?>]" value="1"
                                                   class="w-3.5 h-3.5 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                                                   <?= $showDesc ? 'checked' : '' ?>
                                                   onchange="document.getElementById('logoDescWrap<?= $i ?>').style.display=this.checked?'':'none'">
                                            <span class="text-sm font-medium text-gray-700">Show description below logo</span>
                                        </label>
                                        <div id="logoDescWrap<?= $i ?>" class="<?= $showDesc ? '' : 'hidden' ?>" style="padding-left:22px;">
                                            <div class="flex items-center gap-2 max-w-lg">
                                                <input type="text" name="footer_col_description[<?= $i ?>]"
                                                       value="<?= htmlspecialchars($col['description'] ?? Setting::get('site_description', '')) ?>"
                                                       placeholder="Short tagline below the logo"
                                                       class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                                                <?= hentaiTranslateButton('footer_logo_desc_' . $i, 'Logo description', 'input', $col['_translations']['description'] ?? [], 'footer_col_description_translations[' . $i . ']') ?>
                                            </div>
                                            <p class="text-[11px] text-gray-400 mt-1"><i class="fa-solid fa-circle-info mr-0.5" style="font-size:9px;"></i> Leave empty to use the global site description.</p>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            
                            <div class="col-config col-config-navigation <?= $colType === 'navigation' ? '' : 'hidden' ?>" id="colConfigNav<?= $i ?>">
                                <?php
                                $menuConfig = MenuConfig::get();
                                $allMenuItems = MenuConfig::resolve($menuConfig);
                                $selectedNavItems = $col['nav_items'] ?? [];
                                $navCustomLinks = $col['custom_links'] ?? [];
                                ?>
                                <div class="space-y-5">

                                    
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Menu items</label>
                                        <p class="text-xs text-gray-400 mb-2">Select which menu items to display. Uncheck all to show everything.</p>
                                        <div class="grid grid-cols-2 gap-1.5 max-w-lg">
                                            <?php foreach ($allMenuItems as $mi):
                                                $miId = $mi['id'] ?? $mi['label'] ?? '';
                                                if ($miId === '') continue;
                                                $isChecked = empty($selectedNavItems) || in_array($miId, $selectedNavItems, true);
                                            ?>
                                                <label class="flex items-center gap-3 px-3 py-2 rounded-lg border <?= $isChecked ? 'border-primary-200 bg-primary-50/30' : 'border-gray-200' ?> cursor-pointer hover:bg-gray-50 transition-colors nav-check-label">
                                                    <input type="checkbox" name="footer_col_nav_items[<?= $i ?>][]" value="<?= htmlspecialchars($miId) ?>"
                                                           class="w-3.5 h-3.5 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                                                           onchange="this.closest('.nav-check-label').className='flex items-center gap-3 px-3 py-2 rounded-lg border cursor-pointer hover:bg-gray-50 transition-colors nav-check-label '+(this.checked?'border-primary-200 bg-primary-50/30':'border-gray-200')"
                                                        <?= $isChecked ? 'checked' : '' ?>>
                                                    <i class="fa-light fa-link text-gray-400" style="font-size:12px;width:14px;text-align:center;"></i>
                                                    <span class="text-sm text-gray-700"><?= htmlspecialchars($mi['label'] ?? $miId) ?></span>
                                                </label>
                                            <?php endforeach; ?>
                                        </div>
                                    </div>

                                    
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Custom links</label>
                                        <p class="text-xs text-gray-400 mb-2">Add extra links that don't come from the main menu.</p>
                                        <div id="navCustomLinks<?= $i ?>" class="space-y-2 max-w-lg">
                                            <?php
                                            if (empty($navCustomLinks)) $navCustomLinks = [];
                                            foreach ($navCustomLinks as $j => $ncl): ?>
                                            <div class="flex flex-col sm:flex-row gap-2 sm:items-center nav-custom-row">
                                                <div class="flex items-center gap-2 flex-1">
                                                    <input type="text" name="footer_col_nav_custom_label[<?= $i ?>][]"
                                                           value="<?= htmlspecialchars($ncl['label'] ?? '') ?>"
                                                           placeholder="Label"
                                                           class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                                                    <?= hentaiTranslateButton('footer_nav_cl_' . $i . '_' . $j, 'Link label', 'input', $ncl['_translations']['label'] ?? [], 'footer_col_nav_custom_label_translations[' . $i . '][' . $j . ']') ?>
                                                </div>
                                                <input type="url" name="footer_col_nav_custom_url[<?= $i ?>][]"
                                                       value="<?= htmlspecialchars($ncl['url'] ?? '') ?>"
                                                       placeholder="https://..."
                                                       class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                                                <button type="button" onclick="this.closest('.nav-custom-row').remove()" class="text-red-400 hover:text-red-600 text-lg leading-none px-1">&times;</button>
                                            </div>
                                            <?php endforeach; ?>
                                        </div>
                                        <button type="button" onclick="addNavCustomLink(<?= $i ?>)" class="mt-2 inline-flex items-center gap-1 text-xs font-medium text-primary-600 hover:text-primary-700"><i class="fa-solid fa-plus" style="font-size:9px;"></i> Add link</button>
                                    </div>

                                </div>
                            </div>

                            
                            <div class="col-config col-config-pages <?= $colType === 'pages' ? '' : 'hidden' ?>" id="colConfigPages<?= $i ?>">
                                <label class="block text-sm font-medium text-gray-600 mb-1">Select pages <span class="font-normal text-gray-400">(empty = all footer pages)</span></label>
                                <div class="max-h-40 overflow-y-auto border border-gray-200 rounded-lg p-2 space-y-1 max-w-md">
                                    <?php
                                    $selectedPages = $col['page_ids'] ?? [];
                                    foreach ($pages as $pg): ?>
                                        <label class="flex items-center gap-2 px-2 py-1 rounded hover:bg-gray-50 cursor-pointer">
                                            <input type="checkbox" name="footer_col_pages[<?= $i ?>][]" value="<?= $pg['id'] ?>"
                                                   class="w-3.5 h-3.5 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                                                <?= in_array((int)$pg['id'], $selectedPages) ? 'checked' : '' ?>>
                                            <span class="text-sm text-gray-700"><?= htmlspecialchars($pg['title']) ?></span>
                                        </label>
                                    <?php endforeach; ?>
                                    <?php if (empty($pages)): ?>
                                        <p class="text-xs text-gray-400 px-2 py-1">No published pages found.</p>
                                    <?php endif; ?>
                                </div>
                            </div>

                            
                            <div class="col-config col-config-custom_links <?= $colType === 'custom_links' ? '' : 'hidden' ?>" id="colConfigCustom<?= $i ?>">
                                <label class="block text-sm font-medium text-gray-600 mb-2">Custom links</label>
                                <div id="linkList<?= $i ?>" class="space-y-2">
                                    <?php
                                    $links = $col['links'] ?? [];
                                    if (empty($links)) $links = [['label' => '', 'url' => '']];
                                    foreach ($links as $j => $link): ?>
                                    <div class="flex flex-col sm:flex-row gap-2 sm:items-center link-row">
                                        <input type="text" name="footer_col_link_label[<?= $i ?>][]"
                                               value="<?= htmlspecialchars($link['label'] ?? '') ?>"
                                               placeholder="Label"
                                               class="flex-1 px-2 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-1 focus:ring-primary-500 outline-none">
                                        <?= hentaiTranslateButton('footer_link_' . $i . '_' . $j, 'Link label', 'input', $link['_translations']['label'] ?? [], 'footer_col_link_label_translations[' . $i . '][' . $j . ']') ?>
                                        <input type="url" name="footer_col_link_url[<?= $i ?>][]"
                                               value="<?= htmlspecialchars($link['url'] ?? '') ?>"
                                               placeholder="https://..."
                                               class="flex-1 px-2 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-1 focus:ring-primary-500 outline-none">
                                        <button type="button" onclick="this.closest('.link-row').remove()" class="text-red-400 hover:text-red-600 text-lg leading-none">&times;</button>
                                    </div>
                                    <?php endforeach; ?>
                                </div>
                                <button type="button" onclick="addLink(<?= $i ?>)" class="mt-2 text-xs font-medium text-primary-600 hover:text-primary-700">+ Add link</button>
                            </div>

                            
                            <div class="col-config col-config-badges <?= $colType === 'badges' ? '' : 'hidden' ?>" id="colConfigBadges<?= $i ?>">
                                <label class="block text-sm font-medium text-gray-600 mb-2">Badges</label>
                                <div id="badgeList<?= $i ?>" class="space-y-2">
                                    <?php
                                    $badges = $col['badges'] ?? [];
                                    if (empty($badges)) $badges = [['icon' => 'shield', 'label' => '']];
                                    foreach ($badges as $j => $badge):
                                        $currentIcon = $badge['icon'] ?? 'shield';
                                        $currentSvg = $badgeIconOptions[$currentIcon]['svg'] ?? $badgeIconOptions['shield']['svg'];
                                    ?>
                                    <div class="flex gap-2 items-center badge-row">
                                        <span class="badge-icon-preview flex-shrink-0 flex items-center justify-center w-8 h-8 rounded bg-gray-100 text-gray-600"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><?= $currentSvg ?></svg></span>
                                        <select name="footer_col_badge_icon[<?= $i ?>][]"
                                                onchange="updateBadgePreview(this)"
                                                class="w-28 px-2 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-1 focus:ring-primary-500 outline-none bg-white">
                                            <?php foreach ($badgeIconOptions as $bik => $biInfo): ?>
                                                <option value="<?= $bik ?>" <?= $currentIcon === $bik ? 'selected' : '' ?>><?= htmlspecialchars($biInfo['label']) ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                        <input type="text" name="footer_col_badge_label[<?= $i ?>][]"
                                               value="<?= htmlspecialchars($badge['label'] ?? '') ?>"
                                               placeholder="Label text"
                                               class="flex-1 px-2 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-1 focus:ring-primary-500 outline-none">
                                        <?= hentaiTranslateButton('footer_badge_' . $i . '_' . $j, 'Badge label', 'input', $badge['_translations']['label'] ?? [], 'footer_col_badge_label_translations[' . $i . '][' . $j . ']') ?>
                                        <button type="button" onclick="this.closest('.badge-row').remove()" class="text-red-400 hover:text-red-600 text-lg leading-none">&times;</button>
                                    </div>
                                    <?php endforeach; ?>
                                </div>
                                <button type="button" onclick="addBadge(<?= $i ?>)" class="mt-2 text-xs font-medium text-primary-600 hover:text-primary-700">+ Add badge</button>
                            </div>

                            
                            <div class="col-config col-config-social <?= $colType === 'social' ? '' : 'hidden' ?>" id="colConfigSocial<?= $i ?>">
                                <?php
                                $allSocialKeys = ['twitter', 'instagram', 'reddit', 'telegram', 'discord'];
                                $socialIcons = [
                                    'twitter'   => 'fa-brands fa-x-twitter',
                                    'instagram' => 'fa-brands fa-instagram',
                                    'reddit'    => 'fa-brands fa-reddit-alien',
                                    'telegram'  => 'fa-brands fa-telegram',
                                    'discord'   => 'fa-brands fa-discord',
                                ];
                                $socialNames = ['twitter' => 'Twitter / X', 'instagram' => 'Instagram', 'reddit' => 'Reddit', 'telegram' => 'Telegram', 'discord' => 'Discord'];
                                $configuredSocials = array_filter($social, fn($v) => $v !== '');
                                $selectedSocials = $col['social_items'] ?? null;  
                                ?>
                                <?php if (empty($configuredSocials)): ?>
                                    <div class="flex items-start gap-3 p-3 bg-amber-50 border border-amber-200 rounded-lg">
                                        <i class="fa-solid fa-circle-info text-amber-500 mt-0.5"></i>
                                        <div>
                                            <p class="text-sm font-medium text-amber-900">No social links configured</p>
                                            <p class="text-xs text-amber-700 mt-1">Add your social media URLs first, then come back to select which ones to display.
                                                <a href="#" onclick="event.preventDefault();document.querySelector('.ft-tab-link[data-tab=bottombar]').click()" class="underline font-medium">Go to Bottom Bar &rarr;</a>
                                            </p>
                                        </div>
                                    </div>
                                <?php else: ?>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Networks to display</label>
                                    <p class="text-xs text-gray-400 mb-3">Uncheck to hide specific networks. Only configured networks are shown.</p>
                                    <div class="space-y-2 max-w-xs">
                                        <?php foreach ($allSocialKeys as $sk):
                                            $isConfigured = !empty($configuredSocials[$sk]);
                                            $isSelected = $selectedSocials === null || in_array($sk, $selectedSocials, true);
                                        ?>
                                            <label class="flex items-center gap-3 px-3 py-2 rounded-lg border <?= $isConfigured ? 'border-gray-200 cursor-pointer hover:bg-gray-50' : 'border-gray-100 bg-gray-50 opacity-50 cursor-not-allowed' ?>">
                                                <input type="checkbox" name="footer_col_social_items[<?= $i ?>][]" value="<?= $sk ?>"
                                                       class="w-3.5 h-3.5 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                                                       <?= ($isSelected && $isConfigured) ? 'checked' : '' ?>
                                                       <?= !$isConfigured ? 'disabled' : '' ?>>
                                                <i class="<?= $socialIcons[$sk] ?> text-gray-500" style="width:16px;text-align:center;"></i>
                                                <span class="text-sm text-gray-700"><?= $socialNames[$sk] ?></span>
                                                <?php if (!$isConfigured): ?>
                                                    <span class="text-[10px] text-gray-400 ml-auto">not configured</span>
                                                <?php endif; ?>
                                            </label>
                                        <?php endforeach; ?>
                                    </div>
                                <?php endif; ?>
                            </div>

                            
                            <div class="col-config col-config-text <?= $colType === 'text' ? '' : 'hidden' ?>" id="colConfigText<?= $i ?>">
                                <label class="block text-sm font-medium text-gray-600 mb-1">Custom HTML content</label>
                                <textarea name="footer_col_content[<?= $i ?>]" rows="4"
                                          class="w-full max-w-lg px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none resize-y"><?= htmlspecialchars($col['content'] ?? '') ?></textarea>
                            </div>

                            </div>
                        </div>
                    </div>
                    <?php endfor; ?>

                </div>
            </div>

            
            <div class="ft-panel" id="ft-bottombar">
                <div class="space-y-4" style="max-width:560px">

                    
                    <label class="ft-toggle-card <?= !empty($bottom['show_copyright']) ? 'checked' : '' ?>"
                           onclick="setTimeout(function(){var c=event.currentTarget||event.target.closest('.ft-toggle-card');var cb=c.querySelector('input[type=checkbox]');c.classList.toggle('checked',cb.checked)},0)">
                        <input type="checkbox" name="footer_show_copyright" value="1"
                            <?= !empty($bottom['show_copyright']) ? 'checked' : '' ?>>
                        <div class="ft-card-body">
                            <div class="ft-card-label">
                                <i class="fa-solid fa-copyright"></i> Show copyright
                            </div>
                            <div class="ft-card-input" onclick="event.stopPropagation()">
                                <div class="flex items-center gap-2">
                                    <input type="text" name="footer_copyright_text"
                                           value="<?= htmlspecialchars($bottom['copyright_text'] ?? '') ?>"
                                           placeholder="Leave empty for default: &copy; 2026 SiteName">
                                    <?= hentaiTranslateButton('footer_copyright', 'Copyright text', 'input', $bottom['_translations']['copyright_text'] ?? [], 'footer_copyright_text_translations') ?>
                                </div>
                            </div>
                        </div>
                    </label>

                    
                    <label class="ft-toggle-card <?= !empty($bottom['show_disclaimer']) ? 'checked' : '' ?>"
                           onclick="setTimeout(function(){var c=event.currentTarget||event.target.closest('.ft-toggle-card');var cb=c.querySelector('input[type=checkbox]');c.classList.toggle('checked',cb.checked)},0)">
                        <input type="checkbox" name="footer_show_disclaimer" value="1"
                            <?= !empty($bottom['show_disclaimer']) ? 'checked' : '' ?>>
                        <div class="ft-card-body">
                            <div class="ft-card-label">
                                <i class="fa-solid fa-triangle-exclamation"></i> Show disclaimer
                            </div>
                            <div class="ft-card-input" onclick="event.stopPropagation()">
                                <div class="flex items-start gap-2">
                                    <textarea name="footer_disclaimer_text" rows="2"
                                              placeholder="Leave empty for default 18+ disclaimer."><?= htmlspecialchars($bottom['disclaimer_text'] ?? '') ?></textarea>
                                    <?= hentaiTranslateButton('footer_disclaimer', 'Disclaimer text', 'textarea', $bottom['_translations']['disclaimer_text'] ?? [], 'footer_disclaimer_text_translations') ?>
                                </div>
                            </div>
                        </div>
                    </label>

                    
                    <label class="ft-toggle-card <?= !empty($bottom['show_social']) ? 'checked' : '' ?>"
                           onclick="setTimeout(function(){var c=event.currentTarget||event.target.closest('.ft-toggle-card');var cb=c.querySelector('input[type=checkbox]');c.classList.toggle('checked',cb.checked)},0)">
                        <input type="checkbox" name="footer_show_social" value="1" id="ftSocialToggle"
                            <?= !empty($bottom['show_social']) ? 'checked' : '' ?>>
                        <div class="ft-card-body">
                            <div class="ft-card-label">
                                <i class="fa-solid fa-share-nodes"></i> Show social icons
                            </div>
                            <div class="ft-card-hint">Display social media icons in the bottom bar.</div>
                        </div>
                    </label>

                    
                    <div id="ftSocialLinks" style="<?= empty($bottom['show_social']) ? 'display:none' : '' ?>">
                        <div style="padding:4px 0 8px">
                            <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Social Links</span>
                        </div>
                        <?php
                        $socialFields = [
                            'social_twitter'   => ['label' => 'Twitter / X',  'placeholder' => 'https://x.com/yourprofile',              'icon' => 'fa-brands fa-x-twitter'],
                            'social_instagram' => ['label' => 'Instagram',    'placeholder' => 'https://instagram.com/yourprofile',       'icon' => 'fa-brands fa-instagram'],
                            'social_reddit'    => ['label' => 'Reddit',       'placeholder' => 'https://reddit.com/r/yourcommunity',      'icon' => 'fa-brands fa-reddit-alien'],
                            'social_telegram'  => ['label' => 'Telegram',     'placeholder' => 'https://t.me/yourchannel',                'icon' => 'fa-brands fa-telegram'],
                            'social_discord'   => ['label' => 'Discord',      'placeholder' => 'https://discord.gg/yourinvite',           'icon' => 'fa-brands fa-discord'],
                        ];
                        foreach ($socialFields as $key => $field):
                            $shortKey = str_replace('social_', '', $key);
                        ?>
                        <div class="ft-social-row">
                            <span class="ft-social-icon"><i class="<?= $field['icon'] ?>"></i></span>
                            <input type="url" id="<?= $key ?>" name="<?= $key ?>"
                                   value="<?= htmlspecialchars($social[$shortKey] ?? ($settings[$key] ?? '')) ?>"
                                   placeholder="<?= $field['placeholder'] ?>">
                        </div>
                        <?php endforeach; ?>
                    </div>

                </div>
            </div>

        </div>

        
        <div class="sticky bottom-0 bg-gray-50 pt-4 pb-2 -mx-4 px-4 sm:-mx-6 sm:px-6 mt-6" style="z-index: 10;">
            <button type="submit" class="inline-flex items-center px-5 py-2.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors shadow-sm">Save changes</button>
        </div>
    </form>

    <script>
     
    document.querySelectorAll('.ft-tab-link').forEach(function(tab) {
        tab.addEventListener('click', function(e) {
            e.preventDefault();
            document.querySelectorAll('.ft-tab-link').forEach(function(t) {
                t.className = 'ft-tab-link px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300';
            });
            document.querySelectorAll('.ft-panel').forEach(function(p) { p.classList.remove('active'); });
            tab.className = 'ft-tab-link px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-primary-600 text-primary-600';
            document.getElementById('ft-' + tab.dataset.tab).classList.add('active');
        });
    });

     
    document.getElementById('ftSocialToggle').addEventListener('change', function() {
        document.getElementById('ftSocialLinks').style.display = this.checked ? '' : 'none';
    });

     
    function toggleColumn(idx, enabled) {
        var body = document.getElementById('colBody' + idx);
        var pill = document.getElementById('colPill' + idx);
        var status = document.getElementById('colStatus' + idx);
        if (enabled) {
            body.classList.remove('opacity-40', 'pointer-events-none');
            pill.classList.remove('opacity-50');
            pill.innerHTML = 'Column ' + (idx + 1);
            status.className = 'ft-status-badge on';
            status.textContent = 'Enabled';
        } else {
            body.classList.add('opacity-40', 'pointer-events-none');
            pill.classList.add('opacity-50');
            pill.innerHTML = 'Column ' + (idx + 1) + ' <span class="text-[10px]">(off)</span>';
            status.className = 'ft-status-badge off';
            status.textContent = 'Disabled';
        }
    }

    function setColumnCount(n) {
        document.getElementById('footerColCount').value = n;
        for (var b = 1; b <= 4; b++) {
            var card = document.getElementById('colBtn' + b);
            if (b === n) {
                card.className = card.className.replace(/border-gray-200 hover:border-gray-300|border-primary-600 bg-primary-50/g, 'border-primary-600 bg-primary-50');
                card.querySelectorAll('div[class*="bg-gray-300"], div[class*="bg-primary-400"]').forEach(function(d) {
                    d.className = d.className.replace('bg-gray-300', 'bg-primary-400');
                });
            } else {
                card.className = card.className.replace(/border-primary-600 bg-primary-50|border-gray-200 hover:border-gray-300/g, 'border-gray-200 hover:border-gray-300');
                card.querySelectorAll('div[class*="bg-primary-400"], div[class*="bg-gray-300"]').forEach(function(d) {
                    d.className = d.className.replace('bg-primary-400', 'bg-gray-300');
                });
            }
        }
        for (var i = 0; i < 4; i++) {
            var pill = document.getElementById('colPill' + i);
            if (i >= n) {
                pill.classList.add('hidden');
            } else {
                pill.classList.remove('hidden');
            }
        }
        var activePanel = document.querySelector('.col-panel:not(.hidden)');
        var activeCol = activePanel ? parseInt(activePanel.id.replace('colPanel', '')) : 0;
        if (activeCol >= n) {
            showColumn(0);
        }
    }

    function showColumn(idx) {
        document.querySelectorAll('.col-panel').forEach(function(el) { el.classList.add('hidden'); });
        document.getElementById('colPanel' + idx).classList.remove('hidden');
        var count = parseInt(document.getElementById('footerColCount').value);
        for (var i = 0; i < count; i++) {
            var pill = document.getElementById('colPill' + i);
            if (pill.classList.contains('hidden')) continue;
            var isDisabled = pill.classList.contains('opacity-50');
            if (i === idx) {
                pill.className = 'col-pill px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-primary-600 text-primary-600' + (isDisabled ? ' opacity-50' : '');
            } else {
                pill.className = 'col-pill px-4 py-2.5 text-sm font-medium border-b-2 transition-colors border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' + (isDisabled ? ' opacity-50' : '');
            }
        }
    }

    function selectColType(colIdx, type) {
        document.getElementById('colType' + colIdx).value = type;
        document.querySelectorAll('.colTypeBtn_' + colIdx).forEach(function(btn) {
            btn.classList.remove('active');
        });
        var activeBtn = document.getElementById('typeBtn_' + colIdx + '_' + type);
        if (activeBtn) {
            activeBtn.classList.add('active');
        }
        var panel = document.getElementById('colPanel' + colIdx);
        panel.querySelectorAll('.col-config').forEach(function(el) { el.classList.add('hidden'); });
        var map = {logo: 'Logo', navigation: 'Nav', pages: 'Pages', custom_links: 'Custom', badges: 'Badges', social: 'Social', text: 'Text'};
        if (map[type]) {
            var el = document.getElementById('colConfig' + map[type] + colIdx);
            if (el) el.classList.remove('hidden');
        }
    }

    <?php
     
    $tlLangs = [];
    foreach (Translator::available() as $lang) {
        $tlLangs[] = [
            'code' => $lang['code'],
            'name' => $lang['name'],
            'flag' => Translator::flagCode($lang['code']),
            'dir'  => ($lang['direction'] ?? 'ltr') === 'rtl' ? 'rtl' : 'ltr',
            'default' => ($lang['code'] === Translator::getDefaultCode()),
        ];
    }
    ?>
    var _tlLangs = <?= json_encode($tlLangs, JSON_UNESCAPED_UNICODE) ?>;
    var _tlCounter = 1000;

    function createTranslateButton(inputName) {
        if (_tlLangs.length < 2) return '';
        var id = 'tl_dyn_' + (++_tlCounter);
        var globe = '<button type="button" onclick="openTranslationModal(\'' + id + '\')" class="tl-globe-btn" title="Translate into other languages" id="tl-btn-' + id + '">'
            + '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">'
            + '<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/>'
            + '<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>'
            + '</svg></button>';
        var modal = '<div class="tl-overlay" id="tl-modal-' + id + '"><div class="tl-modal">'
            + '<div class="tl-modal__header"><div class="tl-modal__title">'
            + '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;color:#6366f1;">'
            + '<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/>'
            + '<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>'
            + '<span>Translate</span></div>'
            + '<button type="button" onclick="closeTranslationModal(\'' + id + '\')" class="tl-modal__close">'
            + '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></button></div>'
            + '<div class="tl-modal__body">';
        _tlLangs.forEach(function(lang) {
            modal += '<div class="tl-lang-row"><div class="tl-lang-row__label">'
                + '<span class="fi fi-' + lang.flag + ' fis" style="width:16px;height:16px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,0.08);flex-shrink:0;"></span>'
                + '<span class="tl-lang-row__name">' + lang.name + '</span>';
            if (lang.default) {
                modal += '<span class="tl-lang-row__badge">Default</span></div><div class="tl-lang-row__note">Uses the main field value</div>';
            } else {
                modal += '</div><input type="text" name="' + inputName + '[' + lang.code + ']" value="" dir="' + lang.dir + '" placeholder="Leave empty for default" class="tl-lang-row__input">';
            }
            modal += '</div>';
        });
        modal += '</div><div class="tl-modal__footer"><button type="button" onclick="closeTranslationModal(\'' + id + '\')" class="tl-modal__done">Done</button></div></div></div>';
        return globe + modal;
    }

    function addNavCustomLink(i) {
        var list = document.getElementById('navCustomLinks' + i);
        var idx = list.querySelectorAll('.nav-custom-row').length;
        var row = document.createElement('div');
        row.className = 'flex flex-col sm:flex-row gap-2 sm:items-center nav-custom-row';
        var tlBtn = createTranslateButton('footer_col_nav_custom_label_translations[' + i + '][' + idx + ']');
        row.innerHTML = '<div class="flex items-center gap-2 flex-1">'
            + '<input type="text" name="footer_col_nav_custom_label[' + i + '][]" placeholder="Label" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">'
            + tlBtn
            + '</div>'
            + '<input type="url" name="footer_col_nav_custom_url[' + i + '][]" placeholder="https://..." class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">'
            + '<button type="button" onclick="this.closest(\'.nav-custom-row\').remove()" class="text-red-400 hover:text-red-600 text-lg leading-none px-1">&times;</button>';
        list.appendChild(row);
    }

    function addLink(i) {
        var list = document.getElementById('linkList' + i);
        var idx = list.querySelectorAll('.link-row').length;
        var row = document.createElement('div');
        row.className = 'flex flex-col sm:flex-row gap-2 sm:items-center link-row';
        var tlBtn = createTranslateButton('footer_col_link_label_translations[' + i + '][' + idx + ']');
        row.innerHTML = '<div class="flex items-center gap-2 flex-1">'
            + '<input type="text" name="footer_col_link_label[' + i + '][]" placeholder="Label" class="flex-1 px-2 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-1 focus:ring-primary-500 outline-none">'
            + tlBtn
            + '</div>'
            + '<input type="url" name="footer_col_link_url[' + i + '][]" placeholder="https://..." class="flex-1 px-2 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-1 focus:ring-primary-500 outline-none">'
            + '<button type="button" onclick="this.closest(\'.link-row\').remove()" class="text-red-400 hover:text-red-600 text-lg leading-none">&times;</button>';
        list.appendChild(row);
    }

    var _badgeIcons = <?= json_encode(array_map(fn($v) => ['label' => $v['label'], 'svg' => $v['svg']], FooterConfig::badgeIcons()), JSON_UNESCAPED_SLASHES) ?>;

    function updateBadgePreview(sel) {
        var row = sel.closest('.badge-row');
        var preview = row.querySelector('.badge-icon-preview');
        var icon = _badgeIcons[sel.value];
        if (preview && icon) {
            preview.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' + icon.svg + '</svg>';
        }
    }

    function addBadge(i) {
        var list = document.getElementById('badgeList' + i);
        var idx = list.querySelectorAll('.badge-row').length;
        var row = document.createElement('div');
        row.className = 'flex gap-2 items-center badge-row';
        var firstKey = Object.keys(_badgeIcons)[0];
        var firstSvg = _badgeIcons[firstKey].svg;
        var tlBtn = createTranslateButton('footer_col_badge_label_translations[' + i + '][' + idx + ']');
        var sel = '<span class="badge-icon-preview flex-shrink-0 flex items-center justify-center w-8 h-8 rounded bg-gray-100 text-gray-600"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' + firstSvg + '</svg></span>';
        sel += '<select name="footer_col_badge_icon[' + i + '][]" onchange="updateBadgePreview(this)" class="w-28 px-2 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-1 focus:ring-primary-500 outline-none bg-white">';
        for (var k in _badgeIcons) { sel += '<option value="' + k + '">' + _badgeIcons[k].label + '</option>'; }
        sel += '</select>';
        row.innerHTML = sel
            + '<input type="text" name="footer_col_badge_label[' + i + '][]" placeholder="Label text" class="flex-1 px-2 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-1 focus:ring-primary-500 outline-none">'
            + tlBtn
            + '<button type="button" onclick="this.closest(\'.badge-row\').remove()" class="text-red-400 hover:text-red-600 text-lg leading-none">&times;</button>';
        list.appendChild(row);
    }
    </script>
    <?php
    hentaiTranslateModalAssets();
});

 
HookSystem::addAction('admin.appearance_save.footer', function (): void {
    $config = FooterConfig::fromPost($_POST);

     
    foreach ($config['columns'] as $i => &$col) {
        if (($col['type'] ?? '') !== 'logo') continue;

         
        $existing = FooterConfig::get();
        $col['custom_logo'] = $existing['columns'][$i]['custom_logo'] ?? '';

         
        if (!empty($_POST['footer_col_remove_logo'][$i])) {
            if ($col['custom_logo'] !== '') {
                FileUpload::delete('branding/' . $col['custom_logo']);
            }
            $col['custom_logo'] = '';
        }

         
        if (!empty($_FILES['footer_col_logo']['tmp_name'][$i]) && $_FILES['footer_col_logo']['error'][$i] === UPLOAD_ERR_OK) {
            $tmpFile = [
                'tmp_name' => $_FILES['footer_col_logo']['tmp_name'][$i],
                'error'    => $_FILES['footer_col_logo']['error'][$i],
                'size'     => $_FILES['footer_col_logo']['size'][$i],
                'name'     => $_FILES['footer_col_logo']['name'][$i],
                'type'     => $_FILES['footer_col_logo']['type'][$i],
            ];
            $result = FileUpload::image($tmpFile, 'branding');
            if ($result['success']) {
                 
                if ($col['custom_logo'] !== '') {
                    FileUpload::delete('branding/' . $col['custom_logo']);
                }
                $col['custom_logo'] = $result['path'];
            }
        }
    }
    unset($col);

    FooterConfig::save($config);
});
