<?php
    $html_id = pxl_get_element_id($settings);
    $tax = ['portfolio-category'];
    $select_post_by = $widget->get_setting('select_post_by', '');
    $post_type = $settings['post_type'] ?? 'post';
    $post_ids = ($select_post_by === 'post_selected') ? $widget->get_setting('source_'.$post_type.'_post_ids', '') : [];
    $source = ($select_post_by !== 'post_selected') ? $widget->get_setting('source_'.$post_type, '') : [];
    $orderby = $widget->get_setting('orderby', 'date');
    $order = $widget->get_setting('order', 'desc');
    $limit = $widget->get_setting('limit', 6);
    extract(pxl_get_posts_of_grid(
        $post_type, 
        [
            'source' => $source, 
            'orderby' => $orderby, 
            'order' => $order, 
            'limit' => $limit, 
            'post_ids' => $post_ids
        ],
        $tax
    ));

    $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', '');

    $slides_to_scroll = $widget->get_setting('slides_to_scroll', '');

    $drap = $widget->get_setting('drap', false);

    $img_size = !empty($settings['img_size']) ? $settings['img_size'] : 'full';
    $show_button = $widget->get_setting('show_button');
    $title_hover_style = $settings['title_hover_style']  ?? '';
    // Animation
    $animate = $widget->get_setting('pxl_animate');
    $animate_delay = (int)$widget->get_setting('animate_delay', 0);

    $pause_on_hover = !empty($settings['pause_on_hover']) || false;
    $autoplay = !empty($settings['autoplay']) || false;
    $autoplay_speed = !empty($settings['autoplay_speed']) ? $settings['autoplay_speed'] : 5000;
    $infinite = !empty($settings['infinite']) || false;
    $speed = !empty($settings['speed']) ? $settings['speed'] : 500;
    $arrows = !empty($settings['arrows']) || false;

    $pagination = !empty($settings['pagination']) || false;
    $pagination_type = $settings['pagination_carousel_type'];
    $opts = [
        'slide_direction'               => 'horizontal',
        'slide_percolumn'               => 1, 
        'slide_mode'                    => 'slide', 
        'slides_to_show'                => 1,
        'slides_to_show_xxl'            => $col_xxl,
        'slides_to_show_xl'             => $col_xl,
        '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'              => 1,
        '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)
    ]);

    $num = 1;
?>

<?php if (is_array($posts)): ?>
    <div class="pxl-swiper-slider pxl-case-studies-carousel pxl-case-studies-carousel1 pxl-swiper-custom pxl-swiper-boxshadow">
        <div class="pxl-carousel-inner">
            <div <?php pxl_print_html($widget->get_render_attribute_string( 'carousel' )); ?>>
                <div class="pxl-swiper-wrapper">
                    <?php foreach ($posts as $key => $post): ?>
                        <?php
                            $post_id = $post-> ID;
                            $img_id = get_post_thumbnail_id($post_id) ?? '';
                            $thumbnail_url =' solarva_get_thumbnail($img_id, $img_size, true )';
                            $thumbnail = solarva_get_thumbnail($img_id, $img_size );
                            $info1 = get_post_meta($post_id, 'portfolio_info1', true) ?? '';
                            $info2 = get_post_meta($post_id, 'portfolio_info2', true) ?? '';
                            $info3 = get_post_meta($post_id, 'portfolio_info3', true) ?? '';
                            $info = [$info1, $info2, $info3];
                            $animate_delay += 100;
                        ?>
                        <div class="pxl-swiper-slide <?php echo esc_attr($animate) ?>" data-wow-delay="<?php echo esc_attr($animate_delay.'ms'); ?>">
                            <!-- HTML -->
                            <div class="pxl-post--container" style="background-image: url('<?php echo esc_url($thumbnail_url); ?>')">
                                <div class="pxl-post--inner">
                                    <div class="pxl-post--featured">
                                        <?php pxl_print_html($thumbnail); ?>
                                    </div>
                                    <div class="pxl-post--content">
                                        <div class="pxl-content--top">
                                            <div class="pxl-post--category">
                                                <?php solarva_get_category_custom($post, 'ds', $post_type); ?>
                                            </div>
                                            <h3 class="pxl-post--title <?php echo esc_attr($title_hover_style); ?>">
                                                <a class="pxl-title--link" href="<?php echo esc_url(get_permalink($post_id)); ?>">
                                                    <?php echo esc_attr(get_the_title($post_id)); ?>
                                                </a>
                                            </h3>
                                        </div>
                                        <hr class="pxl-item--divider">
                                        <div class="pxl-content--bottom">
                                            <div class="pxl-info--list">
                                                <?php for($i=0; $i<3; $i++) : ?>
                                                    <?php $title_info = 'title_info'.(string)($i + 1); ?>
                                                    <div class="pxl-info--single">
                                                        <h6 class="pxl-info--label">
                                                            <?php echo esc_attr($settings[$title_info]. ' ' ); ?>
                                                        </h6>
                                                        <span class="pxl-info--text">
                                                            <?php echo esc_attr($info[$i]); ?>
                                                        </span>
                                                    </div>
                                                <?php endfor; ?>
                                            </div>
                                            <a href="<?php echo esc_url(get_permalink($post_id)); ?>" class="pxl-post--btn">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
                                                    <path class="main" d="M1.02962 2.1438C0.753898 2.1438 0.523129 2.0509 0.337315 1.86508C0.151501 1.67927 0.0585938 1.4515 0.0585938 1.18176C0.0585938 0.912035 0.151501 0.684263 0.337315 0.498449C0.523129 0.312634 0.753898 0.219727 1.02962 0.219727H17.0876C17.3633 0.219727 17.5941 0.312634 17.7799 0.498449C17.9657 0.684263 18.0586 0.915031 18.0586 1.19076V17.2487C18.0586 17.5244 17.9657 17.7552 17.7799 17.941C17.5941 18.1268 17.3663 18.2197 17.0966 18.2197C16.8268 18.2197 16.5991 18.1268 16.4132 17.941C16.2274 17.7552 16.1345 17.5244 16.1345 17.2487V3.51044L1.71294 17.932C1.52113 18.1238 1.29036 18.2197 1.02063 18.2197C0.750901 18.2197 0.523129 18.1268 0.337315 17.941C0.151501 17.7552 0.0585938 17.5274 0.0585938 17.2577C0.0585938 16.988 0.154498 16.7572 0.346306 16.5654L14.7679 2.1438H1.02962Z" fill="white"/>    
                                                    <path class="copy" d="M1.02962 2.1438C0.753898 2.1438 0.523129 2.0509 0.337315 1.86508C0.151501 1.67927 0.0585938 1.4515 0.0585938 1.18176C0.0585938 0.912035 0.151501 0.684263 0.337315 0.498449C0.523129 0.312634 0.753898 0.219727 1.02962 0.219727H17.0876C17.3633 0.219727 17.5941 0.312634 17.7799 0.498449C17.9657 0.684263 18.0586 0.915031 18.0586 1.19076V17.2487C18.0586 17.5244 17.9657 17.7552 17.7799 17.941C17.5941 18.1268 17.3663 18.2197 17.0966 18.2197C16.8268 18.2197 16.5991 18.1268 16.4132 17.941C16.2274 17.7552 16.1345 17.5244 16.1345 17.2487V3.51044L1.71294 17.932C1.52113 18.1238 1.29036 18.2197 1.02063 18.2197C0.750901 18.2197 0.523129 18.1268 0.337315 17.941C0.151501 17.7552 0.0585938 17.5274 0.0585938 17.2577C0.0585938 16.988 0.154498 16.7572 0.346306 16.5654L14.7679 2.1438H1.02962Z" fill="white"/>
                                                </svg>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>    
                    <?php endforeach; ?>
                </div> 
            </div>
            
            <?php if ($pagination): ?>
                <div class="pxl-swiper-dots-wrap">
                    <div class="pxl-swiper-dots pxl-swiper-dots1"></div>
                </div>
            <?php endif; ?>
            <?php if ($arrows): ?>
                <div class="pxl-swiper-arrow-wrap">
                    <div class="pxl-swiper-arrows pxl-swiper-arrows1">
                        <div class="pxl-swiper-arrow pxl-swiper-arrow-prev">
                            <svg xmlns="http://www.w3.org/2000/svg" width="10" height="18" viewBox="0 0 10 18" fill="none">
                                <path d="M1.61719 7.96875L0.585938 9L8.83594 17.25L9.86719 16.2187L2.64844 9L9.86719 1.78125L8.83594 0.749998L4.71094 4.875L1.61719 7.96875Z" fill="#003973"/>
                            </svg>
                        </div>
                        <div class="pxl-swiper-arrow pxl-swiper-arrow-next">
                            <svg xmlns="http://www.w3.org/2000/svg" width="10" height="18" viewBox="0 0 10 18" fill="none">
                                <path d="M8.38281 10.0312L9.41406 9L1.07812 0.749998L0.046875 1.78125L7.26562 9L0.046875 16.2187L1.07812 17.25L5.28906 13.125L8.38281 10.0312Z" fill="#003973"/>
                            </svg>
                        </div>
                    </div>
                </div>
            <?php endif; ?>

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