<?php
$carousel_settings = kaitex_carousel_header($widget, array('direction' => 'vertical', 'parallax' => 'true'));

$html_id = pxl_get_element_id($settings);

?>
<div class="pxl-swiper-sliders pxl-slider-carousel pxl-slider-carousel1 pxl-parent-cursor <?php if ($settings['style_ly1'] == 'style1') { echo 'pxl-drag-area pxl-drag-vertical'; } ?> <?php echo esc_attr($settings['style_ly1']); ?> <?php echo esc_attr($settings['pxl_animate']); ?>" data-wow-delay="<?php echo esc_attr($settings['pxl_animate_delay']); ?>ms" data-wow-duration="<?php echo esc_attr($settings['pxl_animate_duration']); ?>s" data-arrow="<?php echo esc_attr($carousel_settings['arrows']); ?>">
    <div class="pxl-carousel-inner">
        <div <?php pxl_print_html($widget->get_render_attribute_string( 'carousel' )); ?>>
            <div class="pxl-swiper-wrapper">
                <?php if ($settings['style_ly1'] == 'style1') : ?>
                    <?php foreach ($settings['list'] as $key => $value):
                        $image = isset($value['image']) ? $value['image'] : '';
                        $title = isset($value['title']) ? $value['title'] : '';
                        $video_text = isset($value['video_text_ly1']) ? $value['video_text_ly1'] : '';
                        $video_link = isset($value['video_link_ly1']) ? $value['video_link_ly1'] : '';
                        ?>
                        <div class="pxl-swiper-slide">
                            <div class="swiper-slide-inner" data-swiper-parallax="50%">
                                <div class="pxl-item--inner">
                                    <?php if (!empty($title)) : ?>
                                        <h1 class="item--title"><?php echo pxl_print_html($title); ?></h1>
                                    <?php endif; ?>
                                    <?php if(!empty($video_text)) : ?>
                                        <div class="item--video">
                                            <?php if(!empty($video_link)) : ?>
                                                <a class="video--button pxl-video-popup" href="<?php echo esc_url($video_link); ?>" aria-label="<?php echo esc_attr($video_text); ?>">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="10" height="13" viewBox="0 0 10 13" fill="none">
                                                        <path d="M0 13V0L10 6.5L0 13Z" fill="white"/>
                                                    </svg>
                                                </a>
                                            <?php endif; ?>
                                            <svg class="text--circle" viewBox="0 0 144.48 144.48" width="200" height="200">
                                                <path id="ct-banner-curve-<?php echo esc_attr($html_id . $key) ?>" d="M242.93,123A71.74,71.74,0,1,1,171.2,51.22,71.73,71.73,0,0,1,242.93,123Z" transform="translate(-98.96 -50.72)"></path>
                                                <text>
                                                    <textPath href="#ct-banner-curve-<?php echo esc_attr($html_id . $key) ?>">
                                                        <?php echo esc_attr($video_text); ?>
                                                    </textPath>
                                                </text>
                                            </svg>
                                        </div>
                                    <?php endif; ?>
                                    <?php if(!empty($image['id'])) : ?>
                                        <div class="item--image bg-image" style="background-image: url(<?php echo esc_url($image['url']); ?>);"></div>
                                    <?php endif; ?>
                                    <?php if ($settings['show_particle_05_ly1'] == 'true') : ?>
                                        <div class="particle particle-05">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="214" height="214" viewBox="0 0 214 214" fill="none">
                                                <circle cx="107" cy="107" r="107" fill="var(--primary-color)"/>
                                            </svg>
                                        </div>
                                    <?php endif; ?>
                                </div>
                           </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
                <?php if ($settings['style_ly1'] == 'style2') : ?>
                    <?php foreach ($settings['list1_b'] as $key => $value):
                        $image = isset($value['image1_b']) ? $value['image1_b'] : '';
                        $subtitle = isset($value['sub_title1_b']) ? $value['sub_title1_b'] : '';
                        $title = isset($value['title1_b']) ? $value['title1_b'] : '';
                        $video_link = isset($value['video_link_ly1_b']) ? $value['video_link_ly1_b'] : '';
                        ?>
                        <div class="pxl-swiper-slide">
                            <div class="swiper-slide-inner" data-swiper-parallax="50%">
                                <div class="pxl-item--inner">
                                    <?php if (!empty($subtitle)) : ?>
                                        <div class="item--subtitle"><?php echo pxl_print_html($subtitle); ?></div>
                                    <?php endif; ?>
                                    <?php if (!empty($title)) : ?>
                                        <h1 class="item--title"><?php echo pxl_print_html($title); ?></h1>
                                    <?php endif; ?>
                                    <?php if(!empty($video_link)) : ?>
                                        <div class="item--video pxl-element-parallax">
                                            <a class="video--button pxl-video-popup" href="<?php echo esc_url($video_link); ?>" aria-label="<?php echo esc_html__('View Video', 'kaitex'); ?>">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150" fill="none">
                                                    <circle cx="75" cy="75" r="75"/>
                                                    <path d="M71.2058 83.5L71.2058 67.9115L84.7058 75.7058L71.2058 83.5Z"/>
                                                </svg>
                                            </a>
                                        </div>
                                    <?php endif; ?>
                                    <?php if(!empty($image['id'])) : ?>
                                        <div class="item--image bg-image" style="background-image: url(<?php echo esc_url($image['url']); ?>);"></div>
                                    <?php endif; ?>
                                    <?php if ($settings['style_ly1'] == 'style2') : ?>
                                        <div class="pxl-item-particle">
                                            <?php if ($settings['show_particle_01_ly1'] == 'true') : ?>
                                                <div class="particle particle-01">
                                                    <svg width="89" height="195" viewBox="0 0 89 195" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M2 193L44.5 150.5L87 193" stroke="white" stroke-width="5"></path>
                                                        <path d="M2 163L44.5 120.5L87 163" stroke="white" stroke-width="5"></path>
                                                        <path d="M2 133L44.5 90.5L87 133" stroke="white" stroke-width="5"></path>
                                                        <path d="M2 103L44.5 60.5L87 103" stroke="white" stroke-width="5"></path>
                                                        <path d="M2 73L44.5 30.5L87 73" stroke="white" stroke-width="5"></path>
                                                    </svg>
                                                </div>
                                            <?php endif; ?>
                                            <?php if ($settings['show_particle_02_ly1'] == 'true') : ?>
                                                <div class="particle particle-02">
                                                    <svg width="312" height="170" viewBox="0 0 312 170" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <circle cx="156" cy="14" r="156"/>
                                                    </svg>
                                                </div>
                                            <?php endif; ?>
                                            <?php if ($settings['show_particle_03_ly1'] == 'true') : ?>
                                                <div class="particle particle-03">
                                                    <svg width="327" height="344" viewBox="0 0 327 344" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M0 163.5C0 73.2015 73.2014 0 163.5 0C253.799 0 327 73.2014 327 163.5V377H0V163.5Z"/>
                                                    </svg>
                                                </div>
                                            <?php endif; ?>
                                            <?php if ($settings['show_particle_04_ly1'] == 'true') : ?>
                                                <div class="particle particle-04">
                                                    <svg width="140" height="190" viewBox="0 0 140 190" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <ellipse cx="8.23529" cy="8.26087" rx="8.23529" ry="8.26087" fill="white"/>
                                                        <ellipse cx="49.4118" cy="8.26087" rx="8.23529" ry="8.26087" fill="white"/>
                                                        <ellipse cx="90.5882" cy="8.26087" rx="8.23529" ry="8.26087" fill="white"/>
                                                        <ellipse cx="131.765" cy="8.26087" rx="8.23529" ry="8.26087" fill="white"/>
                                                        <ellipse cx="8.23529" cy="66.087" rx="8.23529" ry="8.26087" fill="white"/>
                                                        <ellipse cx="49.4118" cy="66.087" rx="8.23529" ry="8.26087" fill="white"/>
                                                        <ellipse cx="90.5882" cy="66.087" rx="8.23529" ry="8.26087" fill="white"/>
                                                        <ellipse cx="131.765" cy="66.087" rx="8.23529" ry="8.26087" fill="white"/>
                                                        <ellipse cx="8.23529" cy="123.913" rx="8.23529" ry="8.26087" fill="white"/>
                                                        <ellipse cx="49.4118" cy="123.913" rx="8.23529" ry="8.26087" fill="white"/>
                                                        <ellipse cx="90.5882" cy="123.913" rx="8.23529" ry="8.26087" fill="white"/>
                                                        <ellipse cx="131.765" cy="123.913" rx="8.23529" ry="8.26087" fill="white"/>
                                                        <ellipse cx="8.23529" cy="181.739" rx="8.23529" ry="8.26087" fill="white"/>
                                                        <ellipse cx="49.4118" cy="181.739" rx="8.23529" ry="8.26087" fill="white"/>
                                                        <ellipse cx="90.5882" cy="181.739" rx="8.23529" ry="8.26087" fill="white"/>
                                                        <ellipse cx="131.765" cy="181.739" rx="8.23529" ry="8.26087" fill="white"/>
                                                    </svg>
                                                </div>
                                            <?php endif; ?>
                                            <?php if ($settings['show_particle_06_ly1'] == 'true') : ?>
                                                <div class="particle particle-06">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="146" height="116" viewBox="0 0 146 116" fill="none">
                                                        <path opacity="0.2" d="M146 3H116.472V30.9104H89.8146V62.1045H60.2865V90.0149H27.8876V113H0" stroke="var(--primary-color)" stroke-width="5"/>
                                                    </svg>
                                                </div>
                                            <?php endif; ?>
                                            <?php if ($settings['show_particle_07_ly1'] == 'true') : ?>
                                                <div class="particle particle-07">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="83" height="79" viewBox="0 0 83 79" fill="none">
                                                      <path opacity="0.2" d="M41.5 0L51.2664 30.0578L82.871 30.0578L57.3023 48.6345L67.0687 78.6922L41.5 60.1155L15.9313 78.6922L25.6977 48.6345L0.12904 30.0578L31.7336 30.0578L41.5 0Z" fill="white"/>
                                                    </svg>
                                              </div>
                                            <?php endif; ?>
                                            <?php if ($settings['show_particle_08_ly1'] == 'true') : ?>
                                                <div class="particle particle-08">
                                                    <svg width="128" height="141" viewBox="0 0 128 141" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M2.50189 140.788C19.9399 139.803 37.0131 135.393 52.7467 127.809C68.4803 120.226 82.5662 109.618 94.2001 96.5908C105.834 83.5636 114.788 68.3726 120.551 51.885C126.314 35.3973 128.773 17.936 127.788 0.498029L85.1023 2.9096C85.7708 14.742 84.1021 26.5902 80.1917 37.7778C76.2812 48.9653 70.2055 59.2731 62.3114 68.1125C54.4173 76.952 44.8594 84.1501 34.1835 89.2957C23.5076 94.4414 11.9227 97.4339 0.0903333 98.1024L2.50189 140.788Z" fill="var(--primary-color)"/>
                                                    </svg>
                                                </div>
                                            <?php endif; ?>
                                            <?php if ($settings['show_particle_09_ly1'] == 'true') : ?>
                                                <div class="particle particle-09">
                                                    <svg width="155" height="177" viewBox="0 0 155 177" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <rect width="163" height="177"/>
                                                    </svg>
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                    <?php endif; ?>
                                </div>
                           </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>

            </div>
        </div>
        <?php kaitex_carousel_footer($carousel_settings['arrows'], $carousel_settings['arrows_style'], $carousel_settings['pagination'], $carousel_settings['bullets_style']); ?>
    </div>
    <?php if ($settings['style_ly1'] == 'style1') : ?>
        <div class="pxl-item-particle">
            <?php if ($settings['show_particle_01_ly1'] == 'true') : ?>
                <div class="particle particle-01">
                    <svg width="89" height="195" viewBox="0 0 89 195" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2 193L44.5 150.5L87 193" stroke="white" stroke-width="5"></path>
                        <path d="M2 163L44.5 120.5L87 163" stroke="white" stroke-width="5"></path>
                        <path d="M2 133L44.5 90.5L87 133" stroke="white" stroke-width="5"></path>
                        <path d="M2 103L44.5 60.5L87 103" stroke="white" stroke-width="5"></path>
                        <path d="M2 73L44.5 30.5L87 73" stroke="white" stroke-width="5"></path>
                    </svg>
                </div>
            <?php endif; ?>
            <?php if ($settings['show_particle_02_ly1'] == 'true') : ?>
                <div class="particle particle-02">
                    <svg width="528" height="278" viewBox="0 0 528 278" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g opacity="0.2">
                            <circle cx="264" cy="14" r="261.5" stroke="white" stroke-width="5"/>
                            <circle cx="264" cy="14" r="222.5" stroke="white" stroke-width="5"/>
                            <circle cx="264" cy="14" r="189.5" stroke="white" stroke-width="5"/>
                            <circle cx="264" cy="14" r="153.5" stroke="white" stroke-width="5"/>
                        </g>
                    </svg>
                </div>
            <?php endif; ?>
            <?php if ($settings['show_particle_03_ly1'] == 'true') : ?>
                <div class="particle particle-03">
                    <svg width="489" height="439" viewBox="0 0 489 439" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g opacity="0.2">
                            <path id="motionPath01-<?php echo esc_attr($html_id) ?>" d="M2.5 244.5C2.5 110.847 110.847 2.5 244.5 2.5C378.153 2.5 486.5 110.847 486.5 244.5V564.5H2.5V244.5Z" stroke="white" stroke-width="5"/>
                            <path id="motionPath02-<?php echo esc_attr($html_id) ?>" d="M25.5 248.5C25.5 127.55 123.55 29.5 244.5 29.5C365.45 29.5 463.5 127.55 463.5 248.5V537.5H25.5V248.5Z" stroke="white" stroke-width="5"/>
                            <path id="motionPath03-<?php echo esc_attr($html_id) ?>" d="M53.5 253.5C53.5 148.014 139.014 62.5 244.5 62.5C349.986 62.5 435.5 148.014 435.5 253.5V504.5H53.5V253.5Z" stroke="white" stroke-width="5"/>
                            <path id="motionPath04-<?php echo esc_attr($html_id) ?>" d="M83.5 258.5C83.5 169.582 155.582 97.5 244.5 97.5C333.418 97.5 405.5 169.582 405.5 258.5V469.5H83.5V258.5Z" stroke="white" stroke-width="5"/>
                        </g>
                        <g id="cray01-<?php echo esc_attr($html_id) ?>" transform="translate(0, -2.5)" opacity="0.4">
                            <rect x="0" y="0" width="5" height="5" fill="var(--primary-color)" />
                            <animateMotion dur="20s" begin="0s" fill="freeze" rotate="auto-reverse" repeatCount="indefinite">
                                <mpath xlink:href="#motionPath01-<?php echo esc_attr($html_id) ?>" />
                            </animateMotion>
                        </g>
                        <g id="cray02-<?php echo esc_attr($html_id) ?>" transform="translate(0, -2.5)" opacity="0.4">
                            <rect x="0" y="0" width="5" height="5" fill="var(--primary-color)" />
                            <animateMotion dur="20s" begin="0s" fill="freeze" rotate="auto-reverse" repeatCount="indefinite">
                                <mpath xlink:href="#motionPath02-<?php echo esc_attr($html_id) ?>" />
                            </animateMotion>
                        </g>
                        <g id="cray03-<?php echo esc_attr($html_id) ?>" transform="translate(0, -2.5)" opacity="0.4">
                            <rect x="0" y="0" width="5" height="5" fill="var(--primary-color)" />
                            <animateMotion dur="20s" begin="0s" fill="freeze" rotate="auto-reverse" repeatCount="indefinite">
                                <mpath xlink:href="#motionPath03-<?php echo esc_attr($html_id) ?>" />
                            </animateMotion>
                        </g>
                        <g id="cray04-<?php echo esc_attr($html_id) ?>" transform="translate(0, -2.5)" opacity="0.4">
                            <rect x="0" y="0" width="5" height="5" fill="var(--primary-color)" />
                            <animateMotion dur="20s" begin="0s" fill="freeze" rotate="auto-reverse" repeatCount="indefinite">
                                <mpath xlink:href="#motionPath04-<?php echo esc_attr($html_id) ?>" />
                            </animateMotion>
                        </g>
                    </svg>
                </div>
            <?php endif; ?>
            <?php if ($settings['show_particle_04_ly1'] == 'true') : ?>
                <div class="particle particle-04">
                    <svg width="140" height="190" viewBox="0 0 140 190" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <ellipse cx="8.23529" cy="8.26087" rx="8.23529" ry="8.26087" fill="white"/>
                        <ellipse cx="49.4118" cy="8.26087" rx="8.23529" ry="8.26087" fill="white"/>
                        <ellipse cx="90.5882" cy="8.26087" rx="8.23529" ry="8.26087" fill="white"/>
                        <ellipse cx="131.765" cy="8.26087" rx="8.23529" ry="8.26087" fill="white"/>
                        <ellipse cx="8.23529" cy="66.087" rx="8.23529" ry="8.26087" fill="white"/>
                        <ellipse cx="49.4118" cy="66.087" rx="8.23529" ry="8.26087" fill="white"/>
                        <ellipse cx="90.5882" cy="66.087" rx="8.23529" ry="8.26087" fill="white"/>
                        <ellipse cx="131.765" cy="66.087" rx="8.23529" ry="8.26087" fill="white"/>
                        <ellipse cx="8.23529" cy="123.913" rx="8.23529" ry="8.26087" fill="white"/>
                        <ellipse cx="49.4118" cy="123.913" rx="8.23529" ry="8.26087" fill="white"/>
                        <ellipse cx="90.5882" cy="123.913" rx="8.23529" ry="8.26087" fill="white"/>
                        <ellipse cx="131.765" cy="123.913" rx="8.23529" ry="8.26087" fill="white"/>
                        <ellipse cx="8.23529" cy="181.739" rx="8.23529" ry="8.26087" fill="white"/>
                        <ellipse cx="49.4118" cy="181.739" rx="8.23529" ry="8.26087" fill="white"/>
                        <ellipse cx="90.5882" cy="181.739" rx="8.23529" ry="8.26087" fill="white"/>
                        <ellipse cx="131.765" cy="181.739" rx="8.23529" ry="8.26087" fill="white"/>
                    </svg>
                </div>
            <?php endif; ?>
            <?php if ($settings['show_particle_06_ly1'] == 'true') : ?>
                <div class="particle particle-06">
                    <svg xmlns="http://www.w3.org/2000/svg" width="146" height="116" viewBox="0 0 146 116" fill="none">
                        <path opacity="0.2" d="M146 3H116.472V30.9104H89.8146V62.1045H60.2865V90.0149H27.8876V113H0" stroke="var(--primary-color)" stroke-width="5"/>
                    </svg>
                </div>
            <?php endif; ?>
            <?php if ($settings['show_particle_07_ly1'] == 'true') : ?>
                <div class="particle particle-07">
                    <svg xmlns="http://www.w3.org/2000/svg" width="83" height="79" viewBox="0 0 83 79" fill="none">
                      <path opacity="0.2" d="M41.5 0L51.2664 30.0578L82.871 30.0578L57.3023 48.6345L67.0687 78.6922L41.5 60.1155L15.9313 78.6922L25.6977 48.6345L0.12904 30.0578L31.7336 30.0578L41.5 0Z" fill="white"/>
                    </svg>
              </div>
            <?php endif; ?>
            <?php if ($settings['show_particle_08_ly1'] == 'true') : ?>
                <div class="particle particle-08">
                    <svg width="128" height="141" viewBox="0 0 128 141" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2.50189 140.788C19.9399 139.803 37.0131 135.393 52.7467 127.809C68.4803 120.226 82.5662 109.618 94.2001 96.5908C105.834 83.5636 114.788 68.3726 120.551 51.885C126.314 35.3973 128.773 17.936 127.788 0.498029L85.1023 2.9096C85.7708 14.742 84.1021 26.5902 80.1917 37.7778C76.2812 48.9653 70.2055 59.2731 62.3114 68.1125C54.4173 76.952 44.8594 84.1501 34.1835 89.2957C23.5076 94.4414 11.9227 97.4339 0.0903333 98.1024L2.50189 140.788Z" fill="var(--primary-color)"/>
                    </svg>
                </div>
            <?php endif; ?>
            <?php if ($settings['show_particle_09_ly1'] == 'true') : ?>
                <div class="particle particle-09">
                    <svg width="155" height="177" viewBox="0 0 155 177" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="163" height="177" fill="var(--primary-color)"/>
                    </svg>
                </div>
            <?php endif; ?>
        </div>
    <?php endif; ?>
</div>
