@extends('layouts.user')

@section('title', 'NurseConnect')

@push('styles')
<style>
/* Critical Connect layout – fallback if connect.css (public/css/connect.css or CDN) is slow */
.nurse-connect-layout.dt-connect .dt-container { max-width: 100%; margin: 0 auto; padding: 0; }
.nurse-connect-layout.dt-connect .dt-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 768px) {
    .nurse-connect-layout.dt-connect .dt-grid { grid-template-columns: 220px minmax(0, 1fr); }
    .nurse-connect-layout.dt-connect .dt-right { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .nurse-connect-layout.dt-connect .dt-grid { grid-template-columns: 1fr minmax(0, 552px) 1fr; gap: 24px; }
    .nurse-connect-layout.dt-connect .dt-left { grid-column: 1; }
    .nurse-connect-layout.dt-connect .dt-center { grid-column: 2; }
    .nurse-connect-layout.dt-connect .dt-right { grid-column: 3; grid-row: 1; }
}
.nurse-connect-layout.dt-connect .dt-card { background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.12); border: 1px solid #e0dfdc; overflow: hidden; }
</style>
@endpush

@section('content')

<script>
document.addEventListener('DOMContentLoaded', function() {
    const postsContainer = document.getElementById('posts-container');
    const loadingIndicator = document.getElementById('loading-indicator');
    const paginationData = document.getElementById('pagination-data');
    const mainFeed = document.getElementById('mainFeed');
    const newPostsBanner = document.getElementById('new-posts-banner');
    const newPostsCount = document.getElementById('new-posts-count');
    
    let isLoading = false;
    let currentPage = parseInt(paginationData.dataset.currentPage);
    let lastPage = parseInt(paginationData.dataset.lastPage);
    let latestPostId = null;
    let checkInterval = null;
    
    // Get the latest post ID on page load
    const firstPost = postsContainer.querySelector('[data-post-id]');
    if (firstPost) {
        latestPostId = firstPost.dataset.postId;
    }
    
    // Check for new posts every 30 seconds
    checkInterval = setInterval(checkForNewPosts, 30000);
    
    // Infinite scroll handler
    mainFeed.addEventListener('scroll', function() {
        if (mainFeed.scrollTop + mainFeed.clientHeight >= mainFeed.scrollHeight - 200) {
            loadMorePosts();
        }
    });
    
    function checkForNewPosts() {
        const url = new URL(window.location.href);
        url.searchParams.set('page', 1);
        url.searchParams.set('check_new', latestPostId);
        
        fetch(url, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.has_new && data.count > 0) {
                newPostsCount.textContent = data.count;
                newPostsBanner.style.display = 'block';
            }
        })
        .catch(error => console.error('Error checking for new posts:', error));
    }
    
    window.loadNewPosts = function() {
        newPostsBanner.style.display = 'none';
        mainFeed.scrollTop = 0;
        
        const url = new URL(window.location.href);
        url.searchParams.set('page', 1);
        
        fetch(url, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.text())
        .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const newPosts = doc.querySelectorAll('#posts-container > *');
            
            // Clear existing posts and add new ones
            postsContainer.innerHTML = '';
            newPosts.forEach(post => {
                postsContainer.appendChild(post.cloneNode(true));
            });
            
            // Update latest post ID
            const firstPost = postsContainer.querySelector('[data-post-id]');
            if (firstPost) {
                latestPostId = firstPost.dataset.postId;
            }
            
            // Update pagination
            const newPaginationData = doc.getElementById('pagination-data');
            if (newPaginationData) {
                currentPage = parseInt(newPaginationData.dataset.currentPage);
                lastPage = parseInt(newPaginationData.dataset.lastPage);
            }
        })
        .catch(error => console.error('Error loading new posts:', error));
    };
    
    function loadMorePosts() {
        if (isLoading || currentPage >= lastPage) {
            return;
        }
        
        isLoading = true;
        loadingIndicator.style.display = 'block';
        
        const nextPage = currentPage + 1;
        const url = new URL(window.location.href);
        url.searchParams.set('page', nextPage);
        
        fetch(url, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.text())
        .then(html => {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const newPosts = doc.querySelectorAll('#posts-container > *');
            
            newPosts.forEach(post => {
                postsContainer.appendChild(post.cloneNode(true));
            });
            
            const newPaginationData = doc.getElementById('pagination-data');
            if (newPaginationData) {
                currentPage = parseInt(newPaginationData.dataset.currentPage);
                lastPage = parseInt(newPaginationData.dataset.lastPage);
            }
            
            loadingIndicator.style.display = 'none';
            isLoading = false;
        })
        .catch(error => {
            console.error('Error loading posts:', error);
            loadingIndicator.style.display = 'none';
            isLoading = false;
        });
    }

    // Intercept feed tab clicks and load feed via AJAX to avoid full page reloads
    (function() {
        var moreFeedKeys = ['connections','followers','following','groups','events','newsletters','search'];
        function setActiveFeedTab(url) {
            const normalized = url.replace(window.location.origin, '');
            document.querySelectorAll('.feed-tab').forEach(t => t.classList.remove('feed-tab-active'));
            const tabs = Array.from(document.querySelectorAll('.feed-tab[href]'));
            const match = tabs.find(t => {
                try { return (t.getAttribute('href') || '').replace(window.location.origin, '') === normalized; } catch(e) { return false; }
            });
            if (match) match.classList.add('feed-tab-active');
            else {
                try {
                    const feedParam = new URL(url, window.location.origin).searchParams.get('feed');
                    if (feedParam && moreFeedKeys.indexOf(feedParam) !== -1) {
                        const moreTrigger = document.getElementById('feedMoreTrigger');
                        if (moreTrigger) moreTrigger.classList.add('feed-tab-active');
                    }
                } catch(e) {}
            }
        }

        function loadFeed(urlString, pushState = true) {
            const url = new URL(urlString, window.location.origin);

            // If Livewire is available, prefer emitting events to update the feed state and let Livewire re-render the feed
            if (window.Livewire && typeof window.Livewire.emit === 'function') {
                const params = new URLSearchParams(url.search);
                const feed = params.get('feed');
                const q = params.get('q') || params.get('search');
                const country = params.get('suggest_country') || params.get('country');
                const specialty = params.get('suggest_specialty') || params.get('specialty');

                if (feed) window.Livewire.emit('setFeed', feed);
                if (q !== null) window.Livewire.emit('setQ', q);
                if (country !== null) window.Livewire.emit('setCountry', country);
                if (specialty !== null) window.Livewire.emit('setSpecialty', specialty);

                setActiveFeedTab(url.pathname + url.search);
                if (pushState) {
                    try { history.pushState({ href: url.href }, '', url.href); } catch (e) {}
                }

                return;
            }

            fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then(r => r.text())
                .then(html => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');

                    // Replace posts
                    const newPosts = doc.querySelectorAll('#posts-container > *');
                    postsContainer.innerHTML = '';
                    newPosts.forEach(p => postsContainer.appendChild(p.cloneNode(true)));

                    // Update pagination data
                    const newPaginationData = doc.getElementById('pagination-data');
                    if (newPaginationData) {
                        currentPage = parseInt(newPaginationData.dataset.currentPage);
                        lastPage = parseInt(newPaginationData.dataset.lastPage);
                    } else {
                        currentPage = 1; lastPage = 1;
                    }

                    // Update latest post id
                    const firstPost = postsContainer.querySelector('[data-post-id]');
                    if (firstPost) latestPostId = firstPost.dataset.postId;

                    // Update suggestions area (if server returned search results)
                    const suggestions = doc.getElementById('suggestionsList');
                    if (suggestions) {
                        const suggestionsListEl = document.getElementById('suggestionsList');
                        if (suggestionsListEl) suggestionsListEl.innerHTML = suggestions.innerHTML;
                    }

                    // Update active tab styling
                    setActiveFeedTab(url.pathname + url.search);

                    // Optionally update the address bar
                    if (pushState) {
                        try { history.pushState({ href: url.href }, '', url.href); } catch (e) {}
                    }
                })
                .catch(err => console.error('Error loading feed:', err));
        }

        document.addEventListener('click', function(e) {
            const moreTrigger = document.getElementById('feedMoreTrigger');
            const moreDropdown = document.getElementById('feedMoreDropdown');
            if (moreTrigger && moreDropdown) {
                if (e.target === moreTrigger || moreTrigger.contains(e.target)) {
                    e.preventDefault();
                    const open = moreDropdown.getAttribute('aria-hidden') !== 'false';
                    moreDropdown.setAttribute('aria-hidden', open ? 'false' : 'true');
                    moreTrigger.setAttribute('aria-expanded', open ? 'true' : 'false');
                } else if (!moreDropdown.contains(e.target)) {
                    moreDropdown.setAttribute('aria-hidden', 'true');
                    moreTrigger.setAttribute('aria-expanded', 'false');
                }
            }
            const tab = e.target.closest('.feed-tab');
            if (!tab) return;
            if (tab === moreTrigger || (moreTrigger && moreTrigger.contains(tab))) return;

            // Only intercept tabs explicitly marked for AJAX behavior
            if (!tab.hasAttribute('data-ajax') && !tab.classList.contains('ajax-tab')) {
                return;
            }
            const href = tab.getAttribute('href');
            if (!href || href.indexOf('http') === 0) return;
            e.preventDefault();
            loadFeed(href);
        });

        window.addEventListener('popstate', function(e) {
            const href = (e.state && e.state.href) ? e.state.href : window.location.href;
            loadFeed(href, false);
        });
    })();

    // Cleanup interval on page unload
    window.addEventListener('beforeunload', function() {
        if (checkInterval) {
            clearInterval(checkInterval);
        }
    });

    // Infinite scroll for suggestions
    @auth
    const suggestionsList = document.getElementById('suggestionsList');
    const suggestionsLoading = document.getElementById('suggestionsLoading');
    let suggestionsPage = {{ method_exists($suggestedNurses, 'currentPage') ? $suggestedNurses->currentPage() : 1 }};
    let suggestionsLastPage = {{ method_exists($suggestedNurses, 'lastPage') ? $suggestedNurses->lastPage() : 1 }};
    let isSuggestionsLoading = false;

    if (suggestionsList) {
        suggestionsList.addEventListener('scroll', function() {
            if (isSuggestionsLoading || suggestionsPage >= suggestionsLastPage) {
                return;
            }

            const scrollTop = suggestionsList.scrollTop;
            const scrollHeight = suggestionsList.scrollHeight;
            const clientHeight = suggestionsList.clientHeight;

            if (scrollTop + clientHeight >= scrollHeight - 100) {
                loadMoreSuggestions();
            }
        });

        // prefetch statuses for visible suggestions on load
        setTimeout(() => { prefetchConnectionStatuses(); }, 200);
    }

    function prefetchConnectionStatuses() {
        const elems = document.querySelectorAll('.status-badge[data-user-id]');
        const ids = [...new Set(Array.from(elems).map(e => e.dataset.userId))];
        if (!ids.length) return;

        const url = new URL('{{ route('api.connections.status', [], false) }}', window.location.origin);
        ids.forEach(id => url.searchParams.append('ids[]', id));

        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(r => r.json())
            .then(data => {
                if (data.success && data.statuses) {
                    Object.keys(data.statuses).forEach(k => {
                        const item = data.statuses[k];
                        const wrapper = document.querySelector(`.status-badge[data-user-id="${k}"]`);
                        const innerBadge = wrapper ? wrapper.querySelector('.badge') : null;
                        const mutualBtn = wrapper ? wrapper.querySelector('.mutual-count[data-user-id="' + k + '"]') : document.querySelector(`.mutual-count[data-user-id="${k}"]`);
                        const connectBtn = document.querySelector(`.ajax-connection-form[data-user-id="${k}"] button.connect-button, .ajax-connection-form[data-user-id="${k}"] .connect-label`);

                        if (innerBadge) {
                            innerBadge.textContent = item.status === 'connected' ? 'Connected' : (item.status === 'pending' ? 'Pending' : 'Connect');
                            innerBadge.classList.remove('badge-connected','badge-pending','badge-default');
                            innerBadge.classList.add(item.status === 'connected' ? 'badge-connected' : (item.status === 'pending' ? 'badge-pending' : 'badge-default'));
                        }
                        if (mutualBtn) {
                            if (item.mutual_count && item.mutual_count > 0) {
                                mutualBtn.textContent = item.mutual_count === 1 ? '1 mutual' : `${item.mutual_count} mutuals`;
                                mutualBtn.style.display = '';
                                mutualBtn.setAttribute('aria-expanded', 'false');
                            } else if (mutualBtn) {
                                mutualBtn.textContent = '';
                                mutualBtn.style.display = 'none';
                            }
                        }
                        if (connectBtn) {
                            if (item.status === 'connected') {
                                connectBtn.textContent = 'Connected';
                                connectBtn.setAttribute('disabled', true);
                            } else if (item.status === 'pending') {
                                connectBtn.textContent = 'Pending';
                                connectBtn.setAttribute('disabled', true);
                            } else {
                                // ensure enabled
                                connectBtn.textContent = 'Connect';
                                connectBtn.removeAttribute('disabled');
                            }
                        }
                    });

                    // attach mutual popover handlers
                    document.querySelectorAll('.mutual-count[data-user-id]').forEach(el => {
                        if (el._hasMutualHandler) return;
                        el._hasMutualHandler = true;
                        el.addEventListener('click', (ev) => {
                            const id = el.dataset.userId;
                            // fetch mutuals
                            fetch(`{{ url('/') }}` + `/connections/${id}/mutuals`, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                                .then(r => r.json())
                                .then(d => {
                                    if (d.success) showMutualPopover(el, d.mutuals);
                                }).catch(err => console.error('Failed to load mutuals', err));
                        });
                    });
                }
            }).catch(err => console.error('Status prefetch failed', err));
    }

    // Intercept the sidebar form and perform an AJAX search for suggestions
    const filterForm = document.querySelector('.filter-form');
    if (filterForm) {
        filterForm.addEventListener('submit', function(e) {
            e.preventDefault();
            performSuggestionSearch();
        });

        // Clear search button: clears filters and reloads suggestions
        const clearBtn = document.getElementById('clear-suggestions-search');
        if (clearBtn) {
            clearBtn.addEventListener('click', function(ev) {
                ev.preventDefault();
                // Clear form inputs
                filterForm.querySelectorAll('input[name="search"], input[name="suggest_search"]').forEach(i => i.value = '');
                filterForm.querySelectorAll('select[name="suggest_country"], select[name="suggest_specialty"]').forEach(s => s.selectedIndex = 0);
                filterForm.querySelectorAll('input[type="checkbox"').forEach(c => c.checked = false);

                // Reload suggestions without filters
                performSuggestionSearch(1);
            });
        }

        // update heading/title with counts after AJAX response
        // will be handled in performSuggestionSearch's fetch then() block

    }

    function performSuggestionSearch(page = 1) {
        if (!suggestionsList) return;
        isSuggestionsLoading = true;
        suggestionsLoading.style.display = 'block';

        const url = new URL('{{ route('nurse.connect.suggestions.load') }}', window.location.origin);
        url.searchParams.set('suggest_page', page);

        // Preserve filter params from the form inputs
        const formData = new FormData(filterForm);
        for (const [key, value] of formData.entries()) {
            if (value !== null && value !== '') {
                url.searchParams.set(key, value);
            }
        }

        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(r => r.json())
            .then(data => {
                suggestionsList.innerHTML = data.html || '';
                suggestionsPage = data.currentPage || 1;
                suggestionsLastPage = data.lastPage || 1;

                // update heading/title and count
                const heading = document.getElementById('suggestionsHeadingTitle');
                const clearBtnLocal = document.getElementById('clear-suggestions-search');
                if (heading) {
                    const title = data.title || ((formData.get('search') || '').trim() ? `Search results for '${(formData.get('search')|| '').trim()}'` : 'People you may know');
                    const count = (data.count !== undefined) ? data.count : '';
                    heading.textContent = count !== '' ? `${title} (${count})` : title;
                    if (clearBtnLocal) {
                        if ((formData.get('search') || '').trim()) {
                            clearBtnLocal.style.display = '';
                        } else {
                            clearBtnLocal.style.display = 'none';
                        }
                    }
                }
            })
            .catch(err => console.error('Suggestion search failed', err))
            .finally(() => { suggestionsLoading.style.display = 'none'; isSuggestionsLoading = false; });
    }

    function loadMoreSuggestions() {
        if (isSuggestionsLoading || suggestionsPage >= suggestionsLastPage) {
            return;
        }

        isSuggestionsLoading = true;
        suggestionsLoading.style.display = 'block';

        const nextPage = suggestionsPage + 1;
        const url = new URL('{{ route('nurse.connect.suggestions.load') }}', window.location.origin);
        url.searchParams.set('suggest_page', nextPage);

        // Preserve existing filter parameters
        const params = new URLSearchParams(window.location.search);
        ['suggest_country', 'suggest_specialty', 'suggest_experience', 'suggest_nclex', 'suggest_relocate'].forEach(param => {
            if (params.has(param)) {
                url.searchParams.set(param, params.get(param));
            }
        });

        fetch(url, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.html) {
                suggestionsList.insertAdjacentHTML('beforeend', data.html);
                suggestionsPage = data.currentPage;
                suggestionsLastPage = data.lastPage;
            }

            suggestionsLoading.style.display = 'none';
            isSuggestionsLoading = false;
        })
        .catch(error => {
            console.error('Error loading suggestions:', error);
            suggestionsLoading.style.display = 'none';
            isSuggestionsLoading = false;
        });
    }

    @endauth

    // Handle notification deep-link: scroll to post & expand comments
    (function() {
        var params = new URLSearchParams(window.location.search);
        var highlightId = params.get('highlight');
        var action = params.get('action');
        if (!highlightId) {
            // Also support plain hash-based navigation (#post-123)
            var hash = window.location.hash;
            var hashMatch = hash.match(/^#post-(\d+)$/);
            if (hashMatch) highlightId = hashMatch[1];
        }
        if (!highlightId) return;

        function scrollToAndExpand() {
            var postEl = document.getElementById('post-' + highlightId);
            if (!postEl) {
                // Post might not be loaded yet (e.g. on a later page). Retry a few times.
                return false;
            }

            // Scroll the post into view
            setTimeout(function() {
                postEl.scrollIntoView({ behavior: 'smooth', block: 'center' });

                // Add a temporary highlight effect
                postEl.style.transition = 'box-shadow 0.3s ease';
                postEl.style.boxShadow = '0 0 0 3px rgba(59, 130, 246, 0.5)';
                setTimeout(function() {
                    postEl.style.boxShadow = '';
                }, 3000);
            }, 300);

            // For comment notifications, expand the comment section
            if (action === 'comment') {
                var commentSection = document.getElementById('comment-form-' + highlightId);
                if (commentSection && commentSection.style.display === 'none') {
                    commentSection.style.display = 'block';
                }
            }

            return true;
        }

        // Try immediately, then with retries for AJAX-loaded content
        if (!scrollToAndExpand()) {
            var retries = 0;
            var maxRetries = 10;
            var retryInterval = setInterval(function() {
                retries++;
                if (scrollToAndExpand() || retries >= maxRetries) {
                    clearInterval(retryInterval);
                }
            }, 500);
        }

        // Clean up URL params after handling (replace state to remove highlight/action from URL)
        try {
            var cleanUrl = new URL(window.location.href);
            cleanUrl.searchParams.delete('highlight');
            cleanUrl.searchParams.delete('action');
            window.history.replaceState({}, '', cleanUrl.pathname + cleanUrl.hash + cleanUrl.search);
        } catch(e) {}
    })();
});

// Post interaction functions
function toggleLike(postId, button) {
    if (!@json(auth()->check())) {
        window.location.href = '{{ route('login') }}';
        return;
    }

    button.style.pointerEvents = 'none';
    button.style.opacity = '0.6';

    fetch(`/posts/${postId}/like`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        const svg = button.querySelector('svg');
        const count = button.querySelector('.like-count');
        const dislikeCount = button.closest('.flex').querySelector('.dislike-count');
        const dislikeButton = button.closest('.flex').querySelector('[data-disliked]');
        
        if (data.liked) {
            button.classList.add('liked', 'text-red-600');
            button.dataset.liked = 'true';
            svg.setAttribute('fill', 'currentColor');
            button.classList.add('action-animate-like');
            setTimeout(function() { button.classList.remove('action-animate-like'); }, 450);
            // Remove dislike styling if present
            if (dislikeButton) {
                dislikeButton.classList.remove('text-slate-700', 'font-semibold');
                dislikeButton.dataset.disliked = 'false';
                const dislikeSvg = dislikeButton.querySelector('svg');
                dislikeSvg.setAttribute('fill', 'none');
            }
        } else {
            button.classList.remove('liked', 'text-red-600');
            button.dataset.liked = 'false';
            svg.setAttribute('fill', 'none');
        }
        
        count.textContent = data.likes_count;
        if (dislikeCount) dislikeCount.textContent = data.dislikes_count;
        
        button.style.pointerEvents = 'auto';
        button.style.opacity = '1';
    })
    .catch(error => {
        console.error('Error:', error);
        button.style.pointerEvents = 'auto';
        button.style.opacity = '1';
    });
}

// Connection actions (AJAX)
function sendConnectionRequest(userId, btn) {
    if (!@json(auth()->check())) {
        window.location.href = '{{ route('login') }}';
        return;
    }
    btn.disabled = true;
    const originalText = btn.textContent;
    fetch('{{ url('/connections') }}/' + userId, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').getAttribute('content'),
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    }).then(r => r.json().then(data => ({ status: r.status, data })))
    .then(({ status, data }) => {
        if (status === 429) {
            const message = data?.message || 'Please wait before re-requesting a declined connection';
            const retry = data?.retry_after ?? null;
            showConnectionCooldown(btn, message, retry);
            return;
        }

        if (status >= 400) {
            const message = data?.message || 'An error occurred. Please try again.';
            alert(message);
            return;
        }

        if (data && data.success) {
            btn.textContent = data.status === 'pending' ? 'Pending' : 'Connected';
        }
    }).catch((err) => {
        console.error('Connection request failed', err);
        // show a short inline toast on generic failure
        showConnectionCooldown(btn, 'Failed to send request. Please try again.', 6);
    }).finally(() => btn.disabled = false);
}

// Show an inline toast message and optional countdown for a connection cooldown
function showConnectionCooldown(btn, message, retrySeconds) {
    let container = document.getElementById('connection-toast-container');
    if (!container) {
        container = document.createElement('div');
        container.id = 'connection-toast-container';
        document.body.appendChild(container);
    }

    const toast = document.createElement('div');
    toast.className = 'connection-toast';

    const text = document.createElement('div');
    text.textContent = message;

    const countdown = document.createElement('div');
    countdown.className = 'connection-toast-countdown';

    toast.appendChild(text);
    toast.appendChild(countdown);
    container.appendChild(toast);

    // disable button and show temporary state
    btn.disabled = true;
    btn.dataset.originalText = btn.textContent;

    let end = Date.now() + (retrySeconds && Number(retrySeconds) > 0 ? Number(retrySeconds) * 1000 : 6000);

    function formatTime(sec) {
        const hrs = Math.floor(sec / 3600);
        const mins = Math.floor((sec % 3600) / 60);
        const secs = sec % 60;
        if (hrs > 0) return `${hrs}h ${mins}m`;
        if (mins > 0) return `${mins}m ${secs}s`;
        return `${secs}s`;
    }

    function update() {
        const remaining = Math.max(0, Math.ceil((end - Date.now()) / 1000));
        if (remaining <= 0) {
            cleanup();
            return;
        }
        const formatted = formatTime(remaining);
        countdown.textContent = `Try again in ${formatted}`;
        btn.textContent = `Wait ${formatted}`;
    }

    function cleanup() {
        btn.disabled = false;
        btn.textContent = btn.dataset.originalText || 'Connect';
        if (toast.parentNode) toast.parentNode.removeChild(toast);
        clearInterval(intervalId);
    }

    update();
    const intervalId = setInterval(update, 1000);
    // safety: restore after 25 hours in case something goes wrong
    setTimeout(() => { if (btn.disabled) cleanup(); }, (24 * 3600 + 30) * 1000);
}

function showMutualPopover(triggerEl, mutuals) {
    hideMutualPopover();

    const pop = document.createElement('div');
    pop.id = 'mutual-popover';

    const closeBtn = document.createElement('button');
    closeBtn.className = 'mutual-close';
    closeBtn.innerHTML = '&times;';
    closeBtn.addEventListener('click', hideMutualPopover);
    pop.appendChild(closeBtn);

    if (!mutuals || mutuals.length === 0) {
        const empty = document.createElement('div');
        empty.className = 'mutual-empty';
        empty.textContent = 'No mutual connections';
        pop.appendChild(empty);
    } else {
        mutuals.forEach(u => {
            const item = document.createElement('div');
            item.className = 'mutual-item';
            const img = document.createElement('img');
            if (u.avatar) img.src = u.avatar; else img.src = '/images/avatar-placeholder.png';
            const a = document.createElement('a');
            a.href = '/users/' + u.id;
            a.textContent = u.name;
            item.appendChild(img);
            item.appendChild(a);
            pop.appendChild(item);
        });
    }

    document.body.appendChild(pop);

    // Positioning: place near the trigger
    const rect = triggerEl.getBoundingClientRect();
    const top = rect.bottom + window.scrollY + 6;
    const left = rect.left + window.scrollX;
    pop.style.top = top + 'px';
    pop.style.left = left + 'px';

    // close on outside click or ESC
    setTimeout(() => {
        const handler = (ev) => {
            if (!pop.contains(ev.target) && ev.target !== triggerEl) {
                hideMutualPopover();
                document.removeEventListener('click', handler);
            }
        };
        document.addEventListener('click', handler);
    }, 0);

    document.addEventListener('keydown', function escHandler(e) {
        if (e.key === 'Escape') hideMutualPopover();
    });
}

function hideMutualPopover() {
    const existing = document.getElementById('mutual-popover');
    if (existing && existing.parentNode) existing.parentNode.removeChild(existing);
}

// intercept connect buttons
document.addEventListener('click', function(e) {
    const el = e.target.closest('.ajax-connection-form .connect-button');
    if (el) {
        e.preventDefault();
        const userId = el.dataset.userId;
        sendConnectionRequest(userId, el);
    }
});

function toggleBookmark(postId, button) {
    if (!@json(auth()->check())) {
        window.location.href = '{{ route('login') }}';
        return;
    }

    button.style.pointerEvents = 'none';
    button.style.opacity = '0.6';

    fetch(`/posts/${postId}/bookmark`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        const svg = button.querySelector('svg');
        
        if (data.bookmarked) {
            button.classList.add('text-yellow-600');
            button.dataset.bookmarked = 'true';
            svg.setAttribute('fill', 'currentColor');
        } else {
            button.classList.remove('text-yellow-600');
            button.dataset.bookmarked = 'false';
            svg.setAttribute('fill', 'none');
        }
        button.style.pointerEvents = 'auto';
        button.style.opacity = '1';
    })
    .catch(error => {
        console.error('Error:', error);
        button.style.pointerEvents = 'auto';
        button.style.opacity = '1';
    });
}

function togglePostDislike(postId, button) {
    if (!@json(auth()->check())) {
        window.location.href = '{{ route('login') }}';
        return;
    }
    
    button.style.pointerEvents = 'none';
    button.style.opacity = '0.6';

    fetch(`/posts/${postId}/dislike`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        const dislikeCount = button.querySelector('.dislike-count');
        const likeCount = button.closest('.flex').querySelector('.like-count');
        const likeButton = button.closest('.flex').querySelector('[data-liked]');
        
        if (data.disliked) {
            button.classList.add('text-slate-700', 'font-semibold');
            button.dataset.disliked = 'true';
            const svg = button.querySelector('svg');
            svg.setAttribute('fill', 'currentColor');
            
            // Remove like styling if present
            if (likeButton) {
                likeButton.classList.remove('text-red-600');
                likeButton.dataset.liked = 'false';
                const likeSvg = likeButton.querySelector('svg');
                likeSvg.setAttribute('fill', 'none');
            }
        } else {
            button.classList.remove('text-slate-700', 'font-semibold');
            button.dataset.disliked = 'false';
            const svg = button.querySelector('svg');
            svg.setAttribute('fill', 'none');
        }
        
        dislikeCount.textContent = data.dislikes_count;
        if (likeCount) likeCount.textContent = data.likes_count;
        
        button.style.pointerEvents = 'auto';
        button.style.opacity = '1';
    })
    .catch(error => {
        console.error('Error:', error);
        button.style.pointerEvents = 'auto';
        button.style.opacity = '1';
    });
}

function toggleRepostMenu(postId, event) {
    event.stopPropagation();
    
    // Close all other repost menus
    document.querySelectorAll('.repost-menu').forEach(menu => {
        if (menu.id !== `repost-menu-${postId}`) {
            menu.style.display = 'none';
        }
    });
    
    const menu = document.getElementById(`repost-menu-${postId}`);
    menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
}

// Close repost menus when clicking outside
document.addEventListener('click', function(event) {
    if (!event.target.closest('.repost-wrapper')) {
        document.querySelectorAll('.repost-menu').forEach(menu => {
            menu.style.display = 'none';
        });
    }
});

function handleRepost(postId, action, event) {
    event.stopPropagation();
    
    if (!@json(auth()->check())) {
        window.location.href = '{{ route('login') }}';
        return;
    }
    
    // Close the menu
    const menu = document.getElementById(`repost-menu-${postId}`);
    menu.style.display = 'none';
    
    if (action === 'quote') {
        openQuoteModal(postId);
        return;
    }
    
    // Handle regular repost
    const wrapper = menu.closest('.repost-wrapper');
    const button = wrapper.querySelector('button[onclick*="toggleRepostMenu"]');
    
    button.style.pointerEvents = 'none';
    button.style.opacity = '0.6';

    fetch(`/posts/${postId}/repost`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        const count = button.querySelector('.repost-count');
        const menuItem = menu.querySelector('.repost-menu-item:first-child span');
        
        if (data.reposted) {
            button.classList.add('reposted', 'text-green-600');
            button.dataset.reposted = 'true';
            menuItem.textContent = 'Undo Repost';
            button.classList.add('action-animate-repost');
            setTimeout(function() { button.classList.remove('action-animate-repost'); }, 500);
        } else {
            button.classList.remove('reposted', 'text-green-600');
            button.dataset.reposted = 'false';
            menuItem.textContent = 'Repost';
        }
        
        count.textContent = data.reposts_count;
        button.style.pointerEvents = 'auto';
        button.style.opacity = '1';
    })
    .catch(error => {
        console.error('Error:', error);
        button.style.pointerEvents = 'auto';
        button.style.opacity = '1';
    });
}

function toggleCommentForm(postId) {
    const form = document.getElementById(`comment-form-${postId}`);
    if (form.style.display === 'none') {
        form.style.display = 'block';
    } else {
        form.style.display = 'none';
    }
}

function submitComment(event, postId) {
    event.preventDefault();
    
    if (!@json(auth()->check())) {
        window.location.href = '{{ route('login') }}';
        return;
    }

    const form = event.target;
    const submitBtn = form.querySelector('button[type="submit"]');
    const bodyInput = form.querySelector('input[name="body"]') || form.querySelector('textarea[name="body"]');
    const formData = new FormData(form);

    submitBtn.disabled = true;
    submitBtn.style.opacity = '0.6';
    if (bodyInput) bodyInput.disabled = true;

    fetch(`/posts/${postId}/comment`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            form.reset();
            const commentsDiv = document.getElementById(`comments-${postId}`);
            const userName = (data.comment && data.comment.user && data.comment.user.name) ? data.comment.user.name : 'You';
            const body = (data.comment && data.comment.body) ? data.comment.body : '';
            const commentHTML = `
                <div class="connect-post-comment-item">
                    <div class="connect-post-comment-body">
                        <span class="connect-post-comment-author">${(userName+'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')}</span>
                        <span class="connect-post-comment-text">${(body+'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')}</span>
                    </div>
                </div>
            `;
            commentsDiv.insertAdjacentHTML('beforeend', commentHTML);
            const commentCount = data.comments_count != null ? data.comments_count : (parseInt(commentsDiv.dataset.count || '0', 10) + 1);
            const commentBtn = document.querySelector(`#post-${postId} button[onclick*="toggleCommentForm(${postId})"] .comment-count`);
            if (commentBtn) commentBtn.textContent = commentCount;
            const sectionHeading = document.querySelector(`#comment-form-${postId} .connect-post-comments-count`);
            if (sectionHeading) sectionHeading.textContent = '(' + commentCount + ')';
        }
        submitBtn.disabled = false;
        submitBtn.style.opacity = '1';
        if (bodyInput) bodyInput.disabled = false;
    })
    .catch(error => {
        console.error('Error:', error);
        submitBtn.disabled = false;
        submitBtn.style.opacity = '1';
        if (bodyInput) bodyInput.disabled = false;
    });
}

function sharePost(postId) {
    const postEl = document.querySelector(`[data-post-id="${postId}"]`);
    const bodyText = postEl?.querySelector('.post-main-body')?.textContent?.trim() || 'Check out this post on Connect';
    const author = postEl?.querySelector('h4')?.textContent?.trim() || 'Connect';
    const url = `${window.location.origin}/connect#post-${postId}`;
    const shareData = {
        title: `${author} on Connect`,
        text: bodyText.slice(0, 140),
        url
    };

    if (navigator.share) {
        navigator.share(shareData)
            .catch(() => {
                // Fallback to copy if share is not allowed/available on the device
                if (navigator.clipboard?.writeText) {
                    navigator.clipboard.writeText(url).then(() => alert('Link copied to clipboard!')).catch(() => alert(url));
                } else {
                    alert(url);
                }
            });
    } else if (navigator.clipboard?.writeText) {
        navigator.clipboard.writeText(url).then(() => alert('Link copied to clipboard!')).catch(() => alert(url));
    } else {
        alert(url);
    }
}

function toggleReplyForm(commentId) {
    const form = document.getElementById(`reply-form-${commentId}`);
    if (form.style.display === 'none') {
        form.style.display = 'block';
    } else {
        form.style.display = 'none';
    }
}

function submitReply(event, commentId) {
    event.preventDefault();
    
    const form = event.target;
    const submitBtn = form.querySelector('button[type="submit"]');
    const textarea = form.querySelector('textarea');
    const formData = new FormData(form);

    submitBtn.disabled = true;
    submitBtn.style.opacity = '0.6';
    textarea.disabled = true;

    fetch(`/comments/${commentId}/reply`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            form.reset();
            const repliesDiv = document.getElementById(`replies-${commentId}`);
            const replyHTML = `
                <div class="flex gap-2 text-xs bg-slate-50 p-2 rounded">
                    <div class="font-semibold text-blue-600">${data.reply.user.name}</div>
                    <div class="text-slate-700">${data.reply.body}</div>
                </div>
            `;
            repliesDiv.insertAdjacentHTML('beforeend', replyHTML);
            form.style.display = 'none';
        } else {
            alert(data.message || 'Error adding reply');
        }
        
        submitBtn.disabled = false;
        submitBtn.style.opacity = '1';
        textarea.disabled = false;
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error adding reply');
        submitBtn.disabled = false;
        submitBtn.style.opacity = '1';
        textarea.disabled = false;
    });
}

// Quote Modal Functions
function openQuoteModal(postId) {
    // Reset form first to avoid clearing the post ID after setting
    document.getElementById('quoteForm').reset();
    document.getElementById('charCount').textContent = '0';

    const postCard = document.querySelector(`[data-post-id="${postId}"]`);
    if (!postCard) return;
    
    // Get post data
    const postBody = postCard.querySelector('.post-main-body')?.textContent || '';
    const authorName = postCard.querySelector('h4')?.textContent || 'Unknown';
    const authorInitials = authorName.substring(0, 2).toUpperCase();
    
    // Set the post ID
    document.getElementById('quotePostId').value = postId;
    
    // Create preview
    const preview = document.getElementById('quotedPostPreview');
    preview.innerHTML = `
        <div class="post-author">
            <div class="post-author-avatar">${authorInitials}</div>
            <span class="post-author-name">${authorName}</span>
        </div>
        <div class="post-body">${postBody}</div>
    `;
    
    // Show modal
    document.getElementById('quoteModal').style.display = 'flex';
    document.getElementById('quoteBody').focus();
}

function closeQuoteModal() {
    document.getElementById('quoteModal').style.display = 'none';
    document.getElementById('quoteForm').reset();
}

function submitQuote(event) {
    event.preventDefault();
    
    if (!@json(auth()->check())) {
        window.location.href = '{{ route('login') }}';
        return;
    }
    
    const form = event.target;
    const submitBtn = form.querySelector('button[type="submit"]');
    const textarea = form.querySelector('textarea');
    const postId = document.getElementById('quotePostId').value;
    const body = (textarea.value || '').trim();
    
    if (!postId) {
        alert('Missing post reference. Please try again.');
        closeQuoteModal();
        return;
    }
    if (!body) {
        alert('Please add something to your quote.');
        textarea.focus();
        return;
    }
    if (body.length > 280) {
        alert('Quote text may not exceed 280 characters.');
        textarea.focus();
        return;
    }
    
    submitBtn.disabled = true;
    submitBtn.textContent = 'Posting...';
    textarea.disabled = true;
    
    const formData = new FormData(form);
    formData.set('body', body); // ensure trimmed body is sent
    
    fetch(`/posts/${postId}/quote`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(async response => {
        const data = await response.json().catch(() => ({}));
        if (!response.ok) {
            const msg = data.message || 'Failed to post quote. Please try again.';
            throw new Error(msg);
        }

        if (data.success) {
            closeQuoteModal();
            if (window.Livewire && typeof window.Livewire.emit === 'function') {
                window.Livewire.emit('postCreated');
            } else {
                window.location.reload();
            }
        } else {
            throw new Error(data.message || 'Failed to post quote.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert(error.message || 'Failed to post quote. Please try again.');
    })
    .finally(() => {
        submitBtn.disabled = false;
        submitBtn.textContent = 'Quote';
        textarea.disabled = false;
    });
}

// Character counter for quote textarea
document.addEventListener('DOMContentLoaded', function() {
    const quoteBody = document.getElementById('quoteBody');
    if (quoteBody) {
        quoteBody.addEventListener('input', function() {
            document.getElementById('charCount').textContent = this.value.length;
        });
    }
});

// Tag dropdown handling (used by other modals if present)
function toggleTagDropdown() {
    const dropdown = document.getElementById('tagDropdown');
    dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
    // Close category dropdown
    document.getElementById('categoryDropdown').style.display = 'none';
}

function selectTag(tag) {
    document.getElementById('tagInput').value = tag;
    document.getElementById('tagButtonText').textContent = tag;
    document.getElementById('tagDropdown').style.display = 'none';
}

// Category dropdown handling
function toggleCategoryDropdown() {
    const dropdown = document.getElementById('categoryDropdown');
    dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
    // Close tag dropdown
    document.getElementById('tagDropdown').style.display = 'none';
}

function selectCategory() {
    const select = document.getElementById('categorySelect');
    const selectedOption = select.options[select.selectedIndex];
    if (selectedOption.value) {
        const icon = selectedOption.getAttribute('data-icon');
        const text = selectedOption.text;
        document.getElementById('categoryButtonText').textContent = icon + ' ' + text.substring(text.indexOf(' ') + 1);
    } else {
        document.getElementById('categoryButtonText').textContent = 'Category';
    }
    document.getElementById('categoryDropdown').style.display = 'none';
}

// Create dropdown handling
function toggleCreateDropdown() {
    const dropdown = document.getElementById('createDropdown');
    dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
    document.getElementById('tagDropdown').style.display = 'none';
    document.getElementById('categoryDropdown').style.display = 'none';
}

function handleCreateAction(type) {
    document.getElementById('createDropdown').style.display = 'none';

    if (type === 'post') {
        document.querySelector('.composer-textarea')?.focus();
        return;
    }

    if (['event', 'group', 'newsletter'].includes(type)) {
        openActionModal(type);
    }
}

// Close tag dropdown when clicking outside
document.addEventListener('click', function(event) {
    const tagWrapper = document.querySelector('.tag-dropdown-wrapper');
    if (tagWrapper && !tagWrapper.contains(event.target)) {
        document.getElementById('tagDropdown').style.display = 'none';
    }
    
    const categoryWrapper = document.querySelector('.category-dropdown-wrapper');
    if (categoryWrapper && !categoryWrapper.contains(event.target)) {
        document.getElementById('categoryDropdown').style.display = 'none';
    }

    const createWrapper = document.getElementById('createDropdownWrapper');
    if (createWrapper && !createWrapper.contains(event.target)) {
        document.getElementById('createDropdown').style.display = 'none';
    }
});

// Comment Like/Dislike Functions
function toggleCommentLike(commentId) {
    console.log('toggleCommentLike called for comment:', commentId);
    
    if (!@json(auth()->check())) {
        console.log('User not authenticated, redirecting to login');
        window.location.href = '{{ route('login') }}';
        return;
    }

    const likeBtn = document.getElementById(`like-btn-${commentId}`);
    const dislikeBtn = document.getElementById(`dislike-btn-${commentId}`);
    
    if (!likeBtn) {
        console.error('Like button not found for comment:', commentId);
        return;
    }
    
    console.log('Sending like request...');
    likeBtn.style.pointerEvents = 'none';
    likeBtn.style.opacity = '0.6';

    fetch(`/comments/${commentId}/like`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => {
        console.log('Like response received:', response.status);
        return response.json();
    })
    .then(data => {
        console.log('Like data received:', data);
        if (data.success) {
            // Update like count
            const likeCount = document.getElementById(`like-count-${commentId}`);
            likeCount.textContent = data.likes_count;
            
            // Update dislike count
            const dislikeCount = document.getElementById(`dislike-count-${commentId}`);
            dislikeCount.textContent = data.dislikes_count;
            
            // Update button states based on user_reaction
if (data.user_reaction === 'like') {
                likeBtn.classList.add('connect-post-comment-action-active');
                likeBtn.querySelector('svg').setAttribute('fill', 'currentColor');
                dislikeBtn.classList.remove('connect-post-comment-action-dislike-active');
                dislikeBtn.querySelector('svg').setAttribute('fill', 'none');
            } else {
                likeBtn.classList.remove('connect-post-comment-action-active');
                likeBtn.querySelector('svg').setAttribute('fill', 'none');
            }
        }
        
        likeBtn.style.pointerEvents = 'auto';
        likeBtn.style.opacity = '1';
    })
    .catch(error => {
        console.error('Like error:', error);
        likeBtn.style.pointerEvents = 'auto';
        likeBtn.style.opacity = '1';
    });
}

function toggleReplyForm(commentId) {
    const form = document.getElementById(`reply-form-${commentId}`);
    if (form) {
        form.style.display = form.style.display === 'none' ? 'block' : 'none';
    }
}

function submitReply(event, commentId) {
    event.preventDefault();
    if (!@json(auth()->check())) {
        window.location.href = '{{ route('login') }}';
        return;
    }

    const form = event.target;
    const body = form.querySelector('textarea[name="body"]').value.trim();
    if (!body) return;

    const formData = new FormData(form);

    fetch(`/comments/${commentId}/reply`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            window.location.reload();
        } else {
            alert('Failed to post reply.');
        }
    })
    .catch(() => alert('Failed to post reply.'));
}

function toggleCommentDislike(commentId) {
    console.log('toggleCommentDislike called for comment:', commentId);
    
    if (!@json(auth()->check())) {
        console.log('User not authenticated, redirecting to login');
        window.location.href = '{{ route('login') }}';
        return;
    }

    const likeBtn = document.getElementById(`like-btn-${commentId}`);
    const dislikeBtn = document.getElementById(`dislike-btn-${commentId}`);
    
    if (!dislikeBtn) {
        console.error('Dislike button not found for comment:', commentId);
        return;
    }
    
    console.log('Sending dislike request...');
    dislikeBtn.style.pointerEvents = 'none';
    dislikeBtn.style.opacity = '0.6';

    fetch(`/comments/${commentId}/dislike`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Update like count
            const likeCount = document.getElementById(`like-count-${commentId}`);
            likeCount.textContent = data.likes_count;
            
            // Update dislike count
            const dislikeCount = document.getElementById(`dislike-count-${commentId}`);
            dislikeCount.textContent = data.dislikes_count;
            
            // Update button states based on user_reaction
if (data.user_reaction === 'dislike') {
                dislikeBtn.classList.add('connect-post-comment-action-dislike-active');
                dislikeBtn.querySelector('svg').setAttribute('fill', 'currentColor');
                likeBtn.classList.remove('connect-post-comment-action-active');
                likeBtn.querySelector('svg').setAttribute('fill', 'none');
            } else {
                dislikeBtn.classList.remove('connect-post-comment-action-dislike-active');
                dislikeBtn.querySelector('svg').setAttribute('fill', 'none');
            }
        }
        
        dislikeBtn.style.pointerEvents = 'auto';
        dislikeBtn.style.opacity = '1';
    })
    .catch(error => {
        console.error('Error:', error);
        dislikeBtn.style.pointerEvents = 'auto';
        dislikeBtn.style.opacity = '1';
    });
}

function openActionModal(type) {
    const modal = document.getElementById(`create-${type}-modal`);
    if (modal) {
        modal.style.display = 'flex';
    }
}

function closeActionModal(type) {
    const modal = document.getElementById(`create-${type}-modal`);
    if (modal) {
        modal.style.display = 'none';
    }
}

function closeAllActionModals() {
    ['group', 'event', 'newsletter'].forEach((type) => closeActionModal(type));
}

document.addEventListener('keydown', function (event) {
    if (event.key === 'Escape') {
        closeAllActionModals();
    }
});

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.action-create-form').forEach((form) => {
        form.addEventListener('submit', function (event) {
            event.preventDefault();

            const errorEl = form.querySelector('.action-form-error');
            if (errorEl) {
                errorEl.style.display = 'none';
                errorEl.textContent = '';
            }

            const submitBtn = form.querySelector('button[type="submit"]');
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.style.opacity = '0.7';
            }

            const token = form.querySelector('input[name=\"_token\"]')?.value || '{{ csrf_token() }}';
            const formData = new FormData(form);

            fetch(form.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': token,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(async (response) => {
                let data = {};
                try {
                    data = await response.json();
                } catch (err) {
                    data = {};
                }
                return { response, data };
            })
            .then(({ response, data }) => {
                if (!response.ok || data.success === false) {
                    let message = data.message || 'Unable to create. Please check the form and try again.';
                    if (data.errors) {
                        const firstError = Object.values(data.errors).flat()[0];
                        if (firstError) {
                            message = firstError;
                        }
                    }
                    if (errorEl) {
                        errorEl.textContent = message;
                        errorEl.style.display = 'block';
                    } else {
                        alert(message);
                    }
                    return;
                }

                form.reset();
                closeActionModal(form.dataset.action);
                window.location.reload();
            })
            .catch(() => {
                const message = 'Unable to create. Please try again.';
                if (errorEl) {
                    errorEl.textContent = message;
                    errorEl.style.display = 'block';
                } else {
                    alert(message);
                }
            })
            .finally(() => {
                if (submitBtn) {
                    submitBtn.disabled = false;
                    submitBtn.style.opacity = '1';
                }
            });
        });
    });

    const createParam = new URLSearchParams(window.location.search).get('create');
    if (createParam && ['event', 'group', 'newsletter'].includes(createParam)) {
        openActionModal(createParam);
        try {
            const url = new URL(window.location.href);
            url.searchParams.delete('create');
            history.replaceState({}, '', url);
        } catch (e) {}
    }
});
</script>

<div class="nurse-connect-layout dt-connect">
    <div class="dt-container">
        @if(session('success'))
            <div class="rounded-lg border border-slate-200 bg-white px-4 py-3 text-teal shadow-sm mb-4">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="rounded-lg border border-slate-200 bg-white px-4 py-3 text-ink shadow-sm mb-4">{{ session('error') }}</div>
        @endif

        @php $profile = auth()->user()->nurseProfile; @endphp

        <div class="dt-grid">
            {{-- LEFT RAIL: Profile + Manage my network (LinkedIn-style) --}}
            <aside id="leftSidebar" class="dt-left">
                <div class="dt-card dt-profile-card">
                    <div class="dt-profile-banner"></div>
                    <div class="dt-profile-body">
                        <img src="{{ auth()->user()->displayAvatarUrl() }}" alt="{{ auth()->user()->name }}" class="dt-profile-avatar" style="object-fit:cover;width:72px;height:72px;border-radius:50%;border:2px solid var(--connect-surface);" width="72" height="72" loading="lazy" decoding="async">
                        <p class="dt-profile-name">{{ auth()->user()->name }}</p>
                        <p class="dt-profile-headline">{{ $profile?->primary_specialty ?? 'Healthcare Professional' }}</p>
                        <p class="dt-profile-headline">{{ $profile?->city ? $profile->city . ', ' : '' }}{{ $profile?->country ?? 'Location n/a' }}</p>
                        <div class="dt-profile-links">
                            <a href="{{ route('user.profile.view', auth()->id()) }}">View profile</a>
                            @php
                                $profileEdit = \Illuminate\Support\Facades\Route::has('user.profile.edit') ? route('user.profile.edit') : (\Illuminate\Support\Facades\Route::has('profile.edit') ? route('profile.edit') : '#');
                            @endphp
                            <a href="{{ $profileEdit }}">Edit</a>
                        </div>
                    </div>
                </div>
                <div class="dt-card">
                    <h3 class="dt-card-title">Manage my network</h3>
                    <div class="dt-list">
                        <a href="{{ route('nurse.connect.timeline', ['tab' => 'network']) }}" class="dt-list-item"><span>Connections</span><span>{{ $stats['connections'] ?? 0 }}</span></a>
                        <a href="{{ route('nurseconnect.following.index') }}" class="dt-list-item"><span>Following &amp; followers</span><span>{{ ($stats['following'] ?? 0) + ($stats['followers'] ?? 0) }}</span></a>
                        <a href="{{ route('nurseconnect.groups.index') }}" class="dt-list-item"><span>Groups</span><span>{{ $stats['groups'] ?? 0 }}</span></a>
                        <a href="{{ route('nurseconnect.events.index') }}" class="dt-list-item"><span>Events</span><span>{{ $stats['events'] ?? 0 }}</span></a>
                        <a href="{{ route('nurseconnect.newsletters.index') }}" class="dt-list-item"><span>Newsletters</span><span>{{ $stats['newsletters'] ?? 0 }}</span></a>
                    </div>
                </div>
                <div class="dt-card">
                    <h3 class="dt-card-title">Quick actions</h3>
                    <div class="dt-list">
                        <button type="button" class="dt-list-item" style="width:100%;border:none;background:none;cursor:pointer;text-align:left;font:inherit;" onclick="openActionModal('group')"><span>Create group</span><span></span></button>
                        <button type="button" class="dt-list-item" style="width:100%;border:none;background:none;cursor:pointer;text-align:left;font:inherit;" onclick="openActionModal('event')"><span>Create event</span><span></span></button>
                        <button type="button" class="dt-list-item" style="width:100%;border:none;background:none;cursor:pointer;text-align:left;font:inherit;" onclick="openActionModal('newsletter')"><span>Create newsletter</span><span></span></button>
                        <a href="{{ route('nurse.connect.timeline', ['tab' => 'network']) }}" class="dt-list-item"><span>My connections</span><span>→</span></a>
                    </div>
                </div>
            </aside>

            {{-- CENTER: Composer + Feed tabs + Posts (LinkedIn-style) --}}
            <main class="dt-center">
                <div class="dt-card dt-composer-card">
                    <div class="dt-composer-inner">
                        <button type="button" class="dt-composer-trigger" onclick="openAddPostModal()">
                            <span class="dt-composer-avatar">
                                <img src="{{ auth()->user()->displayAvatarUrl() }}" alt="" style="width:100%;height:100%;object-fit:cover;border-radius:50%;" width="40" height="40" loading="lazy" decoding="async">
                            </span>
                            <span class="dt-composer-label">Start a post</span>
                        </button>
                        <div class="dt-composer-options">
                            <button type="button" class="dt-composer-option" disabled title="Coming soon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg> Photo</button>
                            <button type="button" class="dt-composer-option" disabled title="Coming soon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/></svg> Video</button>
                            <button type="button" class="dt-composer-option" disabled title="Coming soon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg> Document</button>
                        </div>
                    </div>
                    @php
                        $feed = request('feed', request('filter', 'all'));
                        $primaryTabs = ['all' => 'All', 'network' => 'Network', 'mine' => 'My Posts', 'liked' => 'Liked', 'replies' => 'Replies'];
                        $moreTabs = ['connections' => 'Connections', 'followers' => 'Followers', 'following' => 'Following', 'groups' => 'Groups', 'events' => 'Events', 'newsletters' => 'Newsletters', 'search' => 'Search'];
                    @endphp
                    <div class="dt-feed-tabs">
                        @foreach($primaryTabs as $key => $label)
                            @if ($key === 'liked' && !($supportsLikes ?? false)) @continue @endif
                            <a href="{{ route('nurse.connect.index', array_merge(request()->query(), ['feed' => $key, 'page' => null])) }}" class="dt-feed-tab feed-tab {{ $feed === $key ? 'feed-tab-active' : '' }}">{{ $label }}</a>
                        @endforeach
                        <div class="feed-tabs-more" style="position:relative;">
                            <button type="button" class="dt-feed-tab feed-tab feed-tab-more-trigger {{ in_array($feed, array_keys($moreTabs)) ? 'feed-tab-active' : '' }}" id="feedMoreTrigger" aria-haspopup="true" aria-expanded="false">More</button>
                            <div class="feed-tabs-dropdown" id="feedMoreDropdown" role="menu" aria-hidden="true">
                                @foreach($moreTabs as $key => $label)
                                    <a href="{{ route('nurse.connect.index', array_merge(request()->query(), ['feed' => $key, 'page' => null])) }}" class="feed-tabs-dropdown-item {{ $feed === $key ? 'feed-tab-active' : '' }}" role="menuitem">{{ $label }}</a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                {{-- New Posts Banner --}}
                <div id="new-posts-banner" class="new-posts-banner" style="display: none;">
                    <button onclick="loadNewPosts()" class="new-posts-button">
                        <svg style="width: 1rem; height: 1rem; margin-right: 0.5rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
                        </svg>
                        Show <span id="new-posts-count">0</span> new posts
                    </button>
                </div>

                {{-- Incoming Connection Requests (shown when ?requests=1 or ?view=requests) --}}
@if(isset($requestsView) && $requestsView && auth()->check())
    <div id="connection-requests-panel" class="dt-card" style="margin-bottom: 1rem;">
        <h3 class="dt-card-title" style="padding: 12px 16px 8px; margin: 0; font-size: 1rem; font-weight: 600;">Incoming Connection Requests</h3>
        @php $requests = $incomingRequests ?? collect(); @endphp
        @if($requests instanceof \Illuminate\Pagination\LengthAwarePaginator)
            @forelse($requests as $connection)
                <div id="connection-request-{{ $connection->id }}" class="dt-connection-request-item" style="display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid #e0dfdc;">
                    @php
                        $requester = $connection->requester ?? null;
                        $reqProfile = $requester?->nurseProfile ?? null;
                        $reqName = $requester?->name ?? 'User';
                        $reqSpecialty = $reqProfile?->primary_specialty ?? 'Healthcare Professional';
                    @endphp
                    <div style="flex-shrink: 0;">
                        @if($requester)
                            <img src="{{ $requester->displayAvatarUrl() }}" alt="{{ $reqName }}" style="width: 48px; height: 48px; border-radius: 50%; object-fit: cover;" width="48" height="48" loading="lazy" decoding="async">
                        @else
                            <div style="width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #0077B5, #00a0b0); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 1rem;">{{ strtoupper(substr($reqName, 0, 2)) }}</div>
                        @endif
                    </div>
                    <div style="flex: 1; min-width: 0;">
                        <a href="{{ $requester ? route('user.profile.view', $requester->id) : '#' }}" style="font-weight: 600; color: #2C3E50; text-decoration: none; font-size: 0.9rem;">{{ $reqName }}</a>
                        <p style="color: #64748b; font-size: 0.8rem; margin: 2px 0 0;">{{ $reqSpecialty }}</p>
                    </div>
                    <div style="display: flex; gap: 8px; flex-shrink: 0;">
                        <form method="POST" action="{{ route('nurse.connect.respond', $connection) }}" style="display: inline;">
                            @csrf
                            <input type="hidden" name="status" value="accepted">
                            <button type="submit" class="btn btn-brand" style="padding: 6px 16px; font-size: 0.8rem; border-radius: 6px;">Accept</button>
                        </form>
                        <form method="POST" action="{{ route('nurse.connect.respond', $connection) }}" style="display: inline;">
                            @csrf
                            <input type="hidden" name="status" value="declined">
                            <button type="submit" class="btn btn-outline" style="padding: 6px 16px; font-size: 0.8rem; border-radius: 6px; border: 1px solid #cbd5e1; color: #64748b; background: #fff;">Decline</button>
                        </form>
                    </div>
                </div>
            @empty
                <p style="padding: 16px; color: #64748b; font-size: 0.875rem; text-align: center;">No pending connection requests.</p>
            @endforelse
            {{ $requests->withQueryString()->links() }}
        @else
            @forelse($requests as $connection)
                <div id="connection-request-{{ $connection->id }}" class="dt-connection-request-item" style="display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid #e0dfdc;">
                    @php
                        $requester = $connection->requester ?? null;
                        $reqProfile = $requester?->nurseProfile ?? null;
                        $reqName = $requester?->name ?? 'User';
                        $reqSpecialty = $reqProfile?->primary_specialty ?? 'Healthcare Professional';
                    @endphp
                    <div style="flex-shrink: 0;">
                        @if($requester)
                            <img src="{{ $requester->displayAvatarUrl() }}" alt="{{ $reqName }}" style="width: 48px; height: 48px; border-radius: 50%; object-fit: cover;" width="48" height="48" loading="lazy" decoding="async">
                        @else
                            <div style="width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #0077B5, #00a0b0); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 1rem;">{{ strtoupper(substr($reqName, 0, 2)) }}</div>
                        @endif
                    </div>
                    <div style="flex: 1; min-width: 0;">
                        <a href="{{ $requester ? route('user.profile.view', $requester->id) : '#' }}" style="font-weight: 600; color: #2C3E50; text-decoration: none; font-size: 0.9rem;">{{ $reqName }}</a>
                        <p style="color: #64748b; font-size: 0.8rem; margin: 2px 0 0;">{{ $reqSpecialty }}</p>
                    </div>
                    <div style="display: flex; gap: 8px; flex-shrink: 0;">
                        <form method="POST" action="{{ route('nurse.connect.respond', $connection) }}" style="display: inline;">
                            @csrf
                            <input type="hidden" name="status" value="accepted">
                            <button type="submit" class="btn btn-brand" style="padding: 6px 16px; font-size: 0.8rem; border-radius: 6px;">Accept</button>
                        </form>
                        <form method="POST" action="{{ route('nurse.connect.respond', $connection) }}" style="display: inline;">
                            @csrf
                            <input type="hidden" name="status" value="declined">
                            <button type="submit" class="btn btn-outline" style="padding: 6px 16px; font-size: 0.8rem; border-radius: 6px; border: 1px solid #cbd5e1; color: #64748b; background: #fff;">Decline</button>
                        </form>
                    </div>
                </div>
            @empty
                <p style="padding: 16px; color: #64748b; font-size: 0.875rem; text-align: center;">No pending connection requests.</p>
            @endforelse
        @endif
    </div>
@endif

{{-- Posts / Replies / Liked / Search Feed --}}
                @if(request('feed') === 'search')
                    <div class="dt-card mb-4" id="main-search-filters" style="margin-bottom:1rem;">
                        @include('components.connect.filters', [
                            'feed' => 'search',
                            'country' => request('country', ''),
                            'specialty' => request('specialty', ''),
                            'countries' => $countries ?? collect(),
                            'specialties' => $specialties ?? collect(),
                        ])
                    </div>
                @endif
                <div id="mainFeed" class="dt-center-inner">
                    <div class="posts-feed dt-feed" id="posts-container">
                    {{-- Livewire component root has id="connectFeedLivewire" for feed gap styling --}}
                    @if(class_exists(\Livewire\Livewire::class))
                        @livewire('connect-feed', ['feed' => request('feed', 'all'), 'q' => request('q', ''), 'country' => request('country', ''), 'specialty' => request('specialty', '')])
                    @else
                        <div id="connectFeedLivewire">
                            @if(request('feed') === 'replies')
                                @forelse($items ?? collect() as $reply)
                                    <div class="card" style="padding: 1rem; margin-bottom: 0.75rem;">
                                        <p class="text-xs text-slate-500 mb-1">Reply to {{ $reply->post->author->name ?? 'Unknown' }}</p>
                                        <p class="text-sm text-slate-800 mb-2">{{ $reply->body }}</p>
                                        @if($reply->post)
                                            <div class="border border-slate-100 rounded-md bg-slate-50 p-3 text-xs text-slate-700">
                                                <p class="font-semibold text-slate-900 mb-1">{{ $reply->post->author->name ?? 'Unknown' }}</p>
                                                <p class="line-clamp-3">{{ $reply->post->body }}</p>
                                            </div>
                                        @endif
                                    </div>
                                @empty
                                    <div class="card">You haven’t replied to any posts yet.</div>
                                @endforelse
                                @if(isset($items))
                                    {{ $items->links() }}
                                @endif
                            @else
                                @foreach($posts as $post)
                                    @include('nurse.connect.partials.post-card', ['post' => $post])
                                @endforeach
                            @endif
                        </div>
                    @endif
                    </div>
                    <div id="loading-indicator" class="card" style="display: none; text-align: center; padding: 1.5rem;">
                        <div style="display: inline-block; width: 2rem; height: 2rem; border: 3px solid #e2e8f0; border-top-color: var(--connect-blue); border-radius: 50%; animation: spin 0.8s linear infinite;"></div>
                        <p style="margin-top: 0.5rem; color: #64748b; font-size: 0.875rem;">Loading more posts...</p>
                    </div>
                    <div id="pagination-data" data-next-page="{{ $posts->currentPage() + 1 }}" data-last-page="{{ $posts->lastPage() }}" data-current-page="{{ $posts->currentPage() }}" style="display: none;"></div>
                </div>
            </main>

            {{-- RIGHT RAIL: People you may know + Search --}}
            <aside id="rightSidebar" class="dt-right">
                <div class="dt-card dt-right-card">
                    <div id="suggestionsHeadingTitle" class="dt-card-header">
                        @if(isset($search) && $search)
                            Search results for '{{ $search }}' ({{ optional($searchResults)->total() ?? 0 }})
                        @else
                            People you may know ({{ $suggestedNurses->count() ?? 0 }})
                        @endif
                    </div>
                    {{-- Inline people search form (AJAX-driven via performSuggestionSearch) --}}
                    <form class="filter-form" style="padding: 8px 16px 4px; display: flex; flex-direction: column; gap: 8px;">
                        @csrf
                        <div style="display: flex; gap: 6px;">
                            <input type="text" name="search" id="suggest_search_input" placeholder="Search people by name or specialty..." value="{{ request('search', request('suggest_search', '')) }}" style="flex:1; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.8rem; outline: none;">
                            <button type="submit" id="sidebar-search-label" style="padding: 6px 12px; background: #0077B5; color: #fff; border: none; border-radius: 6px; font-size: 0.8rem; cursor: pointer; white-space: nowrap;">Search</button>
                        </div>
                        <div style="display: flex; gap: 6px;">
                            <select name="suggest_country" style="flex:1; padding: 5px 6px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.75rem; color: #475569;">
                                <option value="">All Countries</option>
                                @foreach($countries as $c)
                                    <option value="{{ $c }}" {{ request('suggest_country', request('country')) === $c ? 'selected' : '' }}>{{ $c }}</option>
                                @endforeach
                            </select>
                            <select name="suggest_specialty" style="flex:1; padding: 5px 6px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.75rem; color: #475569;">
                                <option value="">All Specialties</option>
                                @foreach($specialties as $s)
                                    <option value="{{ $s }}" {{ request('suggest_specialty', request('specialty')) === $s ? 'selected' : '' }}>{{ $s }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div id="sidebar-search-toggle" style="text-align: right;">
                            <button type="button" id="clear-suggestions-search" class="btn btn-outline" style="display: none; padding: 2px 8px; font-size: 0.75rem; border-radius: 4px;">Clear filters</button>
                        </div>
                    </form>
                    <div id="suggestionsList" class="suggestions-list" style="max-height: calc(100vh - 360px); overflow-y: auto;">
                        @if(request()->has('search') || request()->has('suggest_search') || request()->has('suggest_country') || request()->has('suggest_specialty') || (isset($search) && $search))
                            @include('nurse.connect.partials.search-results-cards', ['searchResults' => $searchResults ?? collect()])
                        @else
                            @include('nurse.connect.partials.suggestion-cards', ['suggestedNurses' => $suggestedNurses])
                        @endif
                    </div>
                    <div id="suggestionsLoading" class="loading-indicator" style="display: none; padding: 1rem; text-align: center;"><div class="spinner"></div></div>
                </div>
            </aside>
        </div>
    </div>
</div>

@include('nurse.connect.partials.add-post-modal', ['forumCategories' => $forumCategories ?? \App\Models\ForumCategory::active()->ordered()->get()])

{{-- Create Group Modal --}}
<div id="create-group-modal" class="action-modal">
    <div class="action-modal-overlay" onclick="closeActionModal('group')"></div>
    <div class="action-modal-content">
        <div class="action-modal-header">
            <h3>Create group</h3>
            <button type="button" class="action-modal-close" onclick="closeActionModal('group')">&times;</button>
        </div>
        <div class="action-modal-body">
            <form class="action-create-form" data-action="group" action="{{ route('nurseconnect.groups.store') }}" method="POST">
                @csrf
                <div class="action-form-field">
                    <label class="action-form-label" for="group-name">Group name</label>
                    <input id="group-name" name="name" type="text" class="action-form-input" required>
                </div>
                <div class="action-form-field">
                    <label class="action-form-label" for="group-description">Description</label>
                    <textarea id="group-description" name="description" class="action-form-textarea"></textarea>
                </div>
                <div class="action-form-field">
                    <label class="action-form-label" for="group-privacy">Privacy</label>
                    <select id="group-privacy" name="privacy" class="action-form-select" required>
                        <option value="public">Public</option>
                        <option value="private">Private</option>
                    </select>
                </div>
                <div class="action-form-actions">
                    <button type="button" class="btn btn-outline" onclick="closeActionModal('group')">Cancel</button>
                    <button type="submit" class="btn btn-brand">Create group</button>
                </div>
                <p class="action-form-error" style="display: none;"></p>
            </form>
        </div>
    </div>
</div>

{{-- Create Event Modal --}}
<div id="create-event-modal" class="action-modal">
    <div class="action-modal-overlay" onclick="closeActionModal('event')"></div>
    <div class="action-modal-content">
        <div class="action-modal-header">
            <h3>Create event</h3>
            <button type="button" class="action-modal-close" onclick="closeActionModal('event')">&times;</button>
        </div>
        <div class="action-modal-body">
            <form class="action-create-form" data-action="event" action="{{ route('nurseconnect.events.store') }}" method="POST">
                @csrf
                <div class="action-form-field">
                    <label class="action-form-label" for="event-title">Event title</label>
                    <input id="event-title" name="title" type="text" class="action-form-input" required>
                </div>
                <div class="action-form-field">
                    <label class="action-form-label" for="event-description">Description</label>
                    <textarea id="event-description" name="description" class="action-form-textarea"></textarea>
                </div>
                <div class="action-form-field">
                    <label class="action-form-label" for="event-start">Start date and time</label>
                    <input id="event-start" name="starts_at" type="datetime-local" class="action-form-input" required>
                </div>
                <div class="action-form-field">
                    <label class="action-form-label" for="event-end">End date and time</label>
                    <input id="event-end" name="ends_at" type="datetime-local" class="action-form-input" required>
                </div>
                <div class="action-form-field">
                    <label class="action-form-label" for="event-timezone">Timezone</label>
                    <input id="event-timezone" name="timezone" type="text" class="action-form-input" placeholder="e.g. Africa/Accra">
                </div>
                <div class="action-form-field">
                    <label class="action-form-label" for="event-location">Location</label>
                    <input id="event-location" name="location" type="text" class="action-form-input" placeholder="Virtual or in-person">
                </div>
                <div class="action-form-field">
                    <label class="action-form-label" for="event-visibility">Visibility</label>
                    <select id="event-visibility" name="visibility" class="action-form-select" required>
                        <option value="public">Public</option>
                        <option value="network">Network</option>
                        <option value="network-only">Network only</option>
                    </select>
                </div>
                <div class="action-form-actions">
                    <button type="button" class="btn btn-outline" onclick="closeActionModal('event')">Cancel</button>
                    <button type="submit" class="btn btn-brand">Create event</button>
                </div>
                <p class="action-form-error" style="display: none;"></p>
            </form>
        </div>
    </div>
</div>

{{-- Create Newsletter Modal --}}
<div id="create-newsletter-modal" class="action-modal">
    <div class="action-modal-overlay" onclick="closeActionModal('newsletter')"></div>
    <div class="action-modal-content">
        <div class="action-modal-header">
            <h3>Create newsletter</h3>
            <button type="button" class="action-modal-close" onclick="closeActionModal('newsletter')">&times;</button>
        </div>
        <div class="action-modal-body">
            <form class="action-create-form" data-action="newsletter" action="{{ route('nurseconnect.newsletters.store') }}" method="POST">
                @csrf
                <div class="action-form-field">
                    <label class="action-form-label" for="newsletter-title">Newsletter title</label>
                    <input id="newsletter-title" name="title" type="text" class="action-form-input" required>
                </div>
                <div class="action-form-field">
                    <label class="action-form-label" for="newsletter-description">Description</label>
                    <textarea id="newsletter-description" name="description" class="action-form-textarea"></textarea>
                </div>
                <div class="action-form-field">
                    <label class="action-form-label" for="newsletter-status">Status</label>
                    <select id="newsletter-status" name="status" class="action-form-select">
                        <option value="active">Active</option>
                    </select>
                </div>
                <div class="action-form-actions">
                    <button type="button" class="btn btn-outline" onclick="closeActionModal('newsletter')">Cancel</button>
                    <button type="submit" class="btn btn-brand">Create newsletter</button>
                </div>
                <p class="action-form-error" style="display: none;"></p>
            </form>
        </div>
    </div>
</div>

{{-- Quote Modal --}}
<div id="quoteModal" class="quote-modal" style="display: none;">
    <div class="quote-modal-overlay" onclick="closeQuoteModal()"></div>
    <div class="quote-modal-content">
        <div class="quote-modal-header">
            <h3>Quote Post</h3>
            <button onclick="closeQuoteModal()" class="quote-modal-close">&times;</button>
        </div>
        <div class="quote-modal-body">
            <form id="quoteForm" onsubmit="submitQuote(event)">
                @csrf
                <input type="hidden" id="quotePostId" name="post_id">
                <textarea 
                    id="quoteBody" 
                    name="body" 
                    placeholder="Add your thoughts..." 
                    required
                    maxlength="280"
                    rows="4"
                    class="quote-textarea"></textarea>
                <div class="quote-char-count">
                    <span id="charCount">0</span>/280
                </div>
                <div id="quotedPostPreview" class="quoted-post-preview"></div>
                <div class="quote-modal-footer">
                    <button type="button" onclick="closeQuoteModal()" class="btn btn-outline">Cancel</button>
                    <button type="submit" class="btn btn-brand">Quote</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection