@extends('welcome')

@section('page_title', 'Acompanhamento de Contratação')

@section('head')
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@endsection

@section('conteudo')

<link rel="stylesheet" href="{{ URL::asset('css/portal_servicos.css') }}">
<link rel="stylesheet" href="{{ URL::asset('css/home.css') }}">

    <div class="acomp-wrapper">

        <div class="dept-header">
            <a href="{{ route('home') }}" class="ps-breadcrumb">
                <i class="bi bi-house-door"></i> Portal <i class="bi bi-chevron-right"></i> RH <i class="bi bi-chevron-right"></i> Acompanhamento de Contratações
            </a>
            <div class="dept-header-main">
                <h1 class="dept-header-title"><i class="bi bi-clipboard-check"></i> Acompanhamento de Contratações</h1>
                <p class="dept-header-sub">Acompanhe o andamento das suas solicitações de contratação</p>
            </div>
        </div>

        <div class="acomp-content">

            @if ($registros->isEmpty())
                <div class="acomp-empty">
                    <i class="bi bi-inbox"></i>
                    <h3>Nenhuma contratação encontrada</h3>
                    <p>Você ainda não possui processos de contratação vinculados à sua conta.</p>
                </div>
            @else
                <div class="acomp-list">
                    @foreach ($registros as $registro)
                        @php
                            $status = $registro->status ?? 'pendente';
                            $cargo  = ucfirst(str_replace('_', ' ', $registro->cargo ?? ''));
                            $filial = optional($registro->filial)->comment ?? '-';
                            $dataAdmissao = $registro->data_admissao_prevista
                                ? $registro->data_admissao_prevista->format('d/m/Y')
                                : null;

                            $passoAtual = match ($status) {
                                'pendente', 'draft'              => 2,
                                'pendente_reenvio'               => 2,
                                'aprovado'                       => 3,
                                'aguardando_documento_rh'        => 4,
                                'aguardando_assinatura_usuario'  => 5,
                                'assinatura_recebida'            => 5,
                                'finalizado'                     => 6,
                                'reprovado', 'cancelado'         => -1,
                                default                          => 2,
                            };

                            $mensagemStatus = match ($status) {
                                'pendente', 'draft'             => 'Solicitação recebida. O RH está analisando os documentos.',
                                'pendente_reenvio'              => 'O RH identificou pendências. Envie os documentos solicitados para continuar.',
                                'aprovado'                      => 'Documentos aprovados! O RH está preparando o contrato.',
                                'aguardando_documento_rh'       => 'Documentos aprovados. O RH está preparando o contrato de trabalho.',
                                'aguardando_assinatura_usuario' => 'Contrato pronto! Assine e devolva o documento para concluir.',
                                'assinatura_recebida'           => 'Assinatura recebida! O RH está revisando o documento.',
                                'finalizado'                    => 'Processo concluído com sucesso.',
                                'reprovado'                     => 'A contratação foi reprovada.',
                                'cancelado'                     => 'Este processo foi cancelado.',
                                default                         => 'Processo em andamento.',
                            };

                            $passos = [
                                1 => ['label' => 'Enviado',    'icon' => 'bi-send-check'],
                                2 => ['label' => 'Em análise', 'icon' => 'bi-search'],
                                3 => ['label' => 'Aprovado',   'icon' => 'bi-check-circle'],
                                4 => ['label' => 'Contrato',   'icon' => 'bi-file-earmark-text'],
                                5 => ['label' => 'Assinatura', 'icon' => 'bi-pen'],
                                6 => ['label' => 'Concluído',  'icon' => 'bi-trophy'],
                            ];

                            $collapseId = 'progresso-' . $registro->id;
                        @endphp

                        <div class="acomp-card {{ in_array($status, ['reprovado', 'cancelado']) ? 'card-encerrado' : '' }} {{ $status === 'finalizado' ? 'card-concluido' : '' }}">

                            {{-- Linha principal do item --}}
                            <div class="card-row">

                                {{-- Info do candidato --}}
                                <div class="card-info">
                                    <div class="card-candidato">{{ $registro->nome_candidato ?? '—' }}</div>
                                    <div class="card-meta-row">
                                        @if ($cargo)
                                            <span><i class="bi bi-briefcase"></i> {{ $cargo }}</span>
                                        @endif
                                        @if ($filial !== '-')
                                            <span><i class="bi bi-building"></i> {{ $filial }}</span>
                                        @endif
                                        @if ($dataAdmissao)
                                            <span><i class="bi bi-calendar-event"></i> {{ $dataAdmissao }}</span>
                                        @endif
                                        <span class="card-id-meta"><i class="bi bi-hash"></i>{{ $registro->id }}</span>
                                    </div>
                                </div>

                                {{-- Lado direito: badge + toggle --}}
                                <div class="card-right">

                                    @if ($status === 'pendente' || $status === 'draft')
                                        <span class="status-badge status-analise"><i class="bi bi-clock"></i> Em análise</span>
                                    @elseif ($status === 'pendente_reenvio')
                                        <span class="status-badge status-reenvio"><i class="bi bi-arrow-clockwise"></i> Pendência</span>
                                    @elseif ($status === 'aprovado')
                                        <span class="status-badge status-aprovado"><i class="bi bi-check-circle"></i> Aprovado</span>
                                    @elseif ($status === 'aguardando_documento_rh')
                                        <span class="status-badge status-preparando"><i class="bi bi-hourglass-split"></i> Contrato em prep.</span>
                                    @elseif ($status === 'aguardando_assinatura_usuario')
                                        <span class="status-badge status-assinar"><i class="bi bi-pen"></i> Assinar contrato</span>
                                    @elseif ($status === 'assinatura_recebida')
                                        <span class="status-badge status-assinatura-ok"><i class="bi bi-check-circle-fill"></i> Assinatura enviada</span>
                                    @elseif ($status === 'finalizado')
                                        <span class="status-badge status-finalizado"><i class="bi bi-trophy-fill"></i> Concluído</span>
                                    @elseif ($status === 'reprovado')
                                        <span class="status-badge status-reprovado"><i class="bi bi-x-circle"></i> Reprovado</span>
                                    @elseif ($status === 'cancelado')
                                        <span class="status-badge status-cancelado"><i class="bi bi-slash-circle"></i> Cancelado</span>
                                    @endif

                                    <button class="btn-progresso collapsed" type="button"
                                        data-toggle="collapse"
                                        data-target="#{{ $collapseId }}"
                                        aria-expanded="false"
                                        aria-controls="{{ $collapseId }}"
                                        title="Ver progresso">
                                        <i class="bi bi-diagram-3"></i>
                                        <span class="btn-progresso-label">Progresso</span>
                                        <i class="bi bi-chevron-down chevron-icon"></i>
                                    </button>

                                </div>
                            </div>

                            {{-- Collapse: timeline + mensagem + CTAs --}}
                            <div class="collapse" id="{{ $collapseId }}">
                                <div class="card-collapse-body">

                                    @if ($passoAtual > 0)
                                        <div class="progress-track">
                                            @foreach ($passos as $num => $passo)
                                                <div class="progress-step
                                                    {{ $num < $passoAtual ? 'step-done' : '' }}
                                                    {{ $num === $passoAtual ? 'step-current' : '' }}
                                                    {{ $num > $passoAtual ? 'step-pending' : '' }}">
                                                    <div class="step-circle">
                                                        @if ($num < $passoAtual)
                                                            <i class="bi bi-check"></i>
                                                        @else
                                                            <i class="bi {{ $passo['icon'] }}"></i>
                                                        @endif
                                                    </div>
                                                    <span class="step-label">{{ $passo['label'] }}</span>
                                                </div>
                                                @if ($num < count($passos))
                                                    <div class="progress-line {{ $num < $passoAtual ? 'line-done' : '' }}"></div>
                                                @endif
                                            @endforeach
                                        </div>
                                    @endif

                                    <div class="status-message
                                        {{ in_array($status, ['reprovado', 'cancelado']) ? 'msg-error' : '' }}
                                        {{ $status === 'finalizado' ? 'msg-success' : '' }}
                                        {{ $status === 'pendente_reenvio' ? 'msg-warning' : '' }}
                                        {{ $status === 'aguardando_assinatura_usuario' ? 'msg-action' : '' }}">
                                        <i class="bi bi-info-circle"></i>
                                        {{ $mensagemStatus }}
                                    </div>

                                    @if ($status === 'reprovado' && !empty($registro->payload['motivo_reprovacao']))
                                        <div class="motivo-box motivo-reprovado">
                                            <i class="bi bi-chat-left-text"></i>
                                            <div><strong>Motivo:</strong> {{ $registro->payload['motivo_reprovacao'] }}</div>
                                        </div>
                                    @endif

                                    @if ($status === 'cancelado' && !empty($registro->payload['motivo_cancelamento']))
                                        <div class="motivo-box motivo-cancelado">
                                            <i class="bi bi-chat-left-text"></i>
                                            <div><strong>Motivo:</strong> {{ $registro->payload['motivo_cancelamento'] }}</div>
                                        </div>
                                    @endif

                                    @if ($status === 'aguardando_assinatura_usuario')
                                        <div class="card-cta">
                                            <a href="{{ route('rh.pre_contratacoes.assinatura', $registro->id) }}" class="btn-cta btn-cta-assinar">
                                                <i class="bi bi-pen"></i> Assinar Contrato
                                            </a>
                                        </div>
                                    @elseif ($status === 'pendente_reenvio')
                                        <div class="card-cta">
                                            <a href="{{ route('rh.pre_contratacoes.reenvio', $registro->id) }}" class="btn-cta btn-cta-reenvio">
                                                <i class="bi bi-arrow-counterclockwise"></i> Enviar Documentos Pendentes
                                            </a>
                                        </div>
                                    @endif

                                </div>
                            </div>

                            {{-- Rodapé --}}
                            <div class="card-footer-row">
                                <span><i class="bi bi-clock-history"></i> Enviado em {{ $registro->created_at->format('d/m/Y \à\s H:i') }}</span>
                            </div>

                        </div>
                    @endforeach
                </div>

                <div class="acomp-pagination">
                    {{ $registros->appends(request()->query())->links() }}
                </div>
            @endif

        </div>
    </div>

    <style>
        *, *::before, *::after { box-sizing: border-box; }

        .acomp-wrapper {
            font-family: 'Poppins', sans-serif;
            min-height: 60vh;
            background: #f4f6fa;
        }

        /* ── Content ─────────────────────────────────────── */
        .acomp-content {
            max-width: 860px;
            margin: 28px auto;
            padding: 0 16px 60px;
        }

        /* ── Alerts ──────────────────────────────────────── */
        .acomp-alert {
            padding: 12px 18px;
            border-radius: 10px;
            margin-bottom: 18px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 500;
            font-size: 14px;
        }
        .acomp-alert-success { background: #d4edda; color: #155724; border: 1px solid #b8dfc5; }
        .acomp-alert-error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

        /* ── Empty state ─────────────────────────────────── */
        .acomp-empty {
            background: white;
            border-radius: 14px;
            padding: 70px 20px;
            text-align: center;
            box-shadow: 0 2px 12px rgba(0,0,0,.07);
        }
        .acomp-empty i  { font-size: 64px; color: #d1d5db; display: block; margin-bottom: 14px; }
        .acomp-empty h3 { color: #555; font-size: 18px; margin-bottom: 6px; }
        .acomp-empty p  { color: #9ca3af; margin: 0; font-size: 14px; }

        /* ── List ────────────────────────────────────────── */
        .acomp-list { display: flex; flex-direction: column; gap: 12px; }

        /* ── Card ────────────────────────────────────────── */
        .acomp-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 1px 8px rgba(0,0,0,.07);
            border-left: 4px solid #f7b731;
            overflow: hidden;
            transition: box-shadow .2s ease;
        }
        .acomp-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.11); }
        .card-encerrado { border-left-color: #adb5bd; }
        .card-concluido { border-left-color: #28a745; }

        /* ── Card row (main line) ────────────────────────── */
        .card-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 14px 18px;
            flex-wrap: wrap;
        }

        .card-info { flex: 1; min-width: 0; }

        .card-candidato {
            font-size: 16px;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .card-meta-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .card-meta-row span {
            font-size: 12px;
            color: #6b7280;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .card-id-meta { color: #9ca3af !important; }

        /* ── Right side (badge + toggle) ─────────────────── */
        .card-right {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }

        /* ── Status badges ───────────────────────────────── */
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 13px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
        }
        .status-analise    { background: #fff3cd; color: #856404; }
        .status-reenvio    { background: #fff0f0; color: #b91c1c; border: 1px solid #fca5a5; }
        .status-aprovado   { background: #dcfce7; color: #166534; }
        .status-preparando { background: #e0f2fe; color: #0369a1; }
        .status-assinar    { background: #fef3c7; color: #92400e; border: 1px solid #fbbf24; }
        .status-assinatura-ok { background: #dcfce7; color: #166534; }
        .status-finalizado { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
        .status-reprovado  { background: #fee2e2; color: #991b1b; }
        .status-cancelado  { background: #e5e7eb; color: #374151; }

        /* ── Toggle button ───────────────────────────────── */
        .btn-progresso {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 6px 12px;
            border-radius: 8px;
            border: 1px solid #e5e7eb;
            background: #f9fafb;
            color: #6b7280;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: background .2s, color .2s, border-color .2s;
            white-space: nowrap;
        }
        .btn-progresso:hover {
            background: #f3f4f6;
            border-color: #d1d5db;
            color: #374151;
        }
        .btn-progresso:not(.collapsed) {
            background: #fffbeb;
            border-color: #f7b731;
            color: #92400e;
        }
        .btn-progresso .chevron-icon {
            transition: transform .2s ease;
        }
        .btn-progresso:not(.collapsed) .chevron-icon {
            transform: rotate(180deg);
        }

        /* ── Collapse body ───────────────────────────────── */
        .card-collapse-body {
            border-top: 1px solid #f1f3f5;
            padding: 16px 18px 6px;
            background: #fafafa;
        }

        /* ── Progress track ──────────────────────────────── */
        .progress-track {
            display: flex;
            align-items: center;
            margin-bottom: 14px;
            overflow-x: auto;
            padding-bottom: 4px;
        }

        .progress-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            flex-shrink: 0;
        }

        .step-circle {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
            transition: all .3s;
        }
        .step-done    .step-circle { background: #22c55e; color: white; }
        .step-current .step-circle { background: #f7b731; color: white; box-shadow: 0 0 0 4px rgba(247,183,49,.22); }
        .step-pending .step-circle { background: #f3f4f6; color: #9ca3af; border: 2px solid #e5e7eb; }

        .step-label {
            font-size: 10px;
            font-weight: 600;
            text-align: center;
            max-width: 56px;
        }
        .step-done    .step-label { color: #22c55e; }
        .step-current .step-label { color: #f39c12; }
        .step-pending .step-label { color: #9ca3af; }

        .progress-line {
            flex: 1;
            height: 3px;
            background: #e5e7eb;
            min-width: 18px;
            margin-bottom: 20px;
            transition: background .3s;
        }
        .progress-line.line-done { background: #22c55e; }

        /* ── Status message ──────────────────────────────── */
        .status-message {
            margin-bottom: 14px;
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 13px;
            display: flex;
            align-items: flex-start;
            gap: 9px;
            background: #f8fafc;
            color: #374151;
            border: 1px solid #e5e7eb;
        }
        .status-message i { flex-shrink: 0; margin-top: 1px; color: #6b7280; }
        .msg-error   { background: #fff5f5; color: #991b1b; border-color: #fecaca; }
        .msg-error i { color: #dc2626; }
        .msg-success { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
        .msg-success i { color: #22c55e; }
        .msg-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
        .msg-warning i { color: #d97706; }
        .msg-action  { background: #fffbeb; color: #92400e; border-color: #fde68a; }
        .msg-action i { color: #d97706; }

        /* ── Motivo box ──────────────────────────────────── */
        .motivo-box {
            margin-bottom: 14px;
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 12px;
            display: flex;
            align-items: flex-start;
            gap: 9px;
        }
        .motivo-box i { flex-shrink: 0; margin-top: 1px; }
        .motivo-reprovado { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
        .motivo-cancelado { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }

        /* ── CTAs ────────────────────────────────────────── */
        .card-cta { margin-bottom: 14px; }

        .btn-cta {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 10px 22px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
            transition: all .2s ease;
        }
        .btn-cta-assinar {
            background: #4d7cf5;
            color: white;
        }
        .btn-cta-assinar:hover {
            background: #3b66d6;
            color: white;
            text-decoration: none;
        }
        .btn-cta-reenvio {
            background: #f7b731;
            color: white;
        }
        .btn-cta-reenvio:hover {
            background: #e0a420;
            color: white;
            text-decoration: none;
        }

        /* ── Card footer ─────────────────────────────────── */
        .card-footer-row {
            padding: 8px 18px;
            background: #f8fafc;
            border-top: 1px solid #f1f3f5;
            font-size: 11px;
            color: #9ca3af;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* ── Pagination ──────────────────────────────────── */
        .acomp-pagination { margin-top: 12px; }

        /* ── Responsivo ──────────────────────────────────── */
        @media (max-width: 600px) {
            .card-row { flex-direction: column; align-items: flex-start; }
            .card-right { width: 100%; justify-content: space-between; }
            .btn-progresso-label { display: none; }
            .progress-track { padding-bottom: 6px; }
            .step-circle { width: 30px; height: 30px; font-size: 12px; }
            .btn-cta { width: 100%; justify-content: center; }
        }
    </style>
@endsection