TIF_E41200540/resources/views/pages/kriteria/index.blade.php

259 lines
12 KiB
PHP

@extends('layouts.main')
@section('subtitle', 'Kriteria')
@section('content')
<div class="content-wrapper">
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">Kriteria</h1>
</div>
</div>
</div>
</div>
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Data Kriteria</h3>
<div class="card-tools">
<button type="button" class="btn btn-success" data-toggle="modal"
data-target="#modal-default">
Tambah
</button>
<div class="modal fade" id="modal-default">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Tambah Data Kriteria</h4>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form action="{{ route('kriteria.store') }}" method="POST">
@csrf
<div class="card-body">
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" class="form-control" name="nama"
id="nama" placeholder="Nama">
</div>
<div class="form-group">
<label for="keterangan">Keterangan</label>
<input type="text" class="form-control" name="keterangan"
id="keterangan" placeholder="Keterangan">
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<table id="myTable" class="table table-bordered table-hover">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Keterangan</th>
<th class="w-25">Opsi</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</section>
<!-- /.content -->
<div class="modal fade" id="modal-edit">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Data Kriteria</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form action="{{ route('kriteria.update') }}" method="POST">
@csrf
@method('PUT')
<div class="card-body">
<input type="hidden" name="id_kriteria" id="id_kriteria">
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" class="form-control" name="nama" id="nama"
placeholder="Nama">
</div>
<div class="form-group">
<label for="keterangan">Keterangan</label>
<input type="text" class="form-control" name="keterangan" id="keterangan"
placeholder="Keterangan">
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@if (session('success'))
<script>
Swal.fire({
icon: 'success',
title: 'Berhasil',
text: '{{ session('success') }}'
});
</script>
@endif
@if ($errors->any())
<script>
Swal.fire({
icon: 'error',
title: 'Oopss...',
text: '{{ $errors->first() }}'
});
</script>
@endif
<script>
$(document).ready(function() {
$("#myTable").DataTable({
processing: true,
ordering: true,
responsive: true,
serverSide: true,
ajax: "{{ route('kriteria') }}",
columns: [{
data: 'DT_RowIndex',
name: 'DT_RowIndex'
},
{
data: 'nama',
name: 'nama'
},
{
data: 'keterangan',
name: 'keterangan'
},
{
data: null,
render: function(data) {
return '<div class="row justify-content-center">' +
'<div class="col-auto">' +
'<button type="button" class="btn btn-warning m-1" data-toggle="modal"' +
'data-target="#modal-edit" data-id="' + data
.id_kriteria + '" data-nama="' + data.nama + '" data-keterangan="' +
data.keterangan + '">' +
'Edit' +
'</button>' +
'<button type="button" class="btn btn-danger m-1" onclick="confirmDelete(' +
data.id_kriteria + ')"' +
'data-id="' + data.id +
'">Hapus</button>' +
'</div>' +
'</div>';
}
}
],
rowCallback: function(row, data, index) {
var dt = this.api();
$(row).attr('data-id', data.id);
$('td:eq(0)', row).html(dt.page.info().start + index + 1);
}
});
$('#modal-edit').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget);
var id_kriteria = button.data('id');
var nama = button.data('nama');
var keterangan = button.data('keterangan');
var modal = $(this);
modal.find('.modal-body #id_kriteria').val(id_kriteria);
modal.find('.modal-body #nama').val(nama);
modal.find('.modal-body #keterangan').val(keterangan);
});
$('.datatable-input').on('input', function() {
var searchText = $(this).val().toLowerCase();
$('.table tr').each(function() {
var rowData = $(this).text().toLowerCase();
if (rowData.indexOf(searchText) === -1) {
$(this).hide();
} else {
$(this).show();
}
});
});
});
function confirmDelete(id) {
Swal.fire({
title: 'Apakah Anda yakin?',
text: "Anda tidak akan dapat mengembalikan data ini!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ya, hapus!',
cancelButtonText: 'Batal'
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
url: "{{ url('kriteria') }}/" + id,
type: 'DELETE',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function(response) {
$('#myTable').DataTable().row($('#myTable').find('tr[data-id="' + id +
'"]')).remove().draw();
Swal.fire(
'Terhapus!',
'Data berhasil dihapus.',
'success'
);
},
error: function(xhr, status, error) {
Swal.fire(
'Gagal!',
'Terjadi kesalahan saat menghapus data. Silahkan coba lagi',
'error'
);
}
});
}
});
}
</script>
@endsection