@extends('frontend.template',['showmore'=>'yes'])

@section('styles')
	
<style type="text/css">
input#inquiry_form_email {
    margin-left: 0px;
    width: 100%;
}

.contactmain .col-md-6 {
    padding: 0px 13px;
}
.contactmain {
    margin-top: 0px;
}
div#btnContainer {
    display: none;
}

div#btnContainer {
    display: none;
}
.contactmain.col-md-4 {
    padding: 0px 5px;
}
@media only screen and (max-width: 992px){

.filter-box button.navbar-toggle span {
    background: black;
} 
.col-xs-12 {
    width: 100%;
    padding: 0 5px;
}

.filter-box button.navbar-toggle {
    position: absolute;
    right: 0;
    top: 3px;
    margin: 0;
    right: 22px;
    border: 1px solid black;
    background: white;
    z-index: 9999;
}
    
    
      body .navbar-header a.filter-head {
    display: block !important;
    margin-bottom: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 10px;
    background-color: #f8f8f8;
    color: #2a2a2a;
}
.filter-box button.navbar-toggle span {
    background: black;
} 
.filter-box button.navbar-toggle {
    position: absolute;
    right: 0;
    top: 3px;
    margin: 0;
    right: 22px;
    border: 1px solid black;
    background: white;
    z-index: 9999;
}
    
    
    body .pro-menu {
    min-height: unset;
    /* display: none; */
    z-index: 999;
}

body .none{
  display:block;

}
    
    footer h4 {
    margin-top: 30px;
    font-size: 14px !important;
    text-align: left !important;
    left: 0 !important;
    display: block !important;
    padding-right: 0px !important;
}
    
    body p.banner-para {
    font-size: 14px;
    line-height: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body ul.btn-groups {
    display: none;
}
body .product-contact {
    display: none;
}
div#btnContainer {
    display: none;
}
    
    
body .fea-products li {
    width: 100% !important;
    float: unset;
    margin-right: 6px;
}

body .fea-products {
    white-space: unset;
}
    
    body .logo img {
    position: relative;
    left: 0px;
}
    
    
	.navbar-collapse{
		position: absolute ;
	    z-index: 999;
	    background-color: #fff;
	    width: 100%;
	    right: 0;
	}
}


.my_cats a {
    background-color: #e3e1e1;
    display: block;
    margin-bottom: 3px;
    padding: 5px 15px 5px 5px;
    border-radius: 2px;
    color: #000000b0;
    font-size: 13px;
    text-transform: capitalize;
}

body .my_cats a.arrows {
    background-color: #2a2a2a !important;
    color: #fff !important;
    position: relative;
}

body .my_cats a.arrows:after {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #fff transparent transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: 4px;
    top: 13px;
    content: "";
    margin-top: 0;
    position: absolute;
    right: 5px;
    z-index: 11111;
}

.my_cats a.un_activess {display: none;}

body .p_actives a.activess {
    display: block !important;
    background-color: #00000096;
    color: #fff;
}

body .menu_openeds a.activess {
    display: block !important;
    background-color: #00000096;
    color: #fff;
}

body .menu_openeds a.active_childs {
    background-color: #00000075;
}

/* side bar menu css end */
.blog2 {
    height: 500px;
    box-shadow: 0 0 10px #ccc;
    border-radius: 8px;
}
.blog2 {
    height: 500px;
    box-shadow: 0 0 10px #ccc;
    border-radius: 8px;
}
p.date-format {
    color: #000000 !important;
    /* background: #2a2a2a; */
    /* padding: 5px 20px; */
    transform: rotate(270deg);
    position: absolute;
    left: -62px;
    top: 20px;
    /* font-style: italic; */
    padding: 0;
    margin: 0;
}
body .mobile-sub .wsmenu-submenu li a:before {
    display: none;
}
.main-inner-div:before {
    content: url(/images/row-before.png);
    position: absolute;
    top: 120px;
    /* background-color: #ccc; */
    width: 100%;
    margin: 0 auto;
    z-index: -999;
    top: 80px;
    background-repeat: no-repeat;
    left: 0;
    right: 0;
}
div#inq_cap_img {
    z-index: 9999;
    overflow: hidden;
}
h2.title {
    position: relative;
    padding-left: 0px;
    margin-top: 30px;
    font-size: 20px;
    font-weight: 700;
    color: #2a2a2a;
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif !important;
}

h2.title:before {
    position: absolute;
    background-color: #ed7d11;
}

.product-contact .form-control:focus {
    outline: none;
    box-shadow: unset;
    border-color: #000;
}

.product-contact .cap_img {
    margin-top: 0px;
    margin-bottom: 20px;
}

.product-contact .btn-primary {
    /* padding: 5px 15px 5px 15px; */
    background-color: #2a2a2a;
    border: unset;
    /* margin: 0 auto; */
    transition: initial;
    display: block;
    margin-top: 10px;
}

h4.Popular {
    padding: 30px 0px 10px 0px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 700;
    color: #2a2a2a;
    font-family: 'Josefin Sans', sans-serif !important;
}

.chance-mainn-1ssss {
    width: 50%;
    float: left;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    height: 120px;
    position: relative;
}

.chance-pros-mainnssss {
    position: relative;
}
button.header-search-btn-1 {
    font-size: 0;
    border: unset;
}

.header-search-btn-1 {
    font-size: 0;
    background-color: #2a2a2a !important;
    color: transparent;
    border: unset;
    height: 40px;
    position: relative;
    top: -5px;
    width: 40px;
    left: -43px;
    border-left: 1px solid #ccc !important;
}
.header-search-btn-1 i.fa.fa-search {
    font-size: 17px;
    color: #fafafa;
    background-color: transparent!important;
    position: absolute;
    / right: 6px; /
    bottom: 5px;
    left: 10px;
    top: 13px;
}

.ext-padd input[type="text"]:focus {
    outline: none;
    border: unset !important;
}
body .ext-padd {
    position: relative;
     display:block; 
}

ul.cus-social p {
    float: right;
    display: inline-block;
    color: #fff;
    font-weight: 500;
    margin-top: 10px;
    font-size: 15px;
    padding-left: 3px;
}

ul.cus-social li {
    /* height: 50px; */
    /* margin-top: 30px; */
    display: inline-block;
    text-align: left;
    /* display: block; */
    /* margin: unset; */
    /* float: left; */
}
p.ll {position: relative;/* left: -10px; */}
li.contt p {
    padding-right: 10px;
}
.my_cat.cat_level_1:hover a:before {
    content: "";
    background-color: #cb9229;
    width: 3px;
    height: 100%;
    position: absolute;
    left: -7px;
    top: 0px;
    opacity: 1;
}
.chance-pros-mainn:hover .chance-innerr-wrapper-product a {
    transition: 0.3s;
}
.chance-pro-2ssss a {
    font-size: 14px;
    color: #3b3333;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 33px 0 0px 0;
}
.product-contact {
    position: relative;
}

.product-contact .form-group {
    width: 100%;
    border: unset;
    background-color: transparent;
}

.chance-pro-2ssss {
    float: right;
    position: relative;
    width: 50%;
    margin-bottom: 50px;
    padding-left: 10px;
    display: flex;
}

.chance-innerr-wrapper-productsss {
    float: right;
}

.chance-inner-wrapperr-viewsssss {
    float: right;
}

.chance-pro-2ssss a {
    font-size: 14px;
    color: #3b3333;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 33px 0 0px 0;
}

.chance-pros-mainnssss {
    margin-top: 30px;
}

.related-products {
    display: none;
}

ul.products {
    margin-bottom: 0;
}

ul.productses {
    display: none;
}

p.filtered-by-s {
    display: none;
}

li.buil-d {
    max-width: 60%;
}

section.bread-crum {
    background-color: #cccccc52;
    max-width: 1600px;
    margin: 0 auto;
}

.bread_crumb {
    padding: 10px 0 10px 0 !important;
}

.bread_crumb a {
    color: #000;
    font-weight: 500;
    font-size: 14px;
}

h1.pgtitle {
    color: #2a2a2a;
    font-weight: 700;
    margin-top: 0;
    font-size: 18px;
}

ul.cus-social li a i {
    color: #ffffff !important;
    background: black;
    height: 40px;
    width: 40px;
}

.related-heading h4 {
    padding-left: 20px !important;
    margin-bottom: 0px;
    font-size: 42px;
    font-weight: 700;
}
.btn-primary:focus {
    background-color: #242b5b;
}
.social-icon-view-products {
    border-top: solid 2px #ccc;
    margin-top: 30px;
}

h6.social-icon-view-now {
    color: #b41f2e;
    font-weight: 700;
    font-size: 22px;
    padding-top: 20px;
}

.cus-social-1 {
    margin-top: 10px !important;
}

li.last-list a {
    margin-right: 0 !important;
}

.ab-1-top img {
    margin-bottom: 10px;
}

h3.cat-h3 {
    display: none;
}

div#btnContainer {
    /* display: none; */
}

div#products-box {
    margin-top: 40px;
}
.chance-mainn-1 {
    border: 1px solid #cccccc94;
}

a.actives:before {
    content: "-";
    position: absolute;
    left: 10px;
    font-size: 20px;
    top: 4px;
}

.cat_level_1.menu_opened > a {
    display: block !important;
    position: relative;
}

.cat_level_1 > a:nth-child(1) {
    display: block !important;
}

.p_active .actives {
    background-color: #e4e4e4 !important;
    padding-left: 25px;
}

a.actives:before {
    content: "-" !important;
    position: absolute;
    left: 10px;
    font-size: 20px;
    top: 4px;
}


.cat_level_1 a:first-child:before {
    content: "v";
    position: absolute;
    right: 11px;
    /* transform: rotate(85deg); */
    font-size: 15px !important;
    color: #000;
    font-weight: 700;
    opacity:0;
}

.cat_level_1 a:first-child {
    position: relative;
}


.cat_level_1.menu_opened > a {
    display: block !important;
    position: relative;
}

.cat_level_1 > a.arrow {
    position: relative;
}

.cat_level_1 > a {
    display: none !important;
}

a.pro-linksss {
    display: block;
    background-color: #efefef;
    margin-bottom: 3px;
    padding: 10px 0px 10px 45px;
    color: #000;
    position: relative;
}

/*child category css end*/

/*body{*/
    
/*        background-color: #fafafa;*/
/*}*/


	h2{
		font-size: 22px;
		margin-top:0px;
	}
	
	.product_thumb{
        /*height: 200px;*/
        /*line-height: 192px !important;*/
        border: 1px Solid #ccc;
        /*max-width: 20px; */
        text-align: center;
        padding: 0 !important;
        margin: 0 auto;
        float: none;
	}

	.cat_level_2:before{
		content: "-";
		margin-right: 5px;
		display: inline-block;
	}

	.cat_level_3:before{
		content: "-";
		margin-right: 5px;
		display: inline-block;
	}

	.cat_level_4:before{
		content: "-";
		margin-right: 5px;
		display: inline-block;
	}

	.cat_level_2{
		padding-left: 20px;
	}

	.cat_level_3{
		padding-left: 30px;
	}

	.cat_level_4{
		padding-left: 40px;
	}

	.my_cat{
		/*border: 1px Solid #ccc;*/
		margin-bottom: 1px;
	}

	.my_cat:hover{
	
		cursor: pointer;
	}

	.my_cat a{
		color: #000;
		width: 100%;
		display: inline-block;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.cat_level_1 a{
		/*color: #0097af;*/
		/*font-weight: bold;*/
		font-size: 14px;
	}

	.active{
    	/*background-color: #e0e0e0;*/
	}
	
	a.pro-title{
        color: #fff;
        font-size: 15px;
        display: table-cell;
        vertical-align: middle;
        /*height: 80px;*/
        text-align: center;
	}
	
	a.pro-title1{
        color: #fff;
        font-size: 15px;
        display: table-cell;
        vertical-align: middle;
        height: 80px;
        text-align: center;
	}
	
	.prod_box{
	    position:relative;
	    overflow:hidden;
	    padding:0;
	}

	.prod_box img{
	    width:100%;
	}
	.row {
    margin-right: -15px;
    margin-left: -15px;
   
}
	
	.pro-overlay{
	    position:absolute;
	    width:100%;
	    height:100%;
	    transition: 0.3s linear 0s;
        bottom: -100%;
	}
	
	.best-sellers:hover div.pro-overlay{
        bottom: 0;
    }
    
    .prod_box:hover .featrued_prod_title{
        display:none;
    }


                
                  @media  only screen and (min-width: 600px) and (max-width: 900px) {
                	ul.products > li {
                        width: 48%;
                    }
                }
                
                 @media  only screen and (min-width: 320px) and (max-width: 600px) {
                	ul.products > li {
                        width: 100%;
                    }
                    
                    .pull-right {
                display: none;
                                  }
                }
                
                
       @media only screen and (max-width: 992px){
body .pro {
    min-height: 800px !important;
}}
</style>

@endsection

@section('content')	
	<div class="bannermain innerbanner">
		<div class="banner_overlay"></div>
		
	 <img src="@if($industry->featured_banner != "") {{config('app.url')}}uploads/images/categories/{{$industry->featured_banner}}  @else {{get_thumb_url_400('banners',"/".$basic_details->featured_banner,1)}} @endif">

		<div class="innercaption">
			<div class="container">
				<!--<h2>{{$industry->name}}</h2>-->
			</div>
		</div>
	</div>

	<section class="bread-crum">
        
        <div class="container">
        
            <div class="bread_crumb">
	            <a href="/">Home</a> > 
	            <a href="/products">Products</a> >
	            <span>{{$industry->name}} ({{$category_products->total()}})</span>
	            
    	    </div>
	    
	    </div>
         
    </section>

	<div class="contactmain">
		<div class="container">

	   
			<div class="row">

				<div class="col-md-3 pro-menu">
				    <p class="filtered-by-s">Products Category</p>
				    
				    <div class="filter-box">
				    
    				    <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#search-filter">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                </button>
                                <a class="filter-head" href="#">
                                Categories
                                </a>
                        </div>
                        
    				 <div id="search-filter" class="left-filter-item collapse navbar-collapse">
    					
    					<div class="my_cats cat_level_1s"><a href="/products">All Products</a></div>
    
            				@foreach($all_industries as $key => $ind)
        
            				        @if($ind->parent_id == 0)
            				        	<div class="@if( ($ind->id == $industry->id) || ($industry->parent_id == $ind->id ) ) menu_openeds @endif my_cats cat_level_1s @if($ind->slug == $industry->slug) p_actives @endif"><a class="@if($ind->have_childs == 1) arrows @endif" href="/product-category/{{$ind->slug}}">{{$ind->name}}</a>
                				        	@foreach($all_industries as $key1 => $ind1)
                				                @if($ind1->parent_id == $ind->id)
                        				            <a class="un_activess activess @if($ind1->slug == $industry->slug) active_childs @endif" href="/product-category/{{$ind1->slug}}">{{$ind1->name}}</a>
                        				        @endif
                				            @endforeach
            				        	</div>
            				        @endif
        
                            @endforeach
    			        
			        </div>
			     </div>
			     
			  
			     <div class="product-contact">
			          
				    
				     <h2 class="title">Get In Touch</h2>
				
					<form class="form_submit" id='form21' method="post" action="/save_contact/2" autocomplete="off" >
			       
			       <div class="col-md-12">
				                    
				                    <div id="form_success" class="form_success"></div>
				                    
				                    <div id="err_msg_1" class="err_msg_1"></div>
				                    
				    </div>
			       
	                 <div class="col-md-12">
					        <div role="form" class="wpcf7" id="wpcf7-f264-o2" lang="en-US" dir="ltr">
						
						
						
		      				{{csrf_field()}}
							
			                <div class="form-group">
			                    
			                    <input type="text" class="form-control" maxlength="150" id='inquiry_form_name' name="inquiry_form_name" placeholder="Your Name" required>
			                </div>

			                <div class="form-group">
			                    <input type="email" class="form-control" maxlength="100" id='inquiry_form_email' name="inquiry_form_email" placeholder="Email Address" required>
			                </div>

			                <input type="hidden" name="inquiry_form_subject" value="{{$basic_details->company_name}} Inquiry">
                            <!-- Test --> 
			                <div class="form-group">
			                    <input type="text" class="form-control" maxlength="50" id='inquiry_form_phone' name="inquiry_form_phone" placeholder="Contact Number" required>
			                </div>
		             </div>        
			 </div>
			  <div class="col-md-12">
			                <div class="form-group full">
			                    <textarea id='inquiry_form_message' name="inquiry_form_message" class="form-control" maxlength="1500" rows="5" placeholder="Message" required></textarea>
			                </div>
              </div>
				            <div class="form-row">
				                <div class="col-md-6 col-sm-12 col-xs-6">
				                    <input class="form-control" type="text" id="captcha" name="captcha" placeholder="Captcha" required="">
				                </div>
				                <div class="col-md-6 col-sm-12 col-xs-6 cap_img" >
				                    {!! $captcha_img !!}
				                </div>
				                <div class="col-md-12 col-sm-12 col-xs-6 cap_code">
				                     <button id='inquiry_form_btn' class="btn btn-primary inquiry_form_btn" type="submit" title="Submit">Send Message</button>
				                     
				                </div>
				                
				                
				            </div>

			               
			            </form>
				
			      </div>
			      
			      
			      <div class="col-md-12 col-sm-12 col-xs-12 related-products-main-div no-paddis">
                    <div class="related-products ">
                        <div class="related-product">
                            <!--<h4 class="Popular">Popular Products</h4>-->
                        </div>
                        
                      
				
        					
                     </div>
                                
                  </div>
		        </div>

	            <div class="col-md-9 col-sm-12 our-product">
	                
	    <!--              			<div class="row">-->
					<!--	<div class="col-md-12 text-center">-->
					<!--		<h2>{{$industry->name}}</h2>-->
					<!--	</div>-->
					<!--</div>-->

					<div class="row">
						<div class="col-xs-12">
    <div id="btnContainer">
  <button class="btn active" onclick="gridView()"><i class="fa fa-th-large"></i> Grid</button>
  <button class="btn custum-style" onclick="listView()"><i class="fa fa-bars"></i> List</button> 
  
</div>
        	<div id="products-box" class="" >
							
                        @foreach($category_products as $key => $product)							    
    							
			   <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="pro-main">
               <a href="{{getproducturl($product)}}">
            
                  
                  	<div class="vertical-img">
            							    
            								<img class="img-responsive" src="{{get_thumb_url_500('products',$product->thumbnail_img,1)}}" @if($product->imagetitle != '') alt="{{$product->imagetitle}}" @else alt="{{$product->name}}" @endif>
            								
            							</div>
                  <div class="content-box">
                      
                      
                     <div class="image-container">
                        <div class="vertical-number-boxxs">
                           <h4>{{$product->name}}</h4>
                        </div>
                        <div class="vertical-bxss"> 
               <a href="{{getproducturl($product)}}">View Details</a>
               </div>
               </div>
               </div>
               </a>
             </div>  
            </div>
    					@endforeach

					
			</div>	
							
				</div>
							
						</div>
					</div>
					
					
					
					

					<div class="row xxp">
						<div class="col-xs-12">
							<ul class="pagination">
								{{$category_products->links()}}
    				        </ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="clear"> </div>

@endsection