@extends('layouts.app')

@section('title', isset($aluno) ? 'Editar Aluno' : 'Cadastrar Aluno')

@section('content')
<style>
/* Botões SIM/NÃO */
.btn-toggle {
    padding: 8px 24px;
    border: 2px solid #dee2e6;
    background: #f8f9fa;
    color: #6c757d;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s;
    flex: 1;
    max-width: 120px;
}

.btn-toggle-left {
    border-radius: 6px 0 0 6px;
}

.btn-toggle-right {
    border-radius: 0 6px 6px 0;
    border-left: none;
}

.btn-toggle:hover {
    border-color: #003580;
}

.btn-toggle.active {
    background: #003580;
    color: white;
    border-color: #003580;
    position: relative;
    z-index: 1;
}

.btn-toggle-right.active {
    border-left: 2px solid #003580;
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    vertical-align: middle;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #003580;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

.form-check-toggle {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.form-check-toggle label[for] {
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}
</style>
<div class="card">
    <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 completed">
                    <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">Responsável</span>
                </div>
                
                <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="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>

        <!-- Formulário -->
        <form id="form-aluno" method="POST" action="{{ route('inscricao.salvar-aluno') }}">
            @csrf
            <input type="hidden" name="aluno_id" value="{{ $aluno->id ?? '' }}">
            <input type="hidden" name="responsavel_id" value="{{ session('inscricao.responsavel_id') }}">
            <input type="hidden" name="codigo_viagem" value="{{ $codigoViagem }}">

            {{-- ========================================== --}}
            {{-- SEÇÃO 1: INFORMAÇÕES DO ALUNO --}}
            {{-- ========================================== --}}
            <div class="inscricao-card">
                <h2 class="inscricao-card-titulo">INFORMAÇÕES DO ALUNO</h2>
                
                <div class="form-row">
                    <!-- Nome do aluno -->
                    <div class="form-group col-md-6">
                        <label for="alunoNome" class="form-label">Nome do aluno <span class="text-danger">*</span></label>
                        <input 
                            type="text" 
                            class="form-control" 
                            id="alunoNome" 
                            name="nome"
                            value="{{ $aluno->nome ?? '' }}"
                            maxlength="150"
                            required
                        >
                        <div class="invalid-feedback"></div>
                    </div>

                    <!-- Data nascimento -->
                    <div class="form-group col-md-6">
                        <label for="alunoDataNascimento" class="form-label">Data de Nascimento <span class="text-danger">*</span></label>
                        <input 
                            type="text" 
                            class="form-control datepicker" 
                            id="alunoDataNascimento" 
                            name="data_nascimento"
                            value="{{ isset($aluno) ? (is_string($aluno->data_nascimento) ? (DateTime::createFromFormat('Y-m-d', $aluno->data_nascimento) ? DateTime::createFromFormat('Y-m-d', $aluno->data_nascimento)->format('d/m/Y') : $aluno->data_nascimento) : $aluno->data_nascimento->format('d/m/Y')) : '' }}"
                            placeholder="dd/mm/aaaa"
                            required
                        >
                        <div class="invalid-feedback"></div>
                    </div>
                </div>

                <div class="form-row">
                    <!-- CPF do Aluno -->
                    <div class="form-group col-md-6">
                        <label for="alunoCpf" class="form-label">CPF do Aluno <span class="text-danger">*</span></label>
                        <input 
                            type="text" 
                            class="form-control" 
                            id="alunoCpf" 
                            name="cpf"
                            value="{{ $aluno->cpf ?? '' }}"
                            placeholder="CPF do Aluno ou do Responsável"
                            maxlength="14"
                            oninput="formatarCpf(this)"
                            required
                        >
                        <div class="invalid-feedback"></div>
                    </div>

                    <!-- RG do Aluno -->
                    <div class="form-group col-md-6">
                        <label for="alunoRg" class="form-label">RG do Aluno <span class="text-danger">*</span></label>
                        <input 
                            type="text" 
                            class="form-control" 
                            id="alunoRg" 
                            name="rg"
                            value="{{ $aluno->rg ?? '' }}"
                            placeholder="RG do Aluno ou do Responsável"
                            maxlength="20"
                            required
                        >
                        <div class="invalid-feedback"></div>
                    </div>
                </div>

                <div class="form-row">
                    <!-- Turma do aluno -->
                    <div class="form-group col-md-6">
                        <label for="alunoTurma" class="form-label">Turma do aluno <span class="text-danger">*</span></label>
                        <input 
                            type="text" 
                            class="form-control" 
                            id="alunoTurma" 
                            name="turma"
                            value="{{ $aluno->turma ?? '' }}"
                            placeholder="Ex: 1A, 1B"
                            maxlength="50"
                            required
                        >
                        <div class="invalid-feedback"></div>
                    </div>
                </div>

                <p style="color: #6c757d; margin-top: 15px; margin-bottom: 0; font-size: 0.9rem;">
                    <span style="color: #dc3545;">*</span> Importante responder corretamente as opções acima, tanto para o seguro quanto para auxiliar os monitores.
                </p>
                <p style="color: #6c757d; margin-top: 8px; margin-bottom: 0; font-size: 0.85rem;">
                    <strong>Nota:</strong> Caso o aluno não possua CPF ou RG próprio, você pode informar os seus documentos (do responsável).
                </p>
            </div>

            {{-- ========================================== --}}
            {{-- SEÇÃO 2: CONTATOS PARA CASO DE EMERGÊNCIA --}}
            {{-- ========================================== --}}
            <div class="inscricao-card">
                <h2 class="inscricao-card-titulo">CONTATOS PARA CASO DE EMERGÊNCIA</h2>
                
                <div class="form-row">
                    <!-- Nome do contato -->
                    <div class="form-group col-md-6">
                        <label for="contatoNome" class="form-label">Nome do contato <span class="text-danger">*</span></label>
                        <input 
                            type="text" 
                            class="form-control" 
                            id="contatoNome" 
                            name="contato_emergencia[0][nome]"
                            value="{{ isset($aluno) && $aluno->contatosEmergencia->isNotEmpty() ? $aluno->contatosEmergencia->first()->nome : '' }}"
                            maxlength="100"
                            required
                        >
                        <div class="invalid-feedback"></div>
                    </div>

                    <!-- Telefone do contato -->
                    <div class="form-group col-md-6">
                        <label for="contatoTelefone" class="form-label">Telefone do contato <span class="text-danger">*</span></label>
                        <input 
                            type="text" 
                            class="form-control" 
                            id="contatoTelefone" 
                            name="contato_emergencia[0][telefone]"
                            value="{{ isset($aluno) && $aluno->contatosEmergencia->isNotEmpty() ? $aluno->contatosEmergencia->first()->telefone : '' }}"
                            maxlength="20"
                            oninput="formatarTelefone(this)"
                            required
                        >
                        <div class="invalid-feedback"></div>
                    </div>
                </div>

                <p style="color: #6c757d; margin-top: 15px; margin-bottom: 0; font-size: 0.9rem;">
                    <span style="color: #dc3545;">*</span> Estes contatos apenas serão acionados se o responsável estiver incomunicável.
                </p>
            </div>

            {{-- ========================================== --}}
            {{-- SEÇÃO: CONSENTIMENTO DE USO DE IMAGEM --}}
            {{-- ========================================== --}}
            <div class="inscricao-card">
                <h2 class="inscricao-card-titulo">CONSENTIMENTO DE USO DE IMAGEM</h2>

                <div class="form-check d-flex align-items-start" style="gap: 10px; margin-bottom: 16px;">
                    <input
                        type="checkbox"
                        class="form-check-input"
                        id="autorizaUsoImagem"
                        name="autoriza_uso_imagem"
                        value="1"
                        style="width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; cursor: pointer;"
                        {{ !isset($aluno) || !$aluno->consentimentoImagem || $aluno->consentimentoImagem->autoriza_uso_imagem ? 'checked' : '' }}
                    >
                    <label for="autorizaUsoImagem" class="form-check-label" style="cursor: pointer; font-size: 0.95rem; line-height: 1.5;">
                        AUTORIZO a captação e a utilização de imagens e vídeos do(a) estudante, nos termos informados pela Universo Lúdico.
                    </label>
                </div>

                <div style="background: #f0f4ff; border-left: 4px solid #003580; border-radius: 6px; padding: 14px 16px;">
                    <p style="margin: 0 0 6px 0; font-weight: 600; font-size: 0.9rem; color: #003580;">
                        Uso de imagem durante a viagem
                    </p>
                    <p style="margin: 0; font-size: 0.875rem; color: #4a5568; line-height: 1.6;">
                        A Universo Lúdico realiza, durante a viagem, registros fotográficos e audiovisuais dos estudantes como parte do acompanhamento e da memória da experiência vivida pelo grupo. Esse material contribui para que famílias e escola acompanhem a participação dos estudantes ao longo do percurso e, ao final, tenham acesso a um registro visual da viagem.
                        <br><br>
                        Durante a programação, parte dessas imagens poderá ser publicada no perfil oficial da Universo Lúdico no Instagram, permitindo o acompanhamento da viagem por pessoas interessadas na proposta, em especial pais, mães, responsáveis e integrantes da comunidade escolar. Como o perfil da Universo Lúdico no Instagram é público, essas imagens também poderão ser visualizadas por terceiros.
                        <br><br>
                        No campo de seleção acima, você deverá informar de forma expressa, marcando a opção se AUTORIZA, ou desmarcando a opção caso NÃO AUTORIZA o uso da imagem do(a) estudante nessas publicações. Sua escolha ficará registrada no contrato da viagem.
                    </p>
                </div>
            </div>

            {{-- ========================================== --}}
            {{-- SEÇÃO 3: FICHA MÉDICA DO ALUNO --}}
            {{-- ========================================== --}}
            <div class="inscricao-card">
                <h2 class="inscricao-card-titulo">FICHA MÉDICA DO ALUNO</h2>
                
                <div class="form-row">
                    <!-- Coluna Esquerda: Medicamento -->
                    <div class="col-md-6">
                        <label class="form-label" style="margin-bottom: 12px;">O aluno está fazendo uso sistemático ou controlado de algum medicamento?</label>
                        <div class="btn-group-toggle" style="display: flex; gap: 0; margin-bottom: 12px;">
                            <button type="button" class="btn-toggle btn-toggle-left {{ isset($aluno) && $aluno->fichaMedica && $aluno->fichaMedica->faz_uso_medicamento == 'Sim' ? 'active' : '' }}" data-toggle-group="medicamento" data-value="Sim" onclick="toggleGrupo(this)">
                                SIM
                            </button>
                            <button type="button" class="btn-toggle btn-toggle-right {{ !isset($aluno) || !$aluno->fichaMedica || $aluno->fichaMedica->faz_uso_medicamento == 'Não' ? 'active' : '' }}" data-toggle-group="medicamento" data-value="Não" onclick="toggleGrupo(this)">
                                NÃO
                            </button>
                        </div>
                        <input type="hidden" name="faz_uso_medicamento" id="faz_uso_medicamento" value="{{ isset($aluno) && $aluno->fichaMedica ? $aluno->fichaMedica->faz_uso_medicamento : 'Não' }}">
                        
                        <p style="color: #6c757d; margin-top: 15px; margin-bottom: 0; font-size: 0.85rem;">
                            <span style="color: #dc3545;">*</span> Caso esteja fazendo na data do estudo/viagem, o aluno deverá levar o medicamento na embalagem original, com a receita médica e entregar para o professor responsável.
                        </p>
                    </div>

                    <!-- Coluna Direita: Toggle Switches -->
                    <div class="col-md-6">
                        <!-- Toggle Alergia -->
                        <div class="form-check-toggle" style="margin-bottom: 14px;">
                            <label class="switch">
                                <input type="checkbox" id="toggle_alergia" onchange="toggleFichaMedica('alergia', this)" {{ isset($aluno) && $aluno->fichaMedica && $aluno->fichaMedica->possui_alergia_grave == 'Sim' ? 'checked' : '' }}>
                                <span class="slider"></span>
                            </label>
                            <label for="toggle_alergia">
                                O aluno apresenta algum tipo de Alergia?(alimentos, medicamentos, insetos, corantes, etc)
                            </label>
                            <input type="hidden" name="possui_alergia_grave" id="possui_alergia_grave" value="{{ isset($aluno) && $aluno->fichaMedica && $aluno->fichaMedica->possui_alergia_grave == 'Sim' ? 'Sim' : 'Não' }}">
                        </div>

                        <!-- Toggle Restrição Alimentar -->
                        <div class="form-check-toggle" style="margin-bottom: 14px;">
                            <label class="switch">
                                <input type="checkbox" id="toggle_restricao" onchange="toggleFichaMedica('restricao', this)" {{ isset($aluno) && $aluno->fichaMedica && $aluno->fichaMedica->possui_restricao_alimentar == 'Sim' ? 'checked' : '' }}>
                                <span class="slider"></span>
                            </label>
                            <label for="toggle_restricao">
                                O aluno apresenta algum tipo de Restrição Alimentar?
                            </label>
                            <input type="hidden" name="possui_restricao_alimentar" id="possui_restricao_alimentar" value="{{ isset($aluno) && $aluno->fichaMedica && $aluno->fichaMedica->possui_restricao_alimentar == 'Sim' ? 'Sim' : 'Não' }}">
                        </div>

                        <!-- Toggle Doença Crônica -->
                        <div class="form-check-toggle" style="margin-bottom: 14px;">
                            <label class="switch">
                                <input type="checkbox" id="toggle_doenca" onchange="toggleFichaMedica('doenca', this)" {{ isset($aluno) && $aluno->fichaMedica && $aluno->fichaMedica->possui_doenca_cronica == 'Sim' ? 'checked' : '' }}>
                                <span class="slider"></span>
                            </label>
                            <label for="toggle_doenca">
                                O aluno apresenta algum tipo de Doença crônica? (diabetes, doenças pulmonares/ do coração/ cerebrovasculares, hipertensão, etc)
                            </label>
                            <input type="hidden" name="possui_doenca_cronica" id="possui_doenca_cronica" value="{{ isset($aluno) && $aluno->fichaMedica && $aluno->fichaMedica->possui_doenca_cronica == 'Sim' ? 'Sim' : 'Não' }}">
                        </div>

                        <!-- Toggle Deficiência PCD -->
                        <div class="form-check-toggle" style="margin-bottom: 14px;">
                            <label class="switch">
                                <input type="checkbox" id="toggle_deficiencia" onchange="toggleFichaMedica('deficiencia', this)" {{ isset($aluno) && $aluno->fichaMedica && $aluno->fichaMedica->possui_deficiencia_pcd == 'Sim' ? 'checked' : '' }}>
                                <span class="slider"></span>
                            </label>
                            <label for="toggle_deficiencia">
                                O aluno apresenta algum tipo de deficiência (PCD)?
                            </label>
                            <input type="hidden" name="possui_deficiencia_pcd" id="possui_deficiencia_pcd" value="{{ isset($aluno) && $aluno->fichaMedica && $aluno->fichaMedica->possui_deficiencia_pcd == 'Sim' ? 'Sim' : 'Não' }}">
                        </div>
                    </div>
                </div>

                <!-- Campos Condicionais (2x2 grid) -->
                <div class="form-row" style="margin-top: 20px;">
                    <!-- Campo Medicamento (quando SIM selecionado) -->
                    <div class="form-group col-md-12" id="campo-medicamento" style="display: {{ isset($aluno) && $aluno->fichaMedica && $aluno->fichaMedica->faz_uso_medicamento == 'Sim' ? 'block' : 'none' }};">
                        <label for="medicamentoDescricao" class="form-label">Cite qual o medicamento, para que serve e a orientação.</label>
                        <input 
                            type="text" 
                            class="form-control" 
                            id="medicamentoDescricao" 
                            name="medicamento_descricao"
                            value="{{ isset($aluno) && $aluno->fichaMedica ? $aluno->fichaMedica->medicamento_descricao : '' }}"
                            maxlength="255"
                        >
                        <div class="invalid-feedback"></div>
                    </div>
                </div>

                <div class="form-row">
                    <!-- Campo Alergia -->
                    <div class="form-group col-md-6" id="campo-alergia" style="display: {{ isset($aluno) && $aluno->fichaMedica && $aluno->fichaMedica->possui_alergia_grave == 'Sim' ? 'block' : 'none' }};">
                        <label for="alergiaDescricao" class="form-label">Cite qual a alergia e a orientação.</label>
                        <input 
                            type="text" 
                            class="form-control" 
                            id="alergiaDescricao" 
                            name="alergia_descricao"
                            value="{{ isset($aluno) && $aluno->fichaMedica ? $aluno->fichaMedica->alergia_descricao : '' }}"
                            maxlength="255"
                        >
                        <div class="invalid-feedback"></div>
                    </div>

                    <!-- Campo Restrição Alimentar -->
                    <div class="form-group col-md-6" id="campo-restricao" style="display: {{ isset($aluno) && $aluno->fichaMedica && $aluno->fichaMedica->possui_restricao_alimentar == 'Sim' ? 'block' : 'none' }};">
                        <label for="restricaoDescricao" class="form-label">Cite a restrição alimentar e a orientação.</label>
                        <input 
                            type="text" 
                            class="form-control" 
                            id="restricaoDescricao" 
                            name="restricao_alimentar_descricao"
                            value="{{ isset($aluno) && $aluno->fichaMedica ? $aluno->fichaMedica->restricao_alimentar_descricao : '' }}"
                            maxlength="255"
                        >
                        <div class="invalid-feedback"></div>
                    </div>
                </div>

                <div class="form-row">
                    <!-- Campo Doença Crônica -->
                    <div class="form-group col-md-6" id="campo-doenca" style="display: {{ isset($aluno) && $aluno->fichaMedica && $aluno->fichaMedica->possui_doenca_cronica == 'Sim' ? 'block' : 'none' }};">
                        <label for="doencaDescricao" class="form-label">Cite a condição de doença crônica e a orientação.</label>
                        <input 
                            type="text" 
                            class="form-control" 
                            id="doencaDescricao" 
                            name="doenca_cronica_descricao"
                            value="{{ isset($aluno) && $aluno->fichaMedica ? $aluno->fichaMedica->doenca_cronica_descricao : '' }}"
                            maxlength="255"
                        >
                        <div class="invalid-feedback"></div>
                    </div>

                    <!-- Campo Deficiência -->
                    <div class="form-group col-md-6" id="campo-deficiencia" style="display: {{ isset($aluno) && $aluno->fichaMedica && $aluno->fichaMedica->possui_deficiencia_pcd == 'Sim' ? 'block' : 'none' }};">
                        <label for="deficienciaDescricao" class="form-label">Cite a deficiência e a orientação.</label>
                        <input 
                            type="text" 
                            class="form-control" 
                            id="deficienciaDescricao" 
                            name="deficiencia_pcd_descricao"
                            value="{{ isset($aluno) && $aluno->fichaMedica ? $aluno->fichaMedica->deficiencia_pcd_descricao : '' }}"
                            maxlength="255"
                        >
                        <div class="invalid-feedback"></div>
                    </div>
                </div>
            </div>

            <!-- Botões de ação -->
            <div class="form-acoes">
                <a href="{{ route('inscricao.step2-aluno', ['codigoViagem' => $codigoViagem]) }}" 
                   class="btn btn-outline-cinza"
                   data-ajax="true"
                   data-loading-message="Voltando...">
                    Cancelar
                </a>
                <button type="button" class="btn btn-azul" id="btn-salvar"
                        onclick="salvar('{{ route('inscricao.salvar-aluno') }}', 'form-aluno')">
                    Salvar
                </button>
            </div>
        </form>
    </div>
</div>
@endsection