<?php
/* Template Name: Announcements */
get_header();
?>
<!-- bread-crumbs -->
<div class="container-fluid bread-crumbs">
    <div class="">
        <a href="<?php echo site_url(); ?>" class="text-decoration-none"><span>Home</span></a>
        <span>>></span>
        <span>Announcements</span>
    </div>
</div>

<!-- Content -->
<div class="container-fluid default-padding">
    <div class="row my-3">
        <div class="col-12">
            <label class="main-heading text-red">Announcements</label>
        </div>
    </div>
    <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <button class="nav-link active" id="filter-all-tab" data-bs-toggle="tab" data-bs-target="#filter-all" type="button" role="tab" aria-controls="filter-all" aria-selected="true">All</button>
            <button class="nav-link" id="filter-week-tab" data-bs-toggle="tab" data-bs-target="#filter-week" type="button" role="tab" aria-controls="filter-week" aria-selected="false">This Week</button>
            <button class="nav-link" id="filter-month-tab" data-bs-toggle="tab" data-bs-target="#filter-month" type="button" role="tab" aria-controls="filter-month" aria-selected="false">This Month</button>
            <button class="nav-link" id="filter-year-tab" data-bs-toggle="tab" data-bs-target="#filter-year" type="button" role="tab" aria-controls="filter-year" aria-selected="false">This Year</button>
        </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="filter-all" role="tabpanel" aria-labelledby="filter-all-tab">
            <div class="row gx-5">
                <?php
                $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

                $announcements = new WP_Query(array(
                    'posts_per_page' => 10,
                    'post_type' => 'cpt_announcements',
                    'orderby' => 'date',
                    'order' => 'DESC',
                    'paged' => $paged,
                ));

                if ($announcements->have_posts()) :
                    while ($announcements->have_posts()) :
                        $announcements->the_post();
                ?>
                        <div class="col-md-6 mb-5">
                            <a href="<?php the_permalink(); ?>">
                                <div class="container-fluid a-container border-bottom">
                                    <div class="row my-2">
                                        <div class="d-flex ">
                                            <div class="a-img w-100 h-100" style="
                                    background: url('<?php echo get_the_post_thumbnail_url(); ?>');
                                    background-repeat: no-repeat;
                                    background-size: cover;
                                    background-position:center;
                                    ">
                                            </div>
                                            <div class="col-lg-9">
                                                <div class="a-content bg-white w-100 d-flex flex-column justify-content-center justify-content-center">
                                                    <div class="meta-data author d-flex justify-content-start">
                                                        <div class="align-self-center d-flex">
                                                            <div class="d-flex date">
                                                                <div class="align-self-center">
                                                                    <img src="<?php echo get_theme_file_uri('images/global/date.png') ?>">
                                                                </div>
                                                                <div class="align-self-center">
                                                                    <label class="date text-black f-s18"><?php echo get_the_date("F d, Y"); ?></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="mt-2">
                                                        <label class="text-black f-s18 font-content-normal"><?php the_title(); ?></label>
                                                    </div>
                                                    <?php
                                                    if (get_field('is_sdg') == '1') :
                                                    ?>
                                                        <div class="mt-4 sdg-icons d-flex justify-content-start overflow-auto">
                                                            <div class="mb-2">
                                                                <img width="30px" src="<?php echo get_theme_file_uri('SDG/images/sdg-icons/sdg-wheel.png') ?>">
                                                            </div>
                                                            <div class="mx-1 d-flex justify-content-center align-items-center">
                                                                <?php
                                                                foreach (get_field('sdg_category') as $cat) :
                                                                ?>
                                                                    <a class="text-white text-decoration-none" href="<?php echo site_url('sdg-' . $cat['value']) ?>">
                                                                        <div class="mb-2 sdg-no sdg_<?php echo $cat['value'] ?>">
                                                                            <label class="cursor-pointer"><?php echo  $cat['value'] ?></label>
                                                                        </div>
                                                                    </a>
                                                                <?php endforeach; ?>
                                                            </div>
                                                        </div>
                                                    <?php endif; ?>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    <?php
                    endwhile;
                    ?>
                    <div class="pagination ">
                        <div class="page-item col-12 text-center">
                            <div class="page-link ">
                                <?php
                                echo paginate_links(array(
                                    'total' => $announcements->max_num_pages,
                                    'current' => max(1, get_query_var('paged')),
                                    'prev_text' => __('«'),
                                    'next_text' => __('»'),
                                ));
                                ?>
                            </div>
                        </div>
                    </div>
                <?php
                    wp_reset_postdata();
                else :
                ?>
                    <div class="col-12 d-flex text-center p-3">
                        <h2 class="font-content-bold">No recent announcements found</h2>
                    </div>
                <?php endif; ?>
            </div>
        </div>
        <div class="tab-pane fade" id="filter-week" role="tabpanel" aria-labelledby="filter-week-tab">
            <div class="row">
                <?php
                $announcements = new WP_Query(array(
                    'posts_per_page' => -1,
                    'post_type' => 'cpt_announcements',
                    'order_by' => 'date',
                    'order' => 'DESC',
                    'date_query' => array(
                        array(
                            'year' => date('Y'),
                            'week' => strftime('%U'),
                        ),
                    ),
                ));/* custom queries */
                if ($announcements) :
                    while ($announcements->have_posts()) :
                        $announcements->the_post();
                ?>
                        <div class="col-md-6 mb-5">
                            <a href="<?php the_permalink(); ?>">
                                <div class="d-flex a-container">
                                    <div class="a-img" style="
                                    background: url('<?php echo get_the_post_thumbnail_url(); ?>');
                                    background-repeat: no-repeat;
                                    background-size: cover;
                                    background-position:center;
                                    ">

                                    </div>
                                    <div class="a-content bg-white w-100 d-flex flex-column justify-content-between">
                                        <div class="a-heading">
                                            <label class="text-black"><?php the_title(); ?></label>
                                        </div>
                                        <div class="a-descriptions">
                                            <label class="text-black"><?php
                                                                        if (has_excerpt()) {
                                                                            echo get_the_excerpt();
                                                                        } else {
                                                                            echo wp_trim_words(get_the_content(), 48);
                                                                        }
                                                                        ?></label>
                                        </div>
                                        <div class="meta-data author d-flex justify-content-start">
                                            <div class="align-self-center d-flex">
                                                <div class="d-flex me-2">
                                                    <div class="align-self-center">
                                                        <img src="<?php echo get_theme_file_uri('images/global/author.png') ?>">
                                                    </div>
                                                    <div class="align-self-center">
                                                        <label class="author text-black"><?php the_author(); ?></label>
                                                    </div>
                                                </div>
                                                <div class="d-flex date ms-2">
                                                    <div class="align-self-center">
                                                        <img src="<?php echo get_theme_file_uri('images/global/date.png') ?>">
                                                    </div>
                                                    <div class="align-self-center">
                                                        <label class="date text-black"><?php echo get_the_date("F d, Y"); ?></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    <?php
                    endwhile;
                else :
                    ?>
                    <div class="col-12 d-flex text-center p-3">
                        <h2 class="font-content-bold">No recent announcements found</h2>
                    </div>

                <?php endif ?>
            </div>
        </div>
        <div class="tab-pane fade" id="filter-month" role="tabpanel" aria-labelledby="filter-month-tab">
            <div class="row">
                <?php
                $announcements = new WP_Query(array(
                    'posts_per_page' => -1,
                    'post_type' => 'cpt_announcements',
                    'order_by' => 'date',
                    'order' => 'DESC',
                    'date_query' => array(
                        array(
                            'year' => date('Y'),
                            'month' => date('m'),
                        ),
                    ),
                ));/* custom queries */
                if ($announcements) :
                    while ($announcements->have_posts()) :
                        $announcements->the_post();
                ?>
                        <div class="col-md-6 mb-5">
                            <a href="<?php the_permalink(); ?>">
                                <div class="d-flex a-container">
                                    <div class="a-img" style="
                                    background: url('<?php echo get_the_post_thumbnail_url(); ?>');
                                    background-repeat: no-repeat;
                                    background-size: cover;
                                    background-position:center;
                                    ">

                                    </div>
                                    <div class="a-content bg-white w-100 d-flex flex-column justify-content-between">
                                        <div class="a-heading">
                                            <label class="text-black"><?php the_title(); ?></label>
                                        </div>
                                        <div class="a-descriptions">
                                            <label class="text-black"><?php
                                                                        if (has_excerpt()) {
                                                                            echo get_the_excerpt();
                                                                        } else {
                                                                            echo wp_trim_words(get_the_content(), 48);
                                                                        }
                                                                        ?></label>
                                        </div>
                                        <div class="meta-data author d-flex justify-content-start">
                                            <div class="align-self-center d-flex">
                                                <div class="d-flex me-2">
                                                    <div class="align-self-center">
                                                        <img src="<?php echo get_theme_file_uri('images/global/author.png') ?>">
                                                    </div>
                                                    <div class="align-self-center">
                                                        <label class="author text-black"><?php the_author(); ?></label>
                                                    </div>
                                                </div>
                                                <div class="d-flex date ms-2">
                                                    <div class="align-self-center">
                                                        <img src="<?php echo get_theme_file_uri('images/global/date.png') ?>">
                                                    </div>
                                                    <div class="align-self-center">
                                                        <label class="date text-black"><?php echo get_the_date("F d, Y"); ?></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    <?php
                    endwhile;
                else :
                    ?>
                    <div class="col-12 d-flex text-center p-3">
                        <h2 class="font-content-bold">No recent announcements found</h2>
                    </div>

                <?php endif ?>
            </div>
        </div>
        <div class="tab-pane fade" id="filter-year" role="tabpanel" aria-labelledby="filter-year-tab">
            <div class="row">
                <?php
                $announcements = new WP_Query(array(
                    'posts_per_page' => -1,
                    'post_type' => 'cpt_announcements',
                    'order_by' => 'date',
                    'order' => 'DESC',
                    'date_query' => array(
                        array(
                            'year' => date('Y'),
                        ),
                    ),
                ));/* custom queries */
                if ($announcements) :
                    while ($announcements->have_posts()) :
                        $announcements->the_post();
                ?>
                        <div class="col-md-6 mb-5">
                            <a href="<?php the_permalink(); ?>">
                                <div class="d-flex a-container">
                                    <div class="a-img" style="
                                    background: url('<?php echo get_the_post_thumbnail_url(); ?>');
                                    background-repeat: no-repeat;
                                    background-size: cover;
                                    background-position:center;
                                    ">

                                    </div>
                                    <div class="a-content bg-white w-100 d-flex flex-column justify-content-between">
                                        <div class="a-heading">
                                            <label class="text-black"><?php the_title(); ?></label>
                                        </div>
                                        <div class="a-descriptions">
                                            <label class="text-black"><?php
                                                                        if (has_excerpt()) {
                                                                            echo get_the_excerpt();
                                                                        } else {
                                                                            echo wp_trim_words(get_the_content(), 48);
                                                                        }
                                                                        ?></label>
                                        </div>
                                        <div class="meta-data author d-flex justify-content-start">
                                            <div class="align-self-center d-flex">
                                                <div class="d-flex me-2">
                                                    <div class="align-self-center">
                                                        <img src="<?php echo get_theme_file_uri('images/global/author.png') ?>">
                                                    </div>
                                                    <div class="align-self-center">
                                                        <label class="author text-black"><?php the_author(); ?></label>
                                                    </div>
                                                </div>
                                                <div class="d-flex date ms-2">
                                                    <div class="align-self-center">
                                                        <img src="<?php echo get_theme_file_uri('images/global/date.png') ?>">
                                                    </div>
                                                    <div class="align-self-center">
                                                        <label class="date text-black"><?php echo get_the_date("F d, Y"); ?></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    <?php
                    endwhile;
                else :
                    ?>
                    <div class="col-12 d-flex text-center p-3">
                        <h2 class="font-content-bold">No recent announcements found</h2>
                    </div>

                <?php endif ?>
            </div>
        </div>
    </div>
</div>


<?php get_footer(); ?>