<?php

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

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

?>

<section id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($classes); ?>">
    <div class="max-[768px]:py-[40px] container mx-auto py-[90px] <?php if (!is_front_page()) echo 'p-0 pt-[90px] max-[768px]:pt-[40px]' ?>">

        <?php if (get_field('heading')) : ?>
            <h2 class="max-[768px]:mb-[24px] max-[1050px]:text-[36px] max-[768px]:max-[768px]:text-[24px] text-[48px] font-[500] text-[#1f2937] mb-[40px]">
                <?php echo get_field('heading'); ?>
            </h2>
        <?php endif; ?>

        <?php if (have_rows('tiles_group')) : ?>
            <?php while (have_rows('tiles_group')) :
                the_row(); ?>

                <div class="max-[768px]:flex-col max-[768px]:gap-[12px] flex  max-[768px]:gap-[12px] gap-[24px]">

                    <!-- Первая колонка -->
                    <div class="max-[768px]:max-w-full flex flex-col max-[768px]:gap-[12px] gap-[24px] w-full max-w-[424px]">

                        <!-- First Tile - Текстовый блок -->
                        <?php if (have_rows('first_tile')) : ?>
                            <?php while (have_rows('first_tile')) : the_row(); ?>
                                <div class="max-[768px]:pt-0 max-[768px]:mb-[12px] <?php echo is_front_page() ? 'max-[768px]:h-auto h-[298px]' : 'max-[768px]:h-auto h-[383px]'; ?> pt-[24px] overflow-hidden">
                                    <div class="flex <?php echo is_front_page() ? 'flex-col justify-start' : 'flex-col-reverse justify-end'; ?> max-[768px]:[&_img]:w-[196px] gap-[16px] h-full [&_img]:w-[294px]">
                                        <?php if (get_sub_field('heading')) : ?>
                                            <?php display_icon(get_current_room() === 'gym' ? 'dark_logo_name_gym' : 'light_logo_name'); ?>
                                            <h3 class="max-[768px]:text-[24px] text-[32px] font-[500] text-[#222] leading-[115%]">
                                        <span>
                                            <?php echo esc_html(get_sub_field('heading')); ?>
                                        </span>
                                            </h3>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            <?php endwhile; ?>
                        <?php endif; ?>

                        <!-- Second Tile - Блок с картинкой -->
                        <?php if (have_rows('second_tile')) : ?>
                            <?php while (have_rows('second_tile')) : the_row(); ?>

                                <div class="max-[768px]:w-full relative <?php echo is_front_page() ? 'max-[768px]:h-[180px] h-[298px]' : 'max-[768px]:h-auto h-[383px]'; ?> rounded-[12px] p-[24px] overflow-hidden bg-[linear-gradient(90deg,_#9d9994_39.42%,_#ccc9c4_92.9%)] dark:bg-[linear-gradient(90deg,_#2b2c35_53.4%,_#4f5870_100%)]
">
                                    <?php $background = get_sub_field('background'); ?>
                                    <?php if ($background) : ?>
                                        <img class="max-[550px]:max-w-[240px] max-[768px]:max-w-[240px] absolute right-0 top-0 w-full h-full" alt="Фон блока"
                                             src="<?php echo esc_url($background['url']); ?>">
                                    <?php else :{
                                        ?>
                                        <div class="absolute flex justify-end dark:bg-[linear-gradient(90deg,_#2b2c35_53.4%,_#4f5870_100%)] bg-[linear-gradient(90deg,_#9d9994_39.42%,_#ccc9c4_92.9%)] right-0 top-0 w-full h-full">
                                            <svg width="169" height="136" viewBox="0 0 169 136" fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <g opacity="0.2" clip-path="url(#clip0_2281_7020)">
                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                          d="M293 -31C238.959 102.351 121.758 31.3136 29.9512 63.7166C56.6471 -11.0597 104.829 -24.7686 158.872 -25.3918C199.24 -26.0149 255.888 -21.653 293 -31Z"
                                                          fill="#F9F9F9"/>
                                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                                          d="M201.195 65.5859C159.523 167.78 70.3205 111.074 0 136C36.463 33.806 119.805 86.1494 201.195 65.5859Z"
                                                          fill="#F9F9F9"/>
                                                </g>
                                                <defs>
                                                    <clipPath id="clip0_2281_7020">
                                                        <rect width="293" height="167" fill="white"
                                                              transform="translate(0 -31)"/>
                                                    </clipPath>
                                                </defs>
                                            </svg>
                                        </div>
                                        <?php
                                    } ?>

                                    <?php endif; ?>
                                    <div class="relative flex flex-col <?php echo is_front_page() ? 'justify-start' : 'justify-end'; ?> h-full z-10">
                                        <?php if (get_sub_field('text')) : ?>

                                            <?php if (get_sub_field('heading')) : ?>
                                                <h3 class="max-[768px]:text-[20px] font-[600] text-[42px] text-[#fff] leading-[115%]">
                                                    <?php echo esc_html(get_sub_field('heading')); ?>
                                                </h3>
                                            <?php endif; ?>

                                            <?php if (get_sub_field('underheading')) : ?>
                                                <p class="max-[768px]:font-[600] max-[768px]:text-[20px] text-[24px] font-[700] leading-[140%] text-[#fff]"><?php echo esc_html(get_sub_field('underheading')); ?></p>
                                            <?php endif; ?>

                                            <div class="<?php echo is_front_page() ? 'max-[768px]:max-w-[180px] max-w-[245px]' : 'max-w-full'; ?> max-[768px]:mt-0 max-[768px]:font-[500] w-full max-[1100px]:text-[16px] text-[20px] font-[600] leading-[115%] text-[#fff] mt-[24px]">
                                                <?php echo wp_kses_post(get_sub_field('text')); ?>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            <?php endwhile; ?>
                        <?php endif; ?>

                    </div>

                    <!-- Вторая колонка -->
                    <div class="flex flex-col  max-[768px]:gap-[12px] gap-[24px] w-full max-w-[872px]">

                        <!-- Два обычных блока сверху -->
                        <div class="max-[550px]:grid-cols-1 grid grid-cols-2  max-[768px]:gap-[12px] gap-[24px]">

                            <!-- Third Tile -->
                            <?php if (have_rows('third_tile')) : ?>
                                <?php while (have_rows('third_tile')) : the_row(); ?>
                                    <div class="relative <?php echo is_front_page() ? 'max-[768px]:h-[180px] h-[298px]' : 'max-[768px]:h-auto h-[383px]'; ?> rounded-[12px] p-[24px] overflow-hidden"
                                        <?php
                                        $background = get_sub_field('background');
                                        if ($background) : ?>
                                            style="background-image: url('<?php echo esc_url($background['url']); ?>'); background-size: cover; background-position: center;"
                                        <?php endif; ?>>
                                        <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                                        <div class="relative flex flex-col  h-full justify-end z-10">
                                            <?php if (get_sub_field('heading')) : ?>
                                                <h3 class="max-[768px]:font-[600] max-[768px]:text-[20px] font-[700] text-[24px] text-[#fff] leading-[125%]">
                                                    <?php echo esc_html(get_sub_field('heading')); ?>
                                                </h3>
                                            <?php endif; ?>
                                            <?php if (get_sub_field('text')) : ?>
                                                <div class="max-[1100px]:text-[16px] text-[20px] font-[600] leading-[115%] text-[#fff] mt-[24px] w-full <?php echo is_front_page() ? 'max-w-[330px]' : 'max-w-full' ?>"><?php echo wp_kses_post(get_sub_field('text')); ?></div>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                <?php endwhile; ?>
                            <?php endif; ?>

                            <!-- Fourth Tile -->
                            <?php if (have_rows('fourth_tile')) : ?>
                                <?php while (have_rows('fourth_tile')) : the_row(); ?>
                                    <div class="relative <?php echo is_front_page() ? 'max-[768px]:h-[180px] h-[298px]' : 'max-[768px]:h-auto h-[383px]'; ?> rounded-[12px] p-[24px] overflow-hidden"
                                        <?php
                                        $background = get_sub_field('background');
                                        if ($background) : ?>
                                            style="background-image: url('<?php echo esc_url($background['url']); ?>'); background-size: cover; background-position: center;"
                                        <?php endif; ?>>
                                        <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                                        <div class="relative flex flex-col  h-full justify-end z-10">
                                            <?php if (get_sub_field('heading')) : ?>
                                                <h3 class="max-[768px]:font-[600] max-[768px]:text-[20px] font-[700] text-[24px] text-[#fff] leading-[125%]">
                                                    <?php echo esc_html(get_sub_field('heading')); ?>
                                                </h3>
                                            <?php endif; ?>
                                            <?php if (get_sub_field('underheading')) : ?>
                                                <p class="max-[768px]:font-[600] max-[768px]:text-[20px] text-[24px] font-[700] leading-[140%] text-[#fff]"><?php echo esc_html(get_sub_field('underheading')); ?></p>
                                            <?php endif; ?>

                                            <?php if (get_sub_field('text')) : ?>
                                                <div class="max-[1100px]:text-[16px] text-[20px] font-[600] leading-[115%] text-[#fff] mt-[24px] w-full <?php echo is_front_page() ? 'max-w-[330px]' : 'max-w-full' ?>"><?php echo wp_kses_post(get_sub_field('text')); ?></div>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                <?php endwhile; ?>
                            <?php endif; ?>

                        </div>

                        <!-- Fifth Tile - Широкий блок снизу -->
                        <?php if (have_rows('fifth_tile')) : ?>
                            <?php while (have_rows('fifth_tile')) : the_row(); ?>
                                <div class="relative <?php echo is_front_page() ? 'max-[768px]:h-[180px] h-[298px]' : 'max-[768px]:h-auto h-[383px]'; ?> rounded-[12px] p-[24px] overflow-hidden"
                                    <?php
                                    $background = get_sub_field('background');
                                    if ($background) : ?>
                                        style="background-image: url('<?php echo esc_url($background['url']); ?>'); background-size: cover; background-position: center;"
                                    <?php endif; ?>>
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>

                                    <div class="relative flex flex-col  h-full justify-end z-10">
                                        <?php if (get_sub_field('heading')) : ?>
                                            <h3 class="max-[768px]:font-[600] max-[768px]:text-[20px] font-[600] text-[42px] text-[#fff] leading-[115%]">
                                                <?php echo esc_html(get_sub_field('heading')); ?>
                                            </h3>
                                        <?php endif; ?>

                                        <?php if (get_sub_field('underheading')) : ?>
                                            <p class="max-[768px]:font-[600] max-[768px]:text-[20px] text-[24px] font-[700] leading-[140%] text-[#fff]"><?php echo esc_html(get_sub_field('underheading')); ?></p>
                                        <?php endif; ?>
                                        <?php if (get_sub_field('text')) : ?>
                                            <div class="max-[1100px]:text-[16px] text-[20px] font-[600] leading-[115%] text-[#fff] mt-[24px] w-full <?php echo is_front_page() ? 'max-w-[330px]' : 'max-w-[400px]' ?>"><?php echo wp_kses_post(get_sub_field('text')); ?></div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            <?php endwhile; ?>
                        <?php endif; ?>

                    </div>

                </div>

            <?php endwhile; ?>
        <?php endif; ?>

    </div>
</section>

<script>
    function reorderSecondTile() {
        if (window.innerWidth <= 767) {
            const tilesGroups = document.querySelectorAll('.block-masonry-tiles-block .flex.max-\\[768px\\]\\:flex-col');

            tilesGroups.forEach(group => {
                const firstColumn = group.querySelector('.max-w-\\[424px\\]');
                const secondColumn = group.querySelector('.max-w-\\[872px\\]');

                if (firstColumn && secondColumn) {
                    const secondTile = firstColumn.children[1];

                    if (secondTile) {
                        secondColumn.appendChild(secondTile);
                    }
                }
            });
        } else {
            restoreOriginalOrder();
        }
    }

    function restoreOriginalOrder() {
        const tilesGroups = document.querySelectorAll('.block-masonry-tiles-block .flex.max-\\[768px\\]\\:flex-col');

        tilesGroups.forEach(group => {
            const firstColumn = group.querySelector('.max-w-\\[424px\\]');
            const secondColumn = group.querySelector('.max-w-\\[872px\\]');

            if (firstColumn && secondColumn) {
                const secondTileInSecondColumn = secondColumn.querySelector('[class*="bg-\\[linear-gradient"]');

                if (secondTileInSecondColumn && firstColumn.children.length === 1) {
                    firstColumn.appendChild(secondTileInSecondColumn);
                }
            }
        });
    }

    document.addEventListener('DOMContentLoaded', reorderSecondTile);

    window.addEventListener('resize', reorderSecondTile);

    if (window.ResizeObserver) {
        const resizeObserver = new ResizeObserver(() => {
            reorderSecondTile();
        });

        resizeObserver.observe(document.body);
    }
</script>