@php
    /* Configuracion de input rango de fechas */
    $config = [
        'mode' => 'range',
        'locale' => 'es',
        'altFormat' => 'd/m/Y',
    ];
@endphp

<div x-data="{ showFilters: false }" class="p-4 bg-base-100 shadow-md rounded-md mb-2">
    <x-button @click="showFilters = !showFilters" class="btn btn-xs btn-outline" label='Filtros' icon='o-funnel' />
    <div x-show="showFilters" class="mt-4" x-transition>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            <x-input class="input-sm" wire:model.live.debounce.500ms='codigo_solicitud_filtro'
                placeholder='Código solicitud' />
            <x-select class="select-sm" icon="o-document" :options="$tipos_estudio" wire:model.live='tipo_filtro' />
            <x-input class="input-sm" wire:model.live.debounce.500ms='paciente_filtro' placeholder='Paciente' />
            <x-input class="input-sm" wire:model.live.debounce.500ms='paciente_ci_filtro' placeholder='CI Paciente' />
            <div class="date-sm flex justify-between gap-2">
                <x-datepicker class="input-sm" placeholder='Fecha Informe' wire:model="fecha_informe_filtro"
                    icon="o-calendar" :config="$config" />
                <x-button icon='o-check' class="btn btn-sm btn-primary" wire:click='rangoFechaInforme'
                    tooltip='Aplicar Filtro' />
            </div>
            <div class="date-sm flex justify-between gap-2">
                <x-datepicker class="input-sm" placeholder='Fecha Solicitud' wire:model="fecha_solicitud_filtro"
                    icon="o-calendar" :config="$config" />
                <x-button icon='o-check' class="btn btn-sm btn-primary" wire:click='rangoFechaSolicitud'
                    tooltip='Aplicar Filtro' />
            </div>
            {{-- <x-input class="input-sm" wire:model.live.debounce.500ms='seguro_filtro' placeholder='Seguro'/>
            <x-input class="input-sm" wire:model.live.debounce.500ms='institucion_filtro' placeholder='Institución'/>
            <x-input class="input-sm" wire:model.live.debounce.500ms='medico_filtro' placeholder='Médico'/>
            <x-input class="input-sm" wire:model.live.debounce.500ms='estado_filtro' placeholder='Estado'/> --}}
        </div>
    </div>
</div>

<div class="shadow-xl border border-base-300">
    <x-table id='tabla-estudios' :headers="$headers" wire:model.live="selected" :rows="$estudios" :sort-by="$sortBy"
        with-pagination per-page="perPage" :per-page-values="[15, 25, 50, 100]" striped class="dropdown-z">


        @scope('cell_estado_nombre', $estudio)
            @if ($estudio->estado->codigo == 21)
                {{-- Pendiente --}}
                <div class="tooltip tooltip-left" data-tip="{{ $estudio->estado->nombre }}">
                    <x-icon name="o-document-check" class="text-lg text-primary" />
                </div>
            @elseif ($estudio->estado->codigo == 22)
                {{-- Incompleto --}}
                <div class="tooltip tooltip-left" data-tip="{{ $estudio->estado->nombre }}">
                    <x-icon name="c-exclamation-triangle" class="text-lg text-warning" />
                </div>
            @elseif ($estudio->estado->codigo == 23)
                {{-- Completo --}}
                <div class="tooltip tooltip-left" data-tip="{{ $estudio->estado->nombre }}">
                    <x-icon name="c-check" class="text-lg text-success" />
                </div>
            @elseif ($estudio->estado->codigo == 24)
                {{-- Validado --}}
                <div class="tooltip tooltip-left" data-tip="Validado por: {{ $estudio->validador->name ?? '' }}">
                    <x-icon name="c-check-badge" class="text-lg text-success" />
                </div>
            @else
                {{-- Informado --}}
                <div class="tooltip tooltip-left" data-tip="Informado por: {{ $estudio->informador->name ?? '' }}">
                    <x-icon name="c-document-check" class="text-lg text-primary" />
                </div>
            @endif
            @can('estudios.edit')
                @if ($estudio->esNotificado())
                    <div class="tooltip tooltip-left"
                        data-tip="Notificado por: {{ $estudio->notificado_por_nombre }} el {{ $estudio->fecha_notificacion_formato }}">
                        <x-icon name="m-paper-airplane" class="text-lg text-success" />
                    </div>
                @endif
            @endcan
        @endscope
        @scope('cell_tipo_estudio_nombre', $estudio)
            @if ($estudio->esUrgente())
                <x-badge :value="'Urgente'" class="bg-error text-base-100" />
            @elseif($estudio->esRutina())
                <x-badge :value="'Rutina'" />
            @elseif($estudio->esEmergencia())
                <x-badge :value="'Emergencia'" class="bg-warning text-base-100" />
            @endif
        @endscope


        @scope('cell_actions', $estudio)
            <div class="flex gap-1">
                @can('estudios.edit')
                    <x-button icon="o-pencil-square" class="btn-xs btn-outline relative" tooltip-right="Editar Solicitud"
                        link="{{ route('estudios.show', ['estudio' => $estudio->id, 'edit' => true]) }}">
                    </x-button>
                    <x-button icon="o-table-cells" class="btn-xs btn-outline relative" tooltip="Resultados"
                        link="{{ route('estudios.show', ['estudio' => $estudio->id, 'edit' => false]) }}">
                        @if ($estudio->resultados_count > 0)
                            <x-badge value="{{ $estudio->resultados_count }}"
                                class="badge-neutral badge-xs absolute -right-2 -top-2" />
                        @endif
                    </x-button>
                @endcan
                @can('archivos.index')
                    <x-button icon="o-archive-box" class="btn-xs btn-outline relative" tooltip="Archivos"
                        @click="$wire.dispatch('abrir-modal-archivos', { estudio: {{ $estudio->id }} })">
                        @if ($estudio->archivos_count > 0)
                            <x-badge value="{{ $estudio->archivos_count }}"
                                class="badge-neutral badge-xs absolute -right-2 -top-2" />
                        @endif
                    </x-button>
                @endcan
                <x-button class="btn-xs btn-outline hover:text-red-300 group" tooltip="Imprimir"
                    @click="$wire.dispatch('abrir-modal-reporte', { estudio: {{ $estudio->id }} })">
                    <i class="text-red-500 group-hover:text-red-300 fa-regular fa-file-pdf" style="font-size: 1.5em;"></i>
                </x-button>

                <x-dropdown class="btn-outline btn-xs tooltip" data-tip="Mas acciones">


                    <x-menu-item title="Información clínica" icon="o-clipboard-document-list"
                        wire:loading.class="pointer-events-none opacity-50"
                        @click="$wire.dispatch('abrir-modal-lazy', 
                            { title: 'Información clínica', componente: 'estudio.informacion-clinica', id: '{{ $estudio->id }}',
                            actions: false, })" />

                    <x-menu-item title="Historico" icon="o-clock" wire:loading.class="pointer-events-none opacity-50"
                        @click="$wire.dispatch('abrir-modal-historico', { paciente_id: {{ $estudio->paciente->id }},
                        nombre_completo: '{{ $estudio->paciente->nombre_completo }}'  })" />
                    @can('estudios.edit')
                        <div class="tooltip" data-tip="Accion en mantenimiento">
                            <x-menu-item title="Duplicar" icon="o-document-duplicate"
                                wire:click='duplicar({{ $estudio->id }})'
                                wire:loading.class="pointer-events-none opacity-50"
                                wire:confirm='Quieres duplicar este estudio?' disabled />
                        </div>
                    @endcan
                    @can('estudios.destroy')
                        <x-menu-item title="Eliminar" icon="o-trash" spinner wire:click="delete({{ $estudio->id }})"
                            wire:confirm.prompt='¿Estas seguro de que deseas eliminar este registro?\n\nEscribe ELIMINAR para confirmar|ELIMINAR' />
                    @endcan
                </x-dropdown>
            </div>
        @endscope

        {{-- Para cuando la tabla esta vacia --}}
        <x-slot:empty>
            <x-icon name="o-cube" label="No se encontraron registros." />
        </x-slot:empty>
    </x-table>


</div>