Mobile Models

<?php
/* Template Name: Mobile Models */

get_header(); ?>

<div class="model-filter-container">
    <input type="text" id="search-model" placeholder="Search for model">
    <div id="series-filter">
        <button data-series="all" class="series-btn active">All</button>
        <?php
        $series_terms = get_terms(array(
            'taxonomy' => 'series',
            'hide_empty' => true,
        ));
        foreach ($series_terms as $term) {
            echo '<button data-series="' . esc_attr($term->slug) . '" class="series-btn">' . esc_html($term->name) . '</button>';
        }
        ?>
    </div>
</div>

<div id="models-container">
    <?php
    $models_query = new WP_Query(array(
        'post_type' => 'mobile_model',
        'posts_per_page' => -1,
    ));

    if ($models_query->have_posts()) :
        while ($models_query->have_posts()) : $models_query->the_post();
            $series = wp_get_post_terms(get_the_ID(), 'series', array('fields' => 'slugs'));
            ?>
            <div class="model-card" data-series="<?php echo esc_attr(implode(' ', $series)); ?>">
                <?php if (has_post_thumbnail()) : ?>
                    <div class="model-image">
                        <?php the_post_thumbnail('medium'); ?>
                    </div>
                <?php endif; ?>
                <div class="model-title"><?php the_title(); ?></div>
            </div>
            <?php
        endwhile;
        wp_reset_postdata();
    else :
        echo '<p>No models found.</p>';
    endif;
    ?>
</div>

<style>
    .model-filter-container { text-align: center; margin-bottom: 20px; }
    .series-btn { margin: 0 5px; padding: 5px 10px; cursor: pointer; border: 1px solid #ccc; }
    .series-btn.active { background: #f04; color: #fff; }
    #models-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
    .model-card { border: 1px solid #ccc; padding: 10px; text-align: center; max-width: 150px; }
    .model-image img { max-width: 100%; }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const buttons = document.querySelectorAll('.series-btn');
        const models = document.querySelectorAll('.model-card');
        const searchInput = document.getElementById('search-model');

        buttons.forEach(button => {
            button.addEventListener('click', () => {
                document.querySelector('.series-btn.active').classList.remove('active');
                button.classList.add('active');
                const series = button.getAttribute('data-series');

                models.forEach(model => {
                    if (series === 'all' || model.getAttribute('data-series').includes(series)) {
                        model.style.display = 'block';
                    } else {
                        model.style.display = 'none';
                    }
                });
            });
        });

        searchInput.addEventListener('input', () => {
            const searchQuery = searchInput.value.toLowerCase();
            models.forEach(model => {
                const title = model.querySelector('.model-title').textContent.toLowerCase();
                if (title.includes(searchQuery)) {
                    model.style.display = 'block';
                } else {
                    model.style.display = 'none';
                }
            });
        });
    });
</script>

<?php get_footer(); ?>