@extends('appweb') 

<!--  ส่วนเนื้อหา --> 
@section('content')
<section id="home"> </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($category as $cat)
  @if($cat->group_id == $gr->id)
    		<a href="{{URL::to('category/'.$cat->id.'/'.$cname)}}" type="button" class="list-group-item category_menu" > &nbsp; &nbsp; <span class="glyphicon glyphicon-menu-right"></span> {{$cat->nameENG}}</a>
        @endif
  @endforeach
  
 @endforeach
</div>
      
      
       </div>
      <div class="col-sm-10">
        <h4  > {{$group->nameENG}} </h4>
                        @foreach($category as $pd)
                <div class="col-md-12" style="border:solid  {{$color}}  2px; margin-bottom:0.3%; padding:1%; border-radius:5px">
        <div class="row">
          <div class="col-xs-4" >
            <div style="font-weight:700" align="center"><a href="{{URL::to('category/'.$pd->id.'/'.$pd->nameENG)}}" style="text-decoration:none">{{$pd->nameENG}}</a></div>
            <a href="{{URL::to('category/'.$pd->id.'/'.$pd->nameENG)}}"><img src="{{asset($pd->image)}}"   alt="{{$pd->nameTH}}" style="width:80%"> </a></div>
          <div class=" col-xs-7">   </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