@extends('admin.base-admin')

@section('page_title', 'Benefícios | Admin RH')

@section('nav')
    @include('admin.partials.nav-rh')
@endsection

@section('page-header')
    <h1>
        <i class="bi bi-gift mr-2" style="font-size:1.1rem;color:#f7b731;"></i>
        Dúvida de Benefícios #{{ $registro->id }}
    </h1>
@endsection

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

    <div class="container mt-4" style="max-width: 1000px;">

        {{-- Botão Voltar --}}
        <div class="mb-3">
            <a href="{{ route('admin.rh.pre_contratacoes.index', ['tipo' => 'beneficios']) }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left"></i> Voltar para Benefícios
            </a>
        </div>

        {{-- Header --}}
        <div class="page-header mb-4">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                <div>
                    <h3 class="mb-1">
                        <i class="bi bi-gift"></i> Dúvida de Benefícios #{{ $registro->id }}
                    </h3>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item">
                                <a href="{{ route('admin.rh.pre_contratacoes.index', ['tipo' => 'beneficios']) }}">
                                    <i class="bi bi-house-door"></i> Benefícios
                                </a>
                            </li>
                            <li class="breadcrumb-item active">Detalhes #{{ $registro->id }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        {{-- Status Banner --}}
        <div class="status-banner mb-4">
            @php
                $status = $registro->payload['status'] ?? 'pendente';
            @endphp
            @if ($status === 'respondido')
                <div class="status-card status-respondido">
                    <i class="bi bi-chat-check-fill"></i>
                    <div>
                        <h5>Respondido</h5>
                        <p>Esta dúvida foi respondida em {{ $registro->updated_at->format('d/m/Y H:i') }}</p>
                    </div>
                </div>
            @else
                <div class="status-card status-pendente">
                    <i class="bi bi-clock-history"></i>
                    <div>
                        <h5>Aguardando Resposta</h5>
                        <p>Esta dúvida está aguardando resposta do RH</p>
                    </div>
                </div>
            @endif
        </div>

        <div class="row">
            {{-- DADOS DO SOLICITANTE --}}
            <div class="col-lg-6 mb-4">
                <div class="info-card h-100">
                    <div class="info-card-header info-card-header-beneficio">
                        <i class="bi bi-person-circle"></i>
                        <h5>Dados do Solicitante</h5>
                    </div>
                    <div class="info-card-body">
                        <div class="info-item">
                            <span class="info-label">Nome completo</span>
                            <span class="info-value">{{ $registro->nome_candidato }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Filial</span>
                            <span class="info-value">
                                {{ optional($registro->filial)->comment ?? $registro->filial_id }}
                            </span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Setor</span>
                            <span class="info-value">
                                {{ optional($registro->setor)->name ?? '-' }}
                            </span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Registrado por</span>
                            <span class="info-value">
                                @if ($registro->user && $registro->user->info)
                                    {{ $registro->user->info->name }}
                                    @if ($registro->user->info->registration)
                                        <small class="text-muted">(Mat: {{ $registro->user->info->registration }})</small>
                                    @endif
                                @else
                                    -
                                @endif
                            </span>
                        </div>
                        <div class="info-item mb-0">
                            <span class="info-label">Data de envio</span>
                            <span class="info-value">
                                {{ $registro->created_at->format('d/m/Y H:i') }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- DÚVIDA --}}
            <div class="col-lg-6 mb-4">
                <div class="info-card h-100">
                    <div class="info-card-header info-card-header-beneficio">
                        <i class="bi bi-question-circle"></i>
                        <h5>Dúvida Enviada</h5>
                    </div>
                    <div class="info-card-body">
                        <div class="mensagem-box">
                            {{ $registro->payload['mensagem'] ?? 'Nenhuma mensagem registrada.' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ANEXO (se houver) --}}
        @if ($registro->arquivos->isNotEmpty())
            <div class="info-card mb-4">
                <div class="info-card-header info-card-header-beneficio">
                    <i class="bi bi-paperclip"></i>
                    <h5>Anexo</h5>
                </div>
                <div class="info-card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Nome do arquivo</th>
                                    <th width="100">Tamanho</th>
                                    <th width="150">Enviado em</th>
                                    <th width="120" class="text-center">Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($registro->arquivos as $arq)
                                    <tr>
                                        <td>{{ $arq->original_name }}</td>
                                        <td>
                                            @if ($arq->size)
                                                {{ number_format($arq->size / 1024, 1) }} KB
                                            @else
                                                -
                                            @endif
                                        </td>
                                        <td>{{ $arq->created_at->format('d/m/Y H:i') }}</td>
                                        <td class="text-center">
                                            <div class="btn-group btn-group-sm">
                                                <a href="{{ route('admin.rh.pre_contratacoes.visualizar_arquivo', [$registro->id, $arq->id]) }}"
                                                    class="btn btn-info" target="_blank" title="Visualizar">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                                <a href="{{ route('admin.rh.pre_contratacoes.download_arquivo', [$registro->id, $arq->id]) }}"
                                                    class="btn btn-primary" title="Baixar">
                                                    <i class="bi bi-download"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endif

        {{-- RESPOSTA DO RH --}}
        <div class="info-card mb-4">
            <div class="info-card-header info-card-header-resposta">
                <i class="bi bi-chat-left-text"></i>
                <h5>Resposta do RH</h5>
            </div>
            <div class="info-card-body">
                @if (!empty($registro->observacoes))
                    {{-- Mostra a resposta existente --}}
                    <div class="resposta-existente mb-4">
                        <div class="resposta-header">
                            <i class="bi bi-check-circle-fill text-success"></i>
                            <span>Respondido em {{ $registro->updated_at->format('d/m/Y H:i') }}</span>
                            @if (!empty($registro->payload['respondido_por']))
                                <span class="text-muted">por {{ $registro->payload['respondido_por'] }}</span>
                            @endif
                        </div>
                        <div class="resposta-conteudo">
                            {!! nl2br(e($registro->observacoes)) !!}
                        </div>
                    </div>

                    {{-- Formulário para editar/atualizar resposta --}}
                    <hr>
                    <p class="text-muted mb-3">
                        <i class="bi bi-pencil"></i> Editar ou complementar a resposta:
                    </p>
                @else
                    <p class="text-muted mb-3">
                        <i class="bi bi-info-circle"></i> Nenhuma resposta enviada ainda. Digite abaixo para responder ao solicitante.
                    </p>
                @endif

                <form method="POST" action="{{ route('rh.beneficios.responder', $registro->id) }}">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label fw-bold">
                            Resposta <span class="text-danger">*</span>
                        </label>
                        <div class="rt-wrap">
                            <div class="rt-toolbar">
                                <button type="button" class="rt-btn" onmousedown="rtFormat(event,'b')" title="Negrito"><b>B</b></button>
                                <button type="button" class="rt-btn" onmousedown="rtFormat(event,'i')" title="Itálico" style="font-style:italic">I</button>
                                <button type="button" class="rt-btn" onmousedown="rtFormat(event,'s')" title="Riscado"><s>S</s></button>
                                <div class="rt-sep"></div>
                                <button type="button" class="rt-btn" onmousedown="rtFormat(event,'code')" title="Código" style="font-family:monospace;font-size:.65rem">&lt;/&gt;</button>
                            </div>
                            <div contenteditable="true" data-name="resposta" data-placeholder="Digite a resposta para o solicitante..."></div>
                            <input type="hidden" name="resposta" required>
                        </div>
                        @error('resposta')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">
                            Esta resposta ficará visível para o solicitante na área de acompanhamento.
                        </small>
                    </div>

                    <button type="submit" class="btn btn-success btn-responder">
                        <i class="bi bi-send"></i>
                        {{ !empty($registro->observacoes) ? 'Atualizar Resposta' : 'Enviar Resposta' }}
                    </button>
                </form>
            </div>
        </div>

    </div>

    <style>
        body, h1, h2, h3, h4, h5, h6, .breadcrumb, .info-label, .info-value {
            font-family: 'Poppins', sans-serif !important;
        }

        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .breadcrumb {
            background: transparent;
            padding: 0;
            margin: 0;
        }

        .breadcrumb a {
            color: #17a2b8;
            text-decoration: none;
        }

        .breadcrumb a:hover {
            text-decoration: underline;
        }

        /* Status Banner */
        .status-banner {
            margin-bottom: 20px;
        }

        .status-card {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 20px;
            border-radius: 8px;
            background: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .status-card i {
            font-size: 48px;
        }

        .status-card h5 {
            margin: 0 0 5px 0;
            font-weight: 600;
        }

        .status-card p {
            margin: 0;
            color: #666;
        }

        .status-pendente {
            border-left: 4px solid #ffc107;
        }

        .status-pendente i {
            color: #ffc107;
        }

        .status-respondido {
            border-left: 4px solid #28a745;
        }

        .status-respondido i {
            color: #28a745;
        }

        /* Info Cards */
        .info-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        .info-card-header {
            background: linear-gradient(135deg, #f7b731 0%, #f39c12 100%);
            color: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .info-card-header-beneficio {
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        }

        .info-card-header-resposta {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        }

        .info-card-header i {
            font-size: 24px;
        }

        .info-card-header h5 {
            margin: 0;
            font-weight: 600;
            font-size: 16px;
        }

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

        .info-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .info-item:last-child {
            border-bottom: none;
        }

        .info-label {
            color: #666;
            font-weight: 500;
        }

        .info-value {
            color: #333;
            font-weight: 600;
            text-align: right;
        }

        /* Mensagem Box */
        .mensagem-box {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            font-size: 15px;
            line-height: 1.7;
            color: #333;
            white-space: pre-wrap;
            border-left: 4px solid #17a2b8;
        }

        /* Resposta */
        .resposta-existente {
            background: #d4edda;
            border-radius: 8px;
            padding: 20px;
            border-left: 4px solid #28a745;
        }

        .resposta-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
            font-size: 14px;
            color: #155724;
        }

        .resposta-conteudo {
            font-size: 15px;
            line-height: 1.7;
            color: #155724;
        }

        .btn-responder {
            padding: 12px 30px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-responder:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
        }

        /* Table */
        .table th {
            background: #f8f9fa;
            font-weight: 600;
            font-size: 13px;
            text-transform: uppercase;
            color: #666;
        }

        /* Responsivo */
        @media (max-width: 768px) {
            .info-item {
                flex-direction: column;
                gap: 5px;
            }

            .info-value {
                text-align: left;
            }

            .status-card {
                flex-direction: column;
                text-align: center;
            }
        }
    </style>
@endsection