@extends('layouts.main')
@section('js')
    <script src="/vendor/ckeditor/ckeditor.js"></script>
    <script>
        CKEDITOR.replace('article-ckeditor');

    </script>
@endsection

@section('content')
    <!-- Page Header -->
    <div class="page-header row no-gutters py-4">
        <div class="col-12 col-sm-4 text-center text-sm-left mb-0">
            <span class="text-uppercase page-subtitle">Stealth Blog Posts</span>
            <h3 class="page-title">Add New Post</h3>
        </div>
    </div>
    <!-- End Page Header -->
    {{ Form::open(['action' => 'App\Http\Controllers\PostController@store', 'class' => 'add-new-post', 'method' => 'post', 'enctype' => 'multipart/form-data']) }}
    <div class="row">
        <div class="col-lg-9 col-md-12">
            <!-- Add New Post Form -->
            <div class="card card-small mb-3">
                <div class="card-body">
                    <!-- <form class="add-new-post"> -->
                    {{ Form::text('title', null, ['class' => 'form-control form-control-lg mb-3', 'placeholder' => 'Your Post Title']) }}
                    <div id="editor-container" class="add-new-post__editor mb-1">
                        {{ Form::textarea('article-ckeditor', null, ['id' => 'article-ckeditor', 'name' => 'article-ckeditor', 'class' => 'form-control form-control-lg mb-3', 'placeholder' => 'Your Post', 'style' => 'min-height:400px;']) }}
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-6">
                            <strong class="text-muted d-block mb-2">Upload an Image for the Post</strong>
                            {{ Form::file('image', ['class' => 'mb-2 btn btn-success mr-2']) }}
                        </div>
                        <div class="col-sm-12 col-md-6">
                            <strong class="text-muted d-block mb-2">Choose a Category for the Post</strong>
                            <div class="form-group">
                                {{ Form::select('category', $categories, null, ['class' => 'form-control']) }}
                            </div>
                        </div>
                    </div>
                    <!-- </form> -->
                </div>
            </div>
            <!-- / Add New Post Form -->
        </div>
        <div class="col-lg-3 col-md-12">
            <!-- Post Overview -->
            <div class='card card-small mb-3'>
                <div class="card-header border-bottom">
                    <h6 class="m-0">Actions</h6>
                </div>
                <div class='card-body p-0'>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item p-3">
                            <span class="d-flex mb-2">
                                <i class="material-icons mr-1">flag</i>
                                <strong class="mr-1">Status:</strong> Draft

                            </span>
                            <span class="d-flex mb-2">
                                <i class="material-icons mr-1">visibility</i>
                                <strong class="mr-1">Visibility:</strong>
                                <strong class="text-success">Public</strong>

                            </span>
                            <span class="d-flex mb-2">
                                <i class="material-icons mr-1">calendar_today</i>
                                <strong class="mr-1">Schedule:</strong> Now

                            </span>
                            <span class="d-flex">
                                <i class="material-icons mr-1">score</i>
                                <strong class="mr-1">Readability:</strong>
                                <strong class="text-warning">Ok</strong>
                            </span>
                        </li>
                        <li class="list-group-item d-flex px-3">
                            {{ Form::button('<i class="material-icons">save</i> Save Draft', ['class' => 'btn btn-sm btn-outline-accent', 'type' => 'submit', 'value' => 'draft', 'name' => 'submit']) }}
                            {{ Form::button('<i class="material-icons">file_copy</i>              Publish', ['class' => 'btn btn-sm btn-accent ml-auto', 'type' => 'submit', 'value' => 'publish', 'name' => 'submit']) }}
                            {{-- <button class="btn btn-sm btn-accent ml-auto"> --}}
                        </li>
                    </ul>
                </div>
            </div>
            <!-- / Post Overview -->
            <!-- Post Overview -->
            <div class='card card-small mb-3'>
                <div class="card-header border-bottom">
                    <h6 class="m-0">Categories</h6>
                </div>
                <div class='card-body p-0'>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item px-3 pb-2">
                            <div class="custom-control custom-checkbox mb-1">
                                <input type="checkbox" class="custom-control-input" id="category1" checked>
                                <label class="custom-control-label" for="category1">Uncategorized</label>
                            </div>
                            <div class="custom-control custom-checkbox mb-1">
                                <input type="checkbox" class="custom-control-input" id="category2" checked>
                                <label class="custom-control-label" for="category2">Design</label>
                            </div>
                            <div class="custom-control custom-checkbox mb-1">
                                <input type="checkbox" class="custom-control-input" id="category3">
                                <label class="custom-control-label" for="category3">Development</label>
                            </div>
                            <div class="custom-control custom-checkbox mb-1">
                                <input type="checkbox" class="custom-control-input" id="category4">
                                <label class="custom-control-label" for="category4">Writing</label>
                            </div>
                            <div class="custom-control custom-checkbox mb-1">
                                <input type="checkbox" class="custom-control-input" id="category5">
                                <label class="custom-control-label" for="category5">Books</label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex px-3">
                            <div class="input-group">
                                {{ Form::text('new_category', null, ['class' => 'form-control', 'placeholder' => 'New category', 'aria-label' => 'Add new category', 'aria-describedby' => 'basic-addon2']) }}
                                <div class="input-group-append">
                                    {{ Form::button('<i <i class="material-icons">add</i>', ['class' => 'btn btn-white px-2', 'type' => 'submit', 'value' => 'new_category', 'name' => 'submit']) }}
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- / Post Overview -->
        </div>
    </div>
    {{ Form::close() }}

@endsection