<?php

$id = 'gallery-tabs-' . $block['id'];
if ( ! empty($block['anchor'] ) ) {
    $id = $block['anchor'];
}

$classes = 'block-gallery-tabs';
if ( ! empty( $block['className'] ) ) {
    $classes .= ' ' . $block['className'];
}
if ( ! empty( $block['align'] ) ) {
    $classes .= ' align' . $block['align'];
}

$heading = get_field('heading');
$slider_tabs = get_field('slider_tabs');

?>

<div class="gallery-block mt-[24px]"
     id="<?php echo esc_attr( $id ); ?>"
     data-gallery-id="<?php echo esc_attr( $id ); ?>">
    <div class="container mx-auto">

        <?php if ($heading) : ?>
            <h2 class="text-[32px] font-bold"><?php echo esc_html($heading); ?></h2>
        <?php endif; ?>

        <?php if ($slider_tabs && !empty($slider_tabs['slider_tab'])) : ?>
            <div class="flex gap-[10px] mt-[24px]">
                <?php foreach ($slider_tabs['slider_tab'] as $tab_index => $tab) : ?>
                    <?php if (!empty($tab['tab_name'])) : ?>
                        <button class="tab-button px-[24px] py-[12px] border rounded-[25px] cursor-pointer transition-all <?php echo $tab_index === 0 ? 'active underline' : ''; ?>"
                                data-tab="<?php echo $tab_index; ?>">
                            <?php echo esc_html($tab['tab_name']); ?>
                        </button>
                    <?php endif; ?>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>

    <?php if ($slider_tabs && !empty($slider_tabs['slider_tab'])) : ?>
        <?php foreach ($slider_tabs['slider_tab'] as $tab_index => $tab) : ?>
            <div class="tab-content <?php echo $tab_index === 0 ? 'block' : 'hidden'; ?>"
                 id="tab-<?php echo $tab_index; ?>">

                <?php if (!empty($tab['slider_images'])) : ?>
                    <div class="swiper mt-[24px] gallery-swiper h-[440px]" id="swiper-<?php echo $tab_index; ?>">
                        <div class="swiper-wrapper">
                            <?php foreach ($tab['slider_images'] as $image) : ?>
                                <div class="swiper-slide cursor-pointer min-h-[440px]">
                                    <a href="<?php echo esc_url($image['url']); ?>"
                                       class="glightbox block w-full h-full"
                                       data-gallery="gallery-<?php echo $tab_index; ?>">
                                        <img src="<?php echo esc_url($image['url']); ?>"
                                             alt="<?php echo esc_attr($image['alt']); ?>"
                                             class="w-full h-full object-cover">
                                    </a>
                                </div>
                            <?php endforeach; ?>
                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>

                    <div class="flex mt-[24px] gap-[8px] overflow-x-auto">
                        <?php foreach ($tab['slider_images'] as $thumb_index => $image) : ?>
                            <div class="thumbnail flex-shrink-0 w-[80px] h-[60px] rounded-[5px] overflow-hidden cursor-pointer border-2 border-transparent <?php echo $thumb_index === 0 ? 'active !border-blue-500' : ''; ?>"
                                 data-index="<?php echo $thumb_index; ?>">
                                <img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>"
                                     alt="<?php echo esc_attr($image['alt']); ?>"
                                     class="w-full h-full object-cover">
                            </div>
                        <?php endforeach; ?>
                    </div>

                    <?php if (!empty($image['caption'])) : ?>
                        <p><?php echo esc_html($image['caption']); ?></p>
                    <?php endif; ?>
                <?php endif; ?>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>
</div>