754 lines
40 KiB
PHP
754 lines
40 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
|
|
<title>J-Classify Tracer Study MIF</title>
|
|
<meta content="" name="description">
|
|
<meta content="" name="keywords">
|
|
|
|
<!-- Favicons -->
|
|
<link href="{{ asset('assets/img/favicon.png') }}" rel="icon">
|
|
<link href="{{ asset('assets/img/apple-touch-icon.png') }}" rel="apple-touch-icon">
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.gstatic.com" rel="preconnect">
|
|
<link
|
|
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
|
|
rel="stylesheet">
|
|
|
|
<!-- Tambahkan ini di bagian <head> atau sebelum penutup </body> -->
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
|
|
<!-- Vendor CSS Files -->
|
|
<link href="{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/bootstrap-icons/bootstrap-icons.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/boxicons/css/boxicons.min.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/quill/quill.snow.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/quill/quill.bubble.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/remixicon/remixicon.css') }}" rel="stylesheet">
|
|
<link href="{{ asset('assets/vendor/simple-datatables/style.css') }}" rel="stylesheet">
|
|
|
|
<!-- Template Main CSS File -->
|
|
<link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- ======= Header ======= -->
|
|
@include('header')
|
|
<!-- ======= Sidebar ======= -->
|
|
@include('sidebar')
|
|
|
|
<main id="main" class="main">
|
|
<div class="pagetitle">
|
|
<h1>Data Alumni</h1>
|
|
<nav>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
|
|
<li class="breadcrumb-item">Data</li>
|
|
</ol>
|
|
</nav>
|
|
</div><!-- End Page Title -->
|
|
|
|
<section class="section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card p-3">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Data Alumni</h5>
|
|
|
|
<div class="mb-2">
|
|
<input type="text" class="form-control" id="searchInput" placeholder="Cari User..."
|
|
style="width: 200px;">
|
|
</div>
|
|
<div class="mb-1 d-flex align-items-center">
|
|
<label class="me-2">Tampilkan:</label>
|
|
<select id="entriesPerPage" class="form-select w-auto">
|
|
<option value="20">20</option>
|
|
<option value="50">50</option>
|
|
<option value="all">Semua</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="d-flex mb-3 align-items-center gap-2">
|
|
{{-- Dropdown Filter Angkatan --}}
|
|
<label for="filterAngkatan" class="form-label mb-0">Angkatan:</label>
|
|
<select id="filterAngkatan" class="form-select w-auto"
|
|
onchange="filterByAngkatan(this.value)">
|
|
<option value="">Semua</option>
|
|
@foreach($angkatans as $angkatan)
|
|
<option value="{{ $angkatan->id_angkatan }}"
|
|
{{ request('angkatan') == $angkatan->id_angkatan ? 'selected' : '' }}>
|
|
{{ $angkatan->tahun }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end align-items-center gap-2 mb-3">
|
|
<a href="{{ route('data_alumni.template') }}" class="btn btn-warning">
|
|
Download Template Excel
|
|
</a>
|
|
<!-- Tombol Buka Modal Import -->
|
|
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#ImportDataAlumni">
|
|
Import Data Alumni
|
|
</button>
|
|
|
|
<!-- Tombol Buka Modal tambah data-->
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#tambahdataalumni">
|
|
Tambah Data Alumni
|
|
</button>
|
|
</div>
|
|
|
|
|
|
<!-- Modal Upload Excel -->
|
|
<div class="modal fade" id="ImportDataAlumni" tabindex="-1" aria-labelledby="ImportDataAlumniLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<form action="{{ route('data_alumni.import') }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="ImportDataAlumniLabel">Import Data Alumni (Excel)</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="file" class="form-label">Pilih File Excel (.xlsx/.xls)</label>
|
|
<input type="file" class="form-control" name="file" accept=".xlsx,.xls" required>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="submit" class="btn btn-primary">Import</button>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@if($jumlahPerluReview > 0)
|
|
<div class="alert alert-warning d-flex justify-content-between align-items-center" role="alert">
|
|
<div>
|
|
<strong>{{ $jumlahPerluReview }}</strong> data alumni perlu direview.
|
|
</div>
|
|
{{-- <a href="{{ route('admin.alumni.perlu-review') }}" class="btn btn-sm btn-outline-warning">
|
|
Lihat Detail
|
|
</a> --}}
|
|
{{-- <button type="button" class="btn btn-sm btn-outline-warning" data-bs-toggle="collapse" data-bs-target="#perluReviewDetails">
|
|
Lihat Detail
|
|
</button> --}}
|
|
</div>
|
|
@endif
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-bordered" id="userTable">
|
|
<thead align="center" valign="middle">
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Angkatan</th>
|
|
<th>NIM</th>
|
|
<th>Nama</th>
|
|
<th>Masa Tunggu</th>
|
|
<th>Pekerjaan</th>
|
|
<th>Instansi</th>
|
|
<th>LinkedIn</th>
|
|
<th>Profesi Inforkom</th>
|
|
<th>Lingkup Profesi</th>
|
|
<th>Kualifikasi Bidang</th>
|
|
<th>Kelompok Jabatan</th>
|
|
<th>Status Review</th>
|
|
<th colspan="2">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($alumni as $dl)
|
|
<tr align="center" valign="middle">
|
|
<td>{{ $loop->iteration }}</td>
|
|
<td>{{ $dl->tahunAngkatan->tahun ?? '-' }}</td>
|
|
<td>{{ $dl->nim }}</td>
|
|
<td>{{ $dl->nama }}</td>
|
|
<td>{{ $dl->masa_tunggu }}</td>
|
|
<td>{{ $dl->pekerjaan }}</td>
|
|
<td>{{ $dl->instansi }}</td>
|
|
<td>
|
|
@if(!empty($dl->link_linkedin) && $dl->link_linkedin !== '-')
|
|
<a href="{{ $dl->link_linkedin }}" target="_blank" rel="noopener noreferrer">
|
|
{{ $dl->link_linkedin }}
|
|
</a>
|
|
@else
|
|
-
|
|
@endif
|
|
</td>
|
|
<td>{{ $dl->Jenis_profesi }}</td>
|
|
<td>{{ $dl->lingkup_pekerjaan }}</td>
|
|
<td>{{ $dl->kualifikasiBidang->kualifikasi_bidang ?? '-' }}</td>
|
|
<td>{{ $jabatanMap[$dl->jabatan] ?? '-' }}</td>
|
|
<td>
|
|
@if($dl->perlu_review)
|
|
<span class="badge bg-warning">Perlu Review</span>
|
|
<form action="{{ route('data_alumni.reset_review', $dl->id_alumni) }}" method="POST" style="display:inline;">
|
|
@csrf
|
|
@method('PUT')
|
|
<button type="submit" class="btn btn-success btn-sm" >Selesaikan Review</button>
|
|
</form>
|
|
@else
|
|
<span class="badge bg-success">Sudah Direview</span>
|
|
@endif
|
|
<!-- Tombol review untuk admin -->
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-primary btn-sm"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#editdataalumni{{ $dl->id_alumni }}">
|
|
Edit
|
|
</button>
|
|
<td>
|
|
<button type="button" class="btn btn-danger btn-sm"
|
|
onclick="confirmDelete({{ $dl->id_alumni }})">
|
|
Hapus
|
|
</button>
|
|
</td>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- End #main -->
|
|
|
|
<!-- Modal Tambah Data Alumni -->
|
|
<div class="modal fade" id="tambahdataalumni" tabindex="-1" aria-labelledby="modalTambahAlumniLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg"> <!-- modal-lg agar lebih luas -->
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="modalTambahAlumniLabel">Tambah Data Alumni</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form action="{{ route('data_alumni.store') }}" method="POST">
|
|
@csrf
|
|
<div class="modal-body row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="nama" class="form-label">Nama</label>
|
|
<input type="text" class="form-control" id="nama" name="nama" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="nim" class="form-label">NIM</label>
|
|
<input type="text" class="form-control" id="nim" name="nim" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="angkatan" class="form-label">Angkatan</label>
|
|
<select class="form-select" id="angkatan" name="angkatan" required>
|
|
<option value="" selected disabled>Pilih Angkatan</option>
|
|
@foreach ($angkatans as $angkatan)
|
|
<option value="{{ $angkatan->id_angkatan }}">{{ $angkatan->tahun }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="masa_tunggu" class="form-label">Masa Tunggu (bulan)</label>
|
|
<input type="number" class="form-control" id="masa_tunggu" name="masa_tunggu">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="pekerjaan" class="form-label">Pekerjaan</label>
|
|
<input type="text" class="form-control" id="pekerjaan" name="pekerjaan">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="instansi" class="form-label">Instansi</label>
|
|
<input type="text" class="form-control" id="instansi" name="instansi">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="link_linkedin" class="form-label">Link LinkedIn</label>
|
|
<input type="text" class="form-control" id="link_linkedin" name="link_linkedin">
|
|
</div>
|
|
{{-- <div class="mb-3">
|
|
<label for="Jenis_profesi" class="form-label">Profesi Inforkom</label>
|
|
<input type="text" class="form-control" id="Jenis_profesi" name="Jenis_profesi" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="lingkup_pekerjaan" class="form-label">Lingkup Pekerjaan</label>
|
|
<input type="text" class="form-control" id="lingkup_pekerjaan" name="lingkup_pekerjaan" required>
|
|
</div> --}}
|
|
<div class="mb-3">
|
|
<label for="Jenis_profesi" class="form-label">Profesi Inforkom</label>
|
|
<select class="form-select" id="Jenis_profesi" name="Jenis_profesi" required>
|
|
<option value="" disabled selected>Pilih Profesi</option>
|
|
@foreach (['Programmer', 'Data Analyst', 'Wirausaha', 'Non IT', 'Tidak diketahui', 'Tidak bekerja', 'Pelajar', 'Wirausaha IT', 'Infokom'] as $profesi)
|
|
<option value="{{ $profesi }}">{{ $profesi }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="lingkup_pekerjaan" class="form-label">Lingkup Pekerjaan</label>
|
|
<select class="form-select" id="lingkup_pekerjaan" name="lingkup_pekerjaan" required>
|
|
<option value="" disabled selected>Pilih Lingkup Pekerjaan</option>
|
|
@foreach (['Nasional', 'Internasional', 'Wirausaha'] as $lingkup)
|
|
<option value="{{ $lingkup }}">{{ $lingkup }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="kualifikasi_bidang_kerja" class="form-label">Kualifikasi Bidang Kerja</label>
|
|
<select class="form-select" id="kualifikasi_bidang_kerja" name="kualifikasi_bidang_kerja" required>
|
|
<option value="" selected disabled>Pilih Kualifikasi</option>
|
|
@foreach ($kualifikasis as $kualifikasi)
|
|
<option value="{{ $kualifikasi->id_kualifikasi }}">{{ $kualifikasi->kualifikasi_bidang }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="jabatan" class="form-label">Kelompok Jabatan</label>
|
|
<select class="form-select" id="id_kategori" name="jabatan" required>
|
|
<option value="" selected disabled>Pilih Jabatan</option>
|
|
@foreach ($jabatans as $jabatan)
|
|
<option value="{{ $jabatan->id_kategori }}">{{ $jabatan->Kategori_bidang_kerja }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer mt-3">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
|
|
<button type="submit" class="btn btn-primary">Simpan Data</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Modal Edit -->
|
|
@foreach ($alumni as $dl)
|
|
<div class="modal fade" id="editdataalumni{{ $dl->id_alumni }}" tabindex="-1"
|
|
aria-labelledby="modalEditAlumniLabel{{ $dl->id_alumni }}" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="modalEditAlumniLabel{{ $dl->id_alumni }}">Edit Data Alumni</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form action="{{ route('data_alumni.update', $dl->id_alumni) }}" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
<div class="modal-body row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="nama" class="form-label">Nama</label>
|
|
<input type="text" class="form-control" name="nama" value="{{ $dl->nama }}" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="angkatan" class="form-label">Angkatan</label>
|
|
<select class="form-select" name="angkatan" required>
|
|
@foreach ($angkatans as $angkatan)
|
|
<option value="{{ $angkatan->id_angkatan }}" {{ $angkatan->id_angkatan == $dl->angkatan ? 'selected' : '' }}>
|
|
{{ $angkatan->tahun }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="nim" class="form-label">NIM</label>
|
|
<input type="text" class="form-control" name="nim" value="{{ $dl->nim }}" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="masa_tunggu" class="form-label">Masa Tunggu (bulan)</label>
|
|
<input type="number" class="form-control" name="masa_tunggu" value="{{ $dl->masa_tunggu }}">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="pekerjaan" class="form-label">Pekerjaan</label>
|
|
<input type="text" class="form-control" name="pekerjaan" value="{{ $dl->pekerjaan }}">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="instansi" class="form-label">Instansi</label>
|
|
<input type="text" class="form-control" name="instansi" value="{{ $dl->instansi }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="link_linkedin" class="form-label">Link LinkedIn</label>
|
|
<input type="text" class="form-control" name="link_linkedin" value="{{ $dl->link_linkedin }}">
|
|
</div>
|
|
{{-- <div class="mb-3">
|
|
<label for="Jenis_profesi" class="form-label">Profesi Inforkom</label>
|
|
<input type="text" class="form-control" name="Jenis_profesi" value="{{ $dl->Jenis_profesi }}" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="lingkup_pekerjaan" class="form-label">Lingkup Pekerjaan</label>
|
|
<input type="text" class="form-control" name="lingkup_pekerjaan" value="{{ $dl->lingkup_pekerjaan }}" required>
|
|
</div> --}}
|
|
<div class="mb-3">
|
|
<label for="Jenis_profesi" class="form-label">Profesi Inforkom</label>
|
|
<select class="form-select" name="Jenis_profesi" required>
|
|
<option value="" disabled>Pilih Profesi</option>
|
|
@foreach (['Programmer', 'Data Analyst', 'Wirausaha', 'Non IT', 'Tidak diketahui', 'Tidak bekerja', 'Pelajar', 'Wirausaha IT', 'Infokom'] as $profesi)
|
|
<option value="{{ $profesi }}" {{ $dl->Jenis_profesi == $profesi ? 'selected' : '' }}>
|
|
{{ $profesi }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="lingkup_pekerjaan" class="form-label">Lingkup Pekerjaan</label>
|
|
<select class="form-select" name="lingkup_pekerjaan" required>
|
|
<option value="" disabled>Pilih Lingkup Pekerjaan</option>
|
|
@foreach (['Nasional', 'Internasional', 'Wirausaha'] as $lingkup)
|
|
<option value="{{ $lingkup }}" {{ $dl->lingkup_pekerjaan == $lingkup ? 'selected' : '' }}>
|
|
{{ $lingkup }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="kualifikasi_bidang_kerja" class="form-label">Kualifikasi Bidang Kerja</label>
|
|
<select class="form-select" name="kualifikasi_bidang_kerja" required>
|
|
@foreach ($kualifikasis as $kualifikasi)
|
|
<option value="{{ $kualifikasi->id_kualifikasi }}" {{ $kualifikasi->id_kualifikasi == $dl->kualifikasi_bidang_kerja ? 'selected' : '' }}>
|
|
{{ $kualifikasi->kualifikasi_bidang }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="jabatan" class="form-label">Jabatan</label>
|
|
<select class="form-select" name="jabatan" required>
|
|
@foreach ($jabatans as $jabatan)
|
|
<option value="{{ $jabatan->id_kategori }}" {{ $jabatan->id_kategori == $dl->jabatan ? 'selected' : '' }}>
|
|
{{ $jabatan->Kategori_bidang_kerja }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer mt-3">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
|
|
<button type="submit" class="btn btn-primary">Simpan Perubahan</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
|
|
|
|
|
|
<!-- ======= Footer ======= -->
|
|
@include('footer')
|
|
|
|
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
|
|
class="bi bi-arrow-up-short"></i></a>
|
|
|
|
<!-- Vendor JS Files -->
|
|
<script src="{{ asset('assets/vendor/apexcharts/apexcharts.min.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/chart.js/chart.umd.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/echarts/echarts.min.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/quill/quill.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/simple-datatables/simple-datatables.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/tinymce/tinymce.min.js') }}"></script>
|
|
<script src="{{ asset('assets/vendor/php-email-form/validate.js') }}"></script>
|
|
|
|
<!-- Template Main JS File -->
|
|
<script src="{{ asset('assets/js/main.js') }}"></script>
|
|
|
|
<script>
|
|
document.getElementById('searchInput').addEventListener('keyup', function() {
|
|
let filter = this.value.toLowerCase();
|
|
let rows = document.querySelectorAll('tbody tr');
|
|
|
|
rows.forEach(row => {
|
|
let text = row.innerText.toLowerCase();
|
|
row.style.display = text.includes(filter) ? '' : 'none';
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<!-- Ini buat sweet alert Konfirmasi Hapus-->
|
|
<script>
|
|
function confirmDelete(id_alumni) {
|
|
Swal.fire({
|
|
title: 'Apakah Anda Yakin?',
|
|
text: "Data Alumni ini akan dihapus!",
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#d33',
|
|
cancelButtonColor: '#3085d6',
|
|
confirmButtonText: 'Ya, Hapus!',
|
|
cancelButtonText: 'Batal'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
// Mengirimkan request delete ke server
|
|
fetch(`/data_alumni/destroy/${id_alumni}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
}
|
|
}).then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
Swal.fire(
|
|
'Dihapus!',
|
|
'Data Alumni berhasil dihapus.',
|
|
'success'
|
|
).then(() => {
|
|
location.reload(); // Reload halaman setelah konfirmasi berhasil
|
|
});
|
|
} else {
|
|
Swal.fire(
|
|
'Gagal!',
|
|
'Data Alumni gagal dihapus.',
|
|
'error'
|
|
);
|
|
}
|
|
})
|
|
.catch(error => console.error('Terjadi kesalahan:', error));
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
{{-- Untuk row Tampilan dropdwon angakat --}}
|
|
|
|
<script>
|
|
function filterByAngkatan(angkatan) {
|
|
const url = new URL(window.location.href);
|
|
if (angkatan) {
|
|
url.searchParams.set('angkatan', angkatan);
|
|
} else {
|
|
url.searchParams.delete('angkatan');
|
|
}
|
|
window.location.href = url.toString();
|
|
}
|
|
</script>
|
|
|
|
<!-- Ini buat datatables Custom Rownya dengan Sorting -->
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const table = document.getElementById("userTable");
|
|
const tbody = table.querySelector("tbody");
|
|
const rows = Array.from(tbody.querySelectorAll("tr"));
|
|
const headers = table.querySelectorAll("thead th");
|
|
const paginationContainer = document.createElement("div");
|
|
paginationContainer.className = "pagination-container mt-3 d-flex justify-content-center";
|
|
|
|
const searchInput = document.getElementById("searchInput");
|
|
const entriesPerPageSelect = document.getElementById("entriesPerPage");
|
|
|
|
let currentPage = 1;
|
|
let rowsPerPage = parseInt(entriesPerPageSelect.value) || 5;
|
|
let currentSortColumn = null;
|
|
let currentSortDirection = "asc";
|
|
|
|
function filterRows() {
|
|
const filter = searchInput.value.toLowerCase();
|
|
return rows.filter(row => row.innerText.toLowerCase().includes(filter));
|
|
}
|
|
|
|
function sortRows(columnIndex, direction) {
|
|
rows.sort((a, b) => {
|
|
const aText = a.cells[columnIndex].innerText.trim().toLowerCase();
|
|
const bText = b.cells[columnIndex].innerText.trim().toLowerCase();
|
|
|
|
if (!isNaN(aText) && !isNaN(bText)) {
|
|
return direction === "asc" ? aText - bText : bText - aText;
|
|
}
|
|
|
|
return direction === "asc" ? aText.localeCompare(bText) : bText.localeCompare(aText);
|
|
});
|
|
}
|
|
|
|
function displayTablePage(page) {
|
|
const filteredRows = filterRows();
|
|
const totalPages = Math.ceil(filteredRows.length / rowsPerPage);
|
|
|
|
if (page > totalPages) page = totalPages;
|
|
if (page < 1) page = 1;
|
|
|
|
currentPage = page;
|
|
tbody.innerHTML = "";
|
|
|
|
if (entriesPerPageSelect.value === "all") {
|
|
filteredRows.forEach(row => tbody.appendChild(row));
|
|
} else {
|
|
const startIndex = (page - 1) * rowsPerPage;
|
|
const endIndex = startIndex + rowsPerPage;
|
|
|
|
const rowsToDisplay = filteredRows.slice(startIndex, endIndex);
|
|
rowsToDisplay.forEach(row => tbody.appendChild(row));
|
|
|
|
updatePagination(page, totalPages);
|
|
}
|
|
}
|
|
|
|
function updatePagination(currentPage, totalPages) {
|
|
paginationContainer.innerHTML = "";
|
|
|
|
if (totalPages <= 1) return;
|
|
|
|
// Create a nav element for Bootstrap pagination
|
|
const nav = document.createElement("nav");
|
|
const ul = document.createElement("ul");
|
|
ul.className = "pagination pagination-sm";
|
|
|
|
// Previous button
|
|
const prevLi = document.createElement("li");
|
|
prevLi.className = "page-item" + (currentPage === 1 ? " disabled" : "");
|
|
const prevLink = document.createElement("a");
|
|
prevLink.className = "page-link";
|
|
prevLink.href = "#";
|
|
prevLink.textContent = "«";
|
|
prevLink.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
if (currentPage > 1) displayTablePage(currentPage - 1);
|
|
});
|
|
prevLi.appendChild(prevLink);
|
|
ul.appendChild(prevLi);
|
|
|
|
// Determine which page numbers to show
|
|
let startPage = Math.max(1, currentPage - 2);
|
|
let endPage = Math.min(totalPages, startPage + 4);
|
|
|
|
// Adjust if we're showing less than 5 pages
|
|
if (endPage - startPage < 4) {
|
|
startPage = Math.max(1, endPage - 4);
|
|
}
|
|
|
|
// First page button if not in range
|
|
if (startPage > 1) {
|
|
const firstLi = document.createElement("li");
|
|
firstLi.className = "page-item";
|
|
const firstLink = document.createElement("a");
|
|
firstLink.className = "page-link";
|
|
firstLink.href = "#";
|
|
firstLink.textContent = "1";
|
|
firstLink.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
displayTablePage(1);
|
|
});
|
|
firstLi.appendChild(firstLink);
|
|
ul.appendChild(firstLi);
|
|
|
|
// Ellipsis if needed
|
|
if (startPage > 2) {
|
|
const ellipsisLi = document.createElement("li");
|
|
ellipsisLi.className = "page-item disabled";
|
|
const ellipsisSpan = document.createElement("a");
|
|
ellipsisSpan.className = "page-link";
|
|
ellipsisSpan.textContent = "...";
|
|
ellipsisLi.appendChild(ellipsisSpan);
|
|
ul.appendChild(ellipsisLi);
|
|
}
|
|
}
|
|
|
|
// Page numbers
|
|
for (let i = startPage; i <= endPage; i++) {
|
|
const li = document.createElement("li");
|
|
li.className = "page-item" + (i === currentPage ? " active" : "");
|
|
const link = document.createElement("a");
|
|
link.className = "page-link";
|
|
link.href = "#";
|
|
link.textContent = i;
|
|
link.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
displayTablePage(i);
|
|
});
|
|
li.appendChild(link);
|
|
ul.appendChild(li);
|
|
}
|
|
|
|
// Ellipsis and last page if needed
|
|
if (endPage < totalPages) {
|
|
if (endPage < totalPages - 1) {
|
|
const ellipsisLi = document.createElement("li");
|
|
ellipsisLi.className = "page-item disabled";
|
|
const ellipsisSpan = document.createElement("a");
|
|
ellipsisSpan.className = "page-link";
|
|
ellipsisSpan.textContent = "...";
|
|
ellipsisLi.appendChild(ellipsisSpan);
|
|
ul.appendChild(ellipsisLi);
|
|
}
|
|
|
|
const lastLi = document.createElement("li");
|
|
lastLi.className = "page-item";
|
|
const lastLink = document.createElement("a");
|
|
lastLink.className = "page-link";
|
|
lastLink.href = "#";
|
|
lastLink.textContent = totalPages;
|
|
lastLink.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
displayTablePage(totalPages);
|
|
});
|
|
lastLi.appendChild(lastLink);
|
|
ul.appendChild(lastLi);
|
|
}
|
|
|
|
// Next button
|
|
const nextLi = document.createElement("li");
|
|
nextLi.className = "page-item" + (currentPage === totalPages ? " disabled" : "");
|
|
const nextLink = document.createElement("a");
|
|
nextLink.className = "page-link";
|
|
nextLink.href = "#";
|
|
nextLink.textContent = "»";
|
|
nextLink.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
if (currentPage < totalPages) displayTablePage(currentPage + 1);
|
|
});
|
|
nextLi.appendChild(nextLink);
|
|
ul.appendChild(nextLi);
|
|
|
|
nav.appendChild(ul);
|
|
paginationContainer.appendChild(nav);
|
|
}
|
|
|
|
headers.forEach((header, index) => {
|
|
header.addEventListener("click", () => {
|
|
if (currentSortColumn === index) {
|
|
currentSortDirection = currentSortDirection === "asc" ? "desc" : "asc";
|
|
} else {
|
|
currentSortColumn = index;
|
|
currentSortDirection = "asc";
|
|
}
|
|
|
|
sortRows(index, currentSortDirection);
|
|
displayTablePage(1);
|
|
});
|
|
});
|
|
|
|
searchInput.addEventListener("keyup", () => displayTablePage(1));
|
|
entriesPerPageSelect.addEventListener("change", function() {
|
|
rowsPerPage = entriesPerPageSelect.value === "all" ? rows.length : parseInt(
|
|
entriesPerPageSelect.value);
|
|
displayTablePage(1);
|
|
});
|
|
|
|
displayTablePage(1);
|
|
table.parentNode.appendChild(paginationContainer);
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|