@extends('layouts.marketing')

@section('title', 'Healthcare Worker Connect')

@section('content')
<x-marketing-nav />

<style>
.nurse-connect-layout {
    min-height: 100vh;
    background-color: #f7f9fb;
    padding-top: 80px;
}

.nurse-connect-container {
    max-width: 1152px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.nurse-connect-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

@media (min-width: 768px) {
    .nurse-connect-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: calc(100vh - 120px);
    }
    
    #leftSidebar {
        grid-column: 1 / 2;
        grid-row: 1;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        position: sticky;
        top: 100px;
    }
    
    #mainFeed {
        grid-column: 2 / 3;
        grid-row: 1;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
    
    #rightSidebar {
        grid-column: 1 / 3;
        grid-row: 2;
    }
}

@media (min-width: 1024px) {
    .nurse-connect-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        max-height: calc(100vh - 120px);
    }
    
    #leftSidebar {
        grid-column: span 3;
        grid-row: auto;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        position: sticky;
        top: 100px;
    }
    
    #mainFeed {
        grid-column: span 6;
        grid-row: auto;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
    
    #rightSidebar {
        grid-column: span 3;
        grid-row: auto;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        position: sticky;
        top: 100px;
    }
}

.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.profile-banner {
    height: 4rem;
    background: linear-gradient(to right, #0891b2, #14b8a6);
}

.profile-content {
    padding: 0 1rem 1rem 1rem;
    margin-top: -2rem;
}

.avatar-container {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    margin-bottom: 0.5rem;
}

.avatar-placeholder {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1.25rem;
    background: linear-gradient(to bottom right, #0891b2, #14b8a6);
    border: 4px solid white;
    margin-bottom: 0.5rem;
}

.profile-name {
    font-weight: 600;
    color: #0f172a;
}

.profile-specialty {
    font-size: 0.875rem;
    color: #64748b;
}

.card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    padding: 1rem;
}

.card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.75rem;
}

.stats-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.stat-item:last-child {
    border-bottom: 1px solid #e2e8f0;
}

.stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
    border-color: #cbd5e1;
}

.stat-label {
    font-size: 0.875rem;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat-value {
    font-weight: 600;
    color: #0891b2;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-brand {
    background: #0891b2;
    color: white;
    border: none;
}

.btn-brand:hover {
    background: #0e7490;
}

.btn-outline {
    background: transparent;
    color: #0891b2;
    border: 1px solid #0891b2;
}

.btn-outline:hover {
    background: #f0fdfa;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-teal {
    background: #ccfbf1;
    color: #0f766e;
}

.badge-slate {
    background: #f1f5f9;
    color: #475569;
}

.profile-location {
    font-size: 0.75rem;
    color: #64748b;
}

.profile-links {
    border-top: 1px solid #e2e8f0;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
}

.profile-link-primary {
    color: #0891b2;
    font-weight: 600;
    text-decoration: none;
}

.profile-link-primary:hover {
    text-decoration: underline;
}

.profile-link-secondary {
    color: #475569;
    text-decoration: none;
}

.profile-link-secondary:hover {
    color: #0891b2;
}

.card-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.card-header-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: #0f172a;
}

.card-body-sm {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #334155;
    padding: 0.25rem 0;
    text-decoration: none;
    transition: color 0.2s;
}

.list-item:hover {
    color: #0891b2;
}

.list-item-icon {
    width: 1rem;
    height: 1rem;
    color: #64748b;
}

.discover-toggle {
    width: 100%;
    padding: 0.5rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s;
}

.discover-toggle:hover {
    background: #f8fafc;
}

.discover-icon {
    width: 1rem;
    height: 1rem;
}

.composer-container {
    display: flex;
    gap: 0.75rem;
}

.composer-avatar {
    flex-shrink: 0;
}

.composer-avatar-img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
}

.composer-avatar-placeholder {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    background: #0891b2;
}

.composer-content {
    flex: 1;
}

.composer-textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    resize: none;
    padding: 0.5rem;
    font-size: 0.875rem;
}

.composer-textarea:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.1);
}

.post-style-row { margin-top: 0.5rem; }
.post-style-pill {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}
.post-style-pill:hover { border-color: #cbd5e1; color: #334155; }
.post-style-pill.active {
    border-color: #1D5BBF;
    background: #E8F4FF;
    color: #1D5BBF;
}

.post-styled-body.post-styled-169 {
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.post-styled-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.1;
    color: currentColor;
}
.post-styled-icon svg {
    width: 35%;
    height: 35%;
    max-width: 100px;
    max-height: 100px;
}
.post-styled-text {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 1.0625rem;
    line-height: 1.5;
}

.add-post-trigger-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 0.75rem;
    background: #fff;
    color: #64748b;
    font-size: 0.9375rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.add-post-trigger-btn:hover { border-color: #1D5BBF; background: #f8fafc; color: #334155; }
.add-post-trigger-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.add-post-trigger-text { flex: 1; }

.composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
}

.composer-buttons {
    display: flex;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #475569;
    align-items: center;
}

.image-preview-container {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.image-preview-wrapper {
    position: relative;
    display: inline-block;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px solid #e2e8f0;
}

.image-preview {
    max-width: 100%;
    max-height: 300px;
    display: block;
    border-radius: 0.5rem;
}

.image-remove-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.image-remove-btn:hover {
    background: rgba(0, 0, 0, 0.9);
}

.tag-dropdown-wrapper {
    position: relative;
}

.tag-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 0.5rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 250px;
    z-index: 50;
    padding: 0.5rem;
}

.category-dropdown-wrapper {
    position: relative;
}

.category-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 0.5rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    z-index: 50;
    padding: 0.75rem;
}

.category-select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background: white;
    cursor: pointer;
}

.category-select:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.tag-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.tag-input:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.tag-suggestions {
    max-height: 200px;
    overflow-y: auto;
}

.tag-suggestion-item {
    display: block;
    width: 100%;
    padding: 0.5rem;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #334155;
    cursor: pointer;
    transition: background 0.2s;
}

.tag-suggestion-item:hover {
    background: #f1f5f9;
}

.btn-text {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #475569;
    font-size: 0.75rem;
}

.btn-text svg {
    width: 1rem;
    height: 1rem;
}

.btn-text:hover {
    background: #f1f5f9;
}

.error-message {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc2626;
}

.feed-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.8125rem;
    background: white;
    padding: 0.4rem 0.75rem 0 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 40px;
}

.feed-tab {
    padding: 0.35rem 0.25rem 0.5rem;
    text-decoration: none;
    color: #64748b;
    transition: color 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.feed-tab {
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}
.feed-tab:hover {
    color: #0891b2;
}
.feed-tab:active {
    transform: scale(0.98);
}
.feed-tab-active {
    border-bottom-color: #0891b2;
    color: #0891b2;
    font-weight: 600;
    background-color: rgba(8, 145, 178, 0.1);
}

.posts-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.secondary-feed-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 640px) {
    .secondary-feed-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.suggestions-list {
    display: flex;
    flex-direction: column;
    max-height: 600px;
    overflow-y: auto;
}

.suggestion-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    transition: background-color 0.2s;
}

.suggestion-item:hover {
    background-color: #f8fafc;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-profile {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.suggestion-profile-link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    flex: 1;
}

.suggestion-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
}

.suggestion-avatar-placeholder {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: linear-gradient(to bottom right, #0891b2, #14b8a6);
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.suggestion-info {
    flex: 1;
    min-width: 0;
}

.suggestion-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggestion-specialty {
    font-size: 0.75rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggestion-location {
    font-size: 0.75rem;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggestion-bio {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.25rem;
    line-height: 1.3;
}

.empty-state {
    padding: 1.5rem 1rem;
    font-size: 0.875rem;
    color: #475569;
    text-align: center;
}

.filter-card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    padding: 1rem;
}

.filter-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.filter-field {
    display: flex;
    flex-direction: column;
}

.filter-label {
    color: #475569;
    display: block;
    margin-bottom: 0.25rem;
}

.filter-select {
    width: 100%;
    border-radius: 0.25rem;
    border: 1px solid #cbd5e1;
    font-size: 0.875rem;
    padding: 0.5rem;
}

.filter-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #334155;
}

.filter-checkbox-input {
    border-radius: 0.25rem;
    border: 1px solid #cbd5e1;
    color: #0891b2;
}

.filter-checkbox-label {
    font-size: 0.75rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.new-posts-banner {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.75rem 1rem;
    text-align: center;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.repost-wrapper {
    position: relative;
}

.repost-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.5rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 50;
    min-width: 180px;
    overflow: hidden;
    animation: repostMenuSlide 0.15s ease-out;
}

@keyframes repostMenuSlide {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.repost-menu-item {
    width: 100%;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    background: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    text-align: left;
}

.repost-menu-item:hover {
    background-color: #f8fafc;
}

.repost-menu-item:first-child:hover {
    color: #16a34a;
}

.repost-menu-item:last-child:hover {
    color: #1d5bbf;
}

.repost-menu-item svg {
    flex-shrink: 0;
}

.quote-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.quote-modal-content {
    position: relative;
    background: white;
    border-radius: 1rem;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.quote-modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quote-modal-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.quote-modal-close {
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    font-size: 1.75rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.quote-modal-close:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.quote-modal-body {
    padding: 1.5rem;
}

.quote-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.2s;
}

.quote-textarea:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.quote-char-count {
    text-align: right;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.25rem;
    margin-bottom: 1rem;
}

.quoted-post-preview {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background: #f8fafc;
}

.quoted-post-preview .post-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.quoted-post-preview .post-author-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #1D5BBF, #27B1A2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.quoted-post-preview .post-author-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: #1e293b;
}

.quoted-post-preview .post-body {
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.5;
}

.quote-modal-footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.new-posts-button {
    background: #0891b2;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
}

.new-posts-button:hover {
    background: #0e7490;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.new-posts-button:active {
    transform: translateY(0);
}
</style>

<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() {
        function setActiveFeedTab(url) {
            const normalized = url.replace(window.location.origin, '');
            document.querySelectorAll('.feed-tab').forEach(t => t.classList.remove('feed-tab-active'));
            const match = Array.from(document.querySelectorAll('.feed-tab')).find(t => {
                try { return (t.getAttribute('href') || '').replace(window.location.origin, '') === normalized; } catch(e) { return false; }
            });
            if (match) match.classList.add('feed-tab-active');
        }

        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 tab = e.target.closest('.feed-tab');
            if (!tab) return;

            // Only intercept tabs explicitly marked for AJAX behavior
            if (!tab.hasAttribute('data-ajax') && !tab.classList.contains('ajax-tab')) {
                // Not AJAX-enabled — allow full page navigation (browser reload)
                return;
            }

            const href = tab.getAttribute('href');
            if (!href || href.indexOf('http') === 0) return; // ignore external

            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 = {{ $suggestedNurses->currentPage() }};
    let suggestionsLastPage = {{ $suggestedNurses->lastPage() }};
    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();
            }
        });
    }

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

// 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('text-red-600');
            button.dataset.liked = 'true';
            svg.setAttribute('fill', 'currentColor');
            
            // 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('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';
    });
}

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('text-green-600');
            button.dataset.reposted = 'true';
            menuItem.textContent = 'Undo Repost';
        } else {
            button.classList.remove('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 textarea = form.querySelector('textarea');
    const formData = new FormData(form);

    submitBtn.disabled = true;
    submitBtn.style.opacity = '0.6';
    if (textarea) {
        textarea.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 commentHTML = `
                <div class="flex gap-2 text-xs">
                    <div class="font-semibold text-blue-600">${data.comment.user.name}</div>
                    <div class="text-slate-700">${data.comment.body}</div>
                </div>
            `;
            commentsDiv.insertAdjacentHTML('beforeend', commentHTML);
            
            // Update comment count
            const commentBtn = document.querySelector(`button[onclick="toggleCommentForm(${postId})"] .comment-count`);
            if (commentBtn) {
                commentBtn.textContent = data.comments_count;
            }
        }
        
        submitBtn.disabled = false;
        submitBtn.style.opacity = '1';
        if (textarea) {
            textarea.disabled = false;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        submitBtn.disabled = false;
        submitBtn.style.opacity = '1';
        if (textarea) {
            textarea.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();
            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
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';
}

// Close tag dropdown when clicking outside
document.addEventListener('click', function(event) {
    const wrapper = document.querySelector('.tag-dropdown-wrapper');
    if (wrapper && !wrapper.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';
    }
});

// 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') {
                // User liked - highlight like button, reset dislike button
                likeBtn.classList.remove('text-slate-500');
                likeBtn.classList.add('text-blue-600', 'font-semibold');
                likeBtn.querySelector('svg').setAttribute('fill', 'currentColor');
                
                dislikeBtn.classList.remove('text-red-600', 'font-semibold');
                dislikeBtn.classList.add('text-slate-500');
                dislikeBtn.querySelector('svg').setAttribute('fill', 'none');
            } else {
                // User unliked - reset both buttons
                likeBtn.classList.remove('text-blue-600', 'font-semibold');
                likeBtn.classList.add('text-slate-500');
                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') {
                // User disliked - highlight dislike button, reset like button
                dislikeBtn.classList.remove('text-slate-500');
                dislikeBtn.classList.add('text-red-600', 'font-semibold');
                dislikeBtn.querySelector('svg').setAttribute('fill', 'currentColor');
                
                likeBtn.classList.remove('text-blue-600', 'font-semibold');
                likeBtn.classList.add('text-slate-500');
                likeBtn.querySelector('svg').setAttribute('fill', 'none');
            } else {
                // User undisliked - reset both buttons
                dislikeBtn.classList.remove('text-red-600', 'font-semibold');
                dislikeBtn.classList.add('text-slate-500');
                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';
    });
}
</script>

<div class="nurse-connect-layout">
    <div class="nurse-connect-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

        @if(($requestsView ?? false) && auth()->check())
            <div id="connection-requests" class="card mb-4">
                <div style="display:flex;justify-content:space-between;align-items:center;gap:0.75rem;flex-wrap:wrap;">
                    <h3 class="card-title" style="margin:0;">Connection Requests</h3>
                    <a href="{{ route('nurse.connect.index') }}" class="btn" style="border:1px solid #cbd5e1;background:#fff;color:#334155;">Back to Connect</a>
                </div>

                @php $requests = $incomingRequests ?? collect(); @endphp
                @forelse($requests as $connection)
                    <div id="connection-request-{{ $connection->id }}" style="display:flex;justify-content:space-between;gap:0.75rem;align-items:center;padding:0.85rem 0;border-top:1px solid #e2e8f0;">
                        <div style="min-width:0;">
                            <div style="font-weight:600;color:#0f172a;">{{ $connection->requester->name ?? 'Unknown User' }}</div>
                            <div style="font-size:0.875rem;color:#64748b;">{{ $connection->requester->nurseProfile?->primary_specialty ?? 'Healthcare professional' }}</div>
                        </div>
                        <div style="display:flex;gap:0.5rem;flex-wrap:wrap;">
                            <form action="{{ route('nurse.connect.respond', $connection) }}" method="POST">
                                @csrf
                                <input type="hidden" name="status" value="accepted">
                                <button type="submit" class="btn btn-brand">Accept</button>
                            </form>
                            <form action="{{ route('nurse.connect.respond', $connection) }}" method="POST">
                                @csrf
                                <input type="hidden" name="status" value="rejected">
                                <button type="submit" class="btn" style="border:1px solid #cbd5e1;background:#fff;color:#334155;">Reject</button>
                            </form>
                        </div>
                    </div>
                @empty
                    <p style="margin-top:0.75rem;color:#64748b;">No pending connection requests.</p>
                @endforelse

                @if($requests instanceof \Illuminate\Contracts\Pagination\Paginator)
                    <div style="margin-top:1rem;">{{ $requests->appends(['view' => 'requests', 'requests' => 1])->links() }}</div>
                @endif
            </div>
        @endif

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

        <div class="nurse-connect-grid">
            {{-- LEFT SIDEBAR: Profile, Stats, & Quick Links --}}
            <aside id="leftSidebar" class="sidebar-section">
                {{-- Profile Card --}}
                <div class="profile-card">
                    <div class="profile-banner"></div>
                    <div class="profile-content">
                        <img src="{{ auth()->user()->displayAvatarUrl() }}" alt="{{ auth()->user()->name }}" class="avatar-container" width="96" height="96" loading="lazy" decoding="async">
                        <h3 class="profile-name">{{ auth()->user()->name }}</h3>
                        <p class="profile-specialty">{{ $profile?->specialty ?? 'Healthcare Professional' }}</p>
                        <p class="profile-location">{{ $profile?->city ? $profile->city . ', ' : '' }}{{ $profile?->country ?? 'Location n/a' }}</p>
                    </div>
                    <div class="profile-links">
                        <a href="{{ route('user.profile.view', auth()->id()) }}" class="profile-link-primary">View Profile</a>
                        <a href="{{ route('user.profile.edit') }}" class="profile-link-secondary">Edit</a>
                    </div>
                </div>

                {{-- Network Stats --}}
                <div class="card">
                    <h3 class="card-title">Manage my network</h3>
                    <ul class="stats-grid">
                        <li class="stat-item">
                            <a class="stat-label" href="{{ route('nurse.connect.timeline', ['tab' => 'network']) }}" style="color: inherit; text-decoration: none;">
                                <svg class="list-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                                Connections
                            </a>
                            <span class="stat-value">{{ $stats['connections'] ?? 0 }}</span>
                        </li>
                        <li class="stat-item">
                            <a class="stat-label" href="{{ route('nurseconnect.following.index') }}" style="color: inherit; text-decoration: none;">
                                <svg class="list-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17v-1a4 4 0 00-4-4H7a4 4 0 00-4 4v1"/><circle cx="9" cy="7" r="4"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M23 21v-1a4 4 0 00-3-3.87"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 3.13a4 4 0 010 7.75"/></svg>
                                Following &amp; followers
                            </a>
                            <span class="stat-value">{{ ($stats['following'] ?? 0) + ($stats['followers'] ?? 0) }}</span>
                        </li>
                        <li class="stat-item">
                            <a class="stat-label" href="{{ route('nurseconnect.groups.index') }}" style="color: inherit; text-decoration: none;">
                                <svg class="list-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0"/></svg>
                                Groups
                            </a>
                            <span class="stat-value">{{ $stats['groups'] ?? 0 }}</span>
                        </li>
                        <li class="stat-item">
                            <a class="stat-label" href="{{ route('nurseconnect.events.index') }}" style="color: inherit; text-decoration: none;">
                                <svg class="list-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                Events
                            </a>
                            <span class="stat-value">{{ $stats['events'] ?? 0 }}</span>
                        </li>
                        <li class="stat-item">
                            <a class="stat-label" href="{{ route('nurseconnect.newsletters.index') }}" style="color: inherit; text-decoration: none;">
                                <svg class="list-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h8l4 4v10a2 2 0 01-2 2z"/></svg>
                                Newsletters
                            </a>
                            <span class="stat-value">{{ $stats['newsletters'] ?? 0 }}</span>
                        </li>
                    </ul>
                </div>

                {{-- Recent Activity --}}
                <div class="card" style="padding: 0;">
                    <div class="card-header">
                        <h3 class="card-header-title">Recent</h3>
                    </div>
                        <div class="card-body-sm">
                            <a href="{{ route('nurse.connect.index', ['feed' => 'mine']) }}" class="list-item">
                                <svg class="list-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                                My Network
                            </a>
                            <a href="{{ route('nurse.connect.index') }}" class="list-item">
                                <svg class="list-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/></svg>
                                Recent Posts
                            </a>
                            <a href="{{ route('nurse.connect.timeline') }}" class="list-item">
                                <svg class="list-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                                My Timeline
                            </a>
                        <a href="{{ route('nurse.connect.timeline') }}" class="list-item">
                            <svg class="list-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                            My Timeline
                        </a>
                        <a href="{{ route('user.connections.requests', ['view' => 'requests']) }}" class="list-item">
                            <svg class="list-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-4l-4 4v-4z"/></svg>
                            Connection Requests
                        </a>
                        <a href="{{ route('jobs.index') }}" class="list-item">
                            <svg class="list-item-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                            Job Postings
                        </a>
                    </div>
                </div>

                {{-- Quick Links --}}
                <div class="card" style="padding: 0;">
                    <button class="discover-toggle">
                        <span>Discover more</span>
                        <svg class="discover-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                    </button>
                </div>
            </aside>

            {{-- MAIN FEED: Add post button + Feed --}}
            <main id="mainFeed" class="sidebar-section">
                <div class="card mb-4">
                    <button type="button" onclick="openAddPostModal()" class="add-post-trigger-btn">
                        <span class="add-post-trigger-avatar">
                            <img src="{{ auth()->user()->displayAvatarUrl() }}" alt="" class="w-full h-full object-cover rounded-full" width="40" height="40" loading="lazy" decoding="async">
                        </span>
                        <span class="add-post-trigger-text">Add a post...</span>
                    </button>
                </div>
                @include('nurse.connect.partials.add-post-modal')

                {{-- Feed Tabs --}}
                <div class="feed-tabs">
                    @php $feed = request('feed', request('filter', 'all')); @endphp
                    @foreach(['all' => 'All', 'network' => 'My Network', 'mine' => 'My Posts'] as $key => $label)
                        <a href="{{ route('nurse.connect.index', array_merge(request()->query(), ['feed' => $key, 'page' => null])) }}"
                           class="feed-tab {{ $feed === $key ? 'feed-tab-active' : '' }}">
                            {{ $label }}
                        </a>
                    @endforeach
                </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>

                {{-- Posts Feed --}}
                <div class="posts-feed" id="posts-container">
                    @foreach($posts as $post)
                        @include('nurse.connect.partials.post-card', ['post' => $post])
                    @endforeach
                </div>

                {{-- Loading Indicator --}}
                <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: #0891b2; 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>

                {{-- Hidden pagination data --}}
                <div id="pagination-data" 
                     data-next-page="{{ $posts->currentPage() + 1 }}" 
                     data-last-page="{{ $posts->lastPage() }}"
                     data-current-page="{{ $posts->currentPage() }}"
                     style="display: none;">
                </div>
            </main>

            {{-- RIGHT SIDEBAR: Connections / Suggestions --}}
            <aside id="rightSidebar" class="sidebar-section">
                {{-- Find Healthcare Workers Filter --}}
                <div class="filter-card">
                    <h3 class="card-title">Find healthcare workers</h3>
                    <form method="GET" action="{{ route('nurse.connect.index') }}" class="filter-form">
                        <input type="hidden" name="feed" value="{{ request('feed', 'all') }}">
                        <div class="filter-field">
                            <label class="filter-label">Country</label>
                            <select name="suggest_country" class="filter-select">
                                <option value="">Any</option>
                                @foreach($countries as $countryOption)
                                    <option value="{{ $countryOption }}" @selected(request('suggest_country') === $countryOption)>{{ $countryOption }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="filter-field">
                            <label class="filter-label">Specialty</label>
                            <select name="suggest_specialty" class="filter-select">
                                <option value="">Any</option>
                                @foreach($specialties as $specialtyOption)
                                    <option value="{{ $specialtyOption }}" @selected(request('suggest_specialty') === $specialtyOption)>{{ $specialtyOption }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="filter-checkboxes">
                            <label class="filter-checkbox">
                                <input type="checkbox" name="suggest_relocate" value="1" class="filter-checkbox-input" @checked(request()->boolean('suggest_relocate'))>
                                <span class="filter-checkbox-label">Willing to relocate</span>
                            </label>
                            <label class="filter-checkbox">
                                <input type="checkbox" name="suggest_nclex" value="Passed" class="filter-checkbox-input" @checked(request('suggest_nclex')==='Passed')>
                                <span class="filter-checkbox-label">NCLEX Passed</span>
                            </label>
                        </div>
                        <button type="submit" class="btn btn-brand" style="width: 100%;">
                            Search
                        </button>
                    </form>
                </div>

                {{-- Suggested Healthcare Workers --}}
                <div class="card" style="padding: 0;">
                    <div class="card-header">
                        <h3 class="card-header-title">Suggestions</h3>
                    </div>
                    <div id="suggestionsList" class="suggestions-list">
                        @include('user.connect.partials.suggestion-cards', ['suggestedNurses' => $suggestedNurses])
                    </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>

{{-- 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