@php
    $colors = ['#bfbfbf', '#e03a39', '#504d48', '#f4d03f'];
    $selectedColor = '#000000';
@endphp

<div>
    <div class="flex flex-wrap justify-between items-center gap-4">
        <!-- Botones -->
        <div class="grid grid-cols-2 gap-2 w-full sm:w-auto">
            <x-toggle wire:model="informar" wire:change="toggleInformar">
                <x-slot:label>
                    <span class="inline-block min-w-24">
                        {{ $informe->es_informado ? 'Desinformar' : 'Informar' }}
                    </span>
                </x-slot:label>
            </x-toggle>
        </div>

        <!-- Estado -->
        <div class="flex items-center gap-2">
            @if ($informe->es_informado)
                <x-icon name="c-check-badge" class="text-lg text-success" />
                <x-badge icon="o-user" value="Informado" class="badge-success text-base-100" />
            @else
                <x-icon name="o-document-check" class="text-lg text-primary" />
                <x-badge icon="o-user" value="Recibido" class="badge-primary" />
            @endif
        </div>
    </div>
    <div class="grid grid-cols-12 gap-2">
        <div class="col-span-12 sm:col-span-12">
            <x-custom-choices data-testid="pruebas-select" id="input-pruebas" wire:model='gen_selected_id'
                label="Elige los genes asignadas a este informe" :options="$genes" placeholder="Buscar gen..." single
                searchable @change-selection="$wire.crearGen($event.detail.value);
                            focus()"
                @keyup.enter="$wire.crearGen($event.target.value);
                            focus();
                            clear()">
                @scope('selection', $parametro)
                @endscope
            </x-custom-choices>
        </div>
        <div class="col-span-12 sm:col-span-12">
            <div data-instance="{{ $iteration }}" wire:key="tabla-{{ $iteration }}">
                <div class="space-y-3" wire:ignore>
                    <div class="space-y-3" wire:ignore>
                        <div
                          x-data="{
                            handle() {
                              // Obtener los <li> en el orden visual y armar array de IDs
                              const ids = Array.from($el.querySelectorAll('li[data-id]'))
                                .map(li => Number(li.dataset.id));
                              $wire.actualizarOrden(ids);
                            }
                          }"
                        >
                          <ul x-sort="handle" x-init>
                            @foreach ($genesInforme as $index => $genInforme)
                              <li x-sort:item="{{ $genInforme->id }}" data-id="{{ $genInforme->id }}">
                                <span x-sort:handle class="cursor-grab active:cursor-grabbing">
                                    <div class="flex items-center gap-2 px-3 py-2 bg-base-200 border border-base-300 rounded-lg hover:bg-gray-50 transition-colors">
                                        <x-icon name="o-bars-3" class="w-4 h-4 text-gray-500" />
                                        <div class="flex justify-start items-center">
                                            <span class="text-xs text-secondary font-medium">Orden</span>
                                            <span class="text-lg font-bold text-primary ml-2">{{ $genInforme->orden_impresion ?? $index + 1 }}</span>
                                        </div>
                                    </div>
                                </span>
                                {{-- CARD GEN --}}
                                <div class="max-w-full mx-auto overflow-hidden">
                                    <div class="p-2">
                                        <x-input type="text" placeholder="Titulo" value="{{ $genInforme->titulo }}"
                                            class="input-sm border-b-2 border-base-300 font-bold text-2xl w-auto"
                                            x-on:blur="$wire.call('actualizarGen', {{ $genInforme->id }}, 'titulo', $event.target.value)"
                                            @keyup.enter="$wire.call('actualizarGen', {{ $genInforme->id }}, 'titulo', $event.target.value)" />
                                    </div>
                                    <div class="border border-base-300 rounded overflow-hidden group">
                                        <div class="flex flex-col md:flex-row">
                                            <x-color-picker-card :colors="$colors" :selectedColor="$genInforme->color_card" :idRegistro="$genInforme->id"
                                                :callFunction="'actualizarGen'" :column="'color_card'" />
                                            <div class="flex-1">
                                                <div class="grid grid-cols-12 border-b">
                                                    <!-- Gene Name Section -->
                                                    <div
                                                        class="col-span-12 md:col-span-3 p-4 border-r flex flex-col justify-center items-center">
                                                        <h2 class="text-4xl font-bold">{{ $genInforme->gen->nombre }}</h2>
                                                        <div class="max-w-28 mb-2">
                                                            <x-input type="text" placeholder="p.T790M"
                                                                class="input-sm border-b-2 h-6 border-base-300"
                                                                value="{{ $genInforme->variante }}"
                                                                x-on:blur="$wire.call('actualizarGen', {{ $genInforme->id }}, 'variante', $event.target.value)"
                                                                @keyup.enter="$wire.call('actualizarGen', {{ $genInforme->id }}, 'variante', $event.target.value)" />
                                                        </div>
                                                        <div>
                                                            <x-input type="text" placeholder="Suspected germline variant"
                                                                value="{{ $genInforme->texto_adicional }}"
                                                                class="input-sm border-b-2 h-6 border-base-300 text-xs text-red-500 w-auto"
                                                                x-on:blur="$wire.call('actualizarGen', {{ $genInforme->id }}, 'texto_adicional', $event.target.value)"
                                                                @keyup.enter="$wire.call('actualizarGen', {{ $genInforme->id }}, 'texto_adicional', $event.target.value)" />
                                                        </div>
                                                    </div>
        
                                                    <!-- Results Section -->
                                                    <div class="col-span-12 md:col-span-7 p-4">
                                                        <!-- Responsive To -->
                                                        <div class="flex items-center mb-2">
        
                                                            <div
                                                                class="break-words flex justify-start items-center w-full gap-4">
                                                                <div class="font-bold flex-none">
                                                                    <x-icon name="s-check-circle"
                                                                        class="text-success" />Sensible
                                                                    a:&nbsp;&nbsp;&nbsp;
                                                                </div>
                                                                <div class="w-full">
                                                                    <x-input type="text"
                                                                        placeholder="Ej: Inhibidores de EGFR"
                                                                        value="{{ $genInforme->sensible }}"
                                                                        class="input-sm flex-grow border-b-2 w-full border-base-300"
                                                                        autocomplete='off'
                                                                        x-on:blur="$wire.call('actualizarGen', {{ $genInforme->id }}, 'sensible', $event.target.value)"
                                                                        @keyup.enter="$wire.call('actualizarGen', {{ $genInforme->id }}, 'sensible', $event.target.value)" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="flex items-center mb-2">
        
                                                            <div
                                                                class="break-words flex justify-start items-center w-full gap-3">
                                                                <div class="font-bold flex-none">
                                                                    <x-icon name="c-no-symbol" class="text-error" />Resistente
                                                                    a:
                                                                </div>
                                                                <div class="w-full">
                                                                    <x-input type="text"
                                                                        value="{{ $genInforme->resistente }}"
                                                                        placeholder="Ej: Afatinib, Dacomitinib..."
                                                                        class="input-sm flex-grow border-b-2 w-full border-base-300"
                                                                        autocomplete='off'
                                                                        x-on:blur="$wire.call('actualizarGen', {{ $genInforme->id }}, 'resistente', $event.target.value)"
                                                                        @keyup.enter="$wire.call('actualizarGen', {{ $genInforme->id }}, 'resistente', $event.target.value)" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="mt-3">
                                                            <x-ck-editor-offline id="comentario" wire:model="comentario"
                                                                :inicialData="$genInforme->comentario" :idRegistro="$genInforme->id" :callFunction="'actualizarGen'"
                                                                :column="'comentario'" />
                                                        </div>
                                                    </div>
                                                    <div
                                                        class="col-span-12 md:col-span-2 p-4 flex flex-col justify-center items-center border-l relative">
                                                        <x-textarea class="py-0 field-sizing-content font-bold text-center"
                                                            rows="1" placeholder='Wild Type o Tipo Salvaje' inline
                                                            x-on:blur="$wire.call('actualizarGen', {{ $genInforme->id }}, 'vaf', $event.target.value)"
                                                            @keyup.enter="$wire.call('actualizarGen', {{ $genInforme->id }}, 'vaf', $event.target.value)">
                                                            {{ $genInforme->vaf }}
                                                        </x-textarea>
                                                        <x-button label="Eliminar"
                                                            wire:click="eliminarGen({{ $genInforme->id }})"
                                                            class="btn btn-secondary badge-neutral absolute -right-0 -top-0 opacity-0 group-hover:opacity-100 transition-opacity duration-200" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="px-4 py-2 text-xs">
                                        <x-input type="text" placeholder="Leyenda"
                                            class="input-sm border-b-2 border-base-300" value="{{ $genInforme->leyenda }}"
                                            x-on:blur="$wire.call('actualizarGen', {{ $genInforme->id }}, 'leyenda', $event.target.value)"
                                            @keyup.enter="$wire.call('actualizarGen', {{ $genInforme->id }}, 'leyenda', $event.target.value)" />
                                    </div>
                                </div>
                              </li>
                            @endforeach
                          </ul>
                        </div>
                      </div>
                      
                </div>
            </div>
        </div>
    </div>
</div>