Reservasi-Cafe/resources/views/profile/edit.blade.php

167 lines
10 KiB
PHP

@extends('layouts.user.app')
@section('content')
<div class="container mx-auto px-4 py-8">
<div class="max-w-3xl mx-auto">
<!-- Profile Information -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden mb-6">
<div class="bg-[#8B0000] px-6 py-4">
<h2 class="text-xl font-bold text-white">Informasi Profil</h2>
</div>
<div class="p-6">
<form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">
@csrf
@method('PUT')
<!-- Profile Picture -->
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">Foto Profil</label>
<div class="flex items-center space-x-6">
<div class="shrink-0">
@if($user->profile_picture)
<img class="h-24 w-24 object-cover rounded-full" src="{{ Storage::url($user->profile_picture) }}" alt="{{ $user->name }}">
@else
<div class="h-24 w-24 rounded-full bg-gray-200 flex items-center justify-center">
<i class="fas fa-user text-3xl text-gray-400"></i>
</div>
@endif
</div>
<div class="flex-1">
<input type="file" name="profile_picture" id="profile_picture" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-[#8B0000] file:text-white hover:file:bg-[#660000]">
@if($user->profile_picture)
<button type="button" onclick="document.getElementById('delete-picture-form').submit();" class="mt-2 text-sm text-red-600 hover:text-red-800">
<i class="fas fa-trash-alt mr-1"></i> Hapus Foto
</button>
@endif
</div>
</div>
@error('profile_picture')
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<!-- Name -->
<div class="mb-6">
<label for="name" class="block text-sm font-medium text-gray-700 mb-2">Nama</label>
<input type="text" name="name" id="name" value="{{ old('name', $user->name) }}" class="block w-full rounded-md shadow-sm border-gray-300 focus:border-[#8B0000] focus:ring focus:ring-[#8B0000] focus:ring-opacity-50">
@error('name')
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<!-- Email -->
<div class="mb-6">
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
<input type="email" name="email" id="email" value="{{ old('email', $user->email) }}" class="block w-full rounded-md shadow-sm border-gray-300 focus:border-[#8B0000] focus:ring focus:ring-[#8B0000] focus:ring-opacity-50">
@error('email')
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<!-- Phone -->
<div class="mb-6">
<label for="phone" class="block text-sm font-medium text-gray-700 mb-2">Nomor Telepon</label>
<input type="text" name="phone" id="phone" value="{{ old('phone', $user->phone) }}" class="block w-full rounded-md shadow-sm border-gray-300 focus:border-[#8B0000] focus:ring focus:ring-[#8B0000] focus:ring-opacity-50">
@error('phone')
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<!-- Address -->
<div class="mb-6">
<label for="address" class="block text-sm font-medium text-gray-700 mb-2">Alamat</label>
<textarea name="address" id="address" rows="3" class="block w-full rounded-md shadow-sm border-gray-300 focus:border-[#8B0000] focus:ring focus:ring-[#8B0000] focus:ring-opacity-50">{{ old('address', $user->address) }}</textarea>
@error('address')
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<!-- Birth Date -->
<div class="mb-6">
<label for="birth_date" class="block text-sm font-medium text-gray-700 mb-2">Tanggal Lahir</label>
<input type="date" name="birth_date" id="birth_date" value="{{ old('birth_date', $user->birth_date?->format('Y-m-d')) }}" class="block w-full rounded-md shadow-sm border-gray-300 focus:border-[#8B0000] focus:ring focus:ring-[#8B0000] focus:ring-opacity-50">
@error('birth_date')
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<!-- Gender -->
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">Jenis Kelamin</label>
<div class="mt-2 space-y-2">
<div class="flex items-center">
<input type="radio" name="gender" id="gender_male" value="male" {{ old('gender', $user->gender) === 'male' ? 'checked' : '' }} class="h-4 w-4 text-[#8B0000] focus:ring-[#8B0000] border-gray-300">
<label for="gender_male" class="ml-3 block text-sm font-medium text-gray-700">Laki-laki</label>
</div>
<div class="flex items-center">
<input type="radio" name="gender" id="gender_female" value="female" {{ old('gender', $user->gender) === 'female' ? 'checked' : '' }} class="h-4 w-4 text-[#8B0000] focus:ring-[#8B0000] border-gray-300">
<label for="gender_female" class="ml-3 block text-sm font-medium text-gray-700">Perempuan</label>
</div>
</div>
@error('gender')
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<div class="flex justify-end">
<a href="{{ route('profile.show') }}" class="inline-flex items-center px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition mr-4">
<i class="fas fa-times mr-2"></i> Batal
</a>
<button type="submit" class="inline-flex items-center px-4 py-2 bg-[#8B0000] text-white rounded-md hover:bg-[#660000] transition">
<i class="fas fa-save mr-2"></i> Simpan Perubahan
</button>
</div>
</form>
</div>
</div>
<!-- Change Password -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="bg-[#8B0000] px-6 py-4">
<h2 class="text-xl font-bold text-white">Ubah Password</h2>
</div>
<div class="p-6">
<form action="{{ route('profile.password.update') }}" method="POST">
@csrf
@method('PUT')
<div class="mb-6">
<label for="current_password" class="block text-sm font-medium text-gray-700 mb-2">Password Saat Ini</label>
<input type="password" name="current_password" id="current_password" class="block w-full rounded-md shadow-sm border-gray-300 focus:border-[#8B0000] focus:ring focus:ring-[#8B0000] focus:ring-opacity-50">
@error('current_password')
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<div class="mb-6">
<label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password Baru</label>
<input type="password" name="password" id="password" class="block w-full rounded-md shadow-sm border-gray-300 focus:border-[#8B0000] focus:ring focus:ring-[#8B0000] focus:ring-opacity-50">
@error('password')
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<div class="mb-6">
<label for="password_confirmation" class="block text-sm font-medium text-gray-700 mb-2">Konfirmasi Password Baru</label>
<input type="password" name="password_confirmation" id="password_confirmation" class="block w-full rounded-md shadow-sm border-gray-300 focus:border-[#8B0000] focus:ring focus:ring-[#8B0000] focus:ring-opacity-50">
</div>
<div class="flex justify-end">
<button type="submit" class="inline-flex items-center px-4 py-2 bg-[#8B0000] text-white rounded-md hover:bg-[#660000] transition">
<i class="fas fa-key mr-2"></i> Ubah Password
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Hidden form for deleting profile picture -->
<form id="delete-picture-form" action="{{ route('profile.picture.delete') }}" method="POST" class="hidden">
@csrf
@method('DELETE')
</form>
@endsection