<?php
/**
 * Template Part for displaying Portfolio section in homepage
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package NDesign
 */

if ( get_theme_mod( 'portfolio_title' ) || get_theme_mod( 'portfolio_subtitle' ) || get_theme_mod( 'number_of_portfolio' ) ) : ?>
	<section class="portfolio-section page-section" id="portfolio">
		<div class="container">
			<div class="row align-items-center">
				<div class="col-xl-4">
					<!-- Subtitle start -->
					<?php if ( get_theme_mod( 'portfolio_subtitle' ) ) : ?>
						<h4 class="main-subtitle text-center text-xl-left">
							<?php echo esc_html( get_theme_mod( 'portfolio_subtitle' ) ); ?>
						</h4>
					<?php endif ?>
					<!-- Subtitle end -->
					<!-- Title Start -->
					<?php if ( get_theme_mod( 'portfolio_title' ) ) : ?>
						<h2 class="main-title text-center text-xl-left">
							<?php echo esc_html( get_theme_mod( 'portfolio_title' ) ); ?>
						</h2>
					<?php endif ?>
					<!-- Title End -->
				</div>
				<div class="col-xl-8 text-xl-right text-center mb-3 mb-xl-0">
					<?php
					$ndesign_args = array(
						'post_type' => 'portfolio',
						'order' => 'ASC',
						'posts_per_page' => get_theme_mod( 'number_of_portfolio' ),
					);
					$ndesign_portfolio = new WP_Query( $ndesign_args );
					$ndesign_i = 0;
					foreach ( $ndesign_portfolio->posts as $ndesign_portfolio_post ) {
						$ndesign_categories = get_the_category( $ndesign_portfolio_post->ID );
						foreach ( $ndesign_categories as $ndesign_category ) {
							$ndesign_allcategories[ $ndesign_i ] = $ndesign_category->name;
							$ndesign_i++;
						}
					}

					if ( ! empty( $ndesign_portfolio->posts ) ) {
						?>
						<!-- Portfolio filter button listing start -->
						<div class="toolbar mb2 mt2">
							<button class="btn fill-cat active" data-rel="all" > <?php echo __('All','ndesign');?></button>
							<?php
							if ( ! empty( $ndesign_allcategories ) ) {
								$ndesign_allcategories = array_unique( $ndesign_allcategories );
								$ndesign_allcategories = array_slice( $ndesign_allcategories, 1 );
								foreach ( $ndesign_allcategories as $ndesign_singlecategory ) {
									echo ' <button  class="btn fill-cat" href="" data-rel="' . sanitize_title( $ndesign_singlecategory ) . '">' . $ndesign_singlecategory . '</button>';
								}
							}
							?>
						</div>
						<!-- Portfolio filter button listing end -->
					</div>
				</div>
				<div id="portfolio-blk" class="row">
						<?php
						foreach ( $ndesign_portfolio->posts as $ndesign_key => $ndesign_value ) {
							$ndesign_category = get_the_category( $ndesign_value->ID );
							$ndesign_postcategory = [];
							foreach ( $ndesign_category as $ndesign_key => $ndesign_val ) {
								$ndesign_catname = sanitize_title( $ndesign_val->name );
								array_push( $ndesign_postcategory, $ndesign_catname );
							}
							$ndesign_post_category_class = implode( ' ', $ndesign_postcategory );
							$ndesign_post_category_list = implode( ', ', $ndesign_postcategory );
							?>
						<!-- Portfolio block start -->
						<div class="col-lg-4 col-sm-6 mb-5 tile scale-anm all <?php echo esc_attr( $ndesign_post_category_class ); ?>">
							<?php if ( has_post_thumbnail( $ndesign_value->ID ) ) { ?>
								<div class="portfolio-image">
									<a class="venobox" href="<?php echo esc_url(get_the_post_thumbnail_url( $ndesign_value->ID, 'full' )); ?>" alt="Portfolio Image">
										<img src="<?php echo esc_url(get_the_post_thumbnail_url( $ndesign_value->ID, 'full' )); ?>" class="w-100">
									</a>
								</div>
							<?php } ?>
							<div class="portfolio-detail">
								<h3 class="portfolio-title"><?php echo get_the_title( $ndesign_value->ID ); ?></h3>
								<p><?php echo esc_html( $ndesign_post_category_list ); ?></p>
							</div>
						</div>
						<!-- Portfolio block end -->
					<?php } ?>
				</div>
			<?php } ?>
		</div>
	</section>
<?php endif ?>
<!-- Portfolio section end -->
