141 lines
7.1 KiB
PHP
141 lines
7.1 KiB
PHP
@extends('layout.app')
|
||
@section('content')
|
||
<div class="content">
|
||
<div class="animated fadeIn">
|
||
<div class="row">
|
||
|
||
<div class="col-md-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<strong class="card-title">Data Post</strong>
|
||
</div>
|
||
<div class="card-body">
|
||
<table id="bootstrap-data-table" class="table table-striped table-bordered">
|
||
<thead class="text-center">
|
||
<tr>
|
||
<th>No</th>
|
||
<th>User</th>
|
||
<th>Title</th>
|
||
{{-- <th>Category</th> --}}
|
||
{{-- <th>Description</th> --}}
|
||
<th>Published</th>
|
||
<th>Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="text-center">
|
||
@foreach ($posts as $item)
|
||
<tr>
|
||
<td>{{ $loop->iteration }}</td>
|
||
<td>{{ $item->user->name }}</td>
|
||
<td>{{ $item->title }}</td>
|
||
{{-- <td>
|
||
<ul class="list-unstyled">
|
||
@foreach ($item->categories as $categoryPost)
|
||
<li>{{ $categoryPost->name }}</li>
|
||
@endforeach
|
||
</ul>
|
||
</td> --}}
|
||
{{-- <td>{{ $item->description }}</td> --}}
|
||
<td>
|
||
@if ($item->status_published == 'active')
|
||
<span class="badge badge-success">{{ $item->status_published }}</span>
|
||
@else
|
||
<span class="badge badge-danger">{{ $item->status_published }}</span>
|
||
@endif
|
||
</td>
|
||
<td>
|
||
<div class="justify-content-center">
|
||
<a href="#" data-toggle="modal" data-target="#updateModal"
|
||
class="btn btn-warning btn-sm"
|
||
onclick="updateData({{ $item }})">
|
||
<i class="fa fa-edit"></i>
|
||
</a>
|
||
<a href="#" data-toggle="modal" data-target="#deleteModal"
|
||
class="btn btn-danger btn-sm"
|
||
onclick="deleteData({{ $item->id }})">
|
||
<i class="fa fa-trash"></i>
|
||
</a>
|
||
<a href="#" data-toggle="modal" data-target="#detailModal"
|
||
class="btn btn-info btn-sm"
|
||
onclick="detailData({{ $item }})"><i
|
||
class="fa fa-info"></i></a>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
@endforeach
|
||
</tbody>
|
||
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div><!-- .animated -->
|
||
|
||
</div><!-- .content -->
|
||
|
||
<!-- detail Modal-->
|
||
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
|
||
aria-hidden="true">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="exampleModalLabel">Detail Post</h5>
|
||
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form action="" method="POST" id="detailForm">
|
||
@csrf
|
||
<div class="form-group">
|
||
<label for="exampleCategory" class="form-label">Category</label>
|
||
<input type="text" name="category" id="category" class="form-control" readonly>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleDescription" class="form-label">Description</label>
|
||
<input type="text" name="description" id="description" class="form-control" readonly>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleDate" class="form-label">Date</label>
|
||
<input type="date" name="date" id="date" class="form-control" readonly>
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- function detail --}}
|
||
<script>
|
||
function detailData(data) {
|
||
console.log(data);
|
||
|
||
let date = new Date(data.updated_at);
|
||
|
||
// Format tanggal menjadi YYYY-MM-DD
|
||
let year = date.getFullYear();
|
||
let month = ('0' + (date.getMonth() + 1)).slice(-2);
|
||
let day = ('0' + date.getDate()).slice(-2);
|
||
let formattedDate = `${year}-${month}-${day}`;
|
||
const form = document.getElementById('detailForm');
|
||
|
||
// form.querySelector('#users').value = data.user.name;
|
||
form.querySelector('#date').value = formattedDate
|
||
|
||
let categoryNames = data.categories.map(category => category.name).join(', ');
|
||
form.querySelector('#category').value = categoryNames;
|
||
form.querySelector('#description').value = data.description
|
||
|
||
|
||
}
|
||
</script>
|
||
@endsection
|