<!-- <div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h2 class="mb-4">Sitemap</h2>
                    <div class="table-responsive">
                        <table class="table text-nowrap">
                            <thead class="text-dark fs-4">
                                <tr>
                                    <th>#</th>
                                    <th>Page Name</th>
                                    <th>URL</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php $i = 1; foreach ($sitemap_links as $link) { ?>
                                    <tr>
                                        <td><?= $i++; ?></td>
                                        <td><?= $link['name']; ?></td>
                                        <td><a href="<?= $link['url']; ?>" target="_blank"><?= $link['url']; ?></a></td>
                                        <td>
                                            <a href="<?= $link['url']; ?>" class="btn btn-primary btn-sm" target="_blank">
                                                Visit
                                            </a>
                                        </td>
                                    </tr>
                                <?php } ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> -->



<!-- ---------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------- -->


<!-- <div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h2 class="mb-4">Sitemap - Tree View</h2>
                    <ul class="tree">
                        <?php //function renderTree($items) { ?>
                            <?php //foreach ($items as $item) { ?>
                                <li>
                                    <?php //if (!empty($item['url'])) { ?>
                                        <a href="<?= $item['url']; ?>" target="_blank"><?= $item['name']; ?></a>
                                    <?php //} else { ?>
                                        <span><?= $item['name']; ?></span>
                                    <?php //} ?>

                                    <?php //if (!empty($item['children'])) { ?>
                                        <ul>
                                            <?= renderTree($item['children']); ?>
                                        </ul>
                                    <?php //} ?>
                                </li>
                            <?php //} ?>
                        <?php //} renderTree($sitemap_links); ?>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.tree {
    list-style-type: none;
    padding-left: 20px;
}

.tree li {
    margin: 5px 0;
    position: relative;
    padding-left: 20px;
}

.tree li:before {
    content: "▸";
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 14px;
    color: #666;
}

.tree li a {
    text-decoration: none;
    color: #007bff;
    font-weight: 500;
}

.tree li a:hover {
    text-decoration: underline;
}

.tree li span {
    font-weight: bold;
}
</style> -->

<!-- ---------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------- -->


<?php
// Debugging: Print the sitemap array to see if data is passed
// Uncomment this to debug if the tree is not showing
// echo "<pre>"; print_r($sitemap_links); echo "</pre>";

function renderTree($items) {
    if (empty($items)) return;

    echo '<ul class="nested">';
    foreach ($items as $item) {
        echo '<li>';

        // Expandable folder if children exist
        if (!empty($item['children'])) {
            echo '<span class="tree-toggle"><i class="fas fa-folder"></i></span>';
        } else {
            echo '<i class="fas fa-file-alt"></i>';
        }

        // Page Link or Category
        if (!empty($item['url'])) {
            echo ' <a href="' . htmlspecialchars($item['url']) . '" target="_blank">' . htmlspecialchars($item['name']) . '</a>';
        } else {
            echo ' <span>' . htmlspecialchars($item['name']) . '</span>';
        }

        // Render children recursively
        if (!empty($item['children'])) {
            renderTree($item['children']);
        }

        echo '</li>';
    }
    echo '</ul>';
}
?>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h2 class="mb-4 text-center">📌 Sitemap - Tree View</h2>
                    <ul class="tree">
                        <?php renderTree($sitemap_links); ?>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* General Tree View Styling */
.tree {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
}

.tree li {
    margin: 8px 0;
    position: relative;
    padding-left: 20px;
}

/* Line before the bullet point */
.tree li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 18px;
    color: #007bff;
}

.tree li a {
    text-decoration: none;
    color: #007bff;
    font-weight: 500;
    transition: 0.3s;
}

.tree li a:hover {
    text-decoration: underline;
    color: #0056b3;
}

/* Expand/Collapse Icons */
.tree-toggle {
    cursor: pointer;
    margin-right: 5px;
    font-size: 16px;
}

.tree-toggle .fas {
    color: #666;
}

.tree-toggle:hover .fas {
    color: #333;
}

/* Hide submenus initially */
.nested {
    display: none;
    list-style: none;
    padding-left: 15px;
}

.active {
    display: block;
}
</style>

<script>
// document.addEventListener('DOMContentLoaded', function () {
    let toggles = document.querySelectorAll('.tree-toggle');

    toggles.forEach(toggle => {
        toggle.addEventListener('click', function () {
            let nestedList = this.parentElement.querySelector('.nested');
            if (nestedList) {
                nestedList.classList.toggle('active');
                let icon = this.querySelector('i');
                icon.classList.toggle('fa-folder');
                icon.classList.toggle('fa-folder-open');
            }
        });
    });
// });
</script>
