1  <!-- Componente mejorado con overlay de bloqueo y apariencia visual -->
 2  <div class="grid grid-cols-2 col-span-2 gap-4" x-data="{
 3      isRoleDisabled() {
 4          return this.role_id !== undefined && this.role_id !== null && this.role_id !== '';
 5      },
 6      isUserDisabled() {
 7          return this.user_id !== undefined && this.user_id !== null && this.user_id !== '';
 8      },
 9  
10  }">
11      <div class="relative">
12              <x-select
13              x-bind:class="{'opacity-60': isRoleDisabled()}"
14                  wire:model="relation.user_id"
15                  :disabled="false"
16                  label="{{ __('tasks.task.panel.form.user') }}"
17                  placeholder="{{ __('tasks.task.panel.form.placeholders.users') }}"
18                  :options="$users"
19                  option-label="name"
20                  option-value="id" />
21  
22          <!-- Overlay de bloqueo absoluto -->
23          <div x-show="isRoleDisabled()"
24               class="absolute inset-0 z-50 bg-gray-200 bg-opacity-30 cursor-not-allowed"
25               @click.prevent.stop="return false;">
26          </div>
27      </div>
28  
29      <div class="relative">
30          <x-select
31              x-bind:class="{'opacity-60': isUserDisabled()}"
32              wire:model="relation.role_id"
33              :disabled="false"
34              label="{{ __('tasks.task.panel.form.role') }}"
35              placeholder="{{ __('tasks.task.panel.form.placeholders.roles') }}"
36              :options="$roles"
37                  option-label="name"
38                  option-value="id" />
39  
40          <!-- Overlay de bloqueo absoluto -->
41          <div x-show="isUserDisabled()"
42               class="absolute inset-0 z-50 bg-gray-200 bg-opacity-30 cursor-not-allowed"
43               @click.prevent.stop="return false;">
44          </div>
45      </div>
46  </div>
47  
48  <style>
49  .cursor-not-allowed {
50      pointer-events: all !important;
51  }
52  </style>