{{--

    Name: import.partials.create
    Author: JH2
    Created: 2016-02-09

--}}

@extends('partials.box')

@section($content_id)
    {{--
    @include('partials.linkbox', [
        'links' => [
            'imports.getHelp' => ['icon' => 'fa-comments-o', 'name' => Lang::get('import.help')],
        ]
    ])
    <hr>
    --}}

    <div class="row">
        <div class="col-lg-12">
            <div class="form-group {{ $errors->has('importFile') ? 'has-error' : '' }}">
                {!! Form::label('importFile', Lang::get('import.importFile'), ['class' => 'col-md-2 control-label']) !!}
                <div id="import-upload" class="col-md-6">
                    {!! Form::button(Lang::get('import.uploadBtn'), ['class' => 'importFile btn btn-info disabled']) !!}
                    {!! Form::button(Lang::get('import.uploadTextBtn'), ['class' => 'importText btn btn-info disabled', 'data-toggle' => 'modal', 'data-target' => '#textImport', 'data-backdrop' => 'static']) !!}
                    {!! $errors->first('importFile', '<span class="help-block">:message</span>') !!}
                </div>
            </div>

            <div class="form-group {{ $errors->has('agreement') ? 'has-error' : '' }}">
                <div class="col-md-10 col-md-offset-2">
                    {!! Form::checkbox('agreement', 1, old('agreement')) !!}
                    {!! $errors->first('agreement', '<span class="help-block">:message</span>') !!}
                    <span style="font-size:11px;line-height: 2.5em;padding-left: 5px;">{{ Lang::get('import.agreement') }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12" style="margin-top:25px;">
            <p>{{ Lang::get('import.create.infoText1') }}</p>
            <p>{{ Lang::get('import.create.infoText2') }}</p>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="form-group">
                <div class="col-xs-12 text-right">
                    <hr>
                    <button class="btn btn-primary start disabled">{!! Lang::get('import.createImportBtn') !!}</button>
                </div>
            </div>
        </div>
    </div>

    <div id="upload-template" style="display: none;">
        <div class="dz-preview dz-file-preview">
            <div class="dz-details">
                <div class="dz-size">@lang('receiver.import.filesize')
                  <span data-dz-size></span>
                </div>
                <div class="dz-filename">@lang('receiver.import.filename')
                    <span data-dz-name></span>
                </div>
            </div>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
            </div>
            <div>
                <button class="btn btn-default btn-outline" data-dz-remove>@lang('receiver.import.cancel')</button>
            </div>
            <div class="dz-error-message">
                <span data-dz-errormessage></span>
            </div>
        </div>
    </div>

    <div class="modal inmodal fade" id="textImport" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">@lang('receiver.import.text.title')</h4>
                </div>
                <div class="modal-body">
                    {!! Form::open(['route' => 'imports.store', 'class' => 'importForm']) !!}
                        {!! Form::hidden('agreement', 1) !!}
                        <textarea class="form-control" rows="20" name="importText"></textarea>
                    {!! Form::close() !!}
                </div>

                <div class="modal-footer">
                    <button type="button" id="saveText" class="btn btn-primary" data-dismiss="modal">@lang('receiver.import.text.save')</button>
                </div>
            </div>
        </div>
    </div>

@stop

@section('footer-script')

    <script>
        $(function() {
            // Uncheck checkbox on start
            $('input[name="agreement"]').attr('checked', false);
            // Empty textarea
            $('textarea[name="importText"]').val('');

            var previewTemplate = document.getElementById('upload-template').innerHTML;

            var myDropzone = new Dropzone(document.getElementById('import-upload'), {
                url: "{{ route('imports.store') }}",
                previewTemplate: previewTemplate,
                uploadMultiple: false,
                autoProcessQueue: false,
                maxFiles: 1,
                paramName: "importFile",
                clickable: ".importFile",
                acceptedFiles: ".csv",
                maxFilesize: 1000,
                params: {
                    'agreement': 1
                },
                headers: {
                    'X-CSRF-Token': '{{ csrf_token() }}'
                }
            });

            myDropzone.on("success", function(file, response) {
                if(Number.isInteger(response.import_id)) {
                    window.location = '{{ route('home.index') }}/imports/'+response.import_id+'/edit';
                } else {
                    myDropzone.removeFile(file);
                    toastr.error(response.error_msg, response.error_title);
                }
            });

            myDropzone.on("addedfile", function(file) {
                if (this.files[1]!=null){
                    this.removeFile(this.files[0]);
                }

                $('.start').removeClass('disabled');
            });

            myDropzone.on("removedfile", function() {
                $('.start').addClass('disabled');
            });

            $("input[name='agreement']").click(function(){
                if ($(this).is(':checked')) {
                    $('.importFile').removeClass('disabled');
                    $('.importText').removeClass('disabled');
                } else {
                    $('.importFile').addClass('disabled');
                    $('.importText').addClass('disabled');
                }
            });

            $(".start").click(function(){
                if($('textarea[name="importText"]').val() != '') {
                    $('.importForm').submit();
                }
                myDropzone.processQueue();
            });

            $("#saveText").click(function(){
                if($('textarea[name="importText"]').val() != '') {
                    $('.start').removeClass('disabled');
                }
            });
        });
    </script>

@stop