@php
    $config = [
        'locale' => 'es',
        'altFormat' => 'd/m/Y',
    ];
@endphp
<div>
    <form wire:submit.prevent="save">
        <div class="flex flex-wrap gap-6 mb-3">
            <div class="flex-1 space-y-4">
                {{-- Paciente --}}
                <x-choices class="mb-2" label="Paciente" wire:model="paciente_id" :options="$pacientes"
                    placeholder="Buscar ..." single searchable search-function="searchPaciente" required>
                    @scope('item', $paciente)
                        <x-list-item :item="$paciente">
                            <x-slot:avatar>
                                <x-avatar :placeholder="$paciente['codigo']" class="!w-10" />
                            </x-slot:avatar>
                            <x-slot:actions>
                                <x-badge :value="$paciente['ci']" class="badge-soft badge-primary badge-sm" />
                            </x-slot:actions>
                        </x-list-item>
                    @endscope
                    @scope('selection', $paciente)
                        {{ $paciente['name'] }} ({{ $paciente['codigo'] }})
                    @endscope
                </x-choices>

                {{-- Fecha y hora --}}
                <x-datepicker label="Selecciona la fecha" wire:model.live="fecha" placeholder="Selecciona la fecha"
                    icon="o-calendar" :config="$config" />
        
                <x-choices-offline label="Tipo de Programación" wire:model="tipo_programacion_id" :options="$tipos_programacion"
                    placeholder="Buscar ..." single clearable searchable option-label="nombre" option-value="id" />

            </div>
            <div class="flex-1 space-y-4">
                {{-- Doctor --}}
                <x-choices class="mb-2" label="Medico Solicitante" wire:model="doctor_id" :options="$doctores"
                    placeholder="Buscar ..." single searchable search-function="searchDoctor" required>
                    @scope('item', $doctor)
                        <x-list-item :item="$doctor">
                            <x-slot:avatar>
                                <x-avatar :image="$doctor['avatar_url']" class="!w-10" />
                            </x-slot:avatar>
                        </x-list-item>
                    @endscope
                    @scope('selection', $doctor)
                        {{ $doctor['name'] }}
                    @endscope
                </x-choices>
                <x-input type="time" label="Hora inicio" wire:model="hora_inicio" required />
                <x-input label="Razón" wire:model="razon" placeholder="Motivo de la programación" required
                 />
            </div>
        </div>

        {{-- Observaciones --}}
        <x-textarea label="Observaciones" wire:model="observaciones" class="py-0 field-sizing-content"
            inline hint="Max 1000 caracteres" placeholder="Observaciones" />
        {{-- Horarios --}}
        {{--  <div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-12 gap-2">
            @foreach ($this->horarios as $hora)
                <x-button 
                    label="{{ $hora }}" 
                    class="{{ $hora_inicio === $hora ? 'btn-primary' : 'btn-outline' }} px-4"
                    wire:click="$set('hora_inicio', '{{ $hora }}')" />
            @endforeach
        </div> --}}

        <div class="mt-4 flex justify-end">
            <x-button class="btn-primary" type="submit" label="Guardar Programación" spinner />
        </div>
    </form>
</div>