@extends('welcome')

@php
    $motivoReprovacao = $registro->payload['motivo_reprovacao_assinatura'] ?? null;
    $isReenvio = !empty($motivoReprovacao);
@endphp

@section('page_title', $isReenvio ? 'Reenvio de Documento Assinado' : 'Assinatura de Documento')

@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> {{ $isReenvio ? 'Reenvio de Documento Assinado' : 'Assinatura de Documento' }}
            </a>
            <div class="dept-header-main">
                <h1 class="dept-header-title"><i class="bi bi-{{ $isReenvio ? 'arrow-repeat' : 'pen' }}"></i> {{ $isReenvio ? 'Reenvio de Documento Assinado' : 'Assinatura de Documento' }}</h1>
                <p class="dept-header-sub">{{ $isReenvio ? 'Corrija o documento e reenvie para dar continuidade ao processo.' : 'O RH enviou um documento para sua assinatura.' }}</p>
            </div>
        </div>

        <div class="acomp-content">

            {{-- Alerta de Motivo da Negativa --}}
            @if ($isReenvio)
                <div class="motivo-box motivo-reprovado mb-4">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                    <div>
                        <strong>Motivo da recusa pelo RH:</strong>
                        <p class="mb-0 mt-1">{{ $motivoReprovacao }}</p>
                    </div>
                </div>
            @endif

            {{-- Download Card --}}
            <div class="acomp-card mb-4">
                <div class="card-header-custom">
                    <i class="bi bi-file-earmark-arrow-down"></i>
                    <h5>{{ $documentosParaAssinar->count() > 1 ? 'Documentos para Assinatura' : 'Documento para Assinatura' }}</h5>
                </div>
                @foreach ($documentosParaAssinar as $doc)
                    <div class="card-body-custom d-flex justify-content-between align-items-center gap-3 flex-wrap" style="{{ !$loop->last ? 'border-bottom: 1px solid #f1f3f5;' : '' }}">
                        <div class="d-flex align-items-center gap-3">
                            <i class="bi bi-file-pdf text-danger" style="font-size: 24px;"></i>
                            <div>
                                <div class="fw-semibold" style="color:#1f2937;">{{ $doc->original_name }}</div>
                                <small class="text-muted">{{ number_format($doc->size / 1024, 2) }} KB</small>
                            </div>
                        </div>
                        <a href="{{ route('rh.pre_contratacoes.download_arquivo', [$registro->id, $doc->id]) }}"
                           class="btn-cta btn-cta-assinar">
                            <i class="bi bi-download"></i> Fazer Download
                        </a>
                    </div>
                @endforeach
            </div>

            {{-- Instruções --}}
            <div class="acomp-card mb-4">
                <div class="card-header-custom">
                    <i class="bi bi-list-check"></i>
                    <h5>Como Proceder</h5>
                </div>
                <div class="card-body-custom">
                    <ol class="mb-0">
                        <li>Faça o download do documento acima clicando no botão</li>
                        <li>Imprima o documento baixado</li>
                        <li>Assine o documento conforme solicitado</li>
                        <li>Escaneie ou fotografe o documento assinado (salve como PDF)</li>
                        <li>Envie o documento assinado usando o formulário abaixo</li>
                    </ol>
                </div>
            </div>

            {{-- Upload Form --}}
            <div class="acomp-card mb-4">
                <div class="card-header-custom">
                    <i class="bi bi-cloud-upload"></i>
                    <h5>{{ $isReenvio ? 'Reenviar Documento Corrigido' : 'Enviar Documento Assinado' }}</h5>
                </div>
                <div class="card-body-custom">
                    <form method="POST"
                          action="{{ route('rh.pre_contratacoes.enviar_assinado', $registro->id) }}"
                          enctype="multipart/form-data"
                          id="contact-form">
                        @csrf

                        {{-- Input real que o form submete (oculto) --}}
                        @if ($isReenvio)
                            <input type="file" name="documento_assinado[]" id="documento_assinado" accept=".pdf" style="display:none;">
                        @else
                            <input type="file" name="documento_assinado[]" id="documento_assinado" accept=".pdf" multiple style="display:none;">
                        @endif
                        {{-- Picker de um arquivo por vez (sem name, não é submetido) --}}
                        <input type="file" id="file-picker" accept=".pdf" style="display:none;">

                        @error('documento_assinado')
                            <div class="invalid-feedback d-block mb-2">{{ $message }}</div>
                        @enderror

                        <button type="button" class="btn-add-file mb-3" id="btn-add-file">
                            <i class="bi bi-plus-circle"></i> Adicionar arquivo PDF
                        </button>

                        {{-- Estado vazio --}}
                        <div id="file-empty-msg" class="file-empty-msg mb-3">
                            <i class="bi bi-inbox"></i>
                            <span>Nenhum arquivo adicionado ainda. Clique em "Adicionar arquivo PDF" para começar.</span>
                        </div>

                        {{-- Lista de arquivos selecionados --}}
                        <div id="file-list" class="file-list mb-3"></div>

                        <div class="status-message mb-4">
                            <i class="bi bi-info-circle"></i>
                            <div>
                                @if ($isReenvio)
                                    <strong>Importante:</strong> Apenas arquivos PDF são aceitos. Envie somente <strong>1 arquivo</strong> corrigido.<br>
                                @else
                                    <strong>Importante:</strong> Apenas arquivos PDF são aceitos. É possível enviar mais de um arquivo.<br>
                                @endif
                                <strong>Tamanho máximo por arquivo:</strong> 15MB
                            </div>
                        </div>

                        <button type="submit" class="btn-cta btn-cta-assinar btn-submit-full">
                            <i class="bi bi-send-fill"></i>
                            Enviar Documento Assinado
                        </button>
                    </form>
                </div>
            </div>

        </div>
    </div>

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

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

        .acomp-header {
            padding: 32px 24px;
            color: white;
        }
        .acomp-header-inner {
            max-width: 860px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 18px;
        }
        .acomp-header-icon { font-size: 44px; line-height: 1; opacity: .9; }
        .acomp-title   { font-size: 24px; font-weight: 700; margin: 0 0 4px; }
        .acomp-subtitle { font-size: 14px; opacity: .85; margin: 0; }

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

        .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-header-custom {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 20px;
            background: #f8fafc;
            border-bottom: 1px solid #f1f3f5;
        }
        .card-header-custom i { font-size: 20px; color: #6b7280; }
        .card-header-custom h5 {
            margin: 0;
            font-size: 15px;
            font-weight: 700;
            color: #1f2937;
        }

        .card-body-custom {
            padding: 20px;
        }

        .card-body-custom ol {
            padding-left: 22px;
            margin: 0;
        }
        .card-body-custom li {
            padding: 8px 0;
            color: #374151;
            line-height: 1.6;
            font-size: 14px;
        }
        .card-body-custom li:not(:last-child) {
            border-bottom: 1px solid #f3f4f6;
        }

        .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;
            border: none;
            cursor: pointer;
        }
        .btn-cta-assinar {
            background: #4d7cf5;
            color: white;
        }
        .btn-cta-assinar:hover {
            background: #3b66d6;
            color: white;
            text-decoration: none;
        }
        .btn-submit-full {
            width: 100%;
            justify-content: center;
            padding: 14px 22px;
            font-size: 15px;
        }

        .motivo-box {
            padding: 16px 20px;
            border-radius: 10px;
            font-size: 13px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }
        .motivo-box i { flex-shrink: 0; margin-top: 1px; font-size: 20px; }
        .motivo-reprovado { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

        .status-message {
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 13px;
            display: flex;
            align-items: flex-start;
            gap: 9px;
            background: #e0f2fe;
            color: #0369a1;
            border: 1px solid #bae6fd;
        }
        .status-message i { flex-shrink: 0; margin-top: 1px; font-size: 16px; }

        .btn-add-file {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            padding: 14px 24px;
            background: #f9fafb;
            border: 2px dashed #d1d5db;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            color: #374151;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .btn-add-file i { font-size: 20px; }
        .btn-add-file:hover {
            border-color: #8a8a8a;
            background: #eeeeee;
            color: rgb(0, 0, 0);
        }

        .file-empty-msg {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            background: #f9fafb;
            border-radius: 8px;
            color: #9ca3af;
            font-size: 13px;
        }
        .file-empty-msg i { font-size: 18px; flex-shrink: 0; }

        .file-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .file-item {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #f0fff4;
            border: 1px solid #51cf66;
            border-radius: 8px;
            padding: 10px 14px;
            font-size: 13px;
            color: #2f9e44;
        }
        .file-item i { font-size: 18px; color: #51cf66; flex-shrink: 0; }
        .file-item .file-item-name { font-weight: 600; word-break: break-all; flex: 1; }
        .file-item .file-item-size { color: #5c940d; font-size: 12px; white-space: nowrap; }
        .file-item .file-item-remove {
            background: none;
            border: none;
            cursor: pointer;
            color: #dc3545;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 13px;
            flex-shrink: 0;
            line-height: 1;
            transition: background 0.15s;
        }
        .file-item .file-item-remove:hover { background: #ffe0e0; }

        @media (max-width: 768px) {
            .acomp-header-icon { display: none; }
            .acomp-title { font-size: 19px; }
            .btn-cta { width: 100%; justify-content: center; }
            .card-body-custom .d-flex.flex-wrap { flex-direction: column; align-items: flex-start !important; }
        }
    </style>

    <script>
        (function () {
            var selectedFiles = [];
            var picker    = document.getElementById('file-picker');
            var realInput = document.getElementById('documento_assinado');

            document.getElementById('btn-add-file').addEventListener('click', function () {
                picker.value = '';
                picker.click();
            });

            picker.addEventListener('change', function () {
                var file = this.files[0];
                if (!file) return;

                if (file.size > 15 * 1024 * 1024) {
                    alert('O arquivo "' + file.name + '" excede o limite de 15MB.');
                    return;
                }

                @if ($isReenvio)
                selectedFiles = [file];
                @else
                for (var i = 0; i < selectedFiles.length; i++) {
                    if (selectedFiles[i].name === file.name) {
                        alert('Este arquivo já foi adicionado: ' + file.name);
                        return;
                    }
                }
                selectedFiles.push(file);
                @endif

                syncInput();
                renderList();
            });

            window.removeFileAt = function (index) {
                selectedFiles.splice(index, 1);
                syncInput();
                renderList();
            };

            function syncInput() {
                var dt = new DataTransfer();
                selectedFiles.forEach(function (f) { dt.items.add(f); });
                realInput.files = dt.files;
            }

            function renderList() {
                var list     = document.getElementById('file-list');
                var emptyMsg = document.getElementById('file-empty-msg');
                list.innerHTML = '';

                if (selectedFiles.length === 0) {
                    emptyMsg.style.display = '';
                    return;
                }

                emptyMsg.style.display = 'none';

                selectedFiles.forEach(function (file, i) {
                    var sizeKB = (file.size / 1024).toFixed(2);
                    var item   = document.createElement('div');
                    item.className = 'file-item';
                    item.innerHTML =
                        '<i class="bi bi-file-pdf"></i>' +
                        '<span class="file-item-name">' + escapeHtml(file.name) + '</span>' +
                        '<span class="file-item-size">' + sizeKB + ' KB</span>' +
                        '<button type="button" class="file-item-remove" title="Remover arquivo"' +
                        '        onclick="removeFileAt(' + i + ')">' +
                        '    <i class="bi bi-x-lg"></i>' +
                        '</button>';
                    list.appendChild(item);
                });
            }

            function escapeHtml(str) {
                return str
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;');
            }

            document.getElementById('contact-form').addEventListener('submit', function (e) {
                if (selectedFiles.length === 0) {
                    e.preventDefault();
                    alert('Adicione pelo menos um arquivo antes de enviar.');
                }
            });
        })();
    </script>

@endsection