@extends('themes.MyLittleHouseSchool.app')

@section('content')

	<!-- slick slide css -->
	   <link href="css/slick.css" rel="stylesheet">
	   <link href="css/slick-theme.css" rel="stylesheet">

	   <style media="screen">

	   	/***

	   ====================================================================
	   	Timeline design
	   ====================================================================

	    ***/

	   	.dl_timeline {
	   	    overflow: hidden;
	   	    padding: 20px 40px
	   	}

	   	.dl_timeline .box-timeline {
	   	    text-align: center;
	   	    padding: 0 32px;
	   	    margin-top: 10px;
	   	    border-top: 1px solid #dedede
	   	}

	   	.dl_timeline .box-timeline .hook {
	   	    overflow: hidden;
	   	    width: 100%;
	   	    margin-top: -18px
	   	}

	   	.dl_timeline .box-timeline .hook span {
	   	    display: block;
	   	    margin: 0 auto
	   	}

	   	.dl_timeline .box-timeline .hook span:first-child {
	   	    display: inline-block;
	   	    width: 15px;
	   	    height: 15px;
	   	    border: 2px solid #dedede;
	   	    background: white;
	   	    -webkit-border-radius: 50%;
	   	    border-radius: 50%;
	   	    margin-bottom: -7px
	   	}

	   	.dl_timeline .box-timeline .hook span:first-child p {
	   	    width: 3px;
	   	    height: 3px;
	   	    background: #aacb34;
	   	    -webkit-border-radius: 50%;
	   	    border-radius: 50%;
	   	    display: block;
	   	    padding: 0;
	   	    line-height: 15px;
	   	    margin: 4px auto
	   	}

	   	.dl_timeline .box-timeline .hook span:last-child {
	   	    width: 1px;
	   	    height: 40px;
	   	    background: #dedede
	   	}

	   	.dl_timeline .box-timeline h2,
	   	.dl_timeline .box-timeline h4,
	   	.dl_timeline .box-timeline p {
	   	    margin: 0
	   	}

	   	.dl_timeline .box-timeline h2,
	   	.dl_timeline .box-timeline h4 {
	   	    font-size: 18px;
	   	    font-weight: 400
	   	}

	   	.dl_timeline .box-timeline h2 {
	   	    color: #fff;
	   	    padding: 20px 0
	   	}

	   	.dl_timeline .box-timeline p {
	   	    color: #9eaba2;
	   	    padding: 0 25px
	   	}

	   	.dl_timeline .box-timeline h4 {
	   	    padding: 10px 0 20px;
	   	    color: #2e2e2e;
	   	    line-height: 36px
	   	}

	   	.dl_timeline .box-timeline .box-img {
	   	    position: relative
	   	}

	   	.dl_timeline .box-timeline .box-img img {
	   	    width: 100%;
	   	}

	   	.dl_timeline .box-timeline .overlay {
	   	    position: absolute;
	   	    top: 82%;
	   	    height: 100%;
	   	    background-color: #102e19;
	   	    opacity: .9;
	   	    -webkit-transition: all .5s;
	   	    transition: all .5s
	   	}

	   	.dl_timeline .box-timeline:hover .overlay {
	   	    top: 0;
	   	    padding-top: 30%;
	   	    -webkit-transition: all .5s;
	   	    transition: all .5s
	   	}

	   	.dl_timeline.fix-overlay .box-timeline:hover .overlay {
	   	    padding-top: 0
	   	}

	   	.dl_timeline.fix-overlay .box-timeline h2 {
	   	    padding: 10px 0
	   	}

	   	.dl_timeline.fix-overlay .box-timeline p {
	   	    padding: 0 10px
	   	}

	   	.dl_timeline .slick-arrow {
	   	    position: absolute;
	   	    top: 10px;
	   	    display: block;
	   	    width: 40px;
	   	    height: 40px;
	   	    border: 1px solid #c9c9c9;
	   	    -webkit-border-radius: 3px;
	   	    border-radius: 3px;
	   	    text-align: center;
	   	    line-height: 40px;
	   	    cursor: pointer;
	   	    z-index: 999
	   	}

	   	.dl_timeline .slick-arrow:hover i {
	   	    color: #abca38;
	   	    -webkit-transition: all .5s;
	   	    transition: all .5s
	   	}

	   	.dl_timeline .grd-left-arrow {
	   	    left: 0
	   	}

	   	.dl_timeline .grd-right-arrow {
	   	    right: 0
	   	}
	.ourhistory {
	    background: url(../images/bg/bk12.jpg) center top no-repeat;
	    padding: 100px 0;
	    background-size: 102% 265px;
	}

   .ourhistory .slick-arrow::before {
	   color: #222 !important;
	   line-height: 36px;
	   font-size: 30px;
   }

   .ourhistory .slick-next {
	   right: -25px;
   }
	   </style>

	 <script src="js/slick.js"></script>

	     <!--our history-->
	     <div class="ourhistory">
	         <div class="container">
				 <div class="grd-section-title  grd_title-type-1 text-center">
				 	<h3 class="title">{{$title}}</h3>
				 </div>
	             <div class="row dl_timeline">
	                 <div class="history-slide">
						 @foreach(\DB::table('history')->get() as $key => $item)
							 @php
							 	$item = (array) $item;
							 @endphp
	                     <div class="box-timeline">
	                         <div class="hook"><span></span><span></span></div>
	                         <h4>{{$item['date']}}</h4>
	                         <div class="box-img"><img alt="" src="{{asset('/storage/images/original/'.$item['image'])}}">
	                             <div class="overlay">
	                                 <h2>{{$item['title_'.config('app.locale')]}}</h2>
	                                 <p>{{$item['description_'.config('app.locale')]}}</p>
	                             </div>
	                         </div>
	                     </div>
					 @endforeach

	                 </div>
	             </div>

				 <div class="grd-section-title  grd_title-type-1 text-center">
					 <br>
	                 <div class="desc">
	                    {!! $page->content !!}
	                 </div>
	             </div>
	         </div>
	     </div>

	     <!--our history us-->


@endsection

@section('script')

		<script type="text/javascript">

		if ($('.history-slide').length) {
			$('.history-slide').slick({
			  slidesToShow: 3,
			  slidesToScroll: 1,
			  autoplay: true,
			  autoplaySpeed: 4000,
			  dots: false,
			  arrows: true,
				responsive: [
					{
					  breakpoint: 992,
					  settings: {
						slidesToShow: 2
					  }
					},
					{
					  breakpoint: 768,
					  settings: {
						slidesToShow: 1,
						arrows: false

					  }
					},
					{
					  breakpoint: 480,
					  settings: {
						slidesToShow: 1,
						arrows: false
					  }
					}
				  ]

			});
	}

		</script>
@endsection