{{-- Add Post Modal: Redesigned with Floating Text Editor --}}
<div id="addPostModal" class="add-post-modal" role="dialog" aria-labelledby="addPostModalTitle" aria-modal="true" style="display: none;">
    <div class="add-post-modal-backdrop" onclick="closeAddPostModal()"></div>
    
    {{-- Floating Edit Menu (Hidden by default) --}}
    <div id="floatingTextMenu" class="floating-text-menu" style="display: none;">
        <button type="button" class="float-btn" onclick="formatText('bold')" title="Bold"><b>B</b></button>
        <button type="button" class="float-btn" onclick="formatText('italic')" title="Italic"><i>I</i></button>
        <div class="float-divider"></div>
        <label class="float-color-picker">
            <span class="color-swatch-circle" id="floatColorSwatch"></span>
            <input type="color" id="floatColorPicker" value="#000000" title="Text Color">
        </label>
    </div>

    <div class="add-post-modal-dialog">
        <div class="add-post-modal-content">
            <header class="add-post-modal-header">
                <h2 id="addPostModalTitle" class="add-post-modal-title">Create Post</h2>
                <button type="button" class="add-post-modal-close" onclick="closeAddPostModal()" aria-label="Close">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                </button>
            </header>

            <form method="POST" action="{{ route('nurse.connect.post') }}" id="postForm" class="add-post-modal-form">
                @csrf
                <input type="hidden" name="feed" value="{{ request('feed', 'all') }}">
                <input type="hidden" name="style_preset" id="stylePresetInput" value="default">
                <input type="hidden" name="font_size" id="fontSizeInput" value="32">
                <input type="hidden" name="background_color" id="backgroundColorInput" value="">
                <input type="hidden" name="text_color" id="textColorInput" value=""> {{-- Kept for backend compatibility if needed --}}
                <input type="hidden" name="background_color_end" id="backgroundColorEndInput" value="">
                <input type="hidden" name="body" id="addPostBodyInput" value="">

                {{-- Preview Section --}}
                <div class="add-post-preview-section">
                    <div class="add-post-section-header">
                        <span class="add-post-label">Preview</span>
                        <span class="add-post-label-hint">Select text to format · <span id="addPostCharCount">0</span>/280</span>
                    </div>
                    <div id="addPostPreviewCard" class="add-post-preview-card">
                        <div id="addPostPreviewIcon" class="add-post-preview-icon" aria-hidden="true"></div>
                        <div id="addPostPreviewText" class="add-post-preview-text" contenteditable="true" role="textbox" aria-label="Post content" data-placeholder="Type your post here..."></div>
                    </div>
                    
                    <div class="add-post-font-control">
                        <div class="font-control-header">
                            <span class="font-control-label">Font Size</span>
                            <span id="addPostFontSizeValue" class="font-control-value">32px</span>
                        </div>
                        <input type="range" id="addPostFontSizeSlider" class="add-post-slider" min="16" max="64" value="32" step="1">
                    </div>
                </div>

                {{-- Style Section --}}
                <div class="add-post-style-section">
                    <div class="add-post-section-header">
                        <span class="add-post-label">Background Style</span>
                    </div>
                    
                    <div class="add-post-tabs-container">
                        <button type="button" class="add-post-tab active" data-tab="templates">Templates</button>
                        <button type="button" class="add-post-tab" data-tab="solid">Solid</button>
                        <button type="button" class="add-post-tab" data-tab="gradient">Gradient</button>
                    </div>

                    <div id="stylePanelTemplates" class="add-post-panel active">
                        <div class="add-post-templates-grid">
                            <button type="button" class="add-post-template-card selected" data-preset="default" data-bg="#ffffff" data-text="#1e293b" data-end="" data-icon="default">
                                <div class="template-card-bg" style="background: #ffffff; border: 1px solid #e2e8f0;">
                                    <span class="template-icon-display" style="color: #94a3b8;">
                                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                                    </span>
                                </div>
                                <span class="template-name">Default</span>
                                <div class="template-check"><svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg></div>
                            </button>
                            
                            <button type="button" class="add-post-template-card" data-preset="quote" data-bg="#E8F4FF" data-text="#1D5BBF" data-end="" data-icon="quote">
                                <div class="template-card-bg" style="background: #E8F4FF; color: #1D5BBF;">
                                    <span class="template-icon-display"><svg fill="currentColor" viewBox="0 0 24 24"><path d="M6 17h3l2-4V7H5v6h3l-2 4zm8 0h3l2-4V7h-6v6h3l-2 4z"/></svg></span>
                                </div>
                                <span class="template-name">Quote</span>
                                <div class="template-check"><svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg></div>
                            </button>

                            <button type="button" class="add-post-template-card" data-preset="tip" data-bg="#ECFDF5" data-text="#059669" data-end="" data-icon="tip">
                                <div class="template-card-bg" style="background: #ECFDF5; color: #059669;">
                                    <span class="template-icon-display"><svg fill="currentColor" viewBox="0 0 24 24"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z"/></svg></span>
                                </div>
                                <span class="template-name">Tip</span>
                                <div class="template-check"><svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg></div>
                            </button>

                            <button type="button" class="add-post-template-card" data-preset="milestone" data-bg="#FFFBEB" data-text="#D97706" data-end="" data-icon="milestone">
                                <div class="template-card-bg" style="background: #FFFBEB; color: #D97706;">
                                    <span class="template-icon-display"><svg fill="currentColor" viewBox="0 0 24 24"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg></span>
                                </div>
                                <span class="template-name">Milestone</span>
                                <div class="template-check"><svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg></div>
                            </button>

                            <button type="button" class="add-post-template-card" data-preset="professional" data-bg="#1e293b" data-text="#f1f5f9" data-end="" data-icon="professional">
                                <div class="template-card-bg" style="background: #1e293b; color: #f1f5f9;">
                                    <span class="template-icon-display"><svg fill="currentColor" viewBox="0 0 24 24"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg></span>
                                </div>
                                <span class="template-name">Pro</span>
                                <div class="template-check"><svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg></div>
                            </button>
                        </div>
                    </div>

                    <div id="stylePanelSolid" class="add-post-panel">
                        <div class="add-post-color-row">
                            <div class="color-picker-group full-width">
                                <label class="color-picker-label">Background Color</label>
                                <div class="color-input-wrapper">
                                    <input type="color" id="solidBgPicker" value="#E8F4FF" class="color-swatch-input">
                                    <input type="text" id="solidBgInput" value="#E8F4FF" class="color-hex-input" maxlength="7">
                                </div>
                            </div>
                        </div>
                        <p class="helper-text mt-2">Select text in the preview to change its color.</p>
                    </div>

                    <div id="stylePanelGradient" class="add-post-panel">
                        <div class="gradient-presets-row">
                            <button type="button" class="gradient-preset-btn" data-bg="#ff9a56" data-end="#ff6a00" style="background: linear-gradient(135deg, #ff9a56, #ff6a00);"></button>
                            <button type="button" class="gradient-preset-btn" data-bg="#2193b0" data-end="#6dd5ed" style="background: linear-gradient(135deg, #2193b0, #6dd5ed);"></button>
                            <button type="button" class="gradient-preset-btn" data-bg="#11998e" data-end="#38ef7d" style="background: linear-gradient(135deg, #11998e, #38ef7d);"></button>
                            <button type="button" class="gradient-preset-btn" data-bg="#667eea" data-end="#764ba2" style="background: linear-gradient(135deg, #667eea, #764ba2);"></button>
                            <button type="button" class="gradient-preset-btn" data-bg="#f093fb" data-end="#f5576c" style="background: linear-gradient(135deg, #f093fb, #f5576c);"></button>
                        </div>
                        
                        <div class="add-post-color-row mt-3">
                            <div class="color-picker-group">
                                <label class="color-picker-label">Start Color</label>
                                <div class="color-input-wrapper">
                                    <input type="color" id="gradientStartPicker" value="#667eea" class="color-swatch-input">
                                    <input type="text" id="gradientStartInput" placeholder="#667eea" class="color-hex-input">
                                </div>
                            </div>
                            <div class="color-picker-group">
                                <label class="color-picker-label">End Color</label>
                                <div class="color-input-wrapper">
                                    <input type="color" id="gradientEndPicker" value="#764ba2" class="color-swatch-input">
                                    <input type="text" id="gradientEndInput" placeholder="#764ba2" class="color-hex-input">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Meta Section --}}
                <div class="add-post-meta-section">
                    <div class="add-post-meta-grid">
                        <div class="meta-input-group">
                            <label class="add-post-label" for="addPostTagInput">Tag</label>
                            <input type="text" name="specialty_tag" id="addPostTagInput" placeholder="e.g. Nursing" class="form-input-material" list="addPostTagList">
                            <datalist id="addPostTagList">
                                @foreach(($specialties ?? collect())->take(15) as $s)
                                    <option value="{{ $s }}">
                                @endforeach
                            </datalist>
                        </div>
                        <div class="meta-input-group">
                            <label class="add-post-label" for="addPostCategorySelect">Category</label>
                            <select name="category_id" id="addPostCategorySelect" class="form-input-material">
                                <option value="">Select Category</option>
                                @foreach($forumCategories ?? [] as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->icon ? $cat->icon . ' ' : '' }}{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <footer class="add-post-modal-footer">
                    <button type="button" class="btn btn-ghost" onclick="closeAddPostModal()">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <span>Post Now</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                    </button>
                </footer>
            </form>
        </div>
    </div>
</div>

<style>
/* --- Base Modal Styles --- */
.add-post-modal { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 1rem; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.add-post-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); }
.add-post-modal-dialog { position: relative; width: 100%; max-width: 580px; max-height: 90vh; animation: slideUp 0.3s ease-out; }
.add-post-modal-content { background: #fff; border-radius: 1rem; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.2); overflow: hidden; display: flex; flex-direction: column; max-height: 90vh; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* --- Floating Edit Menu --- */
.floating-text-menu {
    position: absolute;
    background: #1e293b;
    padding: 0.35rem 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    z-index: 1100;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    transform: translateY(-10px);
    transition: opacity 0.2s, transform 0.2s;
}
/* Arrow pointer */
.floating-text-menu::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: #1e293b transparent transparent;
}
.float-btn {
    background: transparent;
    border: none;
    color: #cbd5e1;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: all 0.15s;
}
.float-btn:hover { background: #334155; color: #fff; }
.float-divider { width: 1px; height: 20px; background: #475569; margin: 0 0.25rem; }
.float-color-picker { position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; }
.float-color-picker:hover { background: #334155; }
.float-color-picker input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.color-swatch-circle { width: 16px; height: 16px; border-radius: 50%; background: #ffffff; border: 2px solid #94a3b8; display: block; pointer-events: none; }

/* --- Header --- */
.add-post-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid #f1f5f9; }
.add-post-modal-title { font-size: 1.125rem; font-weight: 700; color: #0f172a; margin: 0; }
.add-post-modal-close { width: 2rem; height: 2rem; border: none; background: none; color: #64748b; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.add-post-modal-close:hover { background: #f1f5f9; color: #0f172a; }

/* --- Form Body --- */
.add-post-modal-form { padding: 1.5rem; overflow-y: auto; flex: 1; background: #f8fafc; }

/* --- Preview Section --- */
.add-post-preview-section { margin-bottom: 1.5rem; }
.add-post-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.add-post-label { font-size: 0.75rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
.add-post-label-hint { font-size: 0.6875rem; color: #94a3b8; font-weight: 400; text-transform: none; }

.add-post-preview-card {
    border-radius: 0.75rem;
    padding: 1.5rem 2rem;
    border: none;
    background-color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    aspect-ratio: 16 / 9;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
    cursor: text;
}

.add-post-preview-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0.1; }
.add-post-preview-icon svg { width: 40%; height: 40%; max-width: 80px; max-height: 80px; }

.add-post-preview-text { 
    margin: 0; 
    font-size: 32px; 
    line-height: 1.3; 
    white-space: pre-wrap; 
    word-break: break-word; 
    text-align: center; 
    position: relative; 
    z-index: 1; 
    width: 100%; 
    outline: none; 
    font-weight: 600;
    transition: font-size 0.15s ease;
}
.add-post-preview-text:empty::before { content: attr(data-placeholder); color: #cbd5e1; font-weight: 400; }

/* --- Font Slider --- */
.add-post-font-control { margin-top: 1rem; background: #fff; padding: 0.75rem 1rem; border-radius: 0.5rem; border: 1px solid #e2e8f0; }
.font-control-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.font-control-label { font-size: 0.75rem; font-weight: 500; color: #475569; }
.font-control-value { font-size: 0.75rem; font-weight: 600; color: #1D5BBF; background: #E8F4FF; padding: 0.125rem 0.5rem; border-radius: 0.25rem; }
.add-post-slider { width: 100%; height: 4px; background: #e2e8f0; border-radius: 2px; outline: none; -webkit-appearance: none; }
.add-post-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: #1D5BBF; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

/* --- Tabs --- */
.add-post-style-section { margin-bottom: 1.5rem; }
.add-post-tabs-container { display: flex; background: #e2e8f0; padding: 4px; border-radius: 0.5rem; margin-bottom: 1rem; }
.add-post-tab { flex: 1; padding: 0.5rem; font-size: 0.8125rem; font-weight: 600; border: none; background: transparent; color: #64748b; border-radius: 0.375rem; cursor: pointer; transition: all 0.2s; }
.add-post-tab.active { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.add-post-panel { display: none; animation: fadeIn 0.2s ease; }
.add-post-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- Template Cards --- */
.add-post-templates-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; }
.add-post-template-card { position: relative; border: none; background: transparent; padding: 0; cursor: pointer; transition: transform 0.2s; }
.add-post-template-card:hover { transform: translateY(-2px); }
.template-card-bg { height: 60px; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; margin-bottom: 0.375rem; border: 2px solid transparent; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.2s; }
.template-icon-display { width: 24px; height: 24px; opacity: 0.8; }
.template-name { display: block; font-size: 0.6875rem; font-weight: 500; color: #64748b; text-align: center; }
.add-post-template-card.selected .template-card-bg { border-color: #1D5BBF; box-shadow: 0 0 0 2px rgba(29, 91, 191, 0.2); }
.add-post-template-card.selected .template-name { color: #1D5BBF; font-weight: 600; }
.template-check { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; background: #1D5BBF; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transform: scale(0.5); transition: all 0.2s; }
.add-post-template-card.selected .template-check { opacity: 1; transform: scale(1); }
.template-check svg { width: 10px; height: 10px; }

/* --- Color Pickers --- */
.add-post-color-row { display: flex; gap: 1rem; }
.color-picker-group { flex: 1; }
.color-picker-group.full-width { flex: 1; }
.color-picker-label { display: block; font-size: 0.75rem; font-weight: 500; color: #475569; margin-bottom: 0.375rem; }
.color-input-wrapper { display: flex; align-items: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: border-color 0.2s; }
.color-input-wrapper:focus-within { border-color: #1D5BBF; }
.color-swatch-input { width: 2.5rem; height: 2rem; padding: 0; border: none; background: none; cursor: pointer; border-right: 1px solid #e2e8f0; }
.color-hex-input { flex: 1; border: none; padding: 0.5rem; font-size: 0.8125rem; font-family: monospace; color: #334155; outline: none; background: transparent; }

.helper-text { font-size: 0.75rem; color: #94a3b8; font-style: italic; }

/* --- Gradient Presets --- */
.gradient-presets-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.gradient-preset-btn { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: all 0.2s; }
.gradient-preset-btn:hover { transform: scale(1.1); }
.gradient-preset-btn.selected { border-color: #fff; box-shadow: 0 0 0 2px #1D5BBF; }

/* --- Meta Section --- */
.add-post-meta-section { margin-bottom: 1rem; }
.add-post-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.meta-input-group { display: flex; flex-direction: column; }
.form-input-material { width: 100%; padding: 0.75rem 1rem; font-size: 0.875rem; border: 1px solid #e2e8f0; border-radius: 0.5rem; background: #fff; color: #334155; transition: all 0.2s; outline: none; }
.form-input-material:focus { border-color: #1D5BBF; box-shadow: 0 0 0 3px rgba(29, 91, 191, 0.1); }

/* --- Footer --- */
.add-post-modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1.25rem 1.5rem; border-top: 1px solid #f1f5f9; background: #fff; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 600; border-radius: 0.5rem; cursor: pointer; transition: all 0.2s; border: none; outline: none; }
.btn-ghost { background: transparent; color: #64748b; border: 1px solid #e2e8f0; }
.btn-ghost:hover { background: #f8fafc; color: #0f172a; }
.btn-primary { background: #1D5BBF; color: #fff; box-shadow: 0 2px 4px rgba(29, 91, 191, 0.2); }
.btn-primary:hover { background: #164db3; box-shadow: 0 4px 6px rgba(29, 91, 191, 0.3); }

.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
</style>

<script>
(function() {
    var modal = document.getElementById('addPostModal');
    var previewCard = document.getElementById('addPostPreviewCard');
    var previewText = document.getElementById('addPostPreviewText');
    var fontSizeSlider = document.getElementById('addPostFontSizeSlider');
    var fontSizeValueEl = document.getElementById('addPostFontSizeValue');
    var floatingMenu = document.getElementById('floatingTextMenu');
    var floatColorSwatch = document.getElementById('floatColorSwatch');
    var floatColorPicker = document.getElementById('floatColorPicker');
    
    var manualFontSize = false;

    // --- Helpers ---
    function toSixDigitHex(hex) {
        if (!hex || !/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(hex)) return hex || '';
        hex = hex.slice(1);
        if (hex.length === 3) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
        return '#' + hex;
    }

    // --- Modal Controls ---
    window.openAddPostModal = function() {
        if (modal) modal.style.display = 'flex';
        manualFontSize = false;
        if (fontSizeSlider) fontSizeSlider.value = 32;
        if (fontSizeValueEl) fontSizeValueEl.textContent = '32px';
        if (previewText) { previewText.focus(); updateAddPostPreview(); }
    };
    window.closeAddPostModal = function() {
        if (modal) modal.style.display = 'none';
    };
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && modal && modal.style.display === 'flex') closeAddPostModal();
    });

    // --- Floating Menu Logic ---
    function showFloatingMenu() {
        const selection = window.getSelection();
        if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
            floatingMenu.style.display = 'none';
            return;
        }

        const range = selection.getRangeAt(0);
        const rect = range.getBoundingClientRect();
        
        // Check if selection is inside our preview text
        if (!previewText.contains(range.commonAncestorContainer)) {
            floatingMenu.style.display = 'none';
            return;
        }

        // Position the menu
        const menuWidth = 120; // Approximate width
        let left = rect.left + (rect.width / 2) - (menuWidth / 2);
        
        // Boundary checks
        left = Math.max(10, Math.min(left, window.innerWidth - menuWidth - 10));

        floatingMenu.style.left = left + 'px';
        floatingMenu.style.top = (rect.top - 45 + window.scrollY) + 'px'; // 45px above text
        floatingMenu.style.display = 'flex';
    }

    document.addEventListener('mouseup', function(e) {
        // Small delay to allow selection to complete
        setTimeout(showFloatingMenu, 10);
    });

    document.addEventListener('selectionchange', function() {
        // Hide if selection collapses
        if (window.getSelection().isCollapsed) {
            floatingMenu.style.display = 'none';
        }
    });

    // --- Text Formatting Functions ---
    window.formatText = function(command) {
        document.execCommand(command, false, null);
        previewText.focus();
    };

    floatColorPicker.addEventListener('input', function(e) {
        // We use foreColor command for inline coloring
        document.execCommand('foreColor', false, e.target.value);
        floatColorSwatch.style.background = e.target.value;
    });

    function getAddPostPlainTextLength() {
        if (!previewText) return 0;
        var d = document.createElement('div');
        d.innerHTML = previewText.innerHTML || '';
        var t = (d.textContent || d.innerText || '').replace(/\s+/g, ' ').trim();
        return t.length;
    }

    function updateAddPostCharCount() {
        var el = document.getElementById('addPostCharCount');
        if (el) el.textContent = String(getAddPostPlainTextLength());
    }

    // --- Preview Logic ---
    function updateAddPostPreview() {
        if (!previewCard || !previewText) return;
        
        var bg = document.getElementById('backgroundColorInput')?.value?.trim() || '';
        var end = document.getElementById('backgroundColorEndInput')?.value?.trim() || '';
        
        previewCard.style.removeProperty('background');
        previewCard.style.removeProperty('background-color');

        if (end) {
            previewCard.style.background = 'linear-gradient(135deg, ' + bg + ' 0%, ' + end + ' 100%)';
            // Default white text for gradients usually works best, but user can override with floating menu
            // We don't force it anymore since we removed the global text color input
        } else if (bg) {
            previewCard.style.backgroundColor = bg;
        } else {
            previewCard.style.backgroundColor = '#fff';
        }
        
        setPreviewIconFromTemplate();
        updateAddPostCharCount();
    }

    function setPreviewIconFromTemplate() {
        var iconEl = document.getElementById('addPostPreviewIcon');
        if (!iconEl) return;
        var preset = document.getElementById('stylePresetInput')?.value || '';
        
        if (preset === 'custom' || preset === 'gradient') {
            iconEl.innerHTML = '';
            return;
        }
        
        var activeCard = document.querySelector('.add-post-template-card.selected');
        if (activeCard && preset !== 'default') {
             var iconSrc = activeCard.querySelector('.template-icon-display');
             if(iconSrc) {
                 iconEl.innerHTML = iconSrc.outerHTML;
                 var svg = iconEl.querySelector('svg');
                 if(svg) {
                     svg.style.width = '50%';
                     svg.style.height = '50%';
                     svg.style.opacity = '0.15';
                 }
             }
        } else {
            iconEl.innerHTML = '';
        }
    }

    function updateFontSizeFromSlider() {
        if (!fontSizeSlider || !previewText) return;
        var px = parseInt(fontSizeSlider.value, 10);
        previewText.style.fontSize = px + 'px';
        if (fontSizeValueEl) fontSizeValueEl.textContent = px + 'px';
    }

    // --- Event Listeners ---

    // Tabs
    document.querySelectorAll('.add-post-tab').forEach(function(tab) {
        tab.addEventListener('click', function() {
            document.querySelectorAll('.add-post-tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.add-post-panel').forEach(p => p.classList.remove('active'));
            this.classList.add('active');
            var panel = document.getElementById('stylePanel' + this.getAttribute('data-tab').charAt(0).toUpperCase() + this.getAttribute('data-tab').slice(1));
            if (panel) panel.classList.add('active');
        });
    });

    // Font Slider
    fontSizeSlider?.addEventListener('input', function() {
        manualFontSize = true;
        updateFontSizeFromSlider();
    });

    // Text Input
    previewText?.addEventListener('input', updateAddPostPreview);

    // Templates
    document.querySelectorAll('.add-post-template-card').forEach(function(btn) {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.add-post-template-card').forEach(b => b.classList.remove('selected'));
            this.classList.add('selected');
            
            var bg = this.getAttribute('data-bg') || '';
            var text = this.getAttribute('data-text') || '';
            var end = this.getAttribute('data-end') || '';
            var preset = this.getAttribute('data-preset') || 'default';
            
            document.getElementById('stylePresetInput').value = preset;
            document.getElementById('backgroundColorInput').value = bg;
            document.getElementById('backgroundColorEndInput').value = end;
            
            // We set the hidden input to the suggested text color, but we don't force it on the elements
            // so the user's custom selection via the floating menu persists
            document.getElementById('textColorInput').value = text;

            // Sync solid pickers
            document.getElementById('solidBgInput').value = bg;
            if(bg) document.getElementById('solidBgPicker').value = toSixDigitHex(bg);
            
            // Clear gradient selection visual
            document.querySelectorAll('.gradient-preset-btn').forEach(b => b.classList.remove('selected'));

            updateAddPostPreview();
        });
    });

    // Solid Colors
    var solidBgPicker = document.getElementById('solidBgPicker');
    var solidBgInput = document.getElementById('solidBgInput');
    
    solidBgPicker?.addEventListener('input', function() {
        solidBgInput.value = this.value;
        document.getElementById('backgroundColorInput').value = this.value;
        document.getElementById('backgroundColorEndInput').value = ''; // Clear end
        document.getElementById('stylePresetInput').value = 'custom';
        document.querySelectorAll('.add-post-template-card').forEach(b => b.classList.remove('selected'));
        updateAddPostPreview();
    });
    
    solidBgInput?.addEventListener('blur', function() {
        document.getElementById('backgroundColorInput').value = this.value;
        if(/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(this.value)) {
            solidBgPicker.value = toSixDigitHex(this.value);
        }
        updateAddPostPreview();
    });

    // Gradient Presets
    document.querySelectorAll('.gradient-preset-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.gradient-preset-btn').forEach(b => b.classList.remove('selected'));
            this.classList.add('selected');
            
            var bg = this.getAttribute('data-bg');
            var end = this.getAttribute('data-end');
            
            document.getElementById('stylePresetInput').value = 'gradient';
            document.getElementById('backgroundColorInput').value = bg;
            document.getElementById('backgroundColorEndInput').value = end;
            
            document.getElementById('gradientStartInput').value = bg;
            document.getElementById('gradientEndInput').value = end;
            document.getElementById('gradientStartPicker').value = bg;
            document.getElementById('gradientEndPicker').value = end;
            
            document.querySelectorAll('.add-post-template-card').forEach(b => b.classList.remove('selected'));
            updateAddPostPreview();
        });
    });

    // Gradient Manual Pickers
    ['gradientStartPicker', 'gradientEndPicker'].forEach(function(id) {
        var el = document.getElementById(id);
        if (!el) return;
        el.addEventListener('input', function() {
            document.querySelectorAll('.gradient-preset-btn').forEach(b => b.classList.remove('selected'));
            document.getElementById('stylePresetInput').value = 'gradient';
            
            var start = document.getElementById('gradientStartPicker').value;
            var end = document.getElementById('gradientEndPicker').value;
            
            document.getElementById('gradientStartInput').value = start;
            document.getElementById('gradientEndInput').value = end;
            
            document.getElementById('backgroundColorInput').value = start;
            document.getElementById('backgroundColorEndInput').value = end;
            
            updateAddPostPreview();
        });
    });

    // Form Submit
    document.getElementById('postForm')?.addEventListener('submit', function(e) {
        e.preventDefault();
        var bodyInput = document.getElementById('addPostBodyInput');
        // Important: Use innerHTML to preserve Bold/Italic/Color spans
        var body = previewText ? previewText.innerHTML.trim() : '';
        
        // Check if empty or just empty tags
        if (!body || body === '<br>' || body === '<p></p>') {
            alert('Please type your post in the preview area.');
            if (previewText) previewText.focus();
            return;
        }

        var plainLen = getAddPostPlainTextLength();
        if (plainLen > 280) {
            alert('Posts may not exceed 280 characters (text only).');
            if (previewText) previewText.focus();
            return;
        }
        
        if (bodyInput) bodyInput.value = body;
        var fs = (fontSizeSlider && fontSizeSlider.value) ? parseInt(fontSizeSlider.value, 10) : 32;
        var fontSizeInput = document.getElementById('fontSizeInput');
        if (fontSizeInput) fontSizeInput.value = Math.min(64, Math.max(16, fs));
        
        var form = this;
        var formData = new FormData(form);
        
        // Clean empty data
        ['background_color', 'text_color', 'background_color_end', 'category_id'].forEach(function(key) {
            var v = formData.get(key);
            if (v === null || v === undefined || (typeof v === 'string' && v.trim() === '')) formData.delete(key);
        });

        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(r => r.ok ? r.json() : Promise.reject(new Error('Post failed')))
        .then(data => {
            if (data && data.success) {
                closeAddPostModal();
                form.reset();
                // Reset UI
                document.getElementById('stylePresetInput').value = 'default';
                document.getElementById('backgroundColorInput').value = '';
                document.getElementById('textColorInput').value = '';
                document.getElementById('backgroundColorEndInput').value = '';
                document.querySelectorAll('.add-post-template-card').forEach(b => b.classList.remove('selected'));
                document.querySelector('.add-post-template-card[data-preset="default"]')?.classList.add('selected');
                if (previewText) previewText.innerHTML = '';
                manualFontSize = false;
                if (fontSizeSlider) fontSizeSlider.value = 32;
                if (fontSizeValueEl) fontSizeValueEl.textContent = '32px';
                updateAddPostPreview();
                
                if (window.Livewire && typeof window.Livewire.emit === 'function') window.Livewire.emit('postCreated');
                else window.location.reload();
            } else {
                window.location.reload();
            }
        })
        .catch(() => alert('Failed to create post. Please try again.'));
    });

    // Initialize
    updateAddPostPreview();
    updateAddPostCharCount();

})();
</script>