212 lines
8.8 KiB
PHP
212 lines
8.8 KiB
PHP
@extends('admin.layouts.app')
|
|
@section('title', 'Tambah Periode Seleksi')
|
|
|
|
@section('content')
|
|
|
|
{{-- Page Header --}}
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<div>
|
|
<h5 class="fw-bold mb-0" style="color:#1a3c2e;">
|
|
<i class="bi bi-calendar-plus me-2" style="color:#2d7a4f;"></i>Tambah Periode Seleksi
|
|
</h5>
|
|
<nav aria-label="breadcrumb" class="mt-1">
|
|
<ol class="breadcrumb mb-0" style="font-size:0.8rem;">
|
|
<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}" class="text-decoration-none" style="color:#2d7a4f;">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{{ route('admin.periode.index') }}" class="text-decoration-none" style="color:#2d7a4f;">Periode Seleksi</a></li>
|
|
<li class="breadcrumb-item active text-muted">Tambah</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
<a href="{{ route('admin.periode.index') }}" class="btn btn-outline-secondary btn-sm">
|
|
<i class="bi bi-arrow-left me-1"></i>Kembali
|
|
</a>
|
|
</div>
|
|
|
|
{{-- Form Card --}}
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span><i class="bi bi-pencil-square me-2"></i>Form Data Periode</span>
|
|
<span class="badge" style="background:#e0f2e9; color:#2d7a4f; font-size:0.75rem;">
|
|
<i class="bi bi-asterisk me-1"></i>Wajib diisi
|
|
</span>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
|
|
@if($errors->any())
|
|
<div class="alert alert-danger d-flex align-items-start gap-2">
|
|
<i class="bi bi-exclamation-circle-fill mt-1"></i>
|
|
<div>
|
|
<strong>Terdapat kesalahan input:</strong>
|
|
<ul class="mb-0 mt-1 ps-3">
|
|
@foreach($errors->all() as $e)
|
|
<li>{{ $e }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('admin.periode.store') }}">
|
|
@csrf
|
|
|
|
{{-- Tanggal --}}
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-semibold">
|
|
Tanggal Mulai <span class="text-danger">*</span>
|
|
</label>
|
|
<input
|
|
type="date"
|
|
id="tanggal_mulai"
|
|
name="tanggal_mulai"
|
|
class="form-control @error('tanggal_mulai') is-invalid @enderror"
|
|
value="{{ old('tanggal_mulai') }}"
|
|
required>
|
|
@error('tanggal_mulai')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-semibold">
|
|
Tanggal Selesai <span class="text-danger">*</span>
|
|
</label>
|
|
<input
|
|
type="date"
|
|
id="tanggal_selesai"
|
|
name="tanggal_selesai"
|
|
class="form-control @error('tanggal_selesai') is-invalid @enderror"
|
|
value="{{ old('tanggal_selesai') }}"
|
|
required>
|
|
@error('tanggal_selesai')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Nama Periode (Otomatis) --}}
|
|
<div class="mb-4">
|
|
<label class="form-label fw-semibold">
|
|
Nama Periode <span class="badge bg-info text-dark"><i class="bi bi-magic me-1"></i>Otomatis</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="nama"
|
|
id="nama_periode"
|
|
class="form-control @error('nama') is-invalid @enderror"
|
|
value="{{ old('nama') }}"
|
|
required>
|
|
<div class="form-text text-muted"><i class="bi bi-info-circle me-1"></i>Nama otomatis dari tanggal mulai. Anda tetap bisa mengubahnya.</div>
|
|
@error('nama')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
{{-- Kuota & Status --}}
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-semibold">
|
|
Kuota Penerima <span class="text-danger">*</span>
|
|
</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-people-fill"></i></span>
|
|
<input
|
|
type="number"
|
|
name="kuota_penerima"
|
|
class="form-control @error('kuota_penerima') is-invalid @enderror"
|
|
placeholder="cth: 12"
|
|
min="1"
|
|
value="{{ old('kuota_penerima') }}"
|
|
required>
|
|
<span class="input-group-text text-muted">orang</span>
|
|
@error('kuota_penerima')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-semibold">
|
|
Kuota Cadangan
|
|
<span class="text-muted" style="font-size:0.8rem;">(opsional)</span>
|
|
</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-person-plus"></i></span>
|
|
<input
|
|
type="number"
|
|
name="kuota_cadangan"
|
|
class="form-control @error('kuota_cadangan') is-invalid @enderror"
|
|
placeholder="default: 5"
|
|
min="0"
|
|
value="{{ old('kuota_cadangan', 5) }}">
|
|
<span class="input-group-text text-muted">orang</span>
|
|
@error('kuota_cadangan')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
<div class="form-text text-muted">Warga ranking berikutnya yang masuk daftar cadangan.</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-semibold">
|
|
Status
|
|
</label>
|
|
<input type="text" class="form-control bg-light" value="Aktif" readonly disabled>
|
|
<input type="hidden" name="status" value="aktif">
|
|
<div class="form-text text-muted">Periode baru otomatis berstatus Aktif.</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Divider --}}
|
|
<hr class="my-4" style="border-color:#e5ede8;">
|
|
|
|
{{-- Action Buttons --}}
|
|
<div class="d-flex align-items-center gap-2">
|
|
<button type="submit" class="btn btn-primary px-4">
|
|
<i class="bi bi-save me-2"></i>Simpan Periode
|
|
</button>
|
|
<a href="{{ route('admin.periode.index') }}" class="btn btn-outline-secondary">
|
|
<i class="bi bi-x-circle me-1"></i>Batal
|
|
</a>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
const bulanIndo = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
|
|
let namaManualEdited = false;
|
|
|
|
function generateNamaPeriode() {
|
|
if (namaManualEdited) return;
|
|
const mulai = document.getElementById('tanggal_mulai').value;
|
|
const namaField = document.getElementById('nama_periode');
|
|
|
|
if (mulai) {
|
|
const d = new Date(mulai);
|
|
namaField.value = 'BLT-DD ' + bulanIndo[d.getMonth()] + ' ' + d.getFullYear();
|
|
}
|
|
}
|
|
|
|
document.getElementById('tanggal_mulai').addEventListener('change', function() {
|
|
namaManualEdited = false;
|
|
generateNamaPeriode();
|
|
});
|
|
document.getElementById('tanggal_selesai').addEventListener('change', generateNamaPeriode);
|
|
|
|
document.getElementById('nama_periode').addEventListener('input', function() {
|
|
namaManualEdited = true;
|
|
});
|
|
|
|
// Generate on page load if old values exist and nama is empty
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (!document.getElementById('nama_periode').value) {
|
|
generateNamaPeriode();
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|
|
|
|
@endsection |