<x-layouts.tenant pageTitle="Reservas">
    <x-page-header title="Reservas" subtitle="Listado completo de reservas">
        <x-btn href="{{ route('tenant.bookings.agenda') }}" variant="secondary">Ver agenda</x-btn>
    </x-page-header>

    <div class="mb-4 rounded-[1.45rem] border border-ink-100 bg-white/95 p-3 shadow-sm md:rounded-2xl md:p-4">
        <div class="mb-3 flex items-center justify-between gap-3 md:hidden">
            <div>
                <p class="text-xs font-black uppercase tracking-[0.16em] text-violet-600">Estados</p>
                <p class="mt-0.5 text-sm font-bold text-ink-500">Filtra tus reservas</p>
            </div>
            <a href="{{ route('tenant.bookings.agenda') }}" class="rounded-full bg-ink-900 px-3 py-2 text-xs font-black text-white shadow-sm">Agenda</a>
        </div>

        <div class="-mx-3 overflow-x-auto px-3 pb-1 [scrollbar-width:none] md:mx-0 md:overflow-visible md:px-0 md:pb-0 [&::-webkit-scrollbar]:hidden">
            <div class="flex w-max items-center gap-2 md:w-auto md:flex-wrap">
                <a href="{{ route('tenant.bookings.index') }}"
                    class="inline-flex h-11 shrink-0 items-center gap-2 rounded-full px-4 text-sm font-black transition md:h-10 {{ $status === 'all' ? 'bg-ink-900 text-white shadow-soft' : 'border border-ink-100 bg-white text-ink-600 hover:bg-ink-50' }}">
                    Todas
                    <span class="inline-flex h-6 min-w-6 items-center justify-center rounded-full px-2 text-xs {{ $status === 'all' ? 'bg-white/15 text-white' : 'bg-ink-100 text-ink-600' }}">{{ $totalVisibleCount }}</span>
                </a>

                @foreach ($statusFilters as $filter)
                    <a href="{{ route('tenant.bookings.index', ['status' => $filter['value']]) }}"
                        class="inline-flex h-11 shrink-0 items-center gap-2 rounded-full px-4 text-sm font-black transition md:h-10 {{ $status === $filter['value'] ? 'bg-ink-900 text-white shadow-soft' : 'border border-ink-100 bg-white text-ink-600 hover:bg-ink-50' }}">
                        {{ $filter['label'] }}
                        <span class="inline-flex h-6 min-w-6 items-center justify-center rounded-full px-2 text-xs {{ $status === $filter['value'] ? 'bg-white/15 text-white' : 'bg-ink-100 text-ink-600' }}">{{ $filter['count'] }}</span>
                    </a>
                @endforeach

                @if ($archivedCount > 0)
                    <a href="{{ route('tenant.bookings.index', ['status' => 'archived']) }}"
                        class="inline-flex h-11 shrink-0 items-center gap-2 rounded-full px-4 text-sm font-black transition md:h-10 {{ $status === 'archived' ? 'bg-ink-900 text-white shadow-soft' : 'border border-ink-100 bg-white text-ink-600 hover:bg-ink-50' }}">
                        Archivadas
                        <span class="inline-flex h-6 min-w-6 items-center justify-center rounded-full px-2 text-xs {{ $status === 'archived' ? 'bg-white/15 text-white' : 'bg-ink-100 text-ink-600' }}">{{ $archivedCount }}</span>
                    </a>
                @endif
            </div>
        </div>
    </div>

    <x-card padding="false">
        <div class="divide-y divide-ink-100 md:hidden">
            @forelse ($bookings as $b)
                <article class="p-4">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <a href="{{ route('tenant.bookings.show', $b) }}" class="font-mono text-xs font-black text-brand-600">{{ $b->code }}</a>
                            <h3 class="mt-1 truncate text-base font-black text-ink-900">{{ $b->customer?->fullName() }}</h3>
                            <p class="mt-1 truncate text-sm font-semibold text-ink-600">{{ $b->service?->name }}</p>
                        </div>
                        <x-badge :color="$b->status->color()">{{ $b->status->label() }}</x-badge>
                    </div>

                    <div class="mt-4 grid grid-cols-2 gap-2 text-sm">
                        <div class="rounded-2xl bg-ink-50 p-3">
                            <p class="text-[10px] font-black uppercase tracking-wide text-ink-400">Profesional</p>
                            <p class="mt-1 truncate font-bold text-ink-800">{{ $b->employee?->fullName() ?? '—' }}</p>
                        </div>
                        <div class="rounded-2xl bg-ink-50 p-3">
                            <p class="text-[10px] font-black uppercase tracking-wide text-ink-400">Total</p>
                            <p class="mt-1 truncate font-black text-ink-900">$ {{ number_format($b->total_amount, 0, ',', '.') }}</p>
                        </div>
                    </div>

                    <div class="mt-3 rounded-2xl bg-violet-50 px-3 py-2 text-sm font-bold text-violet-800">
                        {{ $b->scheduled_at?->format('d/m/Y H:i') }}
                    </div>

                    <div class="mt-4 grid grid-cols-2 gap-2">
                        <a href="{{ route('tenant.bookings.show', $b) }}" class="btn btn-secondary btn-sm justify-center">Ver detalle</a>
                        @if ($b->status === \App\Enums\BookingStatus::Pending)
                            <form method="POST" action="{{ route('tenant.bookings.confirm', $b) }}">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="btn btn-primary btn-sm w-full justify-center">Confirmar</button>
                            </form>
                        @else
                            <a href="{{ route('tenant.bookings.agenda') }}" class="btn btn-primary btn-sm justify-center">Agenda</a>
                        @endif
                    </div>
                </article>
            @empty
                <div class="p-8">
                    <x-empty-state title="No hay reservas en este estado" message="Cuando existan reservas con este estado aparecerán aquí." />
                </div>
            @endforelse
        </div>

        <div class="hidden overflow-x-auto md:block">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 text-xs uppercase tracking-wider text-gray-600">
                    <tr>
                        <th class="px-4 py-3 text-left">Código</th>
                        <th class="px-4 py-3 text-left">Cliente</th>
                        <th class="px-4 py-3 text-left">Servicio</th>
                        <th class="px-4 py-3 text-left">Empleado</th>
                        <th class="px-4 py-3 text-left">Fecha y hora</th>
                        <th class="px-4 py-3 text-center">Estado</th>
                        <th class="px-4 py-3 text-right">Total</th>
                        <th class="px-4 py-3 text-right">Acciones</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse ($bookings as $b)
                        <tr class="hover:bg-gray-50">
                            <td class="p-0">
                                <a href="{{ route('tenant.bookings.show', $b) }}" class="block px-4 py-3 font-mono text-xs text-indigo-600 font-medium">
                                    {{ $b->code }}
                                </a>
                            </td>
                            <td class="p-0">
                                <a href="{{ route('tenant.bookings.show', $b) }}" class="block px-4 py-3 font-medium text-gray-900">
                                    {{ $b->customer?->fullName() }}
                                </a>
                            </td>
                            <td class="p-0">
                                <a href="{{ route('tenant.bookings.show', $b) }}" class="block px-4 py-3 text-gray-600">
                                    {{ $b->service?->name }}
                                </a>
                            </td>
                            <td class="p-0">
                                <a href="{{ route('tenant.bookings.show', $b) }}" class="block px-4 py-3 text-gray-600">
                                    {{ $b->employee?->fullName() ?? '—' }}
                                </a>
                            </td>
                            <td class="p-0">
                                <a href="{{ route('tenant.bookings.show', $b) }}" class="block px-4 py-3 text-gray-600 text-xs">
                                    {{ $b->scheduled_at?->format('d/m/Y H:i') }}
                                </a>
                            </td>
                            <td class="p-0 text-center">
                                <a href="{{ route('tenant.bookings.show', $b) }}" class="block px-4 py-3">
                                    <x-badge :color="$b->status->color()">{{ $b->status->label() }}</x-badge>
                                </a>
                            </td>
                            <td class="p-0 text-right">
                                <a href="{{ route('tenant.bookings.show', $b) }}" class="block px-4 py-3 font-mono text-gray-900">
                                    $ {{ number_format($b->total_amount, 0, ',', '.') }}
                                </a>
                            </td>
                            <td class="px-4 py-3 text-right">
                                @if ($b->status === \App\Enums\BookingStatus::Pending)
                                    <form method="POST" action="{{ route('tenant.bookings.confirm', $b) }}" class="inline-flex">
                                        @csrf
                                        @method('PATCH')
                                        <button type="submit"
                                            class="inline-flex items-center justify-center rounded-full bg-emerald-50 px-3 py-1.5 text-xs font-black text-emerald-700 ring-1 ring-emerald-200 transition hover:bg-emerald-100">
                                            Confirmar
                                        </button>
                                    </form>
                                @else
                                    <a href="{{ route('tenant.bookings.show', $b) }}" class="text-xs font-bold text-brand-600 hover:text-brand-700">Ver</a>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="8"><x-empty-state title="No hay reservas en este estado" message="Cuando existan reservas con este estado aparecerán aquí." /></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($bookings->hasPages())
            <div class="px-4 py-3 border-t border-gray-100">{{ $bookings->links() }}</div>
        @endif
    </x-card>
</x-layouts.tenant>
