<?php
/**
 * 书法作品归档模板
 * <h1>书法作品</h1>
 */

get_header(); ?>

    <div class="pinyin-index-container">
        <!-- 英文字母索引 -->
        <div class="pinyin-section">

<div id="primary1" class="content-area">
    <main id="main" class="site-main">
       <!--  <h1></h1>-->
        
        <div class="calligraphy-archive">
            <div class="calligraphy-filters">
                <form id="calligraphy-filter-form">
                    <div class="filter-group">
                        <label for="filter-character">汉字:</label>
                        <input type="text" id="filter-character" name="character" placeholder="输入汉字">
                    </div>
                    
                    <div class="filter-group">
                        <label for="filter-style">书体:</label>
                        <select id="filter-style" name="style">
                            <option value="">所有书体</option>
                            <option value="楷书">楷书</option>
                            <option value="行书">行书</option>
                            <option value="草书">草书</option>
                            <option value="隶书">隶书</option>
                            <option value="篆书">篆书</option>
                            <option value="魏碑">魏碑</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label for="filter-artist">书法家:</label>
                        <input type="text" id="filter-artist" name="artist" placeholder="输入书法家姓名">
                    </div>
                    
                    <div class="filter-group">
                        <label for="filter-dynasty">朝代:</label>
                        <input type="text" id="filter-dynasty" name="dynasty" placeholder="输入朝代">
                    </div>
                    
                    <div class="filter-group">
                        <button type="submit" id="apply-filters">筛选</button>
                        <button type="button" id="reset-filters">重置</button>
                    </div>
                </form>
            </div>
            
            <div class="calligraphy-classifications">
                <div class="classification-section">
                    <h2>按书法家分类</h2>
                    <div id="artist-classification" class="classification-content">
                        <p class="loading">正在加载书法家分类...</p>
                    </div>
                </div>
                
                <div class="classification-section">
                    <h2>按朝代分类</h2>
                    <div id="dynasty-classification" class="classification-content">
                        <p class="loading">正在加载朝代分类...</p>
                    </div>
                </div>
                
                <div class="classification-section">
                    <h2>按书体分类</h2>
                    <div id="style-classification" class="classification-content">
                        <p class="loading">正在加载书体分类...</p>
                    </div>
                </div>
            </div>
            
            <div id="calligraphy-results" class="calligraphy-results">
                <p class="loading">正在加载书法作品...</p>
            </div>
        </div>
	</main><!-- .site-main -->
	</div><!-- .content-area -->
	<?php //get_sidebar(); ?>
               </div>
                </div>


<script>
jQuery(document).ready(function($) {
    // 加载所有书法作品
    function loadCalligraphy(filters = {}) {
        $('.loading').show();
        
        var data = {
            action: 'filter_calligraphy',
        };
        
        // 添加筛选条件
        $.extend(data, filters);
        
        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'POST',
            data: data,
            success: function(response) {
                if (response.success) {
                    displayCalligraphy(response.data);
                } else {
                    $('#calligraphy-results').html('<p>加载失败: ' + response.data + '</p>');
                }
            },
            error: function() {
                $('#calligraphy-results').html('<p>加载过程中发生错误。</p>');
            }
        });
    }
    
    // 显示书法作品
    function displayCalligraphy(calligraphies) {
        var html = '';
        
        if (calligraphies.length > 0) {
            html += '<div class="calligraphy-grid">';
            $.each(calligraphies, function(index, item) {
                html += '<div class="calligraphy-item">';
                html += '<div class="calligraphy-image">';
                if (item.thumbnail) {
                    html += '<a href="' + item.permalink + '"><img src="' + item.thumbnail + '" alt="' + item.title + '"></a>';
                } else {
                    html += '<div class="no-image">无图像</div>';
                }
                html += '</div>';
                html += '<div class="calligraphy-info">';
                html += '<h3><a href="' + item.permalink + '">' + item.title + '</a></h3>';
                html += '<p>汉字: ' + item.character + '</p>';
                html += '<p>书法家: ' + (item.artist || '未知') + '</p>';
                html += '<p>书体: ' + (item.style || '未知') + '</p>';
                if (item.dynasty || item.year) {
                    html += '<p>年代: ' + (item.dynasty || item.year || '未知') + '</p>';
                }
                html += '</div>';
                html += '</div>';
            });
            html += '</div>';
        } else {
            html = '<p>未找到符合条件的书法作品。</p>';
        }
        
        $('#calligraphy-results').html(html);
    }
    
    // 加载书法家分类
    function loadArtistClassification() {
        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'POST',
            data: {
                action: 'get_calligraphy_artists'
            },
            success: function(response) {
                if (response.success) {
                    var html = '<div class="classification-grid">';
                    $.each(response.data, function(index, artist) {
                        html += '<div class="classification-item">';
                        html += '<a href="#" class="artist-filter" data-artist="' + artist.name + '">';
                        html += '<h3>' + artist.name + '</h3>';
                        html += '<p>作品数量: ' + artist.count + '</p>';
                        html += '</a>';
                        html += '</div>';
                    });
                    html += '</div>';
                    $('#artist-classification').html(html);
                } else {
                    $('#artist-classification').html('<p>加载失败: ' + response.data + '</p>');
                }
            },
            error: function() {
                $('#artist-classification').html('<p>加载过程中发生错误。</p>');
            }
        });
    }
    
    // 加载朝代分类
    function loadDynastyClassification() {
        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'POST',
            data: {
                action: 'get_calligraphy_dynasties'
            },
            success: function(response) {
                if (response.success) {
                    var html = '<div class="classification-grid">';
                    $.each(response.data, function(index, dynasty) {
                        html += '<div class="classification-item">';
                        html += '<a href="#" class="dynasty-filter" data-dynasty="' + dynasty.name + '">';
                        html += '<h3>' + dynasty.name + '</h3>';
                        html += '<p>作品数量: ' + dynasty.count + '</p>';
                        html += '</a>';
                        html += '</div>';
                    });
                    html += '</div>';
                    $('#dynasty-classification').html(html);
                } else {
                    $('#dynasty-classification').html('<p>加载失败: ' + response.data + '</p>');
                }
            },
            error: function() {
                $('#dynasty-classification').html('<p>加载过程中发生错误。</p>');
            }
        });
    }
    
    // 加载书体分类
    function loadStyleClassification() {
        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'POST',
            data: {
                action: 'get_calligraphy_styles'
            },
            success: function(response) {
                if (response.success) {
                    var html = '<div class="classification-grid">';
                    $.each(response.data, function(index, style) {
                        html += '<div class="classification-item">';
                        html += '<a href="#" class="style-filter" data-style="' + style.name + '">';
                        html += '<h3>' + style.name + '</h3>';
                        html += '<p>作品数量: ' + style.count + '</p>';
                        html += '</a>';
                        html += '</div>';
                    });
                    html += '</div>';
                    $('#style-classification').html(html);
                } else {
                    $('#style-classification').html('<p>加载失败: ' + response.data + '</p>');
                }
            },
            error: function() {
                $('#style-classification').html('<p>加载过程中发生错误。</p>');
            }
        });
    }
    
    // 应用筛选条件
    $('#apply-filters').on('click', function(e) {
        e.preventDefault();
        
        var filters = {
            character: $('#filter-character').val(),
            style: $('#filter-style').val(),
            artist: $('#filter-artist').val(),
            dynasty: $('#filter-dynasty').val()
        };
        
        loadCalligraphy(filters);
    });
    
    // 重置筛选条件
    $('#reset-filters').on('click', function(e) {
        e.preventDefault();
        
        $('#filter-character, #filter-style, #filter-artist, #filter-dynasty').val('');
        loadCalligraphy();
    });
    
    // 书法家筛选
    $(document).on('click', '.artist-filter', function(e) {
        e.preventDefault();
        var artist = $(this).data('artist');
        $('#filter-artist').val(artist);
        loadCalligraphy({artist: artist});
    });
    
    // 朝代筛选
    $(document).on('click', '.dynasty-filter', function(e) {
        e.preventDefault();
        var dynasty = $(this).data('dynasty');
        $('#filter-dynasty').val(dynasty);
        loadCalligraphy({dynasty: dynasty});
    });
    
    // 书体筛选
    $(document).on('click', '.style-filter', function(e) {
        e.preventDefault();
        var style = $(this).data('style');
        $('#filter-style').val(style);
        loadCalligraphy({style: style});
    });
    
    // 初始加载
    loadCalligraphy();
    loadArtistClassification();
    loadDynastyClassification();
    loadStyleClassification();
});
</script>

<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;
}


.calligraphy-archive {
    /*padding: 20px 0;*/
    padding: 0px 0;
}

.calligraphy-filters {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 30px;
}

.calligraphy-filters .filter-group {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 15px;
}

.calligraphy-filters label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.calligraphy-filters input,
.calligraphy-filters select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    width: 150px;
}

.calligraphy-filters button {
    padding: 10px 15px;
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.calligraphy-filters button:hover {
    background: #005a87;
}

.calligraphy-filters #reset-filters {
    background: #ccc;
}

.calligraphy-filters #reset-filters:hover {
    background: #999;
}

.calligraphy-classifications {
    margin-bottom: 30px;
}

.classification-section {
    margin-bottom: 30px;
}

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

.classification-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.classification-item {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    text-align: center;
    background: #fff;
    transition: all 0.3s ease;
}

.classification-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.classification-item a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.classification-item h3 {
    margin: 0 0 10px 0;
    color: #333;
}

.classification-item p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.calligraphy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.calligraphy-item {
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.calligraphy-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.calligraphy-image {
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
}

.calligraphy-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.calligraphy-image .no-image {
    color: #999;
    font-style: italic;
}

.calligraphy-info {
    padding: 15px;
}

.calligraphy-info h3 {
    margin: 0 0 10px 0;
}

.calligraphy-info h3 a {
    text-decoration: none;
    color: #333;
}

.calligraphy-info p {
    margin: 5px 0;
    font-size: 14px;
    color: #666;
}

.loading {
    text-align: center;
    padding: 40px;
    color: #666;
}

@media (max-width: 768px) {
    .calligraphy-filters .filter-group {
        display: block;
        margin-right: 0;
        width: 100%;
    }
    
    .calligraphy-filters input,
    .calligraphy-filters select {
        width: 100%;
    }
    
    .calligraphy-grid,
    .classification-grid {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }
}
</style>

<?php
get_footer();