291 lines
10 KiB
PHP
291 lines
10 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('title', 'Data Kelas')
|
|
@section('content')
|
|
|
|
<style>
|
|
.card {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.card-header {
|
|
background: #2563eb;
|
|
color: white;
|
|
padding: 16px 24px;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
border-radius: 12px 12px 0 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.card-header i {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.table th {
|
|
background-color: #dbeafe;
|
|
color: #1e3a8a;
|
|
}
|
|
|
|
.btn-sm {
|
|
font-size: 13px;
|
|
padding: 5px 10px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #3b82f6;
|
|
border: none;
|
|
}
|
|
|
|
.btn-danger {
|
|
background-color: #ef4444;
|
|
border: none;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #6b7280;
|
|
border: none;
|
|
}
|
|
|
|
.btn i {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.modal-content {
|
|
border-radius: 16px;
|
|
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.modal-header {
|
|
background-color: #2563eb;
|
|
color: white;
|
|
border-top-left-radius: 16px;
|
|
border-top-right-radius: 16px;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.modal-header.bg-danger {
|
|
background-color: #dc2626 !important;
|
|
}
|
|
|
|
.modal-title i {
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.modal-footer .btn {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.modal.fade .modal-dialog {
|
|
transform: translateY(20px);
|
|
transition: all 0.3s ease-out;
|
|
opacity: 0;
|
|
}
|
|
|
|
.modal.fade.show .modal-dialog {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.success-icon, .error-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: auto;
|
|
}
|
|
|
|
.success-icon {
|
|
background-color: #d1fae5;
|
|
}
|
|
|
|
.error-icon {
|
|
background-color: #fee2e2;
|
|
}
|
|
|
|
.success-icon svg,
|
|
.error-icon svg {
|
|
animation: popIn 0.4s ease-out forwards;
|
|
transform: scale(0.8);
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes popIn {
|
|
to {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fas fa-chalkboard"></i> Data Kelas
|
|
</div>
|
|
<div class="card-body">
|
|
<table class="table table-bordered text-center">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama Kelas</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($kelases as $index => $kelas)
|
|
<tr>
|
|
<td>{{ $index + 1 }}</td>
|
|
<td>{{ $kelas->nama }}</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#editModal{{ $kelas->id }}">
|
|
<i class="fas fa-edit"></i> Edit
|
|
</button>
|
|
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#deleteModal{{ $kelas->id }}">
|
|
<i class="fas fa-trash-alt"></i> Hapus
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
|
|
<div class="modal fade" id="editModal{{ $kelas->id }}" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<form action="{{ route('kelas.update', $kelas->id) }}" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title"><i class="fas fa-edit"></i> Edit Kelas</h5>
|
|
<button type="button" class="close text-white" data-dismiss="modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>Nama Kelas</label>
|
|
<input type="text" name="nama" class="form-control" value="{{ $kelas->nama }}" required>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Simpan</button>
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i> Batal</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="deleteModal{{ $kelas->id }}" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<form action="{{ route('kelas.destroy', $kelas->id) }}" method="POST">
|
|
@csrf
|
|
@method('DELETE')
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-danger">
|
|
<h5 class="modal-title"><i class="fas fa-exclamation-circle"></i> Hapus Kelas</h5>
|
|
<button type="button" class="close text-white" data-dismiss="modal">×</button>
|
|
</div>
|
|
<div class="modal-body text-center">
|
|
<p>Yakin ingin menghapus <strong>{{ $kelas->nama }}</strong>?</p>
|
|
</div>
|
|
<div class="modal-footer justify-content-center">
|
|
<button type="submit" class="btn btn-danger"><i class="fas fa-trash-alt"></i> Ya, Hapus</button>
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i> Batal</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="text-center mt-4">
|
|
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#tambahModal">
|
|
<i class="fas fa-plus-circle"></i> Tambah Kelas
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="tambahModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
|
|
<form action="{{ route('kelas.store') }}" method="POST">
|
|
@csrf
|
|
<div class="modal-content animate__animated animate__fadeInDown" style="border-radius: 12px;">
|
|
<div class="modal-header bg-primary text-white">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-plus-circle me-1"></i> Tambah Kelas
|
|
</h5>
|
|
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="nama">Nama Kelas</label>
|
|
<input type="text" name="nama" id="nama" class="form-control" placeholder="Masukkan nama kelas..." required>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save"></i> Simpan
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">
|
|
<i class="fas fa-times"></i> Batal
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
@if (session('success'))
|
|
<div class="modal fade show" id="successModal" tabindex="-1" aria-modal="true" role="dialog" style="display: block;">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content border-0 text-center p-4" style="border-radius: 16px; box-shadow: 0 8px 20px rgba(0,0,0,0.1);">
|
|
<div class="modal-body">
|
|
<div class="d-flex justify-content-center mb-3 success-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
</div>
|
|
<h5 class="text-success font-weight-bold">{{ session('success') }}</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
setTimeout(() => {
|
|
document.getElementById("successModal").style.display = "none";
|
|
}, 2500);
|
|
</script>
|
|
@endif
|
|
|
|
@if (session('error'))
|
|
<div class="modal fade show" id="errorModal" tabindex="-1" aria-modal="true" role="dialog" style="display: block;">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content border-0 text-center p-4" style="border-radius: 16px; box-shadow: 0 8px 20px rgba(0,0,0,0.1);">
|
|
<div class="modal-body">
|
|
<div class="d-flex justify-content-center mb-3 error-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</div>
|
|
<h5 class="text-danger font-weight-bold">{{ session('error') }}</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
setTimeout(() => {
|
|
document.getElementById("errorModal").style.display = "none";
|
|
}, 3000);
|
|
</script>
|
|
@endif
|
|
|
|
@endsection
|