@extends('admin.layout.app')

@section('content')
<!-- [ Main Content ] start -->
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <!-- [ breadcrumb ] start -->
                <div class="page-header">
                    <div class="page-block">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <div class="page-header-title">
                                    <h5 class="m-b-10">Blog Management</h5>
                                </div>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="javascript:void(0)">Blog Management</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- [ breadcrumb ] end -->
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ Main Content ] start -->
                        <div class="row">

                            <!-- [ Hover-table ] start -->
                            <div class="col-xl-12">

                                @include('admin.layout.session')

                                <div class="card">
                                    <div class="card-header">
                                        <h5>Add New Blog</h5>
                                        <div class="d-inline-block dropdown float-right">
                                            <a href="{{ route('admin.blogs.index') }}" class="btn btn-glow-dark btn-dark btn-sm"><i class="feather icon-chevrons-left"></i>Back</a>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <form action="{{ route('admin.blogs.store') }}" method="post" enctype="multipart/form-data" class="blog_form">
                                        @csrf

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="position-relative form-group">
                                                    <label>Blog Category</label>
                                                    <select name="blog_category_id" class="form-control" required>   
                                                        <option value="">--Select Blog Category--</option>                                         
                                                        @forelse($blog_categories as $key => $value)
                                                            <option value="{{$value->id}}" {{ $value->id == old('blog_category_id') ? 'selected' : ''}}>{{$value->name}}</option>
                                                        @empty
                                                            <option value="">No Category</option>
                                                        @endforelse
                                                    </select>
                                                    @if ($errors->has('blog_category_id'))
                                                        <div class="invalid-feedback">{{ $errors->first('blog_category_id') }}</div>
                                                    @endif
                                                </div>                                               
                                            </div>
                                        </div>

                                        <div class="row">
                                        <div class="col-md-6">
                                                <div class="position-relative form-group">
                                                    <label>Title</label>                                                    
                                                    <input type="text" name="title" placeholder="Enter Blog Title" class="form-control" value="{{old('title')}}" required>
                                                    @if ($errors->has('title'))
                                                        <div class="invalid-feedback">{{ $errors->first('title') }}</div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                       
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="position-relative form-group">
                                                    <label>Description</label>
                                                    <textarea name="description" class="form-control tinyMCE_textarea" placeholder="Enter Description" required>{{old('blog_details')}}</textarea>
                                                    @if ($errors->has('description'))
                                                        <div class="invalid-feedback">{{ $errors->first('description') }}</div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="position-relative form-group">
                                                    <label>Image</label>
                                                    <input type="file" name="image" class="form-control" required>
                                                    <small class="form-text text-muted">Accepted formats: png, jpg, jpeg. Max file size 5Mb</small>
                                                    @if ($errors->has('image'))
                                                        <div class="invalid-feedback">{{ $errors->first('image') }}</div>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                            </div>
                                        </div>

                                        <button type="submit" class="btn btn-glow-primary btn-primary btn-sm">Submit</button>
                                
                                         <a href="{{ route('admin.blogs.index') }}" class="btn btn-glow-dark btn-dark btn-sm"><i class="feather icon-chevrons-left"></i>Back</a>                                    
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!-- [ Hover-table ] end -->

                            
                        </div>
                        <!-- [ Main Content ] end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- [ Main Content ] end -->
@endsection

@push('js')
<script type="text/javascript">
$(function(){
    $('.main_blogs').addClass('active');
    $('.main_blogs').addClass('pcoded-trigger');
    $('.blogs').addClass('active');
    
    tinyMCE.init({
        selector: ".tinyMCE_textarea",
        theme: "modern",
        // object_resizing: false,
        // relative_urls: false,
        // remove_script_host: false,

        // allow_script_urls: true,
        // extended_valid_elements: 'span,script[language|type|src]',
        // browser_spellcheck: true,
        // force_br_newlines: true,
        // force_p_newlines: false,
        // forced_root_block: '',

        paste_as_text: true,
        browser_spellcheck: true,
       
        plugins: ["code", "textcolor", "advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table", "image"],
        toolbar: "codesample | code | fontselect | fontsizeselect | forecolor backcolor | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        content_css: [
            '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
            '//www.tiny.cloud/css/codepen.min.css'
        ],
        valid_elements : '*[*]',
        height: 200,
        // formats: {
        //     alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'left' },
        //     aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'center' },
        //     alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'right' },
        //     alignfull: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'full' },
        //     bold: { inline: 'span', classes: 'bold' },
        //     italic: { inline: 'span', classes: 'italic' },
        //     underline: { inline: 'span', classes: 'underline', exact: true },
        //     strikethrough: { inline: 'del' },
        //     customformat: { inline: 'span', styles: { color: '#00ff00', fontSize: '20px' }, attributes: { title: 'My custom format'} , classes: 'example1'}
        // },
        // style_formats: [
        //     { title: 'Custom format', format: 'customformat' },
        //     { title: 'Align left', format: 'alignleft' },
        //     { title: 'Align center', format: 'aligncenter' },
        //     { title: 'Align right', format: 'alignright' },
        //     { title: 'Align full', format: 'alignfull' },
        //     { title: 'Bold text', inline: 'strong' },
        //     { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
        //     { title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
        //     { title: 'Badge', inline: 'span', styles: { display: 'inline-block', border: '1px solid #2276d2', 'border-radius': '5px', padding: '2px 5px', margin: '0 2px', color: '#2276d2' } },
        //     { title: 'Table row 1', selector: 'tr', classes: 'tablerow1' },
        //     { title: 'Image formats' },
        //     { title: 'Image Left', selector: 'img', styles: { 'float': 'left', 'margin': '0 10px 0 10px' } },
        //     { title: 'Image Right', selector: 'img', styles: { 'float': 'right', 'margin': '0 0 10px 10px' } },
        // ]
        /* enable title field in the Image dialog*/
        image_title: true,
        /* enable automatic uploads of images represented by blob or data URIs*/
        automatic_uploads: true,
        /*
            URL of our upload handler (for more details check: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url)
            images_upload_url: 'postAcceptor.php',
            here we add custom filepicker only to Image dialog
        */
        file_picker_types: 'image',
        /* and here's our custom image picker*/
        file_picker_callback: function (cb, value, meta) {
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');

            /*
            Note: In modern browsers input[type="file"] is functional without
            even adding it to the DOM, but that might not be the case in some older
            or quirky browsers like IE, so you might want to add it to the DOM
            just in case, and visually hide it. And do not forget do remove it
            once you do not need it anymore.
            */

            input.onchange = function () {
            var file = this.files[0];

            var reader = new FileReader();
            reader.onload = function () {
                /*
                Note: Now we need to register the blob in TinyMCEs image blob
                registry. In the next release this part hopefully won't be
                necessary, as we are looking to handle it internally.
                */
                var id = 'blobid' + (new Date()).getTime();
                var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                var base64 = reader.result.split(',')[1];
                var blobInfo = blobCache.create(id, file, base64);
                blobCache.add(blobInfo);

                /* call the callback and populate the Title field with the file name */
                cb(blobInfo.blobUri(), { title: file.name });
            };
            reader.readAsDataURL(file);
            };

            input.click();
        }
    });

});
</script>
@endpush