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

if (have_posts()) : the_post(); ?>

<div class="py-20">
    <div class="container">
        <div class="px-4 sm:px-8">

            <?php the_content(); ?>

            <div class="lg:grid lg:grid-cols-12 lg:gap-4 my-3">
                <div class="lg:col-span-6 sm:col-span-6 flex items-center">
                    <p class="text-black text-xl font-bold"><?php the_title(); ?></p>
                </div>
            </div>

            <div class="relative overflow-x-auto">
                <table class="w-full text-left">
                    <thead class="ash-bg rounded-xl mb-1">
                        <tr class="border-b-4 border-white">
                            <th scope="col" class="p-6 rounded-l-xl text-black text-xl">Team Name</th>
                            <th scope="col" class="p-6 text-black text-xl">City</th>
                            <th scope="col" class="p-6 text-black text-xl">Owner</th>
                            <th scope="col" class="p-6 rounded-r-xl text-black text-xl">Players</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
                        $teams_query = new WP_Query(array(
                            'post_type' => 'teams',
                            'posts_per_page' => 8,
                            'paged' => $paged
                        ));

                        if ($teams_query->have_posts()) :
                            while ($teams_query->have_posts()) : $teams_query->the_post();

                                // Get ACF fields
                                $team_details = get_field('team_details');
                                $team_members = get_field('team_members');
                                $members_count = is_array($team_members) ? count($team_members) : 0;
                        ?>
                                <tr class="border-b-4 border-white">
                                    <td scope="row" class="p-6 rounded-l-xl font-normal text-sm my-2 light-blue">
                                        <?php if ($team_details['team_logo']) : ?>
                                            <img src="<?php echo esc_url($team_details['team_logo']); ?>" class="float-left mr-2" alt="<?php the_title(); ?>" />
                                        <?php endif; ?>
                                        <b><?php the_title(); ?></b>
                                    </td>
                                    <td class="p-6 font-normal text-sm my-2 light-blue align-top">
                                        <?php echo esc_html($team_details['city']); ?>
                                    </td>
                                    <td class="p-6 font-normal text-sm my-2 light-blue align-top">
                                        <?php echo esc_html($team_details['owner']); ?>
                                    </td>
                                    <td class="p-6 rounded-r-xl font-normal text-sm my-2 light-blue">
                                        <?php echo $members_count; ?> Members <br />
                                        <a href="<?php echo get_permalink(); ?>" class="mt-3 lg:mt-0 text-white green-bg rounded-xl flex justify-center radious-sm px-8 py-4 uppercase hover:bg-white hover:text-black border border-green-500 hover:border-gray-700 hover:border">
                                            View More
                                        </a>
                                    </td>
                                </tr>
                        <?php
                            endwhile;
                        endif;
                        wp_reset_postdata();
                        ?>
                    </tbody>
                </table>

                <?php if ($teams_query->max_num_pages > 1) :
                    $range = 2; // How many pages to show on each side of current page
                    $max_pages = $teams_query->max_num_pages;
                ?>
                    <nav aria-label="Page navigation" class="mx-auto">
                        <ul class="flex items-center gap-2 h-8 text-sm justify-center my-4">
                            <?php if ($paged > 1) : ?>
                                <li>
                                    <a href="<?php echo get_pagenum_link($paged - 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 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
                            // First page
                            if ($paged > ($range + 1)) : ?>
                                <li>
                                    <a href="<?php echo get_pagenum_link(1); ?>"
                                       class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 light-bg border border-gray-300 text-base font-medium hover:bg-gray-100 hover:text-gray-700 rounded">
                                        1
                                    </a>
                                </li>
                                <?php if ($paged > ($range + 2)) : ?>
                                    <li class="flex items-center justify-center px-3 h-8">...</li>
                                <?php endif;
                            endif;

                            // Pages around current
                            for ($i = max(1, $paged - $range); $i <= min($max_pages, $paged + $range); $i++) :
                                $is_current = $paged == $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 rounded">
                                        <?php echo $i; ?>
                                    </a>
                                </li>
                            <?php endfor;

                            // Last page
                            if ($paged < ($max_pages - $range)) :
                                if ($paged < ($max_pages - $range - 1)) : ?>
                                    <li class="flex items-center justify-center px-3 h-8">...</li>
                                <?php endif; ?>
                                <li>
                                    <a href="<?php echo get_pagenum_link($max_pages); ?>"
                                       class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 light-bg border border-gray-300 text-base font-medium hover:bg-gray-100 hover:text-gray-700 rounded">
                                        <?php echo $max_pages; ?>
                                    </a>
                                </li>
                            <?php endif; ?>

                            <?php if ($paged < $teams_query->max_num_pages) : ?>
                                <li>
                                    <a href="<?php echo get_pagenum_link($paged + 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 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>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<?php endif;

get_footer();