@extends('admin.layouts.master')

@section('contents')

    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">{{__('Blogs')}}</h2>
                        <div class="breadcrumb-wrapper col-12">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{route('admin.home')}}">{{__('Home')}}</a>
                                </li>
                                <li class="breadcrumb-item active"><a href="{{route('blogs.index')}}">{{__('Blogs')}}</a>
                                </li>
                                <li class="breadcrumb-item active">{{__('Create Blog')}}
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <section id="basic-input">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">{{__('Create New Blog')}}</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <form method="post" action="{{route('blogs.store')}}" enctype="multipart/form-data" onsubmit="return validateContent()">
                                        @csrf
                                        @include('admin.blogs.form')
                                        <div class="col-12">
                                            <button type="submit"
                                                    class="btn btn-primary mr-1 mb-1 waves-effect waves-light">{{__('Submit')}}
                                            </button>

                                            <a href="{{route('blogs.index')}}">
                                                <button type="button"
                                                        class="btn btn-outline-warning mr-1 mb-1 waves-effect waves-light">
                                                    {{__('Cancel')}}
                                                </button>
                                            </a>
                                        </div>
                                    </form>
                                    
                                    <script>
                                    function validateContent() {
                                        // Update textarea with TinyMCE content
                                        if (tinymce.get('content')) {
                                            var content = tinymce.get('content').getContent();
                                            document.querySelector('textarea[name="content"]').value = content;
                                            
                                            // Check if content is empty
                                            if (!content || content.trim() === '' || content === '<p></p>' || content === '<p><br></p>' || content === '<p><br data-mce-bogus="1"></p>') {
                                                alert('{{__("Please enter content for the blog post")}}');
                                                // Focus on TinyMCE editor
                                                tinymce.get('content').focus();
                                                return false;
                                            }
                                        }
                                        
                                        return true;
                                    }
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

@endsection

@section('scripts')
    @include('admin.partials.tinymce-config')
@endsection