{{-- ============================================= --}}
{{-- FASE: DADOS DO ALUNO                         --}}
{{-- ============================================= --}}

<div class="space-y-6">

    <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-sm overflow-hidden">

        <div class="p-5 md:p-6 space-y-6">

            {{-- ====== SEÇÃO: DADOS PESSOAIS ====== --}}
            <div>
                <div class="flex items-center gap-2 mb-4">
                    <div class="w-7 h-7 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center">
                        <svg class="w-4 h-4 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    </div>
                    <h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Dados Pessoais</h3>
                </div>

                <div class="grid grid-cols-12 gap-x-4 gap-y-4">
                    <div class="col-span-full md:col-span-6">
                        <x-input label="Nome Completo" wire:model="nome_completo" class="w-full capitalize" />
                    </div>
                    <div class="col-span-6 md:col-span-3">
                        <x-native-select label="Sexo" wire:model="sexo" placeholder="---" :options="listSexo()" option-value="id" option-label="name" />
                    </div>
                    <div class="col-span-6 md:col-span-3">
                        <x-native-select label="Estado Civil" wire:model="estado_civil" placeholder="---" :options="listEstadoCivil()" option-value="id" option-label="name" />
                    </div>
                    <div class="col-span-full md:col-span-6">
                        <x-input label="Email" wire:model="email" type="email" class="w-full lowercase" />
                    </div>
                </div>
            </div>

            <hr class="border-gray-200 dark:border-gray-700">

            {{-- ====== SEÇÃO: CONTATO ====== --}}
            <div>
                <div class="flex items-center gap-2 mb-4">
                    <div class="w-7 h-7 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
                        <svg class="w-4 h-4 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                    </div>
                    <h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Contato</h3>
                </div>

                <div class="grid grid-cols-12 gap-x-4 gap-y-4">
                    <div class="col-span-full md:col-span-4">
                        <x-native-select label="Código País" wire:model.live="tel_cod" placeholder="---" :options="listDdi()" option-value="id" option-label="label" />
                    </div>
                    <div class="col-span-4 md:col-span-3">
                        @if ($tel_cod == 55)
                            <x-native-select label="DDD" wire:model="tel_ddd" placeholder="---" :options="listDdd()" option-value="id" option-label="ddd" />
                        @else
                            <x-native-select label="DDD" wire:model="tel_ddd" disabled class="cursor-not-allowed">
                                <option value="0">N/A</option>
                            </x-native-select>
                        @endif
                    </div>
                    <div class="col-span-8 md:col-span-5">
                        @if ($tel_cod == 55)
                            <x-inputs.maskable label="Telefone" wire:model="tel_num" mask="['####-####','#####-####']" placeholder="____-____" inputmode="numeric" pattern="[0-9]*" />
                        @else
                            <x-input label="Telefone Internacional" wire:model="tel_num" placeholder="Somente números" inputmode="numeric" pattern="[0-9]*" />
                        @endif
                    </div>
                </div>
            </div>

            <hr class="border-gray-200 dark:border-gray-700">

            {{-- ====== SEÇÃO: ENDEREÇO ====== --}}
            <div>
                <div class="flex items-center gap-2 mb-4">
                    <div class="w-7 h-7 rounded-lg bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
                        <svg class="w-4 h-4 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    </div>
                    <h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Endereço</h3>
                </div>

                <div class="grid grid-cols-12 gap-x-4 gap-y-4">
                    <div class="col-span-full md:col-span-3">
                        <x-native-select label="País" wire:model="endereco_pais" class="uppercase">
                            <option value="">Selecione</option>
                            @forelse (listEnderecoPais() ?? [] as $pais_item)
                                <option value="{{ $pais_item['id'] }}" class="uppercase">{{ $pais_item['pais'] }}</option>
                            @empty
                                <option value="" disabled>Sem países disponíveis</option>
                            @endforelse
                        </x-native-select>
                    </div>

                    @if ($endereco_pais ?? false)
                        @if ($endereco_pais == '55')
                            <div class="col-span-6 md:col-span-3">
                                <x-inputs.maskable label="CEP" wire:model.blur="endereco_cep" mask="#####-###" placeholder="_____-___" inputmode="numeric" />
                            </div>
                            <div class="col-span-full md:col-span-6">
                                <x-input label="Endereço" wire:model="endereco" class="w-full uppercase" />
                            </div>
                            <div class="col-span-full md:col-span-4">
                                <x-input label="Número" wire:model="endereco_num" class="w-full uppercase" />
                            </div>
                            <div class="col-span-full md:col-span-8">
                                <x-input label="Complemento" wire:model="endereco_complemento" class="w-full uppercase" />
                            </div>
                            <div class="col-span-full md:col-span-4">
                                <x-input label="Bairro" wire:model="endereco_bairro" class="w-full uppercase" />
                            </div>
                            <div class="col-span-full md:col-span-4">
                                <x-input label="Cidade" wire:model="endereco_cidade" class="w-full uppercase" />
                            </div>
                            <div class="col-span-full md:col-span-4">
                                <x-native-select label="Estado" wire:model="endereco_estado" class="uppercase">
                                    <option value="">Selecione</option>
                                    @forelse ($listaUf ?? [] as $uf_item)
                                        <option value="{{ $uf_item['id'] }}" class="uppercase">{{ $uf_item['estado'] }}</option>
                                    @empty
                                        <option value="" disabled>Sem estados disponíveis</option>
                                    @endforelse
                                </x-native-select>
                            </div>
                        @else
                            <div class="col-span-6 md:col-span-3">
                                <x-input label="Código Postal / ZIP" hint="Postal Code" wire:model="endereco_cep" inputmode="numeric" />
                            </div>
                            <div class="col-span-full md:col-span-6">
                                <x-input label="Endereço (linha 1)" hint="Address Line 1" wire:model="endereco" class="w-full uppercase" />
                            </div>
                            <div class="col-span-full md:col-span-6">
                                <x-input label="Endereço (linha 2)" hint="Address Line 2" wire:model="endereco_complemento" class="w-full uppercase" />
                            </div>
                            <div class="col-span-full md:col-span-4">
                                <x-input label="Número" hint="Number" wire:model="endereco_num" class="w-full uppercase" />
                            </div>
                            <div class="col-span-full md:col-span-4">
                                <x-input label="Bairro / Distrito" hint="District" wire:model="endereco_bairro" class="w-full uppercase" />
                            </div>
                            <div class="col-span-full md:col-span-4">
                                <x-input label="Cidade" hint="City" wire:model="city" class="w-full uppercase" />
                            </div>
                            <div class="col-span-full md:col-span-4">
                                <x-input label="Estado / Região" hint="Region" wire:model="endereco_estado" class="w-full uppercase" />
                            </div>
                        @endif
                    @else
                        <div class="col-span-full md:col-span-9 flex items-center">
                            <p class="text-sm text-gray-400 dark:text-gray-500 italic mt-5">Selecione o país correspondente ao seu endereço</p>
                        </div>
                    @endif
                </div>
            </div>

            <hr class="border-gray-200 dark:border-gray-700">

            {{-- ====== SEÇÃO: ORIGEM ====== --}}
            <div class="grid grid-cols-12 gap-x-4 gap-y-4">
                <div class="col-span-full md:col-span-6">
                    <x-select label="Como nos conheceu?" wire:model="matricula_origem" placeholder="---" :options="listConheceu()" option-value="slug" option-label="name" />
                </div>
            </div>

            <hr class="border-gray-200 dark:border-gray-700">

            {{-- ====== SEÇÃO: TERMOS ====== --}}
            <div>
                <div class="flex items-center gap-2 mb-3">
                    <div class="w-7 h-7 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
                        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    </div>
                    <h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Termos de Uso e Privacidade</h3>
                </div>

                <div class="w-full overflow-auto h-48 bg-gray-50 dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                    {!! $termos ?? 'NÃO POSSUI' !!}
                </div>

                <div class="mt-3">
                    <x-checkbox id="termos-aceite" wire:model.live="termos_aceite_check" label="Li e estou de acordo com a política de privacidade." />
                </div>
            </div>
        </div>
    </div>

    {{-- Alertas --}}
    <x-ead-alerts />

    {{-- Botões de navegação --}}
    <div class="flex items-center justify-end gap-3">
        @if ($termos_aceite_check ?? false)
            <button wire:click.prevent="avancaFaseAluno()"
                    wire:loading.attr="disabled"
                    wire:loading.class="opacity-70 cursor-wait"
                    class="inline-flex items-center gap-2 px-8 py-3 bg-gradient-to-r from-indigo-600 to-indigo-700
                           hover:from-indigo-700 hover:to-indigo-800 text-white font-semibold text-sm rounded-xl
                           shadow-md shadow-indigo-200 dark:shadow-indigo-900/40 transition-all duration-200">
                <span wire:loading.remove wire:target="avancaFaseAluno">AVANÇAR</span>
                <span wire:loading.flex wire:target="avancaFaseAluno" class="items-center gap-2">
                    <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    PROCESSANDO...
                </span>
                <svg wire:loading.remove wire:target="avancaFaseAluno" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
            </button>
        @else
            <button disabled
                class="inline-flex items-center gap-2 px-8 py-3 bg-gray-200 dark:bg-gray-700 text-gray-400 dark:text-gray-500
                       font-semibold text-sm rounded-xl cursor-not-allowed" title="Aceite os termos para continuar">
                AVANÇAR
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
            </button>
        @endif
    </div>
</div>