@php
    /* Configuracion de input rango de fechas */
    $config = [
        'mode' => 'range',
        'locale' => 'es',
        'altFormat' => 'd/m/Y',
    ];
@endphp
<div class="grid grid-cols-12 gap-1">
    <div class="col-span-12">
        {{-- Header --}}
        <div class="mb-3">
            <div class="lg:flex lg:justify-between py-3">
                <div class="text-xl font-semibold text-base-content">
                    Gestión de Consultas
                </div>
            </div>
            <div class="flex flex-wrap justify-between items-center gap-4">
                <!-- Contenedor de los botones -->
                <div class="flex flex-wrap gap-2 max-sm:grid max-sm:grid-cols-2 max-sm:w-full">
                    <div>
                        @livewire('consulta.crear-consulta')
                    </div>
                    <div>
                        <x-button label="Exportar" icon='o-arrow-up-tray'
                            class="btn-outline btn-sm w-full sm:w-auto h-full sm:h-8" disabled />
                    </div>
                    {{-- Filtro de fechaas --}}
                    <div class="flex justify-between gap-2">
                        <x-datepicker class="input-sm" placeholder='Fecha Informe' wire:model="fecha_consulta_filtro"
                            icon="o-calendar" :config="$config" />
                        <x-button icon='o-check' class="btn btn-sm btn-primary" wire:click='rangoFecha'
                            tooltip='Aplicar Filtro' />
                    </div>

                </div>
                <!-- Input del buscador -->
                <div class="w-full sm:w-auto max-sm:mt-2">
                    <x-input icon="o-magnifying-glass" wire:model.live.debounce.500ms="search"
                        label="Buscar registro..." inline autocomplete="off" placeholder='Buscar registro...' />
                </div>
            </div>
        </div>
    </div>
    <div class="col-span-12">
        {{-- Table --}}
        <div class="shadow-xl border border-base-300">
            <x-table :headers="$headers" :rows="$consultas" :sort-by="$sortBy" with-pagination per-page="perPage"
                :per-page-values="[10, 25, 50, 100]" striped
                @row-click="$dispatch('alertPasarConsulta', {id: $event.detail.id, estado: $event.detail.estado})">
                @scope('cell_motivo_consulta', $consulta)
                    {{-- Limitar a 60 caracteres --}}
                    <div class="line-clamp-2">
                        {{ $consulta->motivo_consulta }}
                    </div>
                @endscope
                @scope('cell_actions', $consulta)
                    <div class="flex gap-1" @click.stop>
                        <x-button icon="o-heart" spinner :class="$consulta->signosVitales->esCompleto()
                            ? 'btn-xs btn-outline bg-success'
                            : 'btn-xs btn-outline'" tooltip-right="Signos Vitales"
                            @click="$wire.dispatch('abrir-modal-lazy', 
                                { title: 'Signos Vitales - {{ $consulta->paciente->nombre_completo }}', componente: 'consulta.editar-signos-vitales', id: '{{ $consulta->id }}',
                                actions: false })" />

                        <x-button tooltip-right="Pasar a Consulta" icon="o-squares-plus" class="btn-primary btn-xs"
                            @click="$dispatch('alertPasarConsulta', { id: {{ $consulta->id }}})" />
                    </div>
                @endscope

                @scope('cell_signos_vitales_estado', $consulta)
                   @if ($consulta->signosVitales->esCompleto())
                   <x-badge value='Completo' class="badge-success"/>
                   @elseif ($consulta->signosVitales->esParcial())
                       <x-badge value='Parcial' class="badge-warning"/>
                   @else
                       <x-badge value='Vacio' class="badge-secondary"/>
                   @endif
                @endscope

                {{-- Para cuando la tabla está vacía --}}
                <x-slot:empty>
                    <x-icon name="o-cube" label="No se encontraron registros." />
                </x-slot:empty>
            </x-table>
        </div>
    </div>
</div>