158 lines
7.3 KiB
PHP
158 lines
7.3 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 Kategori</strong>
|
||
</div>
|
||
<div class="card-body">
|
||
<a class="btn btn-primary mb-3" href="#" data-toggle="modal" data-target="#addModal">
|
||
<i class="fa fa-plus fa-sm fa-fw mr-1 text-gray-400"></i>
|
||
Tambah Kategori
|
||
</a>
|
||
<table id="bootstrap-data-table" class="table table-striped table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 5%;" class="text-center">No</th>
|
||
<th style="width: 50%;">Nama Kategori</th>
|
||
<th style="width: 30%;">Opsi</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@foreach ($categories as $index => $item)
|
||
<tr>
|
||
<td class="text-center">{{ $index + 1 }}</td>
|
||
<td>{{ $item->name }}</td>
|
||
<td class="text-center">
|
||
<a class="btn btn-warning mb-3" href="#" data-toggle="modal"
|
||
data-target="#editModal" onclick="updateData({{ $item }})">
|
||
<i class="fa fa-edit"></i>
|
||
</a>
|
||
<a class="btn btn-danger mb-3" href="#" data-toggle="modal"
|
||
data-target="#deleteModal" onclick="deleteData({{ $item->id }})">
|
||
<i class="fa fa-trash"></i>
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
@endforeach
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div><!-- .animated -->
|
||
|
||
</div><!-- .content -->
|
||
|
||
{{-- tambah modal --}}
|
||
<div class="modal fade" id="addModal" 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">Tambah Kategori</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="{{ route('categories.store') }}" method="POST" id="formTambah">
|
||
@csrf
|
||
<div class="form-group">
|
||
<label for="name" class="form-label">Nama Kategori</label>
|
||
<input type="text" name="name" id="name" class="form-control" required>
|
||
</div>
|
||
{{-- <button type="submit" class="btn btn-primary">Tambah</button> --}}
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
||
<button type="submit" class="btn btn-primary" form="formTambah">Tambah</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- modal edit --}}
|
||
<div class="modal fade" id="editModal" 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">Edit Kategori</h5>
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form action="{{ route('categories.update', $item->id) }}" method="POST" id="formEdit">
|
||
@csrf
|
||
@method('PUT')
|
||
<div class="form-group">
|
||
<label for="nama" class="form-label">Nama Kategori</label>
|
||
<input type="text" name="nama" id="nama" class="form-control"
|
||
value="{{ $item->name }}" required>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||
<button type="submit" class="btn btn-primary">Edit</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function updateCategory(data) {
|
||
console.log(data);
|
||
const form = document.getElementById('formEdit');
|
||
form.action = "{{ route('categories.update', ':id') }}".replace(':id', data.id);
|
||
form.querySelector('#nama').value = data.name;
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
|
||
<!-- Modal Hapus -->
|
||
<div class="modal fade" id="deleteModal" 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">Hapus Kategori</h5>
|
||
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
Apakah anda yakin mau menghapus data ini?
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
||
<form action="" method="POST" id="deleteForm">
|
||
@csrf
|
||
@method('DELETE')
|
||
<button type="submit" class="btn btn-danger">Ya! Hapus</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
function deleteData(id) {
|
||
console.log(id);
|
||
const form = document.getElementById('deleteForm');
|
||
form.action = "{{ route('categories.destroy', ':id') }}".replace(':id', id);
|
||
}
|
||
</script>
|
||
@endsection
|