@extends('appweb') 

<!--  ส่วนเนื้อหา --> 
@section('content')
<section id="home">
  <div class="container">
    <div class="row"> </div>
  </div>
</section>
<section id="products"   style="margin-top:%">
  <div class="container templatemo-white-bg">
    <div class="row templatemo-contact" style="padding:15px">
      <div class="col-sm-2" style="padding-right:0" >
     
        <h4 class="our_product" >  Our Product</h4>
        <div class="list-group" style="font-size:12px;">
        @foreach($groups as $gr) 
                <a  href="{{URL::to('group/'.$gr->id.'/'.$name)}}" type="button" class="list-group-item group_menu"  ><span class="glyphicon glyphicon-triangle-right"></span> {{$gr->nameENG}}</a> 
        
        @foreach($categorys as $cat)
 
          @if($curent_cat ==$gr-> id && $cat->group_id == $gr-> id)
                     <a href="{{URL::to('category/'.$cat->id.'/'.$cname)}}" type="button" class="list-group-item category_menu
           @if($id == $cat->id) active  @endif" > &nbsp;<span class="glyphicon glyphicon-menu-right"></span> {{$cat->nameENG}}</a> 
           @endif
 
          @endforeach
          
          @endforeach </div>
          
      </div>
      
      <div class="col-sm-10">
      
      <div class="col-xs-12  top-head "  >
      <h4  > {{$category->nameENG}} </h4>
      <div class="col-xs-12" style="margin-bottom:15px"></div>
       
      <div class="col-md-3 col-xs-6 " style="padding:1%" >
      <div class="box_bg" style=" padding:1%" align="center"><span id="image_drawing"></span></div>
      
      </div>
      <div class="col-md-3 col-xs-6" style="padding:1%">
      <div class="box_bg" style=" padding:1%" align="center"><br>
<br>

      <p><span id="drawing_download"></span></p>
      <p><span id="pdf_download"></span></p>
      <p><span id="threed_download"></span></p>
      </div>
      </div>      

      <div class="col-md-3  col-xs-6" style="padding:1%">
      <div class="box_bg" style=" padding:1%" align="center"><span id="image_drawing1"></span></div>
      
      </div>
      <div class="col-md-3 col-xs-6"style="padding:1%">
      <div class="box_bg" style=" padding:1%" align="center"><br>
<br>

      <p><span id="drawing_download1"></span></p>
      <p><span id="pdf_download1"></span></p>
      <p><span id="threed_download1"></span></p>
      </div>
      </div> 

      
      </div>
      <div style="margin-bottom:2%"></div>
      <div class="row">
                 @foreach($product as $pd)
               <div class="col-sm-4 col-md-3 product-cls" align="center" style="margin-top:3%" >
       <div class="col-xs-12 box-product">
       <p align="left"><strong><a href="#">{{$pd->nameENG}}</a></strong></p>
       <div > <a href="{{URL::to('product/'.$pd->id.'/'.$pd->nameENG)}}">
       <img src="{{asset($pd->image)}}?v=1001"  style="max-width:180px" alt="{{$pd->nameTH}}" class="pro_image"></a></div>
       <div style="margin-bottom:15px"></div>
       <div ></div>
       <div><button class="btn btn-success  rs-btn" style="margin-bottom:10px" onClick="addcart('{{$pd->id}}')"><span class="glyphicon glyphicon-shopping-cart"></span> Add To Cart </button></div>
       </div>
       </div>
       @endforeach
       
      </div>
      
      
      
        
        

         
         </div>
    </div>
  </div>
</section>
@endsection 

<!--  ส่วน java script --> 
@section('script')
<script>
$('#image_drawing').html("<img src='{{asset($bg_img)}}' style='width:100%'>");
$('#drawing_download').html("<a href='{{asset($drawing)}}' class='btn btn-info'>Drawing Download</a>");
$('#pdf_download').html("<a href='{{asset($pdf)}}' class='btn btn-info'>PDF Download</a>");

$('#image_drawing1').html("<img src='{{asset($bg_img1)}}' style='width:100%'>");
$('#drawing_download1').html("<a href='{{asset($drawing1)}}' class='btn btn-info'>Drawing Download</a>");
$('#pdf_download1').html("<a href='{{asset($pdf1)}}' class='btn btn-info'>PDF Download</a>");
@if(trim($threed)!="")
$('#threed_download').html("<a href='{{asset($threed)}}' class='btn btn-info'>3D Download</a>");
@endif
@if(trim($threed1)!="")
$('#threed_download1').html("<a href='{{asset($threed1)}}' class='btn btn-info'>3D Download</a>");
@endif

</script>


@endsection 

<!--  ส่วน java style --> 
@section('style')
<style>
.title{
	display:none;
}
#slider-name{
	width: 330px;
    text-align: center;
    margin-left: -35px;
    text-shadow: 1px 2px 10px #1CB5BF;	
}
.flex-viewport > ul > li > p{
	height:250px;
	overflow:hidden;
	
}
.location{
	height:350px;
	overflow:auto;	
	/*border:1px dashed #000;*/
	padding:15px;
	
}
.a-about{
	text-decoration:none !important;
	color:#fff;
}
.a-about:hover , .a-about:focus{
	text-decoration:none !important;
	color:#000;
}
#about-description{
	padding-top:20px;
}
@media (max-width:991px){
	.flex-viewport > ul > li > p{
	height:200px;
	overflow:hidden;
	
	}
	#slider-name{
	width: 230px;
    text-align: center;
    margin-left: -15px;
    text-shadow: 1px 2px 10px #1CB5BF;
	}
}
@media (max-width:767px){
	.flex-viewport > ul > li > p{
		height:100%;
	
	}
	#about-description{
		display:none;
	}
	.location{
	height:100%;
	padding:15px;
	border-bottom:1px dashed;	
	}
	.location > img{
		margin-bottom:10px;	
	}
}
.box-product , .box_bg{
	border:solid blue 1px;
	border-radius:3px; 
	padding-top:1%;
	}
.box_bg{
	 min-height:280px;
	 }
</style>
@endsection