@php
    $config = [
        'locale' => 'es',
        'altFormat' => 'd/m/Y',
    ];
@endphp
<div x-data="{
    horariosSeleccionados: @entangle('horariosSeleccionados').live,
    seleccionarHorario(doctorId, horario) {
        if (this.horariosSeleccionados.doctor_id !== doctorId) {
            this.horariosSeleccionados = { doctor_id: doctorId, horarios: [horario] }
            return
        }
        let horarioActual = this.horariosSeleccionados.horarios;
        let nuevosHorarios = horarioActual.includes(horario) ?
            horarioActual.filter(h => h !== horario) : [...horarioActual, horario];

        if (this.esContinuo(nuevosHorarios)) {
            this.horariosSeleccionados = { doctor_id: doctorId, horarios: nuevosHorarios }
        } else {
            this.horariosSeleccionados = { doctor_id: doctorId, horarios: [horario] }
        }
    },
    esContinuo(horarios) {
        if (horarios.length < 2) return true;
        let ordenados = horarios.sort();
        for (let i = 0; i < ordenados.length - 1; i++) {
            if (this.calcularHoraSiguiente(ordenados[i]) !== ordenados[i + 1]) return false;
        }
        return true;
    },
    calcularHoraSiguiente(hora) {
        let fecha = new Date(`1970-01-01T${hora}`);
        fecha.setMinutes(fecha.getMinutes() + parseInt('{{ config('horario.duracion_cita') }}'));
        return fecha.toTimeString().split(' ')[0];
    }
}">
    <x-breadcrumbs :items="$breadcrumbs" />
    <x-card title="Buscar Disponibilidad">

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
            <div>
                <x-select label="Especialidad" wire:model.live="search.especialidad_id" id="especialidad_id"
                    placeholder="Selecciona una especialidad" :options="$especialidades" option-label="nombre" option-value="id" />
            </div>
            <div>
                <x-datepicker label="Selecciona la fecha" wire:model.live="search.fecha"
                    placeholder="Selecciona la fecha" icon="o-calendar" :config="$config" />
            </div>
            <div>
                <x-button label="Buscar Disponibilidad" wire:click="buscarDisponibilidad" class="btn-primary w-full"
                    icon='o-magnifying-glass' />
            </div>
        </div>
    </x-card>

    @if ($cita['fecha'])
        @if ($disponibilidades->count())
            <x-card>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 lg:gap-8 gap-4">
                    {{-- Lista de doctores disponibles --}}
                    <div class="col-span-1 lg:col-span-2 rounded-md space-y-6">
                        {{-- La llave como doctorId por el mapWithKeys --}}
                        @foreach ($disponibilidades as $doctorId => $disponibilidad)
                            <x-card>
                                <div>
                                    <x-avatar :image="$disponibilidad['avatar']" title="{{ $disponibilidad['doctor']->nombre_completo }}"
                                        subtitle="{{ $disponibilidad['doctor']->especialidad->nombre }}"
                                        class="!w-10" />
                                </div>
                                <hr class="my-3">
                                <div data-instance="{{ $iteration }}" wire:key="horarios-{{ $iteration }}">
                                    <p class="mb-2">Horarios Disponibles</p>
                                    <ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
                                        @foreach ($disponibilidad['horarios'] as $horario)
                                            @php
                                                // Formato visual sin segundos
                                                $horaFormateada = \Carbon\Carbon::parse(
                                                    $horario['hora_inicio'],
                                                )->format('H:i');
                                            @endphp
                                            <li>
                                                <x-button
                                                    x-on:click="seleccionarHorario({{ $doctorId }}, '{{ $horario['hora_inicio'] }}')"
                                                    x-bind:class="horariosSeleccionados.doctor_id === {{ $doctorId }} &&
                                                        horariosSeleccionados.horarios.includes(
                                                            '{{ $horario['hora_inicio'] }}') ?
                                                        'btn-primary' : 'btn-outline'"
                                                    x-bind:disabled="{{ $horario['disabled'] }}"
                                                    label="{{ $horaFormateada }}" class="w-full " />
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </x-card>
                        @endforeach


                        @if ($this->proximaCita)
                            <div class="p-4 rounded-lg  border border-primary shadow-sm">
                                <h3 class="font-semibold text-primary mb-2 flex items-center gap-2">
                                    <x-icon name="o-calendar" class="w-5 h-5" /> Próxima Cita
                                </h3>
                                <p><b>Fecha:</b> {{ $this->proximaCita->fecha_formato }}</p>
                                <p><b>Hora:</b> {{ $this->proximaCita->hora_inicio }}</p>
                                <p><b>Doctor:</b> {{ $this->proximaCita->doctor->nombre_completo }}</p>
                            </div>
                        @endif

                    </div>
                    {{-- Resumen de la cita --}}
                    @if ($citaGuardada)
                        <x-card title="Cita registrada con éxito">
                            <p>Paciente:
                                <b>{{ $citaGuardada->paciente_id ? $citaGuardada->paciente->nombre_completo : $citaGuardada->paciente_nombre }}</b>
                            </p>
                            <p>Doctor: <b>{{ $citaGuardada->doctor->nombre_completo }}</b></p>
                            <p>Fecha: {{ $citaGuardada->fecha_formato }}</p>
                            <p>Hora: {{ $citaGuardada->hora_inicio }}</p>
                            <x-slot:actions>
                                <x-button label="Registrar otra" class="btn-primary" wire:click="nuevaCita()" />
                            </x-slot:actions>
                        </x-card>
                    @else
                        <div class="col-span-1 p-4 rounded-md">
                            <x-card title="Resumen de la Cita" shadow separator>
                                <div class="flex justify-between gap-2">
                                    <span class="text-base">Doctor:</span>
                                    <span class="text-base font-semibold">
                                        {{ $this->doctorName }}
                                    </span>
                                </div>
                                <div class="flex justify-between gap-2">
                                    <span class="text-base">Fecha:</span>
                                    <span class="text-base font-semibold">
                                        {{ \Carbon\Carbon::parse($this->cita['fecha'])->format('d/m/Y') }}
                                    </span>
                                </div>
                                <div class="flex justify-between gap-2">
                                    <span class="text-base">Hora Inicio:</span>
                                    <span class="text-base font-semibold">
                                        {{ $this->cita['hora_inicio'] ? \Carbon\Carbon::parse($this->cita['hora_inicio'])->format('H:i') : '' }}
                                    </span>
                                </div>
                                <div class="flex justify-between gap-2">
                                    <span class="text-base">Hora Fin:</span>
                                    <span class="text-base font-semibold">
                                        {{ $this->cita['hora_fin'] ? \Carbon\Carbon::parse($this->cita['hora_fin'])->format('H:i') : '' }}
                                    </span>
                                </div>
                                <div class="flex justify-between gap-2">
                                    <span class="text-base">Duración:</span>
                                    <span class="text-base font-semibold">
                                        {{ $this->cita['duracion'] ?: 0 }} minutos
                                    </span>
                                </div>
                                <x-custom-choices label="Paciente" wire:model.live="cita.paciente_id" :options="$pacientes"
                                    placeholder="Buscar ..." single searchable debounce="300ms"
                                    search-function="buscarPaciente" clearable required />
                                <x-input label="Teléfono (Whatsapp para notificar)" wire:model="cita.telefono"
                                    placeholder="63228524" clearable type="number">
                                    <x-slot:prepend>
                                        <x-select placeholder="Codigo" wire:model="cita.codigo_pais" :options="$codigos_pais"
                                            class="min-w-28" icon="o-phone" />
                                    </x-slot:prepend>
                                </x-input>
                                <x-select label="Estado" wire:model="cita.estado" :options="$estados"
                                    placeholder="Selecciona un estado" required />
                                <x-select label="Sucursal" wire:model="cita.sucursal_id" :options="$sucursales"
                                    placeholder="Selecciona una sucursal" required 
                                    option-label="nombre" option-value="id" />
                                <x-slot:actions separator>
                                    <x-button wire:click='save' label="Confirmar Cita" class="btn-primary" spinner />
                                </x-slot:actions>
                            </x-card>
                        </div>
                    @endif
                </div>
            </x-card>
        @else
            <x-card>
                <div class="text-center">
                    <x-icon name="o-cube" label="No se encontraron disponibilidades." />
                </div>
            </x-card>
        @endif
    @endif

</div>