<?php
/**
 * Template Name: Home Page
 */

get_header();
?>

<main id="primary">
    <?php 
        $kids_activity_center_main_slider_wrap = absint(get_theme_mod('kids_activity_center_enable_slider', 0));

        if ($kids_activity_center_main_slider_wrap == 1): 
    ?>
        <section id="main-slider-wrap"  style="background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/revolution/assets/images/slider-shape.png');">
            <?php $kids_activity_center_about_bg = get_theme_mod('kids_activity_center_about_bg'); ?>
            <div class="image-wrapper wow zoomIn" data-wow-duration="1.5s" <?php echo empty($kids_activity_center_about_bg) ? 'no-image' : ''; ?>">
              <?php if (!empty($kids_activity_center_about_bg)) : ?>
                <img src="<?php echo esc_url($kids_activity_center_about_bg); ?>" alt="<?php echo esc_attr__('Background Image', 'kids-activity-center'); ?>" />
              <?php endif; ?>
            </div>
            <div class="slider-main">
                <div class="owl-carousel">
                    <?php for ($kids_activity_center_main_i = 1; $kids_activity_center_main_i <= 4; $kids_activity_center_main_i++): ?>
                        <?php 
                        $kids_activity_center_slider_image = get_theme_mod('kids_activity_center_slider_image' . $kids_activity_center_main_i);
                        if ($kids_activity_center_slider_image): 
                        ?>
                            <div class="main-slider-inner-box">
                                <div class="container">
                                    <div class="flex-row">
                                        <div class="slider-left">
                                            <div class="main-slider-content-box">
                                                <?php if ($kids_activity_center_topslider_text = get_theme_mod('kids_activity_center_topslider_text'.$kids_activity_center_main_i)): ?>
                                                    <p class="slider-top"><?php echo esc_html($kids_activity_center_topslider_text); ?></p>
                                                <?php endif; ?>
                                                <?php if ($kids_activity_center_heading = get_theme_mod('kids_activity_center_slider_heading' . $kids_activity_center_main_i)): ?>
                                                    <h1><?php echo esc_html($kids_activity_center_heading); ?></h1>
                                                <?php endif; ?>
                                                <?php if ($kids_activity_center_text = get_theme_mod('kids_activity_center_slider_text'.$kids_activity_center_main_i)): ?>
                                                    <p class="slider-content"><?php echo esc_html($kids_activity_center_text); ?></p>
                                                <?php endif; ?>
                                                <div class="main-slider-button">
                                                    <?php if ( get_theme_mod('kids_activity_center_slider_button1_link'.$kids_activity_center_main_i) ||  get_theme_mod('kids_activity_center_slider_button1_text'.$kids_activity_center_main_i )) : ?><a class="slide-btn-1" href="<?php echo esc_url( get_theme_mod('kids_activity_center_slider_button1_link'.$kids_activity_center_main_i) ); ?>"><?php echo esc_html( get_theme_mod('kids_activity_center_slider_button1_text'.$kids_activity_center_main_i) ); ?></a><?php endif; ?>
                                                    <?php if ( get_theme_mod('kids_activity_center_slider_button2_link'.$kids_activity_center_main_i) ||  get_theme_mod('kids_activity_center_slider_button2_text'.$kids_activity_center_main_i )) : ?><a class="slide-btn-2" href="<?php echo esc_url( get_theme_mod('kids_activity_center_slider_button2_link'.$kids_activity_center_main_i) ); ?>"><?php echo esc_html( get_theme_mod('kids_activity_center_slider_button2_text'.$kids_activity_center_main_i) ); ?></a><?php endif; ?>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="slider-right wow zoomIn" data-wow-duration="1.5s">
                                            <img src="<?php echo esc_url($kids_activity_center_slider_image); ?>" alt="<?php echo esc_attr($kids_activity_center_heading); ?>">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endif; ?>
                    <?php endfor; ?>
                </div>
            </div>
            
            <div class="bottom-slider">
                <?php $kids_activity_center_lookbook_url = get_theme_mod('kids_activity_center_lookbook_url'); ?>
                <?php if (!empty($kids_activity_center_lookbook_url)) : ?>
                  <a href="<?php echo esc_url($kids_activity_center_lookbook_url); ?>" class="lookbook-button mb-4">
                    <span class="lookbook-text"><?php echo __('Lookbook', 'kids-activity-center'); ?></span>
                    <span class="lookbook-icon"><i class="fa fa-play"></i></span> <!-- Use any icon font or SVG -->
                  </a>
                <?php endif; ?>

                <div class="social-media">
                    <?php if ( get_theme_mod( 'kids_activity_center_slider_facebook_link_option','' ) ) : ?>
                        <a href="<?php echo esc_url( get_theme_mod( 'kids_activity_center_slider_facebook_link_option','' ) ); ?>" target="_blank" rel="noopener noreferrer">
                            <i class="fab fa-facebook"></i>
                        </a>
                    <?php endif; ?>
                    <?php if ( get_theme_mod( 'kids_activity_center_slider_twitter_link_option','' ) ) : ?>
                        <a href="<?php echo esc_url( get_theme_mod( 'kids_activity_center_slider_twitter_link_option','' ) ); ?>" target="_blank" rel="noopener noreferrer">
                            <i class="fab fa-twitter"></i>
                        </a>
                    <?php endif; ?>
                    <?php if ( get_theme_mod( 'kids_activity_center_slider_instagram_link_option','' ) ) : ?>
                        <a href="<?php echo esc_url( get_theme_mod( 'kids_activity_center_slider_instagram_link_option','' ) ); ?>" target="_blank" rel="noopener noreferrer">
                            <i class="fab fa-instagram"></i>
                        </a>
                    <?php endif; ?>
                    <?php if ( get_theme_mod( 'kids_activity_center_slider_pinterst_link_option','' ) ) : ?>
                        <a href="<?php echo esc_url( get_theme_mod( 'kids_activity_center_slider_pinterst_link_option','' ) ); ?>" target="_blank" rel="noopener noreferrer">
                            <i class="fab fa-pinterest-p"></i>
                        </a>
                    <?php endif; ?>
                </div>
            </div>
        </section>
    <?php endif; ?>

   <?php 
    $kids_activity_center_main_expert_wrap = absint(get_theme_mod('kids_activity_center_enable_product_section', 0));
    if($kids_activity_center_main_expert_wrap == 1){ 
    ?>
        <section id="main-expert-wrap">
            <div class="container">
                <div class="feature-left">
                    <?php if( get_theme_mod('kids_activity_center_projetcs_main_text') != '' ){ ?>
                        <p class="project-top-text"><?php echo esc_html(get_theme_mod('kids_activity_center_projetcs_main_text',''));?></p>
                    <?php }?>
                    <?php if ( get_theme_mod('kids_activity_center_product_section_heading') ) : ?><h2><?php echo esc_html( get_theme_mod('kids_activity_center_product_section_heading') ); ?></h2><?php endif; ?>
                </div>
                <div class="owl-carousel product-carousel">
                  <?php if ( class_exists( 'WooCommerce' ) ) {
                    $args = array( 
                      'post_type' => 'product',
                      'product_cat' => get_theme_mod('kids_activity_center_product_category'),
                      'order' => 'ASC',
                      'posts_per_page' => '10'
                    );
                    $loop = new WP_Query( $args );
                    while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>         
                        <div class="product-box wow zoomIn" data-wow-duration="2s">  
                              <div class="product-box-content">
                                <div class="product-outer">
                                    <div class="product-image">
                                        <?php 
                                            if ( has_post_thumbnail() ) {
                                                echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog' );
                                            } else {
                                                echo '<img src="' . esc_url(wc_placeholder_img_src()) . '" alt="Placeholder" />';
                                            }
                                        ?>
                                        <div class="sale-tag">
                                            <?php
                                            global $product;

                                            if ( $product->is_on_sale() && ! $product->is_type( 'variable' ) ) {
                                                $regular_price = floatval( $product->get_regular_price() );
                                                $sale_price    = floatval( $product->get_sale_price() );

                                                if ( $regular_price > 0 ) {
                                                    $discount = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
                                                    echo '-' . $discount . '%';
                                                }
                                            }
                                            ?>
                                        </div>
                                    </div>
                                        <h3 class="product-heading-text"><a href="<?php echo esc_url(get_permalink( $loop->post->ID )); ?>"><?php the_title(); ?></a></h3>
                                </div>
                              </div>
                        </div> 
                    <?php endwhile; wp_reset_postdata(); ?>
                    <?php } ?>
                </div>
            </div>
        </section>
    <?php } ?>  
</main>
<?php
get_footer();
?>