357 lines
14 KiB
PHP
357 lines
14 KiB
PHP
@extends('admin.layouts.app')
|
|
@section('content')
|
|
<!-- [ breadcrumb ] start -->
|
|
<div class="page-header">
|
|
<div class="page-block">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-12">
|
|
<div class="page-header-title">
|
|
<h5 class="m-b-10">Data Booking Pengguna</h5>
|
|
</div>
|
|
<ul class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="javascript: void(0)">Data Master</a></li>
|
|
<li class="breadcrumb-item" aria-current="page">Halaman Data Booking Pengguna</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- [ breadcrumb ] end -->
|
|
|
|
<!-- [ Main Content ] start -->
|
|
<div class="row">
|
|
<!-- [ sample-page ] start -->
|
|
<div class="col-sm-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h5>Kumpulan Data Booking</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="alert alert-info alert-dismissible fade show" role="alert">
|
|
<strong>Note:</strong> Untuk detail lainnya, silahkan tekan tombol info.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
<table class="table" id="table-data">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama Lengkap</th>
|
|
<th>Email</th>
|
|
<th>No Telp</th>
|
|
<th>Kode Unik</th>
|
|
<th>Tgl Booking</th>
|
|
<th>Status</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- [ sample-page ] end -->
|
|
</div>
|
|
<!-- [ Main Content ] end -->
|
|
|
|
<!-- Info Modal -->
|
|
<div class="modal fade" id="infoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="exampleModalLabel">Info Data</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-12 my-1">
|
|
<label for="info_nama_lengkap" class="form-label">Nama Lengkap</label>
|
|
<input disabled type="text" class="form-control" id="info_nama_lengkap" name="info_nama_lengkap">
|
|
</div>
|
|
<div class="col-md-12 my-1">
|
|
<label for="info_email" class="form-label">Email</label>
|
|
<input disabled type="text" class="form-control" id="info_email" name="info_email">
|
|
</div>
|
|
<div class="col-md-12 my-1">
|
|
<label for="info_no_telp" class="form-label">Nomor Telepon</label>
|
|
<input disabled type="text" class="form-control" id="info_no_telp" name="info_no_telp">
|
|
</div>
|
|
<div class="col-md-12 my-1">
|
|
<label for="info_kode_unik" class="form-label">Kode Unik</label>
|
|
<input disabled type="text" class="form-control" id="info_kode_unik" name="info_kode_unik">
|
|
</div>
|
|
<div class="col-md-12 my-1">
|
|
<label for="info_tgl_booking" class="form-label">Tanggal Booking</label>
|
|
<input disabled type="text" class="form-control" id="info_tgl_booking" name="info_tgl_booking">
|
|
</div>
|
|
<div class="col-md-12 my-1">
|
|
<label for="info_status_tes" class="form-label">Status</label>
|
|
<br>
|
|
<button disabled class="btn btn-primary" id="info_status_tes"></button>
|
|
</div>
|
|
<div class="col-md-12 my-1">
|
|
<label for="info_deskripsi_tambahan" class="form-label">Deskripsi Tambahan</label>
|
|
<input disabled type="text" class="form-control" id="info_deskripsi_tambahan" name="info_deskripsi_tambahan">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Modal -->
|
|
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="exampleModalLabel">Edit Data</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-12 my-1">
|
|
<label for="edit_nama_lengkap" class="form-label">Nama Lengkap</label>
|
|
<input disabled type="text" class="form-control" id="edit_nama_lengkap" name="edit_nama_lengkap">
|
|
</div>
|
|
<div class="col-md-12 my-1">
|
|
<label for="edit_email" class="form-label">Email</label>
|
|
<input disabled type="text" class="form-control" id="edit_email" name="edit_email">
|
|
</div>
|
|
<div class="col-md-12 my-1">
|
|
<label for="edit_no_telp" class="form-label">Nomor Telepon</label>
|
|
<input disabled type="text" class="form-control" id="edit_no_telp" name="edit_no_telp">
|
|
</div>
|
|
<div class="col-md-12 my-1">
|
|
<label for="edit_kode_unik" class="form-label">Kode Unik</label>
|
|
<input disabled type="text" class="form-control" id="edit_kode_unik" name="edit_kode_unik">
|
|
</div>
|
|
<div class="col-md-12 my-1">
|
|
<label for="edit_tgl_booking" class="form-label">Tanggal Booking</label>
|
|
<input disabled type="text" class="form-control" id="edit_tgl_booking" name="edit_tgl_booking">
|
|
</div>
|
|
<div class="col-md-12 my-1">
|
|
<label for="edit_status_tes" class="form-label">Status</label>
|
|
<select class="form-select" name="edit_status_tes" id="edit_status_tes">
|
|
<option value="0">Nonaktif</option>
|
|
<option value="1">Siap/Sedang Tes</option>
|
|
<option value="2">Selesai</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-12 my-1">
|
|
<label for="edit_deskripsi_tambahan" class="form-label">Deskripsi Tambahan</label>
|
|
<input disabled type="text" class="form-control" id="edit_deskripsi_tambahan" name="edit_deskripsi_tambahan">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
|
|
<button type="button" class="btn btn-primary" onclick="simpanEditData()">Simpan</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Delete -->
|
|
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="exampleModalLabel">Hapus Data</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Apakah anda akan menghapus data booking dengan nama "<span id="delete_booking" class="fw-bold"></span>" ini?
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
|
|
<button type="button" class="btn btn-danger" onclick="hapusData()">Hapus</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('script')
|
|
<script>
|
|
let table = null;
|
|
let idEdit = null;
|
|
let idHapus = null;
|
|
let status_dict = ['secondary', 'info', 'success'];
|
|
let status_dict_text = ['Nonaktif', 'Siap/Sedang Tes', 'Selesai'];
|
|
$(document).ready(function() {
|
|
table = new DataTable("#table-data", {
|
|
ajax: {
|
|
url: '{{ route('booking.fetchData') }}',
|
|
},
|
|
columns: [
|
|
{
|
|
data: null,
|
|
render: function(data, type, row, meta) {
|
|
return meta.row + 1;
|
|
}
|
|
},
|
|
{
|
|
data: 'nama_lengkap'
|
|
},
|
|
{
|
|
data: 'email'
|
|
},
|
|
{
|
|
data: 'no_telp'
|
|
},
|
|
{
|
|
data: 'kode_unik'
|
|
},
|
|
{
|
|
data: 'tgl_booking'
|
|
},
|
|
{
|
|
data: null,
|
|
render: function(data, type, row, meta) {
|
|
return `
|
|
<span class="badge rounded-pill text-bg-${status_dict[data.status_tes]}">${status_dict_text[data.status_tes]}</span>
|
|
`;
|
|
}
|
|
},
|
|
{
|
|
data: null,
|
|
render: function(data, type, row, meta) {
|
|
return `
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-primary btn-sm rounded-circle mx-1" data-bs-toggle="modal" data-bs-target="#infoModal" onclick="getDataInfo(this)" data-id="${data.id_booking}">
|
|
<i class="ti ti-file-info"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-info btn-sm rounded-circle mx-1" data-bs-toggle="modal" data-bs-target="#editModal" onclick="getDataEdit(this)" data-id="${data.id_booking}">
|
|
<i class="ti ti-edit"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-danger delete-btn rounded-circle mx-1" data-bs-toggle="modal" data-bs-target="#deleteModal" onclick="getDataHapus(this)" data-id="${data.id_booking}">
|
|
<i class="ti ti-trash"></i>
|
|
</button>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
]
|
|
});
|
|
});
|
|
|
|
function fetchRowData() {
|
|
table.ajax.reload(null, false);
|
|
}
|
|
|
|
function getDataInfo(btn) {
|
|
let idShow = btn.getAttribute('data-id');
|
|
let urlShow = '{{ route('booking.show', ['__ID__']) }}';
|
|
$.get(urlShow.replace('__ID__', idShow), function(data, status) {
|
|
if(data.status) {
|
|
$('#info_nama_lengkap').val(data.data.nama_lengkap);
|
|
$('#info_email').val(data.data.email);
|
|
$('#info_no_telp').val(data.data.no_telp);
|
|
$('#info_kode_unik').val(data.data.kode_unik);
|
|
$('#info_tgl_booking').val(data.data.tgl_booking);
|
|
$('#info_status_tes').html(status_dict_text[data.data.status_tes]);
|
|
$('#info_deskripsi_tambahan').val(data.data.deskripsi_tambahan);
|
|
|
|
$('#info_nama_lengkap').attr('disabled', 'disabled');
|
|
$('#info_email').attr('disabled', 'disabled');
|
|
$('#info_no_telp').attr('disabled', 'disabled');
|
|
$('#info_kode_unik').attr('disabled', 'disabled');
|
|
$('#info_tgl_booking').attr('disabled', 'disabled');
|
|
$('#info_status_tes').attr('disabled', 'disabled');
|
|
$('#info_deskripsi_tambahan').attr('disabled', 'disabled');
|
|
|
|
$('#info_status_tes').removeClass();
|
|
$('#info_status_tes').addClass(`btn btn-${status_dict[data.data.status_tes]}`);
|
|
}
|
|
});
|
|
}
|
|
|
|
function getDataEdit(btn) {
|
|
idEdit = btn.getAttribute('data-id');
|
|
let urlEdit = '{{ route('booking.edit', ['__ID__']) }}';
|
|
|
|
$.get(urlEdit.replace('__ID__', idEdit), function(data, status) {
|
|
if(data.status) {
|
|
$('#edit_nama_lengkap').val(data.data.nama_lengkap);
|
|
$('#edit_email').val(data.data.email);
|
|
$('#edit_no_telp').val(data.data.no_telp);
|
|
$('#edit_kode_unik').val(data.data.kode_unik);
|
|
$('#edit_tgl_booking').val(data.data.tgl_booking);
|
|
$('#edit_status_tes').val(data.data.status_tes);
|
|
$('#edit_deskripsi_tambahan').val(data.data.deskripsi_tambahan);
|
|
|
|
$('#edit_nama_lengkap').attr('disabled', 'disabled');
|
|
$('#edit_email').attr('disabled', 'disabled');
|
|
$('#edit_no_telp').attr('disabled', 'disabled');
|
|
$('#edit_kode_unik').attr('disabled', 'disabled');
|
|
$('#edit_tgl_booking').attr('disabled', 'disabled');
|
|
$('#edit_status_tes').removeAttr('disabled');
|
|
$('#edit_deskripsi_tambahan').attr('disabled', 'disabled');
|
|
}
|
|
});
|
|
}
|
|
|
|
function simpanEditData() {
|
|
if(idEdit != null) {
|
|
let urlUpdate = '{{ route('booking.update', ['__ID__']) }}';
|
|
|
|
$.post(urlUpdate.replace('__ID__', idEdit), {
|
|
'_token': document.getElementById('_token').getAttribute('value'),
|
|
'_method': 'PUT',
|
|
'status_tes': $('#edit_status_tes').val()
|
|
}, function(data, status) {
|
|
if(data.status) {
|
|
$('#editModal').modal('hide');
|
|
Swal.fire({
|
|
title: "Info",
|
|
text: "Data berhasil di edit!",
|
|
icon: "success"
|
|
});
|
|
fetchRowData();
|
|
idEdit = null;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function getDataHapus(btn) {
|
|
idHapus = btn.getAttribute('data-id');
|
|
let urlShow = '{{ route('booking.show', ['__ID__']) }}';
|
|
|
|
$.get(urlShow.replace('__ID__', idHapus), function(data, status) {
|
|
if(data.status) {
|
|
$('#delete_booking').html(data.data.nama_lengkap);
|
|
}
|
|
});
|
|
}
|
|
|
|
function hapusData() {
|
|
if(idHapus != null) {
|
|
let urlDestroy = '{{ route('booking.destroy', ['__ID__']) }}';
|
|
|
|
$.post(urlDestroy.replace('__ID__', idHapus), {
|
|
'_token': document.getElementById('_token').getAttribute('value'),
|
|
'_method': 'DELETE'
|
|
}, function(data, status) {
|
|
if(data.status) {
|
|
$('#deleteModal').modal('hide');
|
|
Swal.fire({
|
|
title: "Info",
|
|
text: "Data berhasil dihapus!",
|
|
icon: "success"
|
|
});
|
|
fetchRowData();
|
|
idHapus = null;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
@endsection |