@extends('layouts.owner')

@section('title', 'Serviços — Lined')
@section('page-title', 'Serviços')
@section('page-subtitle', 'Gerencie os serviços oferecidos')

@section('content')

    <div class="rounded-2xl border border-white/8 bg-white/3 overflow-hidden">

        <div class="px-6 py-5 border-b border-white/8 flex items-center justify-between">
            <h3 class="font-heading font-bold text-white text-base">Lista de serviços</h3>
            <a href="{{ route('owner.services.create') }}"
                class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-brand-green text-white text-xs font-semibold hover:bg-brand-green-dark transition-colors no-underline">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
                    stroke-linecap="round">
                    <line x1="12" y1="5" x2="12" y2="19" />
                    <line x1="5" y1="12" x2="19" y2="12" />
                </svg>
                Novo serviço
            </a>
        </div>

        {{-- Busca por nome --}}
        <div class="px-6 py-4 border-b border-white/8">
            <form method="GET" action="{{ route('owner.services.index') }}" class="flex items-center gap-2" onsubmit="return onSearchSubmit(this)">
                <div class="relative flex-1 max-w-sm">
                    <i class="fa-solid fa-magnifying-glass absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-500 text-xs"></i>
                    <input type="text" name="search" value="{{ $search }}" maxlength="100"
                        placeholder="Buscar por nome..."
                        class="w-full pl-9 pr-4 py-2.5 rounded-xl bg-[#0a0a0a] border border-white/10 text-white text-sm placeholder-gray-600 focus:border-brand-green/50 focus:outline-none transition-all">
                </div>
                <button type="submit"
                    class="search-btn inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-brand-green text-white text-xs font-semibold hover:bg-brand-green-dark transition-colors cursor-pointer border-0">
                    <i class="fa-solid fa-magnifying-glass text-[0.7rem]"></i> Buscar
                </button>
                @if ($search !== '')
                    <a href="{{ route('owner.services.index') }}"
                        class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl border border-white/10 text-gray-400 text-xs font-semibold hover:text-white hover:border-white/25 transition-all no-underline">
                        <i class="fa-solid fa-xmark text-[0.7rem]"></i> Limpar
                    </a>
                @endif
            </form>
        </div>

        @if (count($services) > 0)

            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-white/6">
                                <th class="text-left px-6 py-4 text-gray-600 text-xs font-bold tracking-wider uppercase">Nome</th>
                            <th class="text-left px-6 py-4 text-gray-600 text-xs font-bold tracking-wider uppercase">Preço</th>
                            <th class="text-left px-6 py-4 text-gray-600 text-xs font-bold tracking-wider uppercase hidden sm:table-cell">Duração</th>
                            <th class="text-left px-6 py-4 text-gray-600 text-xs font-bold tracking-wider uppercase">Status
                            </th>
                            <th class="px-6 py-4"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/4">
                        @foreach ($services as $service)
                            @php $s = (object)(array) $service; @endphp
                            <tr class="hover:bg-white/3 transition-colors">
                                <td class="px-6 py-4">
                                    <span class="text-white font-semibold text-sm">{{ $s->name }}</span>
                                </td>
                                <td class="px-6 py-4">
                                    <span class="text-brand-green font-bold text-sm">
                                        R$ {{ number_format((float) $s->price, 2, ',', '.') }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 hidden sm:table-cell">
                                    <span class="text-gray-300 text-sm">{{ $s->period ?? '—' }} min</span>
                                </td>
                                <td class="px-6 py-4">
                                    <button onclick="toggleState(this, {{ $s->idservice }}, {{ $s->state }})"
                                        data-state="{{ $s->state }}"
                                        title="{{ (int) $s->state === 0 ? 'Ativo' : 'Inativo' }}"
                                        class="relative inline-flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer border-0 shrink-0
                                        {{ (int) $s->state === 0 ? 'bg-brand-green' : 'bg-white/15' }}">
                                        <span
                                            class="inline-block w-3.5 h-3.5 rounded-full bg-white shadow transition-transform duration-300
                                        {{ (int) $s->state === 0 ? 'translate-x-[22px]' : 'translate-x-1' }}">
                                        </span>
                                    </button>
                                </td>
                                <td class="px-6 py-4 text-right">
                                    <a href="{{ route('owner.services.edit', $s->idservice) }}"
                                        class="p-2 rounded-lg text-gray-500 hover:text-white hover:bg-white/8 transition-all inline-flex items-center">
                                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none"
                                            stroke="currentColor" stroke-width="2" stroke-linecap="round">
                                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
                                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
                                        </svg>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if ($pagination['last_page'] > 1)
                <div class="px-6 py-4 border-t border-white/6 flex items-center justify-between">
                    <p class="text-gray-500 text-xs">
                        Exibindo
                        <span class="text-white font-medium">{{ $pagination['from'] }}</span>
                        a
                        <span class="text-white font-medium">{{ $pagination['to'] }}</span>
                        de
                        <span class="text-white font-medium">{{ $pagination['total'] }}</span>
                        serviços
                    </p>
                    <div class="flex items-center gap-1.5">
                        @if ($pagination['current_page'] > 1)
                            <a href="{{ request()->fullUrlWithQuery(['page' => $pagination['current_page'] - 1]) }}"
                                class="px-3 py-1.5 rounded-lg border border-white/10 text-gray-400 text-xs font-medium hover:border-white/25 hover:text-white transition-all no-underline">
                                ← Anterior
                            </a>
                        @else
                            <span
                                class="px-3 py-1.5 rounded-lg border border-white/5 text-gray-600 text-xs font-medium cursor-not-allowed">←
                                Anterior</span>
                        @endif

                        @for ($i = max(1, $pagination['current_page'] - 2); $i <= min($pagination['last_page'], $pagination['current_page'] + 2); $i++)
                            <a href="{{ request()->fullUrlWithQuery(['page' => $i]) }}"
                                class="px-3 py-1.5 rounded-lg text-xs font-medium no-underline transition-all
                            {{ $i === $pagination['current_page']
                                ? 'bg-brand-green text-white border border-brand-green/50'
                                : 'border border-white/10 text-gray-400 hover:border-white/25 hover:text-white' }}">
                                {{ $i }}
                            </a>
                        @endfor

                        @if ($pagination['current_page'] < $pagination['last_page'])
                            <a href="{{ request()->fullUrlWithQuery(['page' => $pagination['current_page'] + 1]) }}"
                                class="px-3 py-1.5 rounded-lg border border-white/10 text-gray-400 text-xs font-medium hover:border-white/25 hover:text-white transition-all no-underline">
                                Próximo →
                            </a>
                        @else
                            <span
                                class="px-3 py-1.5 rounded-lg border border-white/5 text-gray-600 text-xs font-medium cursor-not-allowed">Próximo
                                →</span>
                        @endif
                    </div>
                </div>
            @endif
        @else
            <div class="p-12 flex flex-col items-center justify-center text-center">
                <div
                    class="w-14 h-14 rounded-2xl bg-brand-green/10 border border-brand-green/20 flex items-center justify-center mb-5">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="6" cy="6" r="3" />
                        <path d="M8.12 8.12 12 12" />
                        <path d="M20 4 8.12 15.88" />
                        <circle cx="6" cy="18" r="3" />
                        <path d="M14.8 14.8 20 20" />
                    </svg>
                </div>
                @if ($search !== '')
                    <h3 class="font-heading font-bold text-white text-lg mb-2">Nenhum serviço encontrado</h3>
                    <p class="text-gray-500 text-sm max-w-xs">Nenhum resultado para “{{ $search }}”.</p>
                    <a href="{{ route('owner.services.index') }}"
                        class="mt-5 inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-white/10 text-gray-300 text-xs font-semibold hover:text-white hover:border-white/25 transition-all no-underline">
                        <i class="fa-solid fa-xmark text-[0.7rem]"></i> Limpar busca
                    </a>
                @else
                    <h3 class="font-heading font-bold text-white text-lg mb-2">Nenhum serviço cadastrado</h3>
                    <p class="text-gray-500 text-sm max-w-xs">Adicione os serviços oferecidos para que os clientes possam
                        agendar.</p>
                @endif
            </div>
        @endif

    </div>

@endsection

@push('scripts')
    <script>
        function onSearchSubmit(form) {
            const b = form.querySelector('.search-btn');
            if (b) {
                b.disabled = true;
                b.classList.add('opacity-75', 'cursor-not-allowed');
                b.innerHTML = '<i class="fa-solid fa-spinner fa-spin text-[0.7rem]"></i> Buscando...';
            }
            return true;
        }

        async function toggleState(btn, idservice, currentState) {
            const newState = currentState === 0 ? 1 : 0;
            btn.style.opacity = '0.4';
            btn.style.pointerEvents = 'none';

            try {
                const res = await fetch('{{ url('owner/services') }}/' + idservice + '/state', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        state: newState
                    })
                });
                const data = await res.json();

                if (data.ok) {
                    const knob = btn.querySelector('span');

                    if (newState === 0) {
                        btn.classList.remove('bg-white/15');
                        btn.classList.add('bg-brand-green');
                        knob.classList.remove('translate-x-1');
                        knob.classList.add('translate-x-[22px]');
                    } else {
                        btn.classList.remove('bg-brand-green');
                        btn.classList.add('bg-white/15');
                        knob.classList.remove('translate-x-[22px]');
                        knob.classList.add('translate-x-1');
                    }

                    btn.title = newState === 0 ? 'Ativo' : 'Inativo';
                    btn.setAttribute('onclick', `toggleState(this, ${idservice}, ${newState})`);
                    btn.dataset.state = newState;
                    showToast(newState === 0 ? 'Serviço ativado' : 'Serviço desativado', 'success');
                } else {
                    showToast('Erro ao atualizar status', 'error');
                }
            } catch {
                showToast('Erro de conexão', 'error');
            } finally {
                btn.style.opacity = '1';
                btn.style.pointerEvents = 'auto';
            }
        }
    </script>
@endpush