<?php
/**
 * Default theme — Home page
 *
 * @contract  Store API v1 — page: home
 * @see       Store_cart_payload::page_home()
 * @see       /store/api/v1/pages/home
 *
 * GLOBALS (always available via Storeapp::view)
 *   $store_setting  array   All store settings key-value map
 *   $client         array   Logged-in customer array; empty array if guest
 *   $home_link      string  Absolute URL to store homepage
 *   $settings       array   Alias of $store_setting
 *
 * PAGE VARIABLES
 *   $sliders          array   Homepage slider images [{id, image, title, sub, link}, ...]
 *   $featured         array   Featured products list [{id, name, price, image, link, ...}, ...]
 *   $categories       array   Root category list [{id, name, image, link}, ...]
 *   $new_products     array   Latest/newest products
 *   $store_info       array   Store name, description, logo etc.
 *   $best_sellers     array   Best-selling products (optional, may be empty)
 *   $special_offers   array   Products on sale / with discount codes (optional)
 */
?>
<?php if (($store_setting['homepage_slider_enabled'] ?? '1') !== '0'): ?>
<!-- Banner  -->
<section class="banner-slider">
	<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
		<div class="carousel-inner text-center text-white">
		<?php
		$homepage_slider = !empty($store_setting['homepage_slider']) ? json_decode($store_setting['homepage_slider']) : [];
		$homepage_slider = is_array($homepage_slider) ? $homepage_slider : [];
		for ($i=0; $i < count($homepage_slider); $i++) { 
			$homepage_slider_available = true;
		?>
			<div class="carousel-item <?= ($i==0) ? 'active' : ''; ?>">
				<div class="banner-caption" style="background-image: url(<?= (!empty($homepage_slider[$i]->slider_background_image)) ? base_url('assets/images/site/'. $homepage_slider[$i]->slider_background_image) : base_url('assets/store/default/img/banner.png') ?>);">
				<div class="banner-caption-inner">

				<?php $slider_text_color = (!empty($homepage_slider[$i]->slider_text_color)) ? $homepage_slider[$i]->slider_text_color : '#FFF'; ?>

				<?php if (!empty($homepage_slider[$i]->title)): ?>
				<h1 class="banner-slide-title" style="color: <?= $slider_text_color ?> !important;">
					<?= htmlentities($homepage_slider[$i]->title, ENT_QUOTES); ?>
				</h1>
				<?php endif; ?>

				<?php if (!empty($homepage_slider[$i]->sub_title)): ?>
				<p class="banner-slide-sub" style="color: <?= $slider_text_color ?> !important;">
					<?= htmlentities($homepage_slider[$i]->sub_title, ENT_QUOTES); ?>
				</p>
				<?php endif; ?>

				<?php if (!empty($homepage_slider[$i]->content)): ?>
				<p class="banner-slide-desc" style="color: <?= $slider_text_color ?> !important;">
					<?= htmlentities($homepage_slider[$i]->content, ENT_QUOTES); ?>
				</p>
				<?php endif; ?>

				<?php if(!empty($homepage_slider[$i]->button_text)): ?>
				<a href="<?= $homepage_slider[$i]->button_link; ?>" class="btn btn-slide-cta mt-3"
				   style="color: <?= (!empty($homepage_slider[$i]->button_text_color)) ? htmlspecialchars($homepage_slider[$i]->button_text_color) : '#333' ?> !important; background-color: <?= (!empty($homepage_slider[$i]->button_bg_color)) ? htmlspecialchars($homepage_slider[$i]->button_bg_color) : '#FFF' ?> !important;">
					<?= htmlspecialchars($homepage_slider[$i]->button_text); ?>&nbsp;<i class="fa fa-angle-right" aria-hidden="true"></i>
				</a>
				<?php endif; ?>
				</div>
				</div>
			</div>
		<?php	
		}

		// default homepage slide when no slides have been configured in admin
		if(!isset($homepage_slider_available)) {
			?>
			<div class="carousel-item active">
				<div class="banner-caption" style="background-image: url(<?= base_url('assets/store/default/img/demo-slide-1.jpg') ?>);">
				<div class="banner-caption-inner">
					<h1 class="banner-slide-title"><?= __('store.welcome_to_store') ?></h1>
					<p class="banner-slide-sub"><?= __('store.new_collection') ?></p>
					<p class="banner-slide-desc"><?= __('store.curated_collection_desc') ?></p>
					<a href="<?= base_url('store/category') ?>" class="btn btn-slide-cta mt-3"><?= __('store.shop_now') ?> &nbsp;<i class="fa fa-angle-right" aria-hidden="true"></i></a>
				</div>
				</div>
			</div>
			<?php
		}

		?>
		</div>
		<button class="carousel-control-prev bg-main2 border-0" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
			<img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/'); ?>img/slider-arrow.png" />
			<span class="visually-hidden"><?= __('store.previous') ?></span>
		</button>
		<button class="carousel-control-next bg-main2 border-0" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
			<img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/'); ?>img/slider-arrow.png" />
			<span class="visually-hidden"><?= __('store.next') ?></span>
		</button>
	</div>
</section>
<?php endif; /* homepage_slider_enabled */ ?>

<!-- Top tags -->
<section class="category-tag">
	<div class="container">
		<h3><?= __('store.top_tags') ?>:</h3>
		<ul class="category-listing">
			<?php if ($category_tags){ ?>
			<?php foreach ($category_tags as $key => $category_tag) { ?>
			<?php $has_top_tags = true; ?>
			<li><a href="<?= base_url('store/category/'. $category_tag['slug']) ?>"><?= $category_tag['name'] ?></a></li>
			<?php } ?>
			<?php } ?>
		
		<?php if (!isset($has_top_tags)) { ?>
			<li class="demo-cat-badge"><a href="#"><?= __('store.demo_tag_electronics') ?></a></li>
			<li class="demo-cat-badge"><a href="#"><?= __('store.demo_tag_fashion') ?></a></li>
			<li class="demo-cat-badge"><a href="#"><?= __('store.demo_tag_home') ?></a></li>
		<?php } ?>

			<li><a href="<?= $base_url ?>category" class="bg-main">+ <?= __('store.see_all_categories') ?></a></li>
		</ul>
	</div>
</section>
<!-- home page product grid -->
<section class="home-product-grid">
	<div class="container">
		<div class="home-trend-top d-flex justify-content-between">
			<h2 class="section-title">
			<img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/'); ?>img/package-b.png" /> <?= __('store.trending_products') ?>
			</h2>
			<div class="searchbox">
			<input id="searchProduct" type="text" placeholder="<?= __('store.search') ?>" />
			<img src="<?= base_url('assets/store/default/'); ?>img/search.png" class="search-icon-home" alt="<?= __('store.search') ?>">
			</div>
		</div>

		<div class="product-row d-flex flex-wrap product-list-trending">
			
		</div>
		<a href="javascript:void(0);" class="see-more see-more-trendings" data-next_page="1" data-request_page_section="trending">
			<img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/'); ?>img/loading.png" /> <?= __('store.show_more') ?>
		</a>
	</div>
</section>


<?php if (($store_setting['homepage_features_enabled'] ?? '1') !== '0'): ?>
<?php
$homepage_features = (isset($store_setting['homepage_features']) && !empty($store_setting['homepage_features'])) ? json_decode($store_setting['homepage_features']) : [];
?>
<!-- Home page feature box -->
<section class="stats-home">
	<div class="container">
		<div class="stats-row d-flex justify-content-center">
		<?php
		foreach($homepage_features as $hf) {
			$homepage_features_are_available = true;
		?>
			<?php $img = (!empty($hf->feature_image)) ? base_url('assets/images/site/'. $hf->feature_image) : base_url('assets/store/default/img/stats1.png'); ?>
			<div class="stats-box d-flex align-items-center mx-4">
			<div class="stats-icon">
				<img alt="<?= __('store.image') ?>" src="<?= $img; ?>" style="width: 65px; height: 65px;"/>
			</div>
			<div class="stats-text">
				<h4><?= $hf->title; ?></h4>
				<p><?= $hf->sub_title; ?></p>
			</div>
			</div>
		<?php	
		}

		if(!isset($homepage_features_are_available)) {
		?>
		<div class="stats-box d-flex align-items-center mx-4">
		<div class="stats-icon">
		<img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/')?>img/stats1.png" style="width: 65px; height: 65px;"/>
		</div>
		<div class="stats-text">
		<h4><?= __('store.free_shipping') ?></h4>
		<p><?= __('store.free_shipping_all_order') ?></p>
		</div>
		</div>

		<div class="stats-box d-flex align-items-center mx-4">
		<div class="stats-icon">
		<img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/')?>img/stats2.png" style="width: 65px; height: 65px;"/>
		</div>
		<div class="stats-text">
		<h4><?= __('store.100_money_guarantee') ?></h4>
		<p><?= __('store.30_days_money_back') ?></p>
		</div>
		</div>

		<div class="stats-box d-flex align-items-center mx-4">
		<div class="stats-icon">
		<img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/')?>img/stats3.png" style="width: 65px; height: 65px;"/>
		</div>
		<div class="stats-text">
		<h4><?= __('store.help_center') ?></h4>
		<p><?= __('store.24_7_support_system') ?></p>
		</div>
		</div>

		<div class="stats-box d-flex align-items-center mx-4">
		<div class="stats-icon">
		<img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/')?>img/stats4.png" style="width: 65px; height: 65px;"/>
		</div>
		<div class="stats-text">
		<h4><?= __('store.payment_method') ?></h4>
		<p><?= __('store.secure_payment') ?></p>
		</div>
		</div>
		<?php
		}
		?>
		</div>
	</div>
</section>
<?php endif; /* homepage_features_enabled */ ?>


<!-- New product box -->
<section class="home-new-products">
	<div class="container">
	<div class="home-trend-top d-flex justify-content-between">
		<h2 class="section-title color2">
		<img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/'); ?>img/package.png" /> <?= __('store.new_products') ?>
		</h2>
	<ul class="category-listing">
	<li class="demo-cat-badge"><a href="#"><?= __('store.demo_tag_electronics') ?></a></li>
	<li class="demo-cat-badge"><a href="#"><?= __('store.demo_tag_fashion') ?></a></li>
	<li class="demo-cat-badge"><a href="#"><?= __('store.demo_tag_home') ?></a></li>
	</ul>
	</div>

	<div class="product-row d-flex flex-wrap product-list-new">
	</div>

	<a href="javascript:void(0);" class="see-more see-more-new" data-next_page="1" data-request_page_section="new">
	<img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/'); ?>img/loading.png" /> <?= __('store.show_more') ?>
	</a>
	</div>
</section>

<?php if (($store_setting['homepage_banner_enabled'] ?? '1') !== '0'): ?>
<section class="banner-ads">
	<?php if(!empty($store_setting['hbanimage'])): ?>
		<img alt="<?= __('store.image') ?>" src="<?= base_url('assets/images/site/' . $store_setting['hbanimage']) ?>" class="img-fluid img-banner-ads" />
	<?php else: ?>
		<img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/img/demo-banner-ad.jpg') ?>" class="img-fluid img-banner-ads" onerror="this.onerror=null;this.style.display='none'" />
	<?php endif; ?>

	<?php $homepage_banner = (isset($store_setting['homepage_banner'])) ? json_decode($store_setting['homepage_banner']) : []; ?>

	<div class="ad-caption">
	<h3><?= (isset($homepage_banner->title) && !empty($homepage_banner->title)) ? $homepage_banner->title : __('store.demo_banner_title'); ?></h3>
	<p><?= (isset($homepage_banner->content) && !empty($homepage_banner->content)) ? $homepage_banner->content : __('store.demo_banner_content'); ?></p>
	<a href="<?= (isset($homepage_banner->button_link) && !empty($homepage_banner->button_link)) ? $homepage_banner->button_link : base_url('store/category'); ?>"><?= (isset($homepage_banner->button_text) && !empty($homepage_banner->button_text)) ? $homepage_banner->button_text : __('store.demo_banner_btn'); ?></a>
	</div>
</section>
<?php endif; /* homepage_banner_enabled */ ?>

<section class="main-categories">
	<div class="container">
		<h2 class="section-title">
			<img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/'); ?>img/package-b.png" /> <?= __('store.categories') ?>
		</h2>

		<div class="categories-listing-row d-flex">
			<?php
				if (!empty($category)) {
				    foreach ($category as $cat_value) {
				        // Check if an image is set and is not empty.
				        $imagePath = !empty($cat_value['image']) ? base_url('assets/images/product/upload/thumb/') . $cat_value['image'] : base_url('assets/images/no_image_available.png');

				        ?>
				            <a href="<?php echo base_url('store/category/' . $cat_value['slug'])?>" class="category-home">
				                <img alt="<?= __('store.image') ?>" src="<?= $imagePath; ?>" />
				                <h3><?= $cat_value['name']; ?></h3>
				            </a>
				        <?php
				    }
				}
			else
			{
				?>
					<div class="category-home">
						<img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/'); ?>img/ctg1.png" />
						<h3><?= __('store.dog') ?></h3>
					</div>
				<?php
				
			}
			?>
			
		</div>
	</div>
</section>

<section class="home-blog">
	<div class="container">

	<?php $bs_cards = (isset($store_setting['bs_cards']) && !empty($store_setting['bs_cards'])) ? json_decode($store_setting['bs_cards']) : []; ?>

	<div class="row">
		<?php
		
		foreach($bs_cards as $hf){
			$bs_cards_are_available = true;
			if($hf->button_link!="")
				$bs_button_link=$hf->button_link;
			else
				$bs_button_link="#";
			  

		?>
			<?php $img = (!empty($hf->feature_image)) ? base_url('assets/images/site/'. $hf->feature_image) : base_url('assets/store/default/img/blog1.png'); ?>
			<div class="col-md-6 col-12">
				<a class="bs_button_link"  href="<?php echo $bs_button_link; ?>" target="<?php if($hf->link_target=="true") {  echo '_blank'; } else  { echo '_self';} ?>" >
					<div class="blog-wrapper bg-main2" <?= (!empty($hf->bg_color)) ? 'style="background-color:'.$hf->bg_color.'"' : ''?>>
						<img alt="<?= __('store.image') ?>" src="<?= $img; ?>" class="blog-img" />
						<div class="blog-content">
						<h4><?= $hf->title; ?></h4>
						<p><?= $hf->sub_title; ?></p>
						</div>
					</div>
				</a>
			</div>
		<?php	
		}

		if(!isset($bs_cards_are_available)) {
			?>
			<div class="col-md-6 col-12">
				<div class="blog-wrapper bg-main2">
				<img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/img/demo-card-1.jpg') ?>" class="blog-img" onerror="this.onerror=null;this.style.display='none'" />
				<div class="blog-content">
					<h4><?= __('store.quality_guaranteed') ?></h4>
					<p><?= __('store.quality_guaranteed_desc') ?></p>
				</div>
				</div>
			</div>
			<div class="col-md-6 col-12">
				<div class="blog-wrapper bg-main">
				<img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/img/demo-card-2.jpg') ?>" class="blog-img" onerror="this.onerror=null;this.style.display='none'" />
				<div class="blog-content">
					<h4><?= __('store.free_shipping') ?></h4>
					<p><?= __('store.fast_delivery_desc') ?></p>
				</div>
				</div>
			</div>
			<div class="col-md-6 col-12">
				<div class="blog-wrapper bg-main">
				<img alt="<?= __('store.image') ?>" src="<?= base_url('assets/store/default/img/demo-card-3.jpg') ?>" class="blog-img" onerror="this.onerror=null;this.style.display='none'" />
				<div class="blog-content">
					<h4><?= __('store.best_prices') ?></h4>
					<p><?= __('store.best_prices_desc') ?></p>
				</div>
				</div>
			</div>
			<?php
		}
		?>
	</div>

	<div class="blog-para">
		<?php
			$para = isset($store_setting['homepage_bottom_section']) ? json_decode($store_setting['homepage_bottom_section']) : "";
			$para = isset($para->content) ? $para->content : "";
		?>
		<?= (!empty(strip_tags($para))) ? $para : __('store.homepage_bottom_default_text'); ?>
	</div>
	<a href="javascript:void(0);" class="blog-more"><?= __('store.show_more') ?> <br/> <i class="fas fa-angle-down"></i></a>
	</div>
</section>

<?php include 'product-list-template.php';  ?>


<script type="text/javascript">
	$(document).on('click', '.blog-more', function(){
		var el = $(".blog-para"),
		curHeight = el.height(),
		autoHeight = el.css('height', 'auto').height();
		el.height(curHeight).animate({height: autoHeight}, 500);
		$(this).after('<a href="javascript:void(0);" class="blog-less">'+'<?= __('store.hide') ?>'+' <br/> <i class="fas fa-angle-up"></i></a>');
		$(this).remove();
	});

	$(document).on('click', '.blog-less', function(){
		var el = $(".blog-para");
		el.animate({height: '50px'}, 500);
		$(this).after('<a href="javascript:void(0);" class="blog-more">'+'<?= __('store.show_more') ?>'+' <br/> <i class="fas fa-angle-down"></i></a>');
		$(this).remove();
	});

	$(document).ready(function() {
		load_Product($('#searchProduct').val());

		$('#searchProduct').keyup(function(e) {
			e.preventDefault();
			var search = $(this).val();
			load_Product(search);
		});
	});


	$(document).on('click', '.see-more', function() {
		load_Product(null, {
			next_page: $(this).data('next_page'),
			request_page_section: $(this).data('request_page_section')
		});
	});

	function load_Product(search, postData = {}) {
		var data = postData;
		data.search = search;
		data.request_page = 'home';
		var ajaxReq = 'ToCancelPrevReq';
		var ajaxReq = $.ajax({
			url: "<?= base_url() ?>" + 'Store/load_Product',
			type: 'POST',
			dataType: 'JSON',
			data: data,
			beforeSend : function() {
				if(ajaxReq != 'ToCancelPrevReq' && ajaxReq.readyState < 4) {
					ajaxReq.abort();
				}
				$('.btn-search').addClass('btn-loading');
			},
			complete : function() {
				$('.btn-search').removeClass('btn-loading');
			},
			success: function(res) {
				if(res.trendings) {
					if(postData.next_page && postData.next_page > 1) {
						$('.product-list-trending').append(Mustache.render($('#product-list-template').html(), res.trendings));
					} else {
						$('.product-list-trending').html(Mustache.render($('#product-list-template').html(), res.trendings));
					}
					$('.see-more-trendings').data('next_page', res.trendings.next_page);
					if(res.trendings.is_last_page) {
						$('.see-more-trendings').hide();
					}
				}

				if(res.new) 
				{
					if(postData.next_page && postData.next_page > 1) {
						$('.product-list-new').append(Mustache.render($('#product-list-template').html(), res.new));
					} else {
						$('.product-list-new').html(Mustache.render($('#product-list-template').html(), res.new));
					}
					$('.see-more-new').data('next_page', res.new.next_page);
					if(res.new.is_last_page) {
						$('.see-more-new').hide();
					}
				}

				if(res.category.new && res.category.new.length) {
					$('.home-new-products .category-listing').html(res.category.new);
				}

				if(res.category.all && res.category.all.length) {
					$(".demo-cat-badge").hide();
				}
			}
		});
	}
</script>