@extends('layouts.main')
@section('content')
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>Profile</h1>
</div>
<div class="card-body profile-card py-2 d-flex flex-column align-items-center text-center"
style="border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: relative; background: linear-gradient(45deg, #f3f3f3, #e0e0e0);">
<i class="bi bi-arrow-right" style="position: absolute; top: 10px; right: 10px; font-size: 24px;"></i>
<img src="{{ Auth::user()->foto_profile == null ? asset('assets/img/avatar/avatar-1.png') : asset('storage/foto-profile/' . Auth::user()->foto_profile) }}"
alt="{{ Auth::user()->nama_depan }}" class="rounded-circle" style="width: 150px; height: 150px;">
<h2 class="mt-3">{{ Auth::user()->nama_depan . ' ' . Auth::user()->nama_belakang }}</h2>
<h5 class="mb-0">#{{ Auth::user()->id }}</h5>
</div>
<div class="card">
<div class="card-body pt-3">
<!-- Bordered Tabs -->
<ul class="nav nav-tabs nav-tabs-bordered">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#profile-overview">Data
Diri</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-edit">Ubah
Profile</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-change-password">Ubah
Password</button>
</li>
</ul>
<div class="tab-content pt-2">
{{-- Detail Profil --}}
<div class="tab-pane active show profile-overview" id="profile-overview">
<h5 class="card-title">Detail Profil</h5>
<div class="row">
<div class="col-lg-3 col-md-4 label ">Nama Lengkap</div>
<div class="col-lg-9 col-md-8">
{{ Auth::user()->nama_depan . ' ' . Auth::user()->nama_belakang }}</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 label">Email</div>
<div class="col-lg-9 col-md-8">{{ Auth::user()->email }}</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 label">No. HP</div>
<div class="col-lg-9 col-md-8">{{ Auth::user()->nohp }}</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 label">Negara</div>
<div class="col-lg-9 col-md-8">Indonesia</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 label">Provinsi</div>
<div class="col-lg-9 col-md-8">{{ Auth::user()->getProvinceName() }}</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 label">Kota/Kabupaten</div>
<div class="col-lg-9 col-md-8">{{ Auth::user()->getCityName() }}</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 label">Kecamatan</div>
<div class="col-lg-9 col-md-8">{{ Auth::user()->getDistrictName() }}</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 label">Kelurahan</div>
<div class="col-lg-9 col-md-8">{{ Auth::user()->getVillageName() }}</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 label">Alamat</div>
<div class="col-lg-9 col-md-8">{{ Auth::user()->alamat }}</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 label">Nama Bank/e-Wallet Tujuan</div>
<div class="col-lg-9 col-md-8">{{ auth()->user()->nama_bank }}</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 label">Nomor Rekening/e-Wallet Tujuan</div>
<div class="col-lg-9 col-md-8">{{ auth()->user()->no_rek }}</div>
</div>
</div>
{{-- Edit Profile --}}
<div class="tab-pane fade profile-edit pt-3" id="profile-edit">
<form id="formEditProfile" action="javascript:void(0);" enctype="multipart/form-data">
@csrf
<div class="row mb-3">
<label for="profileImage" class="col-md-4 col-lg-3 col-form-label">Foto Profil</label>
<div class="col-md-8 col-lg-9">
<img id="profileImagePreview"
src="{{ Auth::user()->foto_profile == null ? asset('assets/img/avatar/avatar-1.png') : asset('storage/foto-profile/' . auth()->user()->foto_profile) }}"
alt="Profile" style="max-width: 100%; max-height: 150px;">
<div class="d-flex justify-content-between align-items-center mt-2">
<label for="profileImageInput" class="btn btn-primary btn-sm"
title="Upload new profile image">
<i class="bi bi-upload"></i> Unggah
<input type="file" id="profileImageInput" accept="image/*"
style="display: none;" name="foto_profile">
</label>
</div>
</div>
</div>
<div class="row mb-3">
<label for="nama_depan" class="col-md-4 col-lg-3 col-form-label">Nama
Lengkap</label>
<div class="col-md-4 col-lg-4">
<input name="nama_depan" type="text" class="form-control" id="nama_depan"
placeholder="Nama depan" value="{{ Auth::user()->nama_depan }}" required>
</div>
<div class="col-md-4 col-lg-5">
<input name="nama_belakang" type="text" class="form-control"
id="nama_belakang" placeholder="Nama belakang"
value="{{ Auth::user()->nama_belakang }}" required>
</div>
</div>
<div class="row mb-3">
<label for="nohp" class="col-md-4 col-lg-3 col-form-label">No. HP</label>
<div class="col-md-8 col-lg-9">
<input name="nohp" type="text" class="form-control" id="nohp"
value="{{ Auth::user()->nohp }}"
oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*?)\..*/g, '$1');"
required>
</div>
</div>
<div class="row mb-3">
<label for="selectProvince" class="col-md-4 col-lg-3 col-form-label">Provinsi</label>
<div class="col-md-8 col-lg-9">
<select style="width: 100%;" name="provinsi" id="selectProvince">
@foreach ($provinces as $province)
<option value="{{ $province->code }}">{{ $province->name }}</option>
@endforeach
</select>
</div>
</div>
<div class="row mb-3">
<label for="selectCity"
class="col-md-4 col-lg-3 col-form-label">Kabupaten/Kota</label>
<div class="col-md-8 col-lg-9">
<select style="width: 100%;" name="kota" id="selectCity">
@foreach ($cities as $city)
<option value="{{ $city->code }}">{{ $city->name }}</option>
@endforeach
</select>
</div>
</div>
<div class="row mb-3">
<label for="selectDistrict" class="col-md-4 col-lg-3 col-form-label">Kecamatan</label>
<div class="col-md-8 col-lg-9">
<select style="width: 100%;" name="kecamatan" id="selectDistrict">
@foreach ($districts as $district)
<option value="{{ $district->code }}">{{ $district->name }}</option>
@endforeach
</select>
</div>
</div>
<div class="row mb-3">
<label for="selectVillage" class="col-md-4 col-lg-3 col-form-label">Kelurahan</label>
<div class="col-md-8 col-lg-9">
<select style="width: 100%;" name="kelurahan" id="selectVillage" required>
@foreach ($villages as $village)
<option value="{{ $village->code }}">{{ $village->name }}</option>
@endforeach
</select>
</div>
</div>
<div class="row mb-3">
<label for="alamat" class="col-md-4 col-lg-3 col-form-label">Alamat</label>
<div class="col-md-8 col-lg-9">
<input name="alamat" type="text" class="form-control" id="alamat"
value="{{ Auth::user()->alamat }}" required>
</div>
</div>
<div class="row mb-3">
<label for="namaBank" class="col-md-4 col-lg-3 col-form-label">Bank/e-Wallet
Tujuan</label>
<div class="col-md-4 col-lg-4">
<select style="width: 100%;" name="nama_bank" id="namaBank" required>
<option selected disabled>Silahkan Pilih Bank/e-Wallet</option>
<option disabled>Bank</option>
<option value="bca"
{{ Auth::user()->nama_bank == 'bca' ? 'selected' : '' }}>BCA
</option>
<option value="mandiri"
{{ Auth::user()->nama_bank == 'mandiri' ? 'selected' : '' }}>
Mandiri
</option>
<option value="bni"
{{ Auth::user()->nama_bank == 'bni' ? 'selected' : '' }}>BNI
</option>
<option value="bri"
{{ Auth::user()->nama_bank == 'bri' ? 'selected' : '' }}>BRI
</option>
<option value="bsm"
{{ Auth::user()->nama_bank == 'bsm' ? 'selected' : '' }}>BSI (Bank
Syariah
Indonesia)</option>
<option value="danamon"
{{ Auth::user()->nama_bank == 'danamon' ? 'selected' : '' }}>
Danamoon/Danamon Syariah</option>
<option value="permata"
{{ Auth::user()->nama_bank == 'permata' ? 'selected' : '' }}>Bank
Permata
</option>
<option value="mega"
{{ Auth::user()->nama_bank == 'mega' ? 'selected' : '' }}>Bank Mega
</option>
<option value="btn"
{{ Auth::user()->nama_bank == 'btn' ? 'selected' : '' }}>BTN/BTN
Syariah
</option>
<option value="cimb"
{{ Auth::user()->nama_bank == 'cimb' ? 'selected' : '' }}>CIMB
Niaga/CIMB
Niaga Syariah</option>
<option value="hsbc"
{{ Auth::user()->nama_bank == 'hsbc' ? 'selected' : '' }}>HSBC
Indonesia
</option>
<option value="uob"
{{ Auth::user()->nama_bank == 'uob' ? 'selected' : '' }}>TMRW/UOB
</option>
<option value="panin"
{{ Auth::user()->nama_bank == 'panin' ? 'selected' : '' }}>Panin
Bank
</option>
<option value="bii"
{{ Auth::user()->nama_bank == 'bii' ? 'selected' : '' }}>Maybank
Indonesia
</option>
<option value="ocbc"
{{ Auth::user()->nama_bank == 'ocbc' ? 'selected' : '' }}>OCBC NISP
</option>
<option value="sinarmas"
{{ Auth::user()->nama_bank == 'sinarmas' ? 'selected' : '' }}>Bank
Sinarmas
</option>
<option value="dbs"
{{ Auth::user()->nama_bank == 'dbs' ? 'selected' : '' }}>DBS Bank
Indonesia
</option>
<option disabled>e-Wallet</option>
<option value="ovo"
{{ Auth::user()->nama_bank == 'ovo' ? 'selected' : '' }}>OVO
</option>
<option value="dana"
{{ Auth::user()->nama_bank == 'dana' ? 'selected' : '' }}>DANA
</option>
<option value="linkaja"
{{ Auth::user()->nama_bank == 'linkaja' ? 'selected' : '' }}>
LinkAja
</option>
<option value="gopay"
{{ Auth::user()->nama_bank == 'gopay' ? 'selected' : '' }}>GoPay
</option>
<option value="shopeepay"
{{ Auth::user()->nama_bank == 'shopeepay' ? 'selected' : '' }}>
ShopeePay
</option>
</select>
</div>
<div class="col-md-4 col-lg-5">
<input name="no_rek" type="text" class="form-control" id="noRek"
value="{{ Auth::user()->no_rek }}"
oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*?)\..*/g, '$1');"
required>
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
{{-- Edit Profil --}}
{{-- Change Password --}}
<div class="tab-pane fade pt-3" id="profile-change-password">
<form id="formChangePassword" action="javascript:void(0);">
@csrf
<div class="row mb-3">
<label for="currentPassword" class="col-md-4 col-lg-3 col-form-label">Password
Sekarang</label>
<div class="col-md-8 col-lg-9">
<input name="currentpassword" type="password" class="form-control"
id="currentPassword">
</div>
</div>
<div class="row mb-3">
<label for="newPassword" class="col-md-4 col-lg-3 col-form-label">Password
Baru</label>
<div class="col-md-8 col-lg-9">
<input name="newpassword" type="password" class="form-control" id="newPassword">
</div>
</div>
<div class="row mb-3">
<label for="renewPassword" class="col-md-4 col-lg-3 col-form-label">Ketik Ulang
Password Baru</label>
<div class="col-md-8 col-lg-9">
<input name="renewpassword" type="password" class="form-control"
id="renewPassword">
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Ganti Password</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
</div>
{{-- profile --}}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const editProfileTab = document.querySelector('[data-bs-target="#profile-edit"]');
const changePasswordTab = document.querySelector('[data-bs-target="#profile-change-password"]');
const overviewTab = document.querySelector('[data-bs-target="#profile-overview"]');
// Menambahkan event listener untuk mengubah tab saat tombol diklik
editProfileTab.addEventListener("click", function() {
activateTabAndContent(editProfileTab, "#profile-edit");
});
changePasswordTab.addEventListener("click", function() {
activateTabAndContent(changePasswordTab, "#profile-change-password");
});
// Menambahkan event listener untuk kembali ke tab "Overview"
overviewTab.addEventListener("click", function() {
activateTabAndContent(overviewTab, "#profile-overview");
});
// Fungsi untuk mengaktifkan tab dan konten
function activateTabAndContent(tabButton, tabContentId) {
// Nonaktifkan tab aktif saat ini
const activeTabButton = document.querySelector(".nav-link.active");
const activeTabContent = document.querySelector(".tab-pane.active");
activeTabButton.classList.remove("active");
activeTabContent.classList.remove("show", "active");
// Aktifkan tab yang dipilih
tabButton.classList.add("active");
// Tampilkan konten tab yang dipilih
const selectedTabContent = document.querySelector(tabContentId);
selectedTabContent.classList.add("show", "active");
}
});
$(document).ready(function() {
var selectedVillage = "{{ Auth::user()->kode_kelurahan }}";
var selectedDistrict = "{{ Auth::user()->village->district->code }}";
var selectedCity = "{{ Auth::user()->village->district->city->code }}";
var selectedProvince = "{{ Auth::user()->village->district->city->province->code }}";
$("#selectProvince").val(selectedProvince).trigger('change');
$("#selectCity").val(selectedCity).trigger('change');
$("#selectDistrict").val(selectedDistrict).trigger('change');
$("#selectVillage").val(selectedVillage).trigger('change');
function ucwords(str) {
return str.toLowerCase().replace(/\b\w/g, function(l) {
return l.toUpperCase();
});
}
$('#selectProvince').select2();
$('#selectCity').select2();
$('#selectDistrict').select2();
$('#selectVillage').select2();
// Event Listener untuk selectProvince
$("#selectProvince").change(function() {
let code = $("#selectProvince").val();
// Mengosongkan pilihan di selectCity dan selectDistrict dan selectVillage
$("#selectCity", "#selectDistrict", "#selectVillage").empty();
// Menghapus properti 'disabled' pada selectCity dan selectDistrict dan selectVillage
$("#selectCity", "#selectDistrict", "#selectVillage").prop(
"disable",
false
);
// Muat ulang data berdasarkan provinsi yang baru dipilih di selectProvince
$("#selectCity").select2({
placeholder: "Pilih Kabupaten/Kota",
ajax: {
url: "/cari-kota/" + code,
processResults: function({
data
}) {
return {
results: $.map(data, function(item) {
return {
id: item.code,
text: ucwords(item.name),
};
}),
};
},
},
});
});
// Event Listener untuk perubahan pada selectCity
$("#selectCity").change(function() {
let code = $("#selectCity").val();
// Mengosongkan pilihan di selectDistrict dan selectVillage
$("#selectDristrict", "#selectVillage").empty();
// Menghapus properti 'disable' pada selectDistrict dan selectVillage
$("#selectDistrict", "#selectVillage").prop("disabled", false);
// Memuat ulang data berdasarkan wilayah yang baru dipilih di selectCity
$("#selectDistrict").select2({
placeholder: "Pilih Kecamatan",
ajax: {
url: "/cari-kecamatan/" + code, // Isi dengan URL yang sesuai
processResults: function({
data
}) {
return {
results: $.map(data, function(item) {
return {
id: item.code,
text: ucwords(item.name),
};
}),
};
},
},
});
});
// Event Listener untuk selectDistrict
$("#selectDistrict").change(function() {
let code = $("#selectDistrict").val();
// Mengosongkan pilihan di selectVillage
$("#selectVillage").empty();
// Menghapus properti 'disabled' pada selectVillage
$("#selectVillage").prop("disabled", false);
// Memuat ulang data berdasarkan wilayah yang baru dipilih di selectDistrict
$("#selectVillage").select2({
placeholder: "Pilih Kelurahan",
ajax: {
url: "/cari-kelurahan/" + code, // Isi dengan URL yang sesuai
processResults: function({
data
}) {
return {
results: $.map(data, function(item) {
return {
id: item.code,
text: ucwords(item.name),
};
}),
};
},
},
});
});
$('#namaBank').select2();
//file input
$('#profileImageInput').change(function() {
var file = this.files[0];
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function(e) {
// Mengganti src gambar dengan data URL dari berkas yang dipilih
document.getElementById('profileImagePreview').src = e.target.result;
};
// Membaca berkas sebagai data URL
reader.readAsDataURL(file);
} else {
Swal.fire({
title: 'Salah Input',
text: 'File yang anda upload bukan foto/gambar',
icon: 'error',
});
$('#profileImageInput').val('');
}
});
// edit profile
$('#formEditProfile').on('submit', function(e) {
e.preventDefault();
let form = this;
const csrf = $('meta[name="csrf-token"]').attr('content');
if (!form.checkValidity()) {
form.reportValidity();
return;
}
let formData = new FormData(this);
formData.append('foto', $('#profileImageInput')[0].files[0])
Swal.fire({
html: '<div class="mt-3"><lord-icon src="https://cdn.lordicon.com/etwtznjn.json" trigger="loop" colors="primary:#0ab39c,secondary:#405189" style="width:120px;height:120px"></lord-icon><div class="mt-4 pt-2 fs-15"><h4>Form Anda sedang diproses!</h4><p class="text-muted mx-4 mb-0">Mohon tunggu...</p></div></div>',
allowEscapeKey: false,
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading()
}
});
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': csrf,
}
});
$.ajax({
type: 'POST',
url: "{{ route('profile.update') }}",
data: formData,
processData: false,
contentType: false,
success: function(response) {
Swal.fire({
title: response.status ? 'Berhasil!' : 'Gagal!',
text: response.message,
icon: response.status ? 'success' : 'error',
confirmButtonText: 'OK',
position: 'center',
}).then(function() {
if (response.status) {
location.reload();
}
});
},
error: function(error) {
console.log(error.responseText)
var response = JSON.parse(error.responseText);
var errorMessage = '';
for (var key in response.errors) {
if (response.errors.hasOwnProperty(key)) {
errorMessage += response.errors[key][0] + '<br>';
}
}
Swal.fire({
position: 'center',
icon: 'error',
title: 'Terjadi Kesalahan',
html: errorMessage,
showConfirmButton: true
});
}
});
});
// ganti password
$('#formChangePassword').on('submit', function(e) {
e.preventDefault();
let form = this;
if (!form.checkValidity()) {
form.reportValidity();
return;
}
let formData = new FormData(this);
Swal.fire({
html: '<div class="mt-3"><lord-icon src="https://cdn.lordicon.com/etwtznjn.json" trigger="loop" colors="primary:#0ab39c,secondary:#405189" style="width:120px;height:120px"></lord-icon><div class="mt-4 pt-2 fs-15"><h4>Form Anda sedang diproses!</h4><p class="text-muted mx-4 mb-0">Mohon tunggu...</p></div></div>',
allowEscapeKey: false,
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading()
}
});
const currentPassword = $('#currentPassword').val();
const newPassword = $('#newPassword').val();
const renewPassword = $('#renewPassword').val();
$.ajax({
type: 'PUT',
url: "{{ route('profile.change-password') }}",
data: {
currentPassword: currentPassword,
newPassword: newPassword,
renewPassword: renewPassword,
"_token": "{{ csrf_token() }}",
},
success: function(response) {
Swal.fire({
title: response.status ? 'Berhasil!' : 'Gagal!',
text: response.message,
icon: response.status ? 'success' : 'error',
confirmButtonText: 'OK',
position: 'center',
}).then(function() {
if (response.status) {
location.reload();
}
});
},
error: function(error) {
console.log(error.responseText)
var response = JSON.parse(error.responseText);
var errorMessage = '';
for (var key in response.errors) {
if (response.errors.hasOwnProperty(key)) {
errorMessage += response.errors[key][0] + '<br>';
}
}
Swal.fire({
position: 'center',
icon: 'error',
title: 'Terjadi Kesalahan',
html: errorMessage,
showConfirmButton: true
});
}
});
});
});
</script>
{{-- profile --}}
@endsection