@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <!-- Conteúdo Principal -->
    <div class="main-container">
        <div class="row g-3">

        
        <!-- 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()->hasRecruiterAccess())

<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()->hasRecruiterAccess())


@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">
@if(Auth::user()->hasRecruiterAccess())
    <a href="{{ route('recrutador.muser') }}" class="menu-item">
        <i class="fas fa-bookmark"></i> Usuarios
    </a>

            @endif

    <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 Principal das Candidaturas -->
            <div class="col-lg-9">
                <!-- Cabeçalho -->
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="{{ route('feed') }}">Início</a></li>
                                        <li class="breadcrumb-item"><a href="{{ route('jobs.my') }}">Minhas Vagas</a></li>
                                        <li class="breadcrumb-item active">Candidaturas</li>
                                    </ol>
                                </nav>
                                <h1 class="h3 mb-0 text-gray-800">Candidaturas para: {{ $job->title }}</h1>
                                <p class="text-muted mb-0">{{ $job->recruiter->company_name ?? 'Empresa' }} • {{ $job->province->name ?? 'N/A' }}</p>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex flex-wrap gap-2 justify-content-md-end">
                                    <a href="{{ route('jobs.show', $job) }}" class="btn btn-outline-primary">
                                        <i class="fas fa-eye me-2"></i> Ver Vaga
                                    </a>
                                    <a href="{{ route('jobs.edit', $job) }}" class="btn btn-outline-secondary">
                                        <i class="fas fa-edit me-2"></i> Editar Vaga
                                    </a>
                                    <a href="{{ route('jobs.my') }}" class="btn btn-primary">
                                        <i class="fas fa-arrow-left me-2"></i> Voltar
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Filtros -->
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="row g-3 align-items-center">
                            <div class="col-md-3">
                                <label for="statusFilter" class="form-label">Filtrar por Status</label>
                                <select class="form-select" id="statusFilter">
                                    <option value="">Todos os Status</option>
                                    <option value="pending">Pendentes</option>
                                    <option value="under_review">Em análise</option>
                                    <option value="rejected">Rejeitados</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="scoreFilter" class="form-label">Filtrar por Score</label>
                                <select class="form-select" id="scoreFilter">
                                    <option value="">Todos os Scores</option>
                                    <option value="90">Acima de 90%</option>
                                    <option value="80">Acima de 80%</option>
                                    <option value="70">Acima de 70%</option>
                                    <option value="60">Acima de 60%</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="searchInput" class="form-label">Pesquisar Candidato</label>
                                <input type="text" class="form-control" id="searchInput" placeholder="Nome, email, telefone...">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">&nbsp;</label>
                                <button class="btn btn-outline-secondary w-100" id="resetFilters">
                                    <i class="fas fa-refresh me-2"></i>Limpar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Lista de Candidaturas -->
                <div class="card">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">Lista de Candidatos</h5>
                    </div>

                    <div class="card-body">
                        @if($applications->count() > 0)
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Candidato</th>
                                            <th>Contacto</th>

                                            <th>Matching Score</th>
                                            <th>Status</th>
                                            <th>Data Candidatura</th>
                                            <th>Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($applications as $application)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center"
                                                             style="width: 40px; height: 40px;">
                                                            <span class="text-white fw-bold">
                                                                {{ substr($application->candidate->first_name, 0, 1) }}{{ substr($application->candidate->last_name, 0, 1) }}
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="flex-grow-1 ms-3">
                                                        <h6 class="mb-0">{{ $application->candidate->first_name }} {{ $application->candidate->last_name }}</h6>
                                                        <small class="text-muted">
                                                            {{ $application->candidate->current_title ?? 'N/A' }}
                                                        </small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <small>
                                                    <div><i class="fas fa-envelope text-muted me-1"></i> {{ $application->candidate->user->email ?? 'N/A' }}</div>
                                                    <div><i class="fas fa-phone text-muted me-1"></i> {{ $application->candidate->phone ?? 'N/A' }}</div>
                                                </small>
                                            </td>

                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="progress flex-grow-1 me-2" style="height: 8px;">
                                                        <div class="progress-bar
                                                            @if($application->matching_score >= 80) bg-success
                                                            @elseif($application->matching_score >= 60) bg-warning
                                                            @else bg-danger
                                                            @endif"
                                                            role="progressbar"
                                                            style="width: {{ $application->matching_score }}%">
                                                        </div>
                                                    </div>
                                                    <span class="badge
                                                        @if($application->matching_score >= 80) bg-success
                                                        @elseif($application->matching_score >= 60) bg-warning
                                                        @else bg-danger
                                                        @endif">
                                                        {{ $application->matching_score }}%
                                                    </span>
                                                </div>
                                            </td>
                                            <td>
                                                <select class="form-select form-select-sm status-select"
                                                        data-application-id="{{ $application->id }}"
                                                        style="width: 120px;">
                                                    <option value="pending" {{ $application->status == 'pending' ? 'selected' : '' }}>Pendente</option>
                                                    <option value="under_review" {{ $application->status == 'under_review' ? 'selected' : '' }}>Em análise</option>
                                                    <option value="rejected" {{ $application->status == 'rejected' ? 'selected' : '' }}>Rejeitado</option>
                                                </select>
                                            </td>
                                            <td>
                                                <small class="text-muted">
                                                    {{ $application->applied_at->format('d/m/Y H:i') }}
                                                </small>
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm">

                                                  <a href="{{ route('perfil', $application->id) }}">
                                                    <button class="btn btn-outline-primary view-candidate"

                                                            title="Ver Perfil">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                </a>
                                                    <button class="btn btn-outline-info view-notes"
                                                            data-application-id="{{ $application->id }}"
                                                            data-notes="{{ $application->recruiter_notes }}"
                                                            title="Ver/Adicionar Notas">
                                                        <i class="fas fa-sticky-note"></i>
                                                    </button>
                                                    <a href="#" class="btn btn-outline-success" title="Contactar">
                                                        <i class="fas fa-envelope"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <!-- Paginação -->
                            <div class="row mt-4">
                                <div class="col-md-6">
                                    <p class="text-muted small">
                                        Mostrando {{ $applications->firstItem() }} a {{ $applications->lastItem() }} de {{ $applications->total() }} candidaturas
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex justify-content-end">
                                        {{ $applications->links() }}
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="text-center py-5">
                                <div class="mb-4">
                                    <i class="fas fa-users fa-4x text-muted"></i>
                                </div>
                                <h4 class="text-gray-800 mb-3">Nenhuma candidatura encontrada</h4>
                                <p class="text-muted mb-4">Ainda não há candidaturas para esta vaga.</p>
                                <a href="{{ route('jobs.my') }}" class="btn btn-primary">
                                    <i class="fas fa-arrow-left me-2"></i>Voltar para Vagas
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para Notas -->
<div class="modal fade" id="notesModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Notas do Recrutador</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="notesForm">
                    @csrf
                    <input type="hidden" id="applicationId" name="application_id">
                    <div class="mb-3">
                        <label for="recruiterNotes" class="form-label">Notas</label>
                        <textarea class="form-control" id="recruiterNotes" name="recruiter_notes"
                                  rows="5" placeholder="Adicione notas sobre este candidato..."></textarea>
                    </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" id="saveNotes">Salvar Notas</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('css/linkedin-style.css') }}">
<link rel="stylesheet" href="{{ asset('css/menu.css') }}">
<style>
/* ====== TEXTO COLAPSÁVEL ====== */
.text-collapsible-container {
    position: relative;
    margin-bottom: 10px;
}


</style>
@endpush

@push('scripts')
<script>

window.APP_URL = "{{ url('/') }}";
    window.API_URL = "{{ url('/api') }}";
const baseUrl = window.APP_URL || '';

document.addEventListener('DOMContentLoaded', function() {
    // Filtros
    const statusFilter = document.getElementById('statusFilter');
    const scoreFilter = document.getElementById('scoreFilter');
    const searchInput = document.getElementById('searchInput');
    const resetBtn = document.getElementById('resetFilters');
    const tableRows = document.querySelectorAll('tbody tr');

    function filterApplications() {
        const statusValue = statusFilter.value;
        const scoreValue = scoreFilter.value;
        const searchValue = searchInput.value.toLowerCase();

        tableRows.forEach(row => {
            const status = row.querySelector('.status-select').value;
            const score = parseInt(row.querySelector('.badge').textContent);
            const text = row.textContent.toLowerCase();

            const statusMatch = !statusValue || status === statusValue;
            const scoreMatch = !scoreValue || score >= parseInt(scoreValue);
            const searchMatch = !searchValue || text.includes(searchValue);

            row.style.display = statusMatch && scoreMatch && searchMatch ? '' : 'none';
        });
    }

    statusFilter.addEventListener('change', filterApplications);
    scoreFilter.addEventListener('change', filterApplications);
    searchInput.addEventListener('input', filterApplications);
    resetBtn.addEventListener('click', function() {
        statusFilter.value = '';
        scoreFilter.value = '';
        searchInput.value = '';
        filterApplications();
    });

    // Alterar status da aplicação
    document.querySelectorAll('.status-select').forEach(select => {
        select.dataset.originalValue = select.value;

        select.addEventListener('change', function() {
            const applicationId = this.dataset.applicationId;
            const status = this.value;
            const originalValue = this.dataset.originalValue;

            console.log('🔍 DEBUG DETALHADO:');
            console.log('Application ID:',applicationId);
            console.log('Status selecionado:',status);
            console.log('Tipo do status:',typeof status);
            console.log('Valor original:',originalValue);
            console.log('URL completa:', `${baseUrl}/applications/${applicationId}/status`);

            // Verificar se há espaços ou caracteres especiais
            console.log('Status com trim:', `"${status.trim()}"`);
            console.log('Comprimento do status:', status.length);

            fetch(`${baseUrl}/applications/${applicationId}/status`, {
                method: 'PUT',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    status: status.trim(),
                    status_trimmed: status.trim()
                })
            })
            .then(response => {
                console.log('📡 Status HTTP:', response.status);
                console.log('URL chamada:', response.url);

                return response.json().then(data => {
                    console.log('📊 Resposta completa:', data);

                    if (response.status === 422) {
                        console.error('❌ Erros de validação:', data.errors);
                        throw new Error(`Validation Error: ${JSON.stringify(data.errors)}`);
                    }

                    if (!response.ok) {
                        throw new Error(`HTTP Error: ${response.status}`);
                    }

                    return data;
                });
            })
            .then(data => {
                if (data.success) {
                    console.log('✅ Sucesso!');
                    showAlert('Status atualizado com sucesso!', 'success');
                    this.dataset.originalValue = status;
                } else {
                    throw new Error('Server returned success: false');
                }
            })
            .catch(error => {
                console.error('💥 Erro completo:', error);
                showAlert('Erro: ' + error.message, 'error');
                this.value = originalValue;
            });
        });
    });

    // Modal de notas
    const notesModal = new bootstrap.Modal(document.getElementById('notesModal'));
    document.querySelectorAll('.view-notes').forEach(button => {
        button.addEventListener('click', function() {
            const applicationId = this.dataset.applicationId;
            const notes = this.dataset.notes || '';

            document.getElementById('applicationId').value = applicationId;
            document.getElementById('recruiterNotes').value = notes;
            notesModal.show();
        });
    });

    document.getElementById('saveNotes').addEventListener('click', function() {
        const formData = new FormData(document.getElementById('notesForm'));

        fetch(`${baseUrl}/applications/update-notes`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                notesModal.hide();
                showAlert('Notas salvas com sucesso!', 'success');
            } else {
                showAlert('Erro ao salvar notas', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('Erro ao salvar notas', 'error');
        });
    });

    function showAlert(message, type) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const alertHtml = `
            <div class="alert ${alertClass} alert-dismissible fade show position-fixed top-0 start-50 translate-middle-x mt-3" style="z-index: 9999;" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        document.body.insertAdjacentHTML('beforeend', alertHtml);
        setTimeout(() => document.querySelector('.alert')?.remove(), 5000);
    }
});

function openCandidateProfile(url) {
    // Configurações da nova janela
    const windowFeatures = 'width=1200,height=800,scrollbars=yes,resizable=yes,toolbar=no,location=no,menubar=no,status=no';

    // Abrir nova janela
    const newWindow = window.open(url, 'PerfilCandidato', windowFeatures);

    // Focar na nova janela
    if (newWindow) {
        newWindow.focus();
    }
}
</script>
@endpush