@extends('admin.layout.app')
@section('title', 'Add New Blog')
@section('content')


    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content-area">
                    <main id="main" class="main-content">
                        <div class="tfcl-dashboard">
                            <h1 class="admin-title mb-3">{{ isset($blog) ? 'Edit' : 'Create' }} Blog Post</h1>
                            <div id="status-message" style="display:none;" class="status-alert-bar">
                                <span id="msg-text"></span>
                            </div>
                            <form id="blogForm" enctype="multipart/form-data"
                                  class="tfcl-add-listing profile-inner">
                                @csrf
                                @if(isset($blog)) @method('PUT') @endif
                                <input type="hidden" name="status" id="blogStatus"
                                       value="{{ $blog->status ?? 'published' }}">
                                <h3 class="form-title">Blog Thumbnail</h3>
                                <div class="form-group mb-4">
                                    <div id="drop-area" class="upload-drag-area">
                                        <input type="file" name="thumbnail" id="thumbnail-input" hidden
                                               accept="image/*">
                                        <div class="upload-icon">
                                            <i class="fas fa-cloud-upload-alt"
                                               style="font-size: 40px; color: #FF7101;"></i>
                                        </div>
                                        <p id="upload-text" style="{{ isset($blog) ? 'display:none' : '' }}">
                                            Drag & drop your thumbnail here or <b>click to browse</b>
                                        </p>
                                        <img id="thumb-preview"
                                             src="{{ isset($blog) ? $blog->getFirstMediaUrl('blog_thumbnails') : '' }}"
                                             style="{{ isset($blog) ? 'display:block' : 'display:none' }}; max-width: 100%; border-radius: 10px; margin-top: 10px;">
                                    </div>
                                    <span class="text-danger error-text thumbnail_error"
                                          style="font-size: 13px;"></span>
                                </div>

                                <div class="form-group mb-3">
                                    <label class="fw-6">Blog Title</label>
                                    <input type="text" name="title" class="form-control"
                                           placeholder="Enter a catchy title"
                                           value="{{ $blog->title ?? old('title') }}" required>
                                    <span class="text-danger error-text title_error"
                                          style="font-size: 13px;"></span>
                                </div>

                                <div class="form-group mb-3">
                                    <label class="fw-6">Content</label>
                                    <textarea name="content"
                                              id="blog-editor">{{ $blog->content ?? old('content') }}</textarea>
                                    <span class="text-danger error-text content_error"
                                          style="font-size: 13px;"></span>
                                </div>

                                <div class="group-button-submit left mb-3 d-flex gap-3">
                                    <button type="button" onclick="submitForm('published')"
                                            class="pre-btn d-flex align-items-center">
                                        <span class="btn-text">Publish Blog</span>
                                        <div class="loader-spinner ms-2" style="display:none;"></div>
                                    </button>

                                    <button type="button" onclick="submitForm('draft')"
                                            class="second-btn d-flex align-items-center">
                                        <span class="btn-text">Save as Draft</span>
                                        <div class="loader-spinner ms-2" style="display:none;"></div>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </main>
                </div>
            </div>
        </div>
    </div>


@endsection
@push('scripts')
    <script src="{{ asset('tinymce/tinymce.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            // 1. TinyMCE Initialization
            tinymce.init({
                selector: '#blog-editor',
                license_key: 'gpl',
                height: 500,
                plugins: ['anchor', 'autolink', 'lists', 'link', 'image', 'table', 'wordcount', 'code'],
                toolbar: 'undo redo | blocks | bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist | link image | table | code',

                /* --- Professional Add-ons --- */
                image_title: true,            // Image ka title set karne ke liye
                image_description: false,     // Fuzool alt text popup band karne ke liye
                image_dimensions: true,      // User image ka size (width/height) set kar sake
                relative_urls: false,
                remove_script_host: false,
                convert_urls: true,
                // Image Upload Logic
                images_upload_url: '{{ route("admin.upload.image") }}',
                images_upload_handler: (blobInfo) => new Promise((resolve, reject) => {
                    const formData = new FormData();
                    formData.append('file', blobInfo.blob(), blobInfo.filename());

                    fetch('{{ route("admin.upload.image") }}', {
                        method: 'POST',
                        headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                        body: formData
                    })
                        .then(response => response.ok ? response.json() : Promise.reject('HTTP Error: ' + response.status))
                        .then(result => result.location ? resolve(result.location) : reject('Invalid JSON Response'))
                        .catch(error => reject('Upload failed: ' + error));
                }),

                /* --- Setup function (Optional: Agar real-time delete chahiye ho) --- */
                setup: function (editor) {
                    editor.on('NodeChange', function (e) {
                        // Jab user image select kare toh options show hon
                    });
                }
            });

            const dropArea = $('#drop-area');
            const thumbInput = $('#thumbnail-input');
            const thumbPreview = $('#thumb-preview');
            const uploadText = $('#upload-text');

            dropArea.on('click', function (e) {
                if (e.target !== thumbInput[0]) {
                    thumbInput.click();
                }
            });

            thumbInput.on('click', function (e) {
                e.stopPropagation();
            });

            thumbInput.on('change', function () {
                const file = this.files[0];
                if (file) showPreview(file);
            });
            dropArea.on('dragover', (e) => {
                e.preventDefault();
                dropArea.addClass('dragover');
            });
            dropArea.on('dragleave', () => dropArea.removeClass('dragover'));
            dropArea.on('drop', (e) => {
                e.preventDefault();
                dropArea.removeClass('dragover');
                const files = e.originalEvent.dataTransfer.files;
                if (files.length > 0) {
                    thumbInput[0].files = files; // Assign files
                    showPreview(files[0]);
                }
            });

            function showPreview(file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    thumbPreview.attr('src', e.target.result).show();
                    uploadText.hide();
                };
                reader.readAsDataURL(file);
            }
        });

        // 3. Form Submission (Global Function)
        function submitForm(status) {
            // TinyMCE ka content manual save karna parta hai textarea mein submit se pehle
            tinymce.triggerSave();

            let form = $('#blogForm')[0];
            let formData = new FormData(form);
            formData.set('status', status);

            // Loader & Button Logic
            let activeBtn = status === 'published' ? $('.pre-btn') : $('.second-btn');
            $('.pre-btn, .second-btn').prop('disabled', true);
            activeBtn.find('.loader-spinner').show();
            activeBtn.find('.btn-text').text(status === 'published' ? 'Publishing...' : 'Saving...');

            // Dynamic URL for Add vs Edit
            let url = "{{ isset($blog) ? route('admin.blogs.update', $blog->id) : route('admin.blogs.store') }}";

            // Agar Edit mode hai toh Laravel ko batana parta hai k ye PUT request hai
            @if(isset($blog))
            formData.append('_method', 'POST');
            @endif

            $.ajax({
                url: url,
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                success: function (response) {
                    $('#status-message').removeClass('error-bg').fadeIn();
                    $('#msg-text').text('Success! Blog has been ' + (status === 'published' ? 'published.' : 'saved as draft.'));

                    // Redirect logic
                    setTimeout(() => {
                        window.location.href = "{{ route('admin.index.blog') }}";
                    }, 2000);
                },
                error: function (xhr) {
                    $('.pre-btn, .second-btn').prop('disabled', false);
                    $('.loader-spinner').hide();
                    $('.pre-btn .btn-text').text('Publish Blog');
                    $('.second-btn .btn-text').text('Save as Draft');

                    // 1. Error message show karein
                    $('#status-message').addClass('error-bg').fadeIn();

                    let errorMsg = 'Something went wrong. Please check your data.';

                    if (xhr.status === 422) {
                        // Validation errors handle karein
                        errorMsg = 'Validation failed! Please fix the errors below.';
                        let errors = xhr.responseJSON.errors;

                        // Agar aapne niche input ke sath error spans banaye hain toh unhe fill karein
                        $.each(errors, function (key, value) {
                            $('.' + key + '_error').text(value[0]);
                        });
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    }

                    $('#msg-text').text(errorMsg);

                    // 2. Page ko upar scroll karein (Smooth Scroll)
                    $('html, body').animate({
                        scrollTop: $(".tfcl-dashboard").offset().top - 20
                    }, 500);
                }
            });
        }
    </script>
@endpush