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

@section('profile_content')
@push('css')
    <link href="{{asset('\panelAssets\select2\dist\css\select2.css')}}" rel="stylesheet" type="text/css" />


@endpush
    <div class="portlet">


        <div class="portlet__head">
            <div class="portlet__head-label">
                <div class="portlet__head-title">@lang('add_post')</div>
            </div>
        </div>

        <div class="portlet__body px-5 pt-5">
            {!! Form::open(['POST', 'url'=> url()->current() ,'to'=>url()->current() ,  'class'=>'form-horizontal','id'=>'formAddPost']) !!}
            <div class="row">

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

                </div>

                <div class="col-lg-12">
                    <div class="form-group">
                        <label>@lang('subject'): </label>
                        <input class="form-control" type="text" name="subject" value="{{ isset($item) ? $item->subject :''  }}"/>
                    </div>
                </div>

                <div class="col-lg-12">
                    <div class="form-group">
                        <label>@lang('choose_category'): </label>
                        <select class="form-control kt-select2" id="kt_select2_11" title="@lang('choose_category')" name="category_id" data-size="20">
                            @if( isset($categories) && $categories->count())
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ isset($item) && ($item->category_id == $category->id) ? 'selected' :'' }}>
                                        {{ ucfirst($category->name) }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>

                <div class="col-lg-12">
                    <div class="form-group">
                        <label>@lang('requirement_details'):</label>
                        <textarea class="form-control p-3" rows="9" name="requirements">{{ isset($item) ? $item->requirements :''  }}</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)
                },
                @if(@$item)
                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);
                }
                @endif
            });


    </script>
    <script src="{{asset('\panelAssets\select2\dist\js\select2.full.js')}}" type="text/javascript"></script>

@endpush