@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/", data: { code: 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/", // Isi dengan URL yang sesuai data: { code: code, }, 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/", // Isi dengan URL yang sesuai data: { code: code, }, 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