211 lines
13 KiB
PHP
211 lines
13 KiB
PHP
@extends('layouts.dashboard')
|
|
|
|
@section('content')
|
|
<div class="container mx-auto py-6">
|
|
<div class="max-w-2xl mx-auto">
|
|
<!-- Header Section -->
|
|
<div class="mb-8 text-center">
|
|
<h1 class="text-3xl font-bold text-[#2C7A7B] mb-2">Profil Saya</h1>
|
|
<p class="text-gray-600">Kelola informasi profil dan keamanan akun Anda</p>
|
|
</div>
|
|
|
|
@if (session('success'))
|
|
<div class="p-4 mb-6 text-green-700 bg-green-100 border-l-4 border-green-500 rounded">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-check-circle"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm">{{ session('success') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if ($errors->any())
|
|
<div class="p-4 mb-6 text-red-700 bg-red-100 border-l-4 border-red-500 rounded">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-exclamation-circle"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm font-medium">Terjadi kesalahan:</p>
|
|
<ul class="mt-2 text-sm list-disc list-inside">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Profile Form -->
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<form method="POST" action="{{ route('profile.update') }}" class="space-y-6" x-data="{ editing: false }">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<!-- Profile Picture Section -->
|
|
<div class="flex items-center justify-center mb-8">
|
|
<div class="relative">
|
|
<div class="w-24 h-24 bg-[#2C7A7B]/10 rounded-full flex items-center justify-center">
|
|
<i class="fas fa-user-circle text-5xl text-[#2C7A7B]"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Personal Information Section -->
|
|
<div class="space-y-6">
|
|
<div class="flex justify-between items-center border-b pb-2">
|
|
<h2 class="text-xl font-semibold text-[#2C7A7B]">Informasi Pribadi</h2>
|
|
<button type="button"
|
|
@click="editing = !editing"
|
|
class="px-4 py-2 text-sm font-medium text-[#2C7A7B] bg-[#2C7A7B]/10 rounded-md hover:bg-[#2C7A7B]/20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#2C7A7B] transition-colors">
|
|
<span x-text="editing ? 'Batal Edit' : 'Edit Profil'"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="nama" class="block text-sm font-medium text-gray-700">Nama</label>
|
|
<div class="mt-1 relative rounded-md shadow-sm">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<i class="fas fa-user text-gray-400"></i>
|
|
</div>
|
|
<input type="text" name="nama" id="nama" value="{{ old('nama', $user->nama) }}"
|
|
:disabled="!editing"
|
|
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-[#2C7A7B] focus:border-[#2C7A7B] @error('nama') border-red-500 @enderror"
|
|
:class="{'bg-gray-50 text-gray-500': !editing}">
|
|
</div>
|
|
@error('nama')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
|
|
<div class="mt-1 relative rounded-md shadow-sm">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<i class="fas fa-envelope text-gray-400"></i>
|
|
</div>
|
|
<input type="email" name="email" id="email" value="{{ old('email', $user->email) }}"
|
|
:disabled="!editing"
|
|
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-[#2C7A7B] focus:border-[#2C7A7B] @error('email') border-red-500 @enderror"
|
|
:class="{'bg-gray-50 text-gray-500': !editing}">
|
|
</div>
|
|
@error('email')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="nomor_telp" class="block text-sm font-medium text-gray-700">Nomor Telepon</label>
|
|
<div class="mt-1 relative rounded-md shadow-sm">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<i class="fas fa-phone text-gray-400"></i>
|
|
</div>
|
|
<input type="text" name="nomor_telp" id="nomor_telp" value="{{ old('nomor_telp', $user->nomor_telp) }}"
|
|
:disabled="!editing"
|
|
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-[#2C7A7B] focus:border-[#2C7A7B] @error('nomor_telp') border-red-500 @enderror"
|
|
:class="{'bg-gray-50 text-gray-500': !editing}"
|
|
pattern="[0-9]*"
|
|
oninput="this.value = this.value.replace(/[^0-9]/g, '')"
|
|
placeholder="Contoh: 081234567890">
|
|
</div>
|
|
@error('nomor_telp')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="alamat" class="block text-sm font-medium text-gray-700">Alamat</label>
|
|
<div class="mt-1 relative rounded-md shadow-sm">
|
|
<div class="absolute top-3 left-3 flex items-start pointer-events-none">
|
|
<i class="fas fa-map-marker-alt text-gray-400"></i>
|
|
</div>
|
|
<textarea name="alamat" id="alamat" rows="3"
|
|
:disabled="!editing"
|
|
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-[#2C7A7B] focus:border-[#2C7A7B] @error('alamat') border-red-500 @enderror"
|
|
:class="{'bg-gray-50 text-gray-500': !editing}"
|
|
placeholder="Masukkan alamat lengkap Anda">{{ old('alamat', $user->alamat) }}</textarea>
|
|
</div>
|
|
@error('alamat')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div x-show="editing" class="pt-4">
|
|
<button type="submit" class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#2C7A7B] hover:bg-[#1D5354] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#2C7A7B] transition-colors">
|
|
<i class="fas fa-save mr-2"></i>
|
|
Simpan Perubahan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Password Section -->
|
|
<div class="mt-8 pt-8 border-t" x-data="{ showPasswordForm: false }">
|
|
<div class="flex justify-between items-center border-b pb-2">
|
|
<h2 class="text-xl font-semibold text-[#2C7A7B]">Ubah Password</h2>
|
|
<button type="button"
|
|
@click="showPasswordForm = !showPasswordForm"
|
|
class="px-4 py-2 text-sm font-medium text-[#2C7A7B] bg-[#2C7A7B]/10 rounded-md hover:bg-[#2C7A7B]/20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#2C7A7B] transition-colors">
|
|
<span x-text="showPasswordForm ? 'Batal' : 'Ubah Password'"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<form method="POST" action="{{ route('profile.update') }}" class="space-y-6" x-show="showPasswordForm">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div>
|
|
<label for="current_password" class="block text-sm font-medium text-gray-700">Password Saat Ini</label>
|
|
<div class="mt-1 relative rounded-md shadow-sm">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<i class="fas fa-lock text-gray-400"></i>
|
|
</div>
|
|
<input type="password" name="current_password" id="current_password"
|
|
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-[#2C7A7B] focus:border-[#2C7A7B] @error('current_password') border-red-500 @enderror">
|
|
</div>
|
|
@error('current_password')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="new_password" class="block text-sm font-medium text-gray-700">Password Baru</label>
|
|
<div class="mt-1 relative rounded-md shadow-sm">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<i class="fas fa-key text-gray-400"></i>
|
|
</div>
|
|
<input type="password" name="new_password" id="new_password"
|
|
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-[#2C7A7B] focus:border-[#2C7A7B] @error('new_password') border-red-500 @enderror">
|
|
</div>
|
|
@error('new_password')
|
|
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="new_password_confirmation" class="block text-sm font-medium text-gray-700">Konfirmasi Password Baru</label>
|
|
<div class="mt-1 relative rounded-md shadow-sm">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<i class="fas fa-key text-gray-400"></i>
|
|
</div>
|
|
<input type="password" name="new_password_confirmation" id="new_password_confirmation"
|
|
class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:ring-[#2C7A7B] focus:border-[#2C7A7B]">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-4">
|
|
<button type="submit" class="w-full flex justify-center items-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#2C7A7B] hover:bg-[#1D5354] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#2C7A7B] transition-colors">
|
|
<i class="fas fa-key mr-2"></i>
|
|
Update Password
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|