@extends('layouts.app')

@section('title', $consultor->full_name . ' | Meu Perfil Detalhado')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/linkedin-style.css') }}">
<link rel="stylesheet" href="{{ asset('css/menu.css') }}">
@endpush

@section('content')
<!-- Conteúdo Principal -->
<div class="main-container">
    <div class="row g-3">
        <!-- Coluna 1 - Perfil e Menu -->
          <!-- Coluna 1 - Perfil e Menu -->
        <div class="col-lg-3">


          <!-- Perfil do Usuário -->
                <div class="profile-card">
    <!-- Capa -->
    <div class="profile-cover"></div>

    <!-- Avatar com efeito de sobreposição -->
      <div class="profile-avatar-container">
    @php
        $avatarPath = auth()->user()->profile_logo
            ? asset('storage/' . auth()->user()->profile_logo)
            : 'https://api.dicebear.com/7.x/avataaars/svg?seed=' . urlencode(auth()->user()->name);
    @endphp

    <img src="{{ $avatarPath }}" alt="Avatar" class="profile-avatar" id="avatarPreview">

    <input type="file" id="avatarInput" style="display: none;"
       data-url="{{ route('profile.update.avatar') }}" accept="image/*">
    <button type="button" class="add-avatar-btn" onclick="document.getElementById('avatarInput').click();">
        <i class="fas fa-plus"></i>
    </button>
</div>

         @if(Auth::user()->isRecruiter() && Auth::user()->recruiter)
 <a href="{{ Auth::user()->isRecruiter() ? route('recruiter.profile') : route('recruiter.profile') }}" class="menu-item">
            @elseif(Auth::user()->isCandidate())
 <a href="{{ Auth::user()->isCandidate() ? route('candidate.profile') : route('candidate.profile') }}" class="menu-item">
            @else
                {{ Auth::user()->role }}
            @endif

    <!-- Informações -->

    <div class="profile-info">

        <div class="profile-name">{{ Auth::user()->name }}</div>

        <div class="profile-title">
            @if(Auth::user()->isRecruiter() && Auth::user()->recruiter)
                {{ Auth::user()->recruiter->position ?? 'Recrutador' }} na {{ Auth::user()->recruiter->company_name }}
            @elseif(Auth::user()->isCandidate())
                {{ Auth::user()->candidates?->current_title ?? 'Candidato' }}
            @else
                {{ Auth::user()->role }}
            @endif
        </div>
        <div class="profile-company">
            @if(Auth::user()->isRecruiter() && Auth::user()->recruiter)
                <i class="fas fa-building me-1"></i>{{ Auth::user()->recruiter->company_name }}
            @endif
        </div>

    </div>
    </a>
</div>
<button class="mobile-menu-toggle" id="mobileMenuToggle"
   type="button"
        data-bs-toggle="collapse"
        data-bs-target=".submenu"
        aria-expanded="false">
                    <span>Menu</span>
                    <i class="fas fa-chevron-down"></i>
                </button>


            <div class="submenu">



                <!-- Menu -->
 <div class="p-3">


@if(Auth::user()->isRecruiter() && Auth::user()->recruiter)

<a href="{{ route('recruiter.jobs') }}" class="menu-item">
        <i class="fas fa-file-signature"></i> Minhas Vagas
    </a>

@elseif(Auth::user()->isCandidate())

<a href="{{ route('candidate.applications') }}" class="menu-item">
        <i class="fas fa-file-signature"></i> Minhas Candidaturas
    </a>
            @else
<!-- admin role-->
            @endif



    <a href="#" class="menu-item">
        <i class="fas fa-eye"></i> Visualizações de Perfil
    </a>

<a href="{{ route('analytics.index') }}" class="menu-item">
        <i class="fas fa-chart-bar"></i> Ver todas Análises
    </a>




@if(Auth::user()->isRecruiter() && Auth::user()->recruiter)


@elseif(Auth::user()->isCandidate())


     <a href="{{ route('candidate.meu-perfil') }}" class="menu-item">
        <i class="fas fa-chart-bar"></i> Meu CV
    </a>            @else
<!-- admin role-->
            @endif

</div>
        </div>

<div class="submenu">

 <div class="p-3">

    <a href="#" class="menu-item">
        <i class="fas fa-bookmark"></i> Itens Salvos
    </a>

    <a href="#" class="menu-item">
        <i class="fas fa-calendar-alt"></i> Eventos
    </a>

</div>

<!-- Card Premium -->
                <div class="premium-card">
                    <h6 class="fw-bold mb-2">Nivel do Consultor</h6>
                    <p class="small mb-3">Iniciante</p>
                    <button class="btn-premium">Solicitar Avaliação</button>
                </div>

</div>


<div class="submenu">
 </div>
 </div>


        <!-- Coluna 2 - Conteúdo do Perfil -->
        <div class="col-lg-9">


  <div class="profile-header">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h1 class="h2 fw-bold mb-2" id="profileName">{{ $consultor->full_name }}</h1>
                            <p class="mb-1 opacity-75" id="profileTitle">{{ $consultor->current_title ?? 'Profissional' }}</p>
                            <p class="mb-0 opacity-75">
                                <small>Atualizado em {{ $consultor->updated_at->format('d M Y') }}</small>
                            </p>
                        </div>
                        <div class="col-md-3 text-end">
                            <div class="bg-white text-dark rounded-pill px-3 py-2 d-inline-block me-2">
                                <i class="fas fa-star text-warning me-1"></i>
                                <strong id="profileExperience">{{ $consultor->experience_years ?? '0' }} anos</strong> de experiência
                            </div>

                        </div>
                    </div>
                </div>
<!-- Progresso do CV -->
@php
$columnsConfig = [

    // =========================
    // DADOS PESSOAIS (ALTA)
    // =========================
    'first_name' => [
        'name' => 'Nome',
        'weight' => 4,
        'category' => 'Dados Pessoais'
    ],

    'last_name' => [
        'name' => 'Sobrenome',
        'weight' => 4,
        'category' => 'Dados Pessoais'
    ],

    'date_of_birth' => [
        'name' => 'Data de Nascimento',
        'weight' => 3,
        'category' => 'Dados Pessoais'
    ],

    'gender' => [
        'name' => 'Género',
        'weight' => 2,
        'category' => 'Dados Pessoais'
    ],

    'nationality' => [
        'name' => 'Nacionalidade',
        'weight' => 2,
        'category' => 'Dados Pessoais'
    ],


    // =========================
    // CONTACTOS (ALTA)
    // =========================
    'phone' => [
        'name' => 'Telefone',
        'weight' => 4,
        'category' => 'Contactos'
    ],

    'address' => [
        'name' => 'Endereço',
        'weight' => 2,
        'category' => 'Contactos'
    ],


    // =========================
    // LOCALIZAÇÃO (MÉDIA)
    // =========================
    'province_id' => [
        'name' => 'Província',
        'weight' => 2,
        'category' => 'Localização'
    ],

    'city' => [
        'name' => 'Cidade',
        'weight' => 2,
        'category' => 'Localização'
    ],


    // =========================
    // PERFIL PROFISSIONAL (ALTA)
    // =========================
    'current_title' => [
        'name' => 'Título Profissional',
        'weight' => 5,
        'category' => 'Perfil Profissional'
    ],

    'bio' => [
        'name' => 'Resumo Profissional',
        'weight' => 3,
        'category' => 'Perfil Profissional'
    ],

    'experience_years' => [
        'name' => 'Anos de Experiência',
        'weight' => 4,
        'category' => 'Perfil Profissional'
    ],

    'education_level' => [
        'name' => 'Nível de Educação',
        'weight' => 3,
        'category' => 'Perfil Profissional'
    ],

    'expected_salary' => [
        'name' => 'Expectativa Salarial',
        'weight' => 2,
        'category' => 'Perfil Profissional'
    ],


    // =========================
    // COMPETÊNCIAS (ALTA)
    // =========================
    'skills' => [
        'name' => 'Competências',
        'weight' => 4,
        'category' => 'Competências',
        'type' => 'array'
    ],

    'languages' => [
        'name' => 'Idiomas',
        'weight' => 3,
        'category' => 'Competências',
        'type' => 'array'
    ],


    // =========================
    // PREFERÊNCIAS (BAIXA)
    // =========================
    'preferred_locations' => [
        'name' => 'Localizações Preferidas',
        'weight' => 1,
        'category' => 'Preferências',
        'type' => 'array'
    ],

    'preferred_job_types' => [
        'name' => 'Tipos de Emprego Preferidos',
        'weight' => 1,
        'category' => 'Preferências',
        'type' => 'array'
    ],


    // =========================
    // STATUS (BAIXA)
    // =========================
    'is_active' => [
        'name' => 'Perfil Ativo',
        'weight' => 1,
        'category' => 'Status'
    ],

    'is_available' => [
        'name' => 'Disponível para Trabalho',
        'weight' => 1,
        'category' => 'Status'
    ],
];

    // Inicializar variáveis
    $totalWeight = 0;
    $filledWeight = 0;
    $completionDetails = [];
    $categoryProgress = [];

    if (isset($consultor) && $consultor) {
        foreach ($columnsConfig as $column => $config) {
            $totalWeight += $config['weight'];
            $isFilled = false;
            $value = $consultor->$column;

            // Verificar se o campo está preenchido
            if (isset($config['type']) && $config['type'] === 'array') {
                // Campos do tipo array/JSON
                if (!empty($value)) {
                    if (is_array($value) && count($value) > 0) {
                        $filledWeight += $config['weight'];
                        $isFilled = true;
                    } elseif (is_string($value)) {
                        $decoded = json_decode($value, true);
                        if (is_array($decoded) && count($decoded) > 0) {
                            $filledWeight += $config['weight'];
                            $isFilled = true;
                        }
                    }
                }
            } else {
                // Campos normais
                if (!empty($value)) {
                    $filledWeight += $config['weight'];
                    $isFilled = true;
                }
            }

            // Armazenar detalhes
            $completionDetails[$column] = [
                'name' => $config['name'],
                'filled' => $isFilled,
                'weight' => $config['weight'],
                'category' => $config['category'],
                'value' => $value
            ];

            // Calcular progresso por categoria
            if (!isset($categoryProgress[$config['category']])) {
                $categoryProgress[$config['category']] = [
                    'total' => 0,
                    'filled' => 0,
                    'items' => []
                ];
            }

            $categoryProgress[$config['category']]['total'] += $config['weight'];
            if ($isFilled) {
                $categoryProgress[$config['category']]['filled'] += $config['weight'];
            }
            $categoryProgress[$config['category']]['items'][] = $config['name'];
        }

        $completionPercentage = $totalWeight > 0 ? round(($filledWeight / $totalWeight) * 100) : 0;
    } else {
        $completionPercentage = 0;
        $completionDetails = [];
        $categoryProgress = [];
    }
@endphp

<div class="profile-completion-card">

<div class="paiprofile">

    <!-- Cabeçalho do Progresso -->
    <div class="completion-header">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h4 class="mb-1">Estado do meu perfil</h4>

            </div>
            <div class="text-end">
                <div class="completion-percentage">
                    <span class="percentage-number @if($completionPercentage >= 80) text-success @elseif($completionPercentage >= 50) text-warning @else text-danger @endif">
                        {{ $completionPercentage }}%
                    </span>
                    <div class="percentage-label">Completo</div>
                </div>
            </div>
        </div>

    </div>

 <!-- Barra de Progresso Principal -->
    <div class="completion-progress mb-4">
        <div class="progress" style="height: 12px;">
            <div class="progress-bar
                @if($completionPercentage >= 80) bg-success
                @elseif($completionPercentage >= 50) bg-warning
                @else bg-danger @endif"
                role="progressbar"
                style="width: {{ $completionPercentage }}%"
                aria-valuenow="{{ $completionPercentage }}"
                aria-valuemin="0"
                aria-valuemax="100">
            </div>
        </div>
        <div class="progress-stats mt-2">
            <small class="text-muted">
                <strong>{{ $filledWeight }}/{{ $totalWeight }}</strong> pontos conquistados
                @if($completionPercentage >= 90)
                    - <span class="text-success">Perfil completo e pronto para candidaturas! 🎉</span>
                @elseif($completionPercentage >= 70)
                    - <span class="text-warning">Perfil quase completo. Continue assim! 💪</span>
                @elseif($completionPercentage >= 50)
                    - <span class="text-warning">Perfil moderado. Complete mais dados. 📈</span>
                @else
                    - <span class="text-danger">Perfil básico. Complete seus dados. 🚀</span>
                @endif
            </small>
        </div>
    </div>
    <div class="mt-3">
        <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#completionDetails">
            <i class="fas fa-info-circle me-1"></i> Ver detalhes do preenchimento
        </button>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#documentsModal">
    <i class="fas fa-folder-open"></i> Gerir Documentos
</button>
    </div>
</div>
<div class="collapse mt-2" id="completionDetails">
    <div class="card card-body">
        <h6 class="mb-3">Itens para completar seu perfil:</h6>
        <div class="row">

            <!-- COLUNA 1 -->
            <div class="col-md-6">
                <ul class="list-unstyled">

                    <li class="mb-1">
                        <i class="fas
                            @if(!empty($consultor->first_name) && !empty($consultor->last_name))
                                fa-check text-success
                            @else
                                fa-times text-danger
                            @endif me-2"></i>
                        Nome
                    </li>

                    <li class="mb-1">
                        <i class="fas
                            @if(!empty($consultor->phone))
                                fa-check text-success
                            @else
                                fa-times text-danger
                            @endif me-2"></i>
                        Telefone
                    </li>

                    <li class="mb-1">
                        <i class="fas
                            @if(!empty($consultor->current_title))
                                fa-check text-success
                            @else
                                fa-times text-danger
                            @endif me-2"></i>
                        Título profissional
                    </li>

                    <li class="mb-1">
                        <i class="fas
                            @if(!empty($consultor->experience_years))
                                fa-check text-success
                            @else
                                fa-times text-danger
                            @endif me-2"></i>
                        Anos de experiência
                    </li>

                    <li class="mb-1">
                        <i class="fas
                            @if(!empty($consultor->date_of_birth))
                                fa-check text-success
                            @else
                                fa-times text-danger
                            @endif me-2"></i>
                        Data de nascimento
                    </li>

                </ul>
            </div>




            <!-- COLUNA 2 -->
            <div class="col-md-6">
                <ul class="list-unstyled">

                    <li class="mb-1">
                        <i class="fas
                            @if(!empty($consultor->education_level))
                                fa-check text-success
                            @else
                                fa-times text-danger
                            @endif me-2"></i>
                        Nível de educação
                    </li>

                    <li class="mb-1">
                        <i class="fas
                            @if(!empty($consultor->languages))
                                fa-check text-success
                            @else
                                fa-times text-danger
                            @endif me-2"></i>
                        Idiomas
                    </li>

                    <li class="mb-1">
                        <i class="fas
                            @if(!empty($consultor->skills))
                                fa-check text-success
                            @else
                                fa-times text-danger
                            @endif me-2"></i>
                        Competências
                    </li>

                    <li class="mb-1">
                        <i class="fas
                            @if(!empty($consultor->bio))
                                fa-check text-success
                            @else
                                fa-times text-danger
                            @endif me-2"></i>
                        Resumo profissional
                    </li>

                    <li class="mb-1">
                        <i class="fas
                            @if(!empty($consultor->address))
                                fa-check text-success
                            @else
                                fa-times text-danger
                            @endif me-2"></i>
                        Endereço completo
                    </li>

                </ul>
            </div>

        </div>
    </div>
</div>

<div>







            <!-- Dados Pessoais -->

            <div class="content-card">
                <div class="card-header">
                    <h3 class="card-title">Dados Pessoais</h3>
                    <button class="edit-btn" onclick="editSection('pessoal')">
                        <i class="fas fa-edit me-1"></i> Editar
                    </button>
                </div>
                <div class="card-content">
                    <div class="info-item">
                        <span class="info-label">Nome</span>
                        <span class="info-value" id="displayFullName">{{ $consultor->full_name }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Idade</span>
                        <span class="info-value" id="displayAge">
                            @if($consultor->date_of_birth)
                                {{ $consultor->date_of_birth->age }} anos
                            @else
                                Não fornecida
                            @endif
                        </span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Género</span>
                        <span class="info-value" id="displayGender">{{ $consultor->gender ?? 'Não fornecido' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">País</span>
                        <span class="info-value" id="displayNationality">{{ $consultor->nationality ?? 'Não fornecida' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Endereço</span>
                        <span class="info-value" id="displayLocation">
                            @if($consultor->province)
                                {{ $consultor->city }}, {{ $consultor->province->name }}
                            @else
                                {{ $consultor->city ?? 'Não especificada' }}
                            @endif
                        </span>
                    </div>
                </div>
            </div>

            <!-- Contactos -->
            <div class="content-card">
                <div class="card-header">
                    <h3 class="card-title">Contactos</h3>
                    <button class="edit-btn" onclick="editSection('contactos')">
                        <i class="fas fa-edit me-1"></i> Editar
                    </button>
                </div>
                <div class="card-content">
                    <div class="info-item">
                        <span class="info-label">E-mail</span>
                        <span class="info-value" id="displayEmail">{{ $consultor->user->email ?? 'N/A' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Telefone</span>
                        <span class="info-value" id="displayPhone">{{ $consultor->phone ?? 'Não fornecido' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Endereço</span>
                        <span class="info-value" id="displayAddress">{{ $consultor->address ?? 'Não fornecido' }}</span>
                    </div>
                </div>
            </div>

            <!-- Perfil Profissional -->
            <div class="content-card">
                <div class="card-header">
                    <h3 class="card-title">Perfil Profissional</h3>
                    <button class="edit-btn" onclick="editSection('perfil')">
                        <i class="fas fa-edit me-1"></i> Editar
                    </button>
                </div>
                <div class="card-content">
                    <div class="info-item">
                        <span class="info-label">Título</span>
                        <span class="info-value" id="displayCurrentTitle">{{ $consultor->current_title ?? 'Não definido' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Resumo</span>
                        <span class="info-value" id="displayBio">{{ $consultor->bio ?? 'Nenhum resumo adicionado.' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Remuneração</span>
                        <span class="info-value" id="displayExpectedSalary">
                            @if($consultor->expected_salary)
                                {{ number_format($consultor->expected_salary, 0, ',', '.') }} MZN
                            @else
                                Não definida
                            @endif
                        </span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Experiência</span>
                        <span class="info-value" id="displayExperienceYears">{{ $consultor->experience_years ?? '0' }} anos</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Habilitação</span>
                        <span class="info-value" id="displayEducationLevel">{{ $consultor->education_level ?? 'Não definido' }}</span>
                    </div>
                </div>
            </div>

            <!-- Experiência Profissional -->
            <div class="content-card">
                <div class="card-header">
                    <h3 class="card-title">Experiência Profissional</h3>
                    <button class="edit-btn" onclick="openSkillsModal()">
                        <i class="fas fa-plus me-1"></i> Adicionar
                    </button>
                </div>
                <div class="card-content">
                    <div id="skillsContainer">
                        @php
                            $skillsArray = [];
                            if ($consultor->skills) {
                                if (is_array($consultor->skills)) {
                                    $skillsArray = $consultor->skills;
                                } elseif (is_string($consultor->skills)) {
                                    $decoded = json_decode($consultor->skills, true);
                                    $skillsArray = is_array($decoded) ? $decoded : [];
                                }
                            }

                            $technicalSkills = array_filter($skillsArray, function($skill) {
                                return ($skill['type'] ?? 'technical') === 'technical';
                            });
                        @endphp

                        @if(count($technicalSkills) > 0)
                            @foreach($technicalSkills as $index => $skill)
                                <div class="skill-item mb-3">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="mb-1">{{ $skill['name'] ?? 'Experiência não especificada' }}</h6>
                                            <small class="text-muted">
                                                Nível: {{ $skill['level'] }} |
                                                {{ $skill['years'] ?? '0' }} ano(s) de experiência
                                            </small>
                                        </div>
                                        <div class="item-actions">
                                            <button class="btn btn-sm btn-outline-primary me-1" onclick="openSkillsModal({{ $index }})">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger" onclick="deleteSkill({{ $index }})">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    @if(!empty($skill['description']))
                                        <p class="mt-2 mb-0 small text-muted">{{ $skill['description'] }}</p>
                                    @endif
                                </div>
                            @endforeach
                        @else
                            <div class="empty-section">
                                <i class="fas fa-code"></i>
                                <p>Nenhuma experiência adicionada.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Educação -->
            <div class="content-card">
                <div class="card-header">
                    <h3 class="card-title">Educação</h3>
                    <button class="edit-btn" onclick="openEducationModal()">
                        <i class="fas fa-plus me-1"></i> Adicionar
                    </button>
                </div>
                <div class="card-content">
                    <div id="educationsContainer">
                        @php
                            $educationsArray = [];
                            if ($consultor->preferred_job_types) {
                                if (is_array($consultor->preferred_job_types)) {
                                    $educationsArray = $consultor->preferred_job_types;
                                } elseif (is_string($consultor->preferred_job_types)) {
                                    $decoded = json_decode($consultor->preferred_job_types, true);
                                    $educationsArray = is_array($decoded) ? $decoded : [];
                                }
                            }
                        @endphp

                        @if(count($educationsArray) > 0)
                            @foreach($educationsArray as $index => $education)
                                <div class="skill-item mb-3">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <div class="flex-grow-1">
                                            <h5 class="fw-bold mb-1">{{ $education['degree'] ?? 'Grau não especificado' }}</h5>
                                            <p class="text-primary mb-2">{{ $education['institution'] ?? 'Instituição não especificada' }}</p>
                                            <span class="badge-custom">
                                                {{ \Carbon\Carbon::parse($education['start_date'])->format('m/Y') }} -
                                                {{ $education['is_current'] ? 'Cursando' : (\Carbon\Carbon::parse($education['end_date'])->format('m/Y') ?? 'N/A') }}
                                            </span>
                                        </div>
                                        <div class="item-actions">
                                            <button class="btn btn-sm btn-outline-primary me-1" onclick="openEducationModal({{ $index }})">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger" onclick="deleteEducation({{ $index }})">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    @if($education['field'] || $education['description'])
                                        <div class="mt-2">
                                            @if($education['field'])
                                                <p class="text-muted mb-1"><strong>Área:</strong> {{ $education['field'] }}</p>
                                            @endif
                                            @if($education['description'])
                                                <p class="mb-0">{{ $education['description'] }}</p>
                                            @endif
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        @else
                            <div class="empty-section">
                                <i class="fas fa-graduation-cap"></i>
                                <p>Nenhuma formação académica adicionada.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Idiomas -->
            <div class="content-card">
                <div class="card-header">
                    <h3 class="card-title">Idiomas</h3>
                    <button class="edit-btn" onclick="openLanguageModal()">
                        <i class="fas fa-plus me-1"></i> Adicionar
                    </button>
                </div>
                <div class="card-content">
                    <div id="languagesContainer">
                        @php
                            $languagesArray = [];
                            if ($consultor->languages) {
                                if (is_array($consultor->languages)) {
                                    $languagesArray = $consultor->languages;
                                } elseif (is_string($consultor->languages)) {
                                    $decoded = json_decode($consultor->languages, true);
                                    $languagesArray = is_array($decoded) ? $decoded : [];
                                }
                            }
                        @endphp

                        @if(count($languagesArray) > 0)
                            <div class="row">
                                @foreach($languagesArray as $index => $language)
                                    <div class="col-md-6 mb-3">
                                        <div class="skill-item">
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <h6 class="fw-bold mb-0">{{ $language['name'] ?? 'Idioma' }}</h6>
                                                <div class="item-actions">
                                                    <button class="btn btn-sm btn-outline-primary me-1" onclick="openLanguageModal({{ $index }})">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <button class="btn btn-sm btn-outline-danger" onclick="deleteLanguage({{ $index }})">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="small">
                                                <div class="d-flex justify-content-between mb-1">
                                                    <span>Leitura:</span>
                                                    <span class="fw-semibold">{{ $language['leitura'] }}</span>
                                                </div>
                                                <div class="d-flex justify-content-between mb-1">
                                                    <span>Escrita:</span>
                                                    <span class="fw-semibold">{{ $language['escrita'] }}</span>
                                                </div>
                                                <div class="d-flex justify-content-between">
                                                    <span>Fala:</span>
                                                    <span class="fw-semibold">{{ $language['fala'] }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="empty-section">
                                <i class="fas fa-language"></i>
                                <p>Nenhum idioma adicionado.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- MANTER TODOS OS MODAIS ORIGINAIS EXATAMENTE COMO ESTAVAM -->
<!-- Modal para Edição de Dados Pessoais -->
<div class="modal fade" id="editPessoalModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Editar Dados Pessoais</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editPessoalForm">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Nome *</label>
                            <input type="text" name="first_name" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Sobrenome *</label>
                            <input type="text" name="last_name" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Data de Nascimento *</label>
                            <input type="date" name="date_of_birth" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Género *</label>
                            <select name="gender" class="form-select" required>
                                <option value="">Selecionar...</option>
                                <option value="Masculino">Masculino</option>
                                <option value="Feminino">Feminino</option>
                                <option value="Outro">Outro</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">País *</label>
                            <input type="text"
                                   name="nationality"
                                   id="editNationality"
                                   class="form-control"
                                   list="countryList"
                                   placeholder="Digite ou selecione um país"
                                   required>
                            <datalist id="countryList">
                                @foreach($countries as $country)
                                    <option value="{{ $country->name }}">
                                @endforeach
                            </datalist>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Província *</label>
                            <select name="province_id" id="editProvince" class="form-select" required>
                                <option value="">Primeiro selecione um país</option>
                            </select>
                        </div>
                        <input type="hidden" name="country_code" id="countryCode">
                        <input type="hidden" name="city" id="city" class="form-control">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" onclick="updatePessoal()">Guardar Alterações</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal para Edição de Contactos -->
<div class="modal fade" id="editContactosModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Editar Contactos</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editContactosForm">
                    @csrf
                    <div class="row">
                        <div class="col-12 mb-3">
                            <label class="form-label">E-mail *</label>
                            <input type="email" name="email" class="form-control" required>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Telefone *</label>
                            <input type="text" name="phone" class="form-control" required>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Endereço Completo *</label>
                            <textarea name="address" class="form-control" rows="3" required></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" onclick="updateContactos()">Guardar Alterações</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal para Edição de Perfil Profissional -->
<div class="modal fade" id="editPerfilModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Editar Perfil Profissional</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editPerfilForm" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-12 mb-3">
                            <label class="form-label">Título Profissional *</label>
                            <input type="text"
                                   name="current_title"
                                   class="form-control"
                                   list="consultorTypes"
                                   placeholder="Esolha o tipo de Consultor"
                                   required>
                            <datalist id="consultorTypes">
                                <option value="Consultor de Gestão">
                                <option value="Consultor Financeiro">
                                <option value="Consultor de TI">
                                <option value="Consultor de Marketing Digital">
                                <option value="Consultor de Recursos Humanos">
                                <option value="Consultor Comercial">
                                <option value="Consultor Estratégico">
                                <option value="Consultor de Vendas">
                                <option value="Consultor de Processos">
                                <option value="Consultor de Qualidade">
                                <option value="Consultor de Inovação">
                                <option value="Consultor de Transformação Digital">
                                <option value="Consultor Organizacional">
                                <option value="Consultor de Compliance">
                                <option value="Consultor Fiscal">
                                <option value="Consultor Contábil">
                                <option value="Consultor de Investimentos">
                                <option value="Consultor de Segurança">
                                <option value="Consultor de Cibersegurança">
                                <option value="Consultor de Cloud">
                                <option value="Consultor de SAP">
                                <option value="Consultor de CRM">
                                <option value="Consultor de ERP">
                                <option value="Consultor de SEO">
                                <option value="Consultor de Mídias Sociais">
                                <option value="Consultor de Branding">
                                <option value="Consultor de Comunicação">
                                <option value="Consultor de Treinamento">
                                <option value="Consultor de Desenvolvimento">
                                <option value="Consultor de Carreira">
                                <option value="Consultor de Liderança">
                                <option value="Consultor de Coaching">
                                <option value="Consultor de Mentoria">
                                <option value="Consultor de Sustentabilidade">
                                <option value="Consultor Ambiental">
                                <option value="Consultor de Energia">
                                <option value="Consultor de Logística">
                                <option value="Consultor de Supply Chain">
                                <option value="Consultor de Projetos">
                                <option value="Consultor de PMO">
                                <option value="Consultor de Agile">
                                <option value="Consultor de Scrum">
                                <option value="Consultor de Lean">
                                <option value="Consultor de Six Sigma">
                                <option value="Consultor de Auditoria">
                                <option value="Consultor de Riscos">
                                <option value="Consultor Jurídico">
                                <option value="Consultor Imobiliário">
                                <option value="Consultor de Varejo">
                                <option value="Consultor de E-commerce">
                                <option value="Consultor de Customer Success">
                                <option value="Consultor de Experiência do Usuário (UX)">
                                <option value="Consultor de Design Thinking">
                                <option value="Consultor de Internacionalização">
                                <option value="Consultor de Exportação">
                                <option value="Consultor de Franchising">
                                <option value="Consultor de Startups">
                                <option value="Consultor de Venture Capital">
                                <option value="Consultor de M&A">
                                <option value="Consultor de Reestruturação">
                                <option value="Consultor de Turnaround">
                                <option value="Consultor de Sucessão">
                                <option value="Consultor de Governança">
                            </datalist>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Resumo Profissional</label>
                            <textarea name="bio" class="form-control" rows="4" placeholder="Descreva brevemente a sua experiência e competências..."></textarea>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Expectativa Salarial</label>
                            <select name="expected_salary" class="form-select">
                                <option value="">Escolher expectativa salarial</option>
                                <option value="8000">9.560 - 18000 MZN</option>
                                <option value="18500">19.000 - 30.000 MZN</option>
                                <option value="29000">31.000 - 40.000 MZN</option>
                                <option value="39500">41.000 - 50.000 MZN</option>
                                <option value="50000">51.000 - 60.000 MZN</option>
                                <option value="60500">61.000 - 70.000 MZN</option>
                                <option value="71000">71.000 - 80.000 MZN</option>
                                <option value="81500">81.000 - 90.000 MZN</option>
                                <option value="92000">91.000 - 100.000 MZN</option>
                                <option value="102500">Mais de 100.000 MZN</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Anos de Experiência *</label>
                            <input type="number" name="experience_years" class="form-control" min="0" max="50" required>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Nível de Educação</label>
                            <select name="education_level" class="form-select">
                                <option value="">Selecionar nível...</option>
                                <option value="Ensino Médio">Ensino Médio</option>
                                <option value="Técnico-Profissional">Técnico-Profissional</option>
                                <option value="Licenciatura">Licenciatura</option>
                                <option value="Mestrado">Mestrado</option>
                                <option value="Doutoramento">Doutoramento</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" onclick="updatePerfil()">Guardar Alterações</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal para Skills/Habilidades -->
<div class="modal fade" id="skillsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="skillsModalTitle">Adicionar</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="skillsForm">
                    @csrf
                    <input type="hidden" id="skillIndex" value="">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Empresa *</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Cargo *</label>
                          <select name="level" class="form-select" required>
    <option value="">Selecionar Cargo...</option>

    <!-- Direção e Gestão -->
    <optgroup label="Direção e Gestão">
        <option value="CEO / Diretor Geral">CEO / Diretor Geral</option>
        <option value="Diretor Administrativo">Diretor Administrativo</option>
        <option value="Diretor Financeiro">Diretor Financeiro</option>
        <option value="Diretor de Recursos Humanos">Diretor de Recursos Humanos</option>
        <option value="Diretor Comercial">Diretor Comercial</option>
        <option value="Diretor de Marketing">Diretor de Marketing</option>
        <option value="Diretor de Operações">Diretor de Operações</option>
        <option value="Gerente Geral">Gerente Geral</option>
        <option value="Gerente de Unidade">Gerente de Unidade</option>
        <option value="Gestor de Projetos">Gestor de Projetos</option>
    </optgroup>

    <!-- Administração e Finanças -->
    <optgroup label="Administração e Finanças">
        <option value="Administrador">Administrador</option>
        <option value="Contabilista">Contabilista</option>
        <option value="Gestor Financeiro">Gestor Financeiro</option>
        <option value="Analista Financeiro">Analista Financeiro</option>
        <option value="Técnico de Contabilidade">Técnico de Contabilidade</option>
        <option value="Auditor">Auditor</option>
        <option value="Assistente Administrativo">Assistente Administrativo</option>
        <option value="Tesoureiro">Tesoureiro</option>
        <option value="Controller Financeiro">Controller Financeiro</option>
    </optgroup>

    <!-- Recursos Humanos -->
    <optgroup label="Recursos Humanos">
        <option value="Gestor de RH">Gestor de RH</option>
        <option value="Recrutador">Recrutador</option>
        <option value="Técnico de Recrutamento">Técnico de Recrutamento</option>
        <option value="Especialista em Formação">Especialista em Formação</option>
        <option value="Consultor de RH">Consultor de RH</option>
        <option value="Assistente de RH">Assistente de RH</option>
        <option value="Técnico de Folha de Pagamento">Técnico de Folha de Pagamento</option>
    </optgroup>

    <!-- Tecnologia da Informação -->
    <optgroup label="Tecnologia da Informação (TI)">
        <option value="Analista de Sistemas">Analista de Sistemas</option>
        <option value="Programador">Programador</option>
        <option value="Desenvolvedor Web">Desenvolvedor Web</option>
        <option value="Desenvolvedor Mobile">Desenvolvedor Mobile</option>
        <option value="Administrador de Sistemas">Administrador de Sistemas</option>
        <option value="Administrador de Redes">Administrador de Redes</option>
        <option value="Técnico de Informática">Técnico de Informática</option>
        <option value="Especialista em Segurança da Informação">Especialista em Segurança da Informação</option>
        <option value="Suporte Técnico">Suporte Técnico</option>
    </optgroup>

    <!-- Comercial e Vendas -->
    <optgroup label="Comercial e Vendas">
        <option value="Gerente Comercial">Gerente Comercial</option>
        <option value="Supervisor de Vendas">Supervisor de Vendas</option>
        <option value="Vendedor">Vendedor</option>
        <option value="Representante Comercial">Representante Comercial</option>
        <option value="Consultor de Vendas">Consultor de Vendas</option>
        <option value="Promotor de Vendas">Promotor de Vendas</option>
        <option value="Key Account Manager">Key Account Manager</option>
    </optgroup>

    <!-- Marketing e Comunicação -->
    <optgroup label="Marketing e Comunicação">
        <option value="Gestor de Marketing">Gestor de Marketing</option>
        <option value="Analista de Marketing">Analista de Marketing</option>
        <option value="Especialista em Marketing Digital">Especialista em Marketing Digital</option>
        <option value="Social Media">Social Media</option>
        <option value="Designer Gráfico">Designer Gráfico</option>
        <option value="Copywriter">Copywriter</option>
        <option value="Gestor de Conteúdos">Gestor de Conteúdos</option>
    </optgroup>

    <!-- Logística e Operações -->
    <optgroup label="Logística e Operações">
        <option value="Gestor de Logística">Gestor de Logística</option>
        <option value="Supervisor de Operações">Supervisor de Operações</option>
        <option value="Coordenador de Armazém">Coordenador de Armazém</option>
        <option value="Técnico de Logística">Técnico de Logística</option>
        <option value="Motorista">Motorista</option>
        <option value="Operador de Máquinas">Operador de Máquinas</option>
    </optgroup>

    <!-- Educação e Formação -->
    <optgroup label="Educação e Formação">
        <option value="Professor">Professor</option>
        <option value="Formador">Formador</option>
        <option value="Coordenador Pedagógico">Coordenador Pedagógico</option>
        <option value="Tutor">Tutor</option>
        <option value="Instrutor Técnico">Instrutor Técnico</option>
    </optgroup>

    <!-- Saúde -->
    <optgroup label="Saúde">
        <option value="Médico">Médico</option>
        <option value="Enfermeiro">Enfermeiro</option>
        <option value="Técnico de Saúde">Técnico de Saúde</option>
        <option value="Farmacêutico">Farmacêutico</option>
        <option value="Assistente Hospitalar">Assistente Hospitalar</option>
    </optgroup>

    <!-- Outros -->
    <optgroup label="Outros">
        <option value="Consultor">Consultor</option>
        <option value="Assistente">Assistente</option>
        <option value="Estagiário">Estagiário</option>
        <option value="Freelancer">Freelancer</option>
        <option value="Outro">Outro</option>
    </optgroup>
</select>

                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Anos de Trabalho *</label>
                            <input type="number" name="years" class="form-control" min="0" max="50" required>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" onclick="saveSkill()">Guardar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal para Educação -->
<div class="modal fade" id="educationModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="educationModalTitle">Adicionar Formação Académica</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="educationForm">
                    @csrf
                    <input type="hidden" id="educationIndex" value="">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Instituição *</label>
                            <input type="text"
                                   name="institution"
                                   id="institution"
                                   class="form-control"
                                   list="InstitutoList"
                                   placeholder="Digite ou selecione um Instituo"
                                   required>
                            <datalist id="InstitutoList">
                                @foreach($instituto as $instituto)
                                    <option value="{{ $instituto['name'] }}">
                                @endforeach
                            </datalist>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Grau Académico *</label>
                            <select name="degree" class="form-select" required>
                                <option value="">Selecionar...</option>
                                <option value="Ensino Médio">Ensino Médio</option>
                                <option value="Técnico-Profissional">Técnico-Profissional</option>
                                <option value="Licenciatura">Licenciatura</option>
                                <option value="Mestrado">Mestrado</option>
                                <option value="Doutoramento">Doutoramento</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Área de Estudo</label>
                            <input type="text" name="field" class="form-control" list="estudoList" placeholder="Digite ou selecione uma area de estudo" required>
                            <datalist id="estudoList">
                                @foreach($categoria as $categoria)
                                    <option value="{{ $categoria['name'] }}">
                                @endforeach
                            </datalist>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Data de Início *</label>
                            <input type="month" name="start_date" class="form-control" required>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Data de Fim</label>
                            <input type="month" name="end_date" class="form-control">
                            <div class="form-check mt-2">
                                <input class="form-check-input" type="checkbox" name="is_current" id="eduCurrent">
                                <label class="form-check-label" for="eduCurrent">
                                    A cursar
                                </label>
                            </div>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Descrição</label>
                            <textarea name="description" class="form-control" rows="3" placeholder="Disciplinas relevantes, projetos, etc..."></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" onclick="saveEducation()">Guardar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal para Idiomas -->
<div class="modal fade" id="languageModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="languageModalTitle">Adicionar Idioma</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="languageForm">
                    @csrf
                    <input type="hidden" id="languageIndex" value="">
                    <div class="row">
                        <div class="col-12 mb-3">
                            <label class="form-label">Idioma *</label>
                            <select name="name" class="form-select" required>
                                <option value="">Selecionar...</option>
                                <option value="Português">Português</option>
                                <option value="Inglês">Inglês</option>
                                <option value="Francês">Francês</option>
                                <option value="Espanhol">Espanhol</option>
                                <option value="Mandarin">Mandarin</option>
                                <option value="Hindi">Hindi</option>
                                <option value="Árabe">Árabe</option>
                                <option value="Alemão">Alemão</option>
                                <option value="Italiano">Italiano</option>
                                <option value="Japonês">Japonês</option>
                            </select>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Leitura *</label>
                            <select name="leitura" class="form-select" required>
                                <option value="">Selecionar...</option>
                                <option value="basic">Básico</option>
                                <option value="intermediate">Intermediário</option>
                                <option value="advanced">Avançado</option>
                                <option value="fluent">Fluente</option>
                                <option value="native">Nativo</option>
                            </select>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Escrita *</label>
                            <select name="escrita" class="form-select" required>
                                <option value="">Selecionar...</option>
                                <option value="basic">Básico</option>
                                <option value="intermediate">Intermediário</option>
                                <option value="advanced">Avançado</option>
                                <option value="fluent">Fluente</option>
                                <option value="native">Nativo</option>
                            </select>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Fala *</label>
                            <select name="fala" class="form-select" required>
                                <option value="">Selecionar...</option>
                                <option value="basic">Básico</option>
                                <option value="intermediate">Intermediário</option>
                                <option value="advanced">Avançado</option>
                                <option value="fluent">Fluente</option>
                                <option value="native">Nativo</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" onclick="saveLanguage()">Guardar</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="documentsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Documentos do Consultor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                @foreach($documentTypes as $type)
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="mb-0">{{ $type->name }}</h6>

                            <button class="btn btn-sm btn-primary"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#uploadType{{ $type->id }}">
                                + Adicionar
                            </button>
                        </div>

                        {{-- FORM DE UPLOAD --}}
                        <div class="collapse mb-2" id="uploadType{{ $type->id }}">
                            <form action="{{ route('candidate.document.upload') }}"
                                  method="POST" enctype="multipart/form-data">
                                @csrf

                                <input type="hidden" name="candidate_id" value="{{ $candidate->id }}">
                                <input type="hidden" name="document_type_id" value="{{ $type->id }}">

                                <input type="file" name="document" class="form-control mb-2" required>

                                <label class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" name="auto_update_profile" value="1">
                                    <span class="form-check-label">
                                        Atualizar perfil automaticamente
                                    </span>
                                </label>

                                <button type="submit" class="btn btn-success btn-sm">
                                    Enviar
                                </button>
                            </form>
                        </div>

                        {{-- LISTA DE DOCUMENTOS --}}
                        @foreach($candidate->documents->where('document_type_id', $type->id) as $doc)
                            <div class="d-flex justify-content-between align-items-center border rounded px-2 py-1 mb-1">
                                <a href="{{ asset('storage/'.$doc->file_path) }}" target="_blank">
                                    {{ $doc->file_name }}
                                </a>

                                <form method="POST" action="{{ route('candidate.document.delete', $doc->id) }}">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-sm btn-danger">❌</button>
                                </form>
                            </div>
                        @endforeach
                    </div>
                @endforeach

            </div>

        </div>
    </div>
</div>



<!-- Campo hidden para armazenar os dados -->
<input type="hidden" name="skills" id="skillsData" value="{{ json_encode($consultor->skills ?? []) }}">




@push('scripts')
<script>
const apiBase = "{{ url('/api') }}";
// Variável global para armazenar dados do consultor
// Variáveis globais para armazenar dados temporários
let currentLanguages = [];
let currentLicenses = [];
let consultorData = @json($consultor);
let userData = @json($consultor->user ?? []);
let currentSkills = [];
const countryMap = {!! json_encode($countries->pluck('id', 'name')) !!};



async function loadDynamicSections() {
    try {
        await loadSectionData();

        // Renderizar cada seção
        renderSkills();
        renderEducations();
        renderLanguages();

    } catch (error) {
        console.error('Erro ao carregar seções dinâmicas:', error);
    }
}

// Carregar dados da API
async function loadSectionData() {
    try {
        const candidateId = {{ $consultor->id }};

        // Fazer requests em paralelo
        const [skillsRes, educationsRes, languagesRes] = await Promise.all([
            fetch(`{{ route('candidate.skills', ['candidateId' => $consultor->id]) }}`).then(handleApiResponse).catch(() => []),
            fetch(`{{ route('candidate.educations', ['candidateId' => $consultor->id]) }}`).then(handleApiResponse).catch(() => []),
            fetch(`{{ route('candidate.languages', ['candidateId' => $consultor->id]) }}`).then(handleApiResponse).catch(() => [])
        ]);

        // Processar respostas
        currentSkills = Array.isArray(skillsRes) ? skillsRes : [];
        currentEducations = Array.isArray(educationsRes) ? educationsRes : [];
        currentLanguages = Array.isArray(languagesRes) ? languagesRes : [];

        console.log('Dados carregados:', {
            skills: currentSkills,
            educations: currentEducations,
            languages: currentLanguages
        });

    } catch (error) {
        console.error('Erro ao carregar dados:', error);
        currentSkills = [];
        currentEducations = [];
        currentLanguages = [];
    }
}

// Função auxiliar para lidar com respostas da API
async function handleApiResponse(response) {
    if (!response.ok) {
        console.warn('API response not OK:', response.status, response.statusText);
        return [];
    }

    const contentType = response.headers.get('content-type');
    if (!contentType || !contentType.includes('application/json')) {
        console.warn('Response is not JSON:', contentType);
        return [];
    }

    try {
        return await response.json();
    } catch (error) {
        console.warn('Error parsing JSON:', error);
        return [];
    }
}
// ==================== FUNÇÕES DE RENDERIZAÇÃO ====================

function renderSkills() {
    const container = document.getElementById('skillsContainer');
    if (!container) return;

    if (!Array.isArray(currentSkills) || currentSkills.length === 0) {
        container.innerHTML = `
            <p class="text-muted text-center py-4">
                <i class="fas fa-briefcase fa-2x mb-3 d-block"></i>
                Nenhuma experiência profissional adicionada.
            </p>
        `;
        return;
    }

    let skillsHTML = '';
    currentSkills.forEach((skill, index) => {
        skillsHTML += `
            <div class="skill-item">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h6 class="fw-bold mb-0">${skill.name || 'Empresa não especificada'}</h6>
                    <span class="badge-custom">${skill.level}</span>
                </div>
                <p class="text-muted mb-2">${skill.years || '0'} ano(s) de experiência</p>
                ${skill.description ? `<p class="mb-2">${skill.description}</p>` : ''}
                <div class="mt-2">
                    <button class="btn btn-sm btn-outline-primary me-1" onclick="openSkillsModal(${index})">
                        <i class="fas fa-edit"></i> Editar
                    </button>
                    <button class="btn btn-sm btn-outline-danger" onclick="deleteSkill(${index})">
                        <i class="fas fa-trash"></i> Excluir
                    </button>
                </div>
            </div>
        `;
    });

    container.innerHTML = skillsHTML;
}

function renderEducations() {
    const container = document.getElementById('educationsContainer');
    if (!container) return;

    console.log('🔍 DEBUG renderEducations - currentEducations:', currentEducations);
    console.log('🔍 DEBUG - Tipo:', typeof currentEducations);
    console.log('🔍 DEBUG - É array?', Array.isArray(currentEducations));
    console.log('🔍 DEBUG - Length:', currentEducations?.length);

    if (!Array.isArray(currentEducations) || currentEducations.length === 0) {
        console.log('🔍 DEBUG - Array vazio ou não é array');
        container.innerHTML = `
            <p class="text-muted text-center py-4">
                <i class="fas fa-graduation-cap fa-2x mb-3 d-block"></i>
                Nenhuma formação académica adicionada.
            </p>
        `;
        return;
    }

    console.log('🔍 DEBUG - Vamos renderizar', currentEducations.length, 'educações');

    let educationsHTML = '';
    currentEducations.forEach((education, index) => {
        console.log(`🔍 DEBUG - Education ${index}:`, education);

        const startDate = education.start_date ? new Date(education.start_date).toLocaleDateString('pt-BR', {month: '2-digit', year: 'numeric'}) : '';
        const endDate = education.is_current ? 'Cursando' :
                       (education.end_date ? new Date(education.end_date).toLocaleDateString('pt-BR', {month: '2-digit', year: 'numeric'}) : 'N/A');

        educationsHTML += `
            <div class="education-item">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <h5 class="fw-bold mb-1">${education.degree || 'Grau não especificado'}</h5>
                    <span class="badge-custom">
                        ${startDate} - ${endDate}
                    </span>
                </div>
                <p class="text-primary mb-2">${education.institution || 'Instituição não especificada'}</p>
                ${education.field ? `<p class="text-muted mb-2">${education.field}</p>` : ''}
                ${education.description ? `<p class="mb-2">${education.description}</p>` : ''}
                <div class="mt-2">
                    <button class="btn btn-sm btn-outline-primary me-1" onclick="openEducationModal(${index})">
                        <i class="fas fa-edit"></i> Editar
                    </button>
                    <button class="btn btn-sm btn-outline-danger" onclick="deleteEducation(${index})">
                        <i class="fas fa-trash"></i> Excluir
                    </button>
                </div>
            </div>
        `;
    });

    console.log('🔍 DEBUG - HTML gerado:', educationsHTML);
    container.innerHTML = educationsHTML;
    console.log('✅ Educations renderizados');
}

function renderLanguages() {
    const container = document.getElementById('languagesContainer');
    if (!container) return;

    if (!Array.isArray(currentLanguages) || currentLanguages.length === 0) {
        container.innerHTML = `
            <p class="text-muted text-center py-4">
                <i class="fas fa-language fa-2x mb-3 d-block"></i>
                Nenhum idioma adicionado.
            </p>
        `;
        return;
    }

    let languagesHTML = '<div class="row">';
    currentLanguages.forEach((language, index) => {
        languagesHTML += `
            <div class="col-md-6 mb-3">
                <div class="language-item">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="fw-bold mb-0">${language.name || 'Idioma'}</h6>
                        <div>
                            <button class="btn btn-sm btn-outline-primary me-1" onclick="openLanguageModal(${index})">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger" onclick="deleteLanguage(${index})">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                    <div class="small">
                        <div class="d-flex justify-content-between mb-1">
                            <span>Leitura:</span>
                            <span class="fw-semibold">${language.leitura}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-1">
                            <span>Escrita:</span>
                            <span class="fw-semibold">${language.escrita}</span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span>Fala:</span>
                            <span class="fw-semibold">${language.fala}</span>
                        </div>
                    </div>
                </div>
            </div>
        `;
    });
    languagesHTML += '</div>';

    container.innerHTML = languagesHTML;
}

// ==================== FUNÇÕES DE SALVAR ====================

async function saveSkill() {
    const form = document.getElementById('skillsForm');
    if (!form) return;

    const formData = new FormData(form);
    const index = document.getElementById('skillIndex').value;

    const skillData = {
        name: formData.get('name'),
        level: formData.get('level'),
        years: parseInt(formData.get('years')) || 0,
        description: formData.get('description') || ''
    };

    if (!Array.isArray(currentSkills)) {
        currentSkills = [];
    }

    if (index === '') {
        currentSkills.push(skillData);
    } else {
        currentSkills[index] = skillData;
    }

    try {
        const response = await fetch('{{ route("candidate.skills.update") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                skills: currentSkills
            })
        });

        const result = await response.json();

        if (result.success) {
            const modal = bootstrap.Modal.getInstance(document.getElementById('skillsModal'));
            if (modal) modal.hide();
            await loadDynamicSections();
            showAlert('Experiência salva com sucesso!', 'success');
        } else {
            showAlert(result.message || 'Erro ao salvar experiência', 'error');
        }

    } catch (error) {
        console.error('Erro ao salvar experiência:', error);
        showAlert('Erro de conexão ao salvar experiência', 'error');
    }
}

async function saveEducation() {
    const form = document.getElementById('educationForm');
    if (!form) return;

    const formData = new FormData(form);
    const index = document.getElementById('educationIndex').value;

    const educationData = {
        institution: formData.get('institution'),
        degree: formData.get('degree'),
        field: formData.get('field'),
        start_date: formData.get('start_date'),
        end_date: formData.get('end_date'),
        is_current: formData.get('is_current') === 'on',
        description: formData.get('description') || ''
    };

    if (!Array.isArray(currentEducations)) {
        currentEducations = [];
    }

    if (index === '') {
        currentEducations.push(educationData);
    } else {
        currentEducations[index] = educationData;
    }

    try {
        const response = await fetch('{{ route("candidate.educations.update") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                educations: currentEducations
            })
        });

        const result = await response.json();

        if (result.success) {
            const modal = bootstrap.Modal.getInstance(document.getElementById('educationModal'));
            if (modal) modal.hide();
            await loadDynamicSections();
            showAlert('Formação académica salva com sucesso!', 'success');
        } else {
            showAlert(result.message || 'Erro ao salvar formação', 'error');
        }

    } catch (error) {
        console.error('Erro ao salvar formação:', error);
        showAlert('Erro de conexão ao salvar formação', 'error');
    }
}

async function saveLanguage() {
    const form = document.getElementById('languageForm');
    if (!form) return;

    const formData = new FormData(form);
    const index = document.getElementById('languageIndex').value;

    const languageData = {
        name: formData.get('name'),
        leitura: formData.get('leitura'),
        escrita: formData.get('escrita'),
        fala: formData.get('fala')
    };

    if (!Array.isArray(currentLanguages)) {
        currentLanguages = [];
    }

    if (index === '') {
        currentLanguages.push(languageData);
    } else {
        currentLanguages[index] = languageData;
    }

    try {
        const response = await fetch('{{ route("candidate.languages.update") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                languages: currentLanguages
            })
        });

        const result = await response.json();

        if (result.success) {
            const modal = bootstrap.Modal.getInstance(document.getElementById('languageModal'));
            if (modal) modal.hide();
            await loadDynamicSections();
            showAlert('Idioma salvo com sucesso!', 'success');
        } else {
            showAlert(result.message || 'Erro ao salvar idioma', 'error');
        }

    } catch (error) {
        console.error('Erro ao salvar idioma:', error);
        showAlert('Erro de conexão ao salvar idioma', 'error');
    }
}

// ==================== FUNÇÕES DE EXCLUSÃO ====================

async function deleteSkill(index) {
    if (!confirm('Tem certeza que deseja remover esta experiência?')) return;

    if (Array.isArray(currentSkills) && currentSkills[index]) {
        currentSkills.splice(index, 1);
    }

    try {
        const response = await fetch('{{ route("candidate.skills.update") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                skills: currentSkills
            })
        });

        const result = await response.json();

        if (result.success) {
            await loadDynamicSections();
            showAlert('Experiência removida com sucesso!', 'success');
        } else {
            showAlert('Erro ao remover experiência', 'error');
        }
    } catch (error) {
        console.error('Erro ao remover experiência:', error);
        showAlert('Erro de conexão ao remover experiência', 'error');
    }
}

async function deleteEducation(index) {
    if (!confirm('Tem certeza que deseja remover esta formação?')) return;

    if (Array.isArray(currentEducations) && currentEducations[index]) {
        currentEducations.splice(index, 1);
    }

    try {
        const response = await fetch('{{ route("candidate.educations.update") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                educations: currentEducations
            })
        });

        const result = await response.json();

        if (result.success) {
            await loadDynamicSections();
            showAlert('Formação removida com sucesso!', 'success');
        } else {
            showAlert('Erro ao remover formação', 'error');
        }
    } catch (error) {
        console.error('Erro ao remover formação:', error);
        showAlert('Erro de conexão ao remover formação', 'error');
    }
}

async function deleteLanguage(index) {
    if (!confirm('Tem certeza que deseja remover este idioma?')) return;

    if (Array.isArray(currentLanguages) && currentLanguages[index]) {
        currentLanguages.splice(index, 1);
    }

    try {
        const response = await fetch('{{ route("candidate.languages.update") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                languages: currentLanguages
            })
        });

        const result = await response.json();

        if (result.success) {
            await loadDynamicSections();
            showAlert('Idioma removido com sucesso!', 'success');
        } else {
            showAlert('Erro ao remover idioma', 'error');
        }
    } catch (error) {
        console.error('Erro ao remover idioma:', error);
        showAlert('Erro de conexão ao remover idioma', 'error');
    }
}

// ==================== INICIALIZAÇÃO ====================

// Adicionar ao DOMContentLoaded existente
document.addEventListener('DOMContentLoaded', function() {

    loadDynamicSections();
});


document.getElementById('editProvince').addEventListener('change', function() {
    const provinciaSelecionada = this.value;
    const provinciaTexto = this.options[this.selectedIndex].text;

    // Preencher o input da cidade
    document.getElementById('city').value = provinciaTexto;

    // Ou se quiser apenas o valor
    // document.getElementById('city').value = provinciaSelecionada;
});





// Quando o usuário seleciona um país no datalist
document.getElementById('editNationality').addEventListener('input', function() {
    const selectedCountry = this.value;
    console.log('País selecionado:', selectedCountry); // Debug
    console.log('ID do país:', countryMap[selectedCountry]); // Debug

    if (countryMap[selectedCountry]) {
        // País válido selecionado - usar o ID diretamente do countryMap
        const countryId = countryMap[selectedCountry];
        document.getElementById('countryCode').value = countryId; // Armazena o ID

        // Carregar províncias usando o ID
        loadProvincesByCountry(countryId);
    } else {
        // País não reconhecido ou campo vazio
        document.getElementById('countryCode').value = '';
        document.getElementById('editProvince').innerHTML = '<option value="">Primeiro selecione um país válido</option>';
    }
});

// Função para carregar províncias
async function loadProvincesByCountry(countryId) {
    const provinceSelect = document.getElementById('editProvince');
    console.log('Carregando províncias para país ID:', countryId); // Debug

    if (!countryId) {
        provinceSelect.innerHTML = '<option value="">Primeiro selecione um país</option>';
        return;
    }

    provinceSelect.innerHTML = '<option value="">Carregando províncias...</option>';

    try {
        const response = await  fetch(`${apiBase}/countries/${countryId}/provinces`);
        console.log('Resposta da API:', response); // Debug

        const provinces = await response.json();
        console.log('Províncias recebidas:', provinces); // Debug

        provinceSelect.innerHTML = '<option value="">Selecionar província...</option>';
        provinces.forEach(province => {
            const option = document.createElement('option');
            option.value = province.id;
            option.textContent = province.name;
            provinceSelect.appendChild(option);
        });
    } catch (error) {
        console.error('Erro ao carregar províncias:', error);
        provinceSelect.innerHTML = '<option value="">Erro ao carregar províncias</option>';
    }
}



// Função para abrir o modal correto
function editSection(section) {
    switch(section) {
        case 'pessoal':
            loadPessoalData();
            new bootstrap.Modal(document.getElementById('editPessoalModal')).show();
            break;
        case 'contactos':
            loadContactosData();
            new bootstrap.Modal(document.getElementById('editContactosModal')).show();
            break;
        case 'perfil':
            loadPerfilData();
            new bootstrap.Modal(document.getElementById('editPerfilModal')).show();
            break;
        case 'idiomas':
            alert('Funcionalidade de edição de idiomas em desenvolvimento');
            break;
        case 'licencas':
            alert('Funcionalidade de edição de licenças em desenvolvimento');
            break;
        case 'experiencia':
            alert('Funcionalidade de edição de experiência em desenvolvimento');
            break;
        case 'educacao':
            alert('Funcionalidade de edição de educação em desenvolvimento');
            break;
    }
}

// Carregar dados pessoais no modal
function loadPessoalData() {
    const form = document.getElementById('editPessoalForm');
    form.first_name.value = consultorData.first_name || '';
    form.last_name.value = consultorData.last_name || '';
    form.date_of_birth.value = consultorData.date_of_birth ? consultorData.date_of_birth.split('T')[0] : '';
    form.gender.value = consultorData.gender || '';
    form.nationality.value = consultorData.nationality || '';
    form.province_id.value = consultorData.province_id || '';
    form.city.value = consultorData.city || '';


  // ⭐⭐ ADICIONAR O LISTENER AQUI - quando o modal é aberto ⭐⭐
    const editNationality = document.getElementById('editNationality');
    if (editNationality) {
        editNationality.addEventListener('input', function() {
            const selectedCountry = this.value;
            console.log('País selecionado:', selectedCountry);

            if (countryMap[selectedCountry]) {
                const countryId = countryMap[selectedCountry];
                document.getElementById('countryCode').value = countryId;
                loadProvincesByCountry(countryId);
            } else {
                document.getElementById('countryCode').value = '';
                document.getElementById('editProvince').innerHTML = '<option value="">Primeiro selecione um país válido</option>';
            }
        });
    }}

    // Também adicionar o listener da província aqui
    const editProvince = document.getElementById('editProvince');
    if (editProvince) {
        editProvince.addEventListener('change', function() {
            const provinciaTexto = this.options[this.selectedIndex].text;
            document.getElementById('city').value = provinciaTexto;
        });
    }


// Carregar dados de contactos no modal
function loadContactosData() {
    const form = document.getElementById('editContactosForm');
    form.email.value = userData.email || '';
    form.phone.value = consultorData.phone || '';
    form.address.value = consultorData.address || '';
}

// Carregar dados do perfil profissional no modal
function loadPerfilData() {
    const form = document.getElementById('editPerfilForm');
    form.current_title.value = consultorData.current_title || '';
    form.bio.value = consultorData.bio || '';
    form.expected_salary.value = consultorData.expected_salary || '';
    form.experience_years.value = consultorData.experience_years || '0';
    form.education_level.value = consultorData.education_level || '';
}

// Atualizar dados pessoais via AJAX
async function updatePessoal() {

    const select = document.getElementById('editProvince');
    const cityInput = document.getElementById('city');

    if (select && select.selectedIndex > 0) {
        const textoProvincia = select.options[select.selectedIndex].text;
        cityInput.value = textoProvincia;
    }
    const form = document.getElementById('editPessoalForm');
    const formData = new FormData(form);


 // ✅ DEBUG: CONFIRMA SE CITY ESTÁ A SER ENVIADO
    console.log('CITY ENVIADA:', formData.get('city'));

    try {
        const response = await fetch('{{ route("candidate.update.pessoal") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: formData
        });

        // Log da resposta para debug
        console.log('Status:', response.status);
        console.log('Headers:', response.headers);

        const data = await response.json();
        console.log('Data:', data);

        if (data.success) {
            // Atualizar dados locais
            Object.assign(consultorData, data.data);

            // Atualizar a UI
            updateUI();

            // Fechar modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('editPessoalModal'));
            if (modal) modal.hide();

            // Mostrar mensagem de sucesso
            showAlert('Dados pessoais atualizados com sucesso!', 'success');
        } else {
            // Se success for false mas não caiu no catch
            console.error('Erro do servidor:', data);
            showAlert(data.message || 'Erro ao atualizar dados.', 'error');
        }
    } catch (error) {
        console.error('Erro completo:', error);
        console.error('Mensagem:', error.message);
        showAlert('Erro ao atualizar dados. Verifique o console para detalhes.', 'error');
    }
}

// Atualizar contactos via AJAX
async function updateContactos() {
    const form = document.getElementById('editContactosForm');
    const formData = new FormData(form);

    try {
        const response = await fetch('{{ route("candidate.update.contactos") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: formData
        });

        const data = await response.json();

        if (data.success) {
            Object.assign(consultorData, data.data);
            updateUI();
            bootstrap.Modal.getInstance(document.getElementById('editContactosModal')).hide();
            showAlert('Contactos atualizados com sucesso!', 'success');
        }
    } catch (error) {
        showAlert('Erro ao atualizar contactos.', 'error');
    }
}

// Atualizar perfil profissional via AJAX
async function updatePerfil() {
    const form = document.getElementById('editPerfilForm');
    const formData = new FormData(form);

    try {
        const response = await fetch('{{ route("candidate.update.perfil") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: formData
        });

        const data = await response.json();

        if (data.success) {
            Object.assign(consultorData, data.data);
            updateUI();
            bootstrap.Modal.getInstance(document.getElementById('editPerfilModal')).hide();
            showAlert('Perfil profissional atualizado com sucesso!', 'success');
        }
    } catch (error) {
        showAlert('Erro ao atualizar perfil.', 'error');
    }
}

// Atualizar a interface do usuário



function updateUI() {
    console.log('=== INICIANDO UPDATE UI - DEBUG ===');

    // Lista de todos os IDs que serão atualizados
    const elementsToUpdate = [
        'profileName', 'profileTitle', 'profileExperience',
        'displayFullName', 'displayGender', 'displayNationality', 'displayLocation',
        'displayAge', 'displayEmail', 'displayPhone', 'displayAddress',
        'displayCurrentTitle', 'displayBio', 'displayExperienceYears', 'displayEducationLevel',
        'displayExpectedSalary'
    ];

    // Verificar quais elementos existem antes de tentar atualizar
    elementsToUpdate.forEach(id => {
        const element = document.getElementById(id);
        console.log(`Elemento ${id}:`, element ? 'EXISTE' : 'NÃO EXISTE');

        if (!element) {
            console.warn(`⚠️ Elemento com ID '${id}' não encontrado no DOM`);
        }
    });

    // Função auxiliar segura para atualizar elementos
    function safeUpdate(id, value) {
        const element = document.getElementById(id);
        if (element) {
            element.textContent = value;
            console.log(`✓ Atualizado ${id}: ${value}`);
        } else {
            console.warn(`✗ Elemento ${id} não encontrado`);
        }
    }

    // Atualizar cabeçalho
    safeUpdate('profileName', (consultorData.first_name || '') + ' ' + (consultorData.last_name || ''));
    safeUpdate('profileTitle', consultorData.current_title || 'Profissional');
    safeUpdate('profileExperience', (consultorData.experience_years || '0') + ' anos');

    // Atualizar dados pessoais
    safeUpdate('displayFullName', (consultorData.first_name || '') + ' ' + (consultorData.last_name || ''));
    safeUpdate('displayGender', consultorData.gender || 'Não fornecido');
    safeUpdate('displayNationality', consultorData.nationality || 'Não fornecida');

    // Localização (mais complexa)
    const locationElement = document.getElementById('displayLocation');
    if (locationElement) {
        const city = consultorData.city || '';
        const province = consultorData.province ? ', ' + consultorData.province.name : '';
        locationElement.textContent = city + province || 'Não fornecido';
        console.log(`✓ Atualizado displayLocation: ${city + province}`);
    }

    // Idade
    const ageElement = document.getElementById('displayAge');
    if (ageElement) {
        if (consultorData.date_of_birth) {
            try {
                const birthDate = new Date(consultorData.date_of_birth);
                const age = new Date().getFullYear() - birthDate.getFullYear();
                ageElement.textContent = age + ' anos';
                console.log(`✓ Atualizado displayAge: ${age} anos`);
            } catch (error) {
                console.error('Erro ao calcular idade:', error);
                ageElement.textContent = 'Não fornecida';
            }
        } else {
            ageElement.textContent = 'Não fornecida';
        }
    }

    // Contactos
    safeUpdate('displayEmail', userData.email || 'N/A');
    safeUpdate('displayPhone', consultorData.phone || 'Não fornecido');
    safeUpdate('displayAddress', consultorData.address || 'Não fornecido');

    // Perfil profissional
    safeUpdate('displayCurrentTitle', consultorData.current_title || 'Não definido');
    safeUpdate('displayBio', consultorData.bio || 'Nenhum resumo adicionado.');
    safeUpdate('displayExperienceYears', (consultorData.experience_years || '0') + ' anos');
    safeUpdate('displayEducationLevel', consultorData.education_level || 'Não definido');

    // Expectativa salarial
    const salaryElement = document.getElementById('displayExpectedSalary');
    if (salaryElement) {
        if (consultorData.expected_salary) {
            try {
                salaryElement.textContent = new Intl.NumberFormat('pt-AO').format(consultorData.expected_salary) + ' MZN';
                console.log(`✓ Atualizado displayExpectedSalary: ${consultorData.expected_salary} MZN`);
            } catch (error) {
                console.error('Erro ao formatar salário:', error);
                salaryElement.textContent = consultorData.expected_salary + ' MZN';
            }
        } else {
            salaryElement.textContent = 'Não definido';
        }
    }

    console.log('=== UPDATE UI CONCLUÍDO ===');
}

// Mostrar alertas
function showAlert(message, type) {
    const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
    const alert = document.createElement('div');
    alert.className = `alert ${alertClass} alert-dismissible fade show position-fixed`;
    alert.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    alert.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;

    document.body.appendChild(alert);

    setTimeout(() => {
        if (alert.parentNode) {
            alert.remove();
        }
    }, 5000);
}



function formatDateForInput(dateString) {
    if (!dateString) return '';

    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');

    return `${year}-${month}-${day}`;
}


// ==================== FUNÇÕES PARA ABRIR MODAIS ====================

// Skills
function openSkillsModal(index = null) {
    console.log('Abrindo modal de skills, index:', index);

    const modalElement = document.getElementById('skillsModal');
    if (!modalElement) {
        console.error('Modal skillsModal não encontrado!');
        return;
    }

    // Usar getOrCreateInstance que é mais robusto
    const modal = bootstrap.Modal.getOrCreateInstance(modalElement);

    const title = document.getElementById('skillsModalTitle');
    const form = document.getElementById('skillsForm');

    if (index !== null && currentSkills[index]) {
        console.log('Editando skill existente:', currentSkills[index]);
        title.textContent = 'Editar Habilidade';
        form.name.value = currentSkills[index].name || '';
        form.level.value = currentSkills[index].level || '';
        form.years.value = currentSkills[index].years || 0;
        document.getElementById('skillIndex').value = index;
    } else {
        console.log('Nova skill');
        title.textContent = 'Adicionar Habilidade';
        form.reset();
        document.getElementById('skillIndex').value = '';
    }

    // Mostrar o modal
    modal.show();

    // Debug adicional
    console.log('Modal instance:', modal);
    console.log('Modal element:', modalElement);
}

function setDocType(type) {
    document.getElementById('documentTypeId').value = type;
}

// Educação
function openEducationModal(index = null) {
    const modal = new bootstrap.Modal(document.getElementById('educationModal'));
    const title = document.getElementById('educationModalTitle');
    const form = document.getElementById('educationForm');

    if (index !== null && currentEducations[index]) {
        title.textContent = 'Editar Formação Académica';
        form.institution.value = currentEducations[index].institution || '';
        form.degree.value = currentEducations[index].degree || '';
        form.field.value = currentEducations[index].field || '';
        form.start_date.value = currentEducations[index].start_date || '';
        form.end_date.value = currentEducations[index].end_date || '';
        form.is_current.checked = currentEducations[index].is_current || false;
        form.description.value = currentEducations[index].description || '';
        document.getElementById('educationIndex').value = index;
    } else {
        title.textContent = 'Adicionar Formação Académica';
        form.reset();
        document.getElementById('educationIndex').value = '';
    }

    modal.show();
}

// Idiomas
function openLanguageModal(index = null) {
    const modal = new bootstrap.Modal(document.getElementById('languageModal'));
    const title = document.getElementById('languageModalTitle');
    const form = document.getElementById('languageForm');

    if (index !== null && currentLanguages[index]) {
        title.textContent = 'Editar Idioma';
        form.name.value = currentLanguages[index].name || '';
        form.leitura.value = currentLanguages[index].leitura || '';
        form.escrita.value = currentLanguages[index].escrita || '';
        form.fala.value = currentLanguages[index].fala || '';
        document.getElementById('languageIndex').value = index;
    } else {
        title.textContent = 'Adicionar Idioma';
        form.reset();
        document.getElementById('languageIndex').value = '';
    }

    modal.show();
}




async function updateSectionData(section, data) {
    try {
        const response = await fetch(`/api/candidate/${section}`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ [section]: data })
        });

        const result = await response.json();

        if (result.success) {
            showAlert(`${section} atualizados com sucesso!`, 'success');
            // Atualizar a UI
            updateUI();
        } else {
            showAlert(`Erro ao atualizar ${section}`, 'error');
        }
    } catch (error) {
        console.error('Erro:', error);
        showAlert('Erro de conexão', 'error');
    }
}

// ==================== FUNÇÕES PARA DELETAR ====================

function deleteSkill(index) {
    if (confirm('Tem certeza que deseja remover esta habilidade?')) {
        currentSkills.splice(index, 1);
        updateSectionData('skills', currentSkills);
    }
}

function deleteExperience(index) {
    if (confirm('Tem certeza que deseja remover esta experiência?')) {
        currentExperiences.splice(index, 1);
        updateSectionData('experiences', currentExperiences);
    }
}


</script>
@endpush

@endsection