<?php
/**
 * Заглавный блок с ACF полями
 */

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

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

$slider_data = get_field('slider') ?: [];
$text_data = get_field('text') ?: [];


$heading = $text_data['heading'] ?? '';
$heading_text = $text_data['heading_text'] ?? '';
$address = $text_data['adress'] ?? '';
$address_extra = $text_data['adress_extra'] ?? '';

$slides = [];
if (!empty($slider_data) && is_array($slider_data)) {
    foreach ($slider_data as $index => $slide) {
        $image_url = '';
        if (!empty($slide['image']) && is_array($slide['image'])) {
            $image_url = $slide['image']['url'] ?? '';
        }

        $slides[] = [
            'number' => sprintf('%02d', $index + 1),
            'title' => $slide['text'] ?? '',
            'img' => $image_url
        ];
    }
}

$room = get_current_room();

if ($room === 'fitness') {
    $section_classes = 'radient-bg';
    $style_attr = '';
} else {
    $section_classes = 'bg-cover bg-center bg-no-repeat';
    $bg_image = 'data:image/webp;base64, ';

    $style_attr = 'style="background-image: url(' . esc_attr($bg_image) . ')"';
}

?>

<section
        class="pt-[161px] max-[768px]:pt-[141px] dark:text-[#f8f8f8] hero-block pb-[30px] <?php echo esc_attr($section_classes); ?>" <?php echo $style_attr; ?>>

    <div class="container mx-auto mt-[14px]">
        <div class="max-[1200px]:flex-col max-[1200px]:items-center flex justify-between gap-[24px] ">
            <div class="max-[768px]:mt-[14px] flex flex-col w-full mt-[26px]">
                <?php display_icon(get_current_room() === 'gym' ? 'dark_logo_name' : 'light_logo_name'); ?>

                <h1 class=" font-[500] leading-[110%] max-[1330px]:text-[36px] max-[768px]:text-[24px] text-[48px] mt-[20px]">
                    <?php if (!empty($heading)): ?>
                        <?php echo wp_kses_post($heading); ?>
                    <?php endif; ?>
                </h1>

                <p class="max-[768px]:text-[16px] max-[768px]:mt-[16px] text-[24px] font-[500] mt-[20px]">
                    <?php echo !empty($heading_text) ? esc_html($heading_text) : 'Зал для тех, кто ценит комфорт и сервис'; ?>
                </p>

                <div class="max-[768px]:mt-[24px] max-[768px]:flex-col flex gap-[12px] mt-[40px]">
                    <button class="group transition [&>_img]:transition [&>_img]:group-hover:rotate-[45deg] max-[768px]:h-[61px] max-[768px]:max-w-[327px] !no-underline text-[#f8f8f8] text-[18px] font-[600] justify-center h-[75px] w-full max-w-[281px] rounded-[90px] flex items-center gap-[12px] red-gradient-hover cursor-pointer border-none outline-none"
                            type="button"
                            data-scroll-to="trial-training">
                        Пробная тренировка
                        <?php display_icon('button_arrow_up') ?>
                    </button>

                    <button class="max-[768px]:h-[61px] max-[768px]:max-w-[327px] !no-underline text-[#f8f8f8] text-[18px] font-[600] justify-center h-[75px] w-full max-w-[210px] rounded-[90px] flex items-center gap-[12px] grey-gradient-hover cursor-pointer border-none outline-none"
                            type="button"
                            data-scroll-to="prices">
                        Смотреть цены
                    </button>
                </div>

                <div class="max-[768px]:[&>_img]:w-[20px] max-[768px]:[&>_img]:h-[20px] max-[768px]:mt-[24px] flex items-center gap-[12px] mt-[50px]">
                    <?php display_icon('location') ?>
                    <div class="max-[768px]:text-[14px]">
                        <p>
                            <b><?php echo !empty($address) ? esc_html($address) : 'Красноармейская, 120 — 2ой этаж'; ?></b>
                        </p>
                        <p class="dark:text-[#6c6b6b]">
                            <?php echo !empty($address_extra) ? esc_html($address_extra) : 'Главный вход со стороны ул. Косарева'; ?>
                        </p>
                    </div>
                </div>
            </div>

            <div class="max-[768px]:h-[290px] max-[768px]:max-w-full w-full max-w-[648px] h-[575px] relative">
                <div class="max-[768px]:rounded-[16px] max-[768px]:w-auto swiper inverted-radius rounded-[25px] w-full h-full">
                    <div class="swiper-wrapper">
                        <?php foreach ($slides as $index => $slide): ?>
                            <div class="swiper-slide [&>_img]:max-w-none">
                                <?php if (!empty($slide['img'])): ?>
                                    <img class="max-[768px]:w-full max-[768px]:h-full object-cover" loading="lazy"
                                         src="<?php echo esc_url($slide['img']); ?>"
                                         alt="<?php echo esc_attr($slide['title']); ?>">
                                <?php endif; ?>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>

                <div class="max-[768px]:bottom-[8px] max-[768px]:left-[8px] absolute z-[1] rounded-[25px] rounded-bl-none rounded-br-none rounded-tl-none flex items-center gap-[4px] left-0 bottom-0">
                    <button class="group custom-prev cursor-pointer">
                        <?php display_icon('slider-prev') ?>
                    </button>
                    <button class="group custom-next cursor-pointer">
                        <?php display_icon('slider-next') ?>
                    </button>
                </div>
            </div>
        </div>


        <div class="max-[768px]:hidden flex gap-[24px] mt-[44px]">
            <?php foreach ($slides as $index => $slide): ?>
                <div class="!max-h-[21px] pagination-item flex-1 cursor-pointer transition-all"
                     data-active="<?php echo $index === 0 ? 'true' : 'false' ?>"
                     data-slide="<?php echo $index ?>">
                    <div class="pagination-line h-[2px] rounded-[30px] transition-colors"></div>
                    <div class="slide-text opacity-0 mt-[10px] text-[14px] text-[#222] font-[600] transition-opacity">
                        <div class="w-fit dark:bg-gradient-to-r dark:from-[rgba(248,248,248,0.55)] dark:to-white dark:bg-clip-text dark:text-transparent">
                            <span class="slide-number"><?php echo esc_html($slide['number']); ?>.</span>
                            <span class="slide-title"><?php echo esc_html($slide['title']); ?></span>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<?php if (is_admin()): ?>
    <script>


        function initAdminSwiper() {
            const selectors = [
                '#hero-<?php echo $block['id']; ?> .swiper',
                '[data-block="<?php echo $block['id']; ?>"] .swiper',
                '.hero-block[data-slides] .swiper',
                '.swiper'
            ];

            let swiperContainer = null;

            for (let selector of selectors) {
                swiperContainer = document.querySelector(selector);
                if (swiperContainer) break;
            }


            try {
                const swiper = new Swiper(swiperContainer, {
                    slidesPerView: 1,
                    loop: true,
                    autoplay: {
                        delay: 4000,
                        disableOnInteraction: false,
                    },
                    navigation: {
                        nextEl: '.custom-next',
                        prevEl: '.custom-prev',
                    }
                });
            } catch (error) {

            }
        }


        if (typeof wp !== 'undefined' && wp.domReady) {
            wp.domReady(function () {
                setTimeout(initAdminSwiper, 300);
            });
        }
    </script>
<?php endif; ?>
