<?php
// ✅ Properly include and assign the returned content array
$content = include(APPPATH . 'Views/policy/school_policy_partial.php');

$sections = $content['sections'] ?? [];
$title = $content['title'] ?? 'School Policies';
?>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= esc($title) ?></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="<?= base_url('assets/css/policy_style.css') ?>">

</head>

<body>
    <header class="header">
        <div class="header-content">
            <div class="logo-container">
                <i class="fas fa-school logo"></i>
                <div class="school-name">Al Rahma Sunday School</div>
            </div>
            <div class="header-info">
                <i class="fas fa-calendar-alt"></i> Last updated: 09-01-2025
            </div>
        </div>
    </header>

    <!-- Mobile Navigation Modal - Moved outside main-container -->
    <nav class="policy-nav" id="policyNav">
        <button class="nav-close" id="navClose">×</button>
        <div class="nav-title"><i class="fas fa-list"></i> Sections</div>
       
        <ul>
            <?php 
            $sectionIndex = 0;
            foreach ($sections as $section): 
                if (!empty($section['heading'])): 
            ?>
                <li><a href="#section-<?= $sectionIndex ?>" class="<?= $sectionIndex === 0 ? 'active' : '' ?>">
                    <i class="fas fa-chevron-right"></i> <?= esc($section['heading']) ?>
                </a></li>
            <?php 
                endif;
                $sectionIndex++;
            endforeach; 
            ?>
        </ul>
    </nav>

    <div class="main-container">
        <div class="mobile-nav-toggle">
            <i class="fas fa-bars"></i> Policy Sections
        </div>

        <!-- Desktop Navigation - Hidden on mobile -->
        <nav class="policy-nav desktop-nav" id="desktopNav">
            <div class="nav-title"><i class="fas fa-list"></i> Sections</div>
           
            <ul>
                <?php 
                $sectionIndex = 0;
                foreach ($sections as $section): 
                    if (!empty($section['heading'])): 
                ?>
                    <li><a href="#section-<?= $sectionIndex ?>" class="<?= $sectionIndex === 0 ? 'active' : '' ?>">
                        <i class="fas fa-chevron-right"></i> <?= esc($section['heading']) ?>
                    </a></li>
                <?php 
                    endif;
                    $sectionIndex++;
                endforeach; 
                ?>
            </ul>
        </nav>

        <div class="policy-content">
            
            <div class="policy-header">
                <h1><?= esc($title) ?></h1>
                <p class="last-updated">Effective from: 09-01-2025</p>
            </div>

            <?php 
            $sectionIndex = 0;
            foreach ($sections as $section): 
            ?>
                <section id="section-<?= $sectionIndex ?>" class="section">
                    <?php if (!empty($section['heading'])): ?>
                        <h2><i class="fas fa-info-circle"></i> <?= esc($section['heading']) ?></h2>
                    <?php endif; ?>

                    <?php 
                    if (isset($section['subsections'][0])): 
                        // Multiple subsections
                        foreach ($section['subsections'] as $sub): 
                    ?>
                            <?php if (!empty($sub['title'])): ?>
                                <h3><i class="fas fa-angle-right"></i> <?= esc($sub['title']) ?></h3>
                            <?php endif; ?>
                            
                            <div class="policy-body"><?= $sub['body'] ?></div>
                    <?php 
                        endforeach; 
                    elseif (isset($section['subsections']['body'])): 
                        // Single subsection with just body
                    ?>
                        <div class="policy-body"><?= $section['subsections']['body'] ?></div>
                    <?php endif; ?>
                </section>
            <?php 
                $sectionIndex++;
            endforeach; 
            ?>

            <div class="actions-container">
                <button onclick="window.print()" class="action-btn print">
                    <i class="fas fa-print"></i> Print
                </button>
                
            </div>
        </div>
    </div>

    <footer class="footer">
        <p>© 2026 Al Rahma Sunday School by ISGL. All Rights Reserved.</p>
        <p>ISGL, Chelmsford MA • +1 978-364-0219 • alrahma.isgl@gmail.com</p>
    </footer>

<script>
    // Mobile navigation toggle
    document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
        const nav = document.getElementById('policyNav');
        const body = document.body;
        nav.classList.toggle('active');
        
        const icon = this.querySelector('i');
        if (nav.classList.contains('active')) {
            icon.className = 'fas fa-times';
            body.classList.add('modal-open'); // Prevent body scroll
        } else {
            icon.className = 'fas fa-bars';
            body.classList.remove('modal-open'); // Restore body scroll
        }
    });

    // Close button functionality
    document.getElementById('navClose').addEventListener('click', function() {
        const nav = document.getElementById('policyNav');
        const body = document.body;
        nav.classList.remove('active');
        body.classList.remove('modal-open');
        document.querySelector('.mobile-nav-toggle i').className = 'fas fa-bars';
    });

    // Close mobile nav when a link is clicked
    document.querySelectorAll('#policyNav a').forEach(link => {
        link.addEventListener('click', function() {
            if (window.innerWidth < 992) {
                const nav = document.getElementById('policyNav');
                const body = document.body;
                nav.classList.remove('active');
                body.classList.remove('modal-open');
                document.querySelector('.mobile-nav-toggle i').className = 'fas fa-bars';
            }
        });
    });

    // Close modal when clicking outside the navigation content
    document.addEventListener('click', function(e) {
        const nav = document.getElementById('policyNav');
        const toggle = document.querySelector('.mobile-nav-toggle');
        
        if (nav.classList.contains('active') && 
            !nav.contains(e.target) && 
            !toggle.contains(e.target) && 
            window.innerWidth < 992) {
            nav.classList.remove('active');
            document.body.classList.remove('modal-open');
            document.querySelector('.mobile-nav-toggle i').className = 'fas fa-bars';
        }
    });

    // Simple script to highlight current section in navigation
    document.addEventListener('DOMContentLoaded', function() {
        const sections = document.querySelectorAll('.section');
        const mobileNavLinks = document.querySelectorAll('#policyNav a');
        const desktopNavLinks = document.querySelectorAll('#desktopNav a');
        
        function highlightNav() {
            let currentSection = '';
            const scrollY = window.pageYOffset + 100;
            
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                const sectionHeight = section.clientHeight;
                const sectionId = section.getAttribute('id');
                
                if (scrollY >= sectionTop && scrollY < sectionTop + sectionHeight) {
                    currentSection = sectionId;
                }
            });
            
            // Update both mobile and desktop nav links
            [...mobileNavLinks, ...desktopNavLinks].forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href').substring(1) === currentSection) {
                    link.classList.add('active');
                }
            });
        }
        
        window.addEventListener('scroll', highlightNav);
        
        // Add smooth scrolling for navigation links (both mobile and desktop)
        [...mobileNavLinks, ...desktopNavLinks].forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                window.scrollTo({
                    top: targetElement.offsetTop - 20,
                    behavior: 'smooth'
                });
            });
        });
    });
</script>
</body>
</html>
