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

if (have_posts()) : the_post();

$intro = get_field('intro_section');
$classes = get_field('classes');
$classification = get_field('membership_classification');
?>

<!-- Introduction Section -->
<div class="py-20">
    <div class="container px-4 sm:px-8 lg:grid lg:grid-cols-12 lg:gap-4">
        <div class="lg:col-span-12 text-center">
            <h2 class="uppercase text-black mb-7">Membership Types</h2>
            <div class="text-sm font-normal leading-5 lg:w-3/6 m-auto">
              <?php the_content(); ?>
            </div>

        </div>
    </div>
</div>

<!-- Membership Classes Section -->
<div class="py-20 red-bg membership-classes-bg">
    <div class="container px-4 sm:px-8 lg:grid lg:grid-cols-12 lg:gap-x-8">
        <div class="lg:col-span-12 text-center">
            <h3 class="text-2xl text-white font-semibold mb-14">There are <?php echo count($classes); ?> classes of Members</h3>
        </div>
        <?php
        // Get all membership classes as a single list


          if($classes):
              // Calculate items per column (ceil to handle when total items not divisible by 3)
              $total_items = count($classes);
              $items_per_column = ceil($total_items / 3);

              // Split array into 3 chunks
              $columns = array_chunk($classes, $items_per_column);

              // Ensure we have 3 arrays even if some are empty
              $columns = array_pad($columns, 3, []);

              foreach($columns as $index => $column): ?>
                  <div class="lg:col-span-4 bg-white rounded-xl p-6 mb-6 lg:mb-0">
                      <ul class="list-disc text-sm list-inside">
                          <?php foreach($column as $item): ?>
                              <li class="py-1"><?php echo esc_html($item['member_type']); ?></li>
                          <?php endforeach; ?>
                      </ul>
                  </div>
              <?php endforeach;
          endif; ?>


    </div>
</div>

<!-- Classification Section -->
<div class="py-20">
    <div class="container px-4 sm:px-8 lg:grid lg:grid-cols-12 lg:gap-x-8">
        <div class="lg:col-span-12 text-center">
            <h3 class="text-2xl text-black font-semibold mb-14 uppercase"><?php echo esc_html($classification['title']); ?></h3>
        </div>

        <div class="lg:col-span-12 w-12/12 m-auto">
            <div id="membership-classifications" class="space-y-6">

                <?php
                if($classification['classifications']):
                    foreach($classification['classifications'] as $index => $class):
                    $section_id = $index + 1;
                ?>
                    <section id="classification-<?php echo $section_id; ?>" class="border border-gray-400 rounded-xl overflow-hidden dark:border-gray-600">
                        <h2 class="py-2 px-6 font-medium text-base text-gray-900 dark:text-white bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700">
                            <?php echo esc_html($class['name']); ?>
                        </h2>
                        <div class="py-5 px-6">
                            <?php echo $class['classification_detail']; ?>
                        </div>
                    </section>
                <?php endforeach; endif; ?>
            </div>
        </div>
    </div>
</div>

<?php
endif;
get_footer();
?>