190 lines
7.3 KiB
PHP
190 lines
7.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Profil Pengguna</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
|
|
|
|
<style>
|
|
body {
|
|
background: rgb(120, 150, 193);
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
.profile-card {
|
|
max-width: 600px;
|
|
margin: 80px auto;
|
|
background: #fff;
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
|
|
text-align: center;
|
|
}
|
|
.profile-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
}
|
|
.profile-info {
|
|
text-align: left;
|
|
margin-top: 20px;
|
|
}
|
|
.profile-info p {
|
|
margin-bottom: 8px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Tombol kembali di pojok kiri atas -->
|
|
<a href="{{ route('user.home') }}" class="btn btn-light shadow-sm d-inline-flex align-items-center"
|
|
style="position: absolute; top: 20px; left: 20px; z-index: 1000; gap: 6px;">
|
|
<i class="bi bi-house-fill" style="font-size: 20px;"></i>
|
|
Beranda
|
|
</a>
|
|
|
|
|
|
<!-- Alert session -->
|
|
@if (session('success'))
|
|
<div class="alert alert-success container mt-4">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if ($errors->any())
|
|
<div class="alert alert-danger container mt-4">
|
|
<ul class="mb-0">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="profile-card">
|
|
<!-- Foto & upload -->
|
|
<form action="{{ route('profile.updatePhoto') }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="avatar-container text-center" style="position: relative; display: inline-block;">
|
|
<label for="photo" style="cursor: pointer;">
|
|
@if ($user->photo)
|
|
<img src="{{ asset( $user->photo) }}" alt="Foto Profil"
|
|
style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover;">
|
|
@else
|
|
<div style="
|
|
width: 120px;
|
|
height: 120px;
|
|
background-color: #007bff;
|
|
border-radius: 50%;
|
|
color: white;
|
|
font-size: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;">
|
|
{{ strtoupper(substr($user->name, 0, 2)) }}
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Ikon Edit -->
|
|
<div style="
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
padding: 6px;
|
|
box-shadow: 0 0 5px rgba(0,0,0,0.3);">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|
fill="currentColor" viewBox="0 0 16 16">
|
|
<path d="M15.502 1.94a.5.5 0 0 1 0 .706l-1.293 1.293-2.121-2.121
|
|
1.293-1.293a.5.5 0 0 1 .707 0l1.414 1.415zm-2.561
|
|
2.561L5 12.44V14h1.561l7.941-7.941-2.561-2.561z"/>
|
|
</svg>
|
|
</div>
|
|
</label>
|
|
<input type="file" id="photo" name="photo" accept="image/*" style="display: none;" onchange="this.form.submit()">
|
|
</div>
|
|
</form>
|
|
|
|
<div class="profile-title mt-3">{{ $user->name }}</div>
|
|
|
|
<!-- Info Profil -->
|
|
<div class="profile-info mt-4">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-4 font-weight-bold">Email</div>
|
|
<div class="col-sm-8">{{ $user->email }}</div>
|
|
</div>
|
|
<div class="row mb-2">
|
|
<div class="col-sm-4 font-weight-bold">No Telepon</div>
|
|
<div class="col-sm-8">{{ $user->telepon }}</div>
|
|
</div>
|
|
<div class="row mb-2">
|
|
<div class="col-sm-4 font-weight-bold">Alamat</div>
|
|
<div class="col-sm-8">{{ $user->alamat }}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-4 font-weight-bold">Role</div>
|
|
<div class="col-sm-8">{{ ucfirst($user->role ?? 'User') }}</div>
|
|
</div>
|
|
<div class="row mb-2 align-items-center">
|
|
<div class="col-sm-4 font-weight-bold">Password</div>
|
|
<div class="col-sm-8 d-flex justify-content-between align-items-center">
|
|
<span>*******</span>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary ml-2" data-toggle="modal" data-target="#ubahPasswordModal">
|
|
<i class="bi bi-pencil-square"></i> Ubah
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Ubah Password -->
|
|
@if ($user->role != 'admin')
|
|
<!-- Modal Ubah Password -->
|
|
<div class="modal fade" id="ubahPasswordModal" tabindex="-1" role="dialog" aria-labelledby="ubahPasswordModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<form action="{{ route('profile.updatePassword') }}" method="POST">
|
|
@csrf
|
|
@method('PUT')
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="ubahPasswordModalLabel">Ubah Password</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="current_password">Password Lama</label>
|
|
<input type="password" class="form-control" id="current_password" name="current_password" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="new_password">Password Baru</label>
|
|
<input type="password" class="form-control" id="new_password" name="new_password" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="new_password_confirmation">Konfirmasi Password Baru</label>
|
|
<input type="password" class="form-control" id="new_password_confirmation" name="new_password_confirmation" required>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
|
|
<button type="submit" class="btn btn-primary">Simpan Password Baru</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Optional: Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|