<?php 
/**
 * Template part for displaying About Us Section
 *
 * @package Artist Painter
 */

$artist_painter_about = get_theme_mod( 'artist_painter_about_setting',false );
$artist_painter_featured_mission_section_title = get_theme_mod( 'artist_painter_featured_mission_section_title' );
$artist_painter_featured_mission_section_extra_title = get_theme_mod( 'artist_painter_featured_mission_section_extra_title' );
$artist_painter_featured_mission_section_extra_content = get_theme_mod( 'artist_painter_featured_mission_section_extra_content' );
$artist_painter_svg_image = file_get_contents(get_template_directory_uri() . '/images/brush.svg');
$artist_painter_banner_social_icon = get_theme_mod( 'artist_painter_banner_social_icon_setting', false);
?>
<?php if ( $artist_painter_about ){?>
    <div id="about-section" class="section-content py-5">
        <div class="container">        
            <div class="row">
                <div class="col-lg-6 col-md-6 col-12 align-self-center about-us position-relative">
                    <!-- Video Poster Image -->
                    <div class="image-container position-relative wow zoomInUp delay-1000" data-wow-duration="2s">
                        <img src="<?php echo esc_url(get_stylesheet_directory_uri() . '/images/about.png'); ?>">                                             
                        <?php if ( get_theme_mod('artist_painter_about_us_video_button_url') != '' ) : ?>
                            <!-- Play Button -->
                            <div class="play-btn">
                                <a id="openModalButton" 
                                    data-modal-src="<?php echo esc_url(get_theme_mod('artist_painter_about_us_video_button_url')); ?>" 
                                    class="about-video-btn position-absolute top-50 start-50 translate-middle">
                                    <i class="fa-solid fa-play"></i>
                                </a>
                            </div>
                        <?php endif; ?>
                    </div>

                    <!-- Modal -->
                    <div id="myModal" class="modal">
                        <div class="modal-content">
                            <span id="closeModalButton" class="close">&times;</span>
                            <div id="videoContainer">
                                <iframe id="videoPlayer" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12 align-self-center side-1">
                    <header class="entry-header">
                        <div class="section-title">
                            <span class="brush-bg"><?php echo $artist_painter_svg_image; ?></span>
                            <?php if ( !empty($artist_painter_featured_mission_section_extra_title) ) : ?>
                                <span class="extra-title"><?php echo esc_html($artist_painter_featured_mission_section_extra_title); ?></span>
                            <?php endif; ?>
                            <?php if ( !empty($artist_painter_featured_mission_section_title) ) : ?>
                                <h3><?php echo esc_html($artist_painter_featured_mission_section_title); ?></h3>
                            <?php endif; ?>
                        </div>
                    </header>
                    <div class="entry-content">
                        <p class="mb-0"><?php echo wp_trim_words( get_the_content(), 100 ); ?></p>
                        <?php if ( !empty($artist_painter_featured_mission_section_extra_content) ) : ?>
                            <p class="extra-content"><?php echo esc_html($artist_painter_featured_mission_section_extra_content); ?></p>
                        <?php endif; ?>
                    </div>

                    <?php if ( $artist_painter_banner_social_icon ) { ?>
                        <div class="social-links">
                            <?php 
                            $artist_painter_banner_social_link1   = get_theme_mod( 'artist_painter_banner_social_link_1' );
                            $artist_painter_banner_social_link2   = get_theme_mod( 'artist_painter_banner_social_link_2' );
                            $artist_painter_banner_social_link3   = get_theme_mod( 'artist_painter_banner_social_link_3' );
                            $artist_painter_banner_social_link4   = get_theme_mod( 'artist_painter_banner_social_link_4' );
                            $artist_painter_banner_social_link5   = get_theme_mod( 'artist_painter_banner_social_link_5' );
                            $artist_painter_banner_social_link6   = get_theme_mod( 'artist_painter_banner_social_link_6' );
                            ?>

                            <?php if ( ! empty( $artist_painter_banner_social_link1 ) ) { ?>
                                <a class="social1 wow zoomInUp delay-1000" data-wow-duration="2s" href="<?php echo esc_url( $artist_painter_banner_social_link1 ); ?>" target="_blank">
                                    <div class="social-item">                                  
                                        <img src="<?php echo esc_url(get_stylesheet_directory_uri() . '/images/facebook.png'); ?>"> 
                                        <p><?php echo esc_html__( 'Facebook Live', 'artist-painter' ); ?></p>
                                    </div>
                                </a>                               
                            <?php } ?>

                            <?php if ( ! empty( $artist_painter_banner_social_link2 ) ) { ?>
                                <a class="social1 wow zoomInUp delay-2000" data-wow-duration="2s" href="<?php echo esc_url( $artist_painter_banner_social_link2 ); ?>" target="_blank">
                                    <div class="social-item">                              
                                        <img src="<?php echo esc_url(get_stylesheet_directory_uri() . '/images/youtube.png'); ?>">                                  
                                        <p><?php echo esc_html__( 'YouTube Live', 'artist-painter' ); ?></p>
                                    </div>
                                </a>
                            <?php } ?>

                            <?php if ( ! empty( $artist_painter_banner_social_link5 ) ) { ?>
                                <a class="social1 wow zoomInUp delay-3000" data-wow-duration="2s" href="<?php echo esc_url( $artist_painter_banner_social_link5 ); ?>" target="_blank">
                                    <div class="social-item">                                  
                                        <img src="<?php echo esc_url(get_stylesheet_directory_uri() . '/images/whatsapp.png'); ?>">                                
                                        <p><?php echo esc_html__( 'Whatsapp Live', 'artist-painter' ); ?></p>
                                    </div>
                                </a>
                            <?php } ?>

                            <?php if ( ! empty( $artist_painter_banner_social_link3 ) ) { ?>
                                <a class="social1 wow zoomInUp delay-4000" data-wow-duration="2s" href="<?php echo esc_url( $artist_painter_banner_social_link3 ); ?>" target="_blank">
                                    <div class="social-item">                                  
                                        <img src="<?php echo esc_url(get_stylesheet_directory_uri() . '/images/instagram.png'); ?>">                                
                                        <p><?php echo esc_html__( 'Instagram Live', 'artist-painter' ); ?></p>
                                    </div>
                                </a>
                            <?php } ?>

                            <?php if ( ! empty( $artist_painter_banner_social_link4 ) ) { ?>
                                <a class="social1 wow zoomInUp delay-5000" data-wow-duration="2s" href="<?php echo esc_url( $artist_painter_banner_social_link4 ); ?>" target="_blank">
                                    <div class="social-item">                                
                                        <img src="<?php echo esc_url(get_stylesheet_directory_uri() . '/images/telecast.png'); ?>">                                   
                                        <p><?php echo esc_html__( 'Live Telecast', 'artist-painter' ); ?></p>
                                    </div>
                                </a>
                            <?php } ?>

                            <?php if ( ! empty( $artist_painter_banner_social_link6 ) ) { ?>
                                <a class="social1 wow zoomInUp delay-6000" data-wow-duration="2s" href="<?php echo esc_url( $artist_painter_banner_social_link6 ); ?>" target="_blank">
                                    <div class="social-item">                                  
                                        <img src="<?php echo esc_url(get_stylesheet_directory_uri() . '/images/twitter.png'); ?>">                                
                                        <p><?php echo esc_html__( 'Twitter Live', 'artist-painter' ); ?></p>
                                    </div>
                                </a>
                            <?php } ?>
                        </div>
                    <?php } ?>
                </div>                    
            </div>
            <?php wp_reset_postdata(); ?>
        </div>
    </div>
<?php } ?>