<?php
get_header();

// Получаем данные о тренере
$trainer_name = '';
$trainer_exp = '';
$trainer_short_desc = '';

if (have_rows('short_info')) {
    while (have_rows('short_info')) {
        the_row();
        $trainer_name = get_sub_field('name');
        $trainer_exp = get_sub_field('exp');
        $trainer_short_desc = get_sub_field('short_desc');
    }
}

$trainer_full_desc = '';
$trainer_desc_list = array();
$trainer_documents = array();
$trainer_desc_points = array();
if (have_rows('full_info')) {
    while (have_rows('full_info')) {
        the_row();
        $trainer_full_desc = get_sub_field('full_desc');

        if (have_rows('desc_list')) {
            while (have_rows('desc_list')) {
                the_row();
                $trainer_desc_list[] = get_sub_field('desc_list_item');
            }
        }

        if (have_rows('desc_points')) {
            while (have_rows('desc_points')) {
                the_row();
                $point = array(
                    'text' => get_sub_field('text'),
                    'icon' => get_sub_field('icon')
                );
                $trainer_desc_points[] = $point;
            }
        }

        $documents = get_sub_field('documents');
        if ($documents && is_array($documents)) {
            $trainer_documents = $documents;
        }
    }
}

$trainer_photos = get_field('photo');
$trainer_trainings = get_field('trainings');
?>

    <section class="max-[768px]:py-[40px] container mx-auto py-[90px]">
        <div class="max-[1050px]:flex-col max-[1300px]:gap-[24px] flex gap-[60px] justify-between">
            <div class="flex">
                <?php if ($trainer_photos && !empty($trainer_photos)): ?>
                    <div class="max-[1050px]:h-[380px] max-[1050px]:min-h-auto max-[1050px]:!mx-auto trainer-photos-swiper rounded-[20px] swiper !m-0 w-[500px] min-h-[540px] relative">
                        <div class="swiper-wrapper">
                            <?php foreach ($trainer_photos as $photo): ?>
                                <div class="swiper-slide overflow-hidden shadow-[0_2px_32px_0_rgba(16,_15,_15,_0.03)]">
                                    <img src="<?php echo esc_url($photo['url']); ?>"
                                         alt="<?php echo esc_attr($photo['alt']); ?>"
                                         class="max-[1050px]:h-[380px] max-[1050px]:min-h-auto w-full min-h-[540px] object-cover object-top"/>
                                </div>
                            <?php endforeach; ?>
                        </div>

                        <div class="trainer-swiper-pagination absolute flex items-center justify-center left-1/2 z-[2]"></div>
                    </div>
                <?php endif; ?>
            </div>

            <div class="max-[1300px]:max-w-full flex flex-col w-full max-w-[760px] relative">
                <svg class="absolute right-0 top-0 max-[768px]:hidden" width="51" height="30" viewBox="0 0 51 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_2307_11639)">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M50.9996 0.730469C41.5932 23.8872 21.1929 11.5514 5.21289 17.1783C9.85961 4.19316 18.2463 1.81256 27.653 1.70435C34.6796 1.59614 44.5398 2.35361 50.9996 0.730469Z" fill="#E21E24" />
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M35.0202 17.5029C27.7669 35.2491 12.2401 25.4021 0 29.7305C6.3468 11.9843 20.8535 21.0738 35.0202 17.5029Z" fill="#E21E24" />
                    </g>
                    <defs>
                        <clipPath id="clip0_2307_11639">
                            <rect width="51" height="29" fill="white" transform="translate(0 0.730469)" />
                        </clipPath>
                    </defs>
                </svg>
                <div class="max-[768px]:mx-0 max-[1300px]:mx-auto flex gap-[12px] mb-[16px]">
                    <div class="text-[15px] leading-[110%] font-[600] px-[12px] h-[29px] flex items-center justify-center rounded-[32px] border border-[#e0e0e0]">
                        <span class="mr-[8px] w-[8px] h-[8px] rounded-full bg-[#e21e24]"></span>
                        <?php echo pll_current_language('name'); ?>
                    </div>
                    <?php if ($trainer_exp): ?>
                        <div class="text-[15px] leading-[110%] font-[600] px-[12px] h-[29px] flex items-center justify-center rounded-[32px] border border-[#e0e0e0]">
                            <?php echo esc_html($trainer_exp); ?>
                        </div>
                    <?php endif; ?>
                </div>

                <?php if ($trainer_name): ?>
                    <h1 class="max-[768px]:text-[24px] max-[1050px]:text-[30px] font-[700] text-[40px] leading-[120%]">
                        <?php echo esc_html($trainer_name); ?>
                    </h1>
                <?php endif; ?>

                <?php if ($trainer_short_desc): ?>
                    <div class="max-[768px]:text-[16px] font-[500] text-[20px] leading-[140%] mt-[16px]">
                        <?php echo wp_kses_post($trainer_short_desc); ?>
                    </div>
                <?php endif; ?>

                <?php if ($trainer_full_desc): ?>
                    <div class="flex flex-col w-full pt-[24px] mt-[24px] border-t border-dashed border-[#e0e0e0]">
                        <h3 class="max-[768px]:text-[20px] font-[700] text-[24px] leading-[125%]">О тренере</h3>
                        <div class="max-[768px]:text-[16px] text-[20px] font-[500] leading-[140%] mt-[16px]">
                            <?php echo wp_kses_post($trainer_full_desc); ?>
                        </div>
                    </div>
                <?php endif; ?>

                <?php if ($trainer_full_desc): ?>
                    <h3 class="max-[768px]:text-[20px] font-[700] text-[24px] leading-[125%] mt-[24px] ">Опыт и подход</h3>
                    <div class="max-[768px]:text-[16px] text-[20px] font-[500] leading-[140%] mt-[16px]">
                        <ul class="max-[768px]:text-[16px] mt-[16px] font-[500] text-[20px] leading-[140%] flex flex-col gap-[8px]">
                            <?php
                            foreach ($trainer_desc_list as $desc_item): ?>
                                <?php if ($desc_item): ?>
                                    <li class="flex items-center gap-[12px]">
                                        <svg class="min-w-fit" width="16" height="16" viewBox="0 0 16 16" fill="none"
                                             xmlns="http://www.w3.org/2000/svg">
                                            <g clip-path="url(#clip0_4123_4601)">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                      d="M4 0C2.93913 0 1.92172 0.421427 1.17157 1.17157C0.421427 1.92172 0 2.93913 0 4V12C0 13.0609 0.421427 14.0783 1.17157 14.8284C1.92172 15.5786 2.93913 16 4 16H12C13.0609 16 14.0783 15.5786 14.8284 14.8284C15.5786 14.0783 16 13.0609 16 12V4C16 2.93913 15.5786 1.92172 14.8284 1.17157C14.0783 0.421427 13.0609 0 12 0H4ZM11.712 4.9856C11.8749 5.12143 11.9772 5.31638 11.9964 5.5276C12.0156 5.73882 11.9501 5.94903 11.8144 6.112L7.8144 10.912C7.74531 10.9948 7.66017 11.0629 7.56412 11.1119C7.46806 11.161 7.36307 11.1902 7.25546 11.1977C7.14785 11.2051 7.03983 11.1908 6.93792 11.1554C6.836 11.1201 6.74228 11.0645 6.6624 10.992L4.2624 8.8104C4.10832 8.66696 4.01698 8.46857 4.0082 8.25825C3.99941 8.04792 4.07388 7.8426 4.21546 7.68681C4.35704 7.53102 4.55431 7.43731 4.76452 7.42601C4.97473 7.4147 5.18092 7.4867 5.3384 7.6264L7.12 9.2464L10.5856 5.088C10.7214 4.9251 10.9164 4.82281 11.1276 4.80361C11.3388 4.78441 11.549 4.84987 11.712 4.9856Z"
                                                      fill="#E21E24"/>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_4123_4601">
                                                    <rect width="16" height="16" fill="white"/>
                                                </clipPath>
                                            </defs>
                                        </svg>
                                        <?php echo wp_kses_post($desc_item); ?>
                                    </li>
                                    <?php $counter++; ?>
                                <?php endif; ?>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                <?php endif; ?>
            </div>
        </div>

        <?php if (!empty($trainer_desc_points) || ($trainer_documents && !empty($trainer_documents))): ?>
            <div class="max-[768px]:flex-col max-[768px]:mt-[24px] mt-[64px] flex gap-[24px] justify-between flex-wrap">
                <?php if (!empty($trainer_desc_points)): ?>
                    <div class="flex flex-col w-full max-w-[760px] p-[24px] bg-[#fff] rounded-[12px]">
                        <h3 class="font-[700] text-[24px] leading-[125%]">Цели, с которыми работаю</h3>

                        <ul class="max-[768px]:grid-cols-1 grid grid-cols-2 gap-y-[24px] gap-x-[16px] mt-[24px]">
                            <?php foreach ($trainer_desc_points as $point): ?>
                                <li class="flex items-center font-[600] text-[16px] leading-[145%] gap-[16px]">
                                    <div class="[&>svg]:min-w-fit grid place-items-center min-w-[55px] w-[55px] h-[55px] rounded-[9px] shadow-[0_1px_23px_0_rgba(16,_15,_15,_0.03)] bg-[linear-gradient(180deg,_#f2f2f2_69.59%,_#ededed_100%)]">
                                        <?php if ($point['icon']): ?>
                                            <img src="<?php echo esc_url($point['icon']['url']); ?>"
                                                 alt="<?php echo esc_attr($point['icon']['alt']); ?>"
                                                 class="w-[27px] h-[27px] object-contain">
                                        <?php else: ?>
                                            <!-- Fallback icon если изображение не загружено -->
                                            <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="13.5" cy="13.5" r="13.5" fill="#E21E24"/>
                                            </svg>
                                        <?php endif; ?>
                                    </div>
                                    <p class="max-[768px]:max-w-full max-w-[240px] flex w-full">
                                        <?php echo esc_html($point['text']); ?>
                                    </p>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                <?php endif; ?>

                <?php if ($trainer_documents && !empty($trainer_documents)): ?>
                    <div class="flex flex-col w-full max-w-[536px] h-fit p-[24px] rounded-[12px] border border-[#e0e0e0]">
                        <h3 class="font-[700] text-[24px] leading-[125%]">Сертификаты и квалификация</h3>
                        <ul class="mt-[26px] flex flex-col gap-[12px]">
                            <?php $counter = 1; ?>
                            <?php foreach ($trainer_documents as $document): ?>
                                <li class="flex items-center gap-[12px] flex w-full rounded-[12px] px-[16px] h-[48px]
        shadow-[0_2px_32px_0_rgba(16,_15,_15,_0.03)]
        bg-[#fff]
         transition hover:shadow-none">
           <span class="rounded-[24px] flex items-center justify-center w-[32px] h-[24px] bg-[linear-gradient(90deg,_#9d9994_39.42%,_#bbb7b1_92.9%)] text-white text-[14px] font-[600]">
                <?php echo sprintf('%02d', $counter); ?>
            </span>
                                    <a href="<?php echo esc_url($document['document']['url']); ?>" target="_blank"
                                       class="!no-underline font-[600] text-[16px] leading-[145%] w-full h-full flex items-center">
                                        <?php echo esc_html($document['document_name']); ?>
                                    </a>
                                </li>
                                <?php $counter++; ?>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                <?php endif; ?>
            </div>
        <?php endif; ?>
    </section>

<?php if ($trainer_trainings): ?>
    <?php
    $trainings_section_id = 'trainings-section-' . uniqid();
    $trainings_data = array();

    foreach ($trainer_trainings as $training) {
        $training_info = array(
            'post' => $training,
            'name' => '',
            '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['short_desc'] = get_sub_field('short_desc');
            }
        }

        $trainings_data[] = $training_info;
    }
    ?>

    <section class="max-[768px]:pb-[40px] mx-auto pb-[90px]">
        <div class="container mx-auto">


            <div class="flex items-center gap-[16px] ">
                <h2 class="max-[1050px]:text-[36px] max-[768px]:max-[768px]:text-[24px] text-[40px] leading-[120%] font-[500]">
                    <strong>Тренировки</strong> с <?php echo esc_html($trainer_name ?: 'тренером'); ?>
                </h2>
                <div class="max-[1100px]:flex hidden gap-[6px] ml-auto">
                    <button class="group training-custom-prev cursor-pointer">
                        <?php display_icon('slider-prev') ?>
                    </button>
                    <button class="group training-custom-next cursor-pointer">
                        <?php display_icon('slider-next') ?>
                    </button>
                </div>
            </div>

            <div class="flex flex-col mt-[24px]">
                <div class="swiper !m-0 rounded-[20px] rounded-b-[0]"
                     id="<?php echo esc_attr($trainings_section_id); ?>-swiper">
                    <div class="swiper-wrapper">
                        <?php foreach ($trainings_data as $training_data): ?>
                            <?php $training = $training_data['post']; ?>
                            <div class="max-w-[312px] swiper-slide">
                                <div class="flex flex-col bg-[#f8f8f8] relative 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">
                                            <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="flex flex-col gap-[24px] h-full p-[24px]">
                                        <?php $name = $training_data['name']; ?>
                                        <?php if ($name): ?>
                                            <div class="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="!no-underline mt-auto h-[59px] flex grey-gradient-hover w-full rounded-[90px] px-[12px] text-[18px] font-[600] leading-[195%] text-[#f8f8f8] bg-[0_2px_32px_0_rgba(16,_15,_15,_0.03)] 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($trainings_section_id); ?>"></div>
                <a class="hidden max-[768px]:flex !no-underline dark:text-[#F8F8F8] dark:max-w-[860px] dark:border-[#574348] flex mt-[44px] 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>
        </div>
    </section>

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

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

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const trainerPhotosSwiper = document.querySelector('.trainer-photos-swiper');

            if (trainerPhotosSwiper) {
                const swiper = new Swiper('.trainer-photos-swiper', {
                    loop: true,
                    slidesPerView: 1,
                    spaceBetween: 0,
                    grabCursor: true,

                    pagination: {
                        el: '.trainer-swiper-pagination',
                        type: 'bullets',
                        clickable: true,
                        bulletClass: 'swiper-pagination-bullet',
                    },
                });

                const slides = trainerPhotosSwiper.querySelectorAll('.swiper-slide');
                if (slides.length <= 1) {
                    const pagination = trainerPhotosSwiper.querySelector('.trainer-swiper-pagination');
                    if (pagination) pagination.style.display = 'none';
                    swiper.autoplay.stop();
                }
            }
        });
    </script>

    <style>
        .swiper-pagination-bullet {
            width: 10px !important;
            height: 10px !important;
            background: #222 !important;
            border-radius: 100% !important;
            transform: none !important;
        }

        .swiper-pagination-bullet-active {
            border-radius: 20px !important;
            width: 17px !important;
            height: 10px !important;
            background: #fff !important;
        }
    </style>

<?php get_footer(); ?>