<?php
/**
 * Блок с тренерами
 */

// Получение полей ACF
$block_id = 'training-block-' . $block['id'];
$class_name = 'training-block';
if (!empty($block['className'])) {
    $class_name .= ' ' . $block['className'];
}
if (!empty($block['align'])) {
    $class_name .= ' align' . $block['align'];
}

if (!function_exists('get_trainings_for_current_language')) {
    function get_trainings_for_current_language()
    {
        $current_lang = pll_current_language();

        $args = array(
            'post_type' => 'training',
            'posts_per_page' => -1,
            'lang' => $current_lang,
            'post_status' => 'publish',
            'sort' => 'menu_order',
            'order' => 'ASC',
        );

        return get_posts($args);
    }
}

$trainings = get_trainings_for_current_language();

$trainings_data = array();
if ($trainings) {
    foreach ($trainings as $training) {
        $training_info = array(
            'post' => $training,
            'name' => '',
            'exp' => '',
            'short_desc' => ''
        );

        if (have_rows('short_info', $training->ID)) {
            while (have_rows('short_info', $training->ID)) {
                the_row();
                $training_info['name'] = get_sub_field('name');
                $training_info['exp'] = get_sub_field('exp');
                $training_info['short_desc'] = get_sub_field('short_desc');
            }
        }

        $trainings_data[] = $training_info;
    }
}

$heading = get_field('heading', $block['id']);

$room = get_current_room();

if ($room === 'fitness') {
    $section_classes = 'radial-gradient';
    $style_attr = '';
} else {
    $section_classes = 'bg-cover bg-center bg-no-repeat';
    $bg_image = get_template_directory_uri() . '/assets/images/hero-bg.png';
    $style_attr = 'style="background-image: url(' . esc_url($bg_image) . ')"';
}

?>

<section id="<?php echo esc_attr($block_id); ?>"
         class="max-[768px]:py-[45px] py-[96px] <?php echo esc_attr($section_classes); ?>" <?php echo $style_attr; ?>>
    <div class="container mx-auto">
        <?php if ($trainings_data): ?>
            <?php if (is_front_page()): ?>
                <div class="flex gap-[16px] justify-between">
                    <h2 class="dark:max-w-[860px] max-[1050px]:text-[36px] max-[768px]:max-[768px]:text-[24px] dark:text-[#F8F8F8] text-[40px] leading-[120%] font-[500] max-w-[760px] w-full">
                        <?php
                        echo $heading;
                        ?>
                    </h2>
                    <a class="max-[1050px]:hidden !no-underline dark:text-[#F8F8F8] dark:max-w-[860px] dark:border-[#574348] flex mt-auto gap-[8px] border border-[#E0E0E0] hover:[&>svg]:translate-x-[6px] rounded-[90px] px-[32px] h-[59px] flex items-center justify-center text-[18px] font-[600] leading-[195%] text-[#222]"
                       href="<?php echo get_post_type_archive_link('training'); ?>">
                        Все тренировки


                        <svg class="transition fill-[#222222] dark:fill-[#F8F8F8]" width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6.4876 2.17896C6.73011 1.94034 7.12396 1.94035 7.36649 2.17896L11.3181 6.06809C11.5606 6.30671 11.5606 6.69329 11.3181 6.93191L7.36649 10.821C7.12396 11.0596 6.73011 11.0597 6.4876 10.821C6.24512 10.5824 6.24511 10.1949 6.4876 9.95626L9.38032 7.11093H1.1209C0.777923 7.11093 0.5 6.83747 0.5 6.5C0.5 6.16253 0.777923 5.88907 1.1209 5.88907H9.38032L6.4876 3.04374C6.24511 2.80512 6.24512 2.41758 6.4876 2.17896Z"
                                  />
                        </svg>
                    </a>
                </div>
            <?php endif; ?>
            <div class="max-[768px]:mt-[24px] mt-[40px] flex flex-col">

                <div class="swiper max-w-full rounded-[20px] rounded-b-[0]" id="<?php echo esc_attr($block_id); ?>-swiper">
                    <div class="swiper-wrapper">
                        <?php foreach ($trainings_data as $training_data): ?>
                            <?php $training = $training_data['post']; ?>
                            <div class="max-[768px]:h-[510px] h-[540px] max-w-[312px] swiper-slide">
                                <div class="flex flex-col bg-[#f8f8f8] relative max-[768px]:h-[510px] h-[540px] rounded-[20px] overflow-hidden shadow-[0_2px_32px_0_rgba(16,_15,_15,_0.03)]">
                                    <?php $photo_images = get_field('photo', $training->ID); ?>
                                    <?php if ($photo_images && !empty($photo_images[0])): ?>
                                        <div class="overflow-hidden min-h-[260px]">
                                            <img src="<?php echo esc_url($photo_images[0]['url']); ?>"
                                                 alt="<?php echo esc_attr($photo_images[0]['alt']); ?>"
                                                 loading="lazy"
                                                 class="w-full h-full object-cover"/>
                                        </div>
                                    <?php endif; ?>
                                    <div class="max-[768px]:gap-[12px] flex flex-col gap-[24px] h-full p-[24px]">
                                        <?php $name = $training_data['name']; ?>
                                        <?php if ($name): ?>
                                            <div class="max-[768px]:text-[20px] text-[24px] leading-[125%] font-[600]">
                                                <?php echo esc_html($name); ?>
                                            </div>
                                        <?php endif; ?>

                                        <?php $short_desc = $training_data['short_desc']; ?>
                                        <?php if ($short_desc): ?>
                                            <div class="text-[16px] leading-[145%] font-[500] text-[#222]">
                                                <?php echo wp_kses_post($short_desc); ?>
                                            </div>
                                        <?php endif; ?>
                                        <a href="<?php echo get_permalink($training->ID); ?>" class="max-[768px]:h-[59px] !no-underline mt-auto h-[59px] flex grey-gradient-hover w-full rounded-[90px] px-[12px] text-[18px] font-[600] leading-[195%] text-[#f8f8f8] items-center justify-center">
                                            Перейти
                                        </a>
                                    </div>
                                </div>


                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>

                <div class="swiper-scrollbar [&_.swiper-scrollbar-drag]:dark:!bg-[#989597] !static !mx-auto !cursor-grab container mt-[44px] !w-full !p-0" id="swiper-scrollbar-<?php echo esc_attr($block_id); ?>"></div>
            </div>
        <?php endif; ?>
        <a class="hidden max-[768px]:flex !no-underline dark:text-[#F8F8F8] dark:max-w-[860px] dark:border-[#574348] flex mt-[24px] gap-[8px] border border-[#E0E0E0] hover:[&>svg]:translate-x-[6px] rounded-[90px] px-[32px] h-[59px] flex items-center justify-center text-[18px] font-[600] leading-[195%] text-[#222]"
           href="<?php echo get_post_type_archive_link('training'); ?>">
            Все тренировки


            <svg class="transition fill-[#222222] dark:fill-[#F8F8F8]" width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.4876 2.17896C6.73011 1.94034 7.12396 1.94035 7.36649 2.17896L11.3181 6.06809C11.5606 6.30671 11.5606 6.69329 11.3181 6.93191L7.36649 10.821C7.12396 11.0596 6.73011 11.0597 6.4876 10.821C6.24512 10.5824 6.24511 10.1949 6.4876 9.95626L9.38032 7.11093H1.1209C0.777923 7.11093 0.5 6.83747 0.5 6.5C0.5 6.16253 0.777923 5.88907 1.1209 5.88907H9.38032L6.4876 3.04374C6.24511 2.80512 6.24512 2.41758 6.4876 2.17896Z"
                />
            </svg>
        </a>
    </div>


</section>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const swiperContainer = document.querySelector('#<?php echo esc_attr($block_id); ?>-swiper');

        if (swiperContainer && typeof Swiper !== 'undefined') {
            new Swiper('#<?php echo esc_attr($block_id); ?>-swiper', {
                slidesPerView: 'auto',
                spaceBetween: 24,
                grabCursor: true,
                freeMode: true,
                navigation: {
                    nextEl: '.custom-next-<?php echo esc_attr($block_id); ?>',
                    prevEl: '.custom-prev-<?php echo esc_attr($block_id); ?>',
                },
                scrollbar: {
                    el: `#swiper-scrollbar-<?php echo esc_attr($block_id); ?>`,
                    draggable: true,
                },
            });
        }
    });
</script>