@extends('layouts.app')
@section('title', trans('menu.document_and_protocol'))
@section('plugin-styles')
    @php $u = request()->user();@endphp
    <link rel="stylesheet" href="{{asset('vendors/cropperjs/cropper.min.css')}}">
    <link rel="stylesheet" href="{{ asset('vendors/dropzone/dropzone.css')}}">
    <link rel="stylesheet" href="{{ Module::asset('organizationaldocument:css/mime-icons.min.css') }}">
    <link rel="stylesheet" href="{{ Module::asset('organizationaldocument:css/fsm.css') }}">
@stop

@section('content')
	@include('layouts.partials.single-page-header', [ 'menu' => [
            'image' => asset('images/side-bar-icon/documenten_&_protocollen_orange.svg'),
            'links' => [
                [
                    'route' => route("organizational-documents.index"),
                    'text'  => trans('menu.document_and_protocol')
                ]
            ]
        ]])


	<div class="tw-card">
        <div class="p-6">

			<div class="row mb-4 d-flex justify-content-center">

                <div class="col-lg-12">

                    @include('organizationaldocument::manager.top-bar')

                </div>

            </div>

            <div class="d-flex flex-row">

                <div id="tree"> </div>

                <div id="main">
                    <div id="alerts"></div>

                    <nav aria-label="breadcrumb" class="hidden d-lg-block" id="breadcrumbs">
                        <ol class="breadcrumb bg-light">
                            <li class="breadcrumb-item invisible">Home</li>
                        </ol>
                    </nav>

                    <div id="empty" class="hidden">
                        <i class="fa fa-folder-open"></i>
                        {{ trans('menu.message-empty') }}
                    </div>

                    <div id="content"></div>
                    <div id="pagination"></div>

                    <a id="item-template" class="hidden">
                        <div class="square"></div>

                        <div class="info">
                            <div class="item_name text-truncate"></div>
                            <time class="font-weight-light text-truncate"></time>
                        </div>
                    </a>
                </div>

                @can('create', \Modules\OrganizationalDocument\Entities\OrganizationalDocument::class)
                    <div id="fab"></div>
                @endcan

            </div>

            @include('organizationaldocument::manager.modals')



    	</div>

	</div>

@stop

@section('footer-script')

    <script type="text/javascript" src="//code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>

    <script src="{{asset('vendors/dropzone/dropzone.js')}}"></script>

    <script src="{{asset('vendors/cropperjs/cropper.min.js')}}"></script>

    <script>
      var actions = [
        // {
        //   name: 'use',
        //   icon: 'check',
        //   label: 'Confirm',
        //   multiple: true
        // },
        {
          name: 'rename',
          icon: 'edit',
          label: '{{trans('menu.menu-rename')}}',
          multiple: false
        },
        {
          name: 'download',
          icon: 'download',
          label: '{{trans('menu.menu-download')}}',
          multiple: true
        },
        {
          name: 'preview',
          icon: 'image',
          label: '{{trans('menu.menu-view')}}',
          multiple: true
        },
        {
          name: 'move',
          icon: 'arrows-alt',
          label: '{{trans('menu.menu-move')}}',
          multiple: true
        },
        {
          name: 'resize',
          icon: 'arrows-alt',
          label: '{{trans('menu.menu-resize')}}',
          multiple: false
        },
        {
          name: 'crop',
          icon: 'crop',
          label: '{{trans('menu.menu-crop')}}',
          multiple: false
        },
        {
          name: 'trash',
          icon: 'trash',
          label: '{{trans('menu.menu-delete')}}',
          multiple: true
        },
      ];

      var sortings = [
        {
          by: 'alphabetic',
          icon: 'sort-alpha-asc',
          label: '{{trans('menu.nav-sort-alphabetic')}}'
        },
        {
          by: 'time',
          icon: 'sort-amount-desc',
          label: '{{trans('menu.nav-sort-time')}}'
        }
      ];
    </script>
    @include("organizationaldocument::manager.script")

    {{-- Use the line below instead of the above if you need to cache the script. --}}
    <script>
        Dropzone.options.attachmentForm = {
            url     : "{{route('organizational-documents.categories.upload', $slug)}}",
            paramName: "upload", // The name that will be used to transfer the file
            uploadMultiple: true,
            autoProcessQueue: false,
            maxFiles: 10,
            parallelUploads: 10,
            timeout:0,
            clickable: '#upload-button',
            dictDefaultMessage: '{{trans('menu.message-drop')}}',
            addRemoveLinks: true,
            init: function() {
                var _this = this; // For the closure

                // for Dropzone to process the queue (instead of default form behavior):
                document.getElementById("uploadfiles").addEventListener("click", function(e) {
                    // Make sure that the form isn't actually being sent.
                    e.preventDefault();
                    e.stopPropagation();
                    _this.processQueue();
                });

                this.on("sendingmultiple", function(file, xhr, formData) {

                    formParams = $("#uploadForm").serializeArray();

                    $.each(formParams, function(i, val) {
                        formData.append( val.name, val.value );
                    });

                });

                this.on('success', function(file, response) {
                    if (response == 'OK') {
                        loadFolders();
                    } else {
                        this.defaultOptions.error(file, response.join('\n'));
                    }
                });
            },
            headers: {
              'Authorization': 'Bearer ' + getUrlParam('token')
            },
            acceptedFiles: "{{ implode(',', $helper->availableMimeTypes()) }}",
            maxFilesize: ({{ $helper->maxUploadSize() }} / 1000)
         }

//       $('#uploadfiles').click(function(){
//    myDropzone.processQueue();
// });

      $('body').on('click', '.extra-form-pincode', function(){
          if($(this).is(":checked")){
              $(".extra-form-pincode-dependent").removeClass('hidden');
          } else {
              $(".extra-form-pincode-dependent").addClass('hidden');
          }

      });
    </script>

@stop