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

<head>
    <?php include("include/meta.php");?>
    <?php include("include/css.php");?>
</head>
<style>
/* styles for the injected icon wrapper */
.injected-caret-wrapper {
    display: inline-block;
    margin-right: 8px;
    line-height: 1;
    vertical-align: middle;
}

/* if Font Awesome is loaded the <i> will show; fallback is hidden by default */
.injected-caret-wrapper .caret-fallback {
    display: none;
}

/* style when fallback used (we switch display via JS) */
.ck-styled-content li .caret-fallback {
    color: #007bff;
    font-weight: 600;
}

/* ensure list looks good when icons injected */
.ck-styled-content ul,
.ck-styled-content ol {
    list-style: none;
    padding-left: 0;
    margin-left: 1rem;
}

.ck-styled-content li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ck-styled-content li p {
    margin-bottom: 0;
}

.ck-styled-content div {
    padding: 10px;
    border-radius: 7px;
}

.ck-styled-content div ins {
    color: #eb9602;
}
</style>

<body>

    <!-- preloader -->
    <?php include("include/preloader.php");?>
    <!-- preloader end -->


    <!-- header area -->
    <?php include("include/header.php");?>
    <!-- header area end -->

    <main class="main">

        <!-- breadcrumb -->
        <?php
            $banner_sql = "SELECT * FROM data_table WHERE up_by = $x && page_type = 'slider' && recycle = '1' ORDER BY id DESC";
            $banner_run = mysqli_query($con, $banner_sql);
            if ($banner_row = mysqli_fetch_assoc($banner_run)) {
            ?>
        <div class="site-breadcrumb" style="background: url(./login/upload/<?php echo $banner_row['image_one']?>)">
            <div class="container">
                <h2 class="breadcrumb-title">Code of Conduct & School Policies</h2>
                <ul class="breadcrumb-menu">
                    <li><a href="index.php">Home</a></li>
                    <li class="active">Code of Conduct & School Policies</li>
                </ul>
            </div>
        </div>
        <?php }?>
        <!-- breadcrumb end -->

        <!-- hostel-area -->
        <?php
            $md_sql = "SELECT * FROM data_table WHERE up_by = $x && page_type = 'cocsp' && recycle = '1' ORDER BY id DESC";
            $md_run = mysqli_query($con, $md_sql);
            if($md_row = mysqli_fetch_assoc($md_run)){
        ?>
        <div class="team-single pt-120 pb-80">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 mx-auto">
                        <div class="site-heading text-center">
                            <span class="site-title-tagline"><i class="far fa-book-open-reader"></i>
                                Macaw Public School</span>
                            <h2 class="site-title"><?= $md_row['title']?></h2>
                        </div>
                    </div>
                </div>
                <div class="row align-items-center justify-content-center">
                    <?php if(!empty($md_row['image_one'])){?>
                    <div class="col-md-4">
                        <div class="team-single-img">
                            <img src="./login/upload/<?= $md_row['image_one']?>" alt="">
                        </div>
                    </div>
                    <?php }?>
                    <div class="col-md-<?php if(!empty($md_row['image_one'])){?>8<?php } else { echo '12';}?>">
                        <p class="mt-3">
                            <?= $md_row['short_des']?>
                        </p>
                    </div>
                    <div class="col-md-12 mt-3">
                        <div class="ck-styled-content" align="justify">
                            <?= $md_row["long_des"]; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <?php } ?>
        <!-- hostel-area end -->

    </main>



    <!-- footer area -->
    <?php include("include/footer.php");?>
    <!-- footer area end -->


    <!-- js -->
    <?php include("include/js.php");?>

    <script>
    (function() {
        // debounce helper
        function debounce(fn, wait) {
            let t;
            return function() {
                clearTimeout(t);
                t = setTimeout(() => fn.apply(this, arguments), wait);
            };
        }

        // Create the icon container element. We'll first try the <i> tag,
        // then if it appears invisible (FA not loaded) we'll replace with fallback.
        function makeIconElement() {
            const wrapper = document.createElement('span');
            wrapper.className = 'injected-caret-wrapper';
            // put the real <i> tag (FontAwesome) first
            wrapper.innerHTML = '<i class="fas fa-caret-right" aria-hidden="true"></i>';
            // keep a fallback char (hidden by default)
            const fallback = document.createElement('span');
            fallback.className = 'caret-fallback';
            fallback.textContent = '►'; // fallback symbol
            fallback.style.display = 'none';
            wrapper.appendChild(fallback);
            // some spacing
            wrapper.style.display = 'inline-block';
            wrapper.style.marginRight = '8px';
            wrapper.style.lineHeight = '1';
            wrapper.style.verticalAlign = 'middle';
            return wrapper;
        }

        // After inserting an icon, check whether the <i> rendered (width > small threshold).
        // If not, switch to fallback.
        function ensureIconRendered(wrapper) {
            // small async check so fonts can load if they are about to
            setTimeout(() => {
                const i = wrapper.querySelector('i');
                const fallback = wrapper.querySelector('.caret-fallback');
                if (i) {
                    const w = i.offsetWidth;
                    // if very narrow (0 or tiny) assume FA didn't render - show fallback
                    if (!w || w < 6) {
                        i.style.display = 'none';
                        fallback.style.display = 'inline';
                    } else {
                        // FA rendered correctly — keep i and hide fallback
                        i.style.display = '';
                        fallback.style.display = 'none';
                    }
                } else {
                    // no <i> found, show fallback
                    fallback.style.display = 'inline';
                }
            }, 80); // small delay
        }

        // Add icons to all li inside context (.ck-styled-content). Skip li already processed.
        function addCaretIcons(context) {
            context = context || document;
            const nodes = context.querySelectorAll ?
                context.querySelectorAll('.ck-styled-content li') : [];
            nodes.forEach(li => {
                // Skip if already processed
                if (li.dataset.caretInjected === '1') return;

                // Do not add icon to li's that are only a nested list container with no text
                // (e.g., <li><ul>...). We'll check for text content or element siblings.
                const hasSignificantContent = Array.from(li.childNodes).some(node => {
                    if (node.nodeType === Node.TEXT_NODE) {
                        return node.textContent.trim().length > 0;
                    }
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        // If the first element is another list, treat as nested and still add icon
                        // (you can change this rule if you want to avoid nested icons)
                        return node.tagName.toLowerCase() !== 'ul' && node.tagName.toLowerCase() !==
                            'ol' ? true : true;
                    }
                    return false;
                });

                if (!hasSignificantContent) {
                    // Mark to avoid repeated checks
                    li.dataset.caretInjected = '1';
                    return;
                }

                // Prepend the icon wrapper
                const wrapper = makeIconElement();
                // Insert before first child so it appears inline at start
                li.insertBefore(wrapper, li.firstChild);

                // mark processed
                li.dataset.caretInjected = '1';

                // ensure it rendered, otherwise show fallback
                ensureIconRendered(wrapper);
            });
        }

        // Debounced handler for mutation observer results
        const onMutations = debounce((mutations) => {
            // For performance, build a set of nodes to check
            const contexts = new Set();
            mutations.forEach(m => {
                if (m.type === 'childList') {
                    m.addedNodes.forEach(n => {
                        if (!(n instanceof Element)) return;
                        if (n.matches && n.matches('.ck-styled-content')) contexts.add(n);
                        // also check any parent .ck-styled-content that contains this node
                        const parent = n.closest && n.closest('.ck-styled-content');
                        if (parent) contexts.add(parent);
                    });
                } else if (m.type === 'subtree') {
                    // fallback: check whole document
                    contexts.add(document);
                }
            });

            // If there are no specific contexts, always try the document (safe)
            if (contexts.size === 0) contexts.add(document);

            contexts.forEach(ctx => addCaretIcons(ctx));
        }, 120);

        // initial run (in case content is already present)
        document.addEventListener('DOMContentLoaded', () => {
            addCaretIcons(document);
        });

        // Also run shortly after load (helps if ckeditor injects after DOMContentLoaded)
        setTimeout(() => addCaretIcons(document), 300);

        // Observe dynamic changes on body (subtree) — will catch AJAX/ckeditor updates
        const observer = new MutationObserver(onMutations);
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });

        // Expose a manual function in case you want to trigger manually from your code:
        window.__ck_add_caret_icons = function() {
            addCaretIcons(document);
        };

    })();
    </script>

</body>

</html>