<?php
/**
 * 古籍章节专业阅读模式模板
 */

// 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}

get_header();

if (have_posts()) :
    while (have_posts()) : the_post();
        $ancient_text_id = get_post_meta(get_the_ID(), '_chapter_ancient_text', true);
        $volume = get_post_meta(get_the_ID(), '_chapter_volume', true);
        $chapter_number = get_post_meta(get_the_ID(), '_chapter_number', true);
        $ancient_text = get_post($ancient_text_id);
        
        // 获取上一章和下一章链接
        $prev_chapter_link = '';
        $next_chapter_link = '';
        $prev_chapter_title = '';
        $next_chapter_title = '';
        
        // 获取同一古籍下的所有章节
        if ($ancient_text_id) {
            $all_chapters = get_posts(array(
                'post_type' => 'ancient_text_chapter',
                'post_status' => (current_user_can('edit_posts') ? array('publish', 'draft', 'private') : 'publish'),
                'meta_query' => array(
                    array(
                        'key' => '_chapter_ancient_text',
                        'value' => $ancient_text_id,
                        'compare' => '='
                    )
                ),
                'orderby' => 'menu_order',
                'order' => 'ASC',
                'posts_per_page' => -1
            ));
            
            $current_index = array_search(get_the_ID(), wp_list_pluck($all_chapters, 'ID'));
            
            if ($current_index !== false) {
                $prev_chapter = isset($all_chapters[$current_index - 1]) ? $all_chapters[$current_index - 1] : null;
                $next_chapter = isset($all_chapters[$current_index + 1]) ? $all_chapters[$current_index + 1] : null;
                
                if ($prev_chapter) {
                    $prev_chapter_link = get_permalink($prev_chapter->ID) . '?mode=reading';
                    $prev_chapter_title = $prev_chapter->post_title;
                }
                
                if ($next_chapter) {
                    $next_chapter_link = get_permalink($next_chapter->ID) . '?mode=reading';
                    $next_chapter_title = $next_chapter->post_title;
                }
            }
        }
        ?>
        
        <div class="wrap ancient-text-chapter-reading-mode">
            <div class="reading-mode-header">
                <div class="header-content">
                    <?php if ($ancient_text && $ancient_text->post_status === 'publish'): ?>
                        <div class="breadcrumb">
                            <a href="<?php echo get_post_type_archive_link('chinese_ancient_text'); ?>">古籍</a> > 
                            <a href="<?php echo get_permalink($ancient_text_id); ?>"><?php echo esc_html($ancient_text->post_title); ?></a> > 
                            <span><?php the_title(); ?></span>
                        </div>
                    <?php endif; ?>
                    
                    <h1><?php the_title(); ?></h1>
                    
                    <div class="reading-controls">
                        <a href="<?php the_permalink(); ?>" class="btn btn-secondary">退出阅读模式</a>
                        <button id="toggle-font-size" class="btn btn-secondary">字体大小</button>
                        <button id="toggle-line-height" class="btn btn-secondary">行间距</button>
                        <?php if (current_user_can('edit_posts')): ?>
                            <button id="add-annotation-btn" class="btn btn-secondary">添加批注</button>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            
            <div class="reading-content-wrapper">
                <div class="reading-sidebar">
                    <?php
                    // 获取同一古籍下的所有章节
                    if ($ancient_text_id) {
                        $all_chapters = get_posts(array(
                            'post_type' => 'ancient_text_chapter',
                            'post_status' => (current_user_can('edit_posts') ? array('publish', 'draft', 'private') : 'publish'),
                            'meta_query' => array(
                                array(
                                    'key' => '_chapter_ancient_text',
                                    'value' => $ancient_text_id,
                                    'compare' => '='
                                )
                            ),
                            'orderby' => 'menu_order',
                            'order' => 'ASC',
                            'posts_per_page' => -1
                        ));
                        
                        if (!empty($all_chapters)):
                            ?>
                            <div class="chapter-toc">
                                <h3>章节目录</h3>
                                <ul>
                                    <?php foreach ($all_chapters as $chapter): ?>
                                        <li class="<?php echo ($chapter->ID == get_the_ID()) ? 'active' : ''; ?>">
                                            <a href="<?php echo get_permalink($chapter->ID); ?>?mode=reading">
                                                <?php echo esc_html($chapter->post_title); ?>
                                                <?php 
                                                // 显示章节状态（仅对有权限的用户显示草稿和私有状态）
                                                if (current_user_can('edit_posts') && $chapter->post_status !== 'publish') {
                                                    $status_label = '';
                                                    switch ($chapter->post_status) {
                                                        case 'draft':
                                                            $status_label = '草稿';
                                                            break;
                                                        case 'private':
                                                            $status_label = '私有';
                                                            break;
                                                        default:
                                                            $status_label = $chapter->post_status;
                                                    }
                                                    echo ' <small>(' . $status_label . ')</small>';
                                                }
                                                ?>
                                            </a>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                        <?php endif;
                    }
                    
                    // 获取当前章节的批注
                    $annotations = get_comments(array(
                        'post_id' => get_the_ID(),
                        'meta_key' => 'is_annotation',
                        'meta_value' => '1',
                        'orderby' => 'comment_date',
                        'order' => 'ASC'
                    ));
                    
                    if (!empty($annotations) || current_user_can('edit_posts')):
                    ?>
                        <div class="annotations-panel">
                            <h3>批注</h3>
                            <div class="annotations-list">
                                <?php if (!empty($annotations)): ?>
                                    <?php foreach ($annotations as $annotation): ?>
                                        <div class="annotation-item" data-annotation-id="<?php echo esc_attr($annotation->comment_ID); ?>">
                                            <div class="annotation-content">
                                                <?php echo wp_kses_post($annotation->comment_content); ?>
                                            </div>
                                            <div class="annotation-meta">
                                                <span class="annotation-author"><?php echo esc_html($annotation->comment_author); ?></span>
                                                <span class="annotation-date"><?php echo esc_html(get_comment_date('Y-m-d H:i', $annotation->comment_ID)); ?></span>
                                                <?php if (current_user_can('edit_comment', $annotation->comment_ID)): ?>
                                                    <a href="#" class="edit-annotation" data-annotation-id="<?php echo esc_attr($annotation->comment_ID); ?>">编辑</a>
                                                    <a href="#" class="delete-annotation" data-annotation-id="<?php echo esc_attr($annotation->comment_ID); ?>">删除</a>
                                                <?php endif; ?>
                                                <!-- 添加批注锚点链接 -->
                                                <a href="#annotation-<?php echo esc_attr($annotation->comment_ID); ?>" class="annotation-link">引用链接</a>
                                                <!-- 添加复制链接功能 -->
                                                <a href="#" class="copy-annotation-link" data-annotation-id="<?php echo esc_attr($annotation->comment_ID); ?>">复制链接</a>
                                            </div>
                                        </div>
                                    <?php endforeach; ?>
                                <?php else: ?>
                                    <p class="no-annotations">暂无批注</p>
                                <?php endif; ?>
                            </div>
                            
                            <?php if (current_user_can('edit_posts')): ?>
                                <div class="add-annotation-form" id="add-annotation-form" style="display: none;">
                                    <h4>添加批注</h4>
                                    <form id="annotation-form">
                                        <textarea name="annotation_content" id="annotation_content" placeholder="请输入批注内容"></textarea>
                                        <input type="hidden" id="annotation_selection" name="annotation_selection">
                                        <div class="form-actions">
                                            <button type="submit" class="btn btn-primary">保存批注</button>
                                            <button type="button" class="btn btn-secondary" id="cancel-annotation">取消</button>
                                        </div>
                                    </form>
                                </div>
                            <?php endif; ?>
                        </div>
                    <?php endif; ?>
                </div>
                
                <div class="reading-main-content">
                    <div class="chapter-content" id="chapter-content">
                        <?php
                        // 获取文章内容并添加锚点
                        $content = get_the_content();
                        $content = apply_filters('the_content', $content);
                        $content = str_replace(']]>', ']]&gt;', $content);
                        
                        // 为内容中的标题添加锚点
                        $content = preg_replace_callback('/<h([1-6])([^>]*)>(.*?)<\/h\1>/i', function($matches) {
                            static $heading_count = 0;
                            $heading_count++;
                            $anchor = 'heading-' . $heading_count;
                            return '<h' . $matches[1] . $matches[2] . ' id="' . $anchor . '">' . $matches[3] . '</h' . $matches[1] . '>';
                        }, $content);
                        
                        // 添加批注锚点到内容末尾
                        if (!empty($annotations)) {
                            $content .= '<div class="annotations-anchors">';
                            foreach ($annotations as $annotation) {
                                $content .= '<div id="annotation-' . esc_attr($annotation->comment_ID) . '" class="annotation-anchor"></div>';
                            }
                            $content .= '</div>';
                        }
                        
                        echo $content;
                        ?>
                    </div>
                    
                    <!-- 章节导航 -->
                    <div class="chapter-navigation">
                        <div class="nav-links">
                            <?php if ($prev_chapter_link): ?>
                                <div class="nav-previous">
                                    <a href="<?php echo esc_url($prev_chapter_link); ?>" class="btn btn-primary">
                                        &larr; <?php echo esc_html($prev_chapter_title); ?>
                                    </a>
                                </div>
                            <?php endif; ?>
                            
                            <?php if ($next_chapter_link): ?>
                                <div class="nav-next">
                                    <a href="<?php echo esc_url($next_chapter_link); ?>" class="btn btn-primary">
                                        <?php echo esc_html($next_chapter_title); ?> &rarr;
                                    </a>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <style>
        body {
            background-color: #f8f8f8;
        }
        
        .ancient-text-chapter-reading-mode {
            max-width: 100%;
            padding: 0;
            margin: 0;
        }
        
        .reading-mode-header {
            background: #fff;
            border-bottom: 1px solid #ddd;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .header-content h1 {
            margin: 0;
            font-size: 1.5em;
            flex-grow: 1;
            text-align: center;
        }
        
        .breadcrumb {
            width: 100%;
            font-size: 14px;
            margin-bottom: 10px;
        }
        
        .breadcrumb a {
            color: #0073aa;
            text-decoration: none;
        }
        
        .breadcrumb a:hover {
            text-decoration: underline;
        }
        
        .reading-controls {
            display: flex;
            gap: 10px;
        }
        
        .btn {
            padding: 8px 15px;
            border: 1px solid #ddd;
            background: #fff;
            cursor: pointer;
            border-radius: 3px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }
        
        .btn:hover {
            background: #f5f5f5;
        }
        
        .btn-primary {
            background: #0073aa;
            color: white;
            border-color: #005a87;
        }
        
        .btn-primary:hover {
            background: #005a87;
        }
        
        .reading-content-wrapper {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            gap: 30px;
        }
        
        .reading-sidebar {
            width: 250px;
            background: #fff;
            border-radius: 5px;
            border: 1px solid #ddd;
            padding: 20px;
            height: fit-content;
            max-height: calc(100vh - 150px);
            overflow-y: auto;
            position: sticky;
            top: 100px;
        }
        
        .chapter-toc h3 {
            margin-top: 0;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        
        .chapter-toc ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .chapter-toc li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
        
        .chapter-toc li:last-child {
            border-bottom: none;
        }
        
        .chapter-toc li.active > a {
            font-weight: bold;
            color: #0073aa;
        }
        
        .chapter-toc a {
            text-decoration: none;
            color: #333;
            display: block;
        }
        
        .chapter-toc a:hover {
            color: #0073aa;
        }
        
        .chapter-toc small {
            color: #999;
            font-size: 0.85em;
        }
        
        .annotations-panel {
            margin-top: 30px;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }
        
        .annotations-panel h3 {
            margin-top: 0;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        
        .annotation-item {
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 3px;
            margin-bottom: 10px;
            background: #f9f9f9;
        }
        
        .annotation-content {
            margin-bottom: 5px;
        }
        
        .annotation-meta {
            font-size: 0.85em;
            color: #666;
        }
        
        .annotation-meta a {
            margin-left: 10px;
            color: #0073aa;
            text-decoration: none;
        }
        
        .annotation-meta a:hover {
            text-decoration: underline;
        }
        
        .add-annotation-form {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 3px;
            background: #f5f5f5;
        }
        
        .add-annotation-form h4 {
            margin-top: 0;
        }
        
        #annotation_content {
            width: 100%;
            min-height: 100px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 3px;
            resize: vertical;
        }
        
        .form-actions {
            margin-top: 10px;
            display: flex;
            gap: 10px;
        }
        
        .reading-main-content {
            flex: 1;
            background: #fff;
            border-radius: 5px;
            border: 1px solid #ddd;
            padding: 40px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .chapter-content {
            font-size: 18px;
            line-height: 1.8;
            transition: all 0.3s ease;
        }
        
        .chapter-content.font-size-large {
            font-size: 20px;
        }
        
        .chapter-content.font-size-small {
            font-size: 16px;
        }
        
        .chapter-content.line-height-large {
            line-height: 2.2;
        }
        
        .chapter-content.line-height-small {
            line-height: 1.5;
        }
        
        .chapter-content p {
            margin-bottom: 25px;
            text-align: justify;
            text-indent: 2em;
        }
        
        .chapter-content h1,
        .chapter-content h2,
        .chapter-content h3,
        .chapter-content h4,
        .chapter-content h5,
        .chapter-content h6 {
            text-align: center;
            margin: 30px 0;
            font-weight: bold;
        }
        
        .chapter-content h1 {
            font-size: 2em;
        }
        
        .chapter-content h2 {
            font-size: 1.5em;
        }
        
        .chapter-content .annotation-highlight {
            background-color: #fffacd;
            cursor: pointer;
        }
        
        .chapter-navigation {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }
        
        .nav-links {
            display: flex;
            justify-content: space-between;
        }
        
        .nav-links a {
            text-decoration: none;
            padding: 10px 15px;
        }
        
        .nav-links .nav-previous {
            text-align: left;
        }
        
        .nav-links .nav-next {
            text-align: right;
        }
        
        /* 选中文本高亮样式 */
        .selected-text {
            background-color: #ffeb3b;
            padding: 2px 4px;
        }
        
        @media (max-width: 992px) {
            .reading-content-wrapper {
                flex-direction: column;
            }
            
            .reading-sidebar {
                width: 100%;
                position: static;
                max-height: 300px;
            }
        }
        
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 15px;
            }
            
            .reading-controls {
                width: 100%;
                justify-content: center;
            }
            
            .reading-main-content {
                padding: 20px;
            }
            
            .chapter-content {
                font-size: 16px;
            }
            
            .nav-links {
                flex-direction: column;
                gap: 15px;
            }
            
            .nav-links .nav-previous,
            .nav-links .nav-next {
                text-align: center;
            }
        }
        </style>
        
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            const content = document.getElementById('chapter-content');
            const toggleFontSizeBtn = document.getElementById('toggle-font-size');
            const toggleLineHeightBtn = document.getElementById('toggle-line-height');
            const addAnnotationBtn = document.getElementById('add-annotation-btn');
            const addAnnotationForm = document.getElementById('add-annotation-form');
            const cancelAnnotationBtn = document.getElementById('cancel-annotation');
            const annotationForm = document.getElementById('annotation-form');
            
            let fontSizeState = 0; // 0: normal, 1: large, 2: small
            let lineHeightState = 0; // 0: normal, 1: large, 2: small
            
            toggleFontSizeBtn.addEventListener('click', function() {
                fontSizeState = (fontSizeState + 1) % 3;
                
                content.classList.remove('font-size-large', 'font-size-small');
                
                switch(fontSizeState) {
                    case 1: // Large
                        content.classList.add('font-size-large');
                        toggleFontSizeBtn.textContent = '字体大小（大）';
                        break;
                    case 2: // Small
                        content.classList.add('font-size-small');
                        toggleFontSizeBtn.textContent = '字体大小（小）';
                        break;
                    default: // Normal
                        toggleFontSizeBtn.textContent = '字体大小';
                        break;
                }
            });
            
            toggleLineHeightBtn.addEventListener('click', function() {
                lineHeightState = (lineHeightState + 1) % 3;
                
                content.classList.remove('line-height-large', 'line-height-small');
                
                switch(lineHeightState) {
                    case 1: // Large
                        content.classList.add('line-height-large');
                        toggleLineHeightBtn.textContent = '行间距（大）';
                        break;
                    case 2: // Small
                        content.classList.add('line-height-small');
                        toggleLineHeightBtn.textContent = '行间距（小）';
                        break;
                    default: // Normal
                        toggleLineHeightBtn.textContent = '行间距';
                        break;
                }
            });
            
            // 批注功能
            if (addAnnotationBtn) {
                addAnnotationBtn.addEventListener('click', function() {
                    addAnnotationForm.style.display = 'block';
                });
                
                cancelAnnotationBtn.addEventListener('click', function() {
                    addAnnotationForm.style.display = 'none';
                    document.getElementById('annotation_content').value = '';
                    document.getElementById('annotation_selection').value = '';
                });
                
                annotationForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    const content = document.getElementById('annotation_content').value.trim();
                    const selection = document.getElementById('annotation_selection').value;
                    
                    if (!content) {
                        alert('请输入批注内容');
                        return;
                    }
                    
                    // 发送AJAX请求保存批注
                    const formData = new FormData();
                    formData.append('action', 'add_chapter_annotation');
                    formData.append('chapter_id', <?php echo get_the_ID(); ?>);
                    formData.append('content', content);
                    formData.append('selection', selection);
                    formData.append('nonce', '<?php echo wp_create_nonce('add_annotation_nonce'); ?>');
                    
                    fetch(ajaxurl, {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // 重新加载页面以显示新批注
                            location.reload();
                        } else {
                            alert('保存批注失败: ' + data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('保存批注时发生错误');
                    });
                });
            }
            
            // 编辑批注功能
            document.querySelectorAll('.edit-annotation').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const annotationId = this.getAttribute('data-annotation-id');
                    const annotationContent = this.closest('.annotation-item').querySelector('.annotation-content').textContent;
                    
                    const newContent = prompt('编辑批注:', annotationContent);
                    if (newContent !== null && newContent.trim() !== '') {
                        // 发送AJAX请求更新批注
                        const formData = new FormData();
                        formData.append('action', 'edit_chapter_annotation');
                        formData.append('annotation_id', annotationId);
                        formData.append('content', newContent);
                        formData.append('nonce', '<?php echo wp_create_nonce('edit_annotation_nonce'); ?>');
                        
                        fetch(ajaxurl, {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                location.reload();
                            } else {
                                alert('更新批注失败: ' + data.message);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('更新批注时发生错误');
                        });
                    }
                });
            });
            
            // 删除批注功能
            document.querySelectorAll('.delete-annotation').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const annotationId = this.getAttribute('data-annotation-id');
                    
                    if (confirm('确定要删除这条批注吗？')) {
                        // 发送AJAX请求删除批注
                        const formData = new FormData();
                        formData.append('action', 'delete_chapter_annotation');
                        formData.append('annotation_id', annotationId);
                        formData.append('nonce', '<?php echo wp_create_nonce('delete_annotation_nonce'); ?>');
                        
                        fetch(ajaxurl, {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                location.reload();
                            } else {
                                alert('删除批注失败: ' + data.message);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('删除批注时发生错误');
                        });
                    }
                });
            });
            
            // 处理锚点跳转
            if (window.location.hash) {
                const targetElement = document.querySelector(window.location.hash);
                if (targetElement) {
                    targetElement.scrollIntoView({ behavior: 'smooth' });
                    targetElement.style.backgroundColor = '#fffacd';
                    setTimeout(() => {
                        targetElement.style.backgroundColor = '';
                    }, 2000);
                }
            }
            
            // 复制批注链接功能
            document.querySelectorAll('.copy-annotation-link').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const annotationId = this.getAttribute('data-annotation-id');
                    const link = window.location.origin + window.location.pathname + '?mode=reading#annotation-' + annotationId;
                    
                    // 使用Clipboard API复制链接
                    if (navigator.clipboard) {
                        navigator.clipboard.writeText(link).then(() => {
                            // 显示成功提示
                            const originalText = this.textContent;
                            this.textContent = '已复制';
                            setTimeout(() => {
                                this.textContent = originalText;
                            }, 2000);
                        }).catch(err => {
                            console.error('复制失败:', err);
                            // 降级到传统方法
                            fallbackCopyTextToClipboard(link);
                        });
                    } else {
                        // 降级到传统方法
                        fallbackCopyTextToClipboard(link);
                    }
                });
            });
            
            // 传统复制方法（兼容旧浏览器）
            function fallbackCopyTextToClipboard(text) {
                const textArea = document.createElement("textarea");
                textArea.value = text;
                textArea.style.position = "fixed";  //avoid scrolling to bottom
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                
                try {
                    const successful = document.execCommand('copy');
                    if (successful) {
                        // 显示成功提示
                        alert('链接已复制到剪贴板');
                    } else {
                        alert('复制失败，请手动复制链接');
                    }
                } catch (err) {
                    console.error('复制失败:', err);
                    alert('复制失败，请手动复制链接');
                }
                
                document.body.removeChild(textArea);
            }
            
            // 文本选择功能
            content.addEventListener('mouseup', function(e) {
                const selection = window.getSelection();
                const selectedText = selection.toString().trim();
                
                if (selectedText.length > 0 && current_user_can_edit) {
                    // 获取选中文本的范围
                    const range = selection.getRangeAt(0);
                    
                    // 创建高亮元素
                    const highlightSpan = document.createElement('span');
                    highlightSpan.className = 'selected-text';
                    highlightSpan.textContent = selectedText;
                    
                    // 用高亮元素替换选中文本
                    range.deleteContents();
                    range.insertNode(highlightSpan);
                    
                    // 将选中文本保存到隐藏字段
                    document.getElementById('annotation_selection').value = selectedText;
                    
                    // 显示批注表单
                    addAnnotationForm.style.display = 'block';
                    
                    // 滚动到表单位置
                    addAnnotationForm.scrollIntoView({ behavior: 'smooth' });
                }
            });
            
            // 检查用户是否有编辑权限
            const current_user_can_edit = <?php echo current_user_can('edit_posts') ? 'true' : 'false'; ?>;
        });
        </script>
        
    <?php endwhile; ?>
<?php endif; ?>

<?php
get_footer();