@extends('layouts.user_type.auth')

@section('styles')
    <style>
        .ck-editor__editable_inline {
            min-height: 300px !important;
            height: 300px !important;
            overflow-y: auto;
        }
    </style>
@endsection

@section('content')
    <div class="row justify-content-center">
        <div class="col-lg-10 col-md-10 col-12">
            <div class="card shadow-lg border-0">
                <div class="card-header bg-gradient-dark text-white py-4 d-flex justify-content-between align-items-center">
                    <h3 class="mb-0 text-white">Create Blog</h3>
                    <a href="{{ route('blogs.blogs_list') }}" class="btn btn-white btn-sm mb-0">Blogs List</a>
                </div>
                <div class="card-body">
                    <form action="{{ route('blogs.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="row">
                            <!-- Title -->
                            <div class="col-md-6 col-12 mb-3">
                                <label for="title" class="form-label">SEO Title</label>
                                <input type="text" id="title" name="title"
                                    class="form-control @error('title') is-invalid @enderror" value="{{ old('title') }}"
                                    placeholder="Enter blog title" required>
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Slug -->
                            <div class="col-md-6 col-12 mb-3">
                                <label for="slug" class="form-label">Slug</label>
                                <input type="text" id="slug" name="slug"
                                    class="form-control @error('slug') is-invalid @enderror" value="{{ old('slug') }}"
                                    placeholder="slug">
                                @error('slug')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Focus Keywords -->
                            <div class="col-md-6 col-12 mb-3">
                                <label for="focus_keywords" class="form-label">Focus Keywords</label>
                                <input id="focus_keywords" name="focus_keywords" value="{{ old('focus_keywords') }}"
                                    class="form-control @error('focus_keywords') is-invalid @enderror"
                                    placeholder="Enter focus keywords">
                                <small class="form-text text-muted">Press Enter or comma to add multiple keywords</small>
                                @error('focus_keywords')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>


                            <!-- Publish Date -->
                            <div class="col-md-6 col-12 mb-3">
                                <label for="publish_date" class="form-label">Publish Date</label>
                                <input type="date" id="publish_date" name="publish_date"
                                    class="form-control @error('publish_date') is-invalid @enderror"
                                    value="{{ old('publish_date') }}" required>
                                @error('publish_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- SEO Tags -->
                        <div class="mb-3">
                            <label for="seo_tags" class="form-label">SEO Tags</label>
                            <input id="seo_tags" name="seo_tags" value="{{ old('seo_tags') }}"
                                class="form-control @error('seo_tags') is-invalid @enderror" placeholder="Enter tags">
                            <small class="form-text text-muted">Press Enter or comma to add multiple tags</small>
                            @error('seo_tags')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Short Description -->
                        <div class="mb-3">
                            <label for="meta_description" class="form-label">Meta Description</label>
                            <textarea id="meta_description" name="meta_description"
                                class="form-control @error('meta_description') is-invalid @enderror" rows="3"
                                placeholder="Meta Description about the blog" required>{{ old('meta_description') }}</textarea>
                            @error('meta_description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Content -->
                        <div class="mb-3">
                            <label for="content" class="form-label">Content</label>
                            <textarea id="content" name="content" class="form-control @error('content') is-invalid @enderror" rows="6"
                                placeholder="Full blog content" required>{{ old('content') }}</textarea>
                            @error('content')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Thumbnail Upload -->
                        <div class="mb-3">
                            <label for="thumbnail" class="form-label">Thumbnail and Feature Image</label>
                            <input type="file" id="thumbnail" name="thumbnail" accept="image/*"
                                class="form-control @error('thumbnail') is-invalid @enderror">
                            @error('thumbnail')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Supported formats: jpeg, png, webp, gif | Max size: 4MB</div>

                            <!-- Image preview -->
                            <div class="mt-3">
                                <img id="thumbnailPreview" src="#" alt="Thumbnail Preview"
                                    style="display: none; max-height: 200px; border: 1px solid #ccc; padding: 5px;" />
                            </div>
                        </div>

                        <hr>
                        <h5>Frequently Asked Questions (FAQ,s)</h5>
                        <div id="faq-container">
                            <div class="faq-item mb-3 border p-3 rounded position-relative">
                                <button type="button"
                                    class="btn btn-sm btn-danger position-absolute top-0 end-0 m-2 remove-faq-btn" style="padding: revert;">&times;</button>
                                <input type="text" name="faqs[0][question]" class="form-control mb-2"
                                    placeholder="Question" required>
                                <textarea name="faqs[0][answer]" class="form-control" rows="2" placeholder="Answer" required></textarea>
                            </div>
                        </div>

                        <button type="button" class="btn btn-sm btn-outline-secondary" id="addFaqBtn">Add More
                            FAQ</button>

                        <!-- Submit Button -->
                        <div class="text-end">
                            <button type="reset" class="btn bg-gradient-info my-4">Reset</button>
                            <button
                                onclick="this.form.submit(); this.disabled=true; this.innerHTML='<span class=\'spinner-border spinner-border-sm\' role=\'status\' aria-hidden=\'true\'></span> Please wait...';"
                                type="submit" class="btn bg-gradient-dark my-4">Publish Blog</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>

    <script>
        ClassicEditor
        .create(document.querySelector('#content'), {
            toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote'],
            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' },
            ]
            }
        })
        .then(editor => {
            const editable = editor.ui.view.editable.element;

            setTimeout(() => {
            editable.style.minHeight = '300px';
            editable.style.height = '300px';
            editable.style.overflowY = 'auto';
            }, 100);

            editor.model.document.on('change:data', () => {
            editable.style.height = '300px';
            });
        })
        .catch(error => {
            console.error(error);
        });

    </script>


    <script>
        document.getElementById('thumbnail').addEventListener('change', function(event) {
            const [file] = event.target.files;
            const preview = document.getElementById('thumbnailPreview');

            if (file) {
                preview.src = URL.createObjectURL(file);
                preview.style.display = 'block';
            } else {
                preview.style.display = 'none';
            }
        });
    </script>
    <script>
        function slugify(text) {
            return text
                .toString()
                .toLowerCase()
                .trim()
                .replace(/[\s\W-]+/g, '-') // Replace spaces and non-word chars with -
                .replace(/^-+|-+$/g, ''); // Remove leading/trailing dashes
        }

        document.getElementById('title').addEventListener('input', function() {
            const title = this.value;
            const slug = slugify(title);
            document.getElementById('slug').value = slug;
        });
    </script>


    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var seoInput = document.querySelector('#seo_tags');
            var focusInput = document.querySelector('#focus_keywords');

            if (seoInput) {
                new Tagify(seoInput);
            }

            if (focusInput) {
                new Tagify(focusInput);
            }
        });
    </script>

    <script>
        let faqIndex = 1;

        function createFaqItem(index) {
            return `
        <div class="faq-item mb-3 border p-3 rounded position-relative">
            <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-2 remove-faq-btn" style="padding: revert;">&times;</button>
            <input type="text" name="faqs[${index}][question]" class="form-control mb-2" placeholder="Question" required>
            <textarea name="faqs[${index}][answer]" class="form-control" rows="2" placeholder="Answer" required></textarea>
        </div>`;
        }

        document.getElementById('addFaqBtn').addEventListener('click', function() {
            const container = document.getElementById('faq-container');
            container.insertAdjacentHTML('beforeend', createFaqItem(faqIndex));
            faqIndex++;
        });

        // Delegate event for dynamically added delete buttons
        document.getElementById('faq-container').addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-faq-btn')) {
                const faqItem = e.target.closest('.faq-item');
                if (faqItem) {
                    faqItem.remove();
                }
            }
        });
    </script>
@endpush