@extends('kms.layouts.kms')

@section('content')
    <div id="entity" class="transfer-section">
        <form id="importForm" action="{{ $importRoute['route'] }}" method="POST" enctype="multipart/form-data"
              data-max-upload-size="{{ $maxUploadSize }}">
            <!--TODO we could implement max upload size like the document transfer service does-->
            {{ csrf_field() }}
            {{ method_field($importRoute['method']) }}
            <div id="tab-content-algemeen" class="tab-content active first">
                <div class="entity-attribute entity-attribute-title">
                    <h3>@lang('kms/transfer.transfer')</h3>
                </div>
                <div class="entity-attribute entity-attribute-file  " data-uk-tooltip="{pos:'bottom-right'}" title="">
                    <h4>@lang('kms/transfer.import_products')</h4>
                    {{--<label for="File-file">importeer</label>--}}
                    <input accept="text/csv" name="File-file" type="file" id="File-file">

                    @if($successes->has('File-file'))
                        <textarea
                                style="color: #479c38;">@foreach($successes->get('File-file') as $success_msg){{ $success_msg }}
                            &#10;@endforeach</textarea>
                    @endif

                    @if($errors->has('File-file'))
                        <textarea
                                style="color: #dc2b24;">@foreach($errors->get('File-file') as $error_msg){{ $error_msg }}
                            &#10;@endforeach</textarea>
                    @endif
                </div>
                <!--TODO Frontend people. Could you please make the div.loader code better? Also check the javascript below-->
                <button>{{ __('kms/transfer.import_data') }}</button>
                <div class="loader"
                     style="display: none; background-size: cover; background-image: url('https://thumbs.gfycat.com/AggressiveGrouchyHammerkop-max-1mb.gif'); width: 1em; height: 1em;">
                    &nbsp;&nbsp;&nbsp;&nbsp;{{ __('kms/transfer.importing') }}</div>
            </div>

        </form>

        {{--<form action="{{ $exportRoute['route'] }}" method="POST" enctype="multipart/form-data"--}}
              {{--data-max-upload-size="{{ $maxUploadSize }}">--}}
            {{--<div id="tab-content-algemeen" class="tab-content active">--}}
                {{--<h4>@lang('kms/transfer.export_products')</h4>--}}
                {{--<!--TODO we could implement max upload size like the document transfer service does-->--}}
                {{--{{ csrf_field() }}--}}
                {{--{{ method_field($exportRoute['method']) }}--}}

                {{--<button>{{ __('kms/transfer.export_data') }}</button>--}}
            {{--</div>--}}
        {{--</form>--}}

        <form id="documentImportForm" action="{{ $importDocumentsRoute['route'] }}" method="POST">
            <div id="tab-content-algemeen" class="tab-content active">
                <h4>{{ __('kms/transfer.import_documents') }}</h4>
                <p>{{ __('kms/transfer.import_documents_description') }}</p>
                {{ csrf_field() }}
                {{ method_field($importDocumentsRoute['method']) }}
                <button>{{ __('kms/transfer.import') }}</button>
                <div class="loader"
                     style="display: none; background-size: cover; background-image: url('https://thumbs.gfycat.com/AggressiveGrouchyHammerkop-max-1mb.gif'); width: 1em; height: 1em;">
                    &nbsp;&nbsp;&nbsp;&nbsp;{{ __('kms/transfer.importing') }}</div>

                <div class="results">

                @if($successes->has('document_import'))
                    <textarea>@foreach($successes->get('document_import') as $success_msg){{ $success_msg }}
                        &#10;@endforeach</textarea>
                @endif

                @if($errors->has('document_import'))
                    <textarea
                            style="color: #dc2b24;">@foreach($errors->get('document_import') as $error_msg){{ $error_msg }}
                        &#10;@endforeach</textarea>
                @endif
                </div>
            </div>
        </form>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            //Loader display code for the textual import
            var importForm = document.getElementById("importForm");
            var submitButton = importForm.getElementsByTagName('button')[0];
            var loaderIcon = importForm.getElementsByClassName('loader')[0];
            submitButton.addEventListener('click', function (event) {
                event.preventDefault();
                loaderIcon.style.display = 'inline-block';
                importForm.submit();
            });

            //Loader display code for the document import
            var documentImportForm = document.getElementById("documentImportForm");
            var documentImportSubmitButton = documentImportForm.getElementsByTagName('button')[0];
            var documentImportLoaderIcon = documentImportForm.getElementsByClassName('loader')[0];
            documentImportSubmitButton.addEventListener('click', function (event) {
                event.preventDefault();
                documentImportLoaderIcon.style.display = 'inline-block';
                documentImportForm.submit();
            })
        });
    </script>
@stop