@include('temp2/common/header')
<!--main start-->
    <!-- Start Hero Slider -->
    <div class="hero-slider heroflex flexslider clearfix" data-autoplay="yes" data-pagination="no" data-arrows="yes" data-style="fade" data-speed="7000" data-pause="yes">
      	<ul class="slides">
          @foreach($bannerdata as $bannerdata)
            @if(!empty($bannerdata->image))
                <li class="parallax" style="background-image:url({{url($bannerdata->image)}})!important;background-size:100% AUTO;">
                <div class="flex-caption" data-appear-animation="fadeInRight" data-appear-animation-delay="500">
                @if(!empty($bannerdata->imagetitle))
                <strong>{{($bannerdata->imagetitle)}}</strong>
                @endif
                @if(!empty($bannerdata->description))
                <p style="font-size:20px;">{!! $bannerdata->description !!}</p>
                @endif
                </div>
            @endif 
          @endforeach         	
      	</ul>
        <canvas id="canvas-animation"></canvas>
    </div>
    <!-- End Hero Slider -->
    <!--<div class="upcoming-event-bar event-dynamic">
        <div class="container">
            <div class="row">
            	<div class="col-md-5 col-sm-5">
                	<span class="label label-primary">Upcoming Event</span>
                	<h3><a href="single-event.html" class="event-title">Celebrating the youth participation</a></h3>
                   	<span class="meta-data">On <span class="event-date">13 Jul, 15</span> at <span class="event-time">08:00 AM</span> at</span><span class="meta-data event-location"> <span class="event-location-address">State Route, Madison US</span></span>
                </div>
                <div class="col-md-5 col-sm-7">
                    <div id="counter" class="counter clearfix" data-date="July 13, 2015">
                        <div class="timer-col"> <span id="days"></span> <span class="timer-type">Days</span> </div>
                        <div class="timer-col"> <span id="hours"></span> <span class="timer-type">Hours</span> </div>
                        <div class="timer-col"> <span id="minutes"></span> <span class="timer-type">Minutes</span> </div>
                        <div class="timer-col"> <span id="seconds"></span> <span class="timer-type">Seconds</span> </div>
                    </div>
                </div>
                <div class="col-md-2 text-align-right">
                    <ul class="action-buttons">
                        <li title="Share event"><a href="#" data-trigger="focus" data-placement="top" data-content="" data-toggle="popover" data-original-title="Share Event" class="event-share-link"><i class="icon-share"></i></a></li>
                        <li title="Get directions" class="hidden-xs"><a href="#" class="cover-overlay-trigger event-direction-link"><i class="icon-compass"></i></a></li>
                        <li title="Contact event manager"><a href="#" data-toggle="modal" data-target="#Econtact" class="event-contact-link"><i class="icon-mail"></i></a></li>
                    </ul>
                    <a href="#" class="btn btn-primary btn-sm event-tickets event-register-button">Register</a>
                </div>
            </div>
        </div>
    </div>-->
    <!-- background-image: url(images/decor/ser.png);" -->
    <div class="main">
        <div class="lead-content clearfix" style="margin-top:-131px; background-image: url(images/decor/servbackimg.jpg); background-repeat: round;">
            <div class="lead-content-wrapper" >
                <div class="container">
                    <div class="row">
                        <!-- <h3>Our Services</h3>   -->
                        @foreach($service as $service)                
                        <div class="col-md-3 col-sm-2 featured card">                        
                            <center>
                            <figure>                 
                            @if(!empty($service->image))                      
                                <a href="{{url($service->image)}}" data-rel="prettyPhoto" class="media-box"><img src="{{url($service->image)}}"></a>
                            @endif                        
                            </figure>
                            <h3 style="height:50px;">{{$service->title}}</h3>
                            <p style="height:100px;">{!! substr($service->description,0,200) !!}</p>
                            <a href="{{url($service->route.'/'.$service->id)}}"><button class="btn btn-danger"><b>VIEW</b></button></a></center>
                        </div> 
                    @endforeach                  
                    </div>
                </div>
            </div>
        </div>
<div class="container" style="width: 1150px;">
<div style="height: 300px; margin-left:10px;">
    <div class="col-md-12">
        <div class="row">
        <center>
            <h3 class="element-title" style="color: #bf0a30; font-weight: 600; font-family: ui-serif; font-size: 30px;" >Our Products</h3>
        
            @foreach($product as $surpro)
                            <div class="col-sm-2" style="width:18%;  margin-left: -18px;">
                                <div  id="produdct1" class="cardsizeshape" style="height: 300px; width: 170px;">
                                <span class="trending">Trending Now</span>
                                    <div class="quickviewbody">
                                        <!-- <a id="quickvw1" class="quickview" onclick="openmodal('{{$surpro->id}}')" href="#"  data-quickview="" data-product="" data-size="xl"><i class="fa fa-search-plus"></i> Quick View</a> -->
                                    </div>                                
                                    <div class="card1body" style="height: 300px; width: 170px;">
                                        <div class="card1bodyrounded">
                                            <div class="bodyrowstart" style="">
                                                <div class="card1image">                                                
                                                    @if(!empty($surpro->image1))
                                                    <a href="{{url('/singleproduct/'.$surpro->id)}}" class="mx-auto">                                                    
                                                        <img class="imgstyle" data-sizes="auto" src="{{url($surpro->image1)}}" data-src="" width="120" height="99" alt="" title="" sizes="221px">
                                                    </a>
                                                    @endif
                                                </div>
                                                <div class="textbody">
                                                    <div class="textbody1">
                                                        <div class="textbody3" style="width: 100%; line-height: 14px; height: 115px; ">
                                                            <span class="" style="font-size: 13px;">{{ substr($surpro->productname,0,50) }}...</span>
                                                            <span class="" style="font-size: 9px; font-weight: 400;">{{ substr($surpro->description,0,100) }}...</span>
                                                        </div>
                                                        <div class="tbody35">
                                                        <a href="{{url('/procontribute/'.$surpro->id)}}">
                                                            <div class="" style="background: #bf0a30; border-radius: 6px;">
                                                            <span class="currency"><span class="specialprice" style="font-size: 20px; color: white; font-weight: 500;">${{sprintf("%.2f",$surpro->pricesale)}}</span>&nbsp;&nbsp;<span class="pricemrp"><s style="color: #e2dede;">${{ sprintf("%.2f",$surpro->pricemrp)}}</s></span>
                                                                </span>                                                            
                                                            </div>
                                                        </a>
                                                        </div>
                                                       
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
        </center>
                        </div>  
                    </div>
</div>
</div>
  	<div class="main" role="main" style="background-image: url(images/decor/home2_bg1.png); background-position: center; background-repeat: repeat;">
    	<div id="content" class="content full">
        
        	<div class="container" style="width: 1230px;">
            	<div class="row">                    
                    <div class="col-md-12">
                        <div class="element-block events-listing">
                            <div class="events-listing-header">
                                <a href="{{'allevent'}}" class="pull-right basic-link" style="color:black; font-weight: 600;">All Events</a>
                                <center>
                                    <h3 class="element-title" style="color: #bf0a30; font-weight: 600; font-family: ui-serif; font-size: 30px; margin-left: 50px;" >Upcoming Events</h3>
                                </center>
                                
                            </div>
                            <div class="owlstageouter">
                                <div class="owlstage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 3528px;">
                                @foreach($allevent as $allevent)
                                    <div class="owlitemactive" style="width: 380px; margin-right: 15px; height: 140px;">
                                        <div class="item">
                                            <div class="eventinner">
                                                <div class="eventdate" >{{ date("M d",strtotime($allevent->eventedate))}}<span class="eventtime">{{date("h:i a",strtotime($allevent->eventetime))}}</span></div><!-- .event-date -->
                                                <div class="entrytitle">
                                                    <h5 class="posttitlehead">
                                                        <a class="posttitle">Event: {{$allevent->eventtitle}}</a>
                                                    </h5>
                                                </div><!-- .entry-title -->
                                                <div class="postmore">
                                                    <a class="readmore" href="{{url('/singleevent/'.$allevent->id)}}" >Event Details</a>
                                                </div>
                                            </div><!-- .event-inner -->
                                        </div>
                                    </div>
                                @endforeach
                                </div>
                            </div>
                            <div class="owlstageouter">
                                <div class="owlstage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 3528px;">
                                @foreach($allevent1 as $allevent)
                                    <div class="owlitemactive" style="width: 380px; margin-right: 15px; height: 140px;">
                                        <div class="item">
                                            <div class="eventinner">
                                                <div class="eventdate" >{{ date("M d",strtotime($allevent->eventedate))}}<span class="eventtime">{{$allevent->eventetime}} am</span></div><!-- .event-date -->
                                                <div class="entrytitle">
                                                    <h5 class="posttitlehead">
                                                        <a class="posttitle">Event: {{$allevent->eventtitle}}</a>
                                                    </h5>
                                                </div><!-- .entry-title -->
                                                <div class="postmore">
                                                    <a class="readmore" href="{{url('/singleevent/'.$allevent->id)}}" >Event Details</a>
                                                </div>
                                            </div><!-- .event-inner -->
                                        </div>
                                    </div>
                                @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        	</div>           

           	<div class="spacer-30"></div>

               <style>
.evtimg:hover{
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.evtbox:hover{
    transform: scale(1.05);
}
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 800px; /* Should be removed. Only for demonstration */
}
.column1 {
  float: left;
  width: 49%;
  height: 400px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */

.bottom {
  position: absolute;
  top: 60%;
  left: 16px;
  
  line-height: 1;
  position: relative;
  text-align:left;
  color: white;
  font-family: 'Times New Roman', serif;
}
</style>
<div class="col">
    <div class="events-listing-header">
        <center>
            <h3 class="element-title" style="color: #bf0a30; font-weight: 600; font-family: ui-serif; font-size: 30px; padding: 15px;" >Our Articles</h3>
            
        </center>
    </div>
    <div class="col-md-12" >
        @foreach($article1 as $article1)
        <div class="col-md-12 col-md-4" style="margin-bottom: 10px; padding: 24px;">
            <div class="">
                <div>
                    <img style="height: 500px; width: 700px;" src="{{url($article1->image)}}" />
                </div>
                
                 <div class="openbookback" ><!--style="height: 80px;" <span class="openbook"><i class="fas fa-book-open"></i></span> -->
                <span style="height: 130px;" class="arttitle">{{$article1->title}}</span></div>
                <center><div style=""><a href="{{url('/singlearticle/'.$article1->id)}}"><button class="btn btn-danger learnmore" style=""><b>Read More</b></button></a></div> </center>
            </div>
            
        </div>
        @endforeach
        
        @foreach($article2 as $article2)
        <div class="col-md-12 col-md-4" style="margin-bottom: 10px; padding: 24px;">
            <div class="">
                <div>
                    <img style="height: 500px; width: 700px;" src="{{url($article2->image)}}" />
                </div>
                
                 <div class="openbookback"><!--<span class="openbook"><i class="fas fa-book-open"></i></span> -->
                <span style="height: 130px;" class="arttitle">{{$article2->title}}</span></div>
                <center><div style=""><a href="{{url('/singlearticle/'.$article1->id)}}"><button class="btn btn-danger learnmore" style=""><b>Learn More</b></button></a></div> </center>
            </div>
            
        </div>
        @endforeach
        
    </div>
</div>

<div class="row"></div>

           	<div class="lgray-bg padding-tb45">
            	<div class="container blogcont">
                    <div class="col">
                        <div class="col-md-12">
                        <a href="{{'blog'}}" class="pull-right basic-link" style="color:black; font-weight: 600;">All Blogs</a>
                                <center>
                                    <h3 class="element-title" style="color: #bf0a30; font-weight: 600; font-family: ui-serif; font-size: 30px; margin-left: 50px;" >From our Blogs</h3>
                                </center>    
                        
                            
                            <div class="col">                                
                            <div class="col-md-12">
                                    <ul class="blog-classic-listing">
                                        <div class="row">
                                    @if(!empty($blog))
                                    @foreach($blog as $blog)
                                            <div class="form-group col-sm-4">
                                            <li class="blogli" style="font-family: Volkhov;">
                                                <div class="" style="height: 206px;">
                                                @if(empty($blog->youtube))
                                                    @if(!empty($blog->image))
                                                    <div href="{{ url($blog->image)}}" data-rel="prettyPhoto" class="image-box">                                                        
                                                        <img class="imgred" src="{{ url($blog->image)}}" alt="">
                                                    </div>
                                                    @endif   
                                                @else
                                                    <iframe height="206" width="367" style="border-top-left-radius: 20px; border-top-right-radius: 20px;" src="{{$blog->youtube}}"></iframe>
                                                @endif 
                                                </div>                                                 
                                                
                                                <div class="blogdate"><center><span style="font-size: 16px;"><b>{{ date("d M",strtotime($blog->created_at))}}</b></span></center></div>
                                              
                                                <div class="blogtides">
                                                    <div style="height: 152px;">
                                                        <strong class="post-title" style="font-size:30px;">{!! substr($blog->title,0,16) !!}...</strong>
                                                        <div class="meta-data">BY ADMIN ON {{date('M d Y',strtotime($blog->created_at))}} in General</div>
                                                        <p>{!! substr($blog->metadescription,0,100) !!}...</p>
                                                    </div>
                                                        <center><div style="width:47%"><a  href="{{url('/singleblog/'.$blog->id)}}" style="color:black"><span  class="contread">Continue reading </span><i class="fa fa-arrow-right" aria-hidden="true"></i></a> </div></center>
                                                </div>
                                            </div>
                                        </li>                                        
                                    @endforeach
                                    @endif  
                                        </div>                                      
                                    </ul>
                                </div>
                            </div> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
   	</div>
       
    <!-- End Body Content -->
    <!-- Gallery updates -->
    <div class="gallery-updates cols5 clearfix">
    	<ul>
        @if(!empty($gallery))
        @foreach($gallery as $gallery)
            @if(!empty($gallery->image))
        	<li class="format-image"><a href="{{ url($gallery->image)}}" data-rel="prettyPhoto" class="media-box"><img src="{{ url($gallery->image)}}" alt=""></a></li>
            @endif 
		@endforeach
        @endif
            <!--<li class="format-image"><a href="https://via.placeholder.com/600x600?text=IMAGE+PLACEHOLDER" data-rel="prettyPhoto" class="media-box"><img src="https://via.placeholder.com/600x600?text=IMAGE+PLACEHOLDER" alt=""></a></li>
        	<li class="format-standard">
            	<div class="flexslider galleryflex" data-autoplay="yes" data-pagination="yes" data-arrows="no" data-style="slide" data-pause="yes">
                    <ul class="slides">
                      	<li class="item"><a href="https://via.placeholder.com/600x600?text=IMAGE+PLACEHOLDER" data-rel="prettyPhoto[postname1]"><img src="https://via.placeholder.com/600x600?text=IMAGE+PLACEHOLDER" alt=""></a></li>
                      	<li class="item"><a href="https://via.placeholder.com/800x500?text=IMAGE+PLACEHOLDER" data-rel="prettyPhoto[postname1]"><img src="https://via.placeholder.com/600x600?text=IMAGE+PLACEHOLDER" alt=""></a></li>
              		</ul>
               	</div>
          	</li>-->
        </ul>
        <div class="gallery-updates-overlay">
        	<div class="container">
            	<i class="icon-multiple-image"></i>
                <h2>Our Previous Events</h2>
            </div>
        </div>
    </div>
    
<!--main end-->

@include('temp2/common/footer')