286 lines
18 KiB
PHP
286 lines
18 KiB
PHP
@extends('layouts.account', ['title' => __('account_info.page_title')])
|
|
|
|
@section('content')
|
|
<!-- Personal info content -->
|
|
<div class="col-lg-9">
|
|
<div class="ps-lg-3 ps-xl-0">
|
|
<!-- Page title -->
|
|
<h1 class="h2 mb-1 mb-sm-2">{{ __('account_info.personal_info') }}</h1>
|
|
<!-- Basic info -->
|
|
<div class="border-bottom py-4">
|
|
<div class="nav flex-nowrap align-items-center justify-content-between pb-1 mb-3">
|
|
<h2 class="h6 mb-0">{{ __('account_info.basic_info') }}</h2>
|
|
<a aria-controls="basicInfoPreview basicInfoEdit" aria-expanded="false"
|
|
class="nav-link hiding-collapse-toggle text-decoration-underline p-0 collapsed"
|
|
data-bs-toggle="collapse" href=".basic-info">{{ __('account_info.edit') }}</a>
|
|
</div>
|
|
<div class="collapse basic-info @if(session('error') || $errors->has('name') || $errors->has('email') || $errors->has('phone') || $errors->has('birth_date') || $errors->has('photo')) @else show @endif" id="basicInfoPreview">
|
|
<ul class="list-unstyled fs-sm m-0">
|
|
<li>{{ auth()->user()->name }}</li>
|
|
<li>{{ auth()->user()->email }}</li>
|
|
{{-- <li>English</li> --}}
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="collapse basic-info @if(session('error') || $errors->has('name') || $errors->has('email') || $errors->has('phone') || $errors->has('birth_date') || $errors->has('photo')) show @endif" id="basicInfoEdit">
|
|
<form class="row g-3 g-sm-4 needs-validation" novalidate="" enctype="multipart/form-data" method="POST" action="{{ route('profile.update') }}">
|
|
@csrf
|
|
|
|
@if(session('error'))
|
|
<div class="alert alert-danger" role="alert">
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
<div class="col-sm-12">
|
|
<label class="form-label">{{ __('account_info.profile_photo') }}</label>
|
|
<div class="d-flex align-items-center gap-4">
|
|
<div class="position-relative">
|
|
<div class="avatar avatar-lg" style="aspect-ratio: 1/1; overflow: hidden; max-width: 300px; width: 100%; height: auto;">
|
|
@if(auth()->user()->photo)
|
|
<img src="{{ asset('storage/' . auth()->user()->photo) }}" alt="{{ auth()->user()->name }}" class="avatar-img rounded-circle" style="width: 100%; height: 100%; object-fit: cover;" onerror="this.src='{{ asset('img/photo-placeholder.png') }}'">
|
|
@else
|
|
<img src="{{ asset('img/photo-placeholder.png') }}" alt="{{ auth()->user()->name }}" class="avatar-img rounded-circle" style="width: 100%; height: 100%; object-fit: cover;">
|
|
@endif
|
|
</div>
|
|
<label for="photo-upload" class="btn btn-sm btn-primary position-absolute bottom-0 end-0 rounded-circle" style="width: 32px; height: 32px; padding: 0;">
|
|
<i class="ci-camera" style="font-size: 14px;"></i>
|
|
</label>
|
|
<input type="file" id="photo-upload" name="photo" class="d-none" accept="image/*" onchange="previewAvatar(event)">
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<p class="fs-sm text-muted mb-1">{{ __('account_info.photo_requirements') }}</p>
|
|
<p class="fs-sm text-muted mb-0">JPG, PNG or GIF (Max 2MB)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="fn">{{ __('account_info.name') }}</label>
|
|
<div class="position-relative">
|
|
<input class="form-control" id="fn" name="name" required="" type="text"
|
|
value="{{ auth()->user()->name }}" />
|
|
<div class="invalid-feedback">{{ __('account_info.please_enter_first_name') }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="email">{{ __('account_info.email_address') }}</label>
|
|
<div class="position-relative">
|
|
<input class="form-control" id="email" name="email" required="" type="email"
|
|
value="{{ auth()->user()->email ?? __('account_info.not_set') }}" />
|
|
<div class="invalid-feedback">{{ __('account_info.please_enter_valid_email') }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="phone">{{ __('account_info.phone_number') }}</label>
|
|
<div class="position-relative">
|
|
<input class="form-control"
|
|
id="phone" name="phone" placeholder="" required="" type="text"
|
|
value="{{ auth()->user()->phone ?? __('account_info.not_set') }}" />
|
|
<div class="invalid-feedback">{{ __('account_info.please_enter_phone_number') }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="birthdate">{{ __('account_info.date_of_birth') }}</label>
|
|
<div class="position-relative">
|
|
<input class="form-control form-icon-end"
|
|
name="birth_date"
|
|
data-datepicker='{
|
|
"dateFormat": "Y-m-d",
|
|
"defaultDate": "{{ auth()->user()->customer->date_of_birth != null ? date('Y-m-d', strtotime(auth()->user()->customer->date_of_birth)) : '' }}"
|
|
}'
|
|
placeholder="{{ __('account_info.choose_date') }}" type="text" />
|
|
<i class="ci-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
|
|
</div>
|
|
</div>
|
|
{{-- <div class="col-sm-6">
|
|
<label class="form-label">{{ __('account_info.language') }}</label>
|
|
<select class="form-select"
|
|
data-select='{
|
|
"placeholderValue": "{{ __('account_info.select_language') }}",
|
|
"choices": [
|
|
{
|
|
"value": "",
|
|
"label": "{{ __('account_info.select_language') }}",
|
|
"placeholder": true
|
|
},
|
|
{
|
|
"value": "English",
|
|
"label": "<div class=\"d-flex align-items-center\"><img src=\"/img/flags/en-us.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"English\"> {{ __('account_info.english') }}</div>",
|
|
"selected": true
|
|
},
|
|
{
|
|
"value": "Français",
|
|
"label": "<div class=\"d-flex align-items-center\"><img src=\"/img/flags/fr.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Français\"> {{ __('account_info.french') }}</div>"
|
|
},
|
|
{
|
|
"value": "Deutsch",
|
|
"label": "<div class=\"d-flex align-items-center\"><img src=\"/img/flags/de.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Deutsch\"> {{ __('account_info.german') }}</div>"
|
|
},
|
|
{
|
|
"value": "Italiano",
|
|
"label": "<div class=\"d-flex align-items-center\"><img src=\"/img/flags/it.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Italiano\"> {{ __('account_info.italian') }}</div>"
|
|
}
|
|
]
|
|
}'
|
|
data-select-template="true"></select>
|
|
</div> --}}
|
|
<div class="col-12">
|
|
<div class="d-flex gap-3 pt-2 pt-sm-0">
|
|
<button class="btn btn-primary" type="submit">{{ __('account_info.save_changes') }}</button>
|
|
<button aria-controls="basicInfoPreview basicInfoEdit" aria-expanded="true"
|
|
class="btn btn-secondary" data-bs-target=".basic-info" data-bs-toggle="collapse"
|
|
type="button">{{ __('account_info.close') }}</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- Contact -->
|
|
{{-- <div class="border-bottom py-4">
|
|
<div class="nav flex-nowrap align-items-center justify-content-between pb-1 mb-3">
|
|
<div class="d-flex align-items-center gap-3 me-4">
|
|
<h2 class="h6 mb-0">{{ __('account_info.contact') }}</h2>
|
|
</div>
|
|
<a aria-controls="contactInfoPreview contactInfoEdit" aria-expanded="false"
|
|
class="nav-link hiding-collapse-toggle text-decoration-underline p-0 collapsed"
|
|
data-bs-toggle="collapse" href=".contact-info">{{ __('account_info.edit') }}</a>
|
|
</div>
|
|
<div class="collapse contact-info show" id="contactInfoPreview">
|
|
<ul class="list-unstyled fs-sm m-0">
|
|
<li class="mb-1">{{ auth()->user()->email }}</li>
|
|
<li>{{ auth()->user()->phone ?? __('account_info.not_set') }}<span class="text-success ms-1">{{ __('account_info.verified') }}</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="collapse contact-info" id="contactInfoEdit">
|
|
<form class="row g-3 g-sm-4 needs-validation" novalidate="">
|
|
|
|
<div class="col-12">
|
|
<div class="d-flex gap-3 pt-2 pt-sm-0">
|
|
<button class="btn btn-primary" type="submit">{{ __('account_info.save_changes') }}</button>
|
|
<button aria-controls="contactInfoPreview contactInfoEdit" aria-expanded="true"
|
|
class="btn btn-secondary" data-bs-target=".contact-info" data-bs-toggle="collapse"
|
|
type="button">{{ __('account_info.close') }}</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div> --}}
|
|
<!-- Password -->
|
|
{{-- <div class="border-bottom py-4">
|
|
<div class="nav flex-nowrap align-items-center justify-content-between pb-1 mb-3">
|
|
<div class="d-flex align-items-center gap-3 me-4">
|
|
<h2 class="h6 mb-0">{{ __('account_info.password') }}</h2>
|
|
</div>
|
|
<a aria-controls="passChangePreview passChangeEdit" aria-expanded="false"
|
|
class="nav-link hiding-collapse-toggle text-decoration-underline p-0 collapsed"
|
|
data-bs-toggle="collapse" href=".password-change">{{ __('account_info.edit') }}</a>
|
|
</div>
|
|
<div class="collapse password-change @if(session('error') || $errors->has('current_password') || $errors->has('password') || $errors->has('password_confirmation')) @else show @endif" id="passChangePreview">
|
|
<ul class="list-unstyled fs-sm m-0">
|
|
<li>**************</li>
|
|
</ul>
|
|
</div>
|
|
<div class="collapse password-change @if(session('error') || $errors->has('current_password') || $errors->has('password') || $errors->has('password_confirmation')) show @endif" id="passChangeEdit">
|
|
<form class="row g-3 g-sm-4 needs-validation" novalidate="" method="POST" action="{{ route('profile.password.update') }}">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
@if(session('error'))
|
|
<div class="alert alert-danger" role="alert">
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('success'))
|
|
<div class="alert alert-success" role="alert">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="current-password">{{ __('account_info.current_password') }}</label>
|
|
<div class="password-toggle">
|
|
<input class="form-control" id="current-password" name="current_password"
|
|
placeholder="{{ __('account_info.enter_current_password') }}" required="" type="password" />
|
|
<label aria-label="Show/hide password" class="password-toggle-button">
|
|
<input class="btn-check" type="checkbox" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="new-password">{{ __('account_info.new_password') }}</label>
|
|
<div class="password-toggle">
|
|
<input class="form-control" id="new-password" name="password" placeholder="{{ __('account_info.create_new_password') }}"
|
|
required="" type="password" />
|
|
<label aria-label="Show/hide password" class="password-toggle-button">
|
|
<input class="btn-check" type="checkbox" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="confirm-password">{{ __('account_info.confirm_password') }}</label>
|
|
<div class="password-toggle">
|
|
<input class="form-control" id="confirm-password" name="password_confirmation" placeholder="{{ __('account_info.confirm_new_password') }}"
|
|
required="" type="password" />
|
|
<label aria-label="Show/hide password" class="password-toggle-button">
|
|
<input class="btn-check" type="checkbox" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="d-flex gap-3 pt-2 pt-sm-0">
|
|
<button class="btn btn-primary" type="submit">{{ __('account_info.save_changes') }}</button>
|
|
<button aria-controls="passChangePreview passChangeEdit" aria-expanded="true"
|
|
class="btn btn-secondary" data-bs-target=".password-change" data-bs-toggle="collapse"
|
|
type="button">{{ __('account_info.close') }}</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div> --}}
|
|
<!-- Delete account -->
|
|
{{-- <div class="pt-3 mt-2 mt-sm-3">
|
|
<h2 class="h6">{{ __('account_info.delete_account') }}</h2>
|
|
<p class="fs-sm">{{ __('account_info.delete_account_description') }}</p>
|
|
<a class="text-danger fs-sm fw-medium" href="#!">{{ __('account_info.delete_account') }}</a>
|
|
</div> --}}
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
function previewAvatar(event) {
|
|
const file = event.target.files[0];
|
|
if (file) {
|
|
// Check file size (2MB limit)
|
|
if (file.size > 2 * 1024 * 1024) {
|
|
alert('File size must be less than 2MB');
|
|
event.target.value = '';
|
|
return;
|
|
}
|
|
|
|
// Check file type
|
|
if (!file.type.match('image.*')) {
|
|
alert('Please select an image file');
|
|
event.target.value = '';
|
|
return;
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
const avatarImg = document.querySelector('.avatar-img');
|
|
if (avatarImg) {
|
|
avatarImg.src = e.target.result;
|
|
}
|
|
}
|
|
reader.readAsDataURL(file);
|
|
}
|
|
}
|
|
</script>
|
|
@endsection
|