@extends('layouts.frontend')

@section('style')
@endsection

@section('slider')

		<section id="page-title">

			<div class="container clearfix">
				<h1>Halaman Cek Tiket</h1>
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">PIO</a></li>
					<li class="breadcrumb-item active">Cek</li>
				</ol>
			</div>

		</section>
@endsection

@section('content')
	<div class="container clearfix">
		<div class="title-block">
			<div id="section-buy" class="heading-block title-center nobottomborder page-section">
				<h2>Silahkan Masukkan Nomor Tiket Anda</h2>
				<span></span>
			</div>

			<div class="center">
				<form action="{{route('hasilcek')}}" method="POST">
					@csrf
					<div class="row">
						<div class="col-12 form-group">
							<input class="col-md-4 offset-md-4 sm-form-control" type="text" name="cari" value="{{(isset($permohonan) ? $permohonan->tiket : '')}}" required>
						</div>
					</div>
					<div class="row">
						<div class="col-12 form-group">
							<button class="button button-3d button-blue button-xlarge nobottommargin">Cek</button>
						</div>
					</div>
				</form>
			</div>
		</div>

		<div class="divider"><i class="icon-circle"></i></div>

	@if(isset($permohonan))
		<div id="posts" class="post-grid grid-container post-masonry post-timeline grid-2 clearfix">

						<div class="timeline-border"></div>


						<div class="entry entry-date-section notopmargin"><span>{{$permohonan->created_at->locale('in')->isoFormat('MMMM YYYY')}}</span></div>

						<div class="entry clearfix">
							<div class="entry-timeline">
								<div class="timeline-divider"></div>
							</div>
							<div class="entry-image">
								<a href="{{Storage::url($permohonan->filenik)}}" data-lightbox="image"><img class="image_fade" src="{{Storage::url($permohonan->filenik)}}" alt="File KTP"></a>
							</div>
							<div class="entry-title">
								<h2>Pengguna mengirimkan permohonan informasi ke PPID</h2>
							</div>
							<ul class="entry-meta clearfix">
								<li><i class="icon-calendar3"></i> {{$permohonan->created_at->locale('in')->isoFormat('dddd, DD MMMM YYYY, HH:mm:ss')}}</li>
								<li><i class="icon-ticket-alt"></i> {{$permohonan->tiket}}</li>
							</ul>
						</div>

					   <!-- <div class="entry clearfix">
							<div class="entry-timeline">
								<div class="timeline-divider"></div>
							</div>
							<div class="entry-image">
								<iframe src="http://player.vimeo.com/video/87701971" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
							</div>
							<div class="entry-title">
								<h2><a href="blog-single-full.html">This is a Standard post with an Embedded Video</a></h2>
							</div>
							<ul class="entry-meta clearfix">
								<li><i class="icon-calendar3"></i> 16th Feb 2014</li>
								<li><a href="blog-single-full.html#comments"><i class="icon-comments"></i> 19</a></li>
								<li><a href="#"><i class="icon-film"></i></a></li>
							</ul>
							<div class="entry-content">
								<p>Asperiores, tenetur, blanditiis, quaerat odit ex exercitationem pariatur quibusdam veritatis quisquam laboriosam esse beatae hic perferendis velit deserunt!</p>
								<a href="blog-single-full.html"class="more-link">Read More</a>
							</div>
						</div> -->

					</div>
	@endif
	</div>
@endsection

@section('modal')
@endsection

@section('script')
@if(isset($permohonan))
	<script>
		jQuery(function($) {
			@if(isset($permohonan))
				// $('body,html').stop(true).animate({
				// 	'scrollTop': $('#posts').offset().top
				// }, 1000);

				$( window ).on( 'load', function(){
						// setTimeout( function(){
					var $container = $('#posts');

				    // $container.imagesLoaded( function() {
						$container.isotope({
							transformsEnabled: false,
							itemSelector: '.entry',
							masonry: {
								columnWidth: '.entry:not(.entry-date-section)'
							}
						});
				    // });

					setTimeout( function(){
						SEMICOLON.initialize.blogTimelineEntries();
					}, 1000 );

					// $(window).resize(function() {
					// 	$container.isotope('layout');
					// 	setTimeout( function(){
					// 	SEMICOLON.initialize.blogTimelineEntries();

					// 	}, 5000 );
					// });
						// }, 1000 );
				});
			@endif
		});
	</script>
@endif
@endsection