<x-layouts.tenant pageTitle="Horarios">
    <x-page-header title="Horarios" subtitle="Define la disponibilidad de cada empleado." />

    @if (session('success'))
        <script>window.addEventListener('DOMContentLoaded',()=>window.sileo?.success("{{ session('success') }}"))</script>
    @endif

    {{-- Employee selector --}}
    <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 = $employee && $employee->id === $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>

    @if ($employee)
    <form method="POST" action="{{ route('tenant.schedules.store') }}">
        @csrf
        <input type="hidden" name="employee_id" value="{{ $employee->id }}">

        <div class="space-y-3">
            @foreach (\App\Enums\Weekday::cases() 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"
                     x-data="{
                         rows: {{ json_encode(array_values($rows)) }},
                         addRow() { this.rows.push({ start: '09:00', end: '18:00', active: true }) },
                         removeRow(i) { this.rows.splice(i, 1) }
                     }">

                    <div class="flex items-center justify-between px-5 py-3.5"
                         :class="rows.length > 0 ? 'border-b border-ink-100 bg-ink-50/50' : ''">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
                                 :class="rows.length > 0 ? 'bg-indigo-100' : 'bg-ink-100'">
                                <svg class="h-4 w-4" :class="rows.length > 0 ? '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" :class="rows.length > 0 ? 'text-ink-900' : 'text-ink-400'">{{ $day->label() }}</p>
                                <p x-show="rows.length === 0" class="text-xs text-ink-400">Día no laboral</p>
                            </div>
                        </div>
                        <button type="button" @click="addRow()"
                            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>

                    <div x-show="rows.length > 0" class="px-5 py-3 space-y-2.5">
                        <template x-for="(row, i) in rows" :key="i">
                            <div class="flex items-center gap-3">
                                <div class="flex items-center gap-2 flex-1">
                                    <input type="time"
                                           :name="`days[{{ $day->value }}][${i}][start]`"
                                           x-model="row.start"
                                           class="text-sm border border-ink-200 rounded-xl px-3 py-2 w-32 focus:border-indigo-400 focus:outline-none bg-ink-50 focus:bg-white transition">
                                    <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>
                                    <input type="time"
                                           :name="`days[{{ $day->value }}][${i}][end]`"
                                           x-model="row.end"
                                           class="text-sm border border-ink-200 rounded-xl px-3 py-2 w-32 focus:border-indigo-400 focus:outline-none bg-ink-50 focus:bg-white transition">
                                </div>

                                {{-- Active checkbox as toggle --}}
                                <label class="flex items-center gap-2 cursor-pointer select-none">
                                    <input type="checkbox"
                                           :name="`days[{{ $day->value }}][${i}][active]`"
                                           x-model="row.active"
                                           class="sr-only peer">
                                    <div class="relative w-9 h-5 rounded-full transition-colors cursor-pointer pointer-events-none"
                                         :class="row.active ? 'bg-indigo-500' : 'bg-ink-200'">
                                        <div class="absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-all"
                                             :class="row.active ? 'left-[18px]' : 'left-0.5'"></div>
                                    </div>
                                    <span class="text-xs font-medium" :class="row.active ? 'text-indigo-600' : 'text-ink-500'">Activa</span>
                                </label>

                                <button type="button" @click="removeRow(i)"
                                    class="p-1.5 rounded-lg text-ink-400 hover:text-rose-600 hover:bg-rose-50 transition-colors flex-shrink-0">
                                    <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>
                        </template>
                    </div>
                </div>
            @endforeach
        </div>

        <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>
    @endif
</x-layouts.tenant>
