419 lines
15 KiB
PHP
419 lines
15 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
|
|
@php
|
|
$isEditPenghuni = isset($penghuni) && $penghuni && isset($penghuni->id);
|
|
$isEditRumah = isset($rumah) && is_object($rumah);
|
|
@endphp
|
|
|
|
<div class="ep-wrapper">
|
|
|
|
{{-- HERO --}}
|
|
<div class="ep-hero">
|
|
<div class="ep-hero-icon">
|
|
<i class="fas {{ $isEditPenghuni ? 'fa-user-edit' : 'fa-home' }}"></i>
|
|
</div>
|
|
<div>
|
|
<div class="ep-hero-title">
|
|
{{ $isEditPenghuni ? 'Edit Data Penghuni' : 'Edit Data Rumah' }}
|
|
</div>
|
|
<div class="ep-hero-sub">
|
|
{{ $isEditPenghuni ? 'Perbarui informasi data penghuni' : 'Perbarui informasi data rumah' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ERROR --}}
|
|
@if ($errors->any())
|
|
<div class="ep-alert">
|
|
<i class="fas fa-exclamation-circle me-2"></i>
|
|
<ul class="mb-0 ps-3">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="ep-card">
|
|
|
|
{{-- ========================= --}}
|
|
{{-- FORM PENGHUNI --}}
|
|
{{-- ========================= --}}
|
|
@if($isEditPenghuni)
|
|
|
|
<div class="ep-card-header">
|
|
<div class="ep-card-header-icon"><i class="fas fa-user"></i></div>
|
|
<div>
|
|
<div class="ep-card-title">Informasi Penghuni</div>
|
|
<div class="ep-card-sub">Lengkapi semua field yang diperlukan</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form action="{{ route('penghuni.update', $penghuni->id) }}" method="POST" class="ep-form">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="ep-section-label">
|
|
<i class="fas fa-id-card me-1"></i> Data Pribadi
|
|
</div>
|
|
|
|
<div class="ep-grid-2">
|
|
<div class="ep-field">
|
|
<label class="ep-label"><i class="fas fa-user me-1"></i> Nama Lengkap</label>
|
|
<input type="text" name="nama" class="ep-input"
|
|
value="{{ old('nama', $penghuni->nama) }}" placeholder="Masukkan nama lengkap">
|
|
</div>
|
|
<div class="ep-field">
|
|
<label class="ep-label"><i class="fas fa-id-badge me-1"></i> No KTP</label>
|
|
<input type="text" name="no_ktp" class="ep-input"
|
|
value="{{ old('no_ktp', $penghuni->no_ktp) }}" placeholder="16 digit NIK">
|
|
</div>
|
|
<div class="ep-field">
|
|
<label class="ep-label"><i class="fas fa-envelope me-1"></i> Email</label>
|
|
<input type="email" name="email" class="ep-input"
|
|
value="{{ old('email', $penghuni->email) }}" placeholder="email@contoh.com">
|
|
</div>
|
|
<div class="ep-field">
|
|
<label class="ep-label"><i class="fas fa-phone me-1"></i> No HP</label>
|
|
<input type="text" name="telepon" class="ep-input"
|
|
value="{{ old('telepon', $penghuni->telepon) }}" placeholder="08xxxxxxxxxx">
|
|
</div>
|
|
<div class="ep-field ep-field--full">
|
|
<label class="ep-label"><i class="fas fa-map-marker-alt me-1"></i> Alamat</label>
|
|
<input type="text" name="alamat" class="ep-input"
|
|
value="{{ old('alamat', $penghuni->alamat) }}" placeholder="Alamat lengkap">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ep-section-label ep-section-label--mt">
|
|
<i class="fas fa-home me-1"></i> Data Hunian
|
|
</div>
|
|
|
|
<div class="ep-grid-2">
|
|
<div class="ep-field">
|
|
<label class="ep-label"><i class="fas fa-building me-1"></i> Pilih Rumah</label>
|
|
<select name="rumah_id" class="ep-input ep-select">
|
|
<option value="">-- Pilih Rumah --</option>
|
|
@foreach($rumahList as $r)
|
|
<option value="{{ $r->id }}"
|
|
{{ $penghuni->rumah_id == $r->id ? 'selected' : '' }}>
|
|
{{ $r->blok }} - {{ $r->no_rumah }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="ep-field">
|
|
<label class="ep-label"><i class="fas fa-toggle-on me-1"></i> Status</label>
|
|
<select name="status" class="ep-input ep-select">
|
|
<option value="Aktif" {{ $penghuni->status == 'Aktif' ? 'selected' : '' }}>Aktif</option>
|
|
<option value="Tidak Aktif" {{ $penghuni->status == 'Tidak Aktif' ? 'selected' : '' }}>Tidak Aktif</option>
|
|
</select>
|
|
</div>
|
|
<div class="ep-field">
|
|
<label class="ep-label"><i class="fas fa-house-user me-1"></i> Status Huni</label>
|
|
<select name="status_huni" id="statusHuni" class="ep-input ep-select">
|
|
<option value="Tetap" {{ $penghuni->status_huni == 'Tetap' ? 'selected' : '' }}>Tetap</option>
|
|
<option value="Kontrak" {{ $penghuni->status_huni == 'Kontrak' ? 'selected' : '' }}>Kontrak</option>
|
|
</select>
|
|
</div>
|
|
<div class="ep-field" id="tanggalKeluarField"
|
|
style="{{ $penghuni->status_huni == 'Kontrak' ? '' : 'display:none;' }}">
|
|
<label class="ep-label"><i class="fas fa-calendar-alt me-1"></i> Tanggal Keluar</label>
|
|
<input type="date" name="tanggal_keluar" class="ep-input"
|
|
value="{{ $penghuni->tanggal_keluar }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ep-footer">
|
|
<a href="{{ route('penghuni.index') }}" class="ep-btn-back">
|
|
<i class="fas fa-arrow-left me-1"></i> Kembali
|
|
</a>
|
|
<button type="submit" class="ep-btn-save">
|
|
<i class="fas fa-save me-1"></i> Simpan Perubahan
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
{{-- ========================= --}}
|
|
{{-- FORM RUMAH --}}
|
|
{{-- ========================= --}}
|
|
@elseif($isEditRumah)
|
|
|
|
<div class="ep-card-header">
|
|
<div class="ep-card-header-icon"><i class="fas fa-home"></i></div>
|
|
<div>
|
|
<div class="ep-card-title">Informasi Rumah</div>
|
|
<div class="ep-card-sub">Lengkapi semua field yang diperlukan</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form action="{{ route('admin.rumah.update', $rumah->id) }}" method="POST"
|
|
enctype="multipart/form-data" class="ep-form">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="ep-section-label">
|
|
<i class="fas fa-info-circle me-1"></i> Detail Rumah
|
|
</div>
|
|
|
|
<div class="ep-grid-2">
|
|
<div class="ep-field">
|
|
<label class="ep-label"><i class="fas fa-th me-1"></i> Blok</label>
|
|
<input type="text" name="blok" class="ep-input" value="{{ $rumah->blok }}" placeholder="Contoh: A, B, D32">
|
|
</div>
|
|
<div class="ep-field">
|
|
<label class="ep-label"><i class="fas fa-hashtag me-1"></i> No Rumah</label>
|
|
<input type="text" name="no_rumah" class="ep-input" value="{{ $rumah->no_rumah }}" placeholder="Nomor rumah">
|
|
</div>
|
|
<div class="ep-field">
|
|
<label class="ep-label"><i class="fas fa-toggle-on me-1"></i> Status</label>
|
|
<select name="status" class="ep-input ep-select">
|
|
<option value="Kosong" {{ $rumah->status == 'Kosong' ? 'selected' : '' }}>Kosong</option>
|
|
<option value="Terisi" {{ $rumah->status == 'Terisi' ? 'selected' : '' }}>Terisi</option>
|
|
</select>
|
|
</div>
|
|
<div class="ep-field">
|
|
<label class="ep-label"><i class="fas fa-ruler-combined me-1"></i> Luas Tanah (m²)</label>
|
|
<input type="number" name="luas_tanah" class="ep-input" value="{{ $rumah->luas_tanah }}" placeholder="0">
|
|
</div>
|
|
<div class="ep-field">
|
|
<label class="ep-label"><i class="fas fa-money-bill-wave me-1"></i> Harga</label>
|
|
<input type="number" name="harga" class="ep-input" value="{{ $rumah->harga }}" placeholder="0">
|
|
</div>
|
|
<div class="ep-field ep-field--full">
|
|
<label class="ep-label"><i class="fas fa-align-left me-1"></i> Keterangan</label>
|
|
<textarea name="keterangan" class="ep-input ep-textarea" rows="3"
|
|
placeholder="Keterangan tambahan...">{{ $rumah->keterangan }}</textarea>
|
|
</div>
|
|
<div class="ep-field ep-field--full">
|
|
<label class="ep-label"><i class="fas fa-camera me-1"></i> Foto Rumah</label>
|
|
@if($rumah->foto)
|
|
<img id="previewEdit" src="{{ asset('foto_rumah/'.$rumah->foto) }}"
|
|
class="ep-img-preview mb-2">
|
|
@endif
|
|
<input type="file" name="foto" id="fotoEdit" class="ep-input ep-file"
|
|
onchange="previewFoto(this)">
|
|
<div class="ep-file-hint">JPG, PNG maks. 2MB</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ep-footer">
|
|
<a href="{{ route('penghuni.index') }}" class="ep-btn-back">
|
|
<i class="fas fa-arrow-left me-1"></i> Kembali
|
|
</a>
|
|
<button type="submit" class="ep-btn-save">
|
|
<i class="fas fa-save me-1"></i> Simpan Perubahan
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
@endif
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
.ep-wrapper {
|
|
padding: 4px 0 40px;
|
|
}
|
|
|
|
/* HERO */
|
|
.ep-hero {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
background: linear-gradient(135deg, #064e3b 0%, #047857 55%, #10b981 100%);
|
|
border-radius: 16px;
|
|
padding: 24px 28px;
|
|
margin-bottom: 24px;
|
|
box-shadow: 0 4px 20px rgba(4,120,87,0.2);
|
|
}
|
|
|
|
.ep-hero-icon {
|
|
width: 48px; height: 48px;
|
|
background: rgba(255,255,255,0.15);
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
border-radius: 13px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 20px; color: #fff; flex-shrink: 0;
|
|
}
|
|
|
|
.ep-hero-title {
|
|
font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 3px;
|
|
}
|
|
|
|
.ep-hero-sub {
|
|
font-size: 13px; color: rgba(255,255,255,0.7);
|
|
}
|
|
|
|
/* ALERT */
|
|
.ep-alert {
|
|
display: flex; align-items: flex-start;
|
|
background: #fef2f2; border: 1px solid #fecaca;
|
|
border-radius: 12px; padding: 14px 18px;
|
|
color: #dc2626; font-size: 13px; margin-bottom: 20px;
|
|
}
|
|
|
|
/* CARD */
|
|
.ep-card {
|
|
background: #fff;
|
|
border-radius: 18px;
|
|
border: 1px solid #e5e7eb;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ep-card-header {
|
|
display: flex; align-items: center; gap: 14px;
|
|
padding: 20px 28px;
|
|
border-bottom: 1px solid #f3f4f6;
|
|
background: #f9fafb;
|
|
}
|
|
|
|
.ep-card-header-icon {
|
|
width: 38px; height: 38px;
|
|
background: #ecfdf5; color: #047857;
|
|
border: 1px solid #d1fae5;
|
|
border-radius: 10px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 15px; flex-shrink: 0;
|
|
}
|
|
|
|
.ep-card-title {
|
|
font-size: 15px; font-weight: 800; color: #1f2937;
|
|
}
|
|
|
|
.ep-card-sub {
|
|
font-size: 12px; color: #9ca3af; margin-top: 2px;
|
|
}
|
|
|
|
/* FORM */
|
|
.ep-form { padding: 24px 28px; }
|
|
|
|
.ep-section-label {
|
|
font-size: 11.5px; font-weight: 700;
|
|
color: #047857; text-transform: uppercase;
|
|
letter-spacing: 0.7px; margin-bottom: 16px;
|
|
display: flex; align-items: center; gap: 4px;
|
|
}
|
|
|
|
.ep-section-label--mt { margin-top: 24px; }
|
|
|
|
.ep-grid-2 {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.ep-field { display: flex; flex-direction: column; gap: 6px; }
|
|
.ep-field--full { grid-column: 1 / -1; }
|
|
|
|
.ep-label {
|
|
font-size: 12.5px; font-weight: 600; color: #4b5563;
|
|
}
|
|
|
|
.ep-input {
|
|
width: 100%; padding: 10px 14px;
|
|
border: 1.5px solid #e5e7eb;
|
|
border-radius: 10px;
|
|
font-size: 13.5px; color: #1f2937;
|
|
background: #fafafa;
|
|
outline: none;
|
|
transition: all 0.2s;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.ep-input:focus {
|
|
border-color: #10b981;
|
|
box-shadow: 0 0 0 3px rgba(16,185,129,0.12);
|
|
background: #fff;
|
|
}
|
|
|
|
.ep-select { cursor: pointer; }
|
|
|
|
.ep-textarea { resize: vertical; min-height: 90px; }
|
|
|
|
.ep-img-preview {
|
|
width: 120px; height: 90px;
|
|
object-fit: cover;
|
|
border-radius: 10px;
|
|
border: 2px solid #d1fae5;
|
|
display: block;
|
|
}
|
|
|
|
.ep-file { padding: 8px 14px; cursor: pointer; }
|
|
|
|
.ep-file-hint {
|
|
font-size: 11.5px; color: #9ca3af; margin-top: 2px;
|
|
}
|
|
|
|
/* FOOTER */
|
|
.ep-footer {
|
|
display: flex; justify-content: flex-end; align-items: center;
|
|
gap: 10px; margin-top: 28px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #f3f4f6;
|
|
}
|
|
|
|
.ep-btn-back {
|
|
padding: 10px 20px;
|
|
background: #f3f4f6; color: #4b5563;
|
|
border: none; border-radius: 10px;
|
|
font-size: 13px; font-weight: 600;
|
|
text-decoration: none;
|
|
transition: all 0.2s; cursor: pointer;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.ep-btn-back:hover { background: #e5e7eb; color: #1f2937; }
|
|
|
|
.ep-btn-save {
|
|
padding: 10px 24px;
|
|
background: linear-gradient(135deg, #047857, #10b981);
|
|
color: #fff; border: none; border-radius: 10px;
|
|
font-size: 13.5px; font-weight: 700;
|
|
cursor: pointer; font-family: inherit;
|
|
box-shadow: 0 4px 14px rgba(4,120,87,0.25);
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.ep-btn-save:hover {
|
|
opacity: 0.9; transform: translateY(-1px);
|
|
box-shadow: 0 6px 18px rgba(4,120,87,0.32);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const statusHuni = document.getElementById('statusHuni');
|
|
const tanggalKeluarField = document.getElementById('tanggalKeluarField');
|
|
|
|
if (statusHuni) {
|
|
statusHuni.addEventListener('change', function () {
|
|
tanggalKeluarField.style.display = this.value === 'Kontrak' ? 'block' : 'none';
|
|
});
|
|
}
|
|
});
|
|
|
|
function previewFoto(input) {
|
|
if (input.files && input.files[0]) {
|
|
let preview = document.getElementById('previewEdit');
|
|
if (!preview) {
|
|
preview = document.createElement('img');
|
|
preview.id = 'previewEdit';
|
|
preview.className = 'ep-img-preview mb-2';
|
|
input.parentNode.insertBefore(preview, input);
|
|
}
|
|
preview.src = URL.createObjectURL(input.files[0]);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
@endsection
|