120 lines
7.6 KiB
PHP
120 lines
7.6 KiB
PHP
<section>
|
|
<header>
|
|
<h2 class="text-xl font-black text-slate-800 dark:text-white tracking-tight">
|
|
{{ __('Profile Information') }}
|
|
</h2>
|
|
|
|
<p class="mt-1 text-sm font-bold text-slate-400 dark:text-slate-400 uppercase tracking-widest">
|
|
{{ __('Update your account\'s profile information and email address.') }}
|
|
</p>
|
|
</header>
|
|
|
|
<form id="send-verification" method="post" action="{{ route('verification.send') }}">
|
|
@csrf
|
|
</form>
|
|
|
|
<form method="post" action="{{ route('profile.update') }}" class="mt-8 space-y-6" enctype="multipart/form-data">
|
|
@csrf
|
|
@method('patch')
|
|
|
|
<!-- Avatar Upload -->
|
|
<div x-data="{ photoName: null, photoPreview: null }" class="flex flex-col items-center gap-y-4 mb-8 bg-slate-50/50 dark:bg-slate-900/50 p-6 rounded-3xl border border-slate-100 dark:border-slate-800">
|
|
<div class="relative group">
|
|
<!-- Current Avatar / Preview -->
|
|
<div class="size-24 rounded-full overflow-hidden ring-4 ring-white dark:ring-gray-800 shadow-xl">
|
|
<template x-if="! photoPreview">
|
|
<img src="{{ $user->avatar_url }}" class="size-full object-cover" alt="{{ $user->name }}">
|
|
</template>
|
|
<template x-if="photoPreview">
|
|
<img :src="photoPreview" class="size-full object-cover">
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Upload Overlay -->
|
|
<label for="avatar" class="absolute inset-0 flex items-center justify-center bg-black/40 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">
|
|
<svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<input type="file" id="avatar" name="avatar" class="hidden"
|
|
accept="image/*"
|
|
@change="
|
|
photoName = $event.target.files[0].name;
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
photoPreview = e.target.result;
|
|
};
|
|
reader.readAsDataURL($event.target.files[0]);
|
|
">
|
|
<button type="button" @click="$refs.avatarInput.click()" class="text-xs font-black text-cyan-600 dark:text-cyan-500 uppercase tracking-widest hover:text-cyan-700 transition-colors">
|
|
{{ __('Change Avatar') }}
|
|
</button>
|
|
<p class="mt-1 text-[10px] text-slate-400 font-bold uppercase tracking-wider">{{ __('JPG, PNG or GIF. Max 2MB.') }}</p>
|
|
<x-input-error class="mt-2" :messages="$errors->get('avatar')" />
|
|
</div>
|
|
|
|
<!-- Hidden ref for clicking -->
|
|
<input type="file" x-ref="avatarInput" class="hidden" accept="image/*" @change="/* same as above but easier to click */">
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<x-input-label for="name" :value="__('Name')" class="text-xs font-black text-slate-500 uppercase tracking-widest mb-2 ml-1" />
|
|
<input id="name" name="name" type="text" class="py-3 px-4 block w-full border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 rounded-2xl text-sm font-bold text-slate-700 dark:text-slate-200 focus:ring-4 focus:ring-cyan-500/10 focus:border-cyan-500 transition-all outline-none" value="{{ old('name', $user->name) }}" required autofocus autocomplete="name" />
|
|
<x-input-error class="mt-2" :messages="$errors->get('name')" />
|
|
</div>
|
|
|
|
<div>
|
|
<x-input-label for="phone" :value="__('Phone')" class="text-xs font-black text-slate-500 uppercase tracking-widest mb-2 ml-1" />
|
|
<input id="phone" name="phone" type="text" class="py-3 px-4 block w-full border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 rounded-2xl text-sm font-bold text-slate-700 dark:text-slate-200 focus:ring-4 focus:ring-cyan-500/10 focus:border-cyan-500 transition-all outline-none" value="{{ old('phone', $user->phone) }}" autocomplete="tel" />
|
|
<x-input-error class="mt-2" :messages="$errors->get('phone')" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<x-input-label for="email" :value="__('Email')" class="text-xs font-black text-slate-500 uppercase tracking-widest mb-2 ml-1" />
|
|
<input id="email" name="email" type="email" class="py-3 px-4 block w-full border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 rounded-2xl text-sm font-bold text-slate-700 dark:text-slate-200 focus:ring-4 focus:ring-cyan-500/10 focus:border-cyan-500 transition-all outline-none" value="{{ old('email', $user->email) }}" required autocomplete="username" />
|
|
<x-input-error class="mt-2" :messages="$errors->get('email')" />
|
|
|
|
@if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
|
|
<div class="mt-4 p-4 bg-amber-50 dark:bg-amber-900/20 rounded-2xl border border-amber-200 dark:border-amber-900/30">
|
|
<p class="text-xs font-bold text-amber-700 dark:text-amber-400 flex items-center gap-x-2">
|
|
<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
|
|
{{ __('Your email address is unverified.') }}
|
|
</p>
|
|
|
|
<button form="send-verification" class="mt-2 text-xs font-black text-amber-600 dark:text-amber-500 hover:text-amber-700 underline underline-offset-4 decoration-amber-500/30 focus:outline-none transition-colors">
|
|
{{ __('Click here to re-send the verification email.') }}
|
|
</button>
|
|
|
|
@if (session('status') === 'verification-link-sent')
|
|
<p class="mt-2 text-xs font-black text-green-600 dark:text-green-400">
|
|
{{ __('A new verification link has been sent to your email address.') }}
|
|
</p>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4 pt-4">
|
|
<button type="submit" class="btn-luxury-primary px-8">
|
|
<span>{{ __('Save') }}</span>
|
|
</button>
|
|
|
|
@if (session('status') === 'profile-updated')
|
|
<p
|
|
x-data="{ show: true }"
|
|
x-show="show"
|
|
x-transition
|
|
x-init="setTimeout(() => show = false, 2000)"
|
|
class="text-xs font-black text-emerald-500 dark:text-emerald-400 uppercase tracking-widest"
|
|
>{{ __('Saved.') }}</p>
|
|
@endif
|
|
</div>
|
|
</form>
|
|
</section>
|