<?php
/**
 * 拼音索引模板
 *
 * @package ChineseCharacterDictionary
 */

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

get_header();

// 定义声母（按新华字典顺序）
$initials = array(
    'b', 'p', 'm', 'f', 'd', 't', 'n', 'l', 
    'g', 'k', 'h', 'j', 'q', 'x', 
    'zh', 'ch', 'sh', 'r', 'z', 'c', 's',
    'y', 'w'
);

// 定义韵母（按新华字典方式分类）
$simple_finals = array('a', 'o', 'e', 'i', 'u', 'ü');
$compound_finals = array(
    'ai', 'ei', 'ao', 'ou',
    'ia', 'ie', 'iao', 'iou', 
    'ua', 'uo', 'uai', 'uei'
);
$nasal_finals = array(
    'an', 'en', 'ang', 'eng', 'ong',
    'ian', 'in', 'iang', 'ing', 'iong',
    'uan', 'uen', 'uang', 'ueng',
    'üan', 'ün', 'üe'
);
$erhua = array('er');

// 定义英文字母表
$alphabet = range('A', 'Z');

// 获取所有汉字文章
$args = array(
    'post_type'      => 'chinese_character',
    'post_status'    => 'publish',
    'posts_per_page' => -1,
    'orderby'        => 'title',
    'order'          => 'ASC'
);

$characters = get_posts($args);

// 按拼音分组汉字
$pinyin_groups = array();

// 按英文字母分组汉字
$alphabet_groups = array();

foreach ($characters as $character) {
    $pinyin = get_post_meta($character->ID, '_character_pinyin', true);
    if (!empty($pinyin)) {
        // 清理拼音，移除声调符号并标准化
        $search = array('ā','á','ǎ','à','ē','é','ě','è','ī','í','ǐ','ì','ō','ó','ǒ','ò','ū','ú','ǔ','ù','ǖ','ǘ','ǚ','ǜ','ü');
        $replace = array('a','a','a','a','e','e','e','e','i','i','i','i','o','o','o','o','u','u','u','u','ü','ü','ü','ü','ü');
        $normalized_pinyin = str_replace($search, $replace, $pinyin);
        // 移除任何剩余的非字母字符，保留基本拼音字母
        $clean_pinyin = preg_replace('/[^a-zA-Z]/', '', $normalized_pinyin);
        $clean_pinyin = strtolower($clean_pinyin);
        
        if (!isset($pinyin_groups[$clean_pinyin])) {
            $pinyin_groups[$clean_pinyin] = array();
        }
        
        $pinyin_groups[$clean_pinyin][] = $character;
    }
    
    // 按汉字拼音首字母分组到英文字母表中
    $first_letter = strtoupper(substr($clean_pinyin, 0, 1));
    if (!isset($alphabet_groups[$first_letter])) {
        $alphabet_groups[$first_letter] = array();
    }
    $alphabet_groups[$first_letter][] = $character;
}
?>


<!--<div class="wrap">-->
<div class="pinyin-index-container">
   
      <div id="primary" class="content-area">
         <main id="main" class="site-main">
            <header class="page-header">
                <h1 class="page-title">拼音检字法</h1>
                <p class="page-description">按拼音查找汉字</p>
                <p class="page-links">
                    <a href="<?php echo home_url('/radical-index'); ?>">部首检字法</a>
                </p>
            </header>
    <div class="pinyin-index-container">
    	<!-- <h1>拼音索引</h1> -->
    	 <h2>拼音索引</h2>
    	 
        <!-- 英文字母索引 -->
        <div class="pinyin-section">
            <h2>英文字母索引</h2>
            <div class="alphabet-grid">
                <?php foreach ($alphabet as $letter): ?>
                    <a href="#letter-<?php echo esc_attr($letter); ?>" class="alphabet-item<?php echo !isset($alphabet_groups[$letter]) ? ' disabled' : ''; ?>">
                        <?php echo esc_html($letter); ?>
                    </a>
                <?php endforeach; ?>
            </div>
        </div>
        
        <!-- 声母索引 -->
        <div class="pinyin-section">
            <h2>声母</h2>
            <div class="initials-grid">
                <?php foreach ($initials as $initial): ?>
                    <a href="#initial-<?php echo esc_attr($initial); ?>" class="initial-item">
                        <?php echo esc_html(strtoupper($initial)); ?>
                    </a>
                <?php endforeach; ?>
            </div>
        </div>
        
        <!-- 韵母索引 -->
        <div class="pinyin-section">
            <h2>韵母</h2>
            <div class="finals-categories">
                <h3>单韵母</h3>
                <div class="finals-grid">
                    <?php foreach ($simple_finals as $final): ?>
                        <a href="#final-<?php echo esc_attr($final); ?>" class="final-item">
                            <?php echo esc_html(strtoupper($final)); ?>
                        </a>
                    <?php endforeach; ?>
                </div>
                
                <h3>复韵母</h3>
                <div class="finals-grid">
                    <?php foreach ($compound_finals as $final): ?>
                        <a href="#final-<?php echo esc_attr($final); ?>" class="final-item">
                            <?php echo esc_html(strtoupper($final)); ?>
                        </a>
                    <?php endforeach; ?>
                </div>
                
                <h3>鼻韵母</h3>
                <div class="finals-grid">
                    <?php foreach ($nasal_finals as $final): ?>
                        <a href="#final-<?php echo esc_attr($final); ?>" class="final-item">
                            <?php echo esc_html(strtoupper($final)); ?>
                        </a>
                    <?php endforeach; ?>
                </div>
                
                <h3>儿化韵</h3>
                <div class="finals-grid">
                    <?php foreach ($erhua as $final): ?>
                        <a href="#final-<?php echo esc_attr($final); ?>" class="final-item">
                            <?php echo esc_html(strtoupper($final)); ?>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
        
        <!-- 英文字母详细列表 -->
        <div class="pinyin-details">
            <h2 id="alphabet-list">英文字母索引详细列表</h2>
            <?php foreach ($alphabet as $letter): ?>
                <?php if (isset($alphabet_groups[$letter])): ?>
                    <div class="pinyin-group" id="letter-<?php echo esc_attr($letter); ?>">
                        <h3><?php echo esc_html($letter); ?></h3>
                        <div class="characters-list">
                            <?php foreach ($alphabet_groups[$letter] as $char): ?>
                                <a href="<?php echo esc_url(get_permalink($char->ID)); ?>" class="character-item">
                                    <?php echo esc_html($char->post_title); ?>
                                    <span class="pinyin"><?php echo esc_html(get_post_meta($char->ID, '_character_pinyin', true)); ?></span>
                                </a>
                            <?php endforeach; ?>
                        </div>
                    </div>
                <?php endif; ?>
            <?php endforeach; ?>
        </div>
        
        <!-- 声母详细列表 -->
        <div class="pinyin-details">
            <h2 id="initials-list">声母详细列表</h2>
            <?php foreach ($initials as $initial): ?>
                <div class="pinyin-group" id="initial-<?php echo esc_attr($initial); ?>">
                    <h3><?php echo esc_html(strtoupper($initial)); ?></h3>
                    <div class="characters-list">
                        <?php 
                        // 查找以该声母开头的拼音
                        foreach ($pinyin_groups as $pinyin => $chars) {
                            if (strpos($pinyin, $initial) === 0) {
                                foreach ($chars as $char) {
                                    echo '<a href="' . esc_url(get_permalink($char->ID)) . '" class="character-item">';
                                    echo esc_html($char->post_title);
                                    echo '<span class="pinyin">' . esc_html(get_post_meta($char->ID, '_character_pinyin', true)) . '</span>';
                                    echo '</a>';
                                }
                            }
                        }
                        ?>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        
        <!-- 韵母详细列表 -->
        <div class="pinyin-details">
            <h2 id="finals-list">韵母详细列表</h2>
            
            <h3>单韵母</h3>
            <?php foreach ($simple_finals as $final): ?>
                <div class="pinyin-group" id="final-<?php echo esc_attr($final); ?>">
                    <h3><?php echo esc_html(strtoupper($final)); ?></h3>
                    <div class="characters-list">
                        <?php 
                        // 查找包含该韵母的拼音
                        foreach ($pinyin_groups as $pinyin => $chars) {
                            if (strpos($pinyin, $final) !== false) {
                                foreach ($chars as $char) {
                                    echo '<a href="' . esc_url(get_permalink($char->ID)) . '" class="character-item">';
                                    echo esc_html($char->post_title);
                                    echo '<span class="pinyin">' . esc_html(get_post_meta($char->ID, '_character_pinyin', true)) . '</span>';
                                    echo '</a>';
                                }
                            }
                        }
                        ?>
                    </div>
                </div>
            <?php endforeach; ?>
            
            <h3>复韵母</h3>
            <?php foreach ($compound_finals as $final): ?>
                <div class="pinyin-group" id="final-<?php echo esc_attr($final); ?>">
                    <h3><?php echo esc_html(strtoupper($final)); ?></h3>
                    <div class="characters-list">
                        <?php 
                        // 查找包含该韵母的拼音
                        foreach ($pinyin_groups as $pinyin => $chars) {
                            if (strpos($pinyin, $final) !== false) {
                                foreach ($chars as $char) {
                                    echo '<a href="' . esc_url(get_permalink($char->ID)) . '" class="character-item">';
                                    echo esc_html($char->post_title);
                                    echo '<span class="pinyin">' . esc_html(get_post_meta($char->ID, '_character_pinyin', true)) . '</span>';
                                    echo '</a>';
                                }
                            }
                        }
                        ?>
                    </div>
                </div>
            <?php endforeach; ?>
            
            <h3>鼻韵母</h3>
            <?php foreach ($nasal_finals as $final): ?>
                <div class="pinyin-group" id="final-<?php echo esc_attr($final); ?>">
                    <h3><?php echo esc_html(strtoupper($final)); ?></h3>
                    <div class="characters-list">
                        <?php 
                        // 查找包含该韵母的拼音
                        foreach ($pinyin_groups as $pinyin => $chars) {
                            if (strpos($pinyin, $final) !== false) {
                                foreach ($chars as $char) {
                                    echo '<a href="' . esc_url(get_permalink($char->ID)) . '" class="character-item">';
                                    echo esc_html($char->post_title);
                                    echo '<span class="pinyin">' . esc_html(get_post_meta($char->ID, '_character_pinyin', true)) . '</span>';
                                    echo '</a>';
                                }
                            }
                        }
                        ?>
                    </div>
                </div>
            <?php endforeach; ?>
            
            <h3>儿化韵</h3>
            <?php foreach ($erhua as $final): ?>
                <div class="pinyin-group" id="final-<?php echo esc_attr($final); ?>">
                    <h3><?php echo esc_html(strtoupper($final)); ?></h3>
                    <div class="characters-list">
                        <?php 
                        // 查找包含该韵母的拼音
                        foreach ($pinyin_groups as $pinyin => $chars) {
                            if (strpos($pinyin, $final) !== false) {
                                foreach ($chars as $char) {
                                    echo '<a href="' . esc_url(get_permalink($char->ID)) . '" class="character-item">';
                                    echo esc_html($char->post_title);
                                    echo '<span class="pinyin">' . esc_html(get_post_meta($char->ID, '_character_pinyin', true)) . '</span>';
                                    echo '</a>';
                                }
                            }
                        }
                        ?>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
    
    </main><!-- .site-main -->
	</div><!-- .content-area -->
	<?php get_sidebar(); ?>
    
</div>

<style>
.pinyin-index-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.pinyin-section {
    margin-bottom: 40px;
}

.pinyin-section h2 {
    border-bottom: 2px solid #0073aa;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.initials-grid, .finals-grid, .alphabet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.initial-item, .final-item, .alphabet-item {
    display: block;
    text-align: center;
    padding: 10px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    transition: all 0.3s ease;
}

.initial-item:hover, .final-item:hover, .alphabet-item:hover {
    background: #0073aa;
    color: white;
    border-color: #005a87;
}

.alphabet-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pinyin-details h2 {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 3px solid #0073aa;
}

.pinyin-group {
    margin-bottom: 30px;
}

.pinyin-group h3 {
    background: #f0f0f0;
    padding: 10px 15px;
    margin: 0 0 15px 0;
    border-left: 4px solid #0073aa;
}

.characters-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.character-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 60px;
    text-decoration: none;
    color: #333;
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 5px;
    transition: all 0.3s ease;
}

.character-item:hover {
    background: #0073aa;
    color: white;
    border-color: #005a87;
}

.character-item .pinyin {
    font-size: 12px;
    margin-top: 3px;
    opacity: 0.8;
}

.character-item:hover .pinyin {
    color: white;
    opacity: 1;
}

@media (max-width: 768px) {
    .initials-grid, .finals-grid, .alphabet-grid {
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    }
    
    .character-item {
        width: 40px;
        height: 55px;
        font-size: 14px;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 平滑滚动到锚点
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 80,
                    behavior: 'smooth'
                });
            }
        });
    });
});
</script>


<?php
get_footer();
