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

get_header();
?>

<main id="primary">

    <?php 
    $fashion_outfit_main_slider_wrap = absint(get_theme_mod('fashion_outfit_enable_slider', 0));
    if($fashion_outfit_main_slider_wrap == 1){ 
    ?>

    <section id="main-slider-wrap">
        <div class="main-slider-container">
            <div class="main-slider">
                <div class="owl-carousel">
                    <?php for ($fashion_outfit_main_i=1; $fashion_outfit_main_i <= 3; $fashion_outfit_main_i++) { ?>
                        <?php if ( get_theme_mod('fashion_outfit_slider_image'.$fashion_outfit_main_i) || get_theme_mod('fashion_outfit_slider_heading'.$fashion_outfit_main_i) || get_theme_mod('fashion_outfit_slider_text'.fashion_outfit_main_i) || get_theme_mod('fashion_outfit_slider_button1_text'.$fashion_outfit_main_i) || get_theme_mod('fashion_outfit_slider_button1_link'.$fashion_outfit_main_i) || get_theme_mod('fashion_outfit_slider_button2_link'.$fashion_outfit_main_i) || get_theme_mod('fashion_outfit_slider_button2_text'.$fashion_outfit_main_i) ) : ?>
                            <div class="main-slider-inner-box">
                                <?php if ( get_theme_mod('fashion_outfit_slider_image'.$fashion_outfit_main_i) ) : ?>
                                    <img src="<?php echo esc_url( get_theme_mod('fashion_outfit_slider_image'.$fashion_outfit_main_i) ); ?>">
                                <?php else : ?>
                                    <div class="image-box"></div>
                                <?php endif; ?>
                                <?php if ( get_theme_mod('fashion_outfit_slider_top_text'.$fashion_outfit_main_i) || get_theme_mod('fashion_outfit_slider_text'.$fashion_outfit_main_i) || get_theme_mod('fashion_outfit_slider_heading'.$fashion_outfit_main_i) || get_theme_mod('fashion_outfit_slider_text'.$fashion_outfit_main_i) || get_theme_mod('fashion_outfit_slider_button1_text'.$fashion_outfit_main_i) || get_theme_mod('fashion_outfit_slider_button1_link'.$fashion_outfit_main_i) || get_theme_mod('fashion_outfit_slider_button2_link'.$fashion_outfit_main_i) || get_theme_mod('fashion_outfit_slider_button2_text'.$fashion_outfit_main_i) ) : ?>
                                    <div class="main-slider-content-box">
                                        <?php if ( get_theme_mod('fashion_outfit_slider_top_text'.$fashion_outfit_main_i) ) : ?><p class="slider-top"><?php echo esc_html( get_theme_mod('fashion_outfit_slider_top_text'.$fashion_outfit_main_i) ); ?></p><?php endif; ?>
                                        <?php if ( get_theme_mod('fashion_outfit_slider_heading'.$fashion_outfit_main_i) ) : ?><h1><?php echo esc_html( get_theme_mod('fashion_outfit_slider_heading'.$fashion_outfit_main_i) ); ?></h1><?php endif; ?>
                                        <?php if ( get_theme_mod('fashion_outfit_slider_text'.$fashion_outfit_main_i) ) : ?><p><?php echo esc_html( get_theme_mod('fashion_outfit_slider_text'.$fashion_outfit_main_i) ); ?></p><?php endif; ?>
                                        <div class="main-slider-button">
                                            <?php if ( get_theme_mod('fashion_outfit_slider_button1_link'.$fashion_outfit_main_i) ||  get_theme_mod('fashion_outfit_slider_button1_text'.$fashion_outfit_main_i )) : ?><a class="slide-btn-1" href="<?php echo esc_url( get_theme_mod('fashion_outfit_slider_button1_link'.$fashion_outfit_main_i) ); ?>"><?php echo esc_html( get_theme_mod('fashion_outfit_slider_button1_text'.$fashion_outfit_main_i) ); ?><i class="fas fa-angle-double-right"></i></a><?php endif; ?>
                                            <?php if ( get_theme_mod('fashion_outfit_slider_button2_link'.$fashion_outfit_main_i) ||  get_theme_mod('fashion_outfit_slider_button2_text'.$fashion_outfit_main_i )) : ?><a class="slide-btn-2" href="<?php echo esc_url( get_theme_mod('fashion_outfit_slider_button2_link'.$fashion_outfit_main_i) ); ?>"><?php echo esc_html( get_theme_mod('fashion_outfit_slider_button2_text'.$fashion_outfit_main_i) ); ?><i class="fas fa-angle-double-right"></i></a><?php endif; ?>
                                        </div>
                                    </div>
                                <?php endif; ?>
                            </div>
                        <?php endif; ?>
                    <?php } ?>
                </div>
            </div>
            <div class="thumbnail-slider">
                <div class="owl-carousel">
                    <?php for ($fashion_outfit_main_i=1; $fashion_outfit_main_i <= 3; $fashion_outfit_main_i++) { ?>
                        <?php if ( get_theme_mod('fashion_outfit_slider_image'.$fashion_outfit_main_i) ) : ?>
                            <img src="<?php echo esc_url( get_theme_mod('fashion_outfit_slider_image'.$fashion_outfit_main_i) ); ?>" alt="Thumbnail Image <?php echo $fashion_outfit_main_i; ?>">
                        <?php endif; ?>
                    <?php } ?>
                </div>
            </div>
        </div>
    </section>
    <?php } ?>

    <?php 
    $fashion_outfit_main_expert_wrap = absint(get_theme_mod('fashion_outfit_enable_new_arrivals', 0));
    if($fashion_outfit_main_expert_wrap == 1){ 
    ?>

    <section id="main-expert-wrap">
        <div class="container">
            <div class="heading-expert-wrap">
                <?php if ( get_theme_mod('fashion_outfit_product_top_heading') ) : ?><p class="product-top"><?php echo esc_html( get_theme_mod('fashion_outfit_product_top_heading') ); ?></p><?php endif; ?>
                <?php if ( get_theme_mod('fashion_outfit_product_main_heading') ) : ?><h2><?php echo esc_html( get_theme_mod('fashion_outfit_product_main_heading') ); ?></h2><?php endif; ?>
                <?php if ( get_theme_mod('fashion_outfit_product_content') ) : ?><p class="product-content"><?php echo esc_html( get_theme_mod('fashion_outfit_product_content') ); ?></p><?php endif; ?>
            </div>
            <div class="flex-row">
                <?php if ( class_exists( 'WooCommerce' ) ) {
                    $fashion_outfit_args = array( 
                        'post_type' => 'product',
                        'product_cat' => get_theme_mod('fashion_outfit_product_category'),
                        'order' => 'ASC',
                        'posts_per_page' => '10'
                    );
                    $fashion_outfit_loop = new WP_Query( $fashion_outfit_args );
                    while ( $fashion_outfit_loop->have_posts() ) : $fashion_outfit_loop->the_post(); global $product; ?>         
                        <div class="product-box">
                            <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="icons">
                                    <div class="wishlistbox">
                                        <i class="far fa-heart"></i>
                                    </div>
                                    <div class="bottom-icons">
                                        <a href="<?php echo esc_url($product->add_to_cart_url()); ?>" class="button add_to_cart_button">
                                            <i class="fas fa-cart-plus"></i>
                                        </a>
                                        <div class="share-icon">
                                            <i class="fas fa-share-alt share-box"></i>
                                            <div class="share-options">
                                                <a href="<?php echo esc_url( get_theme_mod('fashion_outfit_product_social_link1', 'https://facebook.com') ); ?>" target="_blank"><i class="fab fa-facebook-f"></i></a>
                                                <a href="<?php echo esc_url( get_theme_mod('fashion_outfit_product_social_link2','https://twitter.com') ); ?>" target="_blank"><i class="fab fa-twitter"></i></a>
                                                <a href="<?php echo esc_url( get_theme_mod('fashion_outfit_product_social_link3','https://instagram.com') ); ?>" target="_blank"><i class="fab fa-instagram"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="product-content text-center">
                                <h3 class="product-heading-text"><a href="<?php echo esc_url(get_permalink($fashion_outfit_loop->post->ID)); ?>"><?php the_title(); ?></a></h3>
                                <div class="product-price-box">
                                    <p class="product-price <?php echo esc_attr(apply_filters('woocommerce_product_price_class', 'price')); ?>"><?php echo $product->get_price_html(); ?></p>
                                </div>
                            </div>
                        </div>

                    <?php endwhile; wp_reset_postdata(); ?>
                <?php } ?>
            </div>
        </div>
    </section>


    <?php } ?>
    
</main>

<?php
get_footer();