@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" style="min-width:767px">
    <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-sm-12" style="border:solid  black  2px; margin-bottom:3%; padding:1%; border-radius:5px">
      <h4  > {{$category->nameENG}} </h4>
      <div class="col-xs-12"></div>
      <div class="col-xs-3 box_bg "  style="padding:1%">
      <span id="img"></span>
      
      </div>
      <div class="col-xs-5 ">
      <div class="box_bg" style="vertical-align:middle;  padding:5%" align="center">
      <span id="img2"></span>
       
      </div>
      </div>      
      <div class="col-xs-4 box_bg ">
      <span id="more"></span>
      </div>
      </div>
 
 <table width="100%" border="1" class="table table-bordered">
  <tr class="btn-info">
    <td rowspan="3" align="center" valign="middle"><strong><br>
      Model</strong></td>
    <td rowspan="3" align="center" valign="middle"><strong>Overrall<br>
      Length<br>
      of Ball Lifter<br>
      L(mm)</strong></td>
    <td rowspan="3" align="center" valign="middle"><strong>No. of<br>
      Balls<br>
      n</strong></td>
    <td rowspan="3" align="center" valign="middle"><strong>Product Weight<br>
      N<br>
      (kg)</strong></td>
    <td colspan="3" align="center" valign="middle"><strong>Load Capacity
      on Each Unit
      kN(kgf)</strong></td>
    <td rowspan="3" align="center" valign="middle"><strong><br>
      Drawing Download</strong></td>
  </tr>
  <tr class="btn-info">
    <td colspan="3" align="center" valign="middle"><strong>Supplied Air Pressure<br>
      MPa(kgf/cm2)</strong></td>
    </tr>
  <tr class="btn-info">
    <td align="center" valign="middle"><strong>0.4 (4.08)</strong></td>
    <td align="center" valign="middle"><strong>0.5 (5.10)</strong></td>
    <td align="center" valign="middle"><strong>0.6 (6.12)</strong></td>
    </tr>
  @foreach($product as $pd)  

  <tr>
    <td align="center"><br>
{{$pd->nameENG}}</td>
    <td align="center"><br>
{{$pd->lifter}}</td>
    <td align="center"><br>
{{$pd->numball}}</td>
    <td align="center"><br>
{{$pd->weight}}</td>
    <td align="center"><br>
{{$pd->load0_4}}</td>
    <td align="center"><br>
{{$pd->load0_5}}</td>
    <td align="center"><br>
{{$pd->load0_6}}</td>
    <td align="center">
    <a class="btn btn-default btn-sm rs-btn" href="{{asset($pd->PDF)}}" style="margin-bottom:10px">PDF Drawing Download</a>
     <a class="btn btn-default btn-sm   rs-btn" href="{{asset($pd->DWG)}}" style="margin-bottom:10px">CAD（DWG）Download</a><br>
 <a class="btn btn-default  btn-sm  rs-btn" href="{{asset($pd->ThreeD)}}" style="margin-bottom:10px">3D Data  Download</a> <a class="btn btn-success  btn-sm  rs-btn" style="margin-bottom:10px" onClick="addcart('{{$pd->id}}')"><span class="glyphicon glyphicon-shopping-cart"></span> Add To Cart </a></td>
  </tr>
  
@endforeach 
</table>
     
      
      
   
      
      
      
        
        

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

<!--  ส่วน java script --> 
@section('script')
<script>
$('#img').html("<img src='{{asset($img)}}' style='width:100%'>");
$('#img2').html("<img src='{{asset($img2)}}' style='width:100%'>");
 
 
</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:260px;
	 }
</style>
@endsection