<?php

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

$classes = 'block-reviews-block';
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');
$slider_video_reviews = get_field('slider_video_reviews');
$stars = get_field('stars');
?>

<div class="reviews-block container mx-auto mt-[24px]"
     id="<?php echo esc_attr( $id ); ?>"
     data-reviews-id="<?php echo esc_attr( $id ); ?>">
    <div>
        <?php if ($heading) : ?>
            <h2 class="text-[32px] font-bold mt-[24px]"><?php echo esc_html($heading); ?></h2>
        <?php endif; ?>

        <div class="flex gap-[10px] mt-[24px]">
            <?php if ($slider_tabs && !empty($slider_tabs['slider_tab'])) : ?>
                <?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; ?>
            <?php endif; ?>

            <?php if ($slider_video_reviews) : ?>
                <button class="tab-button px-[24px] py-[12px] border rounded-[25px] cursor-pointer transition-all"
                        data-tab="video">
                    Видеоотзывы
                </button>
            <?php endif; ?>
        </div>

        <div class="mt-[24px] flex gap-[20px]">
            <div class="flex gap-[5px] w-full items-center justify-center">
                <svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19.5 0L25.7658 11.8759L38.9967 14.1652L29.6383 23.7941L31.5496 37.0848L19.5 31.16L7.4504 37.0848L9.36174 23.7941L0.00334167 14.1652L13.2342 11.8759L19.5 0Z" fill="#565656"/>
                </svg>
                <svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19.5 0L25.7658 11.8759L38.9967 14.1652L29.6383 23.7941L31.5496 37.0848L19.5 31.16L7.4504 37.0848L9.36174 23.7941L0.00334167 14.1652L13.2342 11.8759L19.5 0Z" fill="#565656"/>
                </svg>
                <svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19.5 0L25.7658 11.8759L38.9967 14.1652L29.6383 23.7941L31.5496 37.0848L19.5 31.16L7.4504 37.0848L9.36174 23.7941L0.00334167 14.1652L13.2342 11.8759L19.5 0Z" fill="#565656"/>
                </svg>
                <svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19.5 0L25.7658 11.8759L38.9967 14.1652L29.6383 23.7941L31.5496 37.0848L19.5 31.16L7.4504 37.0848L9.36174 23.7941L0.00334167 14.1652L13.2342 11.8759L19.5 0Z" fill="#565656"/>
                </svg>
                <svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19.5 0L25.7658 11.8759L38.9967 14.1652L29.6383 23.7941L31.5496 37.0848L19.5 31.16L7.4504 37.0848L9.36174 23.7941L0.00334167 14.1652L13.2342 11.8759L19.5 0Z" fill="#565656"/>
                </svg>
                <div>
                    Оценок:  
                    <?php
                    echo $stars;
                    ?>
                </div>
            </div>


        </div>
    </div>

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

                <?php if (!empty($tab['slider_images'])) : ?>
                    <div class="swiper reviews-swiper" id="swiper-<?php echo $tab_index; ?>">
                        <div class="swiper-wrapper">
                            <?php foreach ($tab['slider_images'] as $image) : ?>
                                <div class="swiper-slide max-w-[449px] cursor-pointer">
                                    <a href="<?php echo esc_url($image['url']); ?>"
                                       class="glightbox block w-full h-full relative"
                                       data-gallery="reviews-<?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-contain">
                                    </a>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                <?php endif; ?>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>

    <?php if ($slider_video_reviews) : ?>
        <div class="tab-content mt-[24px] hidden" id="tab-video">
            <div class="swiper reviews-swiper" id="swiper-video">
                <div class="swiper-wrapper">
                    <?php foreach ($slider_video_reviews as $video) : ?>
                        <?php if (!empty($video['slider_video_review'])) : ?>
                            <div class="swiper-slide max-w-[449px] cursor-pointer">
                                <a href="<?php echo esc_url($video['slider_video_review']['url']); ?>"
                                   class="glightbox block w-full h-full relative"
                                   data-gallery="reviews-video"
                                   data-type="video">
                                    <div class="w-full h-[200px] relative overflow-hidden rounded-lg">
                                        <?php if (!empty($video['slider_video_prereview'])) : ?>
                                            <div class="w-full h-full bg-[#f3f4f6] flex items-center justify-center">
                                                <div class="text-center">
                                                    <div class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] w-[60px] h-[60px] bg-white bg-opacity-90 rounded-full flex items-center justify-center mx-auto mb-[8px]">
                                                        <svg class="w-[24px] h-[24px]" fill="currentColor" viewBox="0 0 20 20">
                                                            <path d="M8 5v10l8-5-8-5z"/>
                                                        </svg>
                                                    </div>
                                                    <img src="<?php echo esc_url($video['slider_video_prereview']['url']); ?>"
                                                         alt="<?php echo esc_attr($video['slider_video_prereview']['alt'] ?: 'Превью видеоотзыва'); ?>"
                                                         class="w-full h-full object-cover">
                                                </div>
                                            </div>
                                        <?php else : ?>

                                            <div class="w-full h-full bg-[#f3f4f6] flex justify-center">
                                                <div class="text-center">
                                                    <div class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] w-[60px] h-[60px] bg-white bg-opacity-90 rounded-full flex items-center justify-center mx-auto mb-[8px]">
                                                        <svg class="w-[24px] h-[24px]" fill="currentColor" viewBox="0 0 20 20">
                                                            <path d="M8 5v10l8-5-8-5z"/>
                                                        </svg>
                                                    </div>
                                                    <p class="text-[14px] text-[#6b7280]">Видеоотзыв</p>
                                                </div>
                                            </div>
                                        <?php endif; ?>

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