206 lines
12 KiB
PHP
206 lines
12 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Pengaturan Akun')
|
|
|
|
@section('content')
|
|
<div class="max-w-3xl mx-auto space-y-6">
|
|
|
|
<x-page-header title="Pengaturan Akun" subtitle="Kelola informasi profil dan keamanan akun Anda." />
|
|
|
|
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
|
<div class="p-6">
|
|
<form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="flex flex-col md:flex-row gap-8">
|
|
|
|
<div class="flex flex-col items-center space-y-4">
|
|
<div class="relative w-32 h-32">
|
|
@if(auth()->user()->foto)
|
|
<img src="{{ asset('storage/' . auth()->user()->foto) }}"
|
|
class="w-full h-full rounded-full object-cover border-4 border-slate-100 shadow-md"
|
|
id="preview-foto">
|
|
@else
|
|
<div class="w-full h-full rounded-full bg-slate-100 flex items-center justify-center text-slate-400 border-4 border-slate-50 shadow-sm"
|
|
id="placeholder-foto">
|
|
<svg class="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
|
</svg>
|
|
</div>
|
|
<img src=""
|
|
class="w-full h-full rounded-full object-cover border-4 border-slate-100 shadow-md hidden"
|
|
id="preview-foto-new">
|
|
@endif
|
|
|
|
<label for="foto-input"
|
|
class="absolute bottom-0 right-0 p-2 bg-white rounded-full shadow-lg border border-slate-200 cursor-pointer hover:bg-slate-50 transition">
|
|
<svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z">
|
|
</path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
</label>
|
|
<input type="file" id="foto-input" name="foto" class="hidden" accept="image/*">
|
|
</div>
|
|
<div class="text-center">
|
|
<h3 class="font-bold text-slate-800">{{ auth()->user()->nama_lengkap }}</h3>
|
|
<p class="text-sm text-slate-500">{{ auth()->user()->role->nama_role ?? 'User' }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 space-y-4">
|
|
<x-input label="Nama Lengkap" name="nama_lengkap" :value="old('nama_lengkap', auth()->user()->nama_lengkap)" required />
|
|
|
|
<x-input type="email" label="Alamat Email" name="email" :value="old('email', auth()->user()->email)" required />
|
|
|
|
<div class="pt-4 border-t border-slate-100">
|
|
<h4 class="text-sm font-bold text-slate-800 mb-3 uppercase tracking-wide">Ganti Password
|
|
</h4>
|
|
<p class="text-xs text-slate-500 mb-4">Kosongkan jika tidak ingin mengubah password.</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<x-input type="password" label="Password Baru" name="password"
|
|
placeholder="Minimal 8 karakter" />
|
|
<x-input type="password" label="Konfirmasi Password" name="password_confirmation"
|
|
placeholder="Ulangi password baru" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end pt-6 border-t border-slate-100">
|
|
<button type="submit"
|
|
class="px-6 py-2.5 bg-primary text-white font-semibold rounded-xl hover:bg-primary/90 transition shadow-lg shadow-indigo-500/20">
|
|
Simpan Perubahan
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Modal Crop Foto --}}
|
|
<div id="crop-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-gray-500/50 p-4">
|
|
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden" onclick="event.stopPropagation()">
|
|
{{-- Header --}}
|
|
<div class="flex items-center justify-between px-6 py-4 border-b border-slate-100">
|
|
<div>
|
|
<h3 class="text-lg font-bold text-slate-800">Atur Foto Profil</h3>
|
|
<p class="text-xs text-slate-500 mt-0.5">Geser dan zoom untuk mengatur posisi foto</p>
|
|
</div>
|
|
<button id="crop-cancel-btn" type="button"
|
|
class="p-2 rounded-lg hover:bg-slate-100 transition text-slate-400 hover:text-slate-600">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{{-- Crop Area --}}
|
|
<div class="relative bg-slate-900 flex items-center justify-center" style="height: 380px;">
|
|
<img id="crop-image" src="" alt="Crop Preview" class="max-w-full max-h-full">
|
|
</div>
|
|
|
|
{{-- Toolbar --}}
|
|
<div class="flex items-center justify-center gap-2 px-6 py-3 bg-slate-50 border-t border-b border-slate-100">
|
|
<button id="crop-rotate-left" type="button"
|
|
class="p-2.5 rounded-xl hover:bg-white hover:shadow-sm transition text-slate-500 hover:text-slate-700"
|
|
title="Putar Kiri">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h1l1-2m0 0l2-2m-2 2l2 2m6-8a9 9 0 11-4.2 1.1"></path>
|
|
</svg>
|
|
</button>
|
|
<button id="crop-rotate-right" type="button"
|
|
class="p-2.5 rounded-xl hover:bg-white hover:shadow-sm transition text-slate-500 hover:text-slate-700"
|
|
title="Putar Kanan">
|
|
<svg class="w-5 h-5 transform scale-x-[-1]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h1l1-2m0 0l2-2m-2 2l2 2m6-8a9 9 0 11-4.2 1.1"></path>
|
|
</svg>
|
|
</button>
|
|
<div class="w-px h-6 bg-slate-200 mx-1"></div>
|
|
<button id="crop-zoom-in" type="button"
|
|
class="p-2.5 rounded-xl hover:bg-white hover:shadow-sm transition text-slate-500 hover:text-slate-700"
|
|
title="Zoom In">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7"></path>
|
|
</svg>
|
|
</button>
|
|
<button id="crop-zoom-out" type="button"
|
|
class="p-2.5 rounded-xl hover:bg-white hover:shadow-sm transition text-slate-500 hover:text-slate-700"
|
|
title="Zoom Out">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7"></path>
|
|
</svg>
|
|
</button>
|
|
<div class="w-px h-6 bg-slate-200 mx-1"></div>
|
|
<button id="crop-reset" type="button"
|
|
class="p-2.5 rounded-xl hover:bg-white hover:shadow-sm transition text-slate-500 hover:text-slate-700"
|
|
title="Reset">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{{-- Footer --}}
|
|
<div class="flex items-center justify-end gap-3 px-6 py-4">
|
|
<button id="crop-cancel-btn-footer" type="button"
|
|
class="px-5 py-2.5 text-sm font-semibold text-slate-600 bg-slate-100 rounded-xl hover:bg-slate-200 transition"
|
|
onclick="document.getElementById('crop-cancel-btn').click()">
|
|
Batal
|
|
</button>
|
|
<button id="crop-save-btn" type="button"
|
|
class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-primary rounded-xl hover:bg-primary/90 transition shadow-lg shadow-indigo-500/20">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
Simpan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Cropper.js CDN --}}
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
|
|
<script src="{{ asset('js/image-cropper.js') }}"></script>
|
|
|
|
{{-- Cropper circular overlay --}}
|
|
<style>
|
|
.cropper-view-box,
|
|
.cropper-face {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.cropper-view-box {
|
|
outline: 3px solid rgba(255, 255, 255, 0.8);
|
|
outline-offset: 0;
|
|
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.cropper-face {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.cropper-dashed,
|
|
.cropper-point,
|
|
.cropper-line {
|
|
display: none !important;
|
|
}
|
|
|
|
.cropper-crop-box {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.cropper-modal {
|
|
background-color: rgba(15, 23, 42, 0.85);
|
|
}
|
|
</style>
|
|
@endsection
|