428 lines
20 KiB
PHP
428 lines
20 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Pembuatan Formulir UKT Baru')
|
|
|
|
@section('content')
|
|
<div class="container-fluid py-5">
|
|
<!-- Notification Alerts -->
|
|
@if(session('success'))
|
|
<div class="alert alert-success alert-dismissible fade show d-flex align-items-center" role="alert">
|
|
<i class="bi bi-check-circle-fill fs-4 me-3"></i>
|
|
<div>
|
|
<h5 class="alert-heading mb-1">Berhasil!</h5>
|
|
<p class="mb-0">{{ session('success') }}</p>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
<div class="alert alert-danger alert-dismissible fade show d-flex align-items-center" role="alert">
|
|
<i class="bi bi-exclamation-triangle-fill fs-4 me-3"></i>
|
|
<div>
|
|
<h5 class="alert-heading mb-1">Terjadi Kesalahan!</h5>
|
|
<p class="mb-0">{{ session('error') }}</p>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Main Card -->
|
|
<div class="card border-0 shadow-lg rounded-4 overflow-hidden mx-auto" style="max-width: 1200px;">
|
|
<!-- Card Header -->
|
|
<div class="card-header bg-gradient-teal text-white py-4">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h2 class="h4 mb-0 fw-bold">Buat Form UKT Baru</h2>
|
|
</div>
|
|
<a href="{{ route('form.pendaftaran') }}" class="btn btn-light btn-sm rounded-pill px-3">
|
|
<i class="bi bi-arrow-left me-1"></i> Kembali
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Body -->
|
|
<div class="card-body p-5">
|
|
<form action="{{ route('form.store') }}" method="POST" class="needs-validation" novalidate>
|
|
@csrf
|
|
|
|
<div class="row g-4">
|
|
<!-- Section 1: Basic Information -->
|
|
<div class="col-12">
|
|
<h5 class="fw-bold text-teal mb-3">Informasi Dasar Formulir</h5>
|
|
</div>
|
|
|
|
<!-- Nama Formulir -->
|
|
<div class="col-md-6">
|
|
<label for="nama_form" class="form-label fw-bold text-dark">Nama Formulir <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control @error('nama_form') is-invalid @enderror"
|
|
id="nama_form" name="nama_form" placeholder="Contoh: Form UKT Semester Ganjil 2023" required
|
|
value="{{ old('nama_form') }}">
|
|
<div class="invalid-feedback">
|
|
@error('nama_form') {{ $message }} @else Nama form wajib diisi @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Jenis Formulir -->
|
|
<div class="col-md-6">
|
|
<label for="jenis_form" class="form-label fw-bold text-dark">Jenis Formulir <span class="text-danger">*</span></label>
|
|
<select class="form-control @error('jenis_form') is-invalid @enderror"
|
|
id="jenis_form" name="jenis_form" required>
|
|
<option value="" selected disabled>Pilih Jenis Formulir</option>
|
|
<option value="penurunan" @selected(old('jenis_form') == 'penurunan')>Penurunan UKT</option>
|
|
<option value="pengangsuran" @selected(old('jenis_form') == 'pengangsuran')>Pengangsuran UKT</option>
|
|
</select>
|
|
<div class="invalid-feedback">
|
|
@error('jenis_form') {{ $message }} @else Jenis form wajib dipilih @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Semester -->
|
|
<div class="col-md-6">
|
|
<label for="semester" class="form-label fw-bold text-dark">Semester <span class="text-danger">*</span></label>
|
|
<select class="form-control @error('semester') is-invalid @enderror"
|
|
id="semester" name="semester" required>
|
|
<option value="" selected disabled>Pilih Semester</option>
|
|
<option value="Ganjil" @selected(old('semester') == 'Ganjil')>Ganjil</option>
|
|
<option value="Genap" @selected(old('semester') == 'Genap')>Genap</option>
|
|
</select>
|
|
<div class="invalid-feedback">
|
|
@error('semester') {{ $message }} @else Semester wajib dipilih @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tahun -->
|
|
<div class="col-md-6">
|
|
<label for="tahun" class="form-label fw-bold text-dark">Tahun <span class="text-danger">*</span></label>
|
|
<select class="form-control @error('tahun') is-invalid @enderror"
|
|
id="tahun" name="tahun" required>
|
|
<option value="" selected disabled>Pilih Tahun</option>
|
|
@for($year = 2020; $year <= 2035; $year++)
|
|
<option value="{{ $year }}" @selected(old('tahun') == $year)>{{ $year }}</option>
|
|
@endfor
|
|
</select>
|
|
<div class="invalid-feedback">
|
|
@error('tahun') {{ $message }} @else Tahun wajib dipilih @enderror
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Section 2: Timeline -->
|
|
<div class="col-12 mt-4">
|
|
<h5 class="fw-bold text-teal mb-3">Timeline Formulir</h5>
|
|
<div class="alert alert-info">
|
|
Pastikan urutan tanggal sesuai: Pembukaan → Penutupan → Verifikasi → Pengumuman
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timeline Cards -->
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-header bg-light-primary border-bottom-0">
|
|
<h6 class="mb-0 fw-bold text-dark">Periode Pendaftaran</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Tanggal Pembukaan -->
|
|
<div class="mb-3">
|
|
<label for="tanggal_pembukaan" class="form-label fw-bold text-dark">Tanggal Pembukaan <span class="text-danger">*</span></label>
|
|
<input type="date" class="form-control @error('tanggal_pembukaan') is-invalid @enderror"
|
|
id="tanggal_pembukaan" name="tanggal_pembukaan" required
|
|
value="{{ old('tanggal_pembukaan') }}">
|
|
<div class="invalid-feedback">
|
|
@error('tanggal_pembukaan') {{ $message }} @else Tanggal pembukaan wajib diisi @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tanggal Penutupan -->
|
|
<div class="mb-3">
|
|
<label for="tanggal_penutupan" class="form-label fw-bold text-dark">Tanggal Penutupan <span class="text-danger">*</span></label>
|
|
<input type="date" class="form-control @error('tanggal_penutupan') is-invalid @enderror"
|
|
id="tanggal_penutupan" name="tanggal_penutupan" required
|
|
value="{{ old('tanggal_penutupan') }}">
|
|
<div class="invalid-feedback">
|
|
@error('tanggal_penutupan') {{ $message }} @else Tanggal penutupan wajib diisi @enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-header bg-light-primary border-bottom-0">
|
|
<h6 class="mb-0 fw-bold text-dark">Proses Verifikasi & Hasil</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Tanggal Verifikasi -->
|
|
<div class="mb-3">
|
|
<label for="tanggal_verifikasi" class="form-label fw-bold text-dark">Tanggal Verifikasi <span class="text-danger">*</span></label>
|
|
<input type="date" class="form-control @error('tanggal_verifikasi') is-invalid @enderror"
|
|
id="tanggal_verifikasi" name="tanggal_verifikasi" required
|
|
value="{{ old('tanggal_verifikasi') }}">
|
|
<div class="invalid-feedback">
|
|
@error('tanggal_verifikasi') {{ $message }} @else Tanggal verifikasi wajib diisi @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tanggal Pengumuman -->
|
|
<div class="mb-3">
|
|
<label for="tanggal_pengumuman" class="form-label fw-bold text-dark">Tanggal Pengumuman <span class="text-danger">*</span></label>
|
|
<input type="date" class="form-control @error('tanggal_pengumuman') is-invalid @enderror"
|
|
id="tanggal_pengumuman" name="tanggal_pengumuman" required
|
|
value="{{ old('tanggal_pengumuman') }}">
|
|
<div class="invalid-feedback">
|
|
@error('tanggal_pengumuman') {{ $message }} @else Tanggal pengumuman wajib diisi @enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 3: Kuota Information -->
|
|
<div class="col-12 mt-4">
|
|
<h5 class="fw-bold text-teal mb-3">Pengaturan Kuota</h5>
|
|
</div>
|
|
|
|
<!-- Kuota -->
|
|
<div class="col-md-6">
|
|
<label for="kuota" class="form-label fw-bold text-dark">Kuota <span class="text-danger">*</span></label>
|
|
@if(auth()->user()->role == 'admin')
|
|
<input type="number" class="form-control @error('kuota') is-invalid @enderror"
|
|
id="kuota" name="kuota" min="0"
|
|
placeholder="Masukkan jumlah kuota" required
|
|
value="{{ old('kuota', 0) }}">
|
|
<div class="invalid-feedback">
|
|
@if ($errors->has('kuota'))
|
|
{{ $errors->first('kuota') }}
|
|
@else
|
|
Kuota wajib diisi
|
|
@endif
|
|
</div>
|
|
<small class="text-muted">Masukkan jumlah kuota untuk formulir ini</small>
|
|
@else
|
|
<input type="number" class="form-control"
|
|
id="kuota" name="kuota" min="0"
|
|
placeholder="0" value="0" readonly>
|
|
<small class="text-muted">Kuota hanya dapat diinput oleh admin</small>
|
|
@endif
|
|
<input type="hidden" id="kuota_pengangsuran" name="kuota_pengangsuran" value="0">
|
|
<input type="hidden" id="kuota_penurunan" name="kuota_penurunan" value="0">
|
|
</div>
|
|
|
|
<!-- Form Preview -->
|
|
<div class="col-md-6">
|
|
<div class="card border-0 bg-light-primary p-4 h-100">
|
|
<label class="form-label fw-bold mb-3 text-dark">Preview Formulir</label>
|
|
<div class="bg-white rounded-3 p-3 border">
|
|
<h6 class="fw-bold mb-1" id="preview-name">{{ old('nama_form') ?: 'Nama Formulir' }}</h6>
|
|
<div class="d-flex gap-3 mb-2">
|
|
<small class="text-muted">
|
|
Jenis: <span id="preview-jenis">{{ old('jenis_form') ? ucfirst(old('jenis_form')) : 'Belum dipilih' }}</span>
|
|
</small>
|
|
<small class="text-muted">
|
|
Kuota: <span id="preview-kuota">{{ old('kuota', 0) }}</span>
|
|
</small>
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-success">
|
|
<span class="text-white">Aktif</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 4: Status -->
|
|
<div class="col-12 mt-4">
|
|
<h5 class="fw-bold text-teal mb-3">Status Formulir</h5>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch"
|
|
id="status" name="status" @checked(old('status', true))>
|
|
<label class="form-check-label fw-medium" for="status">
|
|
<span id="status-label">Aktif</span>
|
|
</label>
|
|
</div>
|
|
<small class="text-muted">
|
|
Formulir dapat dibuka/ditutup melalui menu Form Pendaftaran
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="d-flex justify-content-end mt-5 gap-3">
|
|
<button type="reset" class="btn btn-outline-secondary px-4 rounded-pill">
|
|
Reset Form
|
|
</button>
|
|
<button type="submit" class="btn btn-teal px-4 rounded-pill">
|
|
Simpan Formulir
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Form validation
|
|
(function () {
|
|
'use strict'
|
|
var forms = document.querySelectorAll('.needs-validation')
|
|
Array.prototype.slice.call(forms).forEach(function (form) {
|
|
form.addEventListener('submit', function (event) {
|
|
if (!form.checkValidity()) {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
}
|
|
form.classList.add('was-validated')
|
|
}, false)
|
|
})
|
|
})();
|
|
|
|
// Status switch toggle
|
|
const statusSwitch = document.getElementById('status');
|
|
const statusLabel = document.getElementById('status-label');
|
|
statusSwitch.addEventListener('change', function() {
|
|
statusLabel.textContent = this.checked ? 'Aktif' : 'Tidak Aktif';
|
|
});
|
|
|
|
// Preview updates
|
|
const nameInput = document.getElementById('nama_form');
|
|
const jenisFormInput = document.getElementById('jenis_form');
|
|
const kuotaInput = document.getElementById('kuota');
|
|
|
|
const previewName = document.getElementById('preview-name');
|
|
const previewJenis = document.getElementById('preview-jenis');
|
|
const previewKuota = document.getElementById('preview-kuota');
|
|
const kuotaPengangsuran = document.getElementById('kuota_pengangsuran');
|
|
const kuotaPenurunan = document.getElementById('kuota_penurunan');
|
|
|
|
nameInput.addEventListener('input', function() {
|
|
previewName.textContent = this.value || 'Nama Formulir';
|
|
});
|
|
|
|
jenisFormInput.addEventListener('change', function() {
|
|
previewJenis.textContent = this.value ? this.options[this.selectedIndex].text : 'Belum dipilih';
|
|
|
|
// Auto-set kuota based on jenis form
|
|
if (this.value === 'pengangsuran') {
|
|
kuotaPengangsuran.value = kuotaInput.value;
|
|
kuotaPenurunan.value = 0;
|
|
} else if (this.value === 'penurunan') {
|
|
kuotaPenurunan.value = kuotaInput.value;
|
|
kuotaPengangsuran.value = 0;
|
|
}
|
|
});
|
|
|
|
kuotaInput.addEventListener('input', function() {
|
|
previewKuota.textContent = this.value || '0';
|
|
|
|
// Update hidden fields based on jenis form
|
|
if (jenisFormInput.value === 'pengangsuran') {
|
|
kuotaPengangsuran.value = this.value;
|
|
} else if (jenisFormInput.value === 'penurunan') {
|
|
kuotaPenurunan.value = this.value;
|
|
}
|
|
});
|
|
|
|
// Date validation
|
|
const tanggalPembukaan = document.getElementById('tanggal_pembukaan');
|
|
const tanggalPenutupan = document.getElementById('tanggal_penutupan');
|
|
const tanggalVerifikasi = document.getElementById('tanggal_verifikasi');
|
|
const tanggalPengumuman = document.getElementById('tanggal_pengumuman');
|
|
|
|
function validateDates() {
|
|
if (tanggalPembukaan.value && tanggalPenutupan.value) {
|
|
if (new Date(tanggalPenutupan.value) <= new Date(tanggalPembukaan.value)) {
|
|
tanggalPenutupan.setCustomValidity('Tanggal penutupan harus setelah tanggal pembukaan');
|
|
} else {
|
|
tanggalPenutupan.setCustomValidity('');
|
|
}
|
|
}
|
|
|
|
if (tanggalPenutupan.value && tanggalVerifikasi.value) {
|
|
if (new Date(tanggalVerifikasi.value) <= new Date(tanggalPenutupan.value)) {
|
|
tanggalVerifikasi.setCustomValidity('Tanggal verifikasi harus setelah tanggal penutupan');
|
|
} else {
|
|
tanggalVerifikasi.setCustomValidity('');
|
|
}
|
|
}
|
|
|
|
if (tanggalVerifikasi.value && tanggalPengumuman.value) {
|
|
if (new Date(tanggalPengumuman.value) <= new Date(tanggalVerifikasi.value)) {
|
|
tanggalPengumuman.setCustomValidity('Tanggal pengumuman harus setelah tanggal verifikasi');
|
|
} else {
|
|
tanggalPengumuman.setCustomValidity('');
|
|
}
|
|
}
|
|
}
|
|
|
|
tanggalPembukaan.addEventListener('change', validateDates);
|
|
tanggalPenutupan.addEventListener('change', validateDates);
|
|
tanggalVerifikasi.addEventListener('change', validateDates);
|
|
tanggalPengumuman.addEventListener('change', validateDates);
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.container-fluid {
|
|
padding-left: 2rem;
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.bg-gradient-teal {
|
|
background: linear-gradient(135deg,rgb(0, 122, 153) 0%,rgb(30, 101, 94) 100%);
|
|
}
|
|
|
|
.bg-light-primary {
|
|
background-color: rgba(0, 150, 136, 0.08);
|
|
}
|
|
|
|
.text-teal {
|
|
color: #009688;
|
|
}
|
|
|
|
.btn-teal {
|
|
background-color: #009688;
|
|
border-color: #009688;
|
|
color: white;
|
|
}
|
|
|
|
.btn-teal:hover {
|
|
background-color: #00796B;
|
|
border-color: #00796B;
|
|
}
|
|
|
|
.form-control, .form-select {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.form-control:focus, .form-select:focus {
|
|
border-color: #009688;
|
|
box-shadow: 0 0 0 0.25rem rgba(0, 150, 136, 0.25);
|
|
}
|
|
|
|
.form-check-input:checked {
|
|
background-color: #009688;
|
|
border-color: #009688;
|
|
}
|
|
|
|
.form-switch .form-check-input:focus {
|
|
box-shadow: 0 0 0 0.25rem rgba(0, 150, 136, 0.25);
|
|
}
|
|
|
|
.rounded-4 {
|
|
border-radius: 1rem !important;
|
|
}
|
|
|
|
.card-header {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Disabled input style */
|
|
.form-control:disabled {
|
|
background-color: #f8f9fa;
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
@endsection |