161 lines
8.6 KiB
PHP
161 lines
8.6 KiB
PHP
@extends('admin.layout.main')
|
|
@section('content')
|
|
<div class="main-content">
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h1>Profile</h1>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-head">
|
|
<img id="card_head" src="/assets/images/sampul.jpg"></img>
|
|
</div>
|
|
<div class="image-crop">
|
|
<img id="avatar" src="/assets/images/dashboard/img_1.jpg"></img>
|
|
</div><br>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div>
|
|
<strong style="font-size: 30px; color: black;"><b>Tsalsabila Jilhan
|
|
Haura</b></strong><br>
|
|
Super Admin<br>
|
|
</div>
|
|
</div>
|
|
<div class="col-md my-3">
|
|
<div>
|
|
<div class="row justify-content-end row-divider">
|
|
<div class="col-1"><i class="fas fa-id-card" style="font-size: 20px;"></i>
|
|
</div>
|
|
<div class="col-lg-9 col-md-8" style="font-size: 15px;">94894893848</div>
|
|
</div>
|
|
<div class="row justify-content-end row-divider">
|
|
<div class="col-1"><i class="fas fa-user" style="font-size:20px"></i></div>
|
|
<div class="col-lg-9 col-md-8" style="font-size: 15px">jilhan Haura</div>
|
|
</div>
|
|
<div class="row justify-content-end row-divider">
|
|
<div class="col-1"><i class="fas fa-user-tag" style="font-size:20px"></i>
|
|
</div>
|
|
<div class="col-lg-9 col-md-8" style="font-size: 15px">Super Admin</div>
|
|
</div>
|
|
<div class="row justify-content-end row-divider">
|
|
<div class="col-1"><i class="fas fa-map-marker-alt" style="font-size:20px"></i>
|
|
</div>
|
|
<div class="col-lg-9 col-md-8" style="font-size: 15px">Jl simpang komplek
|
|
polda
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-end row-divider">
|
|
<div class="col-1"><i class="fas fa-phone" style="font-size:20px"></i>
|
|
</div>
|
|
<div class="col-lg-9 col-md-8" style="font-size: 15px">+62 1209 0120 02
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-end row-divider">
|
|
<div class="col-1"><i class="fas fa-envelope" style="font-size:20px"></i>
|
|
</div>
|
|
<div class="col-lg-9 col-md-8" style="font-size: 15px">jilhan@gmail.com
|
|
</div>
|
|
</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
|