376 lines
21 KiB
PHP
376 lines
21 KiB
PHP
@extends('user.layout.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="{{asset('assets/img/avatar/ok.jpg')}}" alt="Profile" class="rounded-circle" style="width: 150px; height: 150px;">
|
|
<h2 class="mt-3">Nurul Prima Annisa</h2>
|
|
<h5 class="mb-0">#123udfai90-20udf82</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">Overview</button>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-edit">Edit
|
|
Profile</button>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<button class="nav-link" data-bs-toggle="tab"
|
|
data-bs-target="#profile-settings">Settings</button>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-change-password">Change
|
|
Password</button>
|
|
</li>
|
|
|
|
</ul>
|
|
<div class="tab-content pt-2">
|
|
|
|
<div class="tab-pane fade show active profile-overview" id="profile-overview">
|
|
<h5 class="card-title">About</h5>
|
|
<p class="small fst-italic">Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
|
|
annisa
|
|
Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
|
|
annisa Nurul prima annisa
|
|
Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
|
|
annisa Nurul prima annisa
|
|
Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
|
|
annisa Nurul prima annisa
|
|
Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
|
|
annisa Nurul prima annisa
|
|
Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
|
|
annisa Nurul prima annisa
|
|
Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
|
|
annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul
|
|
prima
|
|
annisa
|
|
Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
|
|
annisa Nurul prima annisa
|
|
Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
|
|
annisa Nurul prima annisa
|
|
Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
|
|
annisa Nurul prima annisa
|
|
Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
|
|
annisa Nurul prima annisa
|
|
Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
|
|
annisa Nurul prima annisa
|
|
Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima annisa Nurul prima
|
|
annisa Nurul prima annisa
|
|
</p>
|
|
|
|
<h5 class="card-title">Profile Details</h5>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-4 label ">Full Name</div>
|
|
<div class="col-lg-9 col-md-8">Nurul Prima Annisa</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-4 label">Company</div>
|
|
<div class="col-lg-9 col-md-8">Ya apa yak</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-4 label">Job</div>
|
|
<div class="col-lg-9 col-md-8">Frontend Web </div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-4 label">Country</div>
|
|
<div class="col-lg-9 col-md-8">Indonesia</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-4 label">Address</div>
|
|
<div class="col-lg-9 col-md-8">Depok city broww</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-4 label">Phone</div>
|
|
<div class="col-lg-9 col-md-8">(+62) 486-3538 29071</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-4 label">Email</div>
|
|
<div class="col-lg-9 col-md-8">npannisa23@gmail.com</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane fade profile-edit pt-3" id="profile-edit">
|
|
|
|
<!-- Profile Edit Form -->
|
|
<form>
|
|
<div class="row mb-3">
|
|
<label for="profileImage" class="col-md-4 col-lg-3 col-form-label">Profile Image</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<img id="profileImagePreview" src="{{asset('assets/img/avatar/ok.jpg')}}" 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> Upload
|
|
<input type="file" id="profileImageInput" accept="image/*"
|
|
style="display: none;">
|
|
</label>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="fullName" class="col-md-4 col-lg-3 col-form-label">Full Name</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="fullName" type="text" class="form-control" id="fullName"
|
|
value="Nurul Prima Annisa">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="about" class="col-md-4 col-lg-3 col-form-label">About</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<textarea name="about" class="form-control" id="about" style="height: 100px">
|
|
|
|
</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="company" class="col-md-4 col-lg-3 col-form-label">Company</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="company" type="text" class="form-control" id="company"
|
|
value="Abbauf Mulia Konsultan Teknologi">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="Job" class="col-md-4 col-lg-3 col-form-label">Job</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="job" type="text" class="form-control" id="Job"
|
|
value="Frontend Web">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="Country" class="col-md-4 col-lg-3 col-form-label">Country</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="country" type="text" class="form-control" id="Country"
|
|
value="Indonesia">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="Address" class="col-md-4 col-lg-3 col-form-label">Address</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="address" type="text" class="form-control" id="Address"
|
|
value="Depok city broww">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="Phone" class="col-md-4 col-lg-3 col-form-label">Phone</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="phone" type="text" class="form-control" id="Phone"
|
|
value="(+62) 486-3538 29071">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="Email" class="col-md-4 col-lg-3 col-form-label">Email</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="email" type="email" class="form-control" id="Email"
|
|
value="npannisa23@gmail.com">
|
|
</div>
|
|
</div>
|
|
|
|
{{-- <div class="row mb-3">
|
|
<label for="Twitter" class="col-md-4 col-lg-3 col-form-label">Twitter Profile</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="twitter" type="text" class="form-control" id="Twitter"
|
|
value="https://twitter.com/#">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="Facebook" class="col-md-4 col-lg-3 col-form-label">Facebook
|
|
Profile</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="facebook" type="text" class="form-control" id="Facebook"
|
|
value="https://facebook.com/#">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="Instagram" class="col-md-4 col-lg-3 col-form-label">Instagram
|
|
Profile</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="instagram" type="text" class="form-control" id="Instagram"
|
|
value="https://instagram.com/npannisa_?utm_source=qr&igshid=MzNlNGNkZWQ4Mg%3D%3D#">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<label for="Linkedin" class="col-md-4 col-lg-3 col-form-label">Linkedin
|
|
Profile</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="linkedin" type="text" class="form-control" id="Linkedin"
|
|
value="https://github.com/npannisa#">
|
|
</div>
|
|
</div> --}}
|
|
|
|
<div class="text-center">
|
|
<a href="profile" type="submit" class="btn btn-primary">Save Changes</a>
|
|
</div>
|
|
</form><!-- End Profile Edit Form -->
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane fade pt-3" id="profile-settings">
|
|
|
|
<!-- Settings Form -->
|
|
<form>
|
|
|
|
<div class="row mb-3">
|
|
<label for="fullName" class="col-md-4 col-lg-3 col-form-label">Email
|
|
Notifications</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="changesMade" checked>
|
|
<label class="form-check-label" for="changesMade">
|
|
Changes made to your account
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="newProducts" checked>
|
|
<label class="form-check-label" for="newProducts">
|
|
Information on new products and services
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="proOffers">
|
|
<label class="form-check-label" for="proOffers">
|
|
Marketing and promo offers
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="securityNotify" checked
|
|
disabled>
|
|
<label class="form-check-label" for="securityNotify">
|
|
Security alerts
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<button type="submit" class="btn btn-primary">Save Changes</button>
|
|
</div>
|
|
</form><!-- End settings Form -->
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane fade pt-3" id="profile-change-password">
|
|
<!-- Change Password Form -->
|
|
<form>
|
|
|
|
<div class="row mb-3">
|
|
<label for="currentPassword" class="col-md-4 col-lg-3 col-form-label">Current
|
|
Password</label>
|
|
<div class="col-md-8 col-lg-9">
|
|
<input name="password" 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">New Password</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">Re-enter New
|
|
Password</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">Change Password</button>
|
|
</div>
|
|
</form><!-- End Change Password Form -->
|
|
|
|
</div>
|
|
|
|
</div><!-- End Bordered Tabs -->
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
{{-- profile --}}
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// Mendapatkan elemen-elemen tombol tab
|
|
const editProfileTab = document.querySelector('[data-bs-target="#profile-edit"]');
|
|
const settingsTab = document.querySelector('[data-bs-target="#profile-settings"]');
|
|
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");
|
|
});
|
|
|
|
settingsTab.addEventListener("click", function() {
|
|
activateTabAndContent(settingsTab, "#profile-settings");
|
|
});
|
|
|
|
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");
|
|
}
|
|
});
|
|
</script>
|
|
{{-- profile --}}
|
|
@endsection
|