MIF_E31222313/resources/views/admin/kelas.blade.php

292 lines
9.8 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Admin Dashboard</title>
<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'>
<!-- Fonts and icons -->
<script src="{{ asset('admin/js/plugin/webfont/webfont.min.js') }}"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="shortcut icon" href="{{ asset('user/favicon.svg') }}" type="image/svg+xml">
<script>
WebFont.load({
google: {"families":["Lato:300,400,700,900"]},
custom: {"families":["Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands", "simple-line-icons"], urls: ['../assets/css/fonts.min.css']},
active: function() {
sessionStorage.fonts = true;
}
});
</script>
<!-- CSS Files -->
<link rel="stylesheet" href="{{ asset('admin/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('admin/css/atlantis.css') }}">
</head>
<body>
<div class="wrapper">
<div class="main-header">
<!-- Logo Header -->
<div class="logo-header" data-background-color="blue">
<div class="nav-toggle">
<button class="btn btn-toggle toggle-sidebar"><i class="fas fa-bars"></i></button>
</div>
</div>
<!-- End Logo Header -->
<!-- Navbar Header -->
@include('admin.navbar')
<!-- End Navbar -->
</div>
<!-- Sidebar -->
@include('admin.sidebar')
<!-- End Sidebar -->
<!-- Main Panel -->
<div class="main-panel">
<div class="content">
<div class="panel-header bg-primary-gradient">
<div class="page-inner py-5">
<div class="d-flex align-items-left align-items-md-center flex-column flex-md-row">
</div>
</div>
</div>
<div class="page-inner mt--5">
<div class="row mt--2">
<div class="col-12">
<div class="card">
<div class="card-header">
<div class="card-head-row">
<div class="card-tools">
<a href="{{ route('download.kelas') }}" class="btn btn-info btn-border btn-round btn-sm">
<span class="btn-label"><i class="fa fa-print"></i></span>Cetak</a>
</div>
</div>
</div>
<div class="card-body">
<!-- Button -->
<div class="d-flex justify-content-between align-items-center mb-4 p-3">
<div>
<h4 class="card-title mb-1">Manajemen Data Kelas</h4>
<p class="card-category text-muted mb-0">Mengelola dan memperbarui informasi sesuai kebutuhan secara tertata dan menyeluruh.</p>
</div>
<button class="btn btn-sm btn-primary btn-round" data-toggle="modal" data-target="#addRowModal"><i class="fa fa-plus"></i> Tambah</button>
</div>
<!-- Add Modal -->
<div class="modal fade" id="addRowModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header ">
<h4 class="modal-title"><span class="fw-mediumbold">Tambah Data</span></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<p style="font-size: 0.9rem;" class="text-muted mb-3">Gunakan formulir ini untuk menambahkan entri baru. Pastikan seluruh data diisi dengan benar.</p>
<form action="{{ route('tambah.kelas') }}" method="POST">
@csrf
<div class="form-group">
<label for="sekolah">Pilih Sekolah</label>
<select name="sekolah_id" id="sekolah_id" class="form-control input-square" required>
<option value="">Pilih Sekolah</option>
@foreach ($sekolahs as $sekolah)
<option value="{{ $sekolah->id }}">{{ $sekolah->nama }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="nama_kelas">Nama Kelas</label>
<input type="text" class="form-control input-square" id="namaKelas" name="nama_kelas" placeholder="Masukkan Nama Kelas" required>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Tambah</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Modal Update-->
<div class="modal fade" id="updateRowModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><span class="fw-mediumbold">Update Data</span></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<p style="font-size: 0.9rem;" class="text-muted mb-3">Gunakan formulir ini untuk mengupdate entri baru. Pastikan seluruh data diisi dengan benar.</p>
<form id="formUpdateKelas" method="POST">
@csrf
@method('PUT')
<div class="form-group">
<label for="sekolah">Pilih Sekolah</label>
<select name="sekolah_id" id="updateSekolah" class="form-control input-square" required>
<option value="">Pilih Sekolah</option>
@foreach ($sekolahs as $sekolah)
<option value="{{ $sekolah->id }}">{{ $sekolah->nama }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="namaKelas">Nama Kelas</label>
<input type="text" class="form-control input-square" id="updateKelas" name="nama_kelas" placeholder="Masukkan Nama Kelas" required>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Update</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Table -->
<div class="table-responsive">
<table id="add-row" class="display table table-striped table-hover">
<thead>
<tr>
<th>No</th>
<th>Nama Kelas</th>
<th>Nama Sekolah</th>
<th>Aksi</th>
</tr>
</thead>
<tfoot>
<tr>
<th>No</th>
<th>Nama Kelas</th>
<th>Nama Sekolah</th>
<th>Aksi</th>
</tr>
</tfoot>
<tbody>
@foreach($kelas as $index => $kelas)
<tr>
<td>{{ $index + 1 }}</td>
<td>{{ $kelas->nama_kelas }}</td>
<td>{{ $kelas->sekolah->nama }}</td>
<td>
<div class="form-button-action">
<button type="button" class="btn btn-link p-3 text-primary editBtn" data-id="{{ $kelas->id }}" data-nama="{{ $kelas->nama_kelas }}" data-sekolah="{{ $kelas->sekolah->id }}" data-toggle="modal" data-target="#updateRowModal" title="Edit"><i class="fa fa-edit"></i></button>
<a href="{{ route('hapus.kelas', $kelas->id) }}" class="btn btn-link p-3 text-danger" data-toggle="tooltip" title="Hapus"><i class="fas fa-trash-alt"></i></a>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Main Panel -->
</div>
</div>
<!-- Script Files -->
@include('admin.script')
<script>
// Inisialisasi DataTable
var table = $('#add-row').DataTable({
"pageLength": 10,
"language": {
"search": "Cari:",
"lengthMenu": "Tampilkan _MENU_ data per halaman",
"zeroRecords": "Tidak ada data yang ditemukan",
"info": "Menampilkan halaman _PAGE_ dari _PAGES_",
"infoEmpty": "Tidak ada data tersedia",
"infoFiltered": "(difilter dari _MAX_ total data)"
}
});
// Menambah baris ke DataTable secara dummy (tanpa backend)
$('#addRowButton').click(function () {
var namaKelas = $("#nama_kelas").val();
var sekolahId = $("#sekolah_id").val();
// Cek apakah nama kelas atau sekolah belum diisi
if (namaKelas === "" || sekolahId === "") {
alert("Nama kelas dan Sekolah harus diisi.");
return;
}
var sekolahNama = $("#sekolah_id option:selected").text();
table.row.add([
namaKelas,
sekolahNama,
'<div class="form-button-action">' +
'<button type="button" class="btn btn-link btn-simple-primary btn-lg editBtn" ' +
'data-id="randomId" ' +
'data-name="' + namaKelas + '" ' +
'data-school="' + sekolahNama + '" ' +
'title="Edit"><i class="fa fa-edit"></i></button>' +
'<button type="button" class="btn btn-link btn-simple-danger btn-lg deleteBtn" ' +
'data-id="randomId" title="Hapus"><i class="fa fa-times"></i></button>' +
'</div>'
]).draw();
$('#addKelasModal').modal('hide');
$("#nama_kelas").val('');
$("#sekolah_id").val('');
});
</script>
<script>
$(document).on('click', '.editBtn', function () {
let id = $(this).data('id');
let nama = $(this).data('nama');
let sekolahId = $(this).data('sekolah');
// Set nilai input dengan data dari tombol Edit
$('#updateKelas').val(nama);
$('#updateSekolah').val(sekolahId);
// Mengubah action form sesuai dengan ID yang dipilih
$('#formUpdateKelas').attr('action', '/admin/kelas/update/' + id);
});
</script>
<script>
$(document).on('click', '.hapusBtn', function (e) {
if (confirm("Apakah Anda yakin ingin menghapus data ini?")) {
$.ajax({
url: '/admin/kelas/hapus/' + id,
type: 'DELETE',
data: {
_token: '{{ csrf_token() }}',
},
success: function(response) {
alert('Data berhasil dihapus');
location.reload();
},
error: function(xhr, status, error) {
alert('Terjadi kesalahan: ' + error);
}
});
}
});
</script>
<!-- End Script Files -->
</body>
</html>