271 lines
8.8 KiB
PHP
271 lines
8.8 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Data Jabatan')
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Poppins', sans-serif;
|
|
}
|
|
.container {
|
|
width: 90%;
|
|
max-width: 900px;
|
|
background: #ffffff;
|
|
padding: 20px;
|
|
border-radius: 20px;
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
color: #2c3e50;
|
|
}
|
|
.button {
|
|
display: inline-block;
|
|
padding: 14px 15px;
|
|
margin-top: 10px;
|
|
color: #ffffff;
|
|
background: #4e73df;
|
|
text-decoration: none;
|
|
border-radius: 50px;
|
|
font-weight: 600;
|
|
transition: background 0.3s ease;
|
|
}
|
|
.button:hover {
|
|
background: #ACB6E5;
|
|
}
|
|
.alert {
|
|
padding: 15px;
|
|
background-color: #d1f2eb;
|
|
color: #117864;
|
|
margin-bottom: 20px;
|
|
border-left: 6px solid #1abc9c;
|
|
border-radius: 8px;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 15px;
|
|
overflow: hidden;
|
|
border-radius: 15px;
|
|
}
|
|
thead {
|
|
background-color: #4e73df;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
th, td {
|
|
padding: 15px;
|
|
text-align: center;
|
|
font-size: 15px;
|
|
border-bottom: 1px solid #e1e1e1;
|
|
}
|
|
tbody tr:nth-child(even) {
|
|
background-color: #f4f9fd;
|
|
}
|
|
tbody tr:hover {
|
|
background-color: #e1e6fc;
|
|
}
|
|
p {
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
font-size: 15px;
|
|
color: #555;
|
|
}
|
|
|
|
.button-opsi {
|
|
display: inline-block ;
|
|
padding: 10px 15px;
|
|
margin-top: 2px;
|
|
color: #ffffff;
|
|
background: #4e73df;
|
|
text-decoration: none;
|
|
border: none;
|
|
border-radius: 15px;
|
|
font-size: 15px;
|
|
font family: 'Poppins', sans-serif;
|
|
font-weight: 300;
|
|
transition: background 0.3s ease;
|
|
margin-right: 5px;
|
|
cursor: pointer;
|
|
}
|
|
.button-group {
|
|
display: flex;
|
|
justify-content: right;
|
|
margin-top: 20px;
|
|
padding: 0 20px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 10px 20px;
|
|
border-radius: 20px;
|
|
border: none;
|
|
text-decoration: none;
|
|
font-size: 15px;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.btn-kembali {
|
|
background-color: #4e73df;
|
|
}
|
|
|
|
.btn-tambah {
|
|
background-color: #4e73df;
|
|
}
|
|
</style>
|
|
|
|
@section('content')
|
|
<div class="container-fluid">
|
|
<h1 class="h3 mb-4 text-gray-800">Data Jabatan</h1>
|
|
|
|
<div class="card shadow mb-4">
|
|
<div class="card-header py-3">
|
|
<button id="btn-tambah-jabatan" class="btn btn-primary">+ Tambah Data Jabatan</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered" id="jabatan-table">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama Jabatan</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($jabatans as $key => $jabatan)
|
|
<tr id="jabatan-{{ $jabatan->id }}">
|
|
<td>{{ $key + 1 }}</td>
|
|
<td>{{ $jabatan->jabatan }}</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-info btn-edit" data-id="{{ $jabatan->id }}">Edit</button>
|
|
<button class="btn btn-sm btn-danger btn-hapus" data-id="{{ $jabatan->id }}">Hapus</button>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="jabatanModal" tabindex="-1" role="dialog" aria-labelledby="jabatanModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="jabatanModalLabel">Tambah Jabatan</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form id="jabatanForm">
|
|
<div class="modal-body">
|
|
@csrf
|
|
<input type="hidden" id="jabatan_id">
|
|
<div class="form-group">
|
|
<label for="jabatan">Nama Jabatan</label>
|
|
<input type="text" class="form-control" id="jabatan" name="jabatan" required>
|
|
<div class="invalid-feedback"></div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
|
|
<button type="submit" class="btn btn-primary" id="btn-simpan">Simpan</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> -->
|
|
<script>
|
|
$(document).ready(function () {
|
|
const csrfToken = $('meta[name="csrf-token"]').attr('content');
|
|
|
|
// 1. Tampilkan Modal untuk Tambah Data
|
|
$('#btn-tambah-jabatan').on('click', function() {
|
|
let id = $(this).data('id');
|
|
$('#jabatanModal').modal('show');
|
|
$('#jabatanForm').attr('action', '/dashboard/jabatan');
|
|
$('#jabatanForm')[0].reset();
|
|
$('#jabatanModalLabel').text('Tambah Data Jabatan');
|
|
$('#jabatan_id').val('');
|
|
$('#nama_jabatan').removeClass('is-invalid');
|
|
});
|
|
|
|
// 2. Tampilkan Modal untuk Edit Data
|
|
$('#jabatan-table').on('click', '.btn-edit', function() {
|
|
let id = $(this).data('id');
|
|
$('#jabatanModal').modal("show")
|
|
$.get('/dashboard/jabatan/' + id, function(data) {
|
|
$('#jabatanModalLabel').text('Edit Data Jabatan');
|
|
$('#jabatan_id').val(data.id);
|
|
$('#jabatan').val(data.jabatan).removeClass('is-invalid');
|
|
});
|
|
});
|
|
|
|
// 3. Proses Simpan atau Update Data
|
|
$('#jabatanForm').on('submit', function(e) {
|
|
e.preventDefault();
|
|
let id = $('#jabatan_id').val();
|
|
let url = id ? '/dashboard/jabatan/' + id : '/dashboard/jabatan';
|
|
let method = id ? 'PUT' : 'POST';
|
|
|
|
$.ajax({
|
|
url: url,
|
|
method: method,
|
|
data: $(this).serialize(),
|
|
success: function(response) {
|
|
$('#jabatanModal').modal('hide');
|
|
Swal.fire('Sukses!', response.success, 'success');
|
|
setTimeout(() => location.reload(), 1500);
|
|
},
|
|
error: function(xhr) {
|
|
let errors = xhr.responseJSON.errors;
|
|
if (errors.jabatan) {
|
|
$('#jabatan').addClass('is-invalid').next('.invalid-feedback').text(errors.jabatan[0]);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// 4. Proses Hapus Data
|
|
$('body').on('click', '.btn-hapus', function() {
|
|
let id = $(this).data('id');
|
|
Swal.fire({
|
|
title: 'Anda yakin?',
|
|
text: "Data yang dihapus tidak dapat dikembalikan!",
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#d33',
|
|
cancelButtonColor: '#3085d6',
|
|
confirmButtonText: 'Ya, hapus!',
|
|
cancelButtonText: 'Batal'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
$.ajax({
|
|
url: '/dashboard/jabatan/' + id,
|
|
method: 'DELETE',
|
|
data: { _token: '{{ csrf_token() }}' },
|
|
success: function(response) {
|
|
Swal.fire('Terhapus!', response.success, 'success');
|
|
$('#jabatan-' + id).remove();
|
|
// Opsional: Reload untuk update nomor urut jika perlu
|
|
// setTimeout(() => location.reload(), 1500);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|