@extends('layouts.app')

@section('title', 'Cadastro - Responsável')

@section('content')
<style>
    /* Container Responsável Encontrado - Responsividade */
    #container-responsavel-encontrado {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }
    
    @media (max-width: 576px) {
        #container-responsavel-encontrado {
            flex-direction: column;
            align-items: flex-start;
        }
        
        #container-responsavel-encontrado > div:last-child {
            align-self: flex-end;
            width: 100%;
        }
        
        #container-responsavel-encontrado #btn-editar-dados {
            width: 100%;
        }
    }
    
    /* Ajustes Mobile - Componentes mais compactos */
    @media (max-width: 767px) {
        /* Títulos (não sobrescrever inscricao-header/inscricao-titulo) */
        .form-titulo,
        h1.form-titulo {
            font-size: 1.25rem !important;
            margin-bottom: 8px !important;
        }
        
        .form-subtitulo {
            font-size: 0.8125rem !important;
            margin-bottom: 16px !important;
        }
        
        /* Botões */
        .btn,
        .btn-azul,
        .btn-secondary,
        .btn-outline-cinza {
            padding: 10px 14px !important;
            font-size: 0.8125rem !important;
            min-height: 38px !important;
        }
        
        /* Card body */
        .card-body {
            padding: 14px !important;
        }
        
        /* Divisor */
        .divisor,
        hr.divisor {
            margin: 12px 0 !important;
        }
        
        /* Ações do formulário */
        .form-acoes {
            margin-top: 16px !important;
            gap: 10px !important;
        }
        
        /* Labels e inputs */
        .form-label {
            font-size: 0.8125rem !important;
            margin-bottom: 6px !important;
        }
        
        .form-control {
            font-size: 0.8125rem !important;
        }
    }
</style>

<div class="card" id="card-responsavel">
    <div class="card-body">
        <!-- Cabeçalho com informações da viagem -->
        <div class="inscricao-header">
            <h1 class="inscricao-titulo">
                {{ $ordemServico->proposta->destinos->pluck('nome_fantasia')->filter()->implode(', ') ?: $ordemServico->proposta->destinos->pluck('razao_social')->implode(', ') }} - 
                {{ $ordemServico->proposta->cliente->nome_fantasia ?? $ordemServico->proposta->cliente->razao_social }} - 
                R$ {{ number_format($ordemServico->valor_contrato, 2, ',', '.') }}
            </h1>
        </div>

        <!-- Stepper -->
        <div class="stepper-container">
            <div class="stepper">
                <div class="step active">
                    <div class="step-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                            <circle cx="9" cy="7" r="4"></circle>
                            <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                        </svg>
                    </div>
                    <span class="step-label">Responsável</span>
                </div>
                
                <div class="step">
                    <div class="step-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg>
                    </div>
                    <span class="step-label">Aluno</span>
                </div>
                
                <div class="step">
                    <div class="step-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
                            <line x1="1" y1="10" x2="23" y2="10"></line>
                        </svg>
                    </div>
                    <span class="step-label">Pagamento</span>
                </div>
                
                <div class="step">
                    <div class="step-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                    </div>
                    <span class="step-label">Confirmação</span>
                </div>
            </div>
        </div>

        <!-- Card de Informações do Responsável -->
        <div class="inscricao-card">
            <h2 class="inscricao-card-titulo">INFORMAÇÕES DO RESPONSÁVEL</h2>
            
            <!-- Aviso: CPF não encontrado - Realize cadastro -->
            @if(request()->has('nota') && request()->get('nota') === 'cadastro')
            <div class="alert alert-info" style="display: flex; align-items: center; margin-bottom: 24px; border-left: 4px solid #0066cc;">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 12px; flex-shrink: 0;">
                    <circle cx="12" cy="12" r="10"></circle>
                    <line x1="12" y1="16" x2="12" y2="12"></line>
                    <line x1="12" y1="8" x2="12.01" y2="8"></line>
                </svg>
                <span><strong>CPF não encontrado.</strong> Realize agora o seu cadastro.</span>
            </div>
            @endif
            
            <!-- Container: Mensagem + Botão Editar (SEMPRE visível quando responsável existe) -->
            @if($responsavelExistente && $responsavelDados)
            <div class="alert alert-info mb-3" id="container-responsavel-encontrado" style="border-left: 4px solid #0066cc; display: flex; align-items: center; justify-content: space-between; gap: 15px;">
                <!-- Mensagem (varia conforme contexto) -->
                <div class="d-flex align-items-center" id="mensagem-responsavel-encontrado" style="flex: 0 1 auto; text-align: left;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 12px; flex-shrink: 0;">
                        <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                    <span>
                        @if(session('inscricao.responsavel_mensagem_primeira_vez'))
                            <strong>Dados recuperados!</strong> Encontramos seu cadastro anterior.
                        @else
                            <strong>Dados recuperados!</strong> Atualize suas informações se necessário.
                        @endif
                    </span>
                </div>
                
                <!-- Botão Editar (sempre visível) -->
                <div style="flex: 0 0 auto;">
                    <button type="button" 
                            id="btn-editar-dados" 
                            class="btn btn-sm btn-outline-primary" 
                            style="white-space: nowrap;"
                            onclick="ativarEdicaoResponsavel(); return false;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle; margin-right: 5px;">
                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                        </svg>
                        Editar Dados
                    </button>
                </div>
            </div>
            @endif

            <!-- Formulário -->
            <form id="form-responsavel" method="POST" 
                  data-action-salvar="{{ route('inscricao.salvar-responsavel') }}"
                  data-codigo-viagem="{{ $ordemServico->codigo_viagem }}">
                @csrf
                <input type="hidden" id="responsavel_id" name="responsavel_id" value="{{ $responsavelDados['id'] ?? '' }}">

                <!-- Grid responsivo 2 colunas -->
                <div class="form-row">
                    <!-- Nome -->
                    <div class="form-group col-md-6">
                        <label for="responsavelNome" class="form-label">Nome</label>
                        <input 
                            type="text" 
                            class="form-control{{ $responsavelExistente ? ' readonly-field' : '' }}" 
                            id="responsavelNome" 
                            name="nome"
                            value="{{ $responsavelDados['nome'] ?? '' }}"
                            placeholder=""
                            maxlength="150"
                            {{ $responsavelExistente ? 'readonly' : '' }}
                            required
                        >
                        <div class="invalid-feedback"></div>
                    </div>

                    <!-- Telefone -->
                    <div class="form-group col-md-6">
                        <label for="responsavelTelefone" class="form-label">Telefone</label>
                        <input 
                            type="text" 
                            class="form-control{{ $responsavelExistente ? ' readonly-field' : '' }}" 
                            id="responsavelTelefone" 
                            name="telefone"
                            value="{{ $responsavelDados['telefone'] ?? '' }}"
                            placeholder="11 999999999"
                            maxlength="15"
                            oninput="formatarTelefone(this)"
                            {{ $responsavelExistente ? 'readonly' : '' }}
                            required
                        >
                        <div class="invalid-feedback"></div>
                    </div>
                </div>

                <div class="form-row">
                    <!-- CPF -->
                    <div class="form-group col-md-6">
                        <label for="responsavelCpf" class="form-label">CPF</label>
                        <input 
                            type="text" 
                            class="form-control{{ $responsavelExistente ? ' readonly-field' : '' }}" 
                            id="responsavelCpf" 
                            name="cpf"
                            value="{{ $responsavelDados['cpf'] ?? '' }}"
                            placeholder=""
                            maxlength="14"
                            oninput="formatarCpf(this)"
                            onblur="verificarCpf(this)"
                            {{ $responsavelExistente ? 'readonly' : '' }}
                            required
                            data-verify-url="{{ route('inscricao.verificar-responsavel') }}"
                        >
                        <div class="invalid-feedback"></div>
                    </div>

                    <!-- RG -->
                    <div class="form-group col-md-6">
                        <label for="responsavelRg" class="form-label">RG</label>
                        <input 
                            type="text" 
                            class="form-control{{ $responsavelExistente ? ' readonly-field' : '' }}" 
                            id="responsavelRg" 
                            name="rg"
                            value="{{ $responsavelDados['rg'] ?? '' }}"
                            placeholder=""
                            maxlength="20"
                            {{ $responsavelExistente ? 'readonly' : '' }}
                            required
                        >
                        <div class="invalid-feedback"></div>
                    </div>
                </div>

                <div class="form-row">
                    <!-- Email -->
                    <div class="form-group col-md-6">
                        <label for="responsavelEmail" class="form-label">Email</label>
                        <input 
                            type="email" 
                            class="form-control{{ $responsavelExistente ? ' readonly-field' : '' }}" 
                            id="responsavelEmail" 
                            name="email"
                            value="{{ $responsavelDados['email'] ?? '' }}"
                            placeholder=""
                            maxlength="100"
                            {{ $responsavelExistente ? 'readonly' : '' }}
                            required
                        >
                        <div class="invalid-feedback"></div>
                    </div>

                    <!-- Repita o Email -->
                    <div class="form-group col-md-6">
                        <label for="repitaoEmail" class="form-label">Repita o Email</label>
                        <input 
                            type="email" 
                            class="form-control{{ $responsavelExistente ? ' readonly-field' : '' }}" 
                            id="repitaoEmail" 
                            name="email_confirmation"
                            value="{{ $responsavelDados['email'] ?? '' }}"
                            placeholder=""
                            maxlength="100"
                            {{ $responsavelExistente ? 'readonly' : '' }}
                            data-confirm="responsavelEmail"
                            required
                        >
                        <div class="invalid-feedback"></div>
                    </div>
                </div>

                <!-- Botões -->
                <div class="form-acoes">
                    <a href="{{ route('viagem.boas-vindas', ['codigo' => $ordemServico->codigo_viagem]) }}" 
                       class="btn btn-outline-cinza" 
                       id="btn-voltar"
                       data-ajax="true"
                       data-loading-message="Carregando...">
                        Voltar
                    </a>
                    
                    @if(isset($responsavelExistente) && $responsavelExistente)
                        <!-- Responsável já existe (readonly): Botão Próximo redireciona direto -->
                        <a href="{{ route('inscricao.step2-aluno', ['codigoViagem' => $ordemServico->codigo_viagem]) }}" 
                           class="btn btn-azul" 
                           id="btn-proximo"
                           data-ajax="true"
                           data-loading-message="Carregando próxima etapa...">
                            Próximo
                        </a>
                    @else
                        <!-- Novo cadastro: Botão Salvar -->
                        <button type="button" 
                                class="btn btn-azul" 
                                id="btn-salvar"
                                onclick="return salvar('{{ route('inscricao.salvar-responsavel') }}', 'form-responsavel');">
                            Salvar
                        </button>
                    @endif
                </div>
            </form>
        </div>
    </div>
</div>

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