@extends('front.user.partials.layout' , ['active' => 'my_blogs' , 'page' => __('add_blog')])

@section('profile_content')

    <div class="portlet">
        <div class="portlet__head">
            <div class="portlet__head-label">
                <div class="portlet__head-title">@lang('add_blog')</div>
            </div>
        </div>
        <div class="portlet__body px-5 pt-5">
            {!! Form::open(['POST', 'url'=> url()->current() ,'to'=>url()->current() ,  'class'=>'form-horizontal','id'=>'formAddBlog']) !!}
            <div class="row">

                <div class="col-md-12 d-none" id="errors">

                </div>


                <div class="col-lg-6">
                    <div class="form-group">
                        <label>@lang('title')</label>
                        <input class="form-control" type="text" name="title"
                               value="{{ isset($item) ? $item->title :''  }}"/>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label>@lang('category')</label>
                        @if($categories)
                            <select class="selectpicker" name="category_id" title="@lang('choose_category')">

                                @foreach($categories as $category)
                                    <option
                                        value="{{ $category->id }}" {{ isset($item) ? ($item->category_id == $category->id ? 'selected' : '') :''  }}>{{ $category->name }}</option>
                                @endforeach
                            </select>
                        @endif
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-group">
                        <label>@lang('content')</label>
                        <textarea class="form-control p-3" name="content"
                                  rows="9">{{ isset($item) ? $item->content :''  }}</textarea>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="form-group">
                        <label>@lang('featured_image')</label>
                        <input type="hidden" name="image_id" id="image"
                               value="{{ isset($item) ? $item->image_id :''  }}">
                        <div class="dropzone" id="myDropzone"></div>
                    </div>
                </div>
                <div class="col-lg-4 ml-auto mt-2">
                    <button class="general_btn_sm w-100">@lang('save')</button>
                </div>
            </div>
            {!! Form::close() !!}
        </div>
    </div>


@endsection

@push('js')

    <script>
        let image;

        var myDropzone = new Dropzone("#myDropzone",
            {
                url: "/upload",
                dictDefaultMessage: "<span class='icon'><i class='fas fa-camera'></i></span><span class='text'>Browse Image/ Drag & Drop</span>",
                paramName: "file", // The name that will be used to transfer the file
                maxFiles: 1,
                maxFilesize: 10, // MB
                acceptedFiles: "image/*",
                addRemoveLinks: true,
                dictRemoveFile: '<i class="fa fa-trash-alt"></i>',
                removedfile: function (file) {
                    $.ajax({
                        url: "/delete",
                        method: "POST",
                        data: {
                            "id": file['sgName']
                        },
                        success: function (res) {
                            var _ref;
                            image = '';
                            $('#image').val(image);
                            return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
                        }
                    })
                },
                accept: function (file, done) {
                    if (file.name == "justinbieber.jpg") {
                        done("Naha, you don't.");
                    } else {
                        done();
                    }
                },
                success: function (file, response) {
                    file['sgName'] = response.id;
                    image = response.id;
                    $('#image').val(image)
                },
                init: function () {
                    var myDropzone = this;

                    var value = {!! json_encode(@$item->image) !!};
                    let file = {
                        name: 'image/' + value.path,
                        sgName: value.id,
                        height: '320',
                        width: '570',
                        size: value.size,
                    };
                    image = value.id;
                    myDropzone.options.addedfile.call(myDropzone, file);
                    myDropzone.options.thumbnail.call(myDropzone, file, "{{ url('image/')}}/" + value.path + "/100x100");
                    myDropzone.emit('complete', file);
                    $('#image').val(image);
                }
            });


    </script>
@endpush