546 lines
23 KiB
PHP
546 lines
23 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<title>Pengajuan Surat</title>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
|
|
<style>
|
|
body {
|
|
color: #566787;
|
|
background: #f5f5f5;
|
|
font-family: 'Varela Round', sans-serif;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Area Konten Utama */
|
|
.content-area {
|
|
padding: 20px;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.table-responsive {
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.table-wrapper {
|
|
background: #fff;
|
|
padding: 20px 25px;
|
|
border-radius: 8px;
|
|
min-width: 1000px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
/* WARNA HEADER: Biru Sidebar */
|
|
.table-title {
|
|
padding-bottom: 15px;
|
|
background: #3b5998;
|
|
color: #fff;
|
|
padding: 16px 30px;
|
|
min-width: 100%;
|
|
margin: -20px -25px 10px;
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
|
|
.table-title h2 {
|
|
margin: 5px 0 0;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Tombol Custom Kecil (Tambah Pengajuan / Tambah Surat) */
|
|
.btn-custom-small {
|
|
padding: 5px 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
border-radius: 6px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
transition: all 0.3s;
|
|
border: none;
|
|
background-color: #28a745;
|
|
color: white !important;
|
|
text-decoration: none;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.btn-custom-small i {
|
|
font-size: 16px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.btn-custom-small:hover {
|
|
background-color: #218838;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
table.table tr th,
|
|
table.table tr td {
|
|
border-color: #e9e9e9;
|
|
padding: 15px 15px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Style Baris Tabel */
|
|
table.table-striped tbody tr:nth-of-type(odd) {
|
|
background-color: #fcfcfc;
|
|
}
|
|
|
|
table.table-striped.table-hover tbody tr:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
/* Tombol 'Lihat' Berkas */
|
|
.btn-lihat {
|
|
background-color: #3b5998;
|
|
color: white !important;
|
|
border-radius: 4px;
|
|
padding: 5px 12px;
|
|
font-size: 12px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-lihat i {
|
|
font-size: 16px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
/* Ikon Aksi */
|
|
table.table td a.edit {
|
|
color: #FFC107;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
table.table td a.delete {
|
|
color: #F44336;
|
|
}
|
|
|
|
table.table td i {
|
|
font-size: 19px;
|
|
}
|
|
|
|
/* Badge Status */
|
|
.status-badge {
|
|
padding: 5px 10px;
|
|
border-radius: 20px;
|
|
color: #fff;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
text-transform: capitalize;
|
|
display: inline-block;
|
|
min-width: 80px;
|
|
text-align: center;
|
|
}
|
|
|
|
.status-disetujui {
|
|
background: #28a745;
|
|
}
|
|
|
|
.status-menunggu {
|
|
background: #ffc107;
|
|
color: #000;
|
|
}
|
|
|
|
.status-ditolak {
|
|
background: #dc3545;
|
|
}
|
|
|
|
/* Pagination Styling */
|
|
.hint-text {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.pagination .page-link {
|
|
color: #3b5998;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.pagination .page-item.active .page-link {
|
|
background-color: #3b5998;
|
|
border-color: #3b5998;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div class="d-flex">
|
|
@include('sidebar')
|
|
|
|
<div class="content flex-fill p-4">
|
|
<div class="container-xl">
|
|
|
|
<div class="table-responsive">
|
|
<div class="table-wrapper">
|
|
|
|
{{-- JUDUL --}}
|
|
<div class="table-title mb-3">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm-6">
|
|
<h2 class="mb-0">Data <b>Pengajuan Surat</b></h2>
|
|
</div>
|
|
<div class="col-sm-6 text-end">
|
|
<a href="#" class="btn btn-success btn-sm btn-custom-small" data-bs-toggle="modal" data-bs-target="#addPengajuanModal">
|
|
<i class="material-icons">add_circle</i>
|
|
<span>Tambah Pengajuan</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- TABLE --}}
|
|
<table class="table table-striped table-hover align-middle">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th width="50" class="text-center">No</th>
|
|
<th>Nomor Surat</th>
|
|
<th>Jenis Surat</th>
|
|
<th>Tanggal Pengajuan</th>
|
|
<th>Status</th>
|
|
<th>Keterangan</th>
|
|
<th class="text-center">Berkas</th>
|
|
<th width="120" class="text-center">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
@forelse ($pengajuan as $item)
|
|
<tr>
|
|
<td class="text-center" style="color: #000; font-weight: 600;">
|
|
{{ ($pengajuan->currentPage() - 1) * $pengajuan->perPage() + $loop->iteration }}
|
|
</td>
|
|
|
|
<td style="color: #000;">{{ $item->nomor_surat ?? '-' }}</td>
|
|
<td style="color: #000;">{{ $item->jenis_surat ?? '-' }}</td>
|
|
<td style="color: #000;">{{ $item->tanggal_pengajuan ? \Carbon\Carbon::parse($item->tanggal_pengajuan)->format('d-m-Y') : '-' }}</td>
|
|
|
|
<td>
|
|
@switch($item->status)
|
|
@case('menunggu') <span class="badge bg-warning text-dark">Menunggu</span> @break
|
|
@case('disetujui') <span class="badge bg-success">Disetujui</span> @break
|
|
@case('ditolak') <span class="badge bg-danger">Ditolak</span> @break
|
|
@default <span class="badge bg-secondary">-</span>
|
|
@endswitch
|
|
</td>
|
|
|
|
<td style="color: #000;">
|
|
<small>{{ Str::limit($item->keterangan ?? '-', 30) }}</small>
|
|
</td>
|
|
|
|
<td class="text-center">
|
|
@if ($item->berkas_persyaratan)
|
|
<a href="{{ asset('berkas_pengajuan/' . $item->berkas_persyaratan) }}"
|
|
target="_blank"
|
|
class="btn btn-sm btn-primary d-inline-flex align-items-center"
|
|
style="gap: 5px; color: #fff; font-weight: 500; padding: 5px 12px; border-radius: 4px; text-decoration: none;">
|
|
<i class="material-icons" style="font-size:18px;">picture_as_pdf</i>
|
|
<span>Lihat</span>
|
|
</a>
|
|
@else
|
|
<span class="text-muted fst-italic small">Tidak ada</span>
|
|
@endif
|
|
</td>
|
|
|
|
<td>
|
|
<div class="d-flex gap-2 justify-content-center">
|
|
<a href="javascript:void(0)"
|
|
class="editPengajuanBtn btn btn-sm"
|
|
data-pengajuan='@json($item)'
|
|
title="Edit"
|
|
style="display:flex;align-items:center;justify-content:center;background:#FFC107;color:#fff;border-radius:4px;width:36px;height:36px;text-decoration:none;">
|
|
<i class="material-icons" style="font-size:18px;">edit</i>
|
|
</a>
|
|
|
|
<a href="javascript:void(0)"
|
|
class="btn-delete btn btn-sm btn-danger"
|
|
data-id="{{ $item->id }}"
|
|
style="display:flex; align-items:center; justify-content:center; width:36px; height:36px;">
|
|
<i class="material-icons">delete</i>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="8" class="text-center text-muted py-4">Tidak ada data pengajuan surat</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
<div class="d-flex justify-content-between align-items-center mt-3">
|
|
<div class="hint-text">
|
|
Menampilkan
|
|
<b>{{ $pengajuan->firstItem() }}</b>
|
|
sampai
|
|
<b>{{ $pengajuan->lastItem() }}</b>
|
|
dari
|
|
<b>{{ $pengajuan->total() }}</b> data
|
|
</div>
|
|
|
|
<div class="pagination-container">
|
|
{{ $pengajuan->links() }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="addPengajuanModal" class="modal fade" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<form action="{{ route('pengajuan.store') }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Tambah Pengajuan</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" name="penduduk_id" value="{{ Auth::user()->id }}">
|
|
<div class="mb-3">
|
|
<label class="form-label">Nomor Surat <span class="text-danger">*</span></label>
|
|
<input type="text" name="nomor_surat" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Jenis Surat</label>
|
|
<select name="jenis_surat" class="form-control" required>
|
|
<option value="" disabled selected>-- Pilih Jenis Surat --</option>
|
|
<option value="SKTM">Surat Keterangan Tidak Mampu (SKTM)</option>
|
|
<option value="SKCK">Surat Keterangan Catatan Kepolisian (SKCK)</option>
|
|
<option value="Surat Izin Usaha">Surat Izin Usaha</option>
|
|
<option value="Keterangan Kematian">Surat Keterangan Kematian</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Tanggal Pengajuan <span class="text-danger">*</span></label>
|
|
<input
|
|
type="date"
|
|
name="tanggal_pengajuan"
|
|
class="form-control"
|
|
value="{{ date('Y-m-d') }}"
|
|
min="{{ date('Y-m-d') }}"
|
|
required>
|
|
<small class="text-muted">Pilih tanggal hari ini atau setelahnya.</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Keterangan</label>
|
|
<textarea name="keterangan" class="form-control" rows="2"></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Berkas (PDF)</label>
|
|
<input type="file" name="berkas_persyaratan" class="form-control" accept="application/pdf">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
|
|
<button type="submit" class="btn btn-success">Kirim</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="editPengajuanModal" class="modal fade" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<form id="editPengajuanForm" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Edit Pengajuan Surat</h5>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<input type="hidden" name="penduduk_id" value="{{ Auth::user()->id }}">
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Nomor Surat</label>
|
|
<input type="text" name="nomor_surat" id="edit_nomor_surat" class="form-control" value="{{ $item->nomor_surat ?? '' }}">
|
|
</div>
|
|
|
|
<div class="form-group mb-3">
|
|
<label>Jenis Surat</label>
|
|
<select name="jenis_surat" id="edit_jenis_surat" class="form-control" required>
|
|
<option value="" disabled {{ !isset($item) ? 'selected' : '' }}>-- Pilih Jenis Surat --</option>
|
|
<option value="SKTM" {{ ($item->jenis_surat ?? '') == 'SKTM' ? 'selected' : '' }}>
|
|
Surat Keterangan Tidak Mampu (SKTM)
|
|
</option>
|
|
<option value="SKCK" {{ ($item->jenis_surat ?? '') == 'SKCK' ? 'selected' : '' }}>
|
|
Surat Keterangan Catatan Kepolisian (SKCK)
|
|
</option>
|
|
<option value="Surat Izin Usaha" {{ ($item->jenis_surat ?? '') == 'Surat Izin Usaha' ? 'selected' : '' }}>
|
|
Surat Izin Usaha
|
|
</option>
|
|
<option value="Keterangan Kematian" {{ ($item->jenis_surat ?? '') == 'Keterangan Kematian' ? 'selected' : '' }}>
|
|
Surat Keterangan Kematian
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Tanggal Pengajuan <span class="text-danger">*</span></label>
|
|
<input
|
|
type="date"
|
|
name="tanggal_pengajuan"
|
|
class="form-control"
|
|
value="{{ date('Y-m-d') }}"
|
|
min="{{ date('Y-m-d') }}"
|
|
required>
|
|
<small class="text-muted">Pilih tanggal hari ini atau setelahnya.</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Status</label>
|
|
<select name="status" id="edit_status" class="form-control" required>
|
|
<option value="menunggu" {{ ($item->status ?? '') == 'menunggu' ? 'selected' : '' }}>Menunggu</option>
|
|
<option value="disetujui" {{ ($item->status ?? '') == 'disetujui' ? 'selected' : '' }}>Disetujui</option>
|
|
<option value="ditolak" {{ ($item->status ?? '') == 'ditolak' ? 'selected' : '' }}>Ditolak</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Keterangan</label>
|
|
<textarea name="keterangan" id="edit_keterangan" class="form-control" rows="3">{{ $item->keterangan ?? '' }}</textarea>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Ganti Berkas (PDF)</label>
|
|
<input type="file" name="berkas_persyaratan" class="form-control" accept="application/pdf">
|
|
<small class="text-muted">Kosongkan jika tidak ingin mengganti file</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
|
|
<button type="submit" class="btn btn-info text-white">Simpan Perubahan</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="deletePengajuanModal" class="modal fade" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<form id="deleteForm" method="POST" style="display: none;">
|
|
@csrf
|
|
@method('DELETE')
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// --- SWEETALERT NOTIFIKASI ---
|
|
@if(session('success'))
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Berhasil!',
|
|
text: '{{ session("success") }}',
|
|
timer: 2500,
|
|
showConfirmButton: false
|
|
});
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Gagal!',
|
|
text: '{{ session("error") }}',
|
|
timer: 2500,
|
|
showConfirmButton: false
|
|
});
|
|
@endif
|
|
|
|
// --- LOGIKA EDIT PENGAJUAN ---
|
|
$(document).ready(function() {
|
|
$(document).on('click', '.editPengajuanBtn', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Ambil data JSON dari atribut data-pengajuan di tombol
|
|
var data = $(this).data('pengajuan');
|
|
|
|
if (data) {
|
|
// Isi input modal berdasarkan ID (Sesuai HTML Modal kamu)
|
|
$('#edit_penduduk_id').val(data.penduduk_id);
|
|
$('#edit_nomor_surat').val(data.nomor_surat);
|
|
$('#edit_jenis_surat').val(data.jenis_surat);
|
|
$('#edit_tanggal_pengajuan').val(data.tanggal_pengajuan);
|
|
$('#edit_status').val(data.status);
|
|
$('#edit_keterangan').val(data.keterangan);
|
|
|
|
// Update Action Form (Gunakan ID editPengajuanForm)
|
|
$('#editPengajuanForm').attr('action', '/pengajuan/update/' + data.id);
|
|
|
|
// Munculkan Modal (Gunakan ID editPengajuanModal)
|
|
$('#editPengajuanModal').modal('show');
|
|
}
|
|
});
|
|
});
|
|
// --- LOGIKA DELETE ---
|
|
$(document).on('click', '.btn-delete', function(e) {
|
|
e.preventDefault();
|
|
var id = $(this).data('id');
|
|
|
|
// SESUAIKAN DENGAN ROUTE: /pengajuan/{id}
|
|
var url = '/pengajuan/' + id;
|
|
|
|
Swal.fire({
|
|
title: 'Hapus Pengajuan?',
|
|
text: "Data yang dihapus tidak dapat dipulihkan!",
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#d33',
|
|
confirmButtonText: 'Ya, Hapus!',
|
|
cancelButtonText: 'Batal'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
// Berikan URL ke form tersembunyi lalu submit
|
|
$('#deleteForm').attr('action', url).submit();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// --- LOGIKA DELETE PENGAJUAN ---
|
|
$(document).on('click', '.btn-delete-pengajuan', function() {
|
|
// Ambil ID dari atribut data-id pada tombol
|
|
var id = $(this).data('id');
|
|
|
|
// Set URL action pada form modal hapus
|
|
// Pastikan route-nya sesuai dengan yang ada di web.php (prefix pengajuan)
|
|
$('#deleteForm').attr('action', '/pengajuan/' + id);
|
|
|
|
// Munculkan modal (Opsional jika tidak pakai atribut data-bs-toggle)
|
|
$('#deletePengajuanModal').modal('show');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
|
|
|
|
</html> |