@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">
        <h4  > {{$category->nameENG}} </h4>
                        @foreach($product as $pd)
                <div class="col-sm-12" style="border:solid  {{$color}}  2px; margin-bottom:0.3%; padding:1%; border-radius:5px">
          <div class="row">
            <div class="col-xs-6" id="default-img">
              <div style="font-weight:700"><a href="#">{{$pd->nameENG}}</a></div>
              <div class="col-md-6"> <a href="#"><img src="{{asset($pd->image)}}?v=1001" width="180px" alt="{{$pd->nameTH}}"></a></div>
              <div class="col-md-6">@if($pd->image2!="")<a href="#"><img src="{{asset($pd->image2)}}?v=1001" width="180px" alt="{{$pd->nameTH}}"></a>@endif</div>
            </div>
            <div class=" col-xs-6 x-panel" align="center" >  </div>
            <div class=" col-xs-12 btn-panel" align="center" > 
            @if(trim($pd->PDF) !="")
            <a class="btn btn-default rs-btn" href="{{asset($pd->PDF)}}" style="margin-bottom:10px">PDF Drawing Download</a> 
            @endif
            @if(trim($pd->DWG) !="")
            <a class="btn btn-default  rs-btn" href="{{asset($pd->DWG)}}" style="margin-bottom:10px">CAD（DWG）Download</a> 
            @endif
            @if(trim($pd->ThreeD) !="")
            <a class="btn btn-default  rs-btn" href="{{asset($pd->ThreeD)}}" style="margin-bottom:10px">3D Data  Download</a>
              @endif
              <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 class=" col-xs-6 r-panel" align="center">
              <div class="col-sm-7 "></div>
              <div class="col-sm-5 " > 
              @if(trim($pd->PDF) !="")
              <a class="btn btn-default rs-btn" href="{{asset($pd->PDF)}}" style="margin-bottom:10px">PDF Drawing Download</a> 
              @endif
              @if(trim($pd->DWG) !="")
              <a class="btn btn-default  rs-btn" href="{{asset($pd->DWG)}}" style="margin-bottom:10px">CAD（DWG）Download</a> 
              @endif
              @if(trim($pd->ThreeD) !="")
              <a class="btn btn-default  rs-btn" href="{{asset($pd->ThreeD)}}" style="margin-bottom:10px">3D Data  Download</a>
              @endif
               <a class="btn btn-success  rs-btn" style="margin-bottom:10px" onClick="addcart('{{$pd->id}}')"><span class="glyphicon glyphicon-shopping-cart"></span> Add To Cart </a> </div>
            </div>
          </div>
        </div>
        @endforeach </div>
    </div>
  </div>
</section>
@endsection 

<!--  ส่วน java script --> 
@section('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;
	
	}
}
</style>
@endsection