103 lines
3.5 KiB
PHP
103 lines
3.5 KiB
PHP
<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>
|