{{-- ===========================================
resources/views/admin/healthfeed/_form.blade.php - WITH FULL WIDTH EDITOR
=========================================== --}}

<input type="hidden" name="id" id="id">

{{-- TOP SECTION: Two columns for basic info and media --}}
<div class="row g-4">
    {{-- LEFT COLUMN: Basic Info --}}
    <div class="col-md-7">
        <div class="mb-3">
            <label class="form-label fw-bold">Title <span class="text-danger">*</span></label>
            <input type="text"
                   name="title"
                   id="title"
                   class="form-control form-control-lg"
                   placeholder="Enter a compelling title"
                   maxlength="255"
                   required>
            <small class="text-muted">Maximum 255 characters - Be clear and descriptive</small>
        </div>

        <div class="mb-3">
            <label class="form-label fw-bold">Tagline / Subtitle</label>
            <input type="text"
                   name="tagline"
                   id="tagline"
                   class="form-control"
                   placeholder="Short catchy phrase (e.g., 'Boost your immunity naturally')"
                   maxlength="500">
            <small class="text-muted">A short, catchy phrase that summarizes the content</small>
        </div>
    </div>

    {{-- RIGHT COLUMN: Media Upload --}}
    <div class="col-md-5">
        <div class="card shadow-sm mb-3 border-0">
            <div class="card-header bg-primary bg-opacity-10 fw-semibold border-0">
                <i class="ti ti-photo-plus me-2"></i> Media
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label fw-bold">Media Type</label>
                    <select name="media_type" id="media_type" class="form-select">
                        <option value="image">📷 Image (JPG, PNG, GIF)</option>
                        <option value="video">🎥 Video (MP4, WebM)</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">Upload File</label>
                    <input type="file"
                           name="media_url"
                           id="media_url"
                           class="form-control"
                           accept="image/*,video/*">
                    <small class="text-muted">Recommended: Images 1200x800px | Videos max 50MB</small>
                </div>
                
                <div id="mediaPreview" class="text-center bg-light rounded p-3">
                    <img id="previewImage" style="max-width:100%;max-height:180px;display:none;border-radius:8px;">
                    <video id="previewVideo" style="max-width:100%;max-height:180px;display:none;" controls></video>
                    <div id="noPreviewText" class="text-muted">
                        <i class="ti ti-cloud-upload fs-1 d-block mb-2"></i>
                        No media selected
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- MIDDLE SECTION: Two columns for category and settings --}}
<div class="row g-4 mt-2">
    <div class="col-md-6">
        <div class="card shadow-sm mb-3 border-0">
            <div class="card-header bg-success bg-opacity-10 fw-semibold border-0">
                <i class="ti ti-tags me-2"></i> Classification
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label fw-bold">Category <span class="text-danger">*</span></label>
                    <select name="category_id" id="category_id" class="form-select" required>
                        <option value="">-- Select Category --</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}">
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">
                        Doctor / Expert
                        <span class="text-muted fw-normal">(Optional)</span>
                    </label>
                    <select name="doctor_id" id="doctor_id" class="form-select">
                        <option value="">-- Select Doctor (Searchable) --</option>
                        @foreach($doctors as $doctor)
                            <option value="{{ $doctor->user_id }}">
                                👨‍⚕️ {{ $doctor->doctor_name }}
                            </option>
                        @endforeach
                    </select>
                    <small class="text-muted">Type to search for a doctor</small>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card shadow-sm mb-3 border-0">
            <div class="card-header bg-info bg-opacity-10 fw-semibold border-0">
                <i class="ti ti-settings me-2"></i> Display Settings
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label fw-bold">Module / Page</label>
                    <select name="module_name" id="module_name" class="form-select">
                        <option value="main_home">🏠 Main Home Page</option>
                        <option value="doctor_home">🏥 Doctor Home</option>
                        <option value="lab_tests_home">🔬 Lab Tests Home</option>
                        <option value="pharamcy_home">💊 Pharmacy Home</option>
                        <option value="health_insurance_home">🛡️ Insurance Home</option>
                    </select>
                </div>

                <div class="row">
                    <div class="col-6">
                        <label class="form-label fw-bold">Featured</label>
                        <select name="is_featured" id="is_featured" class="form-select">
                            <option value="0"> No</option>
                            <option value="1">Yes (Featured)</option>
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-bold">Status</label>
                        <select name="status" id="status" class="form-select">
                            <option value="active" selected>Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- BOTTOM SECTION: Full width description with Rich Text Editor --}}
<div class="row mt-2">
    <div class="col-12">
        <div class="card shadow-sm border-0">
            <div class="card-header bg-danger bg-opacity-10 fw-semibold border-0">
                <i class="ti ti-article me-2"></i> Description / Content
                <span class="text-danger">*</span>
            </div>
            <div class="card-body">
                <textarea name="description"
                          id="description"
                          class="form-control"
                          rows="15"
                          placeholder="Write your detailed content here. You can use the rich text editor toolbar above for formatting..."></textarea>
                <div class="d-flex justify-content-between mt-2">
                    <small class="text-muted">
                        <i class="ti ti-info-circle me-1"></i> 
                        Supports: Bold, Italic, Lists, Links, Headings & more
                    </small>
                    <small class="text-muted">
                        <span id="charCount">0</span> / 10000 characters
                        <span id="charWarning" class="text-warning ms-2" style="display:none;">
                            <i class="ti ti-alert-triangle"></i> Approaching limit
                        </span>
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Include CKEditor 5 (Classic Editor) --}}
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<script>
let editorInstance = null;
window.pendingDescription = null;

document.addEventListener('DOMContentLoaded', function() {
    // ========== INITIALIZE CKEDITOR ==========
    ClassicEditor
        .create(document.querySelector('#description'), {
            toolbar: {
                items: [
                    'heading', '|',
                    'bold', 'italic', 'underline', 'strikethrough', '|',
                    'bulletedList', 'numberedList', '|',
                    'blockQuote', 'link', 'insertTable', '|',
                    'undo', 'redo', '|',
                    'alignment', 'fontSize', 'fontColor', 'highlight'
                ],
                shouldNotGroupWhenFull: true
            },
            heading: {
                options: [
                    { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                    { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                    { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                    { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }
                ]
            },
            fontSize: {
                options: [10, 12, 14, 'default', 18, 20, 22, 24]
            },
            placeholder: 'Write your detailed health feed content here...'
        })
        .then(editor => {
            editorInstance = editor;
            window.editor = editor;
            
            // Set pending description if exists (for editing)
            if (window.pendingDescription) {
                editor.setData(window.pendingDescription);
                window.pendingDescription = null;
            }
            
            // Character counter logic...
            const counterElement = document.getElementById('charCount');
            const charWarning = document.getElementById('charWarning');
            
            const updateCharCount = () => {
                const data = editor.getData();
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = data;
                const text = tempDiv.textContent || tempDiv.innerText || '';
                const count = text.length;
                
                if (counterElement) {
                    counterElement.textContent = count;
                    if (count > 10000) {
                        counterElement.style.color = 'red';
                        if (charWarning) {
                            charWarning.style.display = 'inline';
                            charWarning.innerHTML = 'Limit exceeded!';
                        }
                    } else if (count > 9000) {
                        counterElement.style.color = 'orange';
                        if (charWarning) {
                            charWarning.style.display = 'inline';
                            charWarning.innerHTML = 'Approaching limit';
                        }
                    } else {
                        counterElement.style.color = 'green';
                        if (charWarning) charWarning.style.display = 'none';
                    }
                }
            };
            
            editor.model.document.on('change:data', updateCharCount);
            updateCharCount();
        })
        .catch(error => {
            console.error('CKEditor error:', error);
            const textarea = document.querySelector('#description');
            textarea.style.display = 'block';
            if (window.pendingDescription) {
                textarea.value = window.pendingDescription;
                window.pendingDescription = null;
            }
        });
    });
</script>
<script>
let editorInstance = null;

document.addEventListener('DOMContentLoaded', function() {
    // ========== INITIALIZE CKEDITOR ==========
    ClassicEditor
        .create(document.querySelector('#description33333'), {
            toolbar: {
                items: [
                    'heading', '|',
                    'bold', 'italic', 'underline', 'strikethrough', '|',
                    'bulletedList', 'numberedList', '|',
                    'blockQuote', 'link', 'insertTable', '|',
                    'undo', 'redo', '|',
                    'alignment', 'fontSize', 'fontColor', 'highlight'
                ],
                shouldNotGroupWhenFull: true
            },
            heading: {
                options: [
                    { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                    { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                    { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                    { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }
                ]
            },
            fontSize: {
                options: [10, 12, 14, 'default', 18, 20, 22, 24]
            },
            placeholder: 'Write your detailed health feed content here...',
            height: 400
        })
        .then(editor => {
            editorInstance = editor;
            window.editor = editor;
            
            // Update character count when editor content changes
            const counterElement = document.getElementById('charCount');
            const charWarning = document.getElementById('charWarning');
            
            const updateCharCount = () => {
                const data = editor.getData();
                // Extract plain text from HTML
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = data;
                const text = tempDiv.textContent || tempDiv.innerText || '';
                const count = text.length;
                
                if (counterElement) {
                    counterElement.textContent = count;
                    
                    if (count > 10000) {
                        counterElement.style.color = 'red';
                        counterElement.style.fontWeight = 'bold';
                        if (charWarning) {
                            charWarning.style.display = 'inline';
                            charWarning.innerHTML = '<i class="ti ti-alert-triangle"></i> Limit exceeded!';
                            charWarning.style.color = 'red';
                        }
                    } else if (count > 9000) {
                        counterElement.style.color = 'orange';
                        if (charWarning) {
                            charWarning.style.display = 'inline';
                            charWarning.innerHTML = '<i class="ti ti-alert-triangle"></i> Approaching limit';
                            charWarning.style.color = 'orange';
                        }
                    } else {
                        counterElement.style.color = 'green';
                        if (charWarning) charWarning.style.display = 'none';
                    }
                }
            };
            
            editor.model.document.on('change:data', updateCharCount);
            updateCharCount();
            
            // Set initial content if editing
            if (window.initialDescription) {
                editor.setData(window.initialDescription);
            }
        })
        .catch(error => {
            console.error('CKEditor error:', error);
            // Fallback to simple textarea
            const textarea = document.querySelector('#description');
            textarea.style.display = 'block';
            textarea.addEventListener('input', function() {
                const count = this.value.length;
                const counter = document.getElementById('charCount');
                if (counter) {
                    counter.textContent = count;
                    counter.style.color = count > 10000 ? 'red' : 'green';
                }
            });
        });

    // ========== INITIALIZE SELECT2 FOR DOCTOR SEARCH ==========
    if (typeof $.fn.select2 !== 'undefined') {
        setTimeout(function() {
            $('#doctor_id').select2({
                theme: 'bootstrap-5',
                width: '100%',
                placeholder: '🔍 Search doctor by name...',
                allowClear: true,
                dropdownParent: $('#healthFeedCanvas .offcanvas-body'),
                matcher: function(params, data) {
                    if ($.trim(params.term) === '') {
                        return data;
                    }
                    const term = params.term.toLowerCase();
                    const text = data.text.toLowerCase();
                    if (text.indexOf(term) > -1) {
                        return data;
                    }
                    return null;
                }
            });
        }, 200);
    }

    // ========== MEDIA PREVIEW ==========
    const mediaInput = document.getElementById('media_url');
    const previewImage = document.getElementById('previewImage');
    const previewVideo = document.getElementById('previewVideo');
    const noPreviewText = document.getElementById('noPreviewText');
    const mediaTypeSelect = document.getElementById('media_type');

    if (mediaInput) {
        mediaInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) {
                resetPreview();
                return;
            }

            const url = URL.createObjectURL(file);
            const type = file.type;
            
            resetPreview();

            if (type.startsWith('image/')) {
                previewImage.src = url;
                previewImage.style.display = 'block';
                if (mediaTypeSelect) mediaTypeSelect.value = 'image';
                noPreviewText.style.display = 'none';
            } else if (type.startsWith('video/')) {
                previewVideo.src = url;
                previewVideo.style.display = 'block';
                if (mediaTypeSelect) mediaTypeSelect.value = 'video';
                noPreviewText.style.display = 'none';
            }
        });
    }

    function resetPreview() {
        previewImage.style.display = 'none';
        previewVideo.style.display = 'none';
        noPreviewText.style.display = 'block';
    }

    if (mediaTypeSelect) {
        mediaTypeSelect.addEventListener('change', function() {
            const type = this.value;
            if (mediaInput) {
                mediaInput.setAttribute('accept', type === 'image' ? 'image/*' : 'video/*');
                mediaInput.value = '';
                resetPreview();
            }
        });
    }
});

// ========== GLOBAL FUNCTION TO POPULATE FORM FOR EDITING ==========
function populateHealthFeedForm(data) {
    if (!data) return;
    
    document.getElementById('id').value = data.id || '';
    document.getElementById('title').value = data.title || '';
    document.getElementById('tagline').value = data.tagline || '';
    document.getElementById('category_id').value = data.category_id || '';
    document.getElementById('media_type').value = data.media_type || 'image';
    document.getElementById('module_name').value = data.module_name || 'main_home';
    document.getElementById('status').value = data.status || 'active';
    document.getElementById('is_featured').value = data.is_featured || '0';
    
    // Set description in CKEditor
    if (editorInstance && data.description) {
        editorInstance.setData(data.description);
    } else if (data.description) {
        const descField = document.getElementById('description');
        if (descField) descField.value = data.description;
    }
    
    // Update character count
    if (editorInstance) {
        setTimeout(() => {
            const data = editorInstance.getData();
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = data;
            const text = tempDiv.textContent || tempDiv.innerText || '';
            const counter = document.getElementById('charCount');
            if (counter) counter.textContent = text.length;
        }, 100);
    }
    
    // Set doctor in Select2
    if (typeof $('#doctor_id').select2 !== 'undefined') {
        $('#doctor_id').val(data.doctor_id || null).trigger('change');
    } else if (document.getElementById('doctor_id')) {
        document.getElementById('doctor_id').value = data.doctor_id || '';
    }
    
    // Set media preview for existing
    if (data.media_url) {
        const previewImage = document.getElementById('previewImage');
        const previewVideo = document.getElementById('previewVideo');
        const noPreviewText = document.getElementById('noPreviewText');
        
        if (data.media_type === 'image' && previewImage) {
            previewImage.src = data.media_url;
            previewImage.style.display = 'block';
            if (previewVideo) previewVideo.style.display = 'none';
            if (noPreviewText) noPreviewText.style.display = 'none';
        } else if (data.media_type === 'video' && previewVideo) {
            previewVideo.src = data.media_url;
            previewVideo.style.display = 'block';
            if (previewImage) previewImage.style.display = 'none';
            if (noPreviewText) noPreviewText.style.display = 'none';
        }
    }
}

// Function to reset form for new entry
function resetHealthFeedForm() {
    document.getElementById('health-feed-form').reset();
    document.getElementById('id').value = '';
    if (editorInstance) {
        editorInstance.setData('');
    }
    $('#doctor_id').val(null).trigger('change');
    resetPreview();
}
</script>

<style>
    /* Offcanvas size */
    .offcanvas.offcanvas-end {
        width: 1200px !important;
        max-width: 95vw !important;
    }
    
    /* CKEditor customization */
    .ck-editor__editable {
        min-height: 400px !important;
        max-height: 500px !important;
    }
    .select2-container .select2-selection--single .select2-selection__rendered
    {
        display: inline !important;
    }
    .ck-content {
        font-size: 14px;
        line-height: 1.6;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }
    
    .ck.ck-editor__main {
        border-radius: 8px;
        overflow: hidden;
    }
    
    /* Card styling */
    .card {
        border-radius: 12px;
        overflow: hidden;
        transition: box-shadow 0.2s ease;
    }
    
    .card:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
    }
    
    .card-header {
        padding: 12px 20px;
        font-size: 15px;
    }
    
    /* Form controls */
    .form-control, .form-select {
        border-radius: 8px;
        border: 1px solid #dee2e6;
        transition: all 0.2s ease;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
    }
    
    .form-control-lg {
        font-size: 1rem;
        padding: 0.6rem 1rem;
    }
    
    /* Media preview */
    #mediaPreview {
        background: #f8f9fa;
        border-radius: 10px;
        min-height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Select2 styling */
    .select2-container--bootstrap-5 .select2-selection {
        border-radius: 8px;
        min-height: 38px;
        border-color: #dee2e6;
    }
    
    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
        line-height: 36px;
    }
    
    /* Offcanvas body */
    .offcanvas-body {
        padding: 1.5rem;
        overflow-y: auto;
        max-height: calc(100vh - 140px);
    }
    
    /* Custom scrollbar */
    .offcanvas-body::-webkit-scrollbar {
        width: 6px;
    }
    
    .offcanvas-body::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    .offcanvas-body::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .offcanvas.offcanvas-end {
            width: 85vw !important;
        }
        
        .offcanvas-body {
            padding: 1rem;
        }
        
        .ck-editor__editable {
            min-height: 300px !important;
        }
    }
    
    /* Loading state */
    .ck.ck-editor__main {
        transition: all 0.3s ease;
    }
    
    /* Character counter */
    #charCount {
        font-weight: 500;
        transition: color 0.2s ease;
    }
</style>