<?php
/**
 * Banner Section
 * 
 * @package plumber_workshop
 */
$plumber_workshop_slider = get_theme_mod('plumber_workshop_slider_setting', false);
$plumber_workshop_args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'category_name' => get_theme_mod('plumber_workshop_blog_slide_category'),
    'posts_per_page' => 3,
);
?>

<?php if ($plumber_workshop_slider): ?>
    <div class="banner">
        <div class="owl-carousel">
            <?php
            $plumber_workshop_arr_posts = new WP_Query($plumber_workshop_args);
            if ($plumber_workshop_arr_posts->have_posts()) :
                while ($plumber_workshop_arr_posts->have_posts()) :
                    $plumber_workshop_arr_posts->the_post();
                    ?>
                    <div class="banner_inner_box">
                        <?php if (has_post_thumbnail()): ?>
                            <?php the_post_thumbnail(); ?>
                        <?php else: ?>
                            <div class="banner_inner_box">
                                <img src="<?php echo get_stylesheet_directory_uri() . '/images/default-header.png'; ?>">
                            </div>
                        <?php endif; ?>
                        <div class="banner_box">
                            <h3 class="my-3"><?php the_title(); ?></h3>
                            <p class="mb-0"><?php echo wp_trim_words(get_the_content(), 30); ?></p>
                            <p class="btn-green mt-4">
                                <a href="<?php echo esc_url(get_permalink($post->ID)); ?>"><?php esc_html_e('Read More', 'plumber-workshop'); ?></a>
                            </p>
                        </div>
                    </div>
                <?php endwhile; ?>
                <?php wp_reset_postdata(); ?>
            <?php endif; ?>
        </div>

        <?php
        $plumber_workshop_social_icon = get_theme_mod('plumber_workshop_social_icon_setting', false);
        if ($plumber_workshop_social_icon):
        ?>
            <div class="social-links">
                <?php
                $plumber_workshop_social_link1 = get_theme_mod('plumber_workshop_social_link_1');
                $plumber_workshop_social_link2 = get_theme_mod('plumber_workshop_social_link_2');
                $plumber_workshop_social_link3 = get_theme_mod('plumber_workshop_social_link_3');
                $plumber_workshop_social_link4 = get_theme_mod('plumber_workshop_social_link_4');

                if (!empty($plumber_workshop_social_link1)) {
                    echo '<a class="social1" href="' . esc_url($plumber_workshop_social_link1) . '" target="_blank"><i class="fab fa-facebook-f"></i></a>';
                }
                if (!empty($plumber_workshop_social_link2)) {
                    echo '<a class="social2" href="' . esc_url($plumber_workshop_social_link2) . '" target="_blank"><i class="fab fa-twitter"></i></a>';
                }
                if (!empty($plumber_workshop_social_link3)) {
                    echo '<a class="social3" href="' . esc_url($plumber_workshop_social_link3) . '" target="_blank"><i class="fab fa-instagram"></i></a>';
                }
                if (!empty($plumber_workshop_social_link4)) {
                    echo '<a class="social4" href="' . esc_url($plumber_workshop_social_link4) . '" target="_blank"><i class="fab fa-pinterest-p"></i></a>';
                }
                ?>
            </div>
        <?php endif; ?>

        <div class="banner-video-image wow zoomIn" data-wow-duration="2s">
            <?php 
            $plumber_workshop_featured_mission_posts = array(get_theme_mod('plumber_workshop_featured_mission_post_'));
            $args = array(
                'post_type' => 'page',
                'posts_per_page' => 1,
                'post__in' => $plumber_workshop_featured_mission_posts,
                'orderby' => 'post__in',
                'ignore_sticky_posts' => true,
            );
            $loop = new WP_Query($args);
            if ($loop->have_posts()):
                while ($loop->have_posts()): $loop->the_post();
                    ?>
                    <div class="featured-mission-box">
                        <?php if (has_post_thumbnail()): ?>
                            <?php the_post_thumbnail(); ?>
                            <div class="page-btn">
                                <h5><i class="fas fa-link"></i><?php the_title(); ?></h5>
                            </div>
                        <?php else: ?>
                            <div class="image-container">
                                <img src="<?php echo get_stylesheet_directory_uri() . '/images/default-header.png'; ?>">
                            </div>
                            <div class="page-btn">
                                <h5><i class="fas fa-link"></i><?php the_title(); ?></h5>
                            </div>
                        <?php endif; ?>
                    </div>
                <?php endwhile; ?>
            <?php endif; ?>
            <?php wp_reset_postdata(); ?>
        
            <!-- Button to open the modal -->
            <a id="openModalButton" data-modal-src="<?php echo esc_url(get_theme_mod('plumber_workshop_banner_video_url')); ?>">
                <i class="fa-solid fa-play"></i>
            </a>

            <!-- The modal -->
            <div id="myModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                    <span id="closeModalButton" class="close">&times;</span>
                    <?php if (get_theme_mod('plumber_workshop_banner_video_url') != ''): ?>
                        <embed id="videoPlayer" height="369" src="<?php echo esc_url(get_theme_mod('plumber_workshop_banner_video_url')); ?>" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></embed>
                    <?php else: ?>
                        <h3><?php esc_html_e('Add Video Url In Customizer To Display Video Here', 'plumber-workshop'); ?></h3>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
<?php endif; ?>
