<?php
$col_xs = $widget->get_setting('col_xs', '');
$col_sm = $widget->get_setting('col_sm', '');
$col_md = $widget->get_setting('col_md', '');
$col_lg = $widget->get_setting('col_lg', '');
$col_xl = $widget->get_setting('col_xl', '');
$col_xxl = $widget->get_setting('col_xxl', '');
if($col_xxl == 'inherit') {
    $col_xxl = $col_xl;
}
$slides_to_scroll = $widget->get_setting('slides_to_scroll', '');
$arrows = $widget->get_setting('arrows','false');  
$pagination = $widget->get_setting('pagination','false');
$pagination_type = $widget->get_setting('pagination_type','bullets');
$pause_on_hover = $widget->get_setting('pause_on_hover');
$autoplay = $widget->get_setting('autoplay', '');
$autoplay_speed = $widget->get_setting('autoplay_speed', '5000');
$infinite = $widget->get_setting('infinite','false');  
$speed = $widget->get_setting('speed', '500');
$opts = [
    'slide_direction'               => 'horizontal',
    'slide_percolumn'               => '1', 
    'slide_mode'                    => 'slide', 
    'slides_to_show'                => $col_xl, 
    'slides_to_show_xxl'             => $col_xxl, 
    'slides_to_show_lg'             => $col_lg, 
    'slides_to_show_md'             => $col_md, 
    'slides_to_show_sm'             => $col_sm, 
    'slides_to_show_xs'             => $col_xs, 
    'slides_to_scroll'              => $slides_to_scroll,
    'arrow'                         => $arrows,
    'pagination'                    => $pagination,
    'pagination_type'               => $pagination_type,
    'autoplay'                      => $autoplay,
    'pause_on_hover'                => $pause_on_hover,
    'pause_on_interaction'          => 'true',
    'delay'                         => $autoplay_speed,
    'loop'                          => $infinite,
    'speed'                         => $speed,
];
$widget->add_render_attribute( 'carousel', [
    'class'         => 'pxl-swiper-container',
    'dir'           => is_rtl() ? 'rtl' : 'ltr',
    'data-settings' => wp_json_encode($opts)
]);
if(isset($settings['testimonial']) && !empty($settings['testimonial']) && count($settings['testimonial'])): ?>
    <div class="pxl-swiper-sliders pxl-testimonial-carousel pxl-testimonial-carousel2 <?php echo esc_attr($settings['style-pagination']); ?>" <?php if($settings['drap']) : ?>data-cursor-drap="<?php echo esc_html('DRAG', 'breeza'); ?>"<?php endif; ?>>
      <div class="pxl-carousel-inner">
        <div <?php pxl_print_html($widget->get_render_attribute_string( 'carousel' )); ?>>
            <div class="pxl-swiper-wrapper">
                <?php foreach ($settings['testimonial'] as $key => $value):
                    $title = isset($value['title']) ? $value['title'] : '';
                    $position = isset($value['position']) ? $value['position'] : '';
                    $desc = isset($value['desc']) ? $value['desc'] : '';
                    $show_star = isset($value['show_star']) ? $value['show_star'] : '';
                    $star = isset($value['star']) ? $value['star'] : '';
                    $image = isset($value['image']) ? $value['image'] : '';
                    ?>
                    <div class="pxl-swiper-slide">
                        <div class="pxl-item--inner <?php echo esc_attr($settings['pxl_animate']); ?>" data-wow-delay="<?php echo esc_attr($settings['pxl_animate_delay']); ?>ms">
                            <?php if(!empty($image['id'])) :
                                $image_size = !empty($settings['img_size']) ? $settings['img_size'] : '112x112';
                                $img = pxl_get_image_by_size( array(
                                    'attach_id'  => $image['id'],
                                    'thumb_size' => $image_size,
                                    'class' => 'no-lazyload'
                                ) );
                                $thumbnail = $img['thumbnail'];
                                ?>
                                <div class="pxl-item--image pxl-transtion">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="302" height="266" viewBox="0 0 302 266" fill="none">
                                      <path d="M273.688 133H226.5V95.2495C226.5 74.428 243.429 57.4995 264.25 57.4995H268.969C276.814 57.4995 283.125 51.1882 283.125 43.3433V15.0308C283.125 7.18584 276.814 0.874512 268.969 0.874512H264.25C212.108 0.874512 169.875 43.1073 169.875 95.2495V236.812C169.875 252.443 182.557 265.125 198.188 265.125H273.688C289.318 265.125 302 252.443 302 236.812V161.312C302 145.681 289.318 133 273.688 133ZM103.812 133H56.625V95.2495C56.625 74.428 73.5535 57.4995 94.375 57.4995H99.0938C106.939 57.4995 113.25 51.1882 113.25 43.3433V15.0308C113.25 7.18584 106.939 0.874512 99.0938 0.874512H94.375C42.2328 0.874512 0 43.1073 0 95.2495V236.812C0 252.443 12.6816 265.125 28.3125 265.125H103.812C119.443 265.125 132.125 252.443 132.125 236.812V161.312C132.125 145.681 119.443 133 103.812 133Z" fill="url(#paint0_linear_487_3817)"/>
                                      <defs>
                                        <linearGradient id="paint0_linear_487_3817" x1="151" y1="0.874512" x2="151" y2="265.125" gradientUnits="userSpaceOnUse">
                                          <stop stop-color="#E9EEFF"/>
                                          <stop offset="1" stop-color="#FCF8FF" stop-opacity="0"/>
                                      </linearGradient>
                                  </defs>
                              </svg>
                              <?php echo wp_kses_post($thumbnail); ?>
                          </div>
                      <?php endif; ?>
                      <div class="pxl-item--holder">    
                        <div class="pxl-item--desc el-empty"><?php echo pxl_print_html($desc); ?></div>
                    </div>
                    <div class="pxl-item--by">
                        <span class="pxl-item--title el-empty"><?php echo pxl_print_html($title); ?></span>
                        <span class="pxl-item--position el-empty"><?php echo pxl_print_html($position); ?></span>   
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>
<div class="pxl-swiper-thumbs">
    <div class="swiper-wrapper">
        <?php foreach ($settings['testimonial'] as $key => $value_top):
            $image = isset($value_top['image']) ? $value_top['image'] : '';
            ?>
            <div class="swiper-slide">
                <div class="pxl-item--author">
                    <?php if(!empty($image['id'])) { 
                        $img = pxl_get_image_by_size( array(
                            'attach_id'  => $image['id'],
                            'thumb_size' => '172x172',
                            'class' => 'no-lazyload',
                        ));
                        $thumbnail = $img['thumbnail'];?>
                        <div class="pxl-item--image">
                            <?php echo wp_kses_post($thumbnail); ?>
                        </div>
                    <?php } ?>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>
</div>
<?php if($pagination !== 'false'): ?>
    <div class="pxl-swiper-pagination">
        <?php if($pagination_type == 'bullets') : ?><?php endif; ?>
        <div class="pxl-swiper-dots style-1"></div>
        <?php if($pagination_type == 'bullets') : ?><?php endif; ?>
    </div>
<?php endif; ?>

<?php if($arrows !== 'false'): ?>
    <div class="pxl-swiper-arrow-wrap">
        <div class="pxl-swiper-arrow pxl-swiper-arrow-prev"><i class="caseicon-angle-arrow-left rtl-icon"></i></div>
        <div class="pxl-swiper-arrow pxl-swiper-arrow-next"><i class="caseicon-angle-arrow-right rtl-icon"></i></div>
    </div>
<?php endif; ?>

</div>
<?php endif; ?>
