@extends('layout/user')

@section('tittle', 'Home')

@section('container')
<section class="section border-0 m-0 p-0">
	<div id="carouselExampleIndicators" class="carousel slide">
		<div class="carousel-indicators">
			@php
			$i = 0;
			@endphp
			@foreach ($banner as $b)
			@if ($loop->first)
			<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{$i}}" class="active" aria-current="true" aria-label="Slide {{$i+1}}"></button>
			@else
			<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{$i}}" aria-label="Slide {{$i+1}}"></button>
			@endif
			@php
			$i++;
			@endphp
			@endforeach
		</div>
		<div class="carousel-inner">
			@foreach ($banner as $b)
			<div class="carousel-item{{($loop->first ? ' active' : '')}}">
				<img src="{{url('foto/banner/'.$b->foto)}}" class="d-block w-100" alt="">
			</div>
			@endforeach
		</div>
		<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="visually-hidden">Previous</span>
		</button>
		<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="visually-hidden">Next</span>
		</button>
	</div>
</section>
<div class="section">
	<div class="row align-items-center">
		<div class="col-sm-12">
			<div class="marquee p-2" data-duration="20000" data-gap="10" data-duplicated="true" data-startVisible="true">
				<p class="text-7 text-dark m-0 py-2">
					<span class="me-5">Semangat Belajar Berbuat dan Ikhlas</span>
					<span class="me-5">Semangat Belajar Berbuat dan Ikhlas</span>
					<span class="me-5">Semangat Belajar Berbuat dan Ikhlas</span>
					<span class="me-5">Semangat Belajar Berbuat dan Ikhlas</span>
				</p>
			</div>
		</div>
	</div>
</div>
<section class="section bg-color-primary border-0 m-0">
	<div class="container container-xl-custom">
		<div class="row">
			<div class="col text-center">
				<div class="owl-carousel owl-theme nav-dark stage-margin nav-style-1 m-0" data-plugin-options="{'items': 5, 'margin': 5, 'loop': false, 'nav': true, 'dots': false, 'stagePadding': 40}">

					<div class="px-3">
						<a href="http://siakad.stita.ac.id" target="_blank" class="text-decoration-none">
							<div class="card border-radius-0">
								<div class="card-body text-center ">
									<img width="60" height="60" src="{{url('foto/icon/graduation-cap-solid.svg')}}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary mt-3 mb-4 pb-3'}" />
									<h5 class="text-color-dark font-weight-bold line-height-1 text-4-5 mb-3">SIAKAD</h5>
								</div>
							</div>
						</a>
					</div>

					<div class="px-3">
						<a href="#" target="_blank" class="text-decoration-none">
							<div class="card border-radius-0">
								<div class="card-body text-center ">
									<img width="60" height="60" src="{{url('foto/icon/chalkboard-teacher-solid.svg')}}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary mt-3 mb-4 pb-3'}" />
									<h5 class="text-color-dark font-weight-bold line-height-1 text-4-5 mb-3">E-Learning</h5>
								</div>
							</div>
						</a>
					</div>

					<div class="px-3">
						<a href="https://www.gramedia.com/" target="_blank" class="text-decoration-none">
							<div class="card border-radius-0">
								<div class="card-body text-center ">
									<img width="60" height="60" src="{{url('foto/icon/book-solid.svg')}}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary mt-3 mb-4 pb-3'}" />
									<h5 class="text-color-dark font-weight-bold line-height-1 text-4-5 mb-3">Perpustakaan</h5>
								</div>
							</div>
						</a>
					</div>

					<div class="px-3">
						<a href="http://pendaftaran.stita.ac.id" target="_blank" class="text-decoration-none">
							<div class="card border-radius-0">
								<div class="card-body text-center ">
									<img width="60" height="60" src="{{url('foto/icon/user-edit-solid.svg')}}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary mt-3 mb-4 pb-3'}" />
									<h5 class="text-color-dark font-weight-bold line-height-1 text-4-5 mb-3">Pendaftaran</h5>
								</div>
							</div>
						</a>
					</div>
					<div class="px-3">
						<a href="https://www.ejurnal.stita.ac.id" target="_blank" class="text-decoration-none">
							<div class="card border-radius-0">
								<div class="card-body text-center ">
									<img width="60" height="60" src="{{url('foto/icon/scroll-solid (1).svg')}}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary mt-3 mb-4 pb-3'}" />
									<h5 class="text-color-dark font-weight-bold line-height-1 text-4-5 mb-3">E-jurnal</h5>
								</div>
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
@if(!$headline->isEmpty())
<div class="container container-xl-custom">
	<div class="row pb-1 mt-5 pt-3">
		<div class="col-lg-7 mb-4 pb-2">
			<a href="{{url('view/informasi/'.$headline[0]->slug)}}">
				<article class="thumb-info thumb-info-no-borders thumb-info-bottom-info thumb-info-bottom-info-dark thumb-info-bottom-info-show-more thumb-info-no-zoom border-radius-0">
					<div class="thumb-info-wrapper thumb-info-wrapper-opacity-6">
						@if ($headline[0]->foto)
						<img src="{{url('foto/berita/'.$headline[0]->foto)}}" class="img-fluid" alt="{{$headline[0]->judul}}">
						@else
						<img src="{{url('foto/berita/default.png')}}" class="img-fluid" alt="{{$headline[0]->judul}}">
						@endif
						<div class="thumb-info-title bg-transparent p-4">
							<div class="thumb-info-type bg-color-dark px-2 mb-1">{{$headline[0]->nama_kategori}}</div>
							<div class="thumb-info-inner mt-1">
								<h2 class="font-weight-bold text-color-light line-height-2 text-5 mb-0">{{$headline[0]->judul}}</h2>
							</div>
							<div class="thumb-info-show-more-content">
								<p class="mb-0 text-1 line-height-9 mb-1 mt-2 text-light opacity-5">{!!\Illuminate\Support\Str::limit(strip_tags($headline[0]->content),100,"...")!!}</p>
							</div>
						</div>
					</div>
				</article>
			</a>
		</div>

		<div class="col-lg-5">
			@foreach ($headline as $h)
			@if (!$loop->first)
			<article class="thumb-info thumb-info-no-zoom bg-transparent border-radius-0 pb-4 mb-2">
				<div class="row align-items-center pb-1">
					<div class="col-sm-5">
						<a href="{{url('view/informasi/'.$h->slug)}}">
							@if ($h->foto)
							<img src="{{url('foto/berita/'.$h->foto)}}" class="img-fluid border-radius-0" alt="Simple Ways to Have a Pretty Face">
							@else
							<img src="{{url('foto/berita/default.png')}}" class="img-fluid border-radius-0" alt="Simple Ways to Have a Pretty Face">
							@endif
						</a>
					</div>
					<div class="col-sm-7 ps-sm-1">
						<div class="thumb-info-caption-text">
							<div class="thumb-info-type text-light text-uppercase d-inline-block bg-color-dark px-2 m-0 mb-1 float-none">
								<a href="{{url('informasi/'.$h->slug_kategori)}}" class="text-decoration-none text-color-light">{{$h->nama_kategori}}</a>
							</div>
							<h2 class="d-block line-height-2 text-4 text-dark font-weight-bold mt-1 mb-0">
								<a href="{{url('view/informasi/'.$h->slug)}}" class="text-decoration-none text-color-dark text-color-hover-primary">{{$h->judul}}</a>
							</h2>
						</div>
					</div>
				</div>
			</article>
			@endif
			@endforeach
		</div>
	</div>
</div>
@endif
<div class="container container-xl-custom">
	<div class="row mt-5 pt-3">
		<div class="col-md-9">
			@if (!empty($berita_1))
			<div class="heading heading-border heading-middle-border">
				<h3 class="text-4"><strong class="font-weight-bold text-1 px-3 text-light py-2 bg-secondary">{{$berita_1[0]->nama_kategori}}</strong></h3>
			</div>

			<div class="row pb-1">

				<div class="col-lg-6 mb-4 pb-1">
					<article class="thumb-info thumb-info-no-zoom bg-transparent border-radius-0 pb-2 mb-2">
						<div class="row">
							<div class="col">
								<a href="{{url('view/informasi/'.$berita_1[0]->slug)}}">
									@if ($berita_1[0]->foto)
									<img src="{{url('foto/berita/'.$berita_1[0]->foto)}}" class="img-fluid border-radius-0" alt="{{$berita_1[0]->judul}}">
									@else
									<img src="{{url('foto/berita/default.png')}}" class="img-fluid border-radius-0" alt="{{$berita_1[0]->judul}}">
									@endif
								</a>
							</div>
						</div>
						<div class="row">
							<div class="col">
								<div class="thumb-info-caption-text">
									<div class="d-inline-block text-default text-1 mt-2 float-none">
										<a href="{{url('view/informasi/'.$berita_1[0]->slug)}}" class="text-decoration-none text-color-default">{{\Carbon\Carbon::parse($berita_1[0]->created_at)->translatedFormat('F d, Y')}}</a>
									</div>
									<h4 class="d-block line-height-2 text-4 text-dark font-weight-bold mb-0">
										<a href="{{url('view/informasi/'.$berita_1[0]->slug)}}" class="text-decoration-none text-color-dark text-color-hover-primary">{{$berita_1[0]->judul}}</a>
									</h4>
								</div>
							</div>
						</div>
					</article>
				</div>

				<div class="col-lg-6">
					@foreach ($berita_1 as $b)
					@if (!$loop->first)
					<article class="thumb-info thumb-info-no-zoom bg-transparent border-radius-0 pb-4 mb-2">
						<div class="row align-items-center pb-1">
							<div class="col-sm-4">
								<a href="{{url('view/informasi/'.$b->slug)}}">
									@if ($b->foto)
									<img src="{{url('foto/berita/'.$b->foto)}}" class="img-fluid border-radius-0" alt="{{$b->judul}}">
									@else
									<img src="{{url('foto/berita/default.png')}}" class="img-fluid border-radius-0" alt="{{$b->judul}}">
									@endif
								</a>
							</div>
							<div class="col-sm-8 ps-sm-0">
								<div class="thumb-info-caption-text">
									<div class="d-inline-block text-default text-1 float-none">
										<a href="{{url('view/informasi/'.$b->slug)}}" class="text-decoration-none text-color-default">{{\Carbon\Carbon::parse($b->created_at)->translatedFormat('F d, Y')}}</a>
									</div>
									<h4 class="d-block pb-2 line-height-2 text-3 text-dark font-weight-bold mb-0">
										<a href="{{url('view/informasi/'.$b->slug)}}" class="text-decoration-none text-color-dark text-color-hover-primary">{{$b->judul}}</a>
									</h4>
								</div>
							</div>
						</div>
					</article>
					@endif
					@endforeach
				</div>
			</div>
			@endif
			@if (!empty($berita_2))
			<div class="heading heading-border heading-middle-border">
				<h3 class="text-4"><strong class="font-weight-bold text-1 px-3 text-light py-2 bg-tertiary">{{$berita_2[0]->nama_kategori}}</strong></h3>
			</div>

			<div class="row pb-1">

				<div class="col-lg-6 mb-4 pb-1">
					<article class="thumb-info thumb-info-no-zoom bg-transparent border-radius-0 pb-2 mb-2">
						<div class="row">
							<div class="col">
								<a href="{{url('view/informasi/'.$berita_2[0]->slug)}}">
									@if ($berita_2[0]->foto)
									<img src="{{url('foto/berita/'.$berita_2[0]->foto)}}" class="img-fluid border-radius-0" alt="{{$berita_2[0]->judul}}">
									@else
									<img src="{{url('foto/berita/default.png')}}" class="img-fluid border-radius-0" alt="{{$berita_2[0]->judul}}">
									@endif
								</a>
							</div>
						</div>
						<div class="row">
							<div class="col">
								<div class="thumb-info-caption-text">
									<div class="d-inline-block text-default text-1 mt-2 float-none">
										<a href="{{url('view/informasi/'.$berita_2[0]->slug)}}" class="text-decoration-none text-color-default">{{\Carbon\Carbon::parse($berita_2[0]->created_at)->translatedFormat('F d, Y')}}</a>
									</div>
									<h4 class="d-block line-height-2 text-4 text-dark font-weight-bold mb-0">
										<a href="{{url('view/informasi/'.$berita_2[0]->slug)}}" class="text-decoration-none text-color-dark text-color-hover-primary">{{$berita_2[0]->judul}}</a>
									</h4>
								</div>
							</div>
						</div>
					</article>
				</div>

				<div class="col-lg-6">
					@foreach ($berita_2 as $b)
					@if (!$loop->first)
					<article class="thumb-info thumb-info-no-zoom bg-transparent border-radius-0 pb-4 mb-2">
						<div class="row align-items-center pb-1">
							<div class="col-sm-4">
								<a href="{{url('view/informasi/'.$b->slug)}}">
									@if ($b->foto)
									<img src="{{url('foto/berita/'.$b->foto)}}" class="img-fluid border-radius-0" alt="{{$b->judul}}">
									@else
									<img src="{{url('foto/berita/default.png')}}" class="img-fluid border-radius-0" alt="{{$b->judul}}">
									@endif
								</a>
							</div>
							<div class="col-sm-8 ps-sm-0">
								<div class="thumb-info-caption-text">
									<div class="d-inline-block text-default text-1 float-none">
										<a href="{{url('view/informasi/'.$b->slug)}}" class="text-decoration-none text-color-default">{{\Carbon\Carbon::parse($b->created_at)->translatedFormat('F d, Y')}}</a>
									</div>
									<h4 class="d-block pb-2 line-height-2 text-3 text-dark font-weight-bold mb-0">
										<a href="{{url('view/informasi/'.$b->slug)}}" class="text-decoration-none text-color-dark text-color-hover-primary">{{$b->judul}}</a>
									</h4>
								</div>
							</div>
						</div>
					</article>
					@endif
					@endforeach
				</div>
			</div>
			@endif
			@if (!empty($berita_3))
			<div class="heading heading-border heading-middle-border">
				<h3 class="text-4"><strong class="font-weight-bold text-1 px-3 text-light py-2 bg-quaternary">{{$berita_3[0]->nama_kategori}}</strong></h3>
			</div>

			<div class="row pb-1">

				<div class="col-lg-6 mb-4 pb-1">
					<article class="thumb-info thumb-info-no-zoom bg-transparent border-radius-0 pb-2 mb-2">
						<div class="row">
							<div class="col">
								<a href="{{url('view/informasi/'.$berita_3[0]->slug)}}">
									@if ($berita_3[0]->foto)
									<img src="{{url('foto/berita/'.$berita_3[0]->foto)}}" class="img-fluid border-radius-0" alt="{{$berita_3[0]->judul}}">
									@else
									<img src="{{url('foto/berita/default.png')}}" class="img-fluid border-radius-0" alt="{{$berita_3[0]->judul}}">
									@endif
								</a>
							</div>
						</div>
						<div class="row">
							<div class="col">
								<div class="thumb-info-caption-text">
									<div class="d-inline-block text-default text-1 mt-2 float-none">
										<a href="{{url('view/informasi/'.$berita_3[0]->slug)}}" class="text-decoration-none text-color-default">{{\Carbon\Carbon::parse($berita_3[0]->created_at)->translatedFormat('F d, Y')}}</a>
									</div>
									<h4 class="d-block line-height-2 text-4 text-dark font-weight-bold mb-0">
										<a href="{{url('view/informasi/'.$berita_3[0]->slug)}}" class="text-decoration-none text-color-dark text-color-hover-primary">{{$berita_3[0]->judul}}</a>
									</h4>
								</div>
							</div>
						</div>
					</article>
				</div>

				<div class="col-lg-6">
					@foreach ($berita_3 as $b)
					@if (!$loop->first)
					<article class="thumb-info thumb-info-no-zoom bg-transparent border-radius-0 pb-4 mb-2">
						<div class="row align-items-center pb-1">
							<div class="col-sm-4">
								<a href="{{url('view/informasi/'.$b->slug)}}">
									@if ($b->foto)
									<img src="{{url('foto/berita/'.$b->foto)}}" class="img-fluid border-radius-0" alt="{{$b->judul}}">
									@else
									<img src="{{url('foto/berita/default.png')}}" class="img-fluid border-radius-0" alt="{{$b->judul}}">
									@endif
								</a>
							</div>
							<div class="col-sm-8 ps-sm-0">
								<div class="thumb-info-caption-text">
									<div class="d-inline-block text-default text-1 float-none">
										<a href="{{url('view/informasi/'.$b->slug)}}" class="text-decoration-none text-color-default">{{\Carbon\Carbon::parse($b->created_at)->translatedFormat('F d, Y')}}</a>
									</div>
									<h4 class="d-block pb-2 line-height-2 text-3 text-dark font-weight-bold mb-0">
										<a href="{{url('view/informasi/'.$b->slug)}}" class="text-decoration-none text-color-dark text-color-hover-primary">{{$b->judul}}</a>
									</h4>
								</div>
							</div>
						</div>
					</article>
					@endif
					@endforeach
				</div>
			</div>
			@endif
			<div class="text-center py-3 mb-4">
				<a href="#" class="d-block">
					<img alt="STIT Al-Bukhary Labuhanbatu" class="img-fluid ps-3" src="{{url('logo_real1.png')}}" />
				</a>
			</div>

		</div>

		@include('layout/aside')
	</div>
	<div class="row pt-3">
		<div class="col-md-9">
			<div class="blog-posts">
				<article class="post post-large">
					<div class="post-content mb-5 text-center">
						<h2 class="font-weight-semibold text-6 line-height-3 mb-5"><a href="{{url('gallery')}}" class="text-color-dark text-color-hover-primary">Gallery</a></h2>
					</div>
					<div class="post-image mt-5">
						<div class="lightbox pt-5" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}">
							<div class="row mx-0">
								@foreach ($gallery as $g)
								<div class="col-6 col-md-4 p-1">
									<a href="{{url('foto/gallery/'.$g->foto)}}">
										<span class="thumb-info thumb-info-no-borders thumb-info-centered-icons">
											<span class="thumb-info-wrapper" style="height: 210px;">
												<img src="{{url('foto/gallery/'.$g->foto)}}" class="img-fluid" alt="" />
												<span class="thumb-info-action">
													<span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fas fa-plus text-dark"></i></span>
												</span>
											</span>
										</span>
									</a>
								</div>
								@endforeach
							</div>
						</div>
					</div>
				</article>
			</div>
		</div>
	</div>
</div>
@endsection