construprogress/resources/views/livewire/template-manager.blade.php

<div>
    <div class="bg-base-100 p-4 rounded shadow">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-bold">📋 {{ __('Inspection templates') }}</h2>
            <div>
                <button wire:click="newTemplate" class="btn btn-primary btn-sm">
                    {{ __('New template') }}
                </button>
            </div>
        </div>

        @if(session()->has('message'))
            <div class="alert alert-success mb-4">{{ session('message') }}</div>
        @endif

        {{-- Formulario de creación/edición con diseño de dos columnas --}}
        @if($showForm)
            <form wire:submit.prevent="saveTemplate" class="border p-4 rounded mb-6 bg-base-200">
                <table class="w-full mb-8">
                    <tbody>
                        {{-- Nombre del template --}}
                        <tr>
                            <td class="w-1/4 py-3 pr-4 align-top">
                                {{ __('Template name') }}
                            </td>
                            <td class="py-3">
                                <input type="text" wire:model="form.name"
                                class="input w-full"
                                required>
                            </td>
                        </tr>

                        {{-- Descripción --}}
                        <tr>
                            <td class="w-1/4 py-3 pr-4 align-top">
                                {{ __('Description') }}
                            </td>
                            <td class="py-3">
                                <textarea wire:model="form.description" class="textarea textarea-bordered w-full" rows="2"></textarea>
                            </td>
                        </tr>

                        {{-- Fase asociada (opcional) --}}
                        <tr>
                            <td class="w-1/4 py-3 pr-4 align-top">
                                {{ __('Associated phase (optional)') }}
                            </td>
                            <td class="py-3">
                                <select wire:model="form.phase_id" class="select select-bordered w-full">
                                    <option value="">{{ __('Global project') }}</option>
                                    @foreach($phases as $phase)
                                        <option value="{{ $phase->id }}" {{ old('form.phase_id') == $phase->id ? 'selected' : '' }}>
                                            {{ $phase->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </td>
                        </tr>
                    </tbody>
                </table>

                {{-- Campos dinámicos --}}
                <div class="border-t pt-4 mt-2">
                    <h3 class="font-bold mb-3">{{ __('Form fields') }}</h3>
                    @foreach($form['fields'] as $index => $field)
                        <div class="border p-3 rounded mb-3 bg-base-100">
                            {{-- Fila: nombre interno --}}
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-2">
                                <div class="font-medium">{{ __('Internal name') }}</div>
                                <div><input type="text" wire:model="form.fields.{{ $index }}.name" placeholder="ej: altura_medida" class="input input-sm w-full"></div>
                            </div>
                            {{-- Fila: etiqueta --}}
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-2">
                                <div class="font-medium">{{ __('Visible label') }}</div>
                                <div><input type="text" wire:model="form.fields.{{ $index }}.label" placeholder="ej: Altura medida (m)" class="input input-sm w-full"></div>
                            </div>
                            {{-- Fila: tipo --}}
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-2">
                                <div class="font-medium">{{ __('Field type') }}</div>
                                <div>
                                    <select wire:model="form.fields.{{ $index }}.type" class="select select-sm w-full">
                                        @foreach($fieldTypes as $typeValue => $typeLabel)
                                            <option value="{{ $typeValue }}">{{ $typeLabel }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            {{-- Fila: requerido y botón eliminar --}}
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-2">
                                <div class="font-medium">{{ __('Required') }}</div>
                                <div class="flex justify-between items-center">
                                    <input type="checkbox" wire:model="form.fields.{{ $index }}.required" class="checkbox checkbox-sm">
                                    <button type="button" wire:click="removeField({{ $index }})" class="btn btn-xs btn-error">{{ __('Remove field') }}</button>
                                </div>
                            </div>

                            {{-- Campos adicionales según tipo --}}
                            @if(in_array($field['type'], ['integer', 'decimal', 'percentage']))
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-2">
                                    <div class="font-medium">{{ __('Min') }} / {{ __('Max') }} / {{ __('Step') }}</div>
                                    <div class="flex gap-2">
                                        <input type="number" wire:model="form.fields.{{ $index }}.min" placeholder="{{ __('Min') }}" class="input input-xs w-20">
                                        <input type="number" wire:model="form.fields.{{ $index }}.max" placeholder="{{ __('Max') }}" class="input input-xs w-20">
                                        <input type="number" step="any" wire:model="form.fields.{{ $index }}.step" placeholder="{{ __('Step') }}" class="input input-xs w-20">
                                    </div>
                                </div>
                            @elseif($field['type'] === 'select')
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-2">
                                    <div class="font-medium">{{ __('Options (comma separated)') }}</div>
                                    <div><input type="text" wire:model="form.fields.{{ $index }}.options" placeholder="ej: Bueno,Regular,Malo" class="input input-sm w-full"></div>
                                </div>
                            @endif
                        </div>
                    @endforeach
                    <button type="button" wire:click="addField" class="btn btn-sm btn-secondary mt-2">+ {{ __('Add field') }}</button>
                </div>

                <div class="flex gap-2 mt-4">
                    <button type="submit" class="btn btn-primary">{{ $editingTemplate ? __('Update') : __('Save template') }}</button>
                    <button type="button" wire:click="cancelForm" class="btn">{{ __('Cancel') }}</button>
                </div>
            </form>
        @endif

        {{-- Tabla de templates existentes --}}
        <div class="overflow-x-auto">
            <table class="table table-zebra">
                <thead>
                    <tr>
                        <th>{{ __('Name') }}</th>
                        <th>{{ __('Description') }}</th>
                        <th>{{ __('Phase') }}</th>
                        <th>{{ __('Fields') }}</th>
                        <th>{{ __('Actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($templates as $template)
                        <tr>
                            <td>{{ $template->name }}</td>
                            <td>{{ $template->description ?? '-' }}</td>
                            <td>{{ $template->phase ? $template->phase->name : __('Global project') }}</td>
                            <td>{{ count($template->fields) }}</td>
                            <td>
                                <button wire:click="editTemplate({{ $template->id }})" class="btn btn-xs btn-warning">
                                    {{ __('Edit') }}
                                </button>
                                <button wire:click="deleteTemplate({{ $template->id }})"
                                        wire:confirm="{{ __('Delete template confirmation') }}"
                                        class="btn btn-xs btn-error">{{ __('Delete') }}</button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center">{{ __('No templates yet (table)') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>