@extends('cms.cms.main')

@section('head')
<!-- untuk penambahan js/css -->

@section('content')
<section class="content-header">
    <h1><b>Add Post</b></h1>
    <ol class="breadcrumb">
        <li><a href="{{url('/post')}}"><i class="fa fa-pencil"></i>Post</a></li>
        <li class="active">Add Post</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-lg-12">
            <div class="box">
                <div class="box-body">
                    <form action="{{url('/post')}}" method="post" enctype="multipart/form-data">
                        {{csrf_field()}}
                        <div class="text-center col-lg-12">
                            <div class="col-lg-8">
                                <div class="form-group has-feedback" style="padding-top: 15px;">
                                    <label style="float: left;" for="">Title : </label>
                                    <input type="text" name="title" class="form-control" placeholder="Title maximal 160 digits ..." maxlength="160" required>
                                </div>
                                <div class="form-group has-feedback">
                                    <textarea class="form-control" name="content" id="basic-example" cols=" 30" rows="10" placeholder="Write your article .."></textarea>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group has-feedback" style="padding-top: 15px;">
                                    <label style="float: left;">Status : </label>
                                    <select class="form-control" name="status" id="">
                                        <option value="Publised">Publised</option>
                                        <option value="Draft">Draft</option>
                                    </select>
                                </div>
                                <div class="form-group has-feedback">
                                    <label style="float: left;">Category : </label>
                                    <select class="form-control selectpicker" name="categories[]" multiple data-live-search="true">
                                        <option>Mustard</option>
                                        <option>Ketchup</option>
                                        <option>Relish</option>
                                        <option>asdasdasd</option>
                                        <option>gggggggggg</option>
                                        <option>bbbbbbbbb</option>
                                    </select>
                                </div>
                                <div class="form-group has-feedback">
                                    <label style="float: left;">Featured Image : </label>
                                    <img id="image_gallery" src="{{asset('/images/default.png')}}" alt="" style="max-height: 250px; max-width: 250px; min-height: 250px; min-width: 250px;" />
                                    <input id="fileimage" onchange="readURL(this);" type="file" name="image" class="form-control" style="width: 300px; margin:auto;" required>
                                </div>
                            </div>
                            <div class="col-lg-12" style="display: flex;justify-content: center;align-items: center;padding: 30px 0 0 0px;">
                                <button class="btn btn-primary btn-block btn-flat" type="submit" name="Submit" value="Add" style="max-width: 350px;">Submit</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
    <script>
        function readURL(input) {
            var ext = event.target.files[0].type.split('/')[1];
            var extArray = ['png', 'jpeg']
            if (extArray.indexOf(ext) == -1) {
                alert("Please Select Valid Image");
                event.target.value = '';
            }

            var numb = event.target.files[0].size / 1024 / 1024;
            numb = numb.toFixed(2);
            if (numb > 2) {
                alert('to big, maximum is 2MB. You file size is: ' + numb + ' MB');
                event.target.value = '';
            } else {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#image_gallery')
                        .attr('src', e.target.result)
                        .width(200)
                        .height(150);
                };
                reader.readAsDataURL(input.files[0]);
            }
        }

        // tinymce
        tinymce.init({
            selector: 'textarea#basic-example',
            height: 500,
            menubar: false,
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
            ],
            toolbar: 'undo redo | formatselect | ' +
                'bold italic backcolor | alignleft aligncenter ' +
                'alignright alignjustify | bullist numlist outdent indent | ' +
                'removeformat | help | link',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        });
    </script>
    @endsection