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

$block_id = 'club-cards-' . $block['id'];
$class_name = 'club-cards-block';
if (!empty($block['className'])) {
    $class_name .= ' ' . $block['className'];
}
if (!empty($block['align'])) {
    $class_name .= ' align' . $block['align'];
}

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

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

        return get_posts($args);
    }
}

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

$room = get_current_room();

if ($room === 'fitness') {

} 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) . ')"';
}

if (!function_exists('render_club_card')){
    function render_club_card($card) {
        $card_attribute = get_field('attr', $card->ID);
        $card_image = get_field('image', $card->ID);
        $card_heading = get_field('heading', $card->ID);
        $card_description = get_field('description', $card->ID);
        $card_price = get_field('price', $card->ID);

        $card_prices = [];
        if (have_rows('card_prices', $card->ID)) {
            while (have_rows('card_prices', $card->ID)) {
                the_row();
                $periods = ['1_month', '3_month', '6_month', '12_month'];
                foreach ($periods as $period) {
                    if (have_rows($period)) {
                        while (have_rows($period)) {
                            the_row();
                            $card_prices[$period] = [
                                'full' => get_sub_field('full'),
                                'day' => get_sub_field('day')
                            ];
                        }
                    }
                }
            }
        }

        $card_time = [];
        if (have_rows('time', $card->ID)) {
            while (have_rows('time', $card->ID)) {
                the_row();
                $card_time[] = [
                    'normal_days' => get_sub_field('normal_days'),
                    'vacation_days' => get_sub_field('vacation_days')
                ];
            }
        }
        ?>

        <div class="border border-transparent hover:border-[#e21e24] transition max-[1300px]:h-auto max-[1050px]:p-[20px] bg-[#ffffff] rounded-[12px] p-[28px] pb-[16px] h-[258px] shadow-[0_2px_32px_0_rgba(16,_15,_15,_0.03)]">
            <div class="flex flex-col h-full relative">
                <?php if ($card_attribute): ?>
                    <div class="max-[768px]:top-[-29px] absolute top-[-14px] right-[-14px] px-[12px] py-[4px] rounded-[32px] bg-[linear-gradient(90deg,_#ffd65a_39.42%,_#ffe595_92.9%)]">
                    <span class="font-[600] text-[14px] leading-[125%]">
                        <?php echo($card_attribute); ?>
                    </span>
                    </div>
                <?php endif; ?>

                <div class="flex gap-[16px] items-center">
                    <?php if ($card_image): ?>
                        <div class="overflow-hidden w-[32px] h-[32px]">
                            <img src="<?php echo esc_url($card_image['url']); ?>"
                                 alt="<?php echo esc_attr($card_image['alt']); ?>"
                                 class="w-full h-full object-cover"/>
                        </div>
                    <?php endif; ?>

                    <?php if ($card_heading): ?>
                        <h3 class="max-[768px]:text-[20px] text-[24px] font-[600] leading-[125%]">
                            <?php echo esc_html($card_heading); ?>
                        </h3>
                    <?php endif; ?>
                </div>

                <?php if ($card_description): ?>
                    <div class="max-[768px]:min-h-[70px] min-h-[47px] text-[16px] leading-[145%] font-[500] mt-[16px]">
                        <?php echo wp_kses_post($card_description); ?>
                    </div>
                <?php endif; ?>

                <div class="justify-end flex-row-reverse max-[1100px]:mt-[16px] flex mt-auto pt-[16px] border-t border-t-[#f1f1f1] items-center gap-[16px] flex-wrap">
                    <?php if ($card_price): ?>
                        <div class="flex items-center text-[20px] font-[600] leading-[125%]">
                            от 
                            <div class="rounded-[32px] px-[12px] h-[36px] flex items-center bg-[linear-gradient(90deg,_rgba(43,_44,_53,_0.06)_39.42%,_rgba(110,_121,_150,_0.06)_92.9%)]">
                            <span class="max-[768px]:text-[20px] bg-[linear-gradient(90deg,_#2b2c35_67.31%,_#4f5870_92.9%)] text-[24px] flex items-center justify-center font-[600] bg-clip-text text-transparent">
                                <?php echo esc_html($card_price); ?> ₽
                            </span>
                            </div>
                             в мес.
                        </div>
                    <?php endif; ?>

                    <div class="max-[1300px]:w-full">
                        <button
                                data-modal="club-card"
                                data-card-id="<?php echo $card->ID; ?>"
                                data-card-title="<?php echo esc_attr($card_heading); ?>"
                                data-card-prices='<?php echo esc_attr(json_encode($card_prices)); ?>'
                                data-card-time='<?php echo esc_attr(json_encode($card_time));?>'
                                data-card-attr='<?php echo esc_attr($card_attribute); ?>'
                                class="max-[1300px]:w-full max-[768px]:h-[53px] max-[768px]:text-[16px] red-gradient-hover cursor-pointer flex text-[#f8f8f8] text-[18px] text-[#fff] font-[600] justify-center h-[59px] w-[160px] rounded-[90px] flex items-center">
                            <?php echo 'Оформить' ?>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <?php
    }
}


?>

<section data-scroll-section="prices" id="<?php echo esc_attr($block_id); ?>"
         class="max-[768px]:py-[45px] py-[90px] <?php echo esc_attr($section_classes); ?>" <?php echo $style_attr; ?>>
    <div class="container mx-auto">
        <?php if ($cards): ?>
            <!-- Заголовок для главной страницы -->
            <?php if (is_front_page() && $heading): ?>
                <div class="max-[1100px]:mt-0 flex flex-col gap-[16px] max-[768px]:[&>img]:w-[196px] mt-[28px] ">
                    <h2 class="max-[1050px]:text-[36px] max-[768px]:text-[24px] dark:text-[#fff] text-[40px] leading-[120%] font-[500]">
                        <?php echo esc_html($heading); ?>
                    </h2>
                    <?php display_icon(get_current_room() === 'gym' ? 'dark_logo_name' : 'light_logo_name'); ?>
                </div>
            <?php endif; ?>


            <div class="min-[768px]:block hidden mt-[24px]">
                <div class="max-[1100px]:grid-cols-2 grid grid-cols-3 gap-[24px]">
                    <?php foreach ($cards as $card): ?>
                        <?php render_club_card($card); ?>
                    <?php endforeach; ?>
                </div>
            </div>


            <div class="max-[767px]:block hidden mt-[24px] px-[24px] mx-[-24px]">
                <div class="!mx-[-24px] !px-[24px] swiper club-cards-swiper max-[768px]:!pt-[8px] max-[768px]:!mt-[-8px]">
                    <div class="swiper-wrapper">
                        <?php foreach ($cards as $card): ?>
                            <div class="swiper-slide">
                                <?php render_club_card($card); ?>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    <div class="swiper-scrollbar [&_.swiper-scrollbar-drag]:dark:!bg-[#989597] !static !mx-auto !cursor-grab container mt-[24px] !w-full !p-0"></div>

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

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const clubCardsSwiper = new Swiper('.club-cards-swiper', {
            slidesPerView: 1.2,
            spaceBetween: 16,
            grabCursor: true,
            breakpoints: {
                480: {
                    slidesPerView: 1.3,
                },
                640: {
                    slidesPerView: 1.5,
                }
            },
            scrollbar: {
                el: '.swiper-scrollbar',
                draggable: true,
            },
        });
    });
</script>