<div>
    {{-- Employee selector — GET form, navegación real del browser --}}
    <div class="mb-6 bg-white rounded-2xl border border-ink-100 p-5 shadow-sm">
        <p class="text-xs font-semibold text-ink-500 uppercase tracking-wider mb-3">Seleccionar profesional</p>
        <div class="flex flex-wrap gap-3">
            @foreach ($employees as $emp)
                @php $isSelected = (int)$employeeId === (int)$emp->id; @endphp
                <a href="{{ route('tenant.schedules.index') }}?employee={{ $emp->id }}"
                   class="flex items-center gap-2.5 px-4 py-2.5 rounded-xl border-2 transition-all no-underline"
                   style="{{ $isSelected ? 'border-color:#6366f1;background:#eef2ff;' : 'border-color:#e2e8f0;background:#fff;' }}">

                    @if ($emp->photoUrl())
                        <img src="{{ $emp->photoUrl() }}" class="w-7 h-7 rounded-full object-cover flex-shrink-0" alt="{{ $emp->fullName() }}">
                    @else
                        <div class="w-7 h-7 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0"
                            style="background:{{ $emp->color ?? '#6366f1' }};">
                            {{ strtoupper(substr($emp->first_name, 0, 1)) }}
                        </div>
                    @endif

                    <span class="text-sm font-semibold" style="{{ $isSelected ? 'color:#4338ca;' : 'color:#1e293b;' }}">
                        {{ $emp->fullName() }}
                    </span>

                    @if ($isSelected)
                        <svg class="h-4 w-4 flex-shrink-0" style="color:#6366f1;" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                        </svg>
                    @endif
                </a>
            @endforeach
        </div>
    </div>

    {{-- Schedule grid --}}
    <form wire:submit="save">
    <div class="space-y-3">
        @foreach ($days as $day)
            @php
                $rows = $schedules[$day->value] ?? [];
                $hasRows = count($rows) > 0;
            @endphp
            <div class="bg-white rounded-2xl border {{ $hasRows ? 'border-ink-100' : 'border-dashed border-ink-200' }} overflow-hidden shadow-sm">
                <div class="flex items-center justify-between px-5 py-3.5 {{ $hasRows ? 'border-b border-ink-100 bg-ink-50/50' : '' }}">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-lg {{ $hasRows ? 'bg-indigo-100' : 'bg-ink-100' }} flex items-center justify-center flex-shrink-0">
                            <svg class="h-4 w-4 {{ $hasRows ? 'text-indigo-600' : 'text-ink-400' }}" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm font-semibold {{ $hasRows ? 'text-ink-900' : 'text-ink-400' }}">{{ $day->label() }}</p>
                            @if (!$hasRows)
                                <p class="text-xs text-ink-400">Día no laboral</p>
                            @endif
                        </div>
                    </div>
                    <button type="button"
                        wire:click="addRow({{ $day->value }})"
                        class="inline-flex items-center gap-1.5 text-xs font-semibold text-indigo-600 hover:text-indigo-700 hover:bg-indigo-50 px-3 py-1.5 rounded-lg transition-colors">
                        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                        </svg>
                        Añadir franja
                    </button>
                </div>

                @if ($hasRows)
                    <div class="px-5 py-3 space-y-2.5">
                        @foreach ($rows as $idx => $row)
                            <div class="flex items-center gap-3" wire:key="day-{{ $day->value }}-{{ $idx }}">
                                {{-- Time range --}}
                                <div class="flex items-center gap-2 flex-1">
                                    <div class="relative">
                                        <input type="time"
                                            wire:model="schedules.{{ $day->value }}.{{ $idx }}.start"
                                            value="{{ $row['start'] ?? '' }}"
                                            class="text-sm border border-ink-200 rounded-xl px-3 py-2 w-32 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none bg-ink-50 focus:bg-white transition">
                                    </div>
                                    <div class="flex items-center gap-1 text-ink-400">
                                        <div class="h-px w-3 bg-ink-300"></div>
                                        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                                        </svg>
                                        <div class="h-px w-3 bg-ink-300"></div>
                                    </div>
                                    <div class="relative">
                                        <input type="time"
                                            wire:model="schedules.{{ $day->value }}.{{ $idx }}.end"
                                            value="{{ $row['end'] ?? '' }}"
                                            class="text-sm border border-ink-200 rounded-xl px-3 py-2 w-32 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none bg-ink-50 focus:bg-white transition">
                                    </div>
                                </div>

                                {{-- Active toggle --}}
                                <label class="flex items-center gap-2 cursor-pointer select-none">
                                    <input type="checkbox"
                                        wire:model="schedules.{{ $day->value }}.{{ $idx }}.active"
                                        class="sr-only peer">
                                    <div class="relative w-9 h-5 bg-ink-200 rounded-full transition peer-checked:bg-indigo-500 after:absolute after:top-0.5 after:left-0.5 after:w-4 after:h-4 after:rounded-full after:bg-white after:shadow after:transition-all peer-checked:after:translate-x-4"></div>
                                    <span class="text-xs text-ink-500 font-medium peer-checked:text-indigo-600">Activa</span>
                                </label>

                                {{-- Remove --}}
                                <button type="button"
                                    wire:click="removeRow({{ $day->value }}, {{ $idx }})"
                                    class="p-1.5 rounded-lg text-ink-400 hover:text-rose-600 hover:bg-rose-50 transition-colors flex-shrink-0"
                                    title="Quitar franja">
                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        @endforeach
    </div>

    {{-- Save --}}
    <div class="mt-6 flex justify-end">
        <button type="submit"
            class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-indigo-600 text-white text-sm font-semibold shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>
            Guardar horarios
        </button>
    </div>
    </form>
</div>
