219 lines
13 KiB
PHP
219 lines
13 KiB
PHP
@extends('frontend.user.layout')
|
|
|
|
@section('section-account')
|
|
<!-- Change Profile Form -->
|
|
<div class="col-span-12 lg:col-span-9 animate__animated animate__fadeIn">
|
|
<form action="{{ route('user.information.store') }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
@method('PUT')
|
|
<div class="bg-white rounded-xl shadow-md mt-5 p-5">
|
|
<div class="border-b border-gray-200 pb-4 mb-6">
|
|
<h2 class="text-lg font-semibold text-gray-800">Cập nhật thông tin cá nhân</h2>
|
|
</div>
|
|
|
|
<input type="hidden" name="method" value="put">
|
|
<!-- Avatar Upload -->
|
|
|
|
<div class="flex justify-center items-center mb-3">
|
|
<div x-data="{ fileName: '', previewUrl: '{{ customer()->avatar ? asset(customer()->avatar) : asset('/images/avatar.png') }}' }" class="w-fit mx-auto text-center">
|
|
|
|
<!-- Preview ảnh -->
|
|
<template x-if="previewUrl">
|
|
<div class="my-3">
|
|
<img :src="previewUrl" alt="Xem trước ảnh"
|
|
class="w-24 h-24 mx-auto object-cover rounded-lg border border-gray-200 dark:border-gray-600" />
|
|
</div>
|
|
</template>
|
|
|
|
<label for="file_input"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-primary hover:bg-primary text-white text-sm font-medium rounded-lg cursor-pointer shadow transition
|
|
duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round" class="lucide lucide-image-up-icon lucide-image-up w-5 h-5">
|
|
<path
|
|
d="M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21" />
|
|
<path d="m14 19.5 3-3 3 3" />
|
|
<path d="M17 22v-5.5" />
|
|
<circle cx="9" cy="9" r="2" />
|
|
</svg>
|
|
Tải ảnh lên
|
|
</label>
|
|
|
|
<input id="file_input" type="file" name="avatar" accept=".jpg,.jpeg,.png" class="hidden"
|
|
@change="
|
|
const file = $event.target.files[0];
|
|
fileName = file?.name || '';
|
|
if (file && file.type.startsWith('image/')) {
|
|
const reader = new FileReader();
|
|
reader.onload = e => previewUrl = e.target.result;
|
|
reader.readAsDataURL(file);
|
|
} else {
|
|
previewUrl = '';
|
|
}
|
|
">
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-3">
|
|
<!-- Profile Fields -->
|
|
<div class="space-y-4">
|
|
<flux:field>
|
|
<flux:label>Họ</flux:label>
|
|
<flux:input wire:model="firstname" name="firstname" type="text" placeholder="Nhập họ"
|
|
value="{{ customer()->firstname ?? '' }}" />
|
|
<flux:error name="firstname" />
|
|
</flux:field>
|
|
<flux:field>
|
|
<flux:label>Tên</flux:label>
|
|
<flux:input wire:model="lastname" name="lastname" type="text" placeholder="Nhập tên"
|
|
value="{{ customer()->lastname ?? '' }}" />
|
|
<flux:error name="lastname" />
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:label>Email</flux:label>
|
|
<flux:input wire:model="email" name="email" type="email" placeholder="Email" disabled
|
|
value="{{ customer()->email ?? '' }}" />
|
|
<flux:error name="email" />
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:label>Giới tính</flux:label>
|
|
<flux:select wire:model="gender" name="gender" placeholder="Chọn giới tính...">
|
|
<flux:select.option value="0">Nam</flux:select.option>
|
|
<flux:select.option value="1">Nữ</flux:select.option>
|
|
</flux:select>
|
|
<flux:error name="gender" />
|
|
</flux:field>
|
|
</div>
|
|
|
|
<!-- Contact Fields -->
|
|
<div class="space-y-4">
|
|
<flux:field>
|
|
<flux:label>Số điện thoại</flux:label>
|
|
<flux:input wire:model="phone" name="phone" type="text" placeholder="Nhập số điện thoại"
|
|
value="{{ customer()->phone ?? '' }}" />
|
|
<flux:error name="phone" />
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:label>Công ty (Optional)</flux:label>
|
|
<flux:input wire:model="company" name="company" type="text" placeholder="Tên công ty"
|
|
value="{{ customer()->company ?? '' }}" />
|
|
<flux:error name="company" />
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:label>Địa chỉ</flux:label>
|
|
<flux:input wire:model="address" name="address" type="text" placeholder="Nhập địa chỉ"
|
|
value="{{ customer()->address ?? '' }}" />
|
|
<flux:error name="address" />
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:label>Ngày sinh</flux:label>
|
|
<flux:input wire:model="birthday" name="birthday" type="date" placeholder="Nhập ngày sinh"
|
|
value="{{ customer()->birthday ?? '' }}" />
|
|
<flux:error name="birthday" />
|
|
</flux:field>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upload CCCD -->
|
|
<div class="bg-white rounded-lg p-6 border-3 border-dashed border-gray-200">
|
|
<h3 class="text-center text-lg font-bold mb-6">Upload CMND/CCCD</h3>
|
|
<div class="mb-3">
|
|
<flux:field>
|
|
<flux:label>Số CMND/CCCD</flux:label>
|
|
<flux:input wire:model="cccd" name="cccd" type="text" placeholder="Nhập số CMND/CCCD"
|
|
value="{{ customer()->cccd ?? '' }}" />
|
|
<flux:error name="cccd" />
|
|
</flux:field>
|
|
</div>
|
|
<div x-data="{
|
|
frontPreview: '{{ customer()->front_cccd ? asset('template/' . customer()->front_cccd) : '' }}',
|
|
backPreview: '{{ customer()->back_cccd ? asset('template/' . customer()->back_cccd) : '' }}'
|
|
}" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
|
|
<!-- Mặt trước -->
|
|
<div class="border-2 border-dashed border-gray-200 flex flex-col justify-center items-center">
|
|
<label class="block mb-1 font-medium text-gray-700 text-center py-3">Ảnh mặt
|
|
trước</label>
|
|
<template x-if="frontPreview">
|
|
<img :src="frontPreview" class="w-48 h-32 object-cover mx-auto my-4 rounded shadow"
|
|
alt="Ảnh mặt trước CCCD">
|
|
</template>
|
|
|
|
<label for="cccd_front"
|
|
class="inline-flex items-center gap-2 my-3 px-4 py-2 bg-primary hover:bg-primary text-white text-sm font-medium rounded-lg cursor-pointer shadow transition
|
|
duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round"
|
|
class="lucide lucide-image-up-icon lucide-image-up w-5 h-5">
|
|
<path
|
|
d="M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21" />
|
|
<path d="m14 19.5 3-3 3 3" />
|
|
<path d="M17 22v-5.5" />
|
|
<circle cx="9" cy="9" r="2" />
|
|
</svg>
|
|
Tải ảnh lên
|
|
</label>
|
|
<input id="cccd_front" type="file" name="front_cccd" accept=".jpg,.png" hidden
|
|
@change="
|
|
const file = $event.target.files[0];
|
|
if (file && file.type.startsWith('image/')) {
|
|
const reader = new FileReader();
|
|
reader.onload = e => frontPreview = e.target.result;
|
|
reader.readAsDataURL(file);
|
|
}">
|
|
</div>
|
|
|
|
<!-- Mặt sau -->
|
|
<div class="border-2 border-dashed border-gray-200 flex flex-col justify-center items-center">
|
|
<label class="block mb-1 font-medium text-gray-700 text-center py-3">Ảnh mặt sau</label>
|
|
<template x-if="backPreview">
|
|
<img :src="backPreview" class="w-48 h-32 object-cover mx-auto my-4 rounded shadow"
|
|
alt="Ảnh mặt sau CCCD">
|
|
</template>
|
|
|
|
<label for="cccd_back"
|
|
class="inline-flex items-center gap-2 my-3 px-4 py-2 bg-primary hover:bg-primary text-white text-sm font-medium rounded-lg cursor-pointer shadow transition
|
|
duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round"
|
|
class="lucide lucide-image-up-icon lucide-image-up w-5 h-5">
|
|
<path
|
|
d="M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21" />
|
|
<path d="m14 19.5 3-3 3 3" />
|
|
<path d="M17 22v-5.5" />
|
|
<circle cx="9" cy="9" r="2" />
|
|
</svg>
|
|
Tải ảnh lên
|
|
</label>
|
|
<input id="cccd_back" type="file" name="back_cccd" accept=".jpg,.png" hidden
|
|
@change="
|
|
const file = $event.target.files[0];
|
|
if (file && file.type.startsWith('image/')) {
|
|
const reader = new FileReader();
|
|
reader.onload = e => backPreview = e.target.result;
|
|
reader.readAsDataURL(file);
|
|
}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-right my-3">
|
|
<button type="submit"
|
|
class="bg-primary hover:bg-primary-dark text-white font-semibold py-2 px-6 rounded-lg transition duration-300">
|
|
Cập nhật
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
@endsection
|