@include('_partials_admin.head')
	<!-- Main navbar -->
	@include('_partials_admin.navbar')
	<!-- /main navbar -->

					
	<!-- Page content -->
	<div class="page-content">

		<!-- Main sidebar -->
		@include('_partials_admin.sidebar')
		<!-- /main sidebar -->

		<!-- Main content -->
		<div class="content-wrapper">

			<!-- Page header -->
			<div class="page-header">
				<div class="page-header-content header-elements-md-inline">
					<div class="page-title d-flex">
						<h4><i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">Data</span> - {{$judul}}</h4>
						<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
					</div>
				</div>
			</div>
			<!-- /page header -->


			<!-- Content area -->
			<div class="content pt-0">

				<!-- Basic responsive configuration -->
				<div class="card">
					<div class="card-header header-elements-inline">
						<a href="/Admin/Page/Form_add" class="btn btn-success"><i class="icon-plus3"></i> Tambah Data</a>
						<div class="header-elements">
							<div class="list-icons">
		                		<a class="list-icons-item" data-action="collapse"></a>
		                		<a class="list-icons-item" data-action="reload"></a>
		                		<a class="list-icons-item" data-action="remove"></a>
		                	</div>
	                	</div>
					</div>

					<table class="table datatable-responsive">
						<thead>
							<tr>
								<th>No</th>
								<th>Kategori</th>
								<th>Judul Page</th>						
								<th>Seo Page</th>
								<th>Deskripsi</th>
								<th>Status</th>
								<th>Foto</th>
								<th class="text-center">Actions</th>
							</tr>
						</thead>
						
						<tbody>
															@foreach($page as $row)
														<tr>
								<td>{{ $no }}</td>
								<td>{{ $row->nama_kategori }}</td>
								<td>{{ $row->judul_page }}</td>
								<td>{{ $row->seo_page }}</td>
								<td>{!! \Illuminate\Support\Str::limit($row->deskripsi, 100, $end='...') !!}</td>
								<td>{{ $row->status }}</td>
								<td><img class="img-thumbnail img-fluid" style="max-width: 100px;max-height: 100px;" src="/upload/page/{{ $row->foto }}"></td>
								<td class="text-center">
									<div class="list-icons">
										<div class="dropdown">
											<a href="#" class="list-icons-item" data-toggle="dropdown">
												<i class="icon-menu9"></i>
											</a>
											<div class="dropdown-menu dropdown-menu-right">
												<a href="/Admin/Page/Form_edit/{{ $row->id_page }}" class="dropdown-item"><i class="icon-pencil7"></i> Edit</a>
												<a href="#" class="dropdown-item" data-toggle="modal" data-target="#modalDetail{{ $row->id_page }}"><i class="icon-eye4"></i> Detail</a>
												<a href="#" data-toggle="modal" data-target="#modalConfirmDelete{{ $row->id_page }}" class="dropdown-item"><i class="icon-trash-alt"></i> Hapus</a>
											</div>
										</div>
									</div>
								</td>
							</tr>
							@endforeach														
						</tbody>
						
					</table>
				</div>
				<!-- /basic responsive configuration -->

			</div>
			<!-- /content area -->


			<!-- Footer -->
			@include('_partials_admin.footer')
			<!-- /footer -->

		</div>
		<!-- /main content -->

	</div>
	<!-- /page content -->


	@foreach ($page as $row)
	<!--Modal: modalConfirmDelete-->
	<div class="modal fade" id="modalConfirmDelete{{ $row->id_page }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered modal-sm">
			<div class="modal-content">
				<div class="modal-header bg-danger d-flex justify-content-center">
					<h6 class="modal-title">Apakah Anda Yakin ?</h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				<div class="modal-body text-center">
					<i class="icon-warning22 icon-4x text-danger"></i>
					<p class="text-danger mt-2">Data yang anda hapus tidak bisa dikembalikan !</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
					<a href="/Admin/Page/hapus/{{ $row->id_page }}" class="btn bg-danger">Hapus</a>
				</div>
			</div>
		</div>
	</div>
	<!--Modal: modalConfirmDelete-->

	<!-- Primary modal -->
	<div id="modalDetail{{ $row->id_page }}" class="modal fade" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header bg-primary">
					<h6 class="modal-title">Detail Page</h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<div class="modal-body">
					<table class="table" id="sortable-table">                    
              			<tr>
              			  <td class="font-weight-bold">Kategori</td>
              			  <td colspan="2">{{ $row->nama_kategori }}</td>
              			  <td></td>
              			</tr>
              			<tr>
                			<td class="font-weight-bold">Judul Page</td>
                			<td colspan="2">{{ $row->judul_page }}</td>
                			<td></td>
              			</tr>
              			<tr>
                			<td class="font-weight-bold">Seo Page</td>
                			<td colspan="2">{{ $row->seo_page }}</td>
                			<td></td>
              			</tr>
              			<tr>
              			  <td class="font-weight-bold">Deskripsi</td>
              			  <td colspan="2"></td>
              			  <td></td>
              			</tr>
              			<tr>
              			  <td class="font-weight-bold">Status</td>
              			  <td colspan="2">{{ $row->status }}</td>
              			  <td></td>
              			</tr>
              			<tr>
              			  <td class="font-weight-bold">Foto</td>
              			  <td colspan="2">       			    
                        	<img style="width:20%;border: 1px solid #ddd;border-radius: 5px;padding: 5px;width: 100px;height: 100px;" class="img-fluid" src="/upload/page/{{ $row->foto }}">	
             			  </td>
             			  <td></td>
             			</tr>
            		</table>
				</div>

				<div class="modal-footer">
					<button type="button" class="btn bg-primary" data-dismiss="modal">Tutup</button>
				</div>
			</div>
		</div>
	</div>
	<!-- /primary modal -->
	@endforeach

	@if ($message = Session::get('sukses'))
    <script type="text/javascript">
        $(document).ready(function () {
            new Noty(
                {text: 'Data telah disimpan.', type: 'success'}
            ).show();
        });
    </script>
@elseif (Session::get('gagal'))
    <script type="text/javascript">
        $(document).ready(function () {
            new Noty(
                {text: 'Data gagal disimpan.', type: 'error'}
            ).show();
        });
    </script>
@elseif (Session::get('hapus'))
    <script type="text/javascript">
        $(document).ready(function () {
            new Noty(
                {text: 'Data berhasil dihapus.', type: 'success'}
            ).show();
        });
    </script>
	@endif

	</body>
</html>