<?php if ( ! defined( 'ABSPATH' ) ) {
exit;} ?>


	<div class="elex-multi-vendor-for-woocommerce-wrap elex-multi-vendor-for-woocommerce-wrap-front" style="height:auto;">


		<!-- =====================main-content================== -->
		<div class="elex-multi-vendor-for-woocommerce-main">

			<div class="fs-1 mb-1 fw-bold ms-1">
				<?php 
				if ( $banner_image_text ) {
					echo esc_html( $banner_image_text );
				} 
				?>
			</div>
			<div class="elex-multi-vendor-for-woocommerce-store-banner position-relative d-flex align-items-center">
				<img class="w-100"
				src="
				<?php
				if ( $thumbnail_url ) {
					echo esc_url( $thumbnail_url );
				} else {
					echo esc_url( ELEX_MULTI_VENDOR_MAIN_URL_PATH . 'images/placementarea.png' );
				}
				?>
				" alt="">
			</div>
		
			<div class="elex-multi-vendor-for-woocommerce-store-tab-link row align-items-center px-5 my-3 justify-content-between ">
				<div class="col-md-4">

					<?php 
					if ( isset( $show_all_categories ) && 'on' === $show_all_categories ) {
						?>
				<div class="input-group input-group-lg border rounded">

					<select class="form-control" name="elex-multi-vendor-for-woocommerce-store-category" id="vendor-store-category">
					<option value="">--Select--</option>

					<?php 
						foreach ( $categories_of_vendor  as $categ ) {
							?>
						<option value="<?php echo esc_html( $categ->name ); ?>"><?php echo esc_html( $categ->name ); ?></option>
							
					<?php 
						} 
						?>
					</select>
					<button class="input-group-text elex_mv_search_prodct_cat_btn ">Filter</button>
					</div>

					<?php
					}
					?>
				</div>
				

				<div class="col-md-4">
					<div class="input-group input-group-lg my-2 border rounded">
						<?php 
						// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- read-only GET search term for display, no write operation. 
						$search_value = isset( $_GET['search_term'] ) ? sanitize_text_field( wp_unslash( $_GET['search_term'] ) ) : '';
						?>
						<input type="text"   value="<?php echo esc_attr( $search_value ); ?>" placeholder="Search product" class="form-control elex_mv_search_prodct_name p-2">
						<button class="input-group-text elex_mv_search_prodct_name_btn "><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></button>
					
						</div>
				</div>
				

			</div>
			<div class="elex-multi-vendor-for-woocommerce-store-content">
				<div class="tab-content" id="myTabContent">
					<div class="tab-pane fade show active" id="category-1" role="tabpanel"
						aria-labelledby="category-1-tab">
						<div class="px-5">
							<div class="row">
								<?php 
								
								if ( empty( $products_elex_mv ) ) {
									?>
									<div class="h-100 d-flex align-items-center justify-content-center">No products are available on your store yet.</div>
									<?php	  
								}
								foreach ( $products_elex_mv  as $product ) {
								
									?>

								<div class="col-md-6 mb-3">
									<div class="border border-2 border-secondary">

									
										<a target="_blank" rel="noopener noreferrer" href="<?php echo esc_html( $product->get_permalink() ); ?> ">
										<div class="ratio ratio-16x9">
										<img style="object-fit:contain;" class="w-100" src="<?php echo esc_html( wp_get_attachment_url( $product->get_image_id() ) ); ?> " alt="">
										</div>	
										</a>
										

									</div>
									<?php 
								
									if ( isset( $name_to_show_on_product ) && 'on' === $name_to_show_on_product ) {
										?>
												<div class="fs-3 mb-1 fw-semi-bold top-0 left-0 ms-1 mt-1" style="z-index:99;"><?php echo esc_html( $product->get_title() ); ?></div>
										<?php
									}
									?>
										<?php 
										if ( isset( $price_to_show_on_product ) && 'on' === $price_to_show_on_product ) {
											?>
										<div class="fs-3 fw-semi-bold top-50 left-0 ms-1 mt-1" style="z-index:99;"><?php echo esc_html( get_woocommerce_currency_symbol() . $product->get_price() ); ?></div>
										<?php
										}
										?>
										<?php 
										if ( isset( $show_vendor_name ) && ( 'on' === $show_vendor_name || $show_vendor_name ) ) {
											?>
										<div class="fs-3 top-50 left-0 ms-1 mt-1" style="z-index:99;">Sold By: <?php echo esc_html( $store_title ); ?></div>
										<?php
										}
										?>
								</div>
								<?php } ?>
							</div>
						</div>
					</div>

					
				
				</div>
			</div>


		</div>

	</div>
