@extends('layouts.app')

@section('title',' Perfil')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/linkedin-style.css') }}">
<link rel="stylesheet" href="{{ asset('css/menu.css') }}">
</style>
@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()->hasRecruiterAccess())

 <a href="{{ Auth::user()->hasRecruiterAccess() ? 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()->hasRecruiterAccess())
    @php
        $recruiter = Auth::user()->getPrimaryRecruiter();
    @endphp
    {{ $recruiter->position ?? 'Funcionário' }} na {{ $recruiter->company_name ?? 'Empresa' }}
@elseif(Auth::user()->isCandidate())
    {{ Auth::user()->candidates?->current_title ?? 'Consultor' }}
@else
    {{ Auth::user()->role }}
@endif        </div>
        <div class="profile-company">
            @if(Auth::user()->hasRecruiterAccess())
 @php
        $recruiter = Auth::user()->getPrimaryRecruiter();
    @endphp
    {{ $recruiter->position ?? 'Funcionário' }} na {{ $recruiter->company_name ?? 'Empresa' }}
            @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 da Empresa -->
        <div class="col-lg-9">
            <!-- Cabeçalho do Perfil -->
            <div class="profile-header">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <div class="d-flex align-items-center">
                            <!-- Logo da Empresa -->


                            <div>
                                <h1 class="h2 fw-bold mb-2" id="profileName">{{ $recruiter->company_name }}</h1>
                                <p class="mb-1 opacity-75" id="profileTitle">{{ $recruiter->position ?? 'Empresa' }}</p>
                                <p class="mb-0 opacity-75">
                                    <small>Atualizado em {{ $recruiter->updated_at->format('d M Y') }}</small>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 text-end">
                        <div class="bg-white text-dark rounded-pill px-3 py-2 d-inline-block">
                            <i class="fas fa-briefcase text-primary me-1"></i>
                            <strong id="profileJobsCount">{{ $recruiter->total_jobs_posted ?? 0 }}</strong> vagas publicadas
                        </div>
                    </div>
                </div>
            </div>

            <!-- Progresso do Perfil -->
            @php
            $columnsConfig = [
                'company_name' => [
                    'name' => 'Nome da Empresa',
                    'weight' => 5,
                    'category' => 'Informações Básicas'
                ],
                'company_description' => [
                    'name' => 'Descrição da Empresa',
                    'weight' => 4,
                    'category' => 'Informações Básicas'
                ],
                'company_industry' => [
                    'name' => 'Indústria',
                    'weight' => 4,
                    'category' => 'Informações Básicas'
                ],
                'company_size' => [
                    'name' => 'Tamanho da Empresa',
                    'weight' => 3,
                    'category' => 'Informações Básicas'
                ],
                'company_website' => [
                    'name' => 'Website',
                    'weight' => 2,
                    'category' => 'Contactos'
                ],
                'company_address' => [
                    'name' => 'Endereço',
                    'weight' => 3,
                    'category' => 'Contactos'
                ],
                'phone' => [
                    'name' => 'Telefone',
                    'weight' => 4,
                    'category' => 'Contactos'
                ],
                'position' => [
                    'name' => 'Cargo',
                    'weight' => 3,
                    'category' => 'Perfil Profissional'
                ],
                'department' => [
                    'name' => 'Departamento',
                    'weight' => 2,
                    'category' => 'Perfil Profissional'
                ],
                'city' => [
                    'name' => 'Cidade',
                    'weight' => 2,
                    'category' => 'Localização'
                ],
                'province_id' => [
                    'name' => 'Província',
                    'weight' => 3,
                    'category' => 'Localização'
                ],
                'is_verified' => [
                    'name' => 'Empresa Verificada',
                    'weight' => 3,
                    'category' => 'Status'
                ],
            ];

            $totalWeight = 0;
            $filledWeight = 0;
            $completionDetails = [];

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

                    if (!empty($value)) {
                        $filledWeight += $config['weight'];
                        $isFilled = true;
                    }

                    $completionDetails[$column] = [
                        'name' => $config['name'],
                        'filled' => $isFilled,
                        'weight' => $config['weight'],
                        'category' => $config['category']
                    ];
                }

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

            <!-- Card de Progresso -->
            <div class = "paiprofile">
            <div class="profile-completion-card content-card">
                <div class="completion-header">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <h4 class="mb-1">Estado do perfil da empresa</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! 🎉</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>

                    <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($recruiter->company_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($recruiter->company_description)) fa-check text-success @else fa-times text-danger @endif me-2"></i>
                                            Descrição da Empresa
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas @if(!empty($recruiter->company_industry)) fa-check text-success @else fa-times text-danger @endif me-2"></i>
                                            Indústria
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas @if(!empty($recruiter->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($recruiter->company_address)) fa-check text-success @else fa-times text-danger @endif me-2"></i>
                                            Endereço
                                        </li>
                                    </ul>
                                </div>

                                <!-- COLUNA 2 -->
                                <div class="col-md-6">
                                    <ul class="list-unstyled">
                                        <li class="mb-1">
                                            <i class="fas @if(!empty($recruiter->company_size)) fa-check text-success @else fa-times text-danger @endif me-2"></i>
                                            Tamanho da Empresa
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas @if(!empty($recruiter->company_website)) fa-check text-success @else fa-times text-danger @endif me-2"></i>
                                            Website
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas @if(!empty($recruiter->position)) fa-check text-success @else fa-times text-danger @endif me-2"></i>
                                            Cargo
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas @if(!empty($recruiter->province_id)) fa-check text-success @else fa-times text-danger @endif me-2"></i>
                                            Província
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas @if($recruiter->is_verified) fa-check text-success @else fa-times text-danger @endif me-2"></i>
                                            Empresa Verificada
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
            <!-- Informações da Empresa -->
            <div class="content-card">
                <div class="card-header">
                    <h3 class="card-title">Informações da Empresa</h3>
                    <button class="edit-btn" onclick="editSection('empresa')">
                        <i class="fas fa-edit me-1"></i> Editar
                    </button>

                    <input type="file" id="companyLogoInput" style="display: none;"
       data-url="{{ route('recruiter.update.logo') }}" accept="image/*">

<button type="button" class="edit-btn" onclick="document.getElementById('companyLogoInput').click();">
   <i class="fas fa-upload me-1"></i> Logotipo
</button>
                </div>
                <div class="card-content">
                    <div class="info-item">
                        <span class="info-label">Nome</span>
                        <span class="info-value" id="displayCompanyName">{{ $recruiter->company_name }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Indústria</span>
                        <span class="info-value" id="displayIndustry">{{ $recruiter->company_industry ?? 'Não definida' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Tamanho</span>
                        <span class="info-value" id="displayCompanySize">{{ $recruiter->company_size ?? 'Não definido' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Descrição</span>
                        <span class="info-value" id="displayCompanyDescription">{{ $recruiter->company_description ?? 'Nenhuma descrição adicionada.' }}</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">{{ $recruiter->user->email ?? 'N/A' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Telefone</span>
                        <span class="info-value" id="displayPhone">{{ $recruiter->phone ?? 'Não fornecido' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Website</span>
                        <span class="info-value" id="displayWebsite">
                            @if($recruiter->company_website)
                                <a href="{{ $recruiter->company_website }}" target="_blank">{{ $recruiter->company_website }}</a>
                            @else
                                Não fornecido
                            @endif
                        </span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Endereço</span>
                        <span class="info-value" id="displayAddress">{{ $recruiter->company_address ?? 'Não fornecido' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Localização</span>
                        <span class="info-value" id="displayLocation">
                            @if($recruiter->province)
                                {{ $recruiter->city ?? '' }}, {{ $recruiter->province->name }}
                            @else
                                {{ $recruiter->city ?? 'Não especificada' }}
                            @endif
                        </span>
                    </div>
                </div>
            </div>

            <!-- Informações do Recrutador -->
            <div >
                <div >
                    <h3 ></h3>

                </div>

            </div>

            <!-- Estatísticas da Empresa -->
            <div class="content-card">
                <div class="card-header">
                    <h3 class="card-title">Estatísticas da Empresa</h3>
                </div>
                <div class="card-content">
                    <div class="info-item">
                        <span class="info-label">Vagas Publicadas</span>
                        <span class="info-value">{{ $recruiter->total_jobs_posted ?? 0 }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Vagas Ativas</span>
                        <span class="info-value">{{ $recruiter->active_jobs_count ?? 0 }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Total de Candidaturas</span>
                        <span class="info-value">{{ $totalApplications }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Candidaturas Pendentes</span>
                        <span class="info-value">{{ $pendingApplications }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Visualizações de Vagas</span>
                        @php
                            $totalViews = $recruiter->jobs->sum('views_count');
                        @endphp
                        <span class="info-value">{{ $totalViews }}</span>
                    </div>
                </div>
            </div>


            <!-- Ações Rápidas -->
                   </div>
    </div>
</div>

<!-- Modal para Edição de Informações da Empresa -->
<div class="modal fade" id="editEmpresaModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Editar Informações da Empresa</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editEmpresaForm" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Nome da Empresa *</label>
                            <input type="text" name="company_name" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Indústria *</label>

                            <select name="company_industry" class="form-select" required>
                                <option value="">Selecionar...</option>
                                @foreach($categories as $province)
                                    <option value="{{ $province->name }}">{{ $province->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Tamanho da Empresa</label>
                            <select name="company_size" class="form-select">
                                <option value="">Selecionar...</option>
                                <option value="1-10">1-10 funcionários</option>
                                <option value="11-50">11-50 funcionários</option>
                                <option value="51-200">51-200 funcionários</option>
                                <option value="201-500">201-500 funcionários</option>
                                <option value="501-1000">501-1000 funcionários</option>
                                <option value="1000+">Mais de 1000 funcionários</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Website</label>
                            <input type="url" name="company_website" class="form-control" placeholder="https://exemplo.com">
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Descrição da Empresa *</label>
                            <textarea name="company_description" class="form-control" rows="4" required></textarea>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">Endereço *</label>
                            <textarea name="company_address" class="form-control" rows="3" required></textarea>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Província *</label>
                            <select name="province_id" class="form-select" required>
                                <option value="">Selecionar...</option>
                                @foreach($provinces as $province)
                                    <option value="{{ $province->id }}">{{ $province->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
<label class="form-label">Logo da Empresa</label>


    <!-- Input oculto para arquivo -->
    <input type="file"
           name="company_logo"
           id="companyLogoInput"
           class="form-control d-none"
           accept="image/*">


                            <input type="hidden" name="city" class="form-control" 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="updateEmpresa()">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-md-6 mb-3">
                            <label class="form-label">E-mail *</label>
                            <input type="email" name="email" class="form-control" required>
                        </div>
                        <div class="col-md-6 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">Website</label>
                            <input type="url" name="company_website" class="form-control" placeholder="https://exemplo.com">
                        </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 Informações do Recrutador -->
<div class="modal fade" id="editRecrutadorModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editRecrutadorForm">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label"></label>
                            <input type="hidden" name="position" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label"></label>
                            <input type="hidden" name="department" class="form-control">
                        </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="updateRecrutador()">Guardar Alterações</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Variáveis globais
let recruiterData = @json($recruiter);
let userData = @json($recruiter->user ?? []);

// Função para abrir o modal correto
function editSection(section) {
    switch(section) {
        case 'empresa':
            loadEmpresaData();
            new bootstrap.Modal(document.getElementById('editEmpresaModal')).show();
            break;
        case 'contactos':
            loadContactosData();
            new bootstrap.Modal(document.getElementById('editContactosModal')).show();
            break;
        case 'recrutador':
            loadRecrutadorData();
            new bootstrap.Modal(document.getElementById('editRecrutadorModal')).show();
            break;
    }
}

// Carregar dados da empresa no modal
function loadEmpresaData() {
    const form = document.getElementById('editEmpresaForm');
    form.company_name.value = recruiterData.company_name || '';
    form.company_industry.value = recruiterData.company_industry || '';
    form.company_size.value = recruiterData.company_size || '';
    form.company_website.value = recruiterData.company_website || '';
    form.company_description.value = recruiterData.company_description || '';
    form.company_address.value = recruiterData.company_address || '';
    form.province_id.value = recruiterData.province_id || '';
    form.city.value = recruiterData.city || '';
}

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

// Carregar dados do recrutador no modal
function loadRecrutadorData() {
    const form = document.getElementById('editRecrutadorForm');
    form.position.value = recruiterData.position || '';
    form.department.value = recruiterData.department || '';
}

// Atualizar dados da empresa via AJAX
async function updateEmpresa() {
    const form = document.getElementById('editEmpresaForm');
    const formData = new FormData(form);


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

        const data = await response.json();

        if (data.success) {
            Object.assign(recruiterData, data.data);
            updateUI();
            bootstrap.Modal.getInstance(document.getElementById('editEmpresaModal')).hide();
            showAlert('Informações da empresa atualizadas com sucesso!', 'success');
        } else {
           Object.assign(recruiterData, data.data);
            updateUI();
            bootstrap.Modal.getInstance(document.getElementById('editEmpresaModal')).hide();
            showAlert('Informações da empresa atualizadas com sucesso!', 'success');
        }
    } catch (error) {
          updateUI();
            bootstrap.Modal.getInstance(document.getElementById('editEmpresaModal')).hide();
            showAlert('Informações da empresa atualizadas com sucesso!', 'success');
    }
}

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

    try {
        
        const response = await fetch('{{ route("recruiter.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(recruiterData, data.data.recruiter);
            Object.assign(userData, data.data.user);
            updateUI();
            bootstrap.Modal.getInstance(document.getElementById('editContactosModal')).hide();
            showAlert('Contactos atualizados com sucesso!', 'success');
        }
    } catch (error) {
       
            updateUI();
            bootstrap.Modal.getInstance(document.getElementById('editContactosModal')).hide();
            showAlert('Contactos atualizados com sucesso!', 'success');
    }
}

// Atualizar informações do recrutador via AJAX
async function updateRecrutador() {
    const form = document.getElementById('editRecrutadorForm');
    const formData = new FormData(form);

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

        const data = await response.json();

        if (data.success) {
            Object.assign(recruiterData, data.data);
            updateUI();
            bootstrap.Modal.getInstance(document.getElementById('editRecrutadorModal')).hide();
            showAlert('Informações do recrutador atualizadas com sucesso!', 'success');
        }
    } catch (error) {
        showAlert('Erro ao atualizar informações.', 'error');
    }
}

// Atualizar a interface do usuário
function updateUI() {
    // Atualizar cabeçalho
    document.getElementById('profileName').textContent = recruiterData.company_name || 'Empresa';
 
    document.getElementById('profileJobsCount').textContent = recruiterData.total_jobs_posted || '0';

    // Atualizar informações da empresa
    document.getElementById('displayCompanyName').textContent = recruiterData.company_name || '';
    document.getElementById('displayIndustry').textContent = recruiterData.company_industry || 'Não definida';
    document.getElementById('displayCompanySize').textContent = recruiterData.company_size || 'Não definido';
    document.getElementById('displayCompanyDescription').textContent = recruiterData.company_description || 'Nenhuma descrição adicionada.';



    // Atualizar contactos
    document.getElementById('displayEmail').textContent = userData.email || 'N/A';
    document.getElementById('displayPhone').textContent = recruiterData.phone || 'Não fornecido';

    const websiteElement = document.getElementById('displayWebsite');
    if (recruiterData.company_website) {
        websiteElement.innerHTML = `<a href="${recruiterData.company_website}" target="_blank">${recruiterData.company_website}</a>`;
    } else {
        websiteElement.textContent = 'Não fornecido';
    }

    document.getElementById('displayAddress').textContent = recruiterData.company_address || 'Não fornecido';

    const locationElement = document.getElementById('displayLocation');
    if (recruiterData.province) {
        locationElement.textContent = (recruiterData.city || '') + ', ' + recruiterData.province.name;
    } else {
        locationElement.textContent = recruiterData.city || 'Não especificada';
    }


    // Recarregar a página após 2 segundos para atualizar estatísticas
    setTimeout(() => {
        location.reload();
    }, 2000);
}

// 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);
}

// Inicialização
document.addEventListener('DOMContentLoaded', function() {
    console.log('Perfil da empresa carregado');
    const provinceSelect = document.querySelector('select[name="province_id"]');
    const cityInput = document.querySelector('input[name="city"]');

    if (provinceSelect && cityInput) {
        provinceSelect.addEventListener('change', function() {
            // Pega a opção selecionada
            const selectedOption = this.options[this.selectedIndex];
            const provinceName = selectedOption.textContent;

            // Preenche o campo cidade com o nome da província
            if (this.value !== '') {
                cityInput.value = provinceName;
            } else {
                cityInput.value = ''; // Limpa se não tiver seleção
            }
        });
    }




$('#companyLogoInput').on('change', function() {
    const file = this.files[0];
    if (!file) return;

    const formData = new FormData();
    formData.append('company_logo', file);
    formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

    const uploadUrl = $(this).data('url');

    $.ajax({
        url: uploadUrl,
        method: "POST",
        data: formData,
        processData: false,
        contentType: false,
        beforeSend: function() {
            // Opcional: mudar o ícone do botão para um spinner
            $('.edit-btn i').attr('class', 'fas fa-spinner fa-spin');
        },
        success: function(response) {
            if (response.success) {
                // Se você tiver uma tag <img> do logo na página, atualize o src dela:
                $('#companyLogoPreview').attr('src', response.url);
                alert('Logotipo da empresa atualizado com sucesso!');
            }
        },
        error: function(xhr) {
            alert('Erro ao carregar logotipo. Certifique-se que é uma imagem válida.');
        },
        complete: function() {
            $('.edit-btn i').attr('class', 'fas fa-edit me-1');
        }
    });
});


});


</script>
@endpush

@endsection