@extends('layouts.admin')

@section('content')
    <!-- CKEditor -->
    <script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>

    <div class="content-i">
        <div class="content-box">
            <div class="row">
                <div class="col-sm-8">
                    <div class="element-wrapper">
                        <h6 class="element-header">Create content</h6>
                        <div class="element-box">
                            <form method="post" id="user-form" enctype="multipart/form-data">
                                @csrf
                                <div class="element-info">
                                    @include('includes.admin.alert-user')
                                    <div class="element-info-with-icon">
                                        <div class="element-info-icon">
                                            <div class="os-icon os-icon-user-male-circle2"></div>
                                        </div>
                                        <div class="element-info-text">
                                            <h5 class="element-inner-header">Create Content</h5>
                                            <div class="element-inner-desc">Create a new content by filling the form</div>
                                        </div>
                                    </div>
                                </div>
                                <fieldset
                                    class="form-group">
                                    <legend><span>Basic Information</span></legend>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group"><label for=""> Date</label>
                                                <input name="date" value="" class="form-control" data-error="Please enter date" placeholder="Date" required="required" type="date">
                                                <div class="help-block form-text with-errors form-control-feedback"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group"><label for=""> Views</label>
                                                <input name="views" value="" class="form-control" data-error="Please enter views" placeholder="Views" required="required" type="number">
                                                <div class="help-block form-text with-errors form-control-feedback"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group"><label for=""> Title</label>
                                                <input name="title" value="" class="form-control" data-error="Please enter title" placeholder="Title" required="required" type="text">
                                                <div class="help-block form-text with-errors form-control-feedback"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group"><label for=""> Tag</label>
                                                <select name="tag" class="form-control" required>
                                                    <option></option>
                                                    <option value="Business">Business</option>
                                                    <option value="Cryptocurrency">Cryptocurrency</option>
                                                    <option value="Investing">Investing</option>
                                                    <option value="Technology">Technology</option>
                                                    <option value="Health">Health</option>
                                                    <option value="Education">Education</option>
                                                    <option value="Politics">Politics</option>
                                                    <option value="Finance">Finance</option>
                                                </select>
                                                <div class="help-block form-text with-errors form-control-feedback"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group"><label for=""> Picture</label>
                                                <input name="picture" value="" class="form-control" data-error="Please select picture" placeholder="Picture" required="required" type="file">
                                                <div class="help-block form-text with-errors form-control-feedback"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group"><label for=""> Text</label>
                                                <textarea name="editor" class="form-control" data-error="Please enter content" placeholder="Enter content" type="text"></textarea>
                                                <input name="text" id="text" type="hidden">
                                                <div class="help-block form-text with-errors form-control-feedback"></div>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                                <div class="form-buttons-w"><button id="btn-user" class="btn btn-primary" type="submit"> Save</button></div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @include('includes.wallet.floats')
        <!--------------------
END - Demo Customizer
-------------------->
            <!--------------------
START - Chat Popup Box
-------------------->

            <!--------------------
END - Chat Popup Box
-------------------->
        </div>
        <!--------------------
START - Sidebar
-------------------->
        <div class="content-panel compact color-scheme-light col-sm-1">
            <div class="content-panel-close"><i class="os-icon os-icon-close"></i></div>
            {{--@include('includes.wallet.sidebar')--}}
        </div>
        <!--------------------
    END - Sidebar
    -------------------->
    </div>

    <script>
        CKEDITOR.replace( 'editor' );
    </script>

    <script>
        // submit form
        $('#user-form').submit(function(e){
            e.preventDefault(); // Prevent Default Submission
            let text = CKEDITOR.instances.editor.getData();
            $("#text").val(text);
            if (text === "") {
                alert('Text field cannot be empty')
            }else{
                let formData = new FormData(this);
                $.ajax({
                    url: "{{route('create-blog')}}",
                    type: 'POST',
                    data: formData, // it will serialize the form data
                    processData: false,
                    contentType: false,
                    dataType: 'JSON',
                    beforeSend: function() {
                        NProgress.start(); // start nprogress
                        $("#btn-user").prop('disabled', true); // disable button
                    }
                })
                    .done(function(data){
                        if(data.status == true){
                            $(".u-success-alert").fadeIn('slow');
                            $(".u-success-alert").css('display','block');
                            $(".u-success-alert").find("p").html(data.message);
                        }else if(data.status == false){
                            $(".u-error-alert").fadeIn('slow');
                            $(".u-error-alert").css('display','block');
                            $(".u-error-alert").find("p").html(data.message);
                        }
                        NProgress.done(); // end nprogress
                        $("#btn-user").prop('disabled', false); // enable button
                    })
                    .fail(function(){
                        $(".u-error-alert").fadeIn('slow');
                        $(".u-error-alert").css('display','block');
                        $(".u-error-alert").find("strong").html("Sorry, an error occured some where");
                        NProgress.done(); // end nprogress
                        $("#btn-user").prop('disabled', false); // enable button
                    });
                $(".u-error-alert").fadeOut('slow');
                $(".u-error-alert").css('display','none');
                $(".u-success-alert").fadeOut('slow');
                $(".u-success-alert").css('display','none');
            }
        });
    </script>
@endsection