@extends('layouts.app')
@section('header')
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">New Blog</h1>
    </div>
@endsection
@section('content')
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">New Blog</h6>
        </div>
        <div class="card-body">
            <form action="{{route('blogs.store')}}" method="post" autocomplete="off">
                @csrf
                <div class="form-group">
                    <label for="title">Title</label>
                    <input type="text" id="title" name="title" class="form-control" placeholder="Title" required>
                </div>
                <div class="form-group">
                    <label for="categories">Category</label>
                    <select name="categories[]" id="categories" required class="form-control select2" multiple>
                        <option value="">Select Category</option>
                        @foreach($categories as $category)
                            <option value="{{$category->id}}">{{$category->title}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label for="tags">Tags</label>
                    <select name="tags[]" id="tags" required class="form-control select2" multiple>
                        <option value="">Select Tag</option>
                        @foreach($tags as $tag)
                            <option value="{{$tag->id}}">{{$tag->tag}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea name="description" id="description" class="form-control" required></textarea>
                </div>
                <div class="form-group">
                    <label for="thumbnail">Thumbnail Image</label>
                    <div class="input-group">
                        <span class="input-group-btn">
                            <a id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-primary">
                                <i class="fa fa-picture-o"></i> Choose
                            </a>
                        </span>
                        <input id="thumbnail" class="form-control" type="text" name="thumbnail">
                    </div>
                    <br>
                    <div id="holder"></div>
                </div>
                <div class="form-group">
                    <label for="status">Status</label>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="status" id="status1" value="1" checked>
                        <label class="form-check-label" for="status1">
                            Published
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="status" value="0" id="status2">
                        <label class="form-check-label" for="status2">
                            Unpublished
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="status" value="2" id="status3">
                        <label class="form-check-label" for="status3">
                            Draft
                        </label>
                    </div>
                </div>
                @include('layouts.btn-group')
            </form>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{asset('vendor/laravel-filemanager/js/stand-alone-button.js')}}"></script>
    <script src="https://cdn.ckeditor.com/4.17.1/standard-all/ckeditor.js"></script>
    <script>
        let options = {
            filebrowserImageBrowseUrl: '/filemanager?type=Images',
            filebrowserImageUploadUrl: '/filemanager/upload?type=Images&_token=',
            extraPlugins: 'colorbutton,colordialog'
        };
        $('#lfm').filemanager('image');
        CKEDITOR.replace('description', options);
    </script>
@endsection