<?php
$section_title = rt_get_option("frontpage_trip_destination_title", 'Destination');
$section_desc = rt_get_option("frontpage_trip_destination_desc", '');
$cat_hide_empty = rt_get_option("frontpage_trip_destination_hide_empty", false);

// Get term by product category
$terms = get_terms([
    'taxonomy' => 'trip_destination',
    'hide_empty' => $cat_hide_empty,
]);

// Swiper options
$slider_options = htmlspecialchars(json_encode([
    'slidesPerView' => 1,
    'spaceBetween' => 15,
    'breakpoints' => [
        781 => [
            'slidesPerView' => 3,
            'spaceBetween' => 30,
        ],
    ],
]));
?>
<?php if ($terms && !is_wp_error($terms)) : ?>
    <section id="frontpage-trip-destination" class="frontpage-section has-global-padding">
        <div class="site-container">

            <?php if ($section_title || $section_desc) : ?>
                <div class="rt-block-heading is-layout-constrained text-center">
                    <?php if ($section_title) : ?>
                        <h2 class="rt-block-heading__title"><?php echo esc_html($section_title); ?></h2>
                    <?php endif; ?>

                    <?php if ($section_desc) : ?>
                        <div class="rt-block-heading__desc"><?php echo esc_html($section_desc); ?></div>
                    <?php endif; ?>
                </div>
            <?php endif; ?>

            <div id="trip-destination-carousel" class="rt-swiper is-swiper-pagination-outside" style="--slides: 1; --gap: 15px; --md--slides: 3; --md--gap: 30px;">
                <div class="swiper js-swiper" data-options="<?php echo esc_attr($slider_options) ?>">
                    <div class="swiper-wrapper">
                        <?php foreach ($terms as $term) : ?>
                            <?php if ($term->slug !== 'uncategorized'): ?>

                                <?php $thumbnail_id = get_term_meta($term->term_id, '_thumbnail', true);  ?>

                                <div class="swiper-slide">
                                    <div class="rt-swiper-item">

                                        <div class="wp-block-cover has-link-hover is-position-bottom-center rounded-md trip-destination-<?php echo esc_attr($term->slug); ?>" style="aspect-ratio:16/9; min-height:unset;">
                                            <a href="<?php echo esc_url(get_term_link($term->term_id)) ?>" class="wp-block-cover__background has-background-dim"></a>
                                            <?php echo wp_get_attachment_image($thumbnail_id, rt_get_option('trip_image_size', 'trip_catalog'), '', ['class' => 'wp-block-cover__image-background']) ?>
                                            <div class="wp-block-cover__inner-container text-center">
                                                <h4 class="wp-block-heading has-large-font-size has-link-overlay my-0">
                                                    <a href="<?php echo esc_url(get_term_link($term->term_id)) ?>">
                                                        <?php echo $term->name ?>
                                                    </a>
                                                </h4>
                                                <?php if (rt_get_option("frontpage_trip_destination_term_count", true)): ?>
                                                    <span class="rt-trip-destination-term-count has-x-small-font-size">
                                                        <?php echo wp_sprintf(__('%d Trip', 'jelajah-text'), $term->count) ?>
                                                    </span>
                                                <?php endif ?>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                            <?php endif; ?>
                        <?php endforeach ?>
                    </div>
                    <div class="swiper-pagination mt-20">
                        <span class="swiper-pagination-bullet"></span>
                        <span class="swiper-pagination-bullet"></span>
                        <span class="swiper-pagination-bullet"></span>
                    </div>
                </div>

                <div class="rt-swiper-navigation">
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>

            </div>

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