@extends('layouts.app')

@section('title', 'MAKTUBIA - Perfil de ' . $profileUser->name)

@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 2 - Feed -->
        <div class="col-lg-12">

            <div class="profile-cards">
                <!-- Capa -->



    @php
    // Verifica se o usuário tem banner, senão define como null
    $bannerUrl = ($profileUser->profile_banner)
        ? asset('storage/' . $profileUser->profile_banner)
        : null;


$isOwner = auth()->check() && auth()->user()->id === $profileUser->id;
@endphp


                <div class="profile-covers" id="bannerPreview"
     style="{{ $bannerUrl ? 'background-image: url(' . $bannerUrl . '); background-size: cover; background-position: center;' : '' }}">

   @if($isOwner)
        <input type="file" id="bannerInput" style="display: none;"
               data-url="{{ route('profile.update.banner') }}" accept="image/*">

        <button type="button" class="add-banner-btn" onclick="document.getElementById('bannerInput').click();"
                style="position: absolute; bottom: 10px; right: 10px; border-radius: 50%; width: 40px; height: 40px; border: none; cursor: pointer; background: rgba(0,0,0,0.5); color: white;">
            <i class="fas fa-camera"></i>
        </button>
    @endif

</div>

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

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

</div>




@php
    $hasAccess = \DB::table('profile_access_requests')
        ->where('requester_id', auth()->id())
        ->where('owner_id', $profileUser->id)
        ->where('status', 'approved')
        ->exists();
@endphp

                <!-- Informações -->
                <div class="profile-info">
                    <div class="profile-name">{{ $profileUser->name }}</div>

                    <div class="profile-desc">
                        @if($profileUser->isRecruiter() && $profileUser->recruiter)
                            {{ $profileUser->recruiter->company_description ?? 'Recrutador' }} -- {{ $profileUser->recruiter->company_name }}
                        @elseif($profileUser->isCandidate())
                            {{ $profileUser->candidates?->bio ?? 'Consultor' }}
                        @else
                            {{ $profileUser->role }}
                        @endif
                    </div>

<div class="profile-title">
                  @if($profileUser->isRecruiter() && $profileUser->recruiter)
                            {{ $profileUser->recruiter->city ?? 'MPT' }} -- {{ $profileUser->recruiter->phone }} --{{ $profileUser->recruiter->company_website }}
                        @elseif($profileUser->isCandidate())
                            {{ $profileUser->candidates->city ?? 'MPT' }}

                     {{-- Verifica se já pediu acesso --}}
@php
    $access = \DB::table('profile_access_requests')
        ->where('requester_id', auth()->id())
        ->where('owner_id', $profileUser->id)
        ->first();
@endphp

@if(!$access)
    <a href="javascript:void(0);"
       onclick="event.preventDefault(); document.getElementById('request-access-form').submit();"
       class="btn btn-outline-warning btn-sm">
       <i class="fa fa-lock"></i> Solicitar acesso a dados privados
    </a>

    <form id="request-access-form" action="{{ route('access.request', $profileUser->id) }}" method="POST" style="display: none;">
        @csrf
    </form>
@elseif($access->status === 'pending')
    <span class="badge bg-secondary">Aguardando aprovação de acesso...</span>
@elseif($access->status === 'approved')
    <span class="badge bg-success"><i class="fa fa-unlock"></i> Acesso Liberado</span>
@endif

                             @else
                            {{ $profileUser->role }}
                        @endif
</div>






                    <div class="profile-company">
                        @if($profileUser->isRecruiter() && $profileUser->recruiter)
                            {{ $profileUser->recruiter->company_name }}
                        @endif
                    </div>
                </div>
            </div>




  @if($profileUser->isRecruiter() && $profileUser->recruiter)

                        @elseif($profileUser->isCandidate())




@if($hasAccess || auth()->id() == $profileUser->id)
     <div class="candidate-card">
                        <div class="card-header-custom">
                            <h3><i class="fas fa-address-card me-2"></i>Informações de Contacto</h3>
                        </div>
                        <div class="card-body-custom">
                            <div class="info-grid">
                                @if($profileUser->candidates->user->email ?? false)
                                <div class="info-item">
                                    <span class="info-label">E-mail</span>
                                    <span class="info-value">{{ $profileUser->candidates->user->email }}</span>
                                </div>
                                @endif
                                @if($profileUser->candidates->phone)
                                <div class="info-item">
                                    <span class="info-label">Telefone</span>
                                    <span class="info-value">{{ $profileUser->candidates->phone }}</span>
                                </div>
                                @endif
                                @if($profileUser->candidates->address)
                                <div class="info-item">
                                    <span class="info-label">Endereço</span>
                                    <span class="info-value">{{ $profileUser->candidates->address }}</span>
                                </div>
                                @endif
                                @if($profileUser->candidates->nationality)
                                <div class="info-item">
                                    <span class="info-label">País</span>
                                    <span class="info-value">{{ $profileUser->candidates->nationality }}</span>
                                </div>
                                @endif
                            </div>
                        </div>

  @endif


@if($hasAccess || auth()->id() == $profileUser->id)


                        <div class="card-header-custom">
                            <h3><i class="fas fa-briefcase me-2"></i>Experiência Profissional</h3>
                        </div>
                        <div class="card-body-custom">
                            @php
                                $experiences = [];
                                if ($profileUser->candidates->skills) {
                                    if (is_string($profileUser->candidates->skills)) {
                                        $experiences = json_decode($profileUser->candidates->skills, true) ?? [];
                                    } elseif (is_array($profileUser->candidates->skills)) {
                                        $experiences = $profileUser->candidates->skills;
                                    }
                                }
                                $technicalExperiences = array_filter($experiences, function($exp) {
                                    return ($exp['type'] ?? 'technical') === 'technical';
                                });
                            @endphp

                            @if(count($technicalExperiences) > 0)
                                <div class="timeline">
                                    @foreach($technicalExperiences as $experience)
                                    <div class="timeline-item">
                                        <div class="experience-item">
                                            <div class="d-flex justify-content-between align-items-start mb-2">
                                                <div>
                                                    <h5 class="fw-bold mb-1">{{ $experience['name'] ?? 'Empresa não especificada' }}</h5>
                                                    <p class="text-primary mb-1">{{ $experience['level'] ?? 'Cargo não especificado' }}</p>
                                                </div>
                                                <span class="badge-custom">{{ $experience['years'] ?? 0 }} ano(s)</span>
                                            </div>
                                            @if(!empty($experience['description']))
                                                <p class="mb-0 text-muted">{{ $experience['description'] }}</p>
                                            @endif
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            @else
                                <p class="text-muted text-center py-4">
                                    <i class="fas fa-briefcase fa-2x mb-3 d-block"></i>
                                    Nenhuma experiência profissional registada.

                                </p>
                            @endif
                        </div>
                    </div>




                        <div class="card-header-custom">
                            <h3><i class="fas fa-graduation-cap me-2"></i>Formação Académica</h3>
                        </div>
                        <div class="card-body-custom">
                            @php
                                $educations = [];
                                if ($profileUser->candidates->preferred_job_types) {
                                    if (is_string($profileUser->candidates->preferred_job_types)) {
                                        $educations = json_decode($profileUser->candidates->preferred_job_types, true) ?? [];
                                    } elseif (is_array($profileUser->candidates->preferred_job_types)) {
                                        $educations = $profileUser->candidates->preferred_job_types;
                                    }
                                }
                            @endphp

                            @if(count($educations) > 0)
                                <div class="timeline">
                                    @foreach($educations as $education)
                                    <div class="timeline-item">
                                        <div class="education-item">
                                            <div class="d-flex justify-content-between align-items-start mb-2">
                                                <div>
                                                    <h5 class="fw-bold mb-1">{{ $education['degree'] ?? 'Grau não especificado' }}</h5>
                                                    <p class="text-primary mb-1">{{ $education['institution'] ?? 'Instituição não especificada' }}</p>
                                                </div>
                                                <span class="badge-custom">
                                                    {{ \Carbon\Carbon::parse($education['start_date'])->format('m/Y') }} -
                                                    @if($education['is_current'] ?? false)
                                                        Cursando
                                                    @else
                                                        {{ $education['end_date'] ? \Carbon\Carbon::parse($education['end_date'])->format('m/Y') : 'N/A' }}
                                                    @endif
                                                </span>
                                            </div>
                                            @if($education['field'] ?? false)
                                                <p class="fw-semibold mb-2">{{ $education['field'] }}</p>
                                            @endif
                                            @if($education['description'] ?? false)
                                                <p class="mb-0 text-muted">{{ $education['description'] }}</p>
                                            @endif
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            @else
                                <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 registada.

                                </p>
                            @endif
                        </div>
                    </div>

@endif
                        @else
                            {{ $profileUser->role }}
                        @endif









            <div class="feed">
                <!-- Container dos Feeds Dinâmicos -->
                <div id="feeds-container">
                    <!-- Os feeds serão carregados aqui via AJAX -->
                    <div class="feed-loader">
                        <i class="fas fa-spinner fa-spin"></i> Carregando feeds...
                    </div>
                </div>
            </div>
        </div>


<!-- Modal para criar publicação -->
<div class="modal fade" id="createFeedModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Cabeçalho do Modal -->
            <div class="modal-header border-bottom-0">
                <h5 class="modal-title fw-bold" id="modal-title">Publicar em Todos</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-0">
                <!-- Área superior com perfil e seleção de visibilidade -->
                <div class="border-bottom px-4 py-3">
                    <div class="d-flex align-items-center">
                        <!-- Foto do perfil -->
                        <div class="me-3">
                            @if(Auth::user()->profile_picture)
                                <img src="{{ Storage::url(Auth::user()->profile_picture) }}"
                                     alt="{{ Auth::user()->name }}"
                                     class="rounded-circle"
                                     style="width: 48px; height: 48px; object-fit: cover;">
                            @else
                                <div class="rounded-circle bg-secondary d-flex align-items-center justify-content-center"
                                     style="width: 48px; height: 48px;">
                                    <span class="text-white fw-bold">
                                        {{ substr(Auth::user()->name, 0, 1) }}
                                    </span>
                                </div>
                            @endif
                        </div>

                        <!-- Nome do usuário com dropdown de visibilidade -->
                        <div class="flex-grow-1 position-relative">
                            <div class="dropdown" id="visibilityDropdown">
                                <button class="btn btn-outline-secondary btn-sm dropdown-toggle d-flex align-items-center"
                                        type="button"
                                        data-bs-toggle="dropdown"
                                        style="border-radius: 20px; padding: 6px 16px;">
                                    <span class="fw-bold">{{ Auth::user()->name }}</span>
                                </button>

                                <ul class="dropdown-menu" aria-labelledby="visibilityDropdown">
                                    <li>
                                        <a class="dropdown-item d-flex align-items-center" href="#" data-visibility="public">
                                            <i class="fas fa-globe-americas me-2"></i>
                                            <div>
                                                <div class="fw-bold">Público</div>
                                                <small class="text-muted">Qualquer pessoa pode ver</small>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item d-flex align-items-center" href="#" data-visibility="connections">
                                            <i class="fas fa-user-friends me-2"></i>
                                            <div>
                                                <div class="fw-bold">Apenas Conexões</div>
                                                <small class="text-muted">Apenas suas conexões</small>
                                            </div>
                                        </a>
                                    </li>
                                    @if(Auth::user()->isRecruiter())
                                    <li>
                                        <a class="dropdown-item d-flex align-items-center" href="#" data-visibility="company_only">
                                            <i class="fas fa-building me-2"></i>
                                            <div>
                                                <div class="fw-bold">Apenas Empresa</div>
                                                <small class="text-muted">Apenas membros da empresa</small>
                                            </div>
                                        </a>
                                    </li>
                                    @endif
                                    <li>
                                        <a class="dropdown-item d-flex align-items-center" href="#" data-visibility="private">
                                            <i class="fas fa-lock me-2"></i>
                                            <div>
                                                <div class="fw-bold">Privado</div>
                                                <small class="text-muted">Apenas você</small>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>

                            <!-- Mostra a visibilidade selecionada -->
                            <div class="mt-1 small text-muted" id="currentVisibilityText">
                                <i class="fas fa-globe-americas me-1"></i>
                                <span>Público</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Formulário -->
                <form id="feed-form" class="p-4">
                    @csrf
                    <input type="hidden" name="content_type" id="content_type">
                    <input type="hidden" name="visibility" id="visibility" value="public">

                    <!-- Campos específicos (título) - visível apenas para certos tipos -->
                    <div id="title-fields" style="display: none;">
                        <div class="mb-3">
                            <label for="title" class="form-label">Título</label>
                            <input type="text" class="form-control" id="title" name="title">
                            <div class="form-text" id="title-help">Obrigatório para vagas, artigos e anúncios</div>
                        </div>
                    </div>

                    <!-- Textarea principal -->
                    <div class="mb-3">
                        <textarea class="form-control border-0 shadow-none"
                                  id="content"
                                  name="content"
                                  rows="6"
                                  placeholder="Sobre o que você quer falar?"
                                  style="resize: none; font-size: 1.1rem;"></textarea>
                    </div>

                    <!-- Campos específicos para vagas -->
                    <div id="job-fields" style="display: none;">
                        <div class="mb-3">
                            <label for="job_category_id" class="form-label">Categoria</label>
                            <select class="form-control" id="job_category_id" name="job_category_id">
                                <option value="">Selecione uma categoria</option>
                                <!-- Categorias serão carregadas via AJAX -->
                            </select>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="job_location" class="form-label">Localização</label>
                                <input type="text" class="form-control" id="job_location" name="job_location">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="job_type" class="form-label">Tipo de Trabalho</label>
                                <select class="form-control" id="job_type" name="job_type">
                                    <option value="">Selecione</option>
                                    <option value="full_time">Tempo Integral</option>
                                    <option value="part_time">Meio Período</option>
                                    <option value="contract">Contrato</option>
                                    <option value="remote">Remoto</option>
                                    <option value="hybrid">Híbrido</option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="job_salary_range" class="form-label">Faixa Salarial</label>
                                <input type="text" class="form-control" id="job_salary_range" name="job_salary_range" placeholder="Ex: 50.000 - 80.000 MZN">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="job_deadline" class="form-label">Data Limite</label>
                                <input type="date" class="form-control" id="job_deadline" name="job_deadline">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="job_experience_level" class="form-label">Nível de Experiência</label>
                            <select class="form-control" id="job_experience_level" name="job_experience_level">
                                <option value="">Selecione</option>
                                <option value="entry">Iniciante</option>
                                <option value="mid">Intermediário</option>
                                <option value="senior">Sênior</option>
                                <option value="executive">Executivo</option>
                            </select>
                        </div>
                    </div>

                    <!-- Botões de ação e anexos -->
                    <div class="border-top pt-3">
                        <!-- Botões de ação -->
                        <div class="d-flex align-items-center mb-3">
                            <button type="button" class="btn btn-outline-secondary btn-sm me-2" id="addImageBtn">
                                <i class="fas fa-image"></i> Foto
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm me-2" id="addVideoBtn">
                                <i class="fas fa-video"></i> Vídeo
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="addDocumentBtn">
                                <i class="fas fa-file-alt"></i> Documento
                            </button>
                        </div>

                        <!-- Campo de arquivos (escondido) -->
                        <div class="mb-3" id="fileInputContainer" style="display: none;">
                            <input type="file" class="form-control" id="attachments" name="attachments[]" multiple>
                            <div class="form-text">Você pode adicionar imagens, PDFs ou documentos</div>
                        </div>

                        <!-- Contador e validação -->
                        <div class="mb-2" id="fileValidation" style="display: none;">
                            <small class="text-muted" id="fileCountText">0 arquivo(s) selecionado(s)</small>
                            <small class="text-danger d-none" id="fileErrorText"></small>
                        </div>

                        <!-- Prévia de arquivos -->
                        <div id="filePreview" class="mb-3"></div>
                    </div>
                </form>
            </div>

            <!-- Rodapé do Modal -->
            <div class="modal-footer border-top-0">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="submit-feed">Publicar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal para visualização de imagens -->
<div class="modal fade image-modal" id="imageViewerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header border-0">
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <div class="image-counter text-center mb-2">
                    <span id="currentImageIndex">1</span> de
                    <span id="totalImages">1</span>
                </div>

                <button class="nav-btn prev" id="prevImageBtn">
                    <i class="fas fa-chevron-left"></i>
                </button>

                <div class="modal-image-container text-center">
                    <img id="modalImageView" class="modal-image d-none" src="" alt="">
                    <video id="modalVideoView" class="modal-video d-none" controls></video>
                </div>

                <button class="nav-btn next" id="nextImageBtn">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>
</div>

@endsection


@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>

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

document.addEventListener('DOMContentLoaded', function() {
    const userId = {{ $profileUser->id }};
    console.log('Carregando feeds do usuário:', userId);

    // Função para carregar feeds
    function loadUserFeeds() {
        axios.get(`${baseUrl}/feeds?user_id=` + userId)
            .then(response => {
                if (response.data.success && response.data.feeds && response.data.feeds.data) {
                    renderFeeds(response.data.feeds.data);
                } else {
                    const container = document.getElementById('feeds-container');
                    if (container) {
                        container.innerHTML = '<div class="text-center py-5">Nenhuma publicação</div>';
                    }
                }
            })
            .catch(error => {
                console.error('Erro:', error);
            });
    }

    // Função para renderizar feeds
    function renderFeeds(feeds) {
        const feedsContainer = document.getElementById('feeds-container');
        if (!feedsContainer) return;

        if (!feeds || feeds.length === 0) {
            feedsContainer.innerHTML = '<div class="feed-empty">Nenhum feed disponível</div>';
            return;
        }

        let html = '';
        feeds.forEach(feed => html += renderFeedItem(feed));
        feedsContainer.innerHTML = html;

        // Ativar botões
        activateFeedButtons();
    }

    // Função para renderizar UM feed
    function renderFeedItem(feed) {
        const authorName = feed.user?.name || 'Usuário';
        const authorAvatar = feed.user?.avatar_url || `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(authorName)}&backgroundColor=ffdfbf`;
        const timeAgo = formatTimeAgo(feed.created_at);

        let typeIcon = 'fa-newspaper';
        let typeText = 'Publicação';
        switch(feed.content_type) {
            case 'job': typeIcon = 'fa-briefcase'; typeText = 'Vaga'; break;
            case 'article': typeIcon = 'fa-file-alt'; typeText = 'Artigo'; break;
        }

        // Processar attachments
        let mediaHtml = '';
        const attachments = feed.attachments || [];
        const mediaArray = attachments.map(a => ({
            type: a.file_type === 'video' ? 'video' : 'image',
            src: a.url || `${window.location.origin}/storage/${a.path}`,
            filename: a.original_filename || ''
        }));

        // Gerar HTML das imagens/vídeos
        if (mediaArray.length === 1) {
            const it = mediaArray[0];
            if (it.type === 'image') {
                mediaHtml = `
                    <div class="single-image-container">
                        <img src="${it.src}" alt="${it.filename}" class="single-image" onerror="this.onerror=null;this.src='/images/placeholder.jpg'">
                    </div>`;
            } else {
                mediaHtml = `
                    <div class="single-video-container">
                        <video class="single-video" controls>
                            <source src="${it.src}" type="video/mp4">
                        </video>
                    </div>`;
            }
        } else if (mediaArray.length > 1) {
            mediaHtml = '<div class="images-grid-container"><div class="images-grid">';
            mediaArray.forEach((it, i) => {
                if (it.type === 'image') {
                    mediaHtml += `<div class="grid-item"><img src="${it.src}" class="grid-image" onerror="this.onerror=null;this.src='/images/placeholder.jpg'"></div>`;
                } else {
                    mediaHtml += `<div class="grid-item"><video class="grid-image" preload="metadata"><source src="${it.src}" type="video/mp4"></video></div>`;
                }
            });
            mediaHtml += '</div></div>';
        }

        // Conteúdo do texto
        const content = feed.content || '';
        let contentHtml = content.length > 150
            ? `<div class="text-collapsible-container"><div class="text-collapsible collapsed">${content.substring(0, 150)}...</div><button class="toggle-text-btn">ver mais</button></div>`
            : `<p style="text-align: justify;">${content}</p>`;

        // HTML final
        return `
        <div class="content-card" data-feed-id="${feed.id}">
            <div class="card-header">
              <img src="${feed.author_avatar}" alt="${authorName}" class="card-avatar">

                <div>
                    <div class="card-title">${authorName}</div>
                    <div class="card-subtitle">
                        ${feed.city || ''} ${feed.country ? '• ' + feed.country : ''} • ${timeAgo}
                        <span style="margin-left: 10px; color: #666;">
                            <i class="fas ${typeIcon}"></i> ${typeText}
                        </span>
                    </div>
                </div>
            </div>

            <div class="card-content">
                ${feed.title ? `<h6>${feed.title}</h6>` : ''}
                ${contentHtml}

                ${feed.content_type === 'job' ? `
                    <div class="job-info mt-2 p-2 bg-light rounded">
                        <small>
                            ${feed.job_location ? `<i class="fas fa-map-marker-alt"></i> ${feed.job_location}` : ''}
                            ${feed.job_type ? ` • ${feed.job_type}` : ''}
                            ${feed.job_salary_range ? ` • ${feed.job_salary_range}` : ''}
                        </small>
                    </div>
                ` : ''}

                ${mediaHtml}
            </div>

           <div class="card-actions">
                    <div class="reaction-wrapper" style="position: relative; display: inline-block;">
    <button class="action-btn main-reaction-btn" data-feed-id="${feed.id}">
        <i class="far fa-thumbs-up"></i> Reagir
    </button>

    <div class="reaction-box">
        <button class="reaction-option" data-type="gostei" data-feed-id="${feed.id}">
            👍 <small>Gostei</small>
            <span class="count">${feed.reaction_gostei_count || 0}</span>
        </button>

        <button class="reaction-option" data-type="entendi" data-feed-id="${feed.id}">
            💡 <small>Entendi</small>
            <span class="count">${feed.reaction_entendi_count || 0}</span>
        </button>

        <button class="reaction-option" data-type="apreciei" data-feed-id="${feed.id}">
            ❤️ <small>Apreciei</small>
            <span class="count">${feed.reaction_apreciei_count || 0}</span>
        </button>
    </div>
</div>
        </div>
        `;
    }

    // Função para tempo decorrido
    function formatTimeAgo(dateString) {
        const date = new Date(dateString);
        const now = new Date();
        const diffMs = now - date;
        const diffMins = Math.floor(diffMs / 60000);
        const diffHours = Math.floor(diffMs / 3600000);
        const diffDays = Math.floor(diffMs / 86400000);
        if (diffMins < 1) return 'agora mesmo';
        if (diffMins < 60) return `há ${diffMins} min`;
        if (diffHours < 24) return `há ${diffHours} h`;
        if (diffDays < 7) return `há ${diffDays} dias`;
        return date.toLocaleDateString('pt-PT');
    }

    // Ativar botões
    function activateFeedButtons() {
        // Botões "ver mais"
        document.querySelectorAll('.toggle-text-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const container = this.closest('.text-collapsible-container');
                const textEl = container.querySelector('.text-collapsible');
                const isCollapsed = textEl.classList.contains('collapsed');

                if (isCollapsed) {
                    textEl.classList.remove('collapsed');
                    textEl.classList.add('expanded');
                    this.textContent = 'ver menos';
                } else {
                    textEl.classList.remove('expanded');
                    textEl.classList.add('collapsed');
                    this.textContent = 'ver mais';
                }
            });
        });

        // Botões de like
        document.querySelectorAll('.like-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const feedId = this.dataset.feedId;
                const countSpan = this.querySelector('.reaction-count');
                const current = parseInt(countSpan.textContent) || 0;
                countSpan.textContent = current + 1;
                this.classList.add('active');
            });
        });
    }

    // Executar
    loadUserFeeds();


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

    const formData = new FormData();
    formData.append('banner', 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,
        success: function(response) {
            if (response.success) {
                // ATUALIZA O BACKGROUND DA DIV EM TEMPO REAL
                $('.profile-covers').css({
                    'background-image': 'url(' + response.url + ')',
                    'background-size': 'cover',
                    'background-position': 'center'
                });
                alert('Banner atualizado!');
            }
        },
        error: function() {
            alert('Erro ao carregar banner.');
        }
    });
});

});
</script>
@endpush