@extends('admin.layouts.simple.master')

@section('title', 'Default')

@section('css')

@endsection

@section('style')
@endsection

@section('breadcrumb-title')
<h3>Blog</h3>
@endsection

@section('breadcrumb-items')
<li class="breadcrumb-item">Dashboard</li>
<li class="breadcrumb-item active">Blog</li>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row second-chart-list third-news-update">
        <div class="col-xl-12 xl-100 dashboard-sec box-col-12">
            <div class="card">
                <div class="card-header">
                    <h5>Add Blog</h5>
                </div>
                <form class="form theme-form bold-labels" action="{{ route('blogs.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">
                        @if($errors->any())

                        <div class="alert alert-danger dark alert-dismissible fade show" role="alert">
                            {!! implode('', $errors->all('<div>:message</div>')) !!}
                            <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close" data-bs-original-title="" title=""></button>
                        </div>
                        @endif
                        @if(Session::has('message'))
                        <div class="alert alert-success dark alert-dismissible fade show" role="alert">
                            <strong>Updates ! </strong> {{ Session::get('message') }}.
                            <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close" data-bs-original-title="" title=""></button>
                        </div>
                        @endif


                        <div class="row">
                            <div class="col">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label class=" col-form-label">Name </label>
                                            <div class="">
                                                <input class="form-control" type="text" required name="name" value="{{ old('name') }}" placeholder="Blog Name" data-bs-original-title="" title="">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label class=" col-form-label">Blog Category </label>
                                            <div class="">

                                                <select name="category" id="" class="form-control">
                                                    <option value="" selected disabled>-- Select a Category --</option>
                                                    @foreach($categories as $category)
                                                    <option value="{{$category->id}}" {{old('category') == $category->id ? 'selected' : ''}}>{{$category->name}}</option>
                                                    @endforeach


                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    
                                    <div class="col-6">
                                        <div class="mb-3 multiple-select-wraper">
                                            <label class=" col-form-label">Blog Tags </label>
                                            <div class="">

                                                <select name="tags[]" id="" class="form-control tags-select" multiple>
                                                    
                                                    @foreach($tags as $tag)
                                                    <option value="{{$tag->getTranslation('name', '')}}">{{$tag->getTranslation('name', '')}}</option>
                                                    @endforeach


                                                </select>
                                            </div>
                                        </div>
                                    </div>





                                    <div class="col-12">

                                        <div class="mb-3 ">
                                            <label class=" col-form-label">Short Description</label>
                                            <div class="">
                                                <textarea class="form-control ws_text-editor" rows="5" required cols="5" name="short_description" placeholder="Course Short Description">{{ old('short_description') }}</textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12">

                                        <div class="mb-3 ">
                                            <label class=" col-form-label">Description</label>
                                            <div>
                                                <!-- <textarea id="example" name="wysiwg_text"></textarea> -->
                                                <textarea class="form-control ws_text-editor" id="editor" rows="5" required cols="5" name="description" placeholder="Course Description">{{ old('description') }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">

                                        <div class="my-3 ">
                                            
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox"  id="flexCheckChecked" {{old('main_section') == 'on' ? 'checked' : ''}} name="main_section">
                                                <label class="form-check-label" for="flexCheckChecked">
                                                  Main Section
                                                </label>
                                              </div>
                                              <div class="form-check">
                                                <input class="form-check-input" type="checkbox"  id="flexCheckChecked2" {{old('whats_new') == 'on' ? 'checked' : ''}} name="whats_new">
                                                <label class="form-check-label" for="flexCheckChecked2">
                                                  Whats New Section
                                                </label>
                                              </div>
                                              <div class="form-check">
                                                <input class="form-check-input" type="checkbox"  id="flexCheckChecked3" {{old('top_story') == 'on' ? 'checked' : ''}} name="top_story">
                                                <label class="form-check-label" for="flexCheckChecked3">
                                                  Top Story Section
                                                </label>
                                              </div>
                                              <div class="form-check">
                                                <input class="form-check-input" type="checkbox"  id="flexCheckChecked4" {{old('featured_posts') == 'on' ? 'checked' : ''}} name="featured_posts">
                                                <label class="form-check-label" for="flexCheckChecked4">
                                                    Featured Posts
                                                </label>
                                              </div>
                                              <div class="form-check">
                                                <input class="form-check-input" type="checkbox"  id="flexCheckChecked5" {{old('popular') == 'on' ? 'checked' : ''}} name="popular">
                                                <label class="form-check-label" for="flexCheckChecked5">
                                                    Popular Posts
                                                </label>
                                              </div>
                                        </div>
                                    </div>
                                    <div class="col-12">

                                        <div class="mb-3 ">
                                            <label class=" col-form-label">Published Date</label>
                                            <div>
                                                <!-- <textarea id="example" name="wysiwg_text"></textarea> -->
                                                <input type="date" name="date" id="" class="form-control" value="{{old('date')}}">
                                            </div>
                                        </div>
                                    </div>
                                    
                                    
                                    
                                    
                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label class=" col-form-label">Image</label>
                                            <div class="">
                                                <label class="instruction_label">Student image (360 width)</label><br>
                                                <input class="form-control" onchange="thumb(this);" name="image" type="file" />

                                                <img src="" width="200" class="thumbnail-img" />

                                            </div>
                                        </div>
                                    </div>

                                </div>






                            </div>
                        </div>
                    </div>
                    <div class="card-footer text-end">
                        <div class="col-sm-9 offset-sm-3">
                            <button class="btn btn-primary" type="submit" data-bs-original-title="" title="">Add Blog</button>
                            <a href="{{ route('blogs.index') }}" class="btn btn-light">Cancel</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
<script type="text/javascript">
    var session_layout = "{{ session()->get('layout ') }}";
</script>
@endsection

@section('script')
<script>
    function thumb(input) {
        if (input.files && input.files[0]) {

            var reader = new FileReader();

            reader.onload = function(e) {
                $('.thumbnail-img')
                    .attr('src', e.target.result);

            };

            reader.readAsDataURL(input.files[0]);
        }
    }
    $(document).ready(function() {
        $('.tags-select').select2({
            placeholder: 'Select Tags',
        });
    });
    // tinymce.init({
    //     selector: 'textarea',
    //     plugins: 'ai tinycomments mentions anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed permanentpen footnotes advtemplate advtable advcode editimage tableofcontents mergetags powerpaste tinymcespellchecker autocorrect a11ychecker typography inlinecss',
    //     toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | align lineheight | tinycomments | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
    //     tinycomments_mode: 'embedded',
    //     tinycomments_author: 'Author name',
    //     mergetags_list: [{
    //             value: 'First.Name',
    //             title: 'First Name'
    //         },
    //         {
    //             value: 'Email',
    //             title: 'Email'
    //         },
    //     ],
    //     ai_request: (request, respondWith) => respondWith.string(() => Promise.reject("See docs to implement AI Assistant")),
    // });


    // var editor = new Quill('.text-editor');
    var options = {
        debug: 'info',
        modules: {
            toolbar: '#in_toolbar'
        },
        placeholder: 'Compose an epic...',
        readOnly: true,
        theme: 'snow'
    };
    var editor = new Quill('#in_editor', options);
</script>
@endsection