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

@section('profile_content')

    <div class="portlet">


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

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

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

                </div>

                <div class="col-lg-12">
                    <div class="form-group">
                        <label>@lang('choose_documents'): </label>
                        <select class="selectpicker" title="@lang('choose_category')" name="document_parent_id" data-size="5">
                            @if( isset($documents) && $documents->count())
                                @foreach($documents as $document)
                                    <option value="{{ $document->id }}">
                                        {{ ucfirst($document->name) }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>

                <div class="col-lg-12">
                    <div class="form-group">
                        <label>@lang('choose_documents_name'): </label>
                        <select class="selectpicker" title="@lang('choose_documents_name')" name="document_id" data-size="5">


                        </select>
                    </div>
                </div>


                <div class="col-lg-12">
                    <div class="form-group">
                        <label>@lang('featured_image')</label>

                        <input type="hidden" name="file_path" id="file_path">
                        <input type="hidden" name="file_name" id="file_name">
                        <input type="hidden" name="size" id="size">

                        <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 path;
        let size;
        let name;

        var myDropzone = new Dropzone("#myDropzone",
            {
                url: "{{ route('user.documents.uploadDocument') }}",
                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;
                    //         path = '';
                    //         name = '';
                    //         size = '';
                    //         $('#file_path').val(path)
                    //         $('#file_name').val(name)
                    //         $('#size').val(size)
                    //         return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
                    //     }
                    // })
                    var _ref;
                    path = '';
                    name = '';
                    size = '';
                    $('#file_path').val(path)
                    $('#file_name').val(name)
                    $('#size').val(size)
                    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;
                    path = response.data.file_path;
                    name = response.data.file_name;
                    size = response.data.size;
                    $('#file_path').val(path)
                    $('#file_name').val(name)
                    $('#size').val(size)
                },
            });


    </script>
    <script>
        $(document).on('change' , 'select[name=document_parent_id]' , function (e) {
            e.preventDefault();
            var id = $(this).val()
            $.ajax({
                url: '{{ route('user.documents.subDocuments') }}',
                method: 'GET',
                data: {
                    id : id,
                },
                success: function (response) {

                    $('select[name=document_id]').html(response.html);
                    $('.selectpicker').selectpicker('refresh');
                },
                error: function (response) {
                    // $(thisBtn).find('.icon').removeClass('favorite')
                    //
                    // customTostr(false , response.responseJSON.message , '');
                }
            })
        })
    </script>
@endpush