@php
    $config = [
        'mode' => 'range',
        'locale' => 'es',
        'altFormat' => 'm/d/Y',
    ];
    $configMonth = [
        'plugins' => [
            [
                'monthSelectPlugin' => [
                    'dateFormat' => 'm.y',
                    'altFormat' => 'F Y',
                ],
            ],
        ],
    ];
@endphp
<div>
    <div class="flex flex-wrap justify-between ">
        <div class="mb-4 sm:mb-0">
            <h1 class="text-2xl md:text-3xl text-base-content font-bold">Entrega de Resultados</h1>
        </div>
        <div class="flex flex-wrap gap-4 items-end justify-between">
            <div class="w-full sm:w-auto">
                <x-input class="input-sm" label='Codigo' wire:model='codigo_informe' :readonly="!$editarParametricas" />
            </div>
            <div class="w-full sm:w-auto">
                <x-input class="input-sm" label='Version' wire:model='version_informe' :readonly="!$editarParametricas" />
            </div>
            <div class="w-full sm:w-auto">
                <x-datetime class="input-sm" label="Validado desde" wire:model="fecha_validacion_informe" icon="o-calendar"
                    :readonly="!$editarParametricas" />
            </div>
            <div class="w-full sm:w-auto mb-4 sm:mt-0 sm:mb-0">
                <x-button :class="$editarParametricas ? 'w-full sm:w-auto  btn btn-sm btn-primary' : 'w-full sm:w-auto btn btn-sm btn-secondary'" :label="$editarParametricas ? 'Guardar' : 'Editar'" :icon="$editarParametricas ? 'o-check' : 'o-pencil'" wire:click='toggleEditar' spinner />
            </div>
        </div>
    </div>
    <div class="grid grid-cols-12 gap-1">
        <!-- Filtro de búsqueda, ocupa 4 columnas en pantallas grandes y 12 en pantallas pequeñas -->
        <div class="col-span-12 sm:col-span-3">
            <x-choices-offline label="Elige el usuario" wire:model="users_ids" :options="$users"
                placeholder="Buscar ..." option-avatar="profile_photo_url" icon="o-users" compact allow-all
                allow-all-text="Seleccionar Todos" remove-all-text="Quitar todos" class="mb-2" />

            <x-choices-offline label="Elige el Estado de la Solicitud" wire:model="estados_ids" :options="$estados"
                placeholder="Buscar ..." icon="o-document-magnifying-glass" compact allow-all
                allow-all-text="Seleccionar Todos" remove-all-text="Quitar todos" class="mb-2" />
            <x-select label="Elige el tipo de reporte" class="mb-3" icon="c-bars-arrow-down" :options="$tipos"
                wire:model.live="selectedTipo" />

            @if ($esSolicitudesPorFecha)
                <x-datepicker label="Selecciona el rango" wire:model="rangoFecha" icon="o-calendar" :config="$config"
                    inline class="mb-2" />
            @endif


            @if ($esSolicitudesPorMes)
                <x-datepicker label="Selecciona el Mes" wire:model="fechaMes" icon="o-calendar" :config="$configMonth"
                    class="mb-2" />
            @endif
            <div class="flex flex-col gap-2">
                <x-button icon='o-magnifying-glass' label="CONSULTAR" wire:click="consultar"
                    class="w-full btn-primary" />
                <x-button label="Generar Reporte de Entrega de Resultados" wire:click='reporteEntregaResultadosPdf'
                    spinner class="w-full btn-outline" />
                <x-button label="Exportar a Excel" wire:click="reporteEntregaResultadosExcel"
                    class="w-full btn-outline" />
            </div>
        </div>
        <!-- Tabla de estudios, ocupa 8 columnas en pantallas grandes y 12 en pantallas pequeñas -->
        <div class="col-span-12 sm:col-span-9">
            <div data-instance="{{ $iteration }}" wire:key="tabla-{{ $iteration }}" class="loading-body">
                <x-table class="p-5 border border-base-300 shadow-sm rounded-lg mt-5 min-w-full tabla-parametros"
                    :headers="$headers" :sort-by="$sortBy" :rows="$estudios" striped>
                    @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
                        @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
                    @endscope
                    <x-slot:empty>
                        <x-icon name="o-cube" label="No se encontraron registros." />
                    </x-slot:empty>
                </x-table>

                <div class="loading-overlay" wire:loading wire:target="consultar">
                    <div class="loading-message">
                        Cargando, por favor espere...
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>