From e90464e653e90a6f9724d04283ad344e5efb477f Mon Sep 17 00:00:00 2001
From: Abdy Franco <abdy@devmail.one>
Date: Tue, 3 Feb 2026 16:59:23 -0600
Subject: [PATCH] Updated admin views

---
 config.json                         |   3 +-
 language/en_us/admin_main.php       |   2 +
 views/default/admin_main.pdt        |  93 +++++----
 views/default/admin_main_manage.pdt | 288 ++++++++++++++++++++--------
 4 files changed, 263 insertions(+), 123 deletions(-)

diff --git a/config.json b/config.json
index f4c2bc7..ca49213 100644
--- a/config.json
+++ b/config.json
@@ -1,7 +1,8 @@
 {
-    "version": "3.0.3",
+    "version": "4.0.0",
     "name": "CmsPlugin.name",
     "description": "CmsPlugin.description",
+    "icon": "bi bi-circle",
     "authors": [
         {
             "name": "Phillips Data, Inc.",
diff --git a/language/en_us/admin_main.php b/language/en_us/admin_main.php
index 96ccd65..f9cbf55 100644
--- a/language/en_us/admin_main.php
+++ b/language/en_us/admin_main.php
@@ -6,6 +6,7 @@
 
 $lang['AdminMain.index.heading.uri'] = 'URI';
 $lang['AdminMain.index.heading.title'] = 'Title';
+$lang['AdminMain.index.heading.options'] = 'Options';
 
 $lang['AdminMain.index.add'] = 'Add Page';
 $lang['AdminMain.index.edit'] = 'Edit';
@@ -17,6 +18,7 @@
 
 // Manage
 $lang['AdminMain.manage.boxtitle'] = 'Manage CMS Page';
+$lang['AdminMain.manage.back'] = 'Back to Pages';
 
 $lang['AdminMain.manage.label.uri'] = 'URI';
 $lang['AdminMain.manage.label.title'] = 'Title';
diff --git a/views/default/admin_main.pdt b/views/default/admin_main.pdt
index 5088cbc..34d442a 100644
--- a/views/default/admin_main.pdt
+++ b/views/default/admin_main.pdt
@@ -1,12 +1,12 @@
-<?php 
-    /** @var View $this */ 
+<?php /** @var View $this */ ?>
 
+<?php
     echo $message ?? null;
 
     $buttons = [
         [
-            'icon' => 'fas fa-plus',
-            'name' => '',
+            'icon' => 'bi bi-plus-lg me-1',
+            'name' => $this->_('AdminMain.index.add', true),
             'attributes' => [
                 'title' => $this->_('AdminMain.index.add', true),
                 'href' => $this->Html->safe($this->base_uri . 'plugin/cms/admin_main/manage')
@@ -16,43 +16,60 @@
 
     $this->Widget->clear();
     $this->Widget->setLinkButtons($buttons);
+    $this->Widget->setBodyWrapper(false);
     $this->Widget->create($this->_('AdminMain.index.boxtitle', true), ['id' => 'admin_main'], $render_section ?? null);
 ?>
     <?php if ((($num_pages = count($pages ?? [])) > 0)) { ?>
-        <table class="table">
-            <tr class="heading_row">
-                <td><span><a href="<?= $this->Html->safe($this->base_uri . 'plugin/cms/admin_main/index?sort=uri&order=' . ($sort == 'uri' ? $negate_order : $order));?>" class="ajax<?= $this->Html->safe($sort == 'uri' ? ' ' . $order : '');?>"><?php $this->_('AdminMain.index.heading.uri'); ?></a></span></td>
-                <td><span><a href="<?= $this->Html->safe($this->base_uri . 'plugin/cms/admin_main/index?sort=title&order=' . ($sort == 'title' ? $negate_order : $order));?>" class="ajax<?= $this->Html->safe($sort == 'title' ? ' ' . $order : '');?>"><?php $this->_('AdminMain.index.heading.title'); ?></a></span></td>
-                <td class="last"><?php $this->_('AdminMain.index.heading.options') ?></td>
-            </tr>
-
-            <?php for ($i = 0; $i < $num_pages; $i++) { ?>
-                <tr<?= ($i % 2 == 1 ? ' class="odd_row"' : '') ?>>
-                    <?php $page = $pages[$i] ?>
-                    <td><?= $this->Html->safe($page->uri) ?></td>
-                    <td><?= $this->Html->safe($page->title) ?></td>
-                    <td>
-                        <a href="<?= $this->Html->safe($this->base_uri . 'plugin/cms/admin_main/manage/?' . http_build_query(['uri' => $page->uri])) ?>"><?php $this->_('AdminMain.index.edit') ?></a>
-                        <?php $this->Form->create($this->base_uri . 'plugin/cms/admin_main/delete') ?>
-                            <?php $this->Form->fieldHidden('uri', $page->uri) ?>
-                            <a href="<?= $this->Html->safe($this->base_uri . 'plugin/cms/admin_main/delete') ?>" rel="<?php $this->_('AdminMain.modal.delete') ?>" class="manage"><?php $this->_('AdminMain.index.delete') ?></a>
-                        <?php $this->Form->end() ?>
-                    </td>
-                </tr>
-            <?php } ?>
-        </table>
-        <?php $this->Pagination->build() ?>
+        <div class="table-responsive">
+            <table class="table table-hover mb-0">
+                <thead>
+                    <tr>
+                        <th>
+                            <a href="<?= $this->Html->safe($this->base_uri . 'plugin/cms/admin_main/index?sort=uri&order=' . ($sort == 'uri' ? $negate_order : $order));?>" class="ajax<?= $this->Html->safe($sort == 'uri' ? ' ' . $order : '');?>">
+                                <?php $this->_('AdminMain.index.heading.uri'); ?>
+                            </a>
+                        </th>
+                        <th>
+                            <a href="<?= $this->Html->safe($this->base_uri . 'plugin/cms/admin_main/index?sort=title&order=' . ($sort == 'title' ? $negate_order : $order));?>" class="ajax<?= $this->Html->safe($sort == 'title' ? ' ' . $order : '');?>">
+                                <?php $this->_('AdminMain.index.heading.title'); ?>
+                            </a>
+                        </th>
+                        <th><?php $this->_('AdminMain.index.heading.options') ?></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <?php for ($i = 0; $i < $num_pages; $i++) { ?>
+                        <?php $page = $pages[$i] ?>
+                        <tr>
+                            <td><?= $this->Html->safe($page->uri) ?></td>
+                            <td><?= $this->Html->safe($page->title) ?></td>
+                            <td>
+                                <div class="d-flex align-items-center gap-2">
+                                    <a class="btn btn-outline-secondary btn-sm" href="<?= $this->Html->safe($this->base_uri . 'plugin/cms/admin_main/manage/?' . http_build_query(['uri' => $page->uri])) ?>"><?php $this->_('AdminMain.index.edit') ?></a>
+                                    <?php $this->Form->create($this->base_uri . 'plugin/cms/admin_main/delete', ['class' => 'd-inline']) ?>
+                                        <?php $this->Form->fieldHidden('uri', $page->uri) ?>
+                                        <button type="button" class="btn btn-danger btn-sm modal-confirm-delete" data-confirm-message="<?php $this->_('AdminMain.modal.delete') ?>"><?php $this->_('AdminMain.index.delete') ?></button>
+                                    <?php $this->Form->end() ?>
+                                </div>
+                            </td>
+                        </tr>
+                    <?php } ?>
+                </tbody>
+            </table>
+        </div>
+    <?php
+    if (isset($this->Pagination) && $this->Pagination->hasPages()) {
+    ?>
+        <div class="card-footer">
+            <?php $this->Pagination->build();?>
+        </div>
+    <?php
+    }
+    ?>
     <?php } else { ?>
-        <div class="empty_section">
-            <div class="empty_box">
-                <?php $this->_('AdminMain.index.empty') ?>
-            </div>
+        <div class="card-body text-center text-muted py-4">
+            <i class="bi bi-file-earmark-text" style="font-size: 2rem; opacity: 0.3;"></i>
+            <p class="mt-2 mb-0"><?php $this->_('AdminMain.index.empty') ?></p>
         </div>
     <?php } ?>
-<?php $this->Widget->end() ?>
-
-<script type="text/javascript">
-    $(document).ready(function() {
-        $('#admin_main a.manage[rel]').blestaModalConfirm({base_url: '<?= $this->Html->safe($this->base_uri);?>', close: '<?php $this->_('AppController.modal.text_close');?>', submit: true});
-    });
-</script>
\ No newline at end of file
+<?php $this->Widget->end() ?>
\ No newline at end of file
diff --git a/views/default/admin_main_manage.pdt b/views/default/admin_main_manage.pdt
index b96ae2d..856da0d 100644
--- a/views/default/admin_main_manage.pdt
+++ b/views/default/admin_main_manage.pdt
@@ -1,109 +1,229 @@
-<?php
-    /** @var View $this */
+<?php /** @var View $this */ ?>
 
+<?php
     echo $message ?? null;
 
+    $link_buttons = [
+        [
+            'icon' => 'bi bi-arrow-left me-1',
+            'name' => $this->_('AdminMain.manage.back', true),
+            'attributes' => [
+                'title' => $this->_('AdminMain.manage.back', true),
+                'href' => $this->Html->safe($this->base_uri . 'plugin/cms/admin_main/')
+            ]
+        ]
+    ];
+
     $this->Widget->clear();
+    $this->Widget->setLinkButtons($link_buttons);
+    $this->Widget->setBodyWrapper(false);
     $this->Widget->create($this->_('AdminMain.manage.boxtitle', true));
 
     $this->Form->create(null, ['id' => 'portal_form']);
 ?>
-    <div class="inner">
-        <div class="pad">
-            <ul>
-                <li>
-                    <?php $this->Form->label($this->_('AdminMain.manage.label.uri', true), 'uri'); ?>
-                    <?php $this->Form->fieldText('uri', $uri ?? null, ['id' => 'uri']); ?>
+    <div class="card-body">
+        <div class="mb-3">
+            <?php $this->Form->label($this->_('AdminMain.manage.label.uri', true), 'uri', ['class' => 'form-label']); ?>
+            <?php $this->Form->fieldText('uri', $uri ?? null, ['id' => 'uri', 'class' => 'form-control']); ?>
+        </div>
+
+        <ul class="nav nav-tabs-connected" role="tablist">
+            <?php foreach ($languages as $i => $lang) { ?>
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link<?= ($lang->code ?? null) == Configure::get('Blesta.language') ? ' active' : '' ?>" data-bs-toggle="tab" data-bs-target="#tab-<?= $this->Html->safe($lang->code) ?>" type="button" role="tab">
+                        <?= $this->Html->safe($lang->name ?? null) ?>
+                    </button>
                 </li>
-                <li>
-                    <div class="tab_content inverse">
-                        <ul class="tabs">
-                            <?php foreach ($languages as $lang) { ?>
-                                <li<?= ($lang->code ?? null) == Configure::get('Blesta.language') ? ' class="current"' : '' ?>>
-                                    <a href="#"><?= $this->Html->safe($lang->name ?? null) ?></a>
-                                </li>
-                            <?php } ?>
-                        </ul>
-                        <div class="inner_content">
-                            <?php foreach ($languages as $i => $lang) { ?>
-                                <?php $page = (object)($vars[$lang->code] ?? $pages[$lang->code] ?? []); ?>
-                                <div>
-                                    <ul>
-                                        <li>
-                                            <?php $this->Form->label($this->_('AdminMain.manage.label.title', true), 'title'); ?>
-                                            <?php $this->Form->fieldText('pages[' . $lang->code . '][title]', ($page->title ?? null), ['id' => 'title']); ?>
-                                        </li>
-                                        <li>
-                                            <?php $this->Form->label($this->_('AdminMain.manage.label.tags', true), 'tags'); ?>
-                                            <div class="accent_box">
-                                                <?php foreach (($tags ?? []) as $tag) { ?>
-                                                    <?= $this->Html->concat(' ', $this->Html->safe($tag ?? null), ' '); ?>
-                                                <?php } ?>
-                                            </div>
-                                        </li>
-                                        <li>
-                                            <?php $this->Form->label($this->_('AdminMain.manage.label.content_type', true), 'content_type') ?>
-                                            <?php foreach ($content_types as $type => $name) { ?>
-                                                <?php $this->Form->fieldRadio('pages[' . $lang->code . '][content_type]', $type, ($page->content_type ?? array_keys($content_types ?? [])[0] ?? null) == $type, ['id' => 'content_type_' . $type . '-' . $i, 'class' => 'content_type']) ?>
-                                                <?php $this->Form->label($name, 'content_type_' . $type . '-' . $i, ['class' => 'inline']) ?>
-                                            <?php } ?>
-                                        </li>
-                                        <?php foreach ($content_types as $type => $name) {?>
-                                            <?php $current_type = $type == ($page->content_type ?? array_keys($content_types ?? [])[0] ?? null); ?>
-                                            <li class="content <?= 'content_' . $type ?>"<?= $current_type ? '' : ' style="display:none"' ?>>
-                                                <?php 
-                                                    $attributes = $current_type ? [] : ['disabled' => '']; 
-                                                    switch($type) {
-                                                        case 'wysiwyg':
-                                                            $attributes['class'] = 'wysiwyg';
-                                                            break;
-                                                        case 'md':
-                                                            $attributes['data-markdown-editor'] = '';
-                                                            unset($attributes['disabled']); // Disables the whole editor, let javascript disable it
-                                                            break;
-                                                    }
-
-                                                    $this->Form->label($this->_('AdminMain.manage.label.content', true), 'content');
-                                                    $this->Form->fieldTextarea('pages[' . $lang->code . '][content]', ($page->content_type ?? array_keys($content_types ?? [])[0] ?? null) == $type ? ($page->content ?? null) : '', $attributes);
-                                                ?>
-                                            </li>
-                                        <?php } ?>
-                                    </ul>
-                                </div>
+            <?php } ?>
+        </ul>
+        <div class="tab-content tab-content-connected mb-3">
+            <?php foreach ($languages as $i => $lang) { ?>
+                <?php $page = (object)($vars[$lang->code] ?? $pages[$lang->code] ?? []); ?>
+                <div class="tab-pane fade<?= ($lang->code ?? null) == Configure::get('Blesta.language') ? ' show active' : '' ?>" id="tab-<?= $this->Html->safe($lang->code) ?>" role="tabpanel">
+                    <div class="mb-3">
+                        <?php $this->Form->label($this->_('AdminMain.manage.label.title', true), 'title-' . $lang->code, ['class' => 'form-label']); ?>
+                        <?php $this->Form->fieldText('pages[' . $lang->code . '][title]', ($page->title ?? null), ['id' => 'title-' . $lang->code, 'class' => 'form-control']); ?>
+                    </div>
+                    <div class="alert alert-info mb-3">
+                        <h6 class="alert-heading mb-2"><i class="bi bi-tags me-2"></i><?php $this->_('AdminMain.manage.label.tags'); ?></h6>
+                        <div class="d-flex flex-wrap gap-2">
+                            <?php foreach (($tags ?? []) as $tag) { ?>
+                                <code><?= $this->Html->safe($tag ?? null) ?></code>
                             <?php } ?>
                         </div>
                     </div>
-                </li>
-            </ul>
+                    <div class="mb-3">
+                        <?php $this->Form->label($this->_('AdminMain.manage.label.content_type', true), 'content_type', ['class' => 'form-label d-block']) ?>
+                        <?php foreach ($content_types as $type => $name) { ?>
+                            <div class="form-check form-check-inline">
+                                <?php $this->Form->fieldRadio('pages[' . $lang->code . '][content_type]', $type, ($page->content_type ?? array_keys($content_types ?? [])[0] ?? null) == $type, ['id' => 'content_type_' . $type . '-' . $i, 'class' => 'form-check-input content_type']) ?>
+                                <?php $this->Form->label($name, 'content_type_' . $type . '-' . $i, ['class' => 'form-check-label']) ?>
+                            </div>
+                        <?php } ?>
+                    </div>
+                    <?php foreach ($content_types as $type => $name) {?>
+                        <?php $current_type = $type == ($page->content_type ?? array_keys($content_types ?? [])[0] ?? null); ?>
+                        <div class="mb-3 content <?= 'content_' . $type ?>"<?= $current_type ? '' : ' style="display:none"' ?>>
+                            <?php
+                                $attributes = $current_type ? ['class' => 'form-control'] : ['disabled' => '', 'class' => 'form-control'];
+                                switch($type) {
+                                    case 'wysiwyg':
+                                        $attributes['class'] = 'wysiwyg';
+                                        break;
+                                    case 'md':
+                                        $attributes['data-markdown-editor'] = '';
+                                        unset($attributes['disabled']);
+                                        break;
+                                }
 
-            <div class="button_row">
-                <?php $this->Form->fieldSubmit('save', $this->_('AdminMain.manage.submit', true), ['class' => 'btn btn-primary pull-right']); ?>
-            </div>
+                                $this->Form->label($this->_('AdminMain.manage.label.content', true), 'content-' . $type . '-' . $lang->code, ['class' => 'form-label']);
+                                $this->Form->fieldTextarea('pages[' . $lang->code . '][content]', ($page->content_type ?? array_keys($content_types ?? [])[0] ?? null) == $type ? ($page->content ?? null) : '', array_merge($attributes, ['id' => 'content-' . $type . '-' . $lang->code, 'rows' => 12]));
+                            ?>
+                        </div>
+                    <?php } ?>
+                </div>
+            <?php } ?>
         </div>
     </div>
+
+    <div class="card-footer d-flex justify-content-end gap-2">
+        <?php $this->Form->fieldSubmit('save', $this->_('AdminMain.manage.submit', true), ['class' => 'btn btn-primary']); ?>
+    </div>
 <?php
     $this->Form->end();
     $this->Widget->end();
 ?>
 
 <script type="text/javascript">
-    $(document).ready(function() {
-        $('div.tab_content').blestaTabbedContent();
-    
-        $('textarea.wysiwyg').blestaBindWysiwygEditor({language: '<?= substr(Configure::get('Blesta.language'), 0, 2) ?>'});
-    
-        $('.content_type').on('change', function() {
-            let container = $(this).parents('ul').first();
-
-            // Hide all contents
-            container.find('.content').hide();
-            container.find('textarea').prop('disabled', true);
-
-            // Display selected
-            container.find('.content_' + $(this).val()).show();
-            container.find('.content_' + $(this).val()).find('textarea').prop('disabled', false);
+document.addEventListener('DOMContentLoaded', function() {
+    // CKEditor initialization for wysiwyg textareas
+    function initCKEditorOnTextarea(textarea) {
+        if (!textarea || textarea.ckeditorInstance) {
+            return;
+        }
+
+        if (typeof ClassicEditor === 'undefined') {
+            setTimeout(function() { initCKEditorOnTextarea(textarea); }, 500);
+            return;
+        }
+
+        var config = {
+            toolbar: {
+                items: [
+                    'heading',
+                    'fontFamily',
+                    'fontSize',
+                    'highlight',
+                    '|',
+                    'fontColor',
+                    'fontBackgroundColor',
+                    'bold',
+                    'italic',
+                    'link',
+                    'removeFormat',
+                    '|',
+                    'bulletedList',
+                    'numberedList',
+                    'alignment',
+                    'indent',
+                    'outdent',
+                    '|',
+                    'imageUpload',
+                    'blockQuote',
+                    'insertTable',
+                    'mediaEmbed',
+                    'codeBlock',
+                    'htmlEmbed',
+                    'horizontalLine',
+                    '|',
+                    'sourceEditing',
+                    'undo',
+                    'redo'
+                ]
+            },
+            image: {
+                toolbar: [
+                    'imageTextAlternative',
+                    'imageStyle:inline',
+                    'imageStyle:block',
+                    'imageStyle:side'
+                ]
+            },
+            language: '<?php echo substr(Configure::get('Blesta.language'), 0, 2);?>'
+        };
+
+        ClassicEditor.create(textarea, config)
+            .then(function(editor) {
+                textarea.ckeditorInstance = editor;
+            })
+            .catch(function(error) {
+                console.error('CKEditor initialization error:', error);
+            });
+    }
+
+    // Initialize CKEditor on all visible wysiwyg textareas
+    function initAllWysiwygEditors() {
+        document.querySelectorAll('textarea.wysiwyg').forEach(function(textarea) {
+            if (!textarea.ckeditorInstance && textarea.offsetParent !== null) {
+                initCKEditorOnTextarea(textarea);
+            }
+        });
+    }
+
+    // Initialize on page load
+    initAllWysiwygEditors();
+
+    // Re-initialize when tab is shown
+    document.querySelectorAll('[data-bs-toggle="tab"]').forEach(function(tabEl) {
+        tabEl.addEventListener('shown.bs.tab', function(event) {
+            var targetId = event.target.getAttribute('data-bs-target');
+            if (targetId) {
+                var targetPane = document.querySelector(targetId);
+                if (targetPane) {
+                    var textareas = targetPane.querySelectorAll('textarea.wysiwyg');
+                    textareas.forEach(function(textarea) {
+                        if (!textarea.ckeditorInstance) {
+                            initCKEditorOnTextarea(textarea);
+                        }
+                    });
+                }
+            }
         });
+    });
+
+    // Content type switching
+    document.querySelectorAll('.content_type').forEach(function(radio) {
+        radio.addEventListener('change', function() {
+            var container = this.closest('.tab-pane');
+
+            container.querySelectorAll('.content').forEach(function(el) {
+                el.style.display = 'none';
+                var textarea = el.querySelector('textarea');
+                if (textarea) {
+                    textarea.setAttribute('disabled', '');
+                }
+            });
+
+            var selected = container.querySelector('.content_' + this.value);
+            if (selected) {
+                selected.style.display = 'block';
+                var textarea = selected.querySelector('textarea');
+                if (textarea) {
+                    textarea.removeAttribute('disabled');
+                    // Initialize WYSIWYG editor if switching to wysiwyg type
+                    if (textarea.classList.contains('wysiwyg') && !textarea.ckeditorInstance) {
+                        initCKEditorOnTextarea(textarea);
+                    }
+                }
+            }
+        });
+    });
 
-        $('.content:hidden').find('textarea').prop('disabled', true);
+    document.querySelectorAll('.content[style*="display: none"], .content[style*="display:none"]').forEach(function(el) {
+        var textarea = el.querySelector('textarea');
+        if (textarea) {
+            textarea.setAttribute('disabled', '');
+        }
     });
+});
 </script>