<x-layouts.auth-layout>
    @if($sectionTemplate)
        <div class="flex flex-wrap gap-2 py-4">
            <span class="text-[#6a7681] text-base font-medium leading-normal">{{ $sectionTemplate->templateName }}</span>
            <span class="text-[#6a7681] text-base font-medium leading-normal">/</span>
            <a class="text-[#6a7681] text-base font-medium leading-normal transition-all duration-300 hover:text-primary100"
                href="{{ route('contract-sections.index', $sectionTemplate->id) }}">
                {{ $sectionTemplate->title }}
            </a>
            <span class="text-[#6a7681] text-base font-medium leading-normal">/</span>
            <span class="text-[#121416] text-base font-medium leading-normal">Editar {{ $dto->title }}</span>
        </div>
    @endif
    <div class="flex flex-col max-w-[640px]">
        <form
            action="{{ route('contract-sections.update', ['id' => $dto->id, 'idTemplateSection' => $idTemplateSection]) }}"
            method="POST" x-data="{ omitRules: @json(old('omit_rules', $dto->omit_rules)) }">
            @csrf
            @method('PUT')
            <div class="flex flex-wrap justify-between gap-3 py-4">
                <h2 class="text-complement300 font-main text-size-subtitle font-medium">Editar sección</h2>
            </div>
            <x-controls.validation-errors />
            {{-- Title --}}
            <x-controls.input type="text" name="title" placeholder="Escribe el título" label="Título"
                value="{{ old('title', $dto->title) }}" required autofocus />
            {{-- order --}}
            <x-controls.input type="number" name="order" placeholder="Escribe el orden de prioridad" label="Orden"
                value="{{ old('order', $dto->order) }}" required autofocus />
            <div class="mt-6">
                <div class="flex flex-col md:flex-row md:justify-between">
                    <p class="block font-medium text-gray-700 mb-2 md:mb-0">Contenido</p>
                    <x-controls.select id="select-variable" placeholder="Agregar variable" name="template_variable_id"
                        :options="$options" />
                </div>
                {{-- Editor --}}
                <x-controls.tiptap-editor name="content" :value="old('content', $dto->content) ?? ''"
                    placeholder="Escribe el contenido aquí..." />
            </div>
            {{-- Checkbox omit rules --}}
            <div class="flex flex-col items-start mt-6">
                <x-controls.checkbox id="omit_rules" name="omit_rules" label="Omitir reglas" 
                    x-model="omitRules" value="1" />
            </div>
            @if(!empty($rules) && count($rules) > 0)
                <div class="mt-6" id="rulesContainerContent" x-show="!omitRules" x-transition x-cloak>
                    <h3 class="text-complement300 font-main text-lg font-medium mb-2">Reglas de la sección</h3>
                    @foreach ($rules as $rule)
                        @php
                            $formattedOptions = collect($rule['options'])->pluck('key', 'value')->toArray();
                            $selectedValue = old('rules.' . $rule['id'], $dto->rules[$rule['key']] ?? $rule['default'] ?? null);
                        @endphp
                        <div class="mb-4">
                            <x-controls.select name="rules[{{ $rule['id'] }}]" label="{{ $rule['label'] }}"
                                :options="$formattedOptions" selected="{{ $selectedValue }}" />
                        </div>
                    @endforeach
                </div>
            @endif
            <div class="flex gap-4 mt-8">
                <x-controls.button type="submit">Actualizar</x-controls.button>
                <x-controls.button href="{{ route('contract-sections.index', $sectionTemplate->id) }}"
                    variant="secondary">
                    Cancelar
                </x-controls.button>
            </div>
        </form>
    </div>
</x-layouts.auth-layout>