MIF_E31210592/resources/views/kelas/index.blade.php

141 lines
6.3 KiB
PHP

<!-- resources/views/kelas/index.blade.php -->
@extends('layout.app')
@section('title', 'Kelas')
@section('content')
<div class="card shadow mb-4">
<div class="card-header py-3 d-flex justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Daftar Kelas</h6>
<!-- Button to trigger the modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addKelasModal">Tambah
Kelas</button>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>#</th>
<th>Kelas</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
@foreach ($kelas as $k)
<tr>
<td>{{ $loop->iteration }}</td>
<td>{{ $k->nama_kelas }}</td>
<td>
<!-- Edit Button -->
<button class="btn btn-warning btn-sm" data-toggle="modal"
data-target="#editKelasModal{{ $k->id_kelas }}">Edit</button>
<!-- Delete Button -->
<form action="{{ route('kelas.destroy', $k->id_kelas) }}" method="POST"
style="display:inline;">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
</form>
</td>
</tr>
<!-- Edit Modal -->
<div class="modal fade" id="editKelasModal{{ $k->id_kelas }}" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form action="{{ route('kelas.update', $k->id_kelas) }}" method="POST">
@csrf
@method('PUT')
<div class="modal-header">
<h5 class="modal-title">Edit Kelas</h5>
<button type="button" class="close" data-dismiss="modal">
<span>&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="nama_kelas">Nama Kelas</label>
<input type="text" class="form-control" name="nama_kelas"
value="{{ $k->nama_kelas }}" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
<!-- Add Modal -->
<div class="modal fade" id="addKelasModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form action="{{ route('kelas.store') }}" method="POST">
@csrf
<div class="modal-header">
<h5 class="modal-title">Tambah Kelas</h5>
<button type="button" class="close" data-dismiss="modal">
<span>&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="nama_kelas">Nama Kelas</label>
<input type="text" class="form-control" name="nama_kelas" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</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: 'warning',
title: 'Oopss...',
text: '{{ $errors->first() }}'
});
</script>
@endif
@endsection
@push('css')
<link href="{{ asset('vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
@endpush
@push('js')
<script src="{{ asset('vendor/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>
<script>
$(document).ready(function() {
$('#dataTable').DataTable();
});
</script>
@endpush