<div class="max-w-lg mx-auto p-8 bg-white shadow-lg rounded-lg" x-data="{ changePassword: @entangle('changePassword'), tomGReady: false }" x-show="tomGReady">
    <form wire:submit.prevent="submitEditForm">
        @csrf
        <div class="mb-6">
            <h2
                class="font-medium flex items-center tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
                <i aria-hidden="true" class="fa-solid fa-edit text-primary"></i> Edit User
            </h2>
        </div>

        <form class="space-y-6">
            <div class="mb-2">
                <label for="username" class="block text-sm font-medium text-gray-700">Username:</label>
                <input type="text" wire:model.defer="username" id="username"
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                    placeholder="Enter your name">
                @error('username')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>
            <div class="mb-2">
                <label for="first_name" class="block text-sm font-medium text-gray-700">Firstname:</label>
                <input type="text" wire:model.defer="first_name" id="first_name"
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                    placeholder="Enter your name">
                @error('first_name')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>
            <div class="mb-2">
                <label for="last_name" class="block text-sm font-medium text-gray-700">Lastname:</label>
                <input type="text" wire:model.defer="last_name" id="last_name"
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                    placeholder="Enter your name">
                @error('last_name')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>
            <div class="mb-2">
                <label for="email" class="block text-sm font-medium text-gray-700">Email:</label>
                <input type="email" wire:model.email="email" id="email"
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                    placeholder="Enter your email">
                @error('email')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>
            <div class="mb-2">
                <label for="phone" class="block text-sm font-medium text-gray-700">Phone:</label>
                <input type="text" wire:model.defer="phone" id="phone"
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                    placeholder="Enter your name">
                @error('phone')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>

            <div wire:ignore class="mb-2">
                <label for="group" class="block text-sm font-medium text-gray-700">Add Groups:</label>
                <span class="relative flex  w-full">
                    <input class="mt-1.5 relative flex w-full" wire:ignore x-data="{ groupLists: @entangle('group_lists') }"
                        x-init="groupLists = @js($userGroups);
                        const tempGroup = pages.groupSelect;
                        pages.fetchGroups(tempGroup).then(() => {
                            $el._x_tom = new Tom($el, {
                                ...tempGroup.group,
                                onChange: (value) => {
                                    groupLists = value;
                                }
                            });
                            $el._x_tom.setValue(groupLists);
                            tomGReady = true
                        })" type="text">
                </span>
            </div>

            <div class="mb-2">
                <button type="button" @click="changePassword = !changePassword"
                    class="btn border bg-gray-300  border-gray-300 font-medium text-gray-800 hover:text-white focus:text-white hover:bg-gray-500 focus:bg-gray-500 active:bg-gray-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
                    Change Password
                </button>
            </div>
            <div x-show="changePassword">
                <div class="mb-2">
                    <label for="current_password" class="block text-sm font-medium text-gray-700">Current Password:</label>
                    <input type="password" wire:model.defer="current_password" id="current_password"
                        class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                        placeholder="Current Password">
                    @error('current_password')
                        <span class="text-red-500 text-xs">{{ $message }}</span>
                    @enderror

                </div>

                <div class="mb-2">
                    <label for="new_password" class="block text-sm font-medium text-gray-700">New Password:</label>
                    <input type="password" wire:model.defer="new_password" id="new_password"
                        class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                        placeholder="Current Password">
                    @error('new_password')
                        <span class="text-red-500 text-xs">{{ $message }}</span>
                    @enderror
                   
                </div>

                <div class="mb-2">
                    <label for="new_password_confirmation" class="block text-sm font-medium text-gray-700">Confirm New Password:</label>
                    <input type="password" wire:model.defer="new_password_confirmation" id="new_password_confirmation"
                        class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                        placeholder="Current Password">
                    @error('new_password_confirmation')
                        <span class="text-red-500 text-xs">{{ $message }}</span>
                    @enderror

                </div>
            </div>

            <div class="flex justify-end space-x-4 mt-3">
                <button type="button" wire:click="goBack"
                    class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Cancel</button>
                <button type="submit" type="submit"
                    class="px-4 py-2 bg-primary text-white rounded-md shadow-sm hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">Save</button>
            </div>
        </form>
</div>
