<x-cliente-layout title="Meus Contratos — OPCON Portal">

    {{-- Welcome --}}
    <div style="margin-bottom: 1.75rem;">
        <h1 style="font-size: 1.375rem; font-weight: 700; color: #1e3a5f; margin: 0;">
            Olá, {{ Str::before(auth()->user()->name, ' ') ?: auth()->user()->name }} 👋
        </h1>
        <p style="font-size: 0.875rem; color: #64748b; margin: 0.25rem 0 0;">
            Acompanhe o status dos seus contratos com a OPCON.
        </p>
    </div>

    @if($contratos->isEmpty())
        {{-- Empty state --}}
        <div style="background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; padding: 3rem; text-align: center;">
            <div style="font-size: 3rem; margin-bottom: 1rem;">📄</div>
            <h2 style="font-size: 1rem; font-weight: 600; color: #1e3a5f; margin: 0 0 0.5rem;">Nenhum contrato encontrado</h2>
            <p style="font-size: 0.875rem; color: #94a3b8; margin: 0 0 1.5rem; max-width: 360px; margin-left: auto; margin-right: auto;">
                Não encontramos contratos associados ao e-mail <strong>{{ auth()->user()->email }}</strong>.
                Entre em contato conosco se acredita que isso é um erro.
            </p>
            <a href="{{ route('contato') }}"
               style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; background: #25b87e; color: #fff; border-radius: 8px; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: background 0.15s;"
               onmouseover="this.style.background='#1fa96e'" onmouseout="this.style.background='#25b87e'">
                Falar com a OPCON
            </a>
        </div>
    @else
        @php
            $steps = \App\Models\Contrato::workflowSteps();
        @endphp

        {{-- Signing alert banners --}}
        @foreach($contratos as $contrato)
            @if($contrato->status_workflow === 'Aguardando assinatura cliente' && $contrato->assinatura_token)
            <div style="background: linear-gradient(135deg,#fff7ed,#fef3c7); border: 1.5px solid #fbbf24; border-radius: 12px; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;">
                <div style="display:flex; align-items:flex-start; gap:0.75rem;">
                    <div style="width:36px;height:36px;border-radius:9px;background:#fef3c7;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <svg style="width:18px;height:18px;color:#d97706;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
                        </svg>
                    </div>
                    <div>
                        <p style="font-size:0.875rem; font-weight:700; color:#92400e; margin:0;">Assinatura pendente</p>
                        <p style="font-size:0.8125rem; color:#78350f; margin:0.15rem 0 0;">
                            O contrato de <strong>{{ $contrato->razao_social }}</strong> aguarda sua assinatura digital.
                        </p>
                    </div>
                </div>
                <a href="{{ $contrato->getSigningUrl() }}"
                   style="display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1.125rem; background:#d97706; color:#fff; border-radius:8px; font-size:0.8125rem; font-weight:700; text-decoration:none; white-space:nowrap; flex-shrink:0; transition:background 0.15s;"
                   onmouseover="this.style.background='#b45309'" onmouseout="this.style.background='#d97706'">
                    Assinar agora →
                </a>
            </div>
            @endif
        @endforeach

        <div style="display: flex; flex-direction: column; gap: 1rem;">
            @foreach($contratos as $contrato)
                @php
                    $step  = $steps[$contrato->status_workflow] ?? ['label' => $contrato->status_workflow, 'color' => '#94a3b8'];
                    $total = count($steps);
                    $pos   = max(1, array_search($contrato->status_workflow, array_keys($steps)) + 1);
                    $pct   = round(($pos / $total) * 100);
                @endphp
                <div style="background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; padding: 1.5rem;">

                    {{-- Title row --}}
                    <div style="display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem;">
                        <div>
                            <h2 style="font-size: 1rem; font-weight: 700; color: #1e3a5f; margin: 0;">
                                {{ $contrato->razao_social }}
                            </h2>
                            @if($contrato->cnpj)
                                <p style="font-size: 0.8125rem; color: #94a3b8; margin: 0.2rem 0 0;">CNPJ: {{ $contrato->cnpj }}</p>
                            @endif
                        </div>
                        <span style="font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 100px; background: {{ $step['color'] }}20; color: {{ $step['color'] }}; border: 1px solid {{ $step['color'] }}40; white-space: nowrap;">
                            {{ $step['label'] }}
                        </span>
                    </div>

                    {{-- Progress bar --}}
                    <div style="margin-bottom: 1rem;">
                        <div style="display: flex; justify-content: space-between; margin-bottom: 0.375rem;">
                            <span style="font-size: 0.75rem; color: #64748b;">Progresso do contrato</span>
                            <span style="font-size: 0.75rem; font-weight: 600; color: #1e3a5f;">{{ $pct }}%</span>
                        </div>
                        <div style="height: 6px; background: #e2e8f0; border-radius: 100px; overflow: hidden;">
                            <div style="height: 100%; width: {{ $pct }}%; background: {{ $step['color'] }}; border-radius: 100px; transition: width 0.5s;"></div>
                        </div>
                    </div>

                    {{-- Details grid --}}
                    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem;">
                        <div style="background: #f8fafc; border-radius: 8px; padding: 0.625rem 0.875rem;">
                            <p style="font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 0 0 0.2rem;">Regime</p>
                            <p style="font-size: 0.8125rem; font-weight: 600; color: #1e3a5f; margin: 0;">{{ $contrato->regime_tributario }}</p>
                        </div>
                        @if($contrato->honorario)
                            <div style="background: #f0fdf4; border-radius: 8px; padding: 0.625rem 0.875rem;">
                                <p style="font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 0 0 0.2rem;">Honorário</p>
                                <p style="font-size: 0.8125rem; font-weight: 600; color: #16a34a; margin: 0;">R$ {{ number_format($contrato->honorario, 2, ',', '.') }}</p>
                            </div>
                        @endif
                        @if($contrato->ativo_em)
                            <div style="background: #f8fafc; border-radius: 8px; padding: 0.625rem 0.875rem;">
                                <p style="font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 0 0 0.2rem;">Ativo desde</p>
                                <p style="font-size: 0.8125rem; font-weight: 600; color: #1e3a5f; margin: 0;">{{ $contrato->ativo_em->format('d/m/Y') }}</p>
                            </div>
                        @endif
                        @if($contrato->responsavel_operacional)
                            <div style="background: #f8fafc; border-radius: 8px; padding: 0.625rem 0.875rem;">
                                <p style="font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 0 0 0.2rem;">Responsável</p>
                                <p style="font-size: 0.8125rem; font-weight: 600; color: #1e3a5f; margin: 0;">{{ $contrato->responsavel_operacional }}</p>
                            </div>
                        @endif
                    </div>

                </div>
            @endforeach
        </div>

        {{-- Cobranças recentes --}}
        @if($cobrancasRecentes->isNotEmpty())
        <div style="margin-top:1.5rem; background:#fff; border:1px solid #e2e8f0; border-radius:14px; overflow:hidden;">
            <div style="padding:1rem 1.25rem; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; justify-content:space-between;">
                <h2 style="font-size:0.875rem; font-weight:700; color:#1e3a5f; margin:0;">Últimas cobranças</h2>
                <a href="{{ route('cliente.financeiro') }}" style="font-size:0.75rem; color:#25b87e; text-decoration:none; font-weight:600;">Ver histórico completo →</a>
            </div>
            @if($pendentes > 0)
            <div style="padding:0.75rem 1.25rem; background:#fffbeb; border-bottom:1px solid #fde68a; display:flex; align-items:center; gap:0.625rem;">
                <svg style="width:15px;height:15px;color:#d97706;flex-shrink:0;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                <p style="font-size:0.8125rem; color:#92400e; margin:0; font-weight:500;">
                    Você possui <strong>R$ {{ number_format($pendentes,2,',','.') }}</strong> em aberto. Entre em contato para regularizar.
                </p>
            </div>
            @endif
            @foreach($cobrancasRecentes as $cob)
            @php
                $scMap = ['pago'=>['#ecfdf5','#065f46'],'pendente'=>['#fffbeb','#92400e'],'vencido'=>['#fef2f2','#dc2626']];
                [$sbg,$stc] = $scMap[$cob->status] ?? ['#f1f5f9','#475569'];
            @endphp
            <div style="padding:0.75rem 1.25rem; border-bottom:1px solid #f8fafc; display:flex; align-items:center; gap:0.75rem;">
                <div style="width:36px;height:36px;border-radius:9px;background:#eff6ff;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <svg style="width:16px;height:16px;color:#2563eb;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                </div>
                <div style="flex:1; min-width:0;">
                    <p style="font-size:0.8125rem; font-weight:600; color:#1e3a5f; margin:0;">{{ $cob->contrato?->razao_social ?? 'Contrato' }} — {{ $cob->mes_referencia->format('m/Y') }}</p>
                    <p style="font-size:0.75rem; font-weight:700; color:#1e3a5f; margin:0.1rem 0 0;">R$ {{ number_format($cob->valor,2,',','.') }}</p>
                </div>
                <span style="font-size:0.7rem; font-weight:700; padding:0.2rem 0.5rem; border-radius:20px; background:{{ $sbg }}; color:{{ $stc }}; white-space:nowrap; text-transform:capitalize;">{{ $cob->status }}</span>
            </div>
            @endforeach
        </div>
        @endif

        {{-- Support CTA --}}
        <div style="margin-top: 1.5rem; background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; padding: 1.25rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;">
            <div>
                <p style="font-size: 0.875rem; font-weight: 600; color: #1e3a5f; margin: 0;">Precisa de ajuda?</p>
                <p style="font-size: 0.8125rem; color: #64748b; margin: 0.2rem 0 0;">Entre em contato com seu responsável ou acesse o suporte.</p>
            </div>
            <a href="{{ route('contato') }}"
               style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.125rem; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; color: #1e3a5f; text-decoration: none; transition: all 0.15s;"
               onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
                Falar com a OPCON →
            </a>
        </div>
    @endif

</x-cliente-layout>
