737 lines
33 KiB
PHP
737 lines
33 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Formulir Pengajuan Pengangsuran UKT')
|
|
|
|
@section('content')
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<style>
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
background-color: #eef2f3;
|
|
}
|
|
.container {
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.form-container {
|
|
background-color: #fff;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
.card-header {
|
|
background-color: rgb(0, 122, 153);
|
|
color: white;
|
|
padding: 15px;
|
|
border-radius: 10px 10px 0 0;
|
|
text-align: center;
|
|
}
|
|
.form-section {
|
|
margin-bottom: 30px;
|
|
}
|
|
.section-title {
|
|
color: #2c3e50;
|
|
border-bottom: 2px solid #3498db;
|
|
padding-bottom: 8px;
|
|
margin-bottom: 20px;
|
|
font-weight: 600;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
.form-group label {
|
|
font-weight: 500;
|
|
color: #34495e;
|
|
margin-bottom: 8px;
|
|
}
|
|
.form-control, .form-select, .file-custom {
|
|
border-radius: 6px;
|
|
padding: 10px 15px;
|
|
border: 1px solid #ddd;
|
|
transition: all 0.3s;
|
|
height: 45px;
|
|
}
|
|
.form-control:focus, .form-select:focus {
|
|
border-color: #3498db;
|
|
box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
|
|
}
|
|
.file-input-label {
|
|
display: block;
|
|
margin-top: 8px;
|
|
}
|
|
.file-input {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
.file-custom {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
background-color: #f8f9fa;
|
|
text-align: center;
|
|
width: 100%;
|
|
border-radius: 6px;
|
|
padding: 10px 15px;
|
|
border: 1px solid #ddd;
|
|
transition: all 0.3s;
|
|
height: 45px;
|
|
overflow: hidden;
|
|
}
|
|
.file-custom:hover {
|
|
background-color: #e9f7fe;
|
|
}
|
|
.file-custom i {
|
|
margin-right: 10px;
|
|
}
|
|
.file-custom span {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.file-name {
|
|
margin-top: 6px;
|
|
font-size: 0.9rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: #198754;
|
|
}
|
|
.file-name.error {
|
|
color: #dc3545;
|
|
}
|
|
.btn-submit {
|
|
background-color: #007a99;
|
|
color: white;
|
|
font-weight: 600;
|
|
padding: 12px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
transition: all 0.3s;
|
|
}
|
|
.btn-submit:hover {
|
|
background-color: #005f73;
|
|
}
|
|
.loading-spinner {
|
|
display: none;
|
|
text-align: center;
|
|
margin-top: 15px;
|
|
}
|
|
.alert {
|
|
border-radius: 6px;
|
|
}
|
|
.declaration-check {
|
|
margin-top: 25px;
|
|
padding: 15px;
|
|
background-color: #f8f9fa;
|
|
border-radius: 6px;
|
|
}
|
|
.dropdown-caption {
|
|
font-size: 0.85rem;
|
|
color: #6c757d;
|
|
margin-top: 5px;
|
|
padding-left: 5px;
|
|
}
|
|
.upload-label {
|
|
font-weight: 500;
|
|
color: #34495e;
|
|
margin-top: 15px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.select-upload-container {
|
|
display: flex;
|
|
gap: 15px;
|
|
align-items: flex-start;
|
|
}
|
|
.select-upload-container .form-select {
|
|
flex: 1;
|
|
}
|
|
.select-upload-container .file-custom {
|
|
flex: 1;
|
|
}
|
|
.criteria-item {
|
|
margin-bottom: 25px;
|
|
}
|
|
.criteria-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.criteria-description {
|
|
font-size: 0.85rem;
|
|
color: #6c757d;
|
|
margin-top: 5px;
|
|
padding: 5px 0;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.form-container {
|
|
padding: 20px;
|
|
}
|
|
.select-upload-container {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-10">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header">
|
|
<h4 class="mb-0"><i class="fas fa-file-alt me-2"></i>Formulir Pengajuan Pengangsuran UKT</h4>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
@if (session('success'))
|
|
<div class="alert alert-success d-flex align-items-center" role="alert">
|
|
<i class="fas fa-check-circle me-2"></i>
|
|
<div>{{ session('success') }}</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if (session('error'))
|
|
<div class="alert alert-danger d-flex align-items-center" role="alert">
|
|
<i class="fas fa-exclamation-circle me-2"></i>
|
|
<div>{{ session('error') }}</div>
|
|
</div>
|
|
@endif
|
|
|
|
<form id="pengajuanForm" action="{{ route('pengajuan.store', ['jenis' => 'pengangsuran']) }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
|
|
<!-- Data Mahasiswa -->
|
|
<div class="form-section">
|
|
<h5 class="section-title"><i class="fas fa-user-graduate me-2"></i>Data Mahasiswa</h5>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="nama">Nama Lengkap</label>
|
|
<input type="text" class="form-control" value="{{ auth()->user()->name }}" readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="program_studi">Program Studi</label>
|
|
<input type="text" class="form-control" value="{{ auth()->user()->mahasiswa->program_studi }}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="nim">NIM</label>
|
|
<input type="text" class="form-control" value="{{ auth()->user()->mahasiswa->nim }}" readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="jurusan">Jurusan</label>
|
|
<input type="text" class="form-control" value="{{ auth()->user()->mahasiswa->jurusan }}" readonly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- UKT saat ini -->
|
|
<div class="form-section">
|
|
<h5 class="section-title">UKT Saat Ini</h5>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="ukt_saat_ini">Nominal UKT Saat Ini</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text">Rp</span>
|
|
<input type="text" name="ukt_saat_ini"
|
|
value="{{ is_numeric(old('ukt_saat_ini')) ? number_format((float) old('ukt_saat_ini'), 0, ',', '.') : '' }}"
|
|
placeholder="Contoh: 1.500.000"
|
|
class="form-control"
|
|
id="ukt-input"
|
|
required>
|
|
</div>
|
|
<small class="dropdown-caption">Masukkan nominal tanpa titik atau koma</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label>Upload Slip Pembayaran Terbaru</label>
|
|
<input type="file" id="file_ukt" name="file_ukt" class="form-control" accept=".pdf" required>
|
|
<small class="text-muted">Format: PDF, maksimal 1.5MB</small>
|
|
</div>
|
|
<div class="file-name text-muted mt-1" id="file_ukt-name"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kriteria Penilaian -->
|
|
<div class="form-section">
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i>Silakan lengkapi semua kriteria berikut dengan data yang valid dan unggah dokumen pendukung yang diperlukan.
|
|
</div>
|
|
|
|
<!-- Penghasilan Orang Tua -->
|
|
<div class="card mb-3">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 text-dark fw-bold text-start">Penghasilan Orang Tua</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="criteria-item">
|
|
<div class="select-upload-container">
|
|
<select class="form-select" name="penghasilan" required>
|
|
<option value="">Pilih Penghasilan</option>
|
|
<option value="< 2 juta">Kurang dari 2 juta</option>
|
|
<option value="2 - 3 juta">2 - 3 juta</option>
|
|
<option value="3 - 4 juta">3 - 4 juta</option>
|
|
<option value="> 5 juta">Lebih dari 5 juta</option>
|
|
</select>
|
|
<label for="file_penghasilan" class="file-custom">
|
|
<i class="fas fa-cloud-upload-alt me-2"></i>
|
|
<span>Pilih File (PDF, Maksimal 1.5MB)</span>
|
|
<input type="file" id="file_penghasilan" name="file_penghasilan" class="file-input" accept=".pdf" required>
|
|
</label>
|
|
</div>
|
|
<div class="criteria-description">
|
|
Upload Slip Gaji/Surat Keterangan Penghasilan (PDF, Maksimal 1.5MB)
|
|
</div>
|
|
<div class="file-name text-muted mt-1" id="file_penghasilan-name"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pekerjaan Orang Tua -->
|
|
<div class="card mb-3">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 text-dark fw-bold text-start">Pekerjaan Orang Tua</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<select class="form-select" name="pekerjaan" required>
|
|
<option value="">Pilih Pekerjaan</option>
|
|
<option value="Bekerja Tetap">Bekerja Tetap</option>
|
|
<option value="Bekerja Tidak Tetap">Bekerja Tidak Tetap</option>
|
|
<option value="Tidak Bekerja">Tidak Bekerja</option>
|
|
</select>
|
|
<div class="mt-2 text-muted" style="font-size: 0.9rem;">
|
|
• Bekerja Tetap: Surat Keterangan Kerja<br>
|
|
• Bekerja Tidak Tetap: Surat Keterangan dari Desa
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="file_pekerjaan" class="file-custom">
|
|
<i class="fas fa-cloud-upload-alt me-2"></i>
|
|
<span>Pilih File (PDF, Maksimal 1.5MB)</span>
|
|
<input type="file" id="file_pekerjaan" name="file_pekerjaan" class="file-input" accept=".pdf" required>
|
|
</label>
|
|
<div class="mt-2 text-muted" style="font-size: 0.9rem;">
|
|
• Tidak Bekerja: SK Pensiun / Surat Keterangan dari Desa<br>
|
|
• Format: PDF, Maksimal 1.5MB
|
|
</div>
|
|
<div class="file-name text-muted mt-1" id="file_pekerjaan-name"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tanggungan Orang Tua -->
|
|
<div class="card mb-3">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 text-dark fw-bold text-start">Jumlah Tanggungan Orang Tua</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<select class="form-select" name="tanggungan" required>
|
|
<option value="">Pilih Jumlah Tanggungan</option>
|
|
<option value="1 Orang">1 Orang</option>
|
|
<option value="2 - 4 Orang">2 - 4 Orang</option>
|
|
<option value="> 4 Orang">Lebih dari 4 Orang</option>
|
|
</select>
|
|
<div class="mt-2 text-muted" style="font-size: 0.9rem;">
|
|
Upload Kartu Keluarga (PDF, Maksimal 1.5MB)<br>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="file_tanggungan" class="file-custom">
|
|
<i class="fas fa-cloud-upload-alt me-2"></i>
|
|
<span>Pilih File (PDF, Maksimal 1.5MB)</span>
|
|
<input type="file" id="file_tanggungan" name="file_tanggungan" class="file-input" accept=".pdf" required>
|
|
</label>
|
|
<div class="file-name text-muted mt-1" id="file_tanggungan-name"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Orang Tua -->
|
|
<div class="card mb-3">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 text-dark fw-bold text-start">Status Orang Tua</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<select class="form-select" name="status_ortu" required>
|
|
<option value="">Pilih Status Orang Tua</option>
|
|
<option value="Lengkap">Lengkap</option>
|
|
<option value="Cerai/Yatim/Piatu">Cerai/Yatim/Piatu</option>
|
|
<option value="Yatim Piatu">Yatim Piatu</option>
|
|
</select>
|
|
<div class="mt-2 text-muted" style="font-size: 0.9rem;">
|
|
• Lengkap: Kartu Keluarga / Buku Nikah<br>
|
|
• Cerai/Yatim/Piatu: Surat Cerai / Surat Kematian
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="file_status_ortu" class="file-custom">
|
|
<i class="fas fa-cloud-upload-alt me-2"></i>
|
|
<span>Pilih File (PDF, Maksimal 1.5MB)</span>
|
|
<input type="file" id="file_status_ortu" name="file_status_ortu" class="file-input" accept=".pdf" required hidden>
|
|
</label>
|
|
<div class="mt-2 text-muted" style="font-size: 0.9rem;">
|
|
• Yatim Piatu: Surat Kematian<br>
|
|
• Format: PDF, maksimal 1.5MB
|
|
</div>
|
|
<div class="file-name text-muted mt-1" id="file_status_ortu-name"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Hunian -->
|
|
<div class="card mb-3">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 text-dark fw-bold text-start">Hunian</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="criteria-item">
|
|
<div class="select-upload-container">
|
|
<select class="form-select" name="hunian" required>
|
|
<option value="">Pilih Status</option>
|
|
<option value="Milik Sendiri">Milik Sendiri</option>
|
|
<option value="Sewa/Kontrak">Sewa/Kontrak</option>
|
|
<option value="Menumpang">Menumpang</option>
|
|
</select>
|
|
<label for="file_hunian" class="file-custom">
|
|
<i class="fas fa-cloud-upload-alt me-2"></i>
|
|
<span>Pilih File (PDF, Maksimal 1.5MB)</span>
|
|
<input type="file" id="file_hunian" name="file_hunian" class="file-input" accept=".pdf,.jpg,.jpeg" required>
|
|
</label>
|
|
</div>
|
|
<div class="criteria-description">
|
|
Upload Foto Hunian (PDF, Maksimal 1.5MB)
|
|
</div>
|
|
<div class="file-name text-muted mt-1" id="file_hunian-name"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kondisi Kendaraan -->
|
|
<div class="card mb-3">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 text-dark fw-bold text-start">Jenis Kendaraan</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="criteria-item">
|
|
<div class="select-upload-container">
|
|
<select class="form-select" name="kendaraan" required>
|
|
<option value="">Pilih Jenis</option>
|
|
<option value="Tidak Punya">Tidak Punya</option>
|
|
<option value="Motor">Motor</option>
|
|
<option value="Mobil">Mobil</option>
|
|
<option value="Motor dan Mobil">Motor dan Mobil</option>
|
|
</select>
|
|
<label for="file_kendaraan" class="file-custom">
|
|
<i class="fas fa-cloud-upload-alt me-2"></i>
|
|
<span>Pilih File (PDF, Maksimal 1.5MB)</span>
|
|
<input type="file" id="file_kendaraan" name="file_kendaraan" class="file-input" accept=".pdf">
|
|
</label>
|
|
</div>
|
|
<div class="criteria-description">
|
|
Upload BPKB (PDF, Maksimal 1.5MB)
|
|
</div>
|
|
<div class="file-name text-muted mt-1" id="file_kendaraan-name"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Semester dan IPK -->
|
|
<div class="card mb-3">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 text-dark fw-bold text-start">Semester dan IPK</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label>Pilih Semester Saat Ini</label>
|
|
<select class="form-select" name="semester" required>
|
|
<option value="">Pilih Semester</option>
|
|
<option value="1">Semester 1</option>
|
|
<option value="2">Semester 2</option>
|
|
<option value="3">Semester 3</option>
|
|
<option value="4">Semester 4</option>
|
|
<option value="5">Semester 5</option>
|
|
<option value=">6">Lebih dari Semester 6</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label>Pilih Range IPK</label>
|
|
<select class="form-select" name="ipk" required>
|
|
<option value="">Pilih IPK</option>
|
|
<option value="< 2.75">Kurang dari 2.75</option>
|
|
<option value="2.75 - 3.00">2.75 - 3.00</option>
|
|
<option value="3.00 - 3.50">3.00 - 3.50</option>
|
|
<option value="> 3.50">Lebih dari 3.50</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="form-group">
|
|
<label>Upload KHS Terbaru (PDF, Maksimal 1.5MB)</label>
|
|
<input type="file" id="file_khs" name="file_khs" class="form-control" accept=".pdf" required>
|
|
<div class="file-name text-muted mt-1" id="file_khs-name"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dokumen Tambahan -->
|
|
<div class="card mb-3">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 text-dark fw-bold text-start">Dokumen Pendukung Tambahan</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="form-group">
|
|
<label>Dokumen Pendukung Lainnya (Opsional)</label>
|
|
<div class="file-custom">
|
|
<i class="fas fa-cloud-upload-alt me-2"></i>
|
|
<span>Pilih File (PDF, max 1.5MB)</span>
|
|
<input type="file" id="file_pendukung" name="file_pendukung" class="file-input" accept=".pdf">
|
|
</div>
|
|
<div class="file-name text-muted mt-1" id="file_pendukung-name"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alasan Pengajuan -->
|
|
<div class="card mb-3">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0 text-dark fw-bold text-start">
|
|
<i class="fas fa-comment me-2 text-dark me-2"></i> Alasan Pengajuan
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<label for="alasan_pengajuan">Alasan Mengajukan Pengangsuran UKT *</label>
|
|
<textarea name="alasan_pengajuan" class="form-control" rows="4" required
|
|
placeholder="Jelaskan alasan Anda mengajukan penurunan UKT"></textarea>
|
|
<small class="text-muted">
|
|
Contoh: Saya mengalami kesulitan keuangan karena orang tua terkena PHK. </small>
|
|
</div>
|
|
|
|
<div class="alert alert-info mt-3">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
Pengajuan Pengangsuran UKT Berlaku Untuk 1 Semester Berjalan Dan Akan Kembali Default Pada UKT Awal Di Semester Berikutnya.
|
|
Pembayaran Dilakukan Selama 2x Periode Sebelum UTS.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Deklarasi -->
|
|
<div class="declaration-check">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="declaration" required>
|
|
<label class="form-check-label" for="declaration">
|
|
<strong>Saya menyatakan bahwa semua data dan dokumen yang saya berikan adalah asli.</strong>
|
|
Saya memahami bahwa jika terdapat ketidaksesuaian data, pengajuan saya dapat dibatalkan.
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<button type="submit" class="btn btn-submit w-100 mt-4" id="submitBtn">
|
|
<i class="fas fa-paper-plane me-2"></i>Kirim Pengajuan
|
|
</button>
|
|
|
|
<div class="loading-spinner" id="loadingSpinner">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<p class="mt-2">Mohon tunggu, formulir sedang dikirim...</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Format input UKT
|
|
document.getElementById('ukt-input').addEventListener('input', function(e) {
|
|
let value = e.target.value.replace(/\./g, '');
|
|
if (!isNaN(value)) {
|
|
e.target.value = new Intl.NumberFormat('id-ID').format(value);
|
|
}
|
|
});
|
|
|
|
// Fungsi untuk menampilkan nama file
|
|
function handleFileInputChange(event) {
|
|
const input = event.target;
|
|
const fileNameContainer = document.getElementById(input.id + '-name');
|
|
const file = input.files[0];
|
|
|
|
if (file) {
|
|
const fileSizeMB = (file.size / (1024 * 1024)).toFixed(2);
|
|
const iconCheck = '<i class="fas fa-check-circle text-success me-1"></i>';
|
|
|
|
if (file.size > 1.5 * 1024 * 1024) {
|
|
alert('Ukuran file maksimal 1.5MB!');
|
|
input.value = '';
|
|
fileNameContainer.innerHTML = '';
|
|
fileNameContainer.classList.remove('text-success');
|
|
fileNameContainer.classList.add('text-danger');
|
|
fileNameContainer.innerHTML = '<i class="fas fa-times-circle text-danger me-1"></i>File terlalu besar (>1.5MB)';
|
|
return;
|
|
}
|
|
|
|
fileNameContainer.classList.remove('text-danger');
|
|
fileNameContainer.classList.add('text-success');
|
|
fileNameContainer.innerHTML = `${iconCheck}${file.name} (${fileSizeMB} MB)`;
|
|
} else {
|
|
fileNameContainer.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
// Pasang event listener ke semua input file
|
|
const fileInputs = document.querySelectorAll('.file-input');
|
|
fileInputs.forEach(input => {
|
|
input.addEventListener('change', handleFileInputChange);
|
|
});
|
|
|
|
const kendaraanSelect = document.querySelector('select[name="kendaraan"]');
|
|
const fileKendaraan = document.getElementById('file_kendaraan');
|
|
|
|
if (kendaraanSelect && fileKendaraan) {
|
|
kendaraanSelect.addEventListener('change', function () {
|
|
if (this.value === 'Tidak Punya') {
|
|
fileKendaraan.required = false;
|
|
document.getElementById('file_kendaraan-name').innerHTML = '';
|
|
} else {
|
|
fileKendaraan.required = true;
|
|
}
|
|
});
|
|
|
|
if (kendaraanSelect.value === 'Tidak Punya') {
|
|
fileKendaraan.required = false;
|
|
} else {
|
|
fileKendaraan.required = true;
|
|
}
|
|
}
|
|
|
|
// Form submission dengan AJAX
|
|
const form = document.getElementById('pengajuanForm');
|
|
if (form) {
|
|
form.addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
// Validasi deklarasi
|
|
const declaration = document.getElementById('declaration');
|
|
if (!declaration.checked) {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
text: 'Anda harus menyetujui deklarasi sebelum mengirimkan formulir'
|
|
});
|
|
declaration.scrollIntoView({ behavior: 'smooth' });
|
|
return;
|
|
}
|
|
|
|
// Validasi file upload
|
|
let allFilesValid = true;
|
|
document.querySelectorAll('input[type="file"][required]').forEach(input => {
|
|
if (!input.files || input.files.length === 0) {
|
|
allFilesValid = false;
|
|
const nameContainer = document.getElementById(input.id + '-name');
|
|
if (nameContainer) {
|
|
nameContainer.classList.remove('text-success');
|
|
nameContainer.classList.add('text-danger');
|
|
nameContainer.innerHTML = '<i class="fas fa-times-circle text-danger me-1"></i>File wajib diunggah';
|
|
}
|
|
}
|
|
});
|
|
|
|
if (!allFilesValid) {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
text: 'Silakan lengkapi semua dokumen yang wajib diunggah'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Loading spinner
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
const loadingSpinner = document.getElementById('loadingSpinner');
|
|
if (submitBtn) submitBtn.disabled = true;
|
|
if (loadingSpinner) loadingSpinner.style.display = 'block';
|
|
|
|
// Prepare form data
|
|
const formData = new FormData(form);
|
|
|
|
// Konversi UKT ke angka polos sebelum dikirim
|
|
const uktValue = document.getElementById('ukt-input').value;
|
|
formData.set('ukt_saat_ini', uktValue.replace(/\./g, ''));
|
|
|
|
try {
|
|
const response = await fetch(form.action, {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
|
'Accept': 'application/json'
|
|
}
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Sukses!',
|
|
text: data.message,
|
|
confirmButtonText: 'OK'
|
|
}).then(() => {
|
|
window.location.href = data.redirect;
|
|
});
|
|
} else {
|
|
throw new Error(data.message);
|
|
}
|
|
} catch (error) {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
text: error.message || 'Terjadi kesalahan saat mengirim pengajuan'
|
|
});
|
|
} finally {
|
|
if (submitBtn) submitBtn.disabled = false;
|
|
if (loadingSpinner) loadingSpinner.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endsection |