<x-cliente-layout title="Onboarding — OPCON">

    <div style="margin-bottom:1.5rem;">
        <h1 style="font-size:1.25rem;font-weight:700;color:#1e3a5f;margin:0;">Meu Onboarding</h1>
        <p style="font-size:0.875rem;color:#64748b;margin:0.25rem 0 0;">Acompanhe os passos para concluir sua integração</p>
    </div>

    @if($contrato && $total > 0)
    {{-- Progress banner --}}
    <div style="background:#fff;border-radius:12px;border:1px solid #e2e8f0;padding:1.25rem 1.5rem;margin-bottom:1.5rem;">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem;flex-wrap:wrap;gap:0.5rem;">
            <p style="font-size:0.9375rem;font-weight:700;color:#1e3a5f;margin:0;">{{ $contrato->razao_social }}</p>
            <p style="font-size:0.875rem;font-weight:700;color:{{ $progresso === 100 ? '#25b87e' : '#1e3a5f' }};margin:0;">
                {{ $feito }}/{{ $total }} concluídos ({{ $progresso }}%)
            </p>
        </div>
        <div style="height:8px;border-radius:4px;background:#e2e8f0;overflow:hidden;">
            <div style="height:100%;background:#25b87e;border-radius:4px;width:{{ $progresso }}%;transition:width 0.5s ease;"></div>
        </div>
        @if($progresso === 100)
        <p style="font-size:0.875rem;color:#25b87e;font-weight:600;margin:0.75rem 0 0;">🎉 Onboarding concluído! Seja bem-vindo à OPCON.</p>
        @endif
    </div>
    @endif

    {{-- Items --}}
    @if($items->isNotEmpty())
    <div style="background:#fff;border-radius:12px;border:1px solid #e2e8f0;overflow:hidden;">
        @foreach($items as $item)
        <div style="display:flex;align-items:flex-start;gap:0.875rem;padding:1rem 1.25rem;border-bottom:1px solid #f8fafc;">
            {{-- Toggle (only if responsavel_cliente) --}}
            @if($item->responsavel_cliente)
            <form method="POST" action="{{ route('cliente.onboarding.toggle', $item) }}" style="margin-top:1px;">
                @csrf @method('PATCH')
                <button type="submit"
                        style="width:22px;height:22px;border-radius:6px;border:2px solid {{ $item->isConcluido() ? '#25b87e' : '#cbd5e1' }};background:{{ $item->isConcluido() ? '#25b87e' : '#fff' }};cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;"
                        title="{{ $item->isConcluido() ? 'Marcar como pendente' : 'Marcar como concluído' }}">
                    @if($item->isConcluido())
                    <svg style="width:12px;height:12px;color:#fff;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                    </svg>
                    @endif
                </button>
            </form>
            @else
            {{-- Non-interactive indicator --}}
            <div style="width:22px;height:22px;border-radius:6px;border:2px solid {{ $item->isConcluido() ? '#25b87e' : '#cbd5e1' }};background:{{ $item->isConcluido() ? '#25b87e' : '#f8fafc' }};display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;">
                @if($item->isConcluido())
                <svg style="width:12px;height:12px;color:#fff;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                </svg>
                @endif
            </div>
            @endif

            <div style="flex:1;min-width:0;">
                <p style="font-size:0.9375rem;font-weight:600;color:{{ $item->isConcluido() ? '#94a3b8' : '#1e3a5f' }};margin:0;{{ $item->isConcluido() ? 'text-decoration:line-through;' : '' }}">
                    {{ $item->titulo }}
                </p>
                @if($item->descricao)
                <p style="font-size:0.875rem;color:#64748b;margin:0.25rem 0 0;">{{ $item->descricao }}</p>
                @endif
                @if($item->isConcluido())
                <p style="font-size:0.75rem;color:#25b87e;margin:0.25rem 0 0;">
                    Concluído em {{ $item->concluido_em->format('d/m/Y') }}
                </p>
                @endif
            </div>

            <span style="font-size:0.6875rem;font-weight:600;padding:0.1875rem 0.5rem;border-radius:100px;white-space:nowrap;flex-shrink:0;{{ $item->responsavel_cliente ? 'background:#eff6ff;color:#2563eb;' : 'background:#f1f5f9;color:#64748b;' }}">
                {{ $item->responsavel_cliente ? 'Sua ação' : 'OPCON' }}
            </span>
        </div>
        @endforeach
    </div>
    @else
    <div style="text-align:center;padding:3rem;color:#94a3b8;background:#fff;border-radius:12px;border:1px solid #e2e8f0;">
        <p style="font-size:1rem;font-weight:600;">Nenhum item de onboarding</p>
        <p style="font-size:0.875rem;">Em breve a equipe OPCON preparará seu checklist de integração.</p>
    </div>
    @endif

</x-cliente-layout>
