185 lines
10 KiB
PHP
185 lines
10 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('content')
|
|
<div class="page-header">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item">Home</li>
|
|
<li class="breadcrumb-item active">My Profile</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="row gutters">
|
|
{{-- Sisi Kiri: Foto & Ringkasan --}}
|
|
<div class="col-xl-4 col-lg-4 col-md-12">
|
|
<div class="card h-100 shadow-sm border-0">
|
|
<div class="card-body p-0">
|
|
<div class="text-center p-4" style="background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%); border-radius: 4px 4px 0 0;">
|
|
<div class="mb-3 d-flex justify-content-center">
|
|
<div class="avatar-container">
|
|
<img src="{{ asset('assetdashboard/img/profile.jpg') }}" alt="Profile Photo" class="profile-avatar">
|
|
</div>
|
|
</div>
|
|
<h5 class="text-white font-weight-bold mb-1">{{ $user->nama_lengkap }}</h5>
|
|
<span class="badge badge-pill badge-light text-success font-weight-bold px-3 mt-1">{{ strtoupper($user->role) }}</span>
|
|
</div>
|
|
<div class="p-4">
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
|
|
<span class="text-muted small font-weight-bold uppercase">Username</span>
|
|
<span class="text-dark font-weight-bold">{{ $user->username }}</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
|
|
<span class="text-muted small font-weight-bold uppercase">Status Akun</span>
|
|
<span class="text-success font-weight-bold"><i class="icon-check-circle"></i> Aktif</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
|
|
<span class="text-muted small font-weight-bold uppercase">Terdaftar Sejak</span>
|
|
<span class="text-dark">{{ $user->created_at->format('d M Y') }}</span>
|
|
</li>
|
|
</ul>
|
|
<button type="button" id="btn-edit-mode" class="btn btn-outline-success btn-block mt-3 font-weight-bold shadow-sm">
|
|
<i class="icon-edit1"></i> Edit Profil
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Sisi Kanan: Form Edit --}}
|
|
<div class="col-xl-8 col-lg-8 col-md-12">
|
|
<div class="card h-100 shadow-sm border-0">
|
|
<div class="card-header bg-white border-bottom py-3">
|
|
<h5 class="mb-0 text-dark font-weight-bold"><i class="icon-user1 text-success mr-2"></i> Detail Informasi Akun</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
@if(session('success'))
|
|
<div class="alert alert-success border-0 shadow-sm mb-4">
|
|
<i class="icon-check"></i> {{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('account.updateProfile') }}" method="POST">
|
|
@csrf
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="font-weight-bold small text-muted text-uppercase">Nama Lengkap</label>
|
|
<input type="text" name="nama_lengkap" class="form-control profile-input" value="{{ $user->nama_lengkap }}" required readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="font-weight-bold small text-muted text-uppercase">Username</label>
|
|
<input type="text" name="username" class="form-control profile-input" value="{{ $user->username }}" required readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label class="font-weight-bold small text-muted text-uppercase">Alamat Tempat Tinggal</label>
|
|
<textarea name="alamat" class="form-control profile-input" rows="3" readonly>{{ $user->alamat }}</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- BAGIAN INFO TAMBAHAN: Muncul saat mode baca agar card tidak kosong --}}
|
|
<div id="info-additional" class="mt-4 p-3 rounded" style="background-color: #f9f9f9; border-left: 4px solid #28a745;">
|
|
<h6 class="font-weight-bold text-dark mb-2 small text-uppercase">Hak Akses Pengguna</h6>
|
|
<p class="small text-muted mb-0">
|
|
Anda login sebagai <strong>{{ ucfirst($user->role) }}</strong>. Sebagai {{ $user->role }}, Anda memiliki otoritas untuk
|
|
@if($user->role == 'admin')
|
|
mengelola kriteria, melakukan perhitungan perbandingan pakar, dan mengatur periode seleksi bansos.
|
|
@else
|
|
memverifikasi data dokumen warga dan meninjau hasil perangkingan sebelum dipublikasikan.
|
|
@endif
|
|
</p>
|
|
</div>
|
|
|
|
{{-- PASSWORD SECTION: Muncul hanya saat edit --}}
|
|
<div id="password-section" style="display: none;">
|
|
<hr class="my-4">
|
|
<h6 class="text-success font-weight-bold mb-3 small text-uppercase"><i class="icon-shield"></i> Keamanan Akun (Ganti Password)</h6>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="font-weight-bold small text-muted text-uppercase">Password Baru</label>
|
|
<input type="password" name="password_baru" class="form-control profile-input" placeholder="Minimal 8 karakter">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label class="font-weight-bold small text-muted text-uppercase">Konfirmasi Password Baru</label>
|
|
<input type="password" name="password_baru_confirmation" class="form-control profile-input" placeholder="Ulangi password">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-light border-0 mt-2 py-2">
|
|
<small class="text-muted"><i class="icon-info"></i> Kosongkan jika tidak ingin mengganti password.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-right mt-4">
|
|
<button type="button" id="btn-cancel" class="btn btn-light px-4 mr-2 shadow-sm font-weight-bold" style="display: none;">Batal</button>
|
|
<button type="submit" id="btn-save" class="btn btn-success px-5 shadow-sm font-weight-bold" style="display: none;">
|
|
<i class="icon-save"></i> Simpan Perubahan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const btnEdit = document.getElementById('btn-edit-mode');
|
|
const btnCancel = document.getElementById('btn-cancel');
|
|
const btnSave = document.getElementById('btn-save');
|
|
const inputs = document.querySelectorAll('.profile-input');
|
|
const passwordSection = document.getElementById('password-section');
|
|
const infoAdditional = document.getElementById('info-additional');
|
|
|
|
btnEdit.addEventListener('click', function() {
|
|
inputs.forEach(input => {
|
|
input.removeAttribute('readonly');
|
|
input.style.backgroundColor = "#fff";
|
|
input.classList.add('border-success');
|
|
});
|
|
passwordSection.style.display = 'block';
|
|
infoAdditional.style.display = 'none'; // Sembunyikan info tambahan agar fokus edit
|
|
btnSave.style.display = 'inline-block';
|
|
btnCancel.style.display = 'inline-block';
|
|
btnEdit.style.display = 'none';
|
|
});
|
|
|
|
btnCancel.addEventListener('click', function() {
|
|
inputs.forEach(input => {
|
|
input.setAttribute('readonly', true);
|
|
input.style.backgroundColor = "#f8f9fa";
|
|
input.classList.remove('border-success');
|
|
});
|
|
passwordSection.style.display = 'none';
|
|
infoAdditional.style.display = 'block'; // Munculkan kembali info tambahan
|
|
btnSave.style.display = 'none';
|
|
btnCancel.style.display = 'none';
|
|
btnEdit.style.display = 'block';
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.avatar-container {
|
|
width: 140px; height: 140px; border-radius: 50%; padding: 4px;
|
|
background: rgba(255, 255, 255, 0.2); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
|
|
}
|
|
.profile-avatar {
|
|
width: 100%; height: 100%; object-fit: cover; object-position: top;
|
|
border-radius: 50%; border: 4px solid #ffffff;
|
|
}
|
|
.uppercase { text-transform: uppercase; }
|
|
.form-control:focus { border-color: #28a745; box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.1); }
|
|
.profile-input[readonly] { background-color: #f8f9fa; border-color: #e9ecef; cursor: default; }
|
|
.btn-success { background-color: #28a745; border: none; }
|
|
.btn-success:hover { background-color: #1e7e34; }
|
|
</style>
|
|
@endsection
|