282 lines
13 KiB
PHP
282 lines
13 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('title', 'Home')
|
|
|
|
@push('styles')
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
|
|
<style>
|
|
.soft-card {
|
|
border: 0;
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
|
|
}
|
|
|
|
.form-control::placeholder {
|
|
color: #9ca3af
|
|
}
|
|
|
|
.soft-card {
|
|
/* ...existing styles... */
|
|
}
|
|
|
|
.form-control::placeholder {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.btn-simpan {
|
|
background: #0f766e;
|
|
color: #fff
|
|
}
|
|
|
|
.btn-simpan:hover {
|
|
background: #0f766e;
|
|
color: #fff;
|
|
opacity: .9;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@php
|
|
$jabatanOptions = [
|
|
'Kepala Desa',
|
|
'Sekretaris',
|
|
'Kasi 1',
|
|
'Kasi 2',
|
|
'Kasi 3',
|
|
'Kaur 1',
|
|
'Kaur 2',
|
|
'Kadus 1',
|
|
'Kadus 1',
|
|
];
|
|
@endphp
|
|
|
|
@section('content')
|
|
<div class="card soft-card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div>
|
|
<h4 class="mb-0">Tambah Anggota Perangat Desa</h4>
|
|
<small style="color: #0f766e">Anggota aktif</small>
|
|
</div>
|
|
<a href="{{ route('admin.perangkat') }}" class="btn btn-light border">Kembali</a>
|
|
</div>
|
|
|
|
<form action="{{ route('admin.perangkat.store') }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
<div class="row g-3">
|
|
<div class="col-12 col-md-2">NIK</div>
|
|
<div class="col-12 col-md-10">
|
|
<input type="text" class="form-control @error('nik') is-invalid @enderror" name="nik"
|
|
placeholder="NIK" value="{{ old('nik') }}">
|
|
@error('nik')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="col-12 col-md-2">Role</div>
|
|
<div class="col-12 col-md-10">
|
|
<select class="form-select @error('role') is-invalid @enderror" name="role">
|
|
<option value="" selected disabled>Pilih role</option>
|
|
<option value="admin" {{ old('role') === 'admin' ? 'selected' : '' }}>Admin</option>
|
|
<option value="user" {{ old('role') === 'user' ? 'selected' : '' }}>User</option>
|
|
</select>
|
|
@error('role')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="col-12 col-md-2">Jabatan</div>
|
|
<div class="col-12 col-md-10">
|
|
<select class="form-select @error('jabatan') is-invalid @enderror" name="jabatan">
|
|
<option value="" selected disabled>Jabatan</option>
|
|
@foreach ($jabatanOptions as $opt)
|
|
<option value="{{ $opt }}" {{ old('jabatan') === $opt ? 'selected' : '' }}>
|
|
{{ $opt }}</option>
|
|
@endforeach
|
|
</select>
|
|
@error('jabatan')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="col-12 col-md-2">Nama</div>
|
|
<div class="col-12 col-md-10">
|
|
<input type="text" class="form-control @error('name') is-invalid @enderror" name="name"
|
|
placeholder="Nama" value="{{ old('name') }}">
|
|
@error('name')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="col-12 col-md-2">Alamat</div>
|
|
<div class="col-12 col-md-10">
|
|
<input type="text" class="form-control @error('address') is-invalid @enderror" name="address"
|
|
placeholder="Alamat" value="{{ old('address') }}">
|
|
@error('address')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="col-12 col-md-2">ID Pegawai</div>
|
|
<div class="col-12 col-md-10">
|
|
<input type="text" class="form-control @error('employee_id') is-invalid @enderror"
|
|
name="employee_id" placeholder="ID Pegawai" value="{{ old('employee_id') }}">
|
|
@error('employee_id')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="col-12 col-md-2">No. Telepon</div>
|
|
<div class="col-12 col-md-10">
|
|
<input type="number" class="form-control @error('phone') is-invalid @enderror" name="phone"
|
|
placeholder="No. Telepon" value="{{ old('phone') }}">
|
|
@error('phone')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="col-12 col-md-2">Jenis Kelamin</div>
|
|
<div class="col-12 col-md-10">
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input @error('jenis_kelamin') is-invalid @enderror"
|
|
type="radio" name="jenis_kelamin" id="jkL" value="Laki-laki"
|
|
{{ old('jenis_kelamin') === 'Laki-laki' ? 'checked' : '' }}>
|
|
<label class="form-check-label" for="jkL">Laki-laki</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
|
|
<input class="form-check-input @error('jenis_kelamin') is-invalid @enderror"
|
|
type="radio" name="jenis_kelamin" id="jkP" value="Perempuan"
|
|
{{ old('jenis_kelamin') === 'Perempuan' ? 'checked' : '' }}>
|
|
<label class="form-check-label" for="jkP">Perempuan</label>
|
|
</div>
|
|
@error('jenis_kelamin')
|
|
<div class="invalid-feedback d-block">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="col-12 col-md-2">Tempat Lahir</div>
|
|
<div class="col-12 col-md-10"><input type="text" name="tempat_lahir"
|
|
class="form-control @error('tempat_lahir') is-invalid @enderror"
|
|
placeholder="Tempat Lahir" value="{{ old('tempat_lahir') }}">
|
|
@error('tempat_lahir')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-12 col-md-2">Tanggal Lahir</div>
|
|
<div class="col-12 col-md-10">
|
|
<div class="input-group">
|
|
<input type="text" name="tanggal_lahir"
|
|
class="form-control date-picker @error('tanggal_lahir') is-invalid @enderror"
|
|
placeholder="dd/mm/yyyy" value="{{ old('tanggal_lahir') }}">
|
|
<span class="input-group-text bg-white"><i class="ti ti-calendar"></i></span>
|
|
</div>
|
|
@error('tanggal_lahir')
|
|
<div class="invalid-feedback d-block">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="col-12 col-md-2">Tanggal Diterima Kerja</div>
|
|
<div class="col-12 col-md-10">
|
|
<div class="input-group">
|
|
<input type="text" name="hire_date"
|
|
class="form-control date-picker @error('hire_date') is-invalid @enderror"
|
|
placeholder="dd/mm/yyyy" value="{{ old('hire_date') }}">
|
|
<span class="input-group-text bg-white"><i class="ti ti-calendar"></i></span>
|
|
</div>
|
|
@error('hire_date')
|
|
<div class="invalid-feedback d-block">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
|
|
<div class="col-12 col-md-2">E-mail</div>
|
|
<div class="col-12 col-md-10"><input type="email" name="email"
|
|
class="form-control @error('email') is-invalid @enderror" placeholder="E-mail"
|
|
value="{{ old('email') }}">
|
|
@error('email')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="col-12 col-md-2">Kata Sandi</div>
|
|
<div class="col-12 col-md-10">
|
|
<input type="password" name="password"
|
|
class="form-control @error('password') is-invalid @enderror" placeholder="Kata Sandi">
|
|
@error('password')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="col-12 col-md-2">Konfirmasi Kata Sandi</div>
|
|
<div class="col-12 col-md-10">
|
|
<input type="password" name="password_confirmation"
|
|
class="form-control @error('password_confirmation') is-invalid @enderror"
|
|
placeholder="Ulangi Kata Sandi">
|
|
@error('password_confirmation')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
|
|
<div class="col-12 col-md-2">Foto</div>
|
|
<div class="col-12 col-md-10">
|
|
<div class="mb-2" id="fotoPreviewWrapper" style="display:none;">
|
|
<img id="fotoPreview" src="" alt="Preview foto"
|
|
style="height:64px;border-radius:8px">
|
|
</div>
|
|
<input id="fotoInput" class="form-control @error('foto') is-invalid @enderror" type="file"
|
|
name="foto" accept="image/*">
|
|
<small class="text-muted d-block mt-1">Format file gambar (jpg, jpeg, png, webp), maksimal
|
|
2MB.</small>
|
|
@error('foto')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-4">
|
|
<button class="btn btn-simpan px-5">Tambahkan</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
flatpickr('.date-picker', {
|
|
dateFormat: 'd/m/Y',
|
|
allowInput: true,
|
|
locale: {
|
|
firstDayOfWeek: 1 // Senin sebagai hari pertama
|
|
}
|
|
});
|
|
|
|
const fotoInput = document.getElementById('fotoInput');
|
|
const fotoPreview = document.getElementById('fotoPreview');
|
|
const fotoPreviewWrapper = document.getElementById('fotoPreviewWrapper');
|
|
|
|
if (fotoInput && fotoPreview && fotoPreviewWrapper) {
|
|
fotoInput.addEventListener('change', function(e) {
|
|
const file = e.target.files?.[0];
|
|
if (!file || !file.type.startsWith('image/')) {
|
|
return;
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = function(evt) {
|
|
fotoPreview.src = evt.target?.result;
|
|
fotoPreviewWrapper.style.display = 'block';
|
|
};
|
|
reader.readAsDataURL(file);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|