134 lines
7.9 KiB
PHP
134 lines
7.9 KiB
PHP
@extends('layouts.frontend')
|
|
|
|
@section('title', 'Profil Saya')
|
|
|
|
@section('content')
|
|
<div class="container py-5 mt-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<div class="card border-0 shadow-sm rounded-4">
|
|
<div class="card-header bg-white py-3 border-bottom-0">
|
|
<h4 class="mb-0 fw-bold">Edit Profil</h4>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
@if (session('success'))
|
|
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
|
{{ session('success') }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('pembeli.profile.update') }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="row">
|
|
<div class="col-md-4 text-center mb-4 d-flex flex-column align-items-center">
|
|
<div class="position-relative mb-3">
|
|
<img id="avatar-preview"
|
|
src="{{ $user->foto ? asset('storage/' . $user->foto) : asset('template/frontend/img/avatar.jpg') }}"
|
|
class="rounded-circle shadow-sm border"
|
|
style="width: 150px; height: 150px; object-fit: cover;">
|
|
|
|
<div class="position-absolute bottom-0 end-0 bg-primary rounded-circle p-2 border border-white"
|
|
style="width: 35px; height: 35px; display: flex; align-items: center; justify-content: center;">
|
|
<i class="fas fa-camera text-white small"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="btn btn-sm btn-outline-primary rounded-pill px-3" for="avatar-input">
|
|
<i class="fas fa-upload me-1"></i> Pilih Foto Baru
|
|
</label>
|
|
<input type="file" name="foto" id="avatar-input" hidden accept="image/*"
|
|
onchange="previewImage()">
|
|
</div>
|
|
<small class="text-muted mt-2" style="font-size: 11px;">Format: JPG, PNG (Max.
|
|
2MB)</small>
|
|
</div>
|
|
|
|
<div class="col-md-8">
|
|
<div class="mb-3">
|
|
<label class="form-label fw-bold small text-muted">NAMA LENGKAP</label>
|
|
<input type="text" name="nama_lengkap" class="form-control rounded-pill px-3"
|
|
value="{{ $user->nama_lengkap }}" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-bold small text-muted">EMAIL</label>
|
|
<input type="email" name="email" class="form-control rounded-pill px-3 bg-light"
|
|
value="{{ $user->email }}" required readonly>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-bold small text-muted">NOMOR HP</label>
|
|
<input type="text" name="no_hp" class="form-control rounded-pill px-3"
|
|
value="{{ $user->no_hp }}" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-bold small text-muted">ALAMAT PENGIRIMAN DEFAULT</label>
|
|
<textarea name="alamat" class="form-control rounded-4 p-3" rows="3" required>{{ $user->alamat }}</textarea>
|
|
</div>
|
|
|
|
<div class="accordion mt-4" id="accordionPassword">
|
|
<div class="accordion-item border-0">
|
|
<h2 class="accordion-header">
|
|
<button
|
|
class="accordion-button collapsed bg-light rounded-3 shadow-none fw-bold text-dark"
|
|
type="button" data-bs-toggle="collapse" data-bs-target="#collapsePass">
|
|
<i class="fas fa-lock me-2 text-primary"></i> Ganti Password (Opsional)
|
|
</button>
|
|
</h2>
|
|
<div id="collapsePass" class="accordion-collapse collapse"
|
|
data-bs-parent="#accordionPassword">
|
|
<div class="accordion-body px-0">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label small text-muted">Password Baru</label>
|
|
<input type="password" name="password"
|
|
class="form-control rounded-pill px-3">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label small text-muted">Ulangi
|
|
Password</label>
|
|
<input type="password" name="password_confirmation"
|
|
class="form-control rounded-pill px-3">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid mt-4">
|
|
<button type="submit" class="btn btn-primary rounded-pill py-3 fw-bold shadow-sm">
|
|
<i class="fas fa-save me-2"></i> Simpan Perubahan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('js')
|
|
<script>
|
|
function previewImage() {
|
|
const input = document.getElementById('avatar-input');
|
|
const preview = document.getElementById('avatar-preview');
|
|
|
|
if (input.files && input.files[0]) {
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = function(e) {
|
|
preview.src = e.target.result;
|
|
}
|
|
|
|
reader.readAsDataURL(input.files[0]);
|
|
}
|
|
}
|
|
</script>
|
|
@endsection
|