

<?php $__env->startSection('content'); ?>
<div id="main-wrapper" class="p-10"
    x-data="userManagement()">

    
    <div x-show="isLoading"
        class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
        <div class="animate-spin rounded-full h-16 w-16 border-b-2 border-white"></div>
    </div>

    <div class="flex flex-col gap-6">
        
        <div
            class="p-6 bg-gradient-to-r from-slate-900 via-blue-800 to-blue-500 rounded-lg shadow-[1px_1px_4px_0px_#e2e8f0]">
            <div class="flex justify-between items-center">
                
                <div>
                    <h3 class="text-2xl font-bold text-slate-50"><?php echo trans('lang.user_management'); ?></h3>
                    <p class="text-sm text-slate-200 mt-1 m-0"><?php echo trans('lang.user_management_description'); ?></p>
                </div>
                
                <div class="flex items-center gap-4">
                    <a href="javascript:history.back()"
                        class="px-4 py-2 rounded-md bg-white text-slate-700 text-sm hover:bg-slate-100 hover:text-slate-700 hover:no-underline transition focus:outline-none focus:ring-0 flex items-center gap-2">
                        <i class="fa fa-rotate-left"></i>
                        <?php echo e(trans('lang.back_to_account_settings')); ?>

                    </a>
                    <button @click="openAddModal()"
                        class="px-4 py-2 rounded-md bg-white text-slate-700 text-sm hover:bg-slate-100 transition focus:outline-none focus:ring-0 flex items-center gap-2">
                        <i class="fa fa-plus"></i>
                        <span><?php echo trans('lang.add_user'); ?></span>
                    </button>
                </div>
            </div>
        </div>

        
        <div class="bg-white border border-slate-200 rounded-lg shadow-[1px_1px_4px_0px_#e2e8f0]">
            <table class="w-full text-sm text-slate-700">
                
                <thead class="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 text-slate-50">
                    <tr>
                        <th class="px-2 py-3 uppercase font-semibold text-center align-middle
                                    relative
                                    before:absolute before:right-0 before:top-[20%] before:h-[60%]
                                    before:border-r before:border-slate-600"><?php echo trans('lang.id'); ?></th>
                        <th class="px-2 py-3 uppercase font-semibold text-center align-middle
                                    relative
                                    before:absolute before:right-0 before:top-[20%] before:h-[60%]
                                    before:border-r before:border-slate-600"><?php echo trans('lang.full_name'); ?></th>
                        <th class="px-2 py-3 uppercase font-semibold text-center align-middle
                                    relative
                                    before:absolute before:right-0 before:top-[20%] before:h-[60%]
                                    before:border-r before:border-slate-600"><?php echo trans('lang.email'); ?></th>
                        <th class="px-2 py-3 uppercase font-semibold text-center align-middle
                                    relative
                                    before:absolute before:right-0 before:top-[20%] before:h-[60%]
                                    before:border-r before:border-slate-600"><?php echo trans('lang.role'); ?></th>
                        <th class="px-2 py-3 uppercase font-semibold text-center align-middle
                                    relative
                                    before:absolute before:right-0 before:top-[20%] before:h-[60%]
                                    before:border-r before:border-slate-600"><?php echo trans('lang.status'); ?></th>
                        <th class="px-2 py-3 uppercase font-semibold text-center align-middle
                                    relative"><?php echo trans('lang.actions'); ?></th>
                    </tr>
                </thead>
                
                <tbody class="divide-y divide-slate-100">
                    <template x-for="user in users" :key="user.id">
                        <tr
                            class="hover:bg-gradient-to-r from-blue-50 via-blue-100 to-blue-50 transition-colors duration-200">
                            <td class="px-2 py-3 text-center align-middle" x-text="user.id"></td>
                            <td class="px-2 py-3 text-center align-middle">
                                <div class="flex items-center justify-center gap-2">
                                    <span x-text="user.name + ' ' + user.surname"></span>
                                </div>
                            </td>
                            <td class="px-2 py-3 text-center align-middle" x-text="user.email"></td>
                            <td class="px-2 py-3 text-center align-middle" x-text="translatedRole(user.role)"></td>
                            <td class="px-2 py-3 text-center align-middle">
                                
                                <template x-if="user.is_main_user">
                                    <span class="inline-flex items-center px-3 py-1 rounded-md text-xs font-medium bg-amber-100 border !border-amber-500 text-amber-700">
                                        <i class="mr-2 text-base fa-solid fa-crown text-amber-600"></i>
                                        <span><?php echo trans('lang.main_user'); ?></span>
                                    </span>
                                </template>
                                <template x-if="!user.is_main_user">
                                <span class="inline-flex items-center px-3 py-1 rounded-md text-xs font-medium"
                                    :class="statusBadgeClass(user.status)">
                                    <i class="mr-2 text-base" :class="statusIconClass(user.status)"></i>
                                    <span x-text="translatedStatus(user.status)"></span>
                                </span>
                                </template>
                            </td>
                            <td class="whitespace-nowrap px-4 py-4 text-sm text-gray-500 relative z-10">
                                <div class="flex justify-center items-center gap-4">
                                    
                                    <div x-data="{ tooltipVisible: false }" @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false" class="relative">
                                        <button @click="openEditModal(user)"
                                            :disabled="user.is_main_user"
                                            class="flex h-10 w-10 items-center justify-center rounded-lg text-slate-400 hover:bg-blue-100 hover:text-blue-500 transition focus:outline-none focus:ring-0 disabled:opacity-50 disabled:cursor-not-allowed">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>
                                                <path d="m15 5 4 4"/>
                                            </svg>
                                        </button>
                                        <div x-show="tooltipVisible"
                                            x-transition:enter="transition ease-out duration-200"
                                            x-transition:enter-start="opacity-0 transform scale-95"
                                            x-transition:enter-end="opacity-100 transform scale-100"
                                            x-transition:leave="transition ease-in duration-150"
                                            x-transition:leave-start="opacity-100 transform scale-100"
                                            x-transition:leave-end="opacity-0 transform scale-95"
                                            class="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-max max-w-sm bg-slate-800 text-white text-left text-xs rounded py-2 px-3 z-20 pointer-events-none"
                                            style="display: none;">
                                            <span data-tooltip-main="<?php echo e(trans('lang.main_user_no_edit')); ?>"
                                                  data-tooltip-regular="<?php echo e(trans('lang.edit')); ?>"
                                                  x-text="user.is_main_user ? $el.dataset.tooltipMain : $el.dataset.tooltipRegular"></span>
                                            <div class="absolute left-1/2 -translate-x-1/2 bottom-full w-0 h-0 border-x-8 border-x-transparent border-b-8 border-b-slate-800"></div>
                                        </div>
                                    </div>

                                    
                                    <div x-data="{ tooltipVisible: false }" @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false" class="relative">
                                        <button @click="openPermissionsModal(user)"
                                            :disabled="user.is_main_user"
                                            class="flex h-10 w-10 items-center justify-center rounded-lg text-slate-400 hover:bg-amber-100 hover:text-amber-600 transition focus:outline-none focus:ring-0 disabled:opacity-50 disabled:cursor-not-allowed">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <circle cx="10" cy="7" r="4"/>
                                                <path d="M10.3 15H7a4 4 0 0 0-4 4v2"/>
                                                <path d="M15 15.5V14a2 2 0 0 1 4 0v1.5"/>
                                                <rect width="8" height="5" x="13" y="16" rx=".899"/>
                                            </svg>
                                        </button>
                                        <div x-show="tooltipVisible"
                                            x-transition:enter="transition ease-out duration-200"
                                            x-transition:enter-start="opacity-0 transform scale-95"
                                            x-transition:enter-end="opacity-100 transform scale-100"
                                            x-transition:leave="transition ease-in duration-150"
                                            x-transition:leave-start="opacity-100 transform scale-100"
                                            x-transition:leave-end="opacity-0 transform scale-95"
                                            class="absolute top-full right-0 mt-2 w-max max-w-sm bg-slate-800 text-white text-left text-xs rounded py-2 px-3 z-20 pointer-events-none"
                                            style="display: none;">
                                            <span data-tooltip-main="<?php echo e(trans('lang.main_user_no_permissions_edit')); ?>"
                                                  data-tooltip-regular="<?php echo e(trans('lang.permissions')); ?>"
                                                  x-text="user.is_main_user ? $el.dataset.tooltipMain : $el.dataset.tooltipRegular"></span>
                                            <div class="absolute right-4 bottom-full w-0 h-0 border-x-8 border-x-transparent border-b-8 border-b-slate-800"></div>
                                        </div>
                                    </div>
                                    
                                    <div x-data="{ tooltipVisible: false }" @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false" class="relative">
                                        <button @click="openDeleteModal(user.id)"
                                            :disabled="user.is_main_user"
                                            class="flex h-10 w-10 items-center justify-center rounded-lg text-slate-400 hover:bg-red-100 hover:text-red-600 transition focus:outline-none focus:ring-0 disabled:opacity-50 disabled:cursor-not-allowed">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <path d="M10 11v6"/>
                                                <path d="M14 11v6"/>
                                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
                                                <path d="M3 6h18"/>
                                                <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                                            </svg>
                                        </button>
                                        <div x-show="tooltipVisible"
                                            x-transition:enter="transition ease-out duration-200"
                                            x-transition:enter-start="opacity-0 transform scale-95"
                                            x-transition:enter-end="opacity-100 transform scale-100"
                                            x-transition:leave="transition ease-in duration-150"
                                            x-transition:leave-start="opacity-100 transform scale-100"
                                            x-transition:leave-end="opacity-0 transform scale-95"
                                            class="absolute top-full right-0 mt-2 w-max max-w-sm bg-slate-800 text-white text-left text-xs rounded py-2 px-3 z-20 pointer-events-none"
                                            style="display: none;">
                                            <span data-tooltip-main="<?php echo e(trans('lang.main_user_no_delete')); ?>"
                                                  data-tooltip-regular="<?php echo e(trans('lang.delete')); ?>"
                                                  x-text="user.is_main_user ? $el.dataset.tooltipMain : $el.dataset.tooltipRegular"></span>
                                            <div class="absolute right-4 bottom-full w-0 h-0 border-x-8 border-x-transparent border-b-8 border-b-slate-800"></div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </template>
                    
                    <template x-if="users.length === 0">
                        <tr>
                            <td colspan="6" class="p-6 text-center text-slate-500"><?php echo trans('lang.no_users_to_display'); ?></td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>

    
    <div x-show="showUserModal" x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-80" style="display: none;"
        x-cloak>
        <div x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            class="bg-white rounded-lg text-left shadow-xl w-full max-w-lg flex flex-col max-h-[90vh] overflow-hidden"
            @keydown.escape.window="closeUserModal()" tabindex="0">

            
            <div class="bg-gray-50 px-6 py-4 flex items-center justify-between border-b border-gray-200 flex-shrink-0">
                <h3 class="text-lg font-bold text-slate-700"
                    x-text="isEditMode ? '<?php echo e(trans('lang.edit_user')); ?>' : '<?php echo e(trans('lang.add_user')); ?>'"></h3>
                <button @click="closeUserModal()" type="button"
                    class="text-slate-400 hover:text-slate-600 transition-colors focus:outline-none focus:ring-0">
                    <span class="sr-only"><?php echo trans('lang.close'); ?></span>
                    <i class="fa-solid fa-times text-xl"></i>
                </button>
            </div>

            
            <form @submit.prevent="submitUserForm()" id="userForm" class="overflow-y-auto">
                
                <div class="p-6">
                    <div class="space-y-4">
                        
                        <div>
                            <label class="block text-sm text-slate-500 font-medium mb-1"><?php echo trans('lang.first_name'); ?></label>
                            <input type="text" x-model="formData.name" @blur="validateForm()"
                                class="w-full border rounded-lg py-2 px-3 transition duration-150 focus:outline-none focus:ring-0 text-slate-700"
                                :class="validationErrors.name ? '!border-red-500' : '!border-slate-300 focus:bg-blue-50'"
                                placeholder="<?php echo trans('lang.first_name'); ?>">
                            <p x-show="validationErrors.name" x-text="validationErrors.name" class="text-red-500 text-xs mt-1" style="display: none;"></p>
                        </div>
                        
                        <div>
                            <label class="block text-sm text-slate-500 font-medium mb-1"><?php echo trans('lang.last_name'); ?></label>
                            <input type="text" x-model="formData.surname" @blur="validateForm()"
                                class="w-full border rounded-lg py-2 px-3 transition duration-150 focus:outline-none focus:ring-0 text-slate-700"
                                :class="validationErrors.surname ? '!border-red-500' : '!border-slate-300 focus:bg-blue-50'"
                                placeholder="<?php echo trans('lang.last_name'); ?>">
                             <p x-show="validationErrors.surname" x-text="validationErrors.surname" class="text-red-500 text-xs mt-1" style="display: none;"></p>
                        </div>
                        
                        <div>
                            <label class="block text-sm text-slate-500 font-medium mb-1"><?php echo trans('lang.email'); ?></label>
                            <input type="email" x-model="formData.email" @blur="validateForm()"
                                class="w-full border rounded-lg py-2 px-3 transition duration-150 focus:outline-none focus:ring-0 text-slate-700 disabled:bg-slate-100 disabled:cursor-not-allowed"
                                :class="validationErrors.email ? '!border-red-500' : '!border-slate-300 focus:bg-blue-50'"
                                placeholder="<?php echo trans('lang.email'); ?>"
                                :disabled="isEditMode">
                             <p x-show="validationErrors.email" x-text="validationErrors.email" class="text-red-500 text-xs mt-1" style="display: none;"></p>
                        </div>
                        
                        <div class="space-y-2">
                            
                            <div x-show="isEditMode" class="pt-1">
                                <label for="changePasswordCheckbox"
                                    class="inline-flex items-center cursor-pointer select-none">
                                    <input id="changePasswordCheckbox" type="checkbox" x-model="changePassword"
                                        @change="if (!changePassword) { formData.password = ''; formData.password_confirmation = ''; }"
                                        class="peer hidden">
                                    <div
                                        class="flex h-4 w-4 items-center justify-center rounded border !border-slate-300 bg-white transition-colors flex-shrink-0 peer-checked:!border-blue-500 peer-checked:!bg-blue-500 text-transparent peer-checked:text-white">
                                        <i class="fa-solid fa-check text-xs"></i>
                                    </div>
                                    <span class="ml-2 text-sm text-slate-700"><?php echo trans('lang.change_password'); ?></span>
                                </label>
                            </div>

                            
                            <div x-show="!isEditMode || changePassword" x-transition class="space-y-4">
                                
                                <div>
                                    <label class="block text-sm text-slate-500 font-medium mb-1"><?php echo trans('lang.password'); ?></label>
                                    <div class="relative">
                                        <input :type="passwordVisible ? 'text' : 'password'" x-model="formData.password" @blur="validateForm()"
                                            class="w-full border rounded-lg py-2 px-3 transition duration-150 focus:outline-none focus:ring-0 pr-20 text-slate-700"
                                            :class="validationErrors.password ? '!border-red-500' : '!border-slate-300 focus:bg-blue-50'"
                                            placeholder="<?php echo trans('lang.password'); ?>">
                                        <div class="absolute inset-y-0 right-0 flex items-center">
                                            <div x-data="{ tooltipVisible: false }" class="relative">
                                                <button type="button" @click="generatePassword()"
                                                        @mouseenter="tooltipVisible = true" @mouseleave="tooltipVisible = false"
                                                        class="px-2 text-slate-400 hover:text-blue-500 focus:outline-none focus:ring-0">
                                                    <i class="fa-solid fa-fw fa-key"></i>
                                                </button>
                                                <div x-show="tooltipVisible"
                                                     x-transition
                                                     class="absolute top-full right-0 mt-2 w-max max-w-xs bg-slate-800 text-white text-center text-xs rounded py-2 px-3 z-10 pointer-events-none"
                                                     style="display: none;">
                                                    <?php echo trans('lang.generate_password'); ?>

                                                    <div class="absolute right-3 bottom-full w-0 h-0 border-x-8 border-x-transparent border-b-8 border-b-slate-800"></div>
                                                </div>
                                            </div>
                                            <button type="button" @click="passwordVisible = !passwordVisible"
                                                class="px-2 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-0">
                                                <i class="fa-solid fa-fw"
                                                    :class="passwordVisible ? 'fa-eye-slash' : 'fa-eye'"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <p x-show="validationErrors.password" x-text="validationErrors.password" class="text-red-500 text-xs mt-1" style="display: none;"></p>
                                </div>
                                
                                <div>
                                    <label class="block text-sm text-slate-500 font-medium mb-1"><?php echo trans('lang.confirm_password'); ?></label>
                                    <input :type="passwordVisible ? 'text' : 'password'"
                                        x-model="formData.password_confirmation" @blur="validateForm()"
                                        class="w-full border rounded-lg py-2 px-3 transition duration-150 focus:outline-none focus:ring-0 text-slate-700"
                                        :class="validationErrors.password_confirmation ? '!border-red-500' : '!border-slate-300 focus:bg-blue-50'"
                                        placeholder="<?php echo trans('lang.confirm_password'); ?>">
                                    <p x-show="validationErrors.password_confirmation" x-text="validationErrors.password_confirmation" class="text-red-500 text-xs mt-1" style="display: none;"></p>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm text-slate-500 font-medium mb-1"><?php echo trans('lang.role'); ?></label>
                            <div class="relative">
                                <button type="button" @click="openDropdown = (openDropdown === 'role' ? null : 'role')"
                                    class="relative w-full text-left cursor-pointer rounded-lg border !border-slate-300 py-2 px-3 transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300 text-slate-700"
                                    :class="{ 'bg-blue-50': openDropdown === 'role' }">
                                    <span class="block truncate" x-text="selectedRoleLabel"></span>
                                    <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                                        <i class="fa-solid fa-chevron-down text-xs text-gray-400 transition-transform"
                                            :class="{'rotate-180': openDropdown === 'role'}"></i>
                                    </span>
                                </button>
                                <ul x-show="openDropdown === 'role'" @click.away="openDropdown = null" x-transition
                                    class="absolute z-20 bottom-full mb-2 w-full max-h-60 overflow-y-auto rounded-lg bg-white shadow-lg border !border-slate-300 overflow-hidden"
                                    style="display: none;">
                                    <template x-for="role in availableRoles" :key="role.value">
                                        <li @click="selectedRole = role.value; openDropdown = null; setRoleBasedPermissions()"
                                            class="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-blue-100 text-base text-slate-700 whitespace-nowrap">
                                            <i class="fa-solid fa-check text-blue-500 transition-opacity"
                                                :class="selectedRole === role.value ? 'opacity-100' : 'opacity-0'"></i>
                                            <span x-text="role.label"></span>
                                        </li>
                                    </template>
                                </ul>
                            </div>
                        </div>
                        
                        <div x-show="selectedRole === 'custom'">
                            <label class="block text-sm text-slate-500 font-medium mb-1"><?php echo trans('lang.custom_role_name'); ?></label>
                            <input type="text" x-model="customRole" @blur="validateForm()"
                                class="w-full border rounded-lg py-2 px-3 transition duration-150 focus:outline-none focus:ring-0 text-slate-700"
                                :class="validationErrors.customRole ? '!border-red-500' : '!border-slate-300 focus:bg-blue-50'"
                                placeholder="<?php echo trans('lang.custom_role_name_placeholder'); ?>">
                            <p x-show="validationErrors.customRole" x-text="validationErrors.customRole" class="text-red-500 text-xs mt-1" style="display: none;"></p>
                        </div>
                        
                        <div>
                            <label class="block text-sm text-slate-500 font-medium mb-1"><?php echo trans('lang.status'); ?></label>
                            <div class="relative">

                                <button type="button"
                                    @click="openDropdown = (openDropdown === 'status' ? null : 'status')"
                                    class="relative w-full text-left cursor-pointer rounded-lg border !border-slate-300 py-2 px-3 transition duration-150 focus:outline-none focus:ring-0 focus:border-slate-300 text-slate-700"
                                    :class="{ 'bg-blue-50': openDropdown === 'status' }">
                                    <span class="block truncate" x-text="selectedStatusLabel"></span>
                                    <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                                        <i class="fa-solid fa-chevron-down text-xs text-gray-400 transition-transform"
                                            :class="{'rotate-180': openDropdown === 'status'}"></i>
                                    </span>
                                </button>

                                <ul x-show="openDropdown === 'status'" @click.away="openDropdown = null" x-transition
                                    class="absolute z-20 bottom-full mb-2 w-full max-h-60 overflow-y-auto rounded-lg bg-white shadow-lg border !border-slate-300 overflow-hidden"
                                    style="display: none;">
                                    <template x-for="status in availableStatuses" :key="status.value">
                                        <li @click="formData.status = status.value; openDropdown = null"
                                            class="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-blue-100 text-base text-slate-700 whitespace-nowrap">
                                            <i class="fa-solid fa-check text-blue-500 transition-opacity"
                                                :class="formData.status === status.value ? 'opacity-100' : 'opacity-0'"></i>
                                            <span x-text="status.label"></span>
                                        </li>
                                    </template>
                                </ul>
                            </div>
                        </div>

                        
                        <div x-show="!isEditMode" class="pt-2">
                            <label class="block text-sm text-slate-500 font-medium mb-3">
                                <i class="fa-solid fa-key mr-1"></i>
                                <?php echo trans('lang.permissions'); ?>

                            </label>
                            <div class="bg-slate-50 rounded-lg p-4 border border-slate-200">
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                    <template x-for="permission in availablePermissions" :key="permission.id">
                                        <label class="inline-flex items-center cursor-pointer select-none">
                                            <input type="checkbox" 
                                                   :value="permission.id"
                                                   x-model="formData.permissions"
                                                   class="peer hidden">
                                            <div class="flex h-4 w-4 items-center justify-center rounded border !border-slate-300 bg-white transition-colors flex-shrink-0 peer-checked:!border-blue-500 peer-checked:!bg-blue-500 text-transparent peer-checked:text-white">
                                                <i class="fa-solid fa-check text-xs"></i>
                                            </div>
                                            <span class="ml-2 text-sm text-slate-700" x-text="permission.name"></span>
                                        </label>
                                    </template>
                                </div>
                                <div class="mt-3 pt-3 border-t border-slate-200">
                                    <div class="flex flex-wrap gap-2">
                                        <button type="button" @click="selectAllPermissions()" 
                                                class="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors">
                                            <i class="fa-solid fa-check-double mr-1"></i>
                                            <?php echo trans('lang.select_all'); ?>

                                        </button>
                                        <button type="button" @click="clearAllPermissions()" 
                                                class="text-xs px-2 py-1 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors">
                                            <i class="fa-solid fa-times mr-1"></i>
                                            <?php echo trans('lang.clear_all'); ?>

                                        </button>
                                        <button type="button" @click="setRoleBasedPermissions()" 
                                                class="text-xs px-2 py-1 bg-green-100 text-green-700 rounded hover:bg-green-200 transition-colors">
                                            <i class="fa-solid fa-user-tag mr-1"></i>
                                            <?php echo trans('lang.role_based'); ?>

                                        </button>
                                    </div>
                                </div>
                                <p class="text-xs text-slate-500 mt-2">
                                    <i class="fa-solid fa-info-circle mr-1"></i>
                                    <?php echo trans('lang.permissions_info'); ?>

                                </p>
                            </div>
                        </div>

                        
                        <div x-show="!isEditMode" class="pt-2">
                            <label class="inline-flex items-center cursor-pointer select-none">
                                <input type="checkbox" x-model="sendWelcomeEmail" class="peer hidden">
                                <div class="flex h-4 w-4 items-center justify-center rounded border !border-slate-300 bg-white transition-colors flex-shrink-0 peer-checked:!border-blue-500 peer-checked:!bg-blue-500 text-transparent peer-checked:text-white">
                                    <i class="fa-solid fa-check text-xs"></i>
                                </div>
                                <span class="ml-2 text-sm text-slate-700">
                                    <i class="fa-solid fa-envelope mr-1"></i>
                                    <?php echo trans('lang.send_welcome_email'); ?>

                                </span>
                            </label>
                            <p class="text-xs text-slate-500 mt-1 pl-6"><?php echo trans('lang.send_welcome_email_desc'); ?></p>
                        </div>
                    </div>
                </div>
            </form>

            
            <div class="bg-gray-50 px-4 py-4 border-t border-gray-200 flex flex-col gap-3 flex-shrink-0">
                <button type="submit" form="userForm"
                    class="w-full h-12 flex items-center justify-center bg-blue-500 text-white text-base font-medium rounded-md shadow-md uppercase transition-colors hover:bg-blue-600 focus:outline-none focus:ring-0 active:outline-none active:ring-0"
                    style="box-shadow: 1px 1px 2px rgba(0,0,0,0.2);"
                    x-text="isEditMode ? '<?php echo e(trans('lang.save_changes')); ?>' : '<?php echo e(trans('lang.add')); ?>'"></button>
                <button type="button" @click="closeUserModal()"
                    class="w-full h-12 flex items-center justify-center bg-white text-gray-700 border border-gray-300 text-base font-medium rounded-md shadow-sm uppercase transition-colors hover:bg-gray-50 focus:outline-none focus:ring-0 active:outline-none active:ring-0"><?php echo trans('lang.cancel'); ?></button>
            </div>
        </div>
    </div>

    
    <div x-show="showPermissionsModal" x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-80" style="display: none;"
        x-cloak>
        <div @click.away="closePermissionsModal()" x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            class="bg-white rounded-lg text-left overflow-hidden shadow-xl w-full max-w-xl flex flex-col">
            
            <div class="bg-gray-50 px-6 py-4 flex items-center justify-between border-b border-gray-200">
                <h3 class="text-lg font-bold text-slate-700"><?php echo trans('lang.manage_permissions'); ?></h3>
                <button @click="closePermissionsModal()" type="button"
                    class="text-slate-400 hover:text-slate-600 transition-colors focus:outline-none focus:ring-0">
                    <span class="sr-only"><?php echo trans('lang.close'); ?></span>
                    <i class="fa-solid fa-times text-xl"></i>
                </button>
            </div>
            
            <div class="p-6">
                <p class="text-sm text-gray-500 mb-4"><?php echo trans('lang.set_permissions_for_user'); ?> <span
                        x-text="currentUser.name + ' ' + currentUser.surname"
                        class="font-semibold text-gray-800"></span></p>
                
                <div class="bg-slate-50 rounded-lg p-4 border border-slate-200">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-80 overflow-y-auto">
                        <template x-for="permission in availablePermissions" :key="permission.id">
                            <label :for="'perm_' + permission.id"
                                class="inline-flex items-center cursor-pointer select-none"
                                :class="{ 'cursor-not-allowed opacity-75': permission.id === 'account' }">
                                <input :id="'perm_' + permission.id" type="checkbox" :value="permission.id"
                                    x-model="currentUser.permissions" class="peer hidden"
                                    :disabled="permission.id === 'account'">
                                <div class="flex h-4 w-4 items-center justify-center rounded border !border-slate-300 bg-white transition-colors flex-shrink-0 peer-checked:!border-blue-500 peer-checked:!bg-blue-500 text-transparent peer-checked:text-white">
                                    <i class="fa-solid fa-check text-xs"></i>
                                </div>
                                <span class="ml-2 text-sm text-slate-700" x-text="permission.name"></span>
                            </label>
                        </template>
                    </div>
                    <div class="mt-3 pt-3 border-t border-slate-200">
                        <div class="flex flex-wrap gap-2">
                            <button type="button" @click="selectAllPermissionsModal()" 
                                    class="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors">
                                <i class="fa-solid fa-check-double mr-1"></i>
                                <?php echo trans('lang.select_all'); ?>

                            </button>
                            <button type="button" @click="clearAllPermissionsModal()" 
                                    class="text-xs px-2 py-1 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors">
                                <i class="fa-solid fa-times mr-1"></i>
                                <?php echo trans('lang.clear_all'); ?>

                            </button>
                            <button type="button" @click="setRoleBasedPermissionsModal()" 
                                    class="text-xs px-2 py-1 bg-green-100 text-green-700 rounded hover:bg-green-200 transition-colors">
                                <i class="fa-solid fa-user-tag mr-1"></i>
                                <?php echo trans('lang.role_based'); ?>

                            </button>
                        </div>
                    </div>
                    <p class="text-xs text-slate-500 mt-2">
                        <i class="fa-solid fa-info-circle mr-1"></i>
                        <?php echo trans('lang.permissions_info'); ?>

                    </p>
                </div>
            </div>
            
            <div class="bg-gray-50 px-4 py-4 border-t border-gray-200 flex flex-col gap-3">
                <button @click="savePermissions()" type="button"
                    class="w-full h-12 flex items-center justify-center bg-blue-500 text-white text-base font-medium rounded-md shadow-md uppercase transition-colors hover:bg-blue-600 focus:outline-none focus:ring-0 active:outline-none active:ring-0"
                    style="box-shadow: 1px 1px 2px rgba(0,0,0,0.2);"><?php echo trans('lang.save_permissions'); ?></button>
                <button @click="closePermissionsModal()" type="button"
                    class="w-full h-12 flex items-center justify-center bg-white text-gray-700 border border-gray-300 text-base font-medium rounded-md shadow-sm uppercase transition-colors hover:bg-gray-50 focus:outline-none focus:ring-0 active:outline-none active:ring-0"><?php echo trans('lang.cancel'); ?></button>
            </div>
        </div>
    </div>

    
    <div x-show="showDeleteModal" x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-80" style="display: none;"
        x-cloak>
        <div @click.away="closeDeleteModal()" x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            class="bg-white rounded-lg text-left overflow-hidden shadow-xl w-full max-w-lg flex flex-col">

            <div class="p-6 text-center">
                <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-red-100">
                    <i class="fa-solid fa-triangle-exclamation text-3xl text-red-600"></i>
                </div>
                <h4 class="text-xl font-semibold text-gray-900 mt-4"><?php echo trans('lang.confirmation'); ?></h4>
                <p class="mt-2 text-sm text-gray-600"><?php echo trans('lang.delete_user_confirmation_desc'); ?></p>
            </div>

            <div class="bg-gray-50 px-4 py-4 border-t border-gray-200 flex flex-col gap-3">
                <button @click="deleteUser()" type="button"
                    class="w-full h-12 flex items-center justify-center bg-red-600 text-white text-base font-semibold rounded-md shadow-md uppercase transition-colors hover:bg-red-700 focus:outline-none focus:ring-0 active:outline-none active:ring-0"
                    style="box-shadow: 1px 1px 2px rgba(0,0,0,0.2);"><?php echo trans('lang.delete'); ?></button>
                <button @click="closeDeleteModal()" type="button"
                    class="w-full h-12 flex items-center justify-center bg-white text-gray-700 border border-gray-300 text-base font-medium rounded-md shadow-sm uppercase transition-colors hover:bg-gray-50 focus:outline-none focus:ring-0 active:outline-none active:ring-0"><?php echo trans('lang.cancel'); ?></button>
            </div>
        </div>
    </div>

    
    <div x-show="notification.show" x-transition class="fixed top-5 right-5 z-50 max-w-lg w-full rounded-lg shadow-lg pointer-events-auto" :class="{ 'bg-green-100 border-l-4 border-green-500': notification.type === 'success', 'bg-red-100 border-l-4 border-red-500': notification.type === 'error' }" style="display: none;">
        <div class="p-4">
            <div class="grid grid-cols-[auto,1fr,auto] items-center gap-x-3">
                <div class="flex-shrink-0">
                    <i x-show="notification.type === 'success'"
                        class="fa-solid fa-check-circle text-green-500 text-xl"></i>
                    <i x-show="notification.type === 'error'"
                        class="fa-solid fa-times-circle text-red-500 text-xl"></i>
                </div>
                <div>
                    <p class="text-sm font-medium break-words"
                        :class="{ 'text-green-800': notification.type === 'success', 'text-red-800': notification.type === 'error' }"
                        x-text="notification.message"></p>
                </div>
                <div class="flex-shrink-0">
                    <button @click="notification.show = false" class="inline-flex text-slate-500 hover:text-slate-600 focus:outline-none focus:ring-0">
                        <span class="sr-only"><?php echo e(trans('lang.close')); ?></span>
                        <i class="fa-solid fa-times"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function userManagement() {
        const predefinedRoles = ['main_user', 'manager', 'bar', 'kitchen', 'waiter'];
        return {
            users: [],
            availablePermissions: [],
            notification: { show: false, type: 'success', message: '' },
            showUserModal: false,
            showPermissionsModal: false,
            showDeleteModal: false,
            userToDeleteId: null,
            isEditMode: false,
            passwordVisible: false,
            changePassword: false,
            isLoading: false,
            formData: {},
            selectedRole: 'waiter',
            customRole: '',
            currentUser: { permissions: [] },
            openDropdown: null,
            sendWelcomeEmail: true,
            validationErrors: {},
            availableRoles: [
                { value: 'main_user', label: '<?php echo e(trans('lang.role_main_user')); ?>' },
                { value: 'manager', label: '<?php echo e(trans('lang.role_manager')); ?>' },
                { value: 'bar', label: '<?php echo e(trans('lang.role_bar')); ?>' },
                { value: 'kitchen', label: '<?php echo e(trans('lang.role_kitchen')); ?>' },
                { value: 'waiter', label: '<?php echo e(trans('lang.role_waiter')); ?>' },
                { value: 'custom', label: '<?php echo e(trans('lang.role_custom')); ?>' }
            ],
            availableStatuses: [
                { value: 'aktywny', label: '<?php echo e(trans('lang.status_active')); ?>' },
                { value: 'nieaktywny', label: '<?php echo e(trans('lang.status_inactive')); ?>' }
            ],

            get selectedRoleLabel() { const role = this.availableRoles.find(r => r.value === this.selectedRole); return role ? role.label : '<?php echo e(trans('lang.select_role')); ?>'; },
            get selectedStatusLabel() { const status = this.availableStatuses.find(s => s.value === this.formData.status); return status ? status.label : '<?php echo e(trans('lang.select_status')); ?>'; },

            get apiBase() { return `${window.location.origin}/api`; },
            get csrfToken() { const el = document.querySelector('meta[name="csrf-token"]'); return el ? el.getAttribute('content') : ''; },



            getCookie(name) {
                const value = `; ${document.cookie}`;
                const parts = value.split(`; ${name}=`);
                if (parts.length === 2) return decodeURIComponent(parts.pop().split(';').shift());
                return '';
            },

            async apiFetch(path, options = {}) {
                const headers = options.headers || {};
                const final = {
                    credentials: 'include',
                    ...options,
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        // Use standard Laravel CSRF token for web routes
                        'X-CSRF-TOKEN': this.csrfToken,
                        'X-Requested-With': 'XMLHttpRequest',
                        ...headers,
                    },
                };
                const res = await fetch(`${this.apiBase}${path}`, final);
                if (!res.ok) {
                    let msg = 'Error';
                    try { const data = await res.json(); msg = (data.message || JSON.stringify(data)); } catch(_){}
                    throw new Error(msg);
                }
                if (res.status === 204) return null;
                return res.json();
            },
            
            getDefaultPermissions(role) {
                const basePermissions = ['home', 'account'];
                switch(role) {
                    case 'main_user': return ['home', 'orders', 'live_orders', 'menu', 'restaurant', 'account', 'manage_users'];
                    case 'manager': return [...basePermissions, 'orders', 'live_orders', 'menu', 'restaurant'];
                    case 'bar': return [...basePermissions, 'orders', 'live_orders'];
                    case 'kitchen': return [...basePermissions, 'live_orders', 'menu'];
                    case 'waiter': return [...basePermissions, 'orders', 'live_orders'];
                    default: return basePermissions;
                }
            },
            
            async init() { this.resetForm(); await Promise.all([this.loadPermissions(), this.loadUsers()]); },
            resetForm() {
                this.formData = { 
                    id: null, 
                    name: '', 
                    surname: '', 
                    email: '', 
                    password: '', 
                    password_confirmation: '', 
                    role: 'waiter', 
                    status: 'aktywny', 
                    is_main_user: false,
                    permissions: this.getDefaultPermissions('waiter'), // Domyślne uprawnienia dla kelnera
                    pin: ''
                };
                this.selectedRole = 'waiter';
                this.customRole = '';
                this.changePassword = false;
                this.sendWelcomeEmail = true;
                this.validationErrors = {};
            },

            async loadUsers() {
                try { this.isLoading = true; const data = await this.apiFetch('/vendor-users', { method: 'GET' }); this.users = Array.isArray(data) ? data : []; }
                catch (e) { this.showNotification('<?php echo e(trans('lang.data_load_error')); ?>', 'error'); }
                finally { this.isLoading = false; }
            },

            async loadPermissions() {
                try { const data = await this.apiFetch('/permissions', { method: 'GET' }); this.availablePermissions = Array.isArray(data) ? data : []; }
                catch (e) { this.availablePermissions = [{ id: 'account', name: '<?php echo e(trans('lang.account')); ?>' }]; }
            },
            
            openEditModal(user) {
                if (user.is_main_user) {
                    this.showNotification('<?php echo e(trans("lang.main_user_no_edit")); ?>', 'info');
                    return;
                }
                this.isEditMode = true;
                this.validationErrors = {}; // Wyczyść błędy walidacyjne przy otwarciu
                this.formData = { ...user, password: '', password_confirmation: '' };
                this.changePassword = false;
                if (predefinedRoles.includes(user.role)) { this.selectedRole = user.role; this.customRole = ''; } 
                else { this.selectedRole = 'custom'; this.customRole = user.role; }
                this.showUserModal = true;
            },
            openAddModal() {
                this.isEditMode = false;
                this.resetForm();
                this.showUserModal = true;
            },
            closeUserModal() { this.showUserModal = false; },

            async submitUserForm() {
                if (!this.validateForm()) { this.showNotification('<?php echo e(trans('lang.validation_form_error_message')); ?>', 'error'); return; }
                this.formData.role = (this.selectedRole === 'custom') ? this.customRole : this.selectedRole;
                try {
                    this.isLoading = true;
                    if (this.isEditMode) {
                        let payload = { name: this.formData.name, surname: this.formData.surname, role: this.formData.role, status: this.formData.status };
                        if (this.changePassword && this.formData.password) { payload.password = this.formData.password; }
                        await this.apiFetch(`/vendor-users/${this.formData.id}`, { method: 'PUT', body: JSON.stringify(payload) });
                        this.showNotification('<?php echo e(trans('lang.profile_saved_success')); ?>', 'success');
                    } else {
                        const payload = {
                            name: this.formData.name,
                            surname: this.formData.surname,
                            email: this.formData.email,
                            password: this.formData.password,
                            role: this.formData.role,
                            status: this.formData.status,
                            permissions: this.formData.permissions, // NAPRAWKA: Użyj zaznaczonych checkboxów!
                            send_welcome_email: this.sendWelcomeEmail,
                        };
                        await this.apiFetch('/vendor-users', { method: 'POST', body: JSON.stringify(payload) });
                        const message = this.sendWelcomeEmail ? '<?php echo e(trans('lang.user_created_and_notified')); ?>' : '<?php echo e(trans('lang.user_created_successfully')); ?>';
                        this.showNotification(message, 'success');
                    }
                    await this.loadUsers();
                    this.closeUserModal();
                } catch (e) {
                    this.showNotification(e.message || '<?php echo e(trans('lang.data_save_error')); ?>', 'error');
                } finally { this.isLoading = false; }
            },

            openDeleteModal(id) {
                const user = this.users.find(u => u.id === id);
                if (user && user.is_main_user) {
                    this.showNotification('<?php echo e(trans("lang.main_user_no_delete")); ?>', 'error');
                    return;
                }
                this.userToDeleteId = id;
                this.showDeleteModal = true;
            },
            closeDeleteModal() { this.showDeleteModal = false; this.userToDeleteId = null; },
            async deleteUser() {
                try {
                    if (this.userToDeleteId) {
                        this.isLoading = true;
                        console.log('Attempting to delete user:', this.userToDeleteId);
                        
                        const response = await this.apiFetch(`/vendor-users/${this.userToDeleteId}`, { 
                            method: 'DELETE'
                        });
                        
                        console.log('Delete response:', response);
                        await this.loadUsers();
                        this.showNotification('<?php echo e(trans('lang.item_deleted_successfully')); ?>', 'success');
                    }
                } catch (e) {
                    console.error('Delete error:', e);
                    this.showNotification(`<?php echo e(trans('lang.item_delete_error')); ?>: ${e.message}`, 'error');
                } finally {
                    this.closeDeleteModal();
                    this.isLoading = false;
                }
            },

            openPermissionsModal(user) {
                if (user.is_main_user) {
                    this.showNotification('<?php echo e(trans("lang.main_user_no_permissions_edit")); ?>', 'info');
                    return;
                }
                this.currentUser = JSON.parse(JSON.stringify(user));
                this.showPermissionsModal = true;
            },
            closePermissionsModal() { this.showPermissionsModal = false; this.currentUser = { permissions: [] }; },
            async savePermissions() {
                try {
                    if (!this.currentUser.permissions.includes('account')) { this.currentUser.permissions.push('account'); this.showNotification('<?php echo e(trans('lang.permission_account_enforced')); ?>', 'info'); }
                    this.isLoading = true;
                    await this.apiFetch(`/vendor-users/${this.currentUser.id}/permissions`, { method: 'PUT', body: JSON.stringify({ permissions: this.currentUser.permissions }) });
                    await this.loadUsers();
                    this.showNotification('<?php echo e(trans('lang.permissions_saved_successfully')); ?>', 'success');
                } catch (e) {
                    this.showNotification('<?php echo e(trans('lang.data_save_error')); ?>', 'error');
                } finally {
                    this.closePermissionsModal();
                    this.isLoading = false;
                }
            },

            showNotification(message, type = 'success', duration = 4000) {
                this.notification.message = message;
                this.notification.type = type;
                this.notification.show = true;
                setTimeout(() => { this.notification.show = false; }, duration);
            },
            generatePassword() {
                const length = 12;
                const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+~`|}{[]:;?><,./-=";
                let retVal = "";
                for (let i = 0, n = charset.length; i < length; ++i) {
                    retVal += charset.charAt(Math.floor(Math.random() * n));
                }
                this.formData.password = retVal;
                this.formData.password_confirmation = retVal;
            },

            // QR Code Modal Methods
            // Funkcje obsługi uprawnień w formularzu
            selectAllPermissions() {
                this.formData.permissions = this.availablePermissions.map(p => p.id);
            },
            
            clearAllPermissions() {
                this.formData.permissions = ['account']; // Zawsze zachowaj 'account'
            },
            
            setRoleBasedPermissions() {
                const role = (this.selectedRole === 'custom') ? this.customRole : this.selectedRole;
                this.formData.permissions = this.getDefaultPermissions(role);
            },

            // Funkcje obsługi uprawnień w modalu uprawnień
            selectAllPermissionsModal() {
                this.currentUser.permissions = this.availablePermissions.map(p => p.id);
            },
            
            clearAllPermissionsModal() {
                this.currentUser.permissions = ['account']; // Zawsze zachowaj 'account'
            },
            
            setRoleBasedPermissionsModal() {
                if (this.currentUser.role) {
                    this.currentUser.permissions = this.getDefaultPermissions(this.currentUser.role);
                }
            },

            // Watcher na zmianę roli - automatycznie aktualizuje uprawnienia
            $watch: {
                selectedRole(newRole) {
                    if (!this.isEditMode && newRole !== 'custom') {
                        this.formData.permissions = this.getDefaultPermissions(newRole);
                    }
                }
            },

            translatedRole(role) {
                if (role === 'main_user') {
                    // Użyj istniejącego tłumaczenia i zmień wielkość liter
                    return '<?php echo e(ucfirst(trans("lang.main_user"))); ?>';
                }
                const roleTranslations = {
                    'manager': '<?php echo e(trans("lang.role_manager")); ?>',
                    'bar': '<?php echo e(trans("lang.role_bar")); ?>',
                    'kitchen': '<?php echo e(trans("lang.role_kitchen")); ?>',
                    'waiter': '<?php echo e(trans("lang.role_waiter")); ?>'
                };
                return roleTranslations[role] || role;
            },

            statusBadgeClass(status) {
                switch (status) {
                    case 'aktywny': return 'bg-green-50 border !border-green-600 text-green-600';
                    case 'nieaktywny': return 'bg-red-50 border !border-red-600 text-red-600';
                    default: return 'bg-slate-100 border !border-slate-600 text-slate-600';
                }
            },
            statusIconClass(status) {
                switch (status) {
                    case 'aktywny': return 'fa fa-check-circle';
                    case 'nieaktywny': return 'fa fa-times-circle';
                    default: return 'fa fa-info-circle';
                }
            },
            translatedStatus(status) {
                if (status === 'aktywny') return '<?php echo e(trans('lang.status_active')); ?>';
                if (status === 'nieaktywny') return '<?php echo e(trans('lang.status_inactive')); ?>';
                return status;
            },

            validateForm() {
                const errors = {};
                if (!this.formData.name || !this.formData.name.trim()) {
                    errors.name = '<?php echo e(trans("lang.validation_required")); ?>';
                }
                if (!this.formData.surname || !this.formData.surname.trim()) {
                    errors.surname = '<?php echo e(trans("lang.validation_required")); ?>';
                }
                
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!this.formData.email) {
                    errors.email = '<?php echo e(trans("lang.validation_required")); ?>';
                } else if (!emailRegex.test(this.formData.email)) {
                    errors.email = '<?php echo e(trans("lang.validation_email")); ?>';
                }

                if (!this.isEditMode || this.changePassword) {
                    if (!this.formData.password) {
                        errors.password = '<?php echo e(trans("lang.validation_required")); ?>';
                    } else if (this.formData.password.length < 8) {
                        errors.password = '<?php echo e(trans("lang.validation_min_8_chars")); ?>';
                    }
                    if (this.formData.password !== this.formData.password_confirmation) {
                        errors.password_confirmation = '<?php echo e(trans("lang.passwords_do_not_match")); ?>';
                    }
                }
                
                if (this.selectedRole === 'custom' && (!this.customRole || !this.customRole.trim())) {
                    errors.customRole = '<?php echo e(trans("lang.validation_required")); ?>';
                }

                this.validationErrors = errors;
                return Object.keys(errors).length === 0;
            }
        }
    }
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\pub-and-go-merchant-np\resources\views/users/manage_users.blade.php ENDPATH**/ ?>