@extends('kms.layouts.kms')

@section('content')
    <div id="entity" class="transfer-section full-width">
        <div class="entity-header">
            <div class="entity-header-attributes">
                <h2>@lang('kms/transfer.transfer')</h2>
            </div>
        </div>

        <div class="entity-tabs">
            <ul>
                <li class="active">
                    <a href="#import">@lang('kms/transfer.import')</a>
                </li>
                <li>
                    <a href="#export">@lang('kms/transfer.export')</a>
                </li>
            </ul>

        </div>
        <div class="entity-attributes">
            <div id="tab-content-import" class="tab-content active first">
                <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 class="entity-attribute-wrapper">
                        <div class="entity-attribute entity-attribute-title">
                            <h3>
                                @lang('kms/transfer.import_products')
                            </h3>
                        </div>
                    </div>
                    <div class="entity-attribute-wrapper">
                        <div class="entity-attribute entity-attribute-file  " data-uk-tooltip="{pos:'bottom-right'}"
                             title="">
                            <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>
                    </div>
                    <div class="entity-attribute-wrapper">
                        <!--TODO Frontend people. Could you please make the div.loader code better? Also check the javascript below-->
                        <div class="entity-buttons">
                            <button style="margin: 30px;" class="save">{{ __('kms/transfer.import_data') }}</button>
                        </div>
                        <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>
            </div>

            <div id="tab-content-export" class="tab-content">

                <form action="{{ $exportRoute['route'] }}" method="POST" enctype="multipart/form-data"
                      data-max-upload-size="{{ $maxUploadSize }}">
                    <div class="entity-attribute-wrapper">
                        <div class="entity-attribute entity-attribute-title">
                            <h3>
                                @lang('kms/transfer.export_products')
                            </h3>
                        </div>
                    </div>
                    <div class="entity-attribute-wrapper">
                        {{ csrf_field() }}
                        {{ method_field($exportRoute['method']) }}
                        <div class="entity-buttons">
                            <button style="margin: 30px;" class="save">{{ __('kms/transfer.export_data') }}</button>
                        </div>
                    </div>
                </form>
            </div>

            {{--TODO Uncomment block below to start developing document importing if we need it--}}
            {{--<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