<?php
/**
 * The Template Name: Home Page
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package Mobile Accessories Shop
 */

get_header(); ?>

<div id="content" >
    <?php
        $mobile_accessories_shop_banner = get_theme_mod('mobile_accessories_shop_banner', false);
        if ($mobile_accessories_shop_banner) { ?>
        <section id="banner-section" class="position-relative mx-xl-4 mx-lg-3 mx-md-2 mx-1 py-4">
            <div class="container wow zoomInLeft">
                <div class="row">
                    <div class="col-xl-6 col-lg-6 col-md-6 col-12 align-self-center banner-left-content">
                        <div class="main-content-box pb-5 text-lg-start text-md-start text-center">
                            <?php if (get_theme_mod('mobile_accessories_shop_banner_title') != "") { ?>
                                <h1 class="banner-title text-capitalize mb-4"><?php echo esc_html(get_theme_mod('mobile_accessories_shop_banner_title')); ?></h1>
                            <?php } ?>
                            <?php if (get_theme_mod('mobile_accessories_shop_banner_description') != "") { ?>
                                <p class="banner-text mb-4"><?php echo esc_html(get_theme_mod('mobile_accessories_shop_banner_description')); ?></p>
                            <?php } ?>
                            <?php if ( get_theme_mod('mobile_accessories_shop_banner_btn_text') || get_theme_mod('mobile_accessories_shop_banner_btn_url')) { ?>
                                <div class="banner-btn">
                                    <a href="<?php echo esc_url(get_theme_mod ('mobile_accessories_shop_banner_btn_url')); ?>" class="text-capitalize"><?php echo esc_html(get_theme_mod ('mobile_accessories_shop_banner_btn_text')); ?><i class="fa-solid fa-angles-right ps-3"></i></a>
                                </div>
                            <?php }?>
                        </div>
                        <?php if ( class_exists( 'WooCommerce' ) ) {
                            $mobile_accessories_shop_selected_product_id = get_theme_mod('mobile_accessories_shop_slider_product', '');
                            if (!empty($mobile_accessories_shop_selected_product_id)) {
                               $mobile_accessories_shop_args = array(
                                    'post_type'      => 'product',
                                    'p'              => $mobile_accessories_shop_selected_product_id,
                                    'posts_per_page' => 1,
                                    'order'          => 'ASC',
                                );
                                $mobile_accessories_shop_loop = new WP_Query($mobile_accessories_shop_args);
                                while ($mobile_accessories_shop_loop->have_posts()) : $mobile_accessories_shop_loop->the_post();
                                    global $product; ?>
                                    <div class="banner-product-box position-relative p-4">
                                        <div class="row">
                                            <div class="col-xl-5 col-lg-5 col-md-5 col-12 align-self-center">
                                                <div class="banner-product-img text-center">
                                                    <?php if (has_post_thumbnail($mobile_accessories_shop_loop->post->ID)) {
                                                        echo get_the_post_thumbnail($mobile_accessories_shop_loop->post->ID, 'shop_catalog', array('class' => 'product-img'));
                                                    } else {
                                                        echo '<img class="product-img" src="' . esc_url(woocommerce_placeholder_img_src()) . '" />';
                                                    } ?>
                                                </div>
                                            </div>
                                            <div class="col-xl-7 col-lg-7 col-md-7 col-12 align-self-center">
                                                <div class="banner-product-content">
                                                    <div class="row">
                                                        <div class="col-xl-11 col-lg-11 col-md-11 col-12 align-self-center text-lg-start text-md-start text-center mt-lg-0 mt-md-0 mt-3">
                                                            <h4 class="banner-product-title text-capitalize mb-4"><a href="<?php echo esc_url(get_permalink($mobile_accessories_shop_loop->post->ID)); ?>"><?php the_title(); ?></a></h4>
                                                            <p class="banner-product-text mb-0">
                                                                <?php 
                                                                    $mobile_accessories_shop_product_description = $product->get_description(); 
                                                                    $mobile_accessories_shop_excerpt_length = 40; // number of words
                                                                    $mobile_accessories_shop_product_description_excerpt = wp_trim_words($mobile_accessories_shop_product_description, $mobile_accessories_shop_excerpt_length, '...');
                                                                    echo $mobile_accessories_shop_product_description_excerpt;
                                                                ?>
                                                            </p>
                                                        </div>
                                                        <div class="col-xl-1 col-lg-1 col-md-1 col-12 text-center banner-product-btn">
                                                            <a href="<?php the_permalink(); ?>" class="banner-product-btn-link position-absolute"><i class="fa-solid fa-angles-right"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                <?php endwhile;
                            wp_reset_postdata();
                        }} ?>
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-12 text-center banner-right-img align-self-center my-lg-0 my-md-0 my-4">
                        <?php if (get_theme_mod('mobile_accessories_shop_banner_side_img') != "") { ?>
                            <img src="<?php echo esc_url(get_theme_mod('mobile_accessories_shop_banner_side_img')); ?>" alt="<?php echo esc_attr( 'banner', 'mobile-accessories-shop'); ?>"/>
                        <?php }?>
                    </div>
                </div>
            </div>
            <div class="social-icons d-flex gap-3 flex-column position-absolute">
                <?php if ( get_theme_mod('mobile_accessories_shop_facebook_url')) { ?>
                    <a href="<?php echo esc_url(get_theme_mod ('mobile_accessories_shop_facebook_url')); ?>" target="_blank" class="text-capitalize"><i class="fa-brands fa-facebook"></i></a>
                <?php }?>
                <?php if ( get_theme_mod('mobile_accessories_shop_instagram_url')) { ?>
                    <a href="<?php echo esc_url(get_theme_mod ('mobile_accessories_shop_instagram_url')); ?>" target="_blank" class="text-capitalize"><i class="fa-brands fa-square-instagram"></i></a>
                <?php }?>
                <?php if ( get_theme_mod('mobile_accessories_shop_twitter_url')) { ?>
                    <a href="<?php echo esc_url(get_theme_mod ('mobile_accessories_shop_twitter_url')); ?>" target="_blank" class="text-capitalize"><i class="fa-brands fa-square-x-twitter"></i></a>
                <?php }?>
                <?php if ( get_theme_mod('mobile_accessories_shop_youtube_url')) { ?>
                    <a href="<?php echo esc_url(get_theme_mod ('mobile_accessories_shop_youtube_url')); ?>" target="_blank" class="text-capitalize"><i class="fa-brands fa-square-youtube"></i></a>
                <?php }?>
                <?php if ( get_theme_mod('mobile_accessories_shop_pinterest_url')) { ?>
                    <a href="<?php echo esc_url(get_theme_mod ('mobile_accessories_shop_pinterest_url')); ?>" target="_blank" class="text-capitalize"><i class="fa-brands fa-pinterest"></i></a>
                <?php }?>
            </div>
        </section>
    <?php } ?>

    <!-- Best Seller Section -->
    <?php
        $mobile_accessories_shop_hide_best_seller_section = get_theme_mod('mobile_accessories_shop_disabled_best_seller_section', false);
        if ($mobile_accessories_shop_hide_best_seller_section){ ?>
        <section id="best-seller-section" class="position-relative py-5 wow zoomIn">
            <div class="container">
                <div class="blog-bx text-center mb-4">
                    <?php if (get_theme_mod('mobile_accessories_shop_best_seller_title') != "") { ?>
                        <h2 class="best-seller-title text-capitalize position-relative d-inline-flex pb-2"><?php echo esc_html(get_theme_mod('mobile_accessories_shop_best_seller_title')); ?></h2>
                    <?php } ?>
                    <?php if (get_theme_mod('mobile_accessories_shop_best_seller_text') != "") { ?>
                        <p class="best-seller-text text-capitalize"><?php echo esc_html(get_theme_mod('mobile_accessories_shop_best_seller_text')); ?></p>
                    <?php } ?>
                </div> 
                <div class="best-seller-products">
                    <?php 
                        if (class_exists('woocommerce')) {
                            $mobile_accessories_shop_selected_product_category = get_theme_mod('mobile_accessories_shop_products_cat');
                            if ($mobile_accessories_shop_selected_product_category && $mobile_accessories_shop_selected_product_category !== 'select') {
                                $mobile_accessories_shop_args = array(
                                    'post_type' => 'product',
                                    'product_cat' => $mobile_accessories_shop_selected_product_category,
                                    'order' => 'ASC',
                                    'posts_per_page' => 5
                                );
                                $mobile_accessories_shop_loop = new WP_Query($mobile_accessories_shop_args);
                                
                                if ($mobile_accessories_shop_loop->have_posts()) {
                                    while ($mobile_accessories_shop_loop->have_posts()) : $mobile_accessories_shop_loop->the_post();
                                        global $product;
                                    ?>
                                    <div class="product-main-box">
                                        <div class="product-box-img text-center position-relative">
                                            <?php if (has_post_thumbnail($mobile_accessories_shop_loop->post->ID)) {
                                                echo get_the_post_thumbnail($mobile_accessories_shop_loop->post->ID, 'shop_catalog', array('class' => 'product-img'));
                                            } else {
                                                echo '<img class="product-img" src="' . esc_url(woocommerce_placeholder_img_src()) . '" />';
                                            } ?>
                                            <div class="product-content-box position-absolute">
                                                <div class="row">
                                                    <div class="col-xl-9 col-lg-9 col-md-10 col-9 align-self-center text-start">
                                                        <h3 class="best-product-title text-capitalize mb-1"><a href="<?php echo esc_url(get_permalink($mobile_accessories_shop_loop->post->ID)); ?>"><?php the_title(); ?></a></h3>
                                                        <p class="product-text mb-0">
                                                            <?php 
                                                                $mobile_accessories_shop_product_description = $product->get_description(); 
                                                                $mobile_accessories_shop_excerpt_length = 10; // number of words
                                                                $mobile_accessories_shop_product_description_excerpt = wp_trim_words($mobile_accessories_shop_product_description, $mobile_accessories_shop_excerpt_length, '...');
                                                                echo $mobile_accessories_shop_product_description_excerpt;
                                                            ?>
                                                        </p>
                                                    </div>
                                                    <div class="col-xl-3 col-lg-3 col-md-2 col-3 align-self-center text-end best-product-btn">
                                                        <a href="<?php the_permalink(); ?>" class="product-link-button"><i class="fa-solid fa-angles-right"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <?php endwhile; 
                                    wp_reset_postdata();
                                }
                            }
                        }
                    ?>
                </div>
            </div>
        </section>
    <?php } ?>
</div>
<?php get_footer(); ?>