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

        $totalServices = Service::count();
        $activeServices = Service::where('is_active', true)->count();
        $inactiveServices = max(0, $totalServices - $activeServices);
    ?>

    <div class="grid grid-cols-2 gap-3 md:grid-cols-3 md:gap-4">
        <div class="col-span-2 rounded-[1.35rem] border border-ink-100 bg-white p-4 shadow-sm md:col-span-1 md:rounded-2xl">
            <div class="flex items-center gap-3">
                <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-indigo-50 text-indigo-600">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" /></svg>
                </div>
                <div class="min-w-0">
                    <p class="text-2xl font-black leading-none text-ink-900"><?php echo e($totalServices); ?></p>
                    <p class="mt-1 truncate text-xs font-bold text-ink-500">Servicios</p>
                </div>
            </div>
        </div>
        <div class="rounded-[1.35rem] border border-ink-100 bg-white p-4 shadow-sm md:rounded-2xl">
            <div class="flex items-center gap-3">
                <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-600">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                </div>
                <div class="min-w-0">
                    <p class="text-2xl font-black leading-none text-ink-900"><?php echo e($activeServices); ?></p>
                    <p class="mt-1 truncate text-xs font-bold text-ink-500">Activos</p>
                </div>
            </div>
        </div>
        <div class="rounded-[1.35rem] border border-ink-100 bg-white p-4 shadow-sm md:rounded-2xl">
            <div class="flex items-center gap-3">
                <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-amber-50 text-amber-600">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728 5.636 5.636" /></svg>
                </div>
                <div class="min-w-0">
                    <p class="text-2xl font-black leading-none text-ink-900"><?php echo e($inactiveServices); ?></p>
                    <p class="mt-1 truncate text-xs font-bold text-ink-500">Inactivos</p>
                </div>
            </div>
        </div>
    </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 servicio..."
                        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.services.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 = $services; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $s): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <article class="p-4">
                    <div class="flex gap-3">
                        <div class="h-20 w-24 shrink-0 overflow-hidden rounded-2xl bg-ink-100 ring-1 ring-ink-100">
                            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($s->imageUrl()): ?>
                                <img src="<?php echo e($s->imageUrl()); ?>" alt="<?php echo e($s->name); ?>" class="h-full w-full object-cover">
                            <?php else: ?>
                                <div class="flex h-full w-full items-center justify-center bg-indigo-50 text-lg font-black text-indigo-400"><?php echo e(strtoupper(substr($s->name, 0, 1))); ?></div>
                            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                        </div>
                        <div class="min-w-0 flex-1">
                            <div class="flex items-start justify-between gap-2">
                                <div class="min-w-0">
                                    <h3 class="truncate text-base font-black text-ink-900"><?php echo e($s->name); ?></h3>
                                    <p class="mt-1 text-xs text-ink-500"><?php echo e($s->category?->name ?? 'Sin categoría'); ?></p>
                                </div>
                                <button type="button"
                                    @click="confirmDelete = false; selectedService = { id: <?php echo e($s->id); ?>, name: <?php echo \Illuminate\Support\Js::from($s->name)->toHtml() ?>, active: <?php echo e($s->is_active ? 'true' : 'false'); ?>, editUrl: <?php echo \Illuminate\Support\Js::from(route('tenant.services.edit', $s))->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($s->name); ?>">
                                    <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="rounded-full bg-ink-50 px-2.5 py-1 text-xs font-bold text-ink-600"><?php echo e($s->duration_minutes); ?> min</span>
                                <span class="rounded-full bg-indigo-50 px-2.5 py-1 text-xs font-black text-indigo-700">$ <?php echo e(number_format($s->price, 0, ',', '.')); ?></span>
                                <span class="rounded-full px-2.5 py-1 text-xs font-bold <?php echo e($s->is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-ink-100 text-ink-500'); ?>"><?php echo e($s->is_active ? 'Activo' : 'Inactivo'); ?></span>
                            </div>
                        </div>
                    </div>
                </article>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="p-8 text-center">
                    <p class="text-sm font-black text-ink-800">No hay servicios</p>
                    <p class="mt-1 text-xs text-ink-400">Crea tu primer servicio para recibir reservas.</p>
                    <a href="<?php echo e(route('tenant.services.create')); ?>" class="btn btn-primary btn-sm mt-4">Añadir servicio</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">Servicio</th>
                        <th class="px-5 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-ink-500">Categoría</th>
                        <th class="px-5 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-ink-500">Precio</th>
                        <th class="px-5 py-3.5 text-center text-xs font-semibold uppercase tracking-wider text-ink-500">Duración</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 = $services; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $s): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr class="group cursor-pointer transition-colors hover:bg-indigo-50/30" onclick="window.location='<?php echo e(route('tenant.services.edit', $s)); ?>'">
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-3.5">
                                    <div class="h-12 w-16 shrink-0 overflow-hidden rounded-xl border border-ink-100 bg-ink-100 shadow-sm">
                                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($s->imageUrl()): ?>
                                            <img src="<?php echo e($s->imageUrl()); ?>" alt="<?php echo e($s->name); ?>" class="h-full w-full object-cover">
                                        <?php else: ?>
                                            <div class="flex h-full w-full items-center justify-center bg-indigo-50 text-sm font-bold text-indigo-400"><?php echo e(strtoupper(substr($s->name, 0, 1))); ?></div>
                                        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                    </div>
                                    <div class="min-w-0">
                                        <p class="font-semibold leading-snug text-ink-900"><?php echo e($s->name); ?></p>
                                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($s->description): ?>
                                            <p class="mt-0.5 max-w-xs truncate text-xs text-ink-400"><?php echo e($s->description); ?></p>
                                        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-4 text-sm text-ink-600"><?php echo e($s->category?->name ?? '—'); ?></td>
                            <td class="px-5 py-4 text-right font-semibold text-ink-900">$ <?php echo e(number_format($s->price, 0, ',', '.')); ?></td>
                            <td class="px-5 py-4 text-center text-sm text-ink-600"><?php echo e($s->duration_minutes); ?> min</td>
                            <td class="px-5 py-4 text-center" onclick="event.stopPropagation()">
                                <button wire:click="toggleActive(<?php echo e($s->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($s->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($s->is_active ? 'bg-emerald-500' : 'bg-ink-400'); ?>"></span>
                                    <?php echo e($s->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.services.edit', $s)); ?>" class="rounded-lg p-2 text-ink-400 transition-colors hover:bg-indigo-100 hover:text-indigo-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($s->id); ?>)" wire:confirm="¿Eliminar el servicio '<?php echo e($s->name); ?>'?" 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="6" class="px-5 py-16 text-center"><?php if (isset($component)) { $__componentOriginal074a021b9d42f490272b5eefda63257c = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal074a021b9d42f490272b5eefda63257c = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.empty-state','data' => ['title' => 'No hay servicios','message' => 'Crea tu primer servicio para empezar a recibir reservas.']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('empty-state'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['title' => 'No hay servicios','message' => 'Crea tu primer servicio para empezar a recibir reservas.']); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal074a021b9d42f490272b5eefda63257c)): ?>
<?php $attributes = $__attributesOriginal074a021b9d42f490272b5eefda63257c; ?>
<?php unset($__attributesOriginal074a021b9d42f490272b5eefda63257c); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal074a021b9d42f490272b5eefda63257c)): ?>
<?php $component = $__componentOriginal074a021b9d42f490272b5eefda63257c; ?>
<?php unset($__componentOriginal074a021b9d42f490272b5eefda63257c); ?>
<?php endif; ?></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($services->hasPages()): ?>
            <div class="border-t border-ink-100 bg-ink-50/40 px-4 py-3.5 md:px-5"><?php echo e($services->links()); ?></div>
        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    </div>

    <div x-show="selectedService" x-cloak class="fixed inset-0 z-50 md:hidden">
        <div class="absolute inset-0 bg-ink-950/40 backdrop-blur-sm" @click="selectedService = null; confirmDelete = false"></div>
        <section x-show="selectedService" 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>
            <p class="text-xs font-black uppercase tracking-[0.16em] text-violet-600">Servicio</p>
            <h3 class="mt-1 text-xl font-black text-ink-900" x-text="selectedService?.name"></h3>
            <div x-show="! confirmDelete" class="mt-5 space-y-2">
                <a :href="selectedService?.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 servicio <span>→</span></a>
                <button type="button" @click="$wire.toggleActive(selectedService.id); selectedService.active = !selectedService.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="selectedService?.active ? 'Desactivar servicio' : 'Activar servicio'"></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 servicio <span>×</span></button>
            </div>
            <div x-show="confirmDelete" x-transition class="mt-5 rounded-3xl border border-rose-100 bg-rose-50 p-4">
                <p class="text-sm font-black text-rose-900">¿Eliminar este servicio?</p>
                <p class="mt-1 text-xs leading-5 text-rose-700">Se quitará del menú y ya no estará disponible para nuevas reservas.</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(selectedService.id); selectedService = 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/services-table.blade.php ENDPATH**/ ?>