239 lines
12 KiB
PHP
239 lines
12 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('content')
|
|
<div class="container-fluid py-4">
|
|
<!-- Header Profil (Dipercantik dengan Avatar) -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card shadow-sm border-0" style="border-radius: 20px; background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);">
|
|
<div class="card-body p-4 d-flex align-items-center position-relative overflow-hidden">
|
|
<!-- Elemen dekorasi background -->
|
|
<div class="position-absolute top-0 end-0 opacity-10 mt-n4 me-n4">
|
|
<i class="icon-shield" style="font-size: 150px; color: white;"></i>
|
|
</div>
|
|
|
|
<!-- Foto Default Avatar -->
|
|
<div class="bg-white rounded-circle d-flex justify-content-center align-items-center shadow p-1 me-4" style="width: 80px; height: 80px; z-index: 1;">
|
|
<img src="https://ui-avatars.com/api/?name={{ urlencode($anggota->nama_lengkap) }}&background=e9ecef&color=0d6efd&size=80" alt="Avatar" class="rounded-circle" style="width: 100%; height: 100%;">
|
|
</div>
|
|
|
|
<div style="z-index: 1;">
|
|
<h3 class="fw-bold text-white mb-1">{{ $anggota->nama_lengkap }}</h3>
|
|
<p class="text-white-50 mb-0"><i class="icon-map-pin me-1"></i> Kolat {{ $anggota->kolat->nama_kolat }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if(session('success'))
|
|
<div class="alert alert-success border-0 shadow-sm mb-4" style="border-radius: 15px;">
|
|
<i class="icon-check-circle me-2"></i> {{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
<div class="row">
|
|
<!-- KOLOM KIRI: Data Pribadi & Ganti Password -->
|
|
<div class="col-md-8">
|
|
|
|
<!-- FORM 1: DATA PRIBADI -->
|
|
<form action="{{ route('profile.update') }}" method="POST" id="formProfil">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;">
|
|
<div class="card-header bg-white border-0 pt-4 px-4 d-flex justify-content-between align-items-center">
|
|
<h5 class="fw-bold text-primary mb-0"><i class="icon-user me-2"></i>Data Pribadi</h5>
|
|
<!-- Tombol untuk mengaktifkan Edit Mode -->
|
|
<button type="button" id="btnEditMode" class="btn btn-sm btn-outline-primary rounded-pill px-3 fw-bold">
|
|
<i class="icon-edit-2 me-1"></i> Edit Data
|
|
</button>
|
|
</div>
|
|
|
|
<div class="card-body p-4">
|
|
<div class="row g-3">
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-bold">Nama Lengkap</label>
|
|
<input type="text" name="nama_lengkap" class="form-control profil-input"
|
|
value="{{ old('nama_lengkap', $anggota->nama_lengkap) }}" disabled required>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-bold">Alamat Email (User ID)</label>
|
|
<input type="email" class="form-control bg-light"
|
|
value="{{ $anggota->user->email }}" readonly>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-bold">No. WhatsApp</label>
|
|
<input type="number" name="no_hp" class="form-control profil-input"
|
|
value="{{ old('no_hp', $anggota->no_hp) }}" disabled required>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-bold">Tempat Lahir</label>
|
|
<input type="text" name="tempat_lahir" class="form-control profil-input"
|
|
value="{{ old('tempat_lahir', $anggota->tempat_lahir) }}" disabled required>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-bold">Tanggal Lahir</label>
|
|
<input type="date" name="tgl_lahir" class="form-control profil-input"
|
|
value="{{ old('tgl_lahir', $anggota->tgl_lahir) }}" disabled required>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-bold">Alamat Lengkap</label>
|
|
<textarea name="alamat" class="form-control profil-input" rows="3" disabled required>{{ old('alamat', $anggota->alamat) }}</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Area Tombol Simpan (Disembunyikan secara default) -->
|
|
<div class="card-footer bg-light border-0 p-4 d-none" id="footerSimpanProfil" style="border-radius: 0 0 20px 20px;">
|
|
<div class="d-flex justify-content-end gap-2">
|
|
<button type="button" id="btnBatalEdit" class="btn btn-light px-4 fw-bold shadow-sm" style="border-radius: 10px;">Batal</button>
|
|
<button type="submit" class="btn btn-primary px-4 fw-bold shadow" style="border-radius: 10px;">Simpan Perubahan</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- FORM 2: UBAH PASSWORD -->
|
|
<form action="{{ route('profile.password') }}" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
<div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;">
|
|
<div class="card-header bg-white border-0 pt-4 px-4">
|
|
<h5 class="fw-bold text-dark mb-0"><i class="icon-lock me-2 text-warning"></i>Keamanan & Password</h5>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<div class="row g-3">
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-bold">Password Saat Ini</label>
|
|
<input type="password" name="current_password" class="form-control" placeholder="Masukkan password lama" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-bold">Password Baru</label>
|
|
<input type="password" name="password" class="form-control" placeholder="Minimal 8 karakter" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-bold">Konfirmasi Password Baru</label>
|
|
<input type="password" name="password_confirmation" class="form-control" placeholder="Ulangi password baru" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-white border-0 px-4 pb-4 pt-0">
|
|
<button type="submit" class="btn btn-warning text-dark fw-bold shadow-sm w-100" style="border-radius: 10px;">
|
|
Perbarui Password
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- KOLOM KANAN: Status Organisasi -->
|
|
<div class="col-md-4">
|
|
<div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;">
|
|
<div class="card-header bg-white border-0 pt-4 px-4">
|
|
<h5 class="fw-bold text-success mb-0"><i class="icon-badge me-2"></i>Status Organisasi</h5>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<div class="mb-3">
|
|
<label class="text-muted small d-block">Nomor Induk Anggota</label>
|
|
<span class="fw-bold text-primary fs-5">{{ $anggota->no_induk }}</span>
|
|
</div>
|
|
<hr class="opacity-10">
|
|
<div class="mb-3">
|
|
<label class="form-label fw-bold">Jabatan</label>
|
|
<div class="p-2 bg-light rounded text-dark fw-semibold border border-light">
|
|
{{ $anggota->role->nama_role }}
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-bold">Asal Kolat</label>
|
|
<div class="p-2 bg-light rounded text-dark fw-semibold border border-light">
|
|
Kolat {{ $anggota->kolat->nama_kolat }}
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-bold">Tingkatan Sabuk</label>
|
|
<div class="p-2 bg-light rounded text-dark fw-semibold border border-light">
|
|
{{ $anggota->tingkatan ?? 'Belum ada data' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bantuan Card -->
|
|
<div class="card border-0 shadow-sm" style="border-radius: 20px; background-color: #fff4f4;">
|
|
<div class="card-body p-4 text-center">
|
|
<div class="rounded-circle bg-white d-inline-flex p-3 mb-3 shadow-sm">
|
|
<i class="icon-help-circle text-danger fs-4"></i>
|
|
</div>
|
|
<h6 class="fw-bold text-danger">Butuh Bantuan?</h6>
|
|
<p class="small text-muted mb-0">Jika data organisasi (Kolat/Jabatan/Tingkat) tidak sesuai, silakan hubungi Pengurus Cabang melalui pelatih Anda.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JAVASCRIPT UNTUK TOGGLE EDIT MODE -->
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const btnEditMode = document.getElementById('btnEditMode');
|
|
const btnBatalEdit = document.getElementById('btnBatalEdit');
|
|
const inputs = document.querySelectorAll('.profil-input');
|
|
const footerSimpan = document.getElementById('footerSimpanProfil');
|
|
|
|
// Fungsi untuk mengaktifkan mode edit
|
|
btnEditMode.addEventListener('click', function() {
|
|
inputs.forEach(input => {
|
|
input.removeAttribute('disabled');
|
|
input.classList.add('border-primary'); // Highlight input yang bisa diedit
|
|
});
|
|
btnEditMode.classList.add('d-none'); // Sembunyikan tombol Edit
|
|
footerSimpan.classList.remove('d-none'); // Munculkan tombol Simpan
|
|
inputs[0].focus(); // Fokus ke input pertama
|
|
});
|
|
|
|
// Fungsi untuk membatalkan mode edit
|
|
btnBatalEdit.addEventListener('click', function() {
|
|
inputs.forEach(input => {
|
|
input.setAttribute('disabled', 'disabled');
|
|
input.classList.remove('border-primary');
|
|
});
|
|
btnEditMode.classList.remove('d-none');
|
|
footerSimpan.classList.add('d-none');
|
|
|
|
// Opsi: reset form ke nilai awal jika dibatalkan
|
|
document.getElementById('formProfil').reset();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.form-control {
|
|
border-radius: 10px;
|
|
padding: 10px 15px;
|
|
border: 1px solid #dce1e7;
|
|
transition: all 0.3s;
|
|
}
|
|
.form-control:disabled {
|
|
background-color: #f8f9fa;
|
|
cursor: not-allowed;
|
|
opacity: 0.8;
|
|
}
|
|
.form-control:focus {
|
|
border-color: #0d6efd;
|
|
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
|
|
}
|
|
.border-primary {
|
|
border-color: #0d6efd !important;
|
|
background-color: #fff !important;
|
|
}
|
|
.bg-light { background-color: #f8f9fa !important; }
|
|
</style>
|
|
@endsection
|