@extends('layouts.app')

@section('title', 'Boas Vindas - Viagem')

@section('content')
<style>
    /* Ajustes Mobile - Componentes mais compactos */
    @media (max-width: 767px) {
        /* Inputs */
        .form-control,
        input.form-control {
            padding: 10px 14px !important;
            font-size: 0.8125rem !important;
            min-height: 38px !important;
        }
        
        /* Labels */
        .form-label,
        label {
            font-size: 0.8125rem !important;
            margin-bottom: 6px !important;
        }
        
        /* Botões */
        .btn,
        .btn-azul,
        .btn-outline-cinza {
            padding: 10px 14px !important;
            font-size: 0.8125rem !important;
            min-height: 38px !important;
            height: auto !important;
        }
        
        /* Títulos */
        .boas-vindas-titulo {
            font-size: 1.375rem !important;
        }
        
        /* Info items */
        .info-label,
        .info-valor {
            font-size: 0.8125rem !important;
        }
        
        /* Card body */
        .card-boas-vindas .card-body {
            padding: 18px !important;
        }
    }
</style>

<div class="card card-boas-vindas">
    <div class="card-body">
        <div class="boas-vindas-header">
            <h1 class="boas-vindas-titulo">Seja Bem-Vindo!</h1>
        </div>
        
        <div class="info-viagem">
            <!-- Código da Viagem e Investimento -->
            <div class="info-row">
                <div class="info-item">
                    <span class="info-label">Código da Viagem</span>
                    <span class="info-valor">{{ $ordemServico->codigo_viagem }}</span>
                </div>
                
                <div class="info-item">
                    <span class="info-label">Investimento</span>
                    <span class="info-valor">R$ {{ number_format($ordemServico->valor_contrato, 2, ',', '.') }}</span>
                </div>
            </div>
            
            <!-- Destinos do Roteiro -->
            @if($proposta->destinos->isNotEmpty())
            <div class="info-item destaque">
                <span class="info-label">Roteiro</span>
                <span class="info-valor-destaque">{{ $proposta->destinos->pluck('nome_fantasia')->filter()->implode(', ') ?: $proposta->destinos->pluck('razao_social')->implode(', ') }}</span>
            </div>
            @endif
            
            <!-- Colégio -->
            <div class="info-item">
                <span class="info-label">Colégio</span>
                <span class="info-valor">{{ $proposta->cliente->nome_fantasia ?? $proposta->cliente->razao_social }}</span>
            </div>
            
            <!-- Turma -->
            <div class="info-item">
                <span class="info-label">Turma</span>
                <span class="info-valor">{{ $ordemServico->turmas ?? $proposta->turmas }}</span>
            </div>
        </div>
        
        <hr class="divisor">
        
        <!-- Cronograma Ilustrado -->
        <div class="cronograma-secao">
            <h2 class="cronograma-titulo">Cronograma Ilustrado</h2>
            
            <div class="cronograma-container">
                @if($proposta->cronogramas->isNotEmpty())
                    @foreach($proposta->cronogramas as $cronograma)
                    <div class="cronograma-dia">
                        <h3 class="cronograma-dia-titulo">{{ $cronograma->titulo }}</h3>
                        
                        @if($cronograma->atividades->isNotEmpty())
                        <div class="atividades-lista">
                            @foreach($cronograma->atividades as $atividade)
                            <div class="atividade-item">
                                @if($atividade->horario)
                                <span class="atividade-horario">{{ \Carbon\Carbon::parse($atividade->horario)->format('H:i') }}</span>
                                @endif
                                <span class="atividade-descricao">{{ $atividade->descricao }}</span>
                            </div>
                            @endforeach
                        </div>
                        @endif
                    </div>
                    @endforeach
                @else
                    <p class="cronograma-vazio">Cronograma ainda não disponível.</p>
                @endif
            </div>
        </div>
        
        <hr class="divisor">
        
        <!-- Cards Bootstrap: Já tenho cadastro / Primeira inscrição -->
        @if(!$responsavelCadastrado)
        <div class="row g-3" id="cards-decisao">
            <!-- Card: Já possuo cadastro -->
            <div class="col-12 col-md-6">
                <div class="card card-decisao h-100" id="card-ja-tenho-cadastro" role="button" onclick="jaTenhoCadastro()">
                    <div class="card-body d-flex align-items-center justify-content-center">
                        <span class="fw-semibold">Já possuo cadastro</span>
                    </div>
                </div>
            </div>
            
            <!-- Card: Primeira inscrição -->
            <div class="col-12 col-md-6">
                <div class="card card-decisao h-100" id="card-primeiro-acesso" role="button" onclick="primeiroAcesso()">
                    <div class="card-body d-flex align-items-center justify-content-center">
                        <span class="fw-semibold">Primeira inscrição</span>
                    </div>
                </div>
            </div>
        </div>
        @endif
        
        <!-- Campo CPF (aparece quando clicar "Já tenho cadastro") -->
        @if(!$responsavelCadastrado)
        <div class="mt-3" id="campo-cpf-container" style="display: none;">
            <div class="card">
                <div class="card-body">
                    <p class="text-muted mb-3">Informe seu CPF para buscarmos suas informações:</p>
                    
                    <form id="form-buscar-cpf" novalidate onsubmit="buscarCpf(event)">
                        @csrf
                        <div class="mb-3">
                            <label for="cpf-busca" class="form-label">CPF</label>
                            <input 
                                type="text" 
                                class="form-control" 
                                id="cpf-busca" 
                                name="cpf"
                                placeholder="000.000.000-00"
                                maxlength="14"
                                oninput="formatarCpf(this); limparErro(this)"
                            >
                            <div class="invalid-feedback"></div>
                        </div>
                        
                        <div class="row g-3">
                            <div class="col-12 col-md-6">
                                <button type="button" class="btn btn-outline-cinza w-100" id="btn-voltar-decisao" onclick="voltarDecisao()" style="height: 48px; display: flex; align-items: center; justify-content: center;">
                                    Voltar
                                </button>
                            </div>
                            <div class="col-12 col-md-6">
                                <button type="submit" class="btn btn-azul w-100" id="btn-buscar-cpf" style="height: 48px; display: flex; align-items: center; justify-content: center;">
                                    Buscar Cadastro
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        @endif

        <!-- Botões de Ação -->
        @if($responsavelCadastrado)
        <!-- Responsável já cadastrado: Sair (esquerda) + Próximo (direita) -->
        <div class="form-acoes">
            <a href="{{ route('sair') }}" class="btn btn-outline-azul" onclick="showLoading('Saindo...'); return true;">
                Sair
            </a>
            <a href="{{ route('inscricao.step1-responsavel', ['codigoViagem' => $ordemServico->codigo_viagem]) }}" 
               class="btn btn-azul" 
               data-ajax="true"
               data-loading-message="Carregando dados...">
                Próximo
            </a>
        </div>
        @else
        <!-- Sem cadastro: Apenas Sair (direita) -->
        <div class="form-acoes" style="justify-content: flex-end;">
            <a href="{{ route('sair') }}" class="btn btn-outline-azul" onclick="showLoading('Saindo...'); return true;">
                Sair
            </a>
        </div>
        @endif
    </div>
</div>

<!-- Loading Overlay -->
<div id="loading-overlay" class="loading-overlay" style="display: none;">
    <div class="loading-spinner"></div>
    <p class="loading-text">Buscando cadastro...</p>
</div>
@endsection