@extends('admin.layouts.layout')
@section('title', 'Profile')
@section('content')

 <div class="max-w-[480px] w-[480px] h-full p-4 px-8 border-2 rounded-[19px] my-1 border-[#EFEFEF]  ">
                <form action="{{ route('admin.profile.update') }}" method="post" enctype="multipart/form-data">
                    <div class="relative inline-block">
                        <img src="{{ asset(auth()->user()->userDefaultProfile) }}" id="profilePreview"
                            class="bg-cover w-[205px] h-[193px] my-2 rounded-[9px] object-cover" alt="Profile" />

                        <input type="file" id="profile-upload" name="profile" accept="image/*" class="hidden" />

                        <label for="profile-upload"
                            class="absolute -bottom-3 right-3 w-9 h-9 rounded-sm bg-[#F4C701]
                        flex items-center justify-center  cursor-pointer
                        hover:bg-yellow-500 transition">
                            <i class="fa-solid fa-pencil"></i>
                        </label>
                    </div>
                    <br>
                    @error('profile')
                        <span class="text-red-600">{{ $message }}</span>
                    @enderror

                    <div class="mt-4 ">
                        <h2 class="text-[23px] Poppins-medium text-[#133754]">Personal information</h2>

                    </div>
                    @csrf
                    <div class="relative mb-6 mt-6">
                        <input type="text" id="first_name" value="{{ auth()->user()->first_name }}"
                            name="first_name" placeholder=""
                            class="peer w-full rounded-sm placeholder:text-[#1D1B20] text-[#1D1B20] text-lg Poppins border border-[#DBDBDB] px-4 py-[15px]  focus:outline-none" />

                        <label for="first_name"
                            class="absolute left-3 top-0 -translate-y-1/2 bg-white px-1 text-sm  Poppins text-[#49454F]
                    peer-placeholder-shown:top-1/2
                    peer-placeholder-shown:-translate-y-1/2
                    peer-placeholder-shown:text-gray-400
                    peer-focus:top-0">
                            First Name
                        </label>
                    </div>
                    @error('first_name')
                        <span class="text-red-600">
                            {{ $message }}
                        </span>
                    @enderror
                    <div class="relative mb-6 mt-9">
                        <input type="text" id="last_name" value="{{ auth()->user()->last_name }}" placeholder=""
                            name="last_name"
                            class="peer w-full rounded-sm text-[#1D1B20] text-lg Poppins border border-[#DBDBDB] px-4 py-[15px] focus:outline-none" />

                        <label for="last_name"
                            class="absolute left-3 top-0 -translate-y-1/2 bg-white px-1 text-sm Poppins text-[#49454F]
                            peer-placeholder-shown:top-1/2
                            peer-placeholder-shown:-translate-y-1/2
                            peer-placeholder-shown:text-gray-400
                            peer-focus:top-0">
                            Last Name
                        </label>
                    </div>
                    @error('last_name')
                        <span class="text-red-600">
                            {{ $message }}
                        </span>
                    @enderror
                    <div class="relative mb-6 mt-9">
                        <input type="password" value="" id="password" placeholder="" name="password"
                            class="peer w-full rounded-sm text-[#1D1B20] text-lg Poppins border border-[#DBDBDB] px-4 py-[15px] focus:outline-none" />

                        <label for="password"
                            class="absolute left-3 top-0 -translate-y-1/2 bg-white px-1 text-sm Poppins text-[#49454F]
                                    peer-placeholder-shown:top-1/2
                                    peer-placeholder-shown:-translate-y-1/2
                                    peer-placeholder-shown:text-gray-400
                                    peer-focus:top-0">
                            New Password
                        </label>
                    </div>
                    @error('password')
                        <span class="text-red-600">
                            {{ $message }}
                        </span>
                    @enderror
                    <div class="relative mb-6 mt-9">
                        <input type="password" id="new_password" value="" placeholder=""
                            name="password_confirmation"
                            class="peer w-full rounded-sm text-[#1D1B20] text-lg Poppins border border-[#DBDBDB] px-4 py-[15px] focus:outline-none" />

                        <label for="new_password"
                                                class="absolute left-3 top-0 -translate-y-1/2 bg-white px-1 text-sm Poppins text-[#49454F]
                            peer-placeholder-shown:top-1/2
                            peer-placeholder-shown:-translate-y-1/2
                            peer-placeholder-shown:text-gray-400
                            peer-focus:top-0">
                            New Password
                        </label>
                    </div>
                    @error('password_confirmation')
                        <span class="text-red-600">
                            {{ $message }}
                        </span>
                    @enderror




                    <div class="mt-3 space-y-3 ">
                        <button type="submit"
                            class="w-full rounded-[6px] cursor-pointer border bg-[#133754] text-[#FFFFFF] Poppins-medium  text-[15px]  py-4  ">
                            Save Changes
                        </button>

                       
                    </div>
                </form>
            </div>
              @push('script')
                <script>
                
document.addEventListener('DOMContentLoaded', function () {
    const input = document.getElementById('profile-upload');

    if (!input) return;

    input.addEventListener('change', function(e) {
        const file = e.target.files[0];

        if (!file) return;

        if (!file.type.startsWith('image/')) {
            alert('Only image files are allowed!');
            e.target.value = '';
            return;
        }

        const reader = new FileReader();

        reader.onload = function(event) {
            document.getElementById('profilePreview').src = event.target.result;
        };

        reader.readAsDataURL(file);
    });
});
</script>
            @endpush
@endsection
