@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">Edit 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.update', $blog->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <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', $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', $blog->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>
                                @php
                                    $focusKeywordsJson = collect(
                                        explode(',', old('focus_keywords', $blog->focus_keyword ?? '')),
                                    )
                                        ->map(fn($v) => ['value' => trim($v)])
                                        ->toJson();
                                @endphp
                                <input id="focus_keywords" name="focus_keywords" value='{{ $focusKeywordsJson }}'
                                    class="form-control @error('focus_keywords') is-invalid @enderror"
                                    placeholder="Enter focus keywords">
                                @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', \Carbon\Carbon::parse($blog->publish_date)->format('Y-m-d')) }}"
                                    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>
                            @php
                                $seoTagsJson = collect(explode(',', old('seo_tags', $blog->seo_tags ?? '')))
                                    ->map(fn($v) => ['value' => trim($v)])
                                    ->toJson();
                            @endphp
                            <input id="seo_tags" name="seo_tags" value='{{ $seoTagsJson }}'
                                class="form-control @error('seo_tags') is-invalid @enderror" placeholder="Enter tags">
                            @error('seo_tags')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Meta 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" required>{{ old('meta_description', $blog->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"
                                required>{{ old('content', $blog->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 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="{{ $blog->thumbnail ? asset('storage/' . $blog->thumbnail) : '#' }}"
                                    alt="Thumbnail Preview"
                                    style="{{ $blog->thumbnail ? '' : 'display: none;' }} max-height: 200px; border: 1px solid #ccc; padding: 5px;" />
                            </div>
                        </div>
                        <hr>
                        <h5>Frequently Asked Questions</h5>
                        <div id="faq-container">
                            @foreach ($blog->faqs as $index => $faq)
                                <div class="faq-item mb-3">
                                    <input type="hidden" name="faqs[{{ $index }}][id]"
                                        value="{{ $faq->id }}">
                                    <input type="text" name="faqs[{{ $index }}][question]"
                                        class="form-control mb-2" value="{{ $faq->question }}" placeholder="Question"
                                        required>
                                    <textarea name="faqs[{{ $index }}][answer]" class="form-control" rows="2" placeholder="Answer" required>{{ $faq->answer }}</textarea>
                                    <button type="button" class="btn btn-sm btn-danger mt-1 remove-faq">Delete</button>
                                </div>
                            @endforeach
                        </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">Update 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(/^-+|-+$/g, '');
        }

        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() {
            const seoInput = document.querySelector('#seo_tags');
            const focusInput = document.querySelector('#focus_keywords');

            if (seoInput) {
                new Tagify(seoInput, {
                    originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(',')
                });
            }

            if (focusInput) {
                new Tagify(focusInput, {
                    originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(',')
                });
            }
        });
    </script>

    <script>
        let faqIndex = {{ $blog->faqs->count() }};

        document.getElementById('addFaqBtn').addEventListener('click', function() {
            const container = document.getElementById('faq-container');
            const html = `
                        <div class="faq-item mb-3">
                            <input type="text" name="faqs[${faqIndex}][question]" class="form-control mb-2" placeholder="Question" required>
                            <textarea name="faqs[${faqIndex}][answer]" class="form-control" rows="2" placeholder="Answer" required></textarea>
                            <button type="button" class="btn btn-sm btn-danger mt-1 remove-faq">Delete</button>
                        </div>`;
            container.insertAdjacentHTML('beforeend', html);
            faqIndex++;
        });

        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-faq')) {
                e.target.closest('.faq-item').remove();
            }
        });
    </script>
@endpush