@include('temp2/common/header')
@if(!empty($title->menuimage))
<div class="page-header parallax clearfix" style="background-image:url({{url($title->menuimage)}})">@endif
        <div class="title-subtitle-holder">
        	<div class="title-subtitle-holder-inner">
    			<h2>{{$title->menutitle}}</h2>
        	</div>
        </div>
    </div>
    <!-- End Page Header -->
    <!-- Breadcrumbs -->
    <div class="lgray-bg breadcrumb-cont">
    	<div class="container">
          	<ol class="breadcrumb">
            	<li><a href="index.html">Home</a></li>
            	<li class="active">{{$title->menutitle}}</li>
          	</ol>
        </div>
    </div>
    <style>
           .cardd{
            width: 260px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            height: 460px;
            display: block;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            margin: 10px 5px;
           }
           .cardd::before {
                content: "";
                position: absolute;
                top: 10px;                
                background: #ffce00;               
            }
            
            .cardd .contentBox {
            position: relative;
            padding: -7px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            z-index: 2;
            }

.cardd .contentBox {
  font-size: 18px;
  color: white;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cardd .contentBox {
  font-size: 24px;
  color: white;
  font-weight: 700;
  letter-spacing: 1px;
}

.cardd .contentBox .buy {
  position: relative;
  top: 100px;
  opacity: 0;
  padding: 10px 30px;
  margin-top: 1px;
  color: #000000;
  text-decoration: none;
  background: #ffce00;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: 0.5s;
}

.cardd:hover .contentBox .buy {
  top: 0;
  opacity: 1;
}


.hint-star {
	display: inline-block;
	margin-left: 0.5em;
	color: red;
	width: 100%;
}

.serviceul{
    margin-top: 15px;
    margin-left: -12px;
}
.serviceli{
    padding: 12px;
    background: brown;
    margin: 1px;
}
li{
    list-style-type: none;
}
.serviceli a{
    font-size: 14px;   
    color: white;
    font-weight: 600;
}
.serviceli:hover{
   
    background: rgb(226, 152, 187);
   
}
.serviceliactive{
   
    background: rgb(226, 152, 187);
   
}
.cardd .contentBox .buy {
    position: relative;
    top: 100px;
    opacity: 0;
    font-weight: 500;
    padding: 10px 30px;
    margin-top: 3px!important;
    color: #efefef!important;
    font-size: 18px;
    text-decoration: none;
    background: #c9003d!important;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.5s;
}


        </style>

    <div class="lead-content clearfix">
    	<div class="lead-content-wrapper">
    		<div class="">
            <div class="row"> 
                <div class="col-sm-2">                                       
                    <div>
                       <ul class="serviceul">
                            <li class="serviceli"><a href="{{url($service->route.'/0')}}">All Services</a></li>
                            @foreach($allservice as $allservice)
                            @php
                            $active='';
                            @endphp
                            @if($allservice->id==Request::segment(2))
                            @php
                            $active='serviceliactive';
                            @endphp
                           
                            @endif
                            <li class="serviceli  {{$active}}">
                                <a href="{{url($allservice->route.'/'.$allservice->id)}}">{{$allservice->title}}</a>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                <div class="col-sm-10">
            	<div class="row">
                    <h3 style="text-align: center; font-size: 30px; margin: 0; padding-top: 10px;" >{{$service->title}}</h3>
                @foreach($surpro as $surpro)
                    <div class="col-sm-3 cardd" style="padding-right:7px; padding-left:7px;">
                        <div class="imgBox" style="background: #ffce00; border-radius: 20px; height:390px; ">
                            <ul>
                                @if(!empty($surpro->image3))                                
                                <li style="height:200px; weidth:200px; margin: 10px 1px; "><a href="{{url('/singleproduct/'.$surpro->id)}}"><img src="{{url($surpro->image3)}}" alt="image" style="height:200px; weidth:200px; margin: 10px 0px; "></a></li>
                                @endif
                                <li style="height:25px; margin: 10px 1px;"><h3>{{ substr($surpro->productname,0,60) }}</h3></li>
                                <li style="height:25px; margin: 10px 1px;"><h6>{!! substr($surpro->description,0,60) !!}</h6></li>
                                <li style="height:25px; margin: 10px 1px;"><h2>$ {{$surpro->pricesale}}</h2></li>
                                <li style="height:25px; margin: 10px 1px;">
                                    <span class="hint-star star">
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                    </span>
                                </li>
                             <div style="height:25px; margin: 10px 1px;"><h3>Pack of {{$surpro->quantity}}</h3></div>
                            </ul>
                        </div>
                        <div class="contentBox">
                            <a class="buy"><button type="submit" style="background-color: transparent; border:none; ">Contribute</button></a>
                        </div>
                    </div>
                @endforeach
</div></div>              
                </div>
        	</div>
        </div>
    </div>

@include('temp2/common/footer')