@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('template/' . 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