<?php
/*
Template Name: Press Release
*/
get_header('inner');

if (have_posts()) : the_post();

// Query Press Releases
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
    'post_type' => 'press_release',
    'posts_per_page' =>12,
    'paged' => $paged,
    'orderby' => array(
        'meta_value' => 'DESC',
        'date' => 'DESC'
    ),
    'meta_key' => 'press_release_details_release_date'
);

$press_releases = new WP_Query($args);
?>

<div class="py-20">
    <div class="container">
        <div class="px-4 sm:px-8 lg:grid lg:grid-cols-12 lg:gap-7">
            <div class="lg:col-span-12">
                <h3 class="text-2xl text-black font-bold uppercase"><?php the_title(); ?></h3>
            </div>

            <?php
            if ($press_releases->have_posts()) :
                while ($press_releases->have_posts()) : $press_releases->the_post();
                    $details = get_field('press_release_details');
                    if ($details) :
                        $media_type = $details['media_type'];
                        $featured_image = $details['featured_image'];
                        $release_date = $details['release_date'];
                        $description = $details['short_description'];
                        ?>
                        <div class="lg:col-span-4">
                            <div class="max-w-sm bg-white rounded-lg">
                                <div class="h-72 overflow-hidden rounded-2xl relative pop-bg">
                                    <div class="dark-over-bg flex justify-center items-center"
                                         data-modal-target="modal-<?php echo get_the_ID(); ?>"
                                         data-modal-toggle="modal-<?php echo get_the_ID(); ?>">
                                        <?php if ($media_type === 'video') : ?>
                                            <img src="<?php echo get_template_directory_uri(); ?>/images/v-play2.png" class="w-14 h-14" />
                                        <?php else : ?>
                                            <img src="<?php echo get_template_directory_uri(); ?>/images/zoom.png" class="w-14 h-14" />
                                        <?php endif; ?>
                                    </div>
                                    <a href="#">
                                        <img src="<?php echo esc_url($featured_image['url']); ?>"
                                             alt="<?php echo esc_attr($featured_image['alt']); ?>"
                                             class="w-full" />
                                    </a>
                                </div>
                                <div class="mt-5">
                                    <p class="mb-2 text-sm leading-7">
                                        <img src="<?php echo get_template_directory_uri(); ?>/images/date.png" class="float-left mr-3" />
                                        <?php echo date('M Y', strtotime($release_date)); ?>
                                    </p>
                                    <p class="mb-3 text-sm text-gray-700 dark:text-gray-400">
                                        <?php echo esc_html($description); ?>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <?php
                    endif;
                endwhile;

                // Pagination

                if ($press_releases->max_num_pages > 1) :
                    $current_page = max(1, get_query_var('paged'));
                    $total_pages = $press_releases->max_num_pages;
                ?>
                    <div class="lg:col-span-12">
                        <nav aria-label="Page navigation example mx-auto">
                            <ul class="flex items-center gap-2 h-8 text-sm justify-center my-4">
                                <?php if ($current_page > 1) : ?>
                                    <li>
                                        <a href="<?php echo get_pagenum_link($current_page - 1); ?>"
                                           class="flex items-center justify-center px-3 h-8 ms-0 leading-tight bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 text-lg hover:text-gray-700 text-white dark:hover:bg-gray-700 dark:hover:text-white rounded green-bg">
                                            <span class="sr-only">Previous</span>
                                            <svg class="w-2.5 h-2.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
                                            </svg>
                                        </a>
                                    </li>
                                <?php endif; ?>

                                <?php
                                // Page numbers
                                for ($i = 1; $i <= $total_pages; $i++) :
                                    $is_current = $current_page == $i;
                                ?>
                                    <li>
                                        <a href="<?php echo get_pagenum_link($i); ?>"
                                           class="flex items-center justify-center px-3 h-8 leading-tight <?php echo $is_current ? 'green-bg text-white' : 'text-gray-500 light-bg'; ?> border border-gray-300 text-base font-medium hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white rounded">
                                            <?php echo $i; ?>
                                        </a>
                                    </li>
                                <?php endfor; ?>

                                <?php if ($current_page < $total_pages) : ?>
                                    <li>
                                        <a href="<?php echo get_pagenum_link($current_page + 1); ?>"
                                           class="flex items-center justify-center px-3 h-8 ms-0 leading-tight bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 text-lg hover:text-gray-700 text-white dark:hover:bg-gray-700 dark:hover:text-white rounded green-bg">
                                            <span class="sr-only">Next</span>
                                            <svg class="w-2.5 h-2.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                                            </svg>
                                        </a>
                                    </li>
                                <?php endif; ?>
                            </ul>
                        </nav>
                    </div>
                <?php endif;

                // Reset Query
                wp_reset_postdata();



            else : ?>
                <div class="lg:col-span-12">
                    <p class="text-center">No press releases found.</p>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>
<?php
// Add Modals
rewind_posts();
while ($press_releases->have_posts()) : $press_releases->the_post();
    $details = get_field('press_release_details');
    if ($details) : ?>
        <!-- Modal for <?php the_title(); ?> -->
        <div id="modal-<?php echo get_the_ID(); ?>"
             tabindex="-1"
             aria-hidden="true"
             class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 popup-z justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
            <div class="relative p-4 w-full max-w-2xl max-h-full">
                <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
                    <button type="button"
                            class="text-red-600 mt-5 mr-5 bg-gray-200 hover:bg-gray-200 hover:text-gray-900 rounded-2xl text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:text-white float-right"
                            data-modal-hide="modal-<?php echo get_the_ID(); ?>">
                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                    <div class="p-4 md:p-5 space-y-4">
                        <?php the_content(); ?>
                    </div>
                </div>
            </div>
        </div>
        <?php
    endif;
endwhile;
wp_reset_postdata(); ?>

<?php endif;
get_footer(); ?>