updates to document handling and code editing features

resources/views/livewire/code-edit.blade.php

@@ -0,0 +1,102 @@
+<div class="max-w-[280px] mx-auto">
+
+    <!-- Controles de configuración -->
+    <div class="mb-4 p-1 bg-gray-50 rounded-lg flex items-center space-x-2 justify-left" style="width: 280px">
+        <flux:input 
+            placeholder="Nombre"
+            size="sm" 
+            style="width: 170px" 
+            wire:model="name" 
+            wire:change="updateName" 
+            wire:blur="updateName" 
+        />
+        <flux:input 
+            type="number"
+            size="sm" 
+            style="width: 65px" 
+            wire:model="maxLength" 
+            wire:change="updateMaxLength" 
+            min="2" 
+            max="12" 
+        />
+        <flux:tooltip content="(2 - 12 caracteres)" position="right">
+            <flux:button icon="information-circle" size="sm" variant="ghost" />
+        </flux:tooltip>
+    </div>
+
+    <!-- Inputs para agregar nuevos tipos -->
+    <flux:input.group style="width: 255px">
+        <!-- Selector de tamaño máximo -->
+        
+        <!-- Input de código -->
+        <flux:input 
+            placeholder="Código"
+            size="sm" 
+            style="width: 80px" 
+            wire:model="codeInput"
+            wire:keydown.enter="addCode"
+            maxlength="{{ $maxLength }}"
+            title="Máximo {{ $maxLength }} caracteres"
+        />
+        
+        <!-- Input de label -->
+        <flux:input 
+            placeholder="Label"
+            size="sm" 
+            style="width: 180px" 
+            wire:model="labelInput"
+            wire:keydown.enter="addLabel"
+            x-ref="labelInput"
+        />
+        
+        <!-- Botón agregar -->
+        <flux:button 
+            icon="plus" 
+            size="sm" 
+            wire:click="addField"
+            title="Agregar nuevo tipo"
+        ></flux:button>
+    </flux:input.group>
+
+    <!-- Información de ayuda -->
+    <div class="mt-1 text-xs text-gray-500">
+        {{ __('Tamaño: ') . $maxLength . __(' caracteres.') }}
+        @if($codeInput)
+            <span class="ml-3">
+                Longitud: {{ strlen($codeInput) }}/{{ $maxLength }}
+            </span>
+        @endif
+    </div>
+
+    <!-- Lista de tipos de documento -->
+    <div class="mt-3">
+        @if($this->getTotalDocumentTypesProperty() > 0)
+            <div class="text-sm font-medium text-gray-700 mb-2">
+                Tipos de documento ({{ $this->getTotalDocumentTypesProperty() }})
+            </div>
+            <ul class="space-y-2">
+                @foreach($documentTypes as $index => $documentType)
+                    <li class="flex items-center justify-between bg-white border border-gray-200 px-3 py-2 rounded-lg shadow-sm">
+                        <div class="flex items-center space-x-3">
+                            <span class="font-mono bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">
+                                {{ $documentType['code'] }}
+                            </span>
+                            <span class="text-gray-800">{{ $documentType['label'] }}</span>
+                        </div>
+                        <flux:button 
+                            size="xs" 
+                            variant="danger"
+                            icon="trash" 
+                            wire:click="removeField({{ $index }})"
+                            title="Eliminar"
+                        ></flux:button>
+                    </li>
+                @endforeach
+            </ul>
+        @else
+            <div class="text-center py-4 text-gray-500 text-xs">
+                No hay tipos de documento agregados
+            </div>
+        @endif
+    </div>
+</div>