MIF_E31210181/resources/views/pages/user-pages/profile-mhs.blade.php

187 lines
8.9 KiB
PHP

@extends('layout.master-mhs')
@push('plugin-styles')
@endpush
@section('content')
<div class="main-content-container container-fluid">
<div class="page-header row no-gutters">
<div class="col-12 col-sm-4 text-center text-sm-left mb-0">
<span class="text-uppercase page-subtitle">Profile</span>
<h3 class="page-title">User Profile</h3>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="card card-small mb-4 pt-3">
<div class="card-header border-bottom text-center">
<div class="mb-3 mx-auto">
<img class="user-avatar rounded-circle mr-2" src="{{ auth()->user()->profile_picture ? asset('storage/' . auth()->user()->profile_picture) : asset('assets/img/user.png') }}" alt="User Avatar" width="150" height="150">
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">Detail Akun</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item p-3">
<div class="row">
<div class="col">
<form id="profileForm" action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="form-row">
<div class="form-group col-md-12">
<label for="nama">Nama Lengkap</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Nama lengkap"
value="{{ auth()->user()->name }}" readonly>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="nim">NIM</label>
<input type="text" class="form-control" id="nim" name="nim" placeholder="NIM"
value="{{ auth()->user()->nim }}" readonly>
</div>
<div class="form-group col-md-6">
<label for="angkatan">Angkatan</label>
<input type="text" class="form-control" id="angkatan" name="angkatan" placeholder="Angkatan"
value="{{ auth()->user()->angkatan }}" readonly>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email"
value="{{ auth()->user()->email }}" readonly>
</div>
<div class="form-group col-md-6">
<label for="telp">No Telepon</label>
<input type="text" class="form-control" id="telp" name="phone_number" placeholder="No. Hanphone"
value="{{ auth()->user()->phone_number }}" readonly>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="telp">Akun Github</label>
<input type="text" class="form-control" id="github" name="akun_github" placeholder="Akun Github"
value="{{ auth()->user()->akun_github }}" readonly>
</div>
<div class="form-group col-md-6">
<label for="telp">Akun Linkedin</label>
<input type="text" class="form-control" id="linkedin" name="akun_linkedin" placeholder="Akun Linkedin"
value="{{ auth()->user()->akun_linkedin }}" readonly>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="alamat">Alamat</label>
<textarea class="form-control" id="alamat" name="address" rows="3"
readonly>{{ auth()->user()->address }}</textarea>
</div>
</div>
<div class="form-row upload--foto">
<div class="form-group col-12">
<label for="foto">Foto Profile</label>
<input id="foto" name="profile_picture" type="file" accept=".png, .jpeg, .jpg" disabled>
</div>
</div>
<button id="editButton" type="button" class="btn btn-dark btn-fw">Edit</button>
<button id="saveButton" name="save" value="Save" type="submit" class="btn btn-primary btn-fw"
style="display: none;">Save</button>
</form>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="successModalLabel">Success</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Profil berhasil diperbarui.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="errorModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Error</h5>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<p id="errorMessage"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@endsection
@push('plugin-scripts')
<sripct src="{{asset('assets/plugins/chartjs/chart.min.js')}}"></script>
<sripct src="{{asset('assets/plugins/jquery-sparkline/jquery.sparkline.min.js')}}"></script>
@endpush
@push('custom-scripts')
<script>
$(document).ready(function(){
@if ($errors->any())
$('#errorMessage').text("{{ $errors->first() }}");
$('#errorModal').modal('show');
@endif
@if (session('success'))
$('#successModal').modal('show');
@endif
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const profileForm = document.getElementById('profileForm');
const editButton = document.getElementById('editButton');
const saveButton = document.getElementById('saveButton');
const editableFields = profileForm.querySelectorAll('input[id=email], input[id=telp], input[id=github], input[id=linkedin], textarea[id=alamat], input[id=foto]');
editButton.addEventListener('click', function () {
// Aktifkan hanya field yang bisa di-edit
editableFields.forEach(field => {
field.removeAttribute('readonly');
field.removeAttribute('disabled');
});
// Aktifkan tombol untuk menyimpan
editButton.style.display = 'none';
saveButton.style.display = 'inline-block';
});
});
</script>
@endpush