<div x-data="{ selectedEmployee: null, confirmDelete: false }" class="space-y-5">
    <?php
        use App\Models\Employee;

        $totalEmployees = Employee::count();
        $activeEmployees = Employee::where('is_active', true)->count();
        $inactiveEmployees = max(0, $totalEmployees - $activeEmployees);

        $statCards = [
            [
                'label' => 'Profesionales',
                'value' => $totalEmployees,
                'tone' => 'violet',
                'icon' => 'M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0z',
            ],
            [
                'label' => 'Activos',
                'value' => $activeEmployees,
                'tone' => 'emerald',
                'icon' => 'M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
            ],
            [
                'label' => 'Inactivos',
                'value' => $inactiveEmployees,
                'tone' => 'amber',
                'icon' => 'M11.42 15.17 17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17 6.765 20.823a2.548 2.548 0 11-3.586-3.586l6.837-5.63M15.75 15.75l2.625 2.625',
            ],
        ];

        $toneClasses = [
            'violet' => ['bg' => 'bg-violet-50', 'text' => 'text-violet-600'],
            'emerald' => ['bg' => 'bg-emerald-50', 'text' => 'text-emerald-600'],
            'amber' => ['bg' => 'bg-amber-50', 'text' => 'text-amber-600'],
        ];
    ?>

    <div class="grid grid-cols-2 gap-3 md:grid-cols-3 md:gap-4">
        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $statCards; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $stat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <?php $tone = $toneClasses[$stat['tone']]; ?>
            <div class="<?php echo \Illuminate\Support\Arr::toCssClasses([
                'rounded-[1.35rem] border border-ink-100 bg-white p-4 shadow-sm md:rounded-2xl',
                'col-span-2 md:col-span-1' => $loop->first,
            ]); ?>">
                <div class="flex items-center gap-3">
                    <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl <?php echo e($tone['bg']); ?>">
                        <svg class="h-5 w-5 <?php echo e($tone['text']); ?>" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="<?php echo e($stat['icon']); ?>" />
                        </svg>
                    </div>
                    <div class="min-w-0">
                        <p class="text-2xl font-black leading-none text-ink-900"><?php echo e($stat['value']); ?></p>
                        <p class="mt-1 truncate text-xs font-bold text-ink-500"><?php echo e($stat['label']); ?></p>
                    </div>
                </div>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    </div>

    <div class="rounded-[1.45rem] border border-ink-100 bg-white shadow-sm">
        <div class="border-b border-ink-100 p-4 md:px-5">
            <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                <div class="relative w-full md:max-w-sm">
                    <svg class="absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
                    </svg>
                    <input type="search" wire:model.live.debounce.300ms="search"
                        placeholder="Buscar empleado..."
                        class="w-full rounded-2xl border border-ink-100 bg-ink-50 py-3 pl-10 pr-4 text-sm text-ink-900 transition placeholder:text-ink-400 focus:border-violet-300 focus:bg-white focus:outline-none focus:ring-2 focus:ring-violet-500/20 md:rounded-xl md:py-2.5">
                </div>
                <a href="<?php echo e(route('tenant.employees.create')); ?>" class="btn btn-primary btn-md w-full md:w-auto">
                    <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="M12 4v16m8-8H4" /></svg>
                    Añadir
                </a>
            </div>
        </div>

        <div class="divide-y divide-ink-100 md:hidden">
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $employees; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $e): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <article class="p-4">
                    <div class="flex items-start gap-3">
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($e->photoUrl()): ?>
                            <img src="<?php echo e($e->photoUrl()); ?>" class="h-14 w-14 shrink-0 rounded-2xl object-cover shadow-sm ring-1 ring-ink-100" alt="<?php echo e($e->fullName()); ?>">
                        <?php else: ?>
                            <div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl text-base font-black text-white shadow-sm ring-1 ring-white"
                                style="background: <?php echo e($e->color ?? '#6366f1'); ?>;">
                                <?php echo e(strtoupper(substr($e->first_name, 0, 1))); ?>

                            </div>
                        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

                        <div class="min-w-0 flex-1">
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <h3 class="truncate text-base font-black leading-tight text-ink-900"><?php echo e($e->fullName()); ?></h3>
                                    <p class="mt-1 truncate text-xs text-ink-500"><?php echo e($e->position ?: 'Profesional'); ?></p>
                                </div>
                                <button type="button"
                                    @click="confirmDelete = false; selectedEmployee = {
                                        id: <?php echo e($e->id); ?>,
                                        name: <?php echo \Illuminate\Support\Js::from($e->fullName())->toHtml() ?>,
                                        contact: <?php echo \Illuminate\Support\Js::from($e->email ?? $e->phone ?? 'Sin contacto')->toHtml() ?>,
                                        active: <?php echo e($e->is_active ? 'true' : 'false'); ?>,
                                        editUrl: <?php echo \Illuminate\Support\Js::from(route('tenant.employees.edit', $e))->toHtml() ?>
                                    }"
                                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-ink-50 text-ink-500 active:scale-95"
                                    aria-label="Acciones de <?php echo e($e->fullName()); ?>">
                                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75h.008v.008H12V6.75Zm0 5.25h.008v.008H12V12Zm0 5.25h.008v.008H12v-.008Z" /></svg>
                                </button>
                            </div>

                            <div class="mt-3 flex flex-wrap items-center gap-2">
                                <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-bold <?php echo e($e->is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-ink-100 text-ink-500'); ?>">
                                    <span class="h-1.5 w-1.5 rounded-full <?php echo e($e->is_active ? 'bg-emerald-500' : 'bg-ink-400'); ?>"></span>
                                    <?php echo e($e->is_active ? 'Activo' : 'Inactivo'); ?>

                                </span>
                                <span class="inline-flex items-center gap-1.5 rounded-full bg-violet-50 px-2.5 py-1 text-xs font-bold text-violet-700">
                                    <?php echo e($e->services->count()); ?> <?php echo e($e->services->count() === 1 ? 'servicio' : 'servicios'); ?>

                                </span>
                            </div>

                            <p class="mt-3 truncate text-xs text-ink-400"><?php echo e($e->email ?? $e->phone ?? 'Sin contacto registrado'); ?></p>
                        </div>
                    </div>
                </article>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="p-8 text-center">
                    <div class="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-2xl bg-violet-50">
                        <svg class="h-7 w-7 text-violet-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                        </svg>
                    </div>
                    <p class="text-sm font-black text-ink-800">No hay empleados</p>
                    <p class="mt-1 text-xs text-ink-400">Agrega tu primer profesional al equipo.</p>
                    <a href="<?php echo e(route('tenant.employees.create')); ?>" class="btn btn-primary btn-sm mt-4">Añadir empleado</a>
                </div>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        </div>

        <div class="hidden overflow-x-auto md:block">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-ink-100 bg-ink-50/70">
                        <th class="px-5 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-ink-500">Profesional</th>
                        <th class="px-5 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-ink-500">Cargo</th>
                        <th class="px-5 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-ink-500">Servicios</th>
                        <th class="px-5 py-3.5 text-center text-xs font-semibold uppercase tracking-wider text-ink-500">Estado</th>
                        <th class="w-24 px-5 py-3.5"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-ink-100">
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $employees; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $e): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr class="group cursor-pointer transition-colors hover:bg-violet-50/30"
                            onclick="window.location='<?php echo e(route('tenant.employees.edit', $e)); ?>'">
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-3.5">
                                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($e->photoUrl()): ?>
                                        <img src="<?php echo e($e->photoUrl()); ?>" class="h-11 w-11 shrink-0 rounded-full object-cover shadow-sm ring-2 ring-white" alt="<?php echo e($e->fullName()); ?>">
                                    <?php else: ?>
                                        <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-sm font-semibold text-white shadow-sm ring-2 ring-white" style="background: <?php echo e($e->color ?? '#6366f1'); ?>;">
                                            <?php echo e(strtoupper(substr($e->first_name, 0, 1))); ?>

                                        </div>
                                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                    <div class="min-w-0">
                                        <p class="truncate font-semibold text-ink-900"><?php echo e($e->fullName()); ?></p>
                                        <p class="mt-0.5 truncate text-xs text-ink-400"><?php echo e($e->email ?? $e->phone ?? '—'); ?></p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-4">
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($e->position): ?>
                                    <span class="inline-flex items-center rounded-lg bg-violet-50 px-2.5 py-1 text-xs font-medium text-violet-700"><?php echo e($e->position); ?></span>
                                <?php else: ?>
                                    <span class="text-sm text-ink-300">—</span>
                                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            </td>
                            <td class="px-5 py-4 text-sm text-ink-600"><?php echo e($e->services->count()); ?> <?php echo e($e->services->count() === 1 ? 'servicio' : 'servicios'); ?></td>
                            <td class="px-5 py-4 text-center" onclick="event.stopPropagation()">
                                <button wire:click="toggleActive(<?php echo e($e->id); ?>)"
                                    class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-semibold transition-colors <?php echo e($e->is_active ? 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100' : 'bg-ink-100 text-ink-500 hover:bg-ink-200'); ?>">
                                    <span class="h-1.5 w-1.5 rounded-full <?php echo e($e->is_active ? 'bg-emerald-500' : 'bg-ink-400'); ?>"></span>
                                    <?php echo e($e->is_active ? 'Activo' : 'Inactivo'); ?>

                                </button>
                            </td>
                            <td class="px-5 py-4" onclick="event.stopPropagation()">
                                <div class="flex items-center justify-end gap-1 opacity-0 transition-opacity group-hover:opacity-100">
                                    <a href="<?php echo e(route('tenant.employees.edit', $e)); ?>" class="rounded-lg p-2 text-ink-400 transition-colors hover:bg-violet-100 hover:text-violet-600" title="Editar">
                                        <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="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z" /></svg>
                                    </a>
                                    <button wire:click="delete(<?php echo e($e->id); ?>)" wire:confirm="¿Eliminar a <?php echo e($e->fullName()); ?>?" class="rounded-lg p-2 text-ink-400 transition-colors hover:bg-rose-100 hover:text-rose-600" title="Eliminar">
                                        <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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="5" class="px-5 py-16 text-center">
                                <p class="text-sm font-semibold text-ink-700">No hay empleados</p>
                                <p class="mt-1 text-xs text-ink-400">Agrega tu primer profesional al equipo.</p>
                            </td>
                        </tr>
                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                </tbody>
            </table>
        </div>

        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($employees->hasPages()): ?>
            <div class="border-t border-ink-100 bg-ink-50/40 px-4 py-3.5 md:px-5">
                <?php echo e($employees->links()); ?>

            </div>
        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    </div>

    <div x-show="selectedEmployee" x-cloak class="fixed inset-0 z-50 md:hidden">
        <div class="absolute inset-0 bg-ink-950/40 backdrop-blur-sm" @click="selectedEmployee = null; confirmDelete = false"></div>
        <section x-show="selectedEmployee"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="translate-y-full"
            x-transition:enter-end="translate-y-0"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="translate-y-0"
            x-transition:leave-end="translate-y-full"
            class="absolute inset-x-0 bottom-0 rounded-t-[2rem] bg-white p-5 pb-[max(1.25rem,env(safe-area-inset-bottom))] shadow-2xl">
            <div class="mx-auto mb-4 h-1.5 w-12 rounded-full bg-ink-200"></div>
            <div class="mb-5">
                <p class="text-xs font-black uppercase tracking-[0.16em] text-violet-600">Profesional</p>
                <h3 class="mt-1 text-xl font-black text-ink-900" x-text="selectedEmployee?.name"></h3>
                <p class="mt-1 text-sm text-ink-500" x-text="selectedEmployee?.contact"></p>
            </div>
            <div x-show="! confirmDelete" class="space-y-2">
                <a :href="selectedEmployee?.editUrl" class="flex w-full items-center justify-between rounded-2xl bg-ink-50 px-4 py-3 text-sm font-black text-ink-900">
                    Editar perfil
                    <span>→</span>
                </a>
                <button type="button" @click="$wire.toggleActive(selectedEmployee.id); selectedEmployee.active = !selectedEmployee.active"
                    class="flex w-full items-center justify-between rounded-2xl bg-ink-50 px-4 py-3 text-sm font-black text-ink-900">
                    <span x-text="selectedEmployee?.active ? 'Desactivar empleado' : 'Activar empleado'"></span>
                    <span class="text-ink-400">↻</span>
                </button>
                <button type="button" @click="confirmDelete = true"
                    class="flex w-full items-center justify-between rounded-2xl bg-rose-50 px-4 py-3 text-sm font-black text-rose-700">
                    Eliminar empleado
                    <span>×</span>
                </button>
            </div>
            <div x-show="confirmDelete" x-transition class="rounded-3xl border border-rose-100 bg-rose-50 p-4">
                <p class="text-sm font-black text-rose-900">¿Eliminar este empleado?</p>
                <p class="mt-1 text-xs leading-5 text-rose-700">Esta acción quitará al profesional del listado y de sus relaciones actuales.</p>
                <div class="mt-4 grid grid-cols-2 gap-2">
                    <button type="button" @click="confirmDelete = false" class="rounded-2xl bg-white px-4 py-3 text-sm font-black text-ink-700 shadow-sm">
                        Volver
                    </button>
                    <button type="button" @click="$wire.delete(selectedEmployee.id); selectedEmployee = null; confirmDelete = false"
                        class="rounded-2xl bg-rose-600 px-4 py-3 text-sm font-black text-white shadow-sm">
                        Eliminar
                    </button>
                </div>
            </div>
        </section>
    </div>
</div>
<?php /**PATH /Applications/XAMPP/xamppfiles/htdocs/CitasSoft/resources/views/livewire/tenant/employees-table.blade.php ENDPATH**/ ?>