@extends('layouts.master')
@section('content')
    

    <main class="contentContainer" id="app">
            <div class="col-12">
                <h1>Verwaltung von Dokumenten und Templates</h1>
            </div>
        <div class="row col-12 d-flex justify-content-center">
            <div style="color:#282d67;" class="shadow-sm p-3 mb-5 bg-light rounded col-10">
                <span class="row"><i class="fas fa-info-circle" style="margin-right:10px; margin-left: 10px;font-size: 1.5rem;"></i>
                    Um ein oder mehrere Dokumente einen oder mehrere Typen zuzuweisen, selektieren Sie bitte einen Typ und dann wählen
                    Sie das gewüschte Dokument aus.</span>
            </div>
        </div>

            <!--<div style="position: absolute; right: 10px; top: 10px;">-->
        {!! BootForm::open(["id" => "saveDocuments",
                         "class" => "sticky-top document-options",
                         "route" => "documents.update",
                         "method" => "POST",
                         "enctype" => "multipart/form-data"]);
                         !!}
        <div class="row col-12 mb-1 toolbar">
        <div class="col-10">
            @foreach($tags as $tag)
                <a href="#" class="documentTagReferrer" data-id="{{$tag->id}}" data-title="{{$tag->title}}">
                    <span class="badge badge-pill badge-primary badge-lg">{{$tag->title}}</span>
                </a>
            @endforeach
        </div>

        <div class="sticky-top col-2 mt-1 text-right">
            {{--        <button type="button" class="btn btn-primary btn-big createCategory"--}}
            {{--                style="height:60px;">--}}
            {{--            <i class="fas fa-folder-plus" style="font-size:1.5em;margin-right:10px;"></i> Neue Kategorie anlegen--}}
            {{--        </button>--}}
            <button type="button" class="btn btn-primary btn-big saveDocuments">
                <i class="fas fa-save"></i> Speichern
            </button>
        </div>
        </div>

        <div id="newFileContainerList">
            <input type="hidden" id="newCatgoryFileFields" name="newCategoryFileFields"
                   value='{ "fields" : [ @foreach($categoryDocumentDropzoneList as $categoryDocumentDropzone) "{{$categoryDocumentDropzone->dropzoneName}}"@if(!$loop->last),@endif @endforeach ] }'>
                   <input type="hidden" id="documentFileFields" name="documentFileFields" value='{ "fields" : [] }'>
        </div>


        <div id="versionInfoFieldList" style="height:0;">
            @foreach($documentCategories as $documentCategory)
                @include('document.documentVersionInputFields', array('documentList' => $documentCategory->documents))
            @endforeach
        </div>

        <div id="tagList" style="margin-bottom:30px;">

            @foreach($documentCategories as $documentCategory)
                @foreach($documentCategory->documents as $document)
                    <input type="hidden" data-documentid="{{$document->id}}" name="documentTags[{{$document->id}}]" value='{ "tags" : [ @foreach($document->tags as $tag) {{$tag->id}} @if(!$loop->last),@endif @endforeach ]}' />
                @endforeach
            @endforeach
        </div>
        {!! BootForm::close() !!}

        <div class="col-12">
            @foreach($documentCategories as $key => $category)
{{--                <br>--}}
{{--                <h3>Alle Dokumente</h3>--}}
                @include('document.documentList', array('dropzone' => $categoryDocumentDropzoneList[$key], 'documentList' => $category->documents, 'showTags' => true))
            @endforeach
        </div>

    </main>

    <script>
        var selectedTag = -1;
        var selectedTagTitle = "";

        $(document).ready(function (){
            $('.saveDocuments').click(function(){
                $('#saveDocuments').submit();
            });

            $('.documentTagReferrer').click(function(){
                $(`.documentTagReferrer[data-id="${selectedTag}"]`).removeClass('active');
                if(selectedTag == this.dataset.id) {
                    selectedTag = -1;
                    selectedTagTitle = "";
                    $('.documentList').removeClass('selectionMode');
                    return;
                }
                selectedTag = this.dataset.id;
                selectedTagTitle = this.dataset.title;
                $(this).addClass('active');
                $('.documentList').addClass('selectionMode');
            });


            $('.listItem[data-documentid]').click(function(){
                togglTag(this);
            });
            $('.deleteTag').click(function(){
                togglTag($(this).closest('.listItem')[0], $(this).parent()[0].dataset.id);
            });

            $(document).keydown(function(event){
                if (event.key === "Escape") {
                    $(`.documentTagReferrer[data-id="${selectedTag}"]`).removeClass('active');
                    selectedTag = -1;
                    selectedTagTitle = "";
                    $('.documentList').removeClass('selectionMode');
                }
            });
        });

        function togglTag(element, tagId){
            if(tagId == null) tagId = selectedTag;
            // debugger;
            if(tagId != -1) {
                var existingTag = $(element).find(`.documentTags .documentTag[data-id="${tagId}"]`);
                if(existingTag.length != 0){
                    existingTag.remove();
                    var tagArray = JSON.parse($(`#tagList [data-documentid="${element.dataset.documentid}"]`).val());
                    tagArray.tags.splice( tagArray.tags.indexOf(parseInt(tagId)), 1 );
                    $(`#tagList [data-documentid="${element.dataset.documentid}"]`).val(JSON.stringify(tagArray));
                    return;
                }
                $(element).find(".documentTags").append(`<span class='badge badge-pill badge-primary documentTag' data-id='${tagId}'>${selectedTagTitle}<span class="deleteTag"><i class="fas fa-minus-circle"></i></span>`);
                $(element).find(`.documentTag[data-id="${tagId}"]`).click(function(event){
                    togglTag($(event.currentTarget).closest('.listItem')[0], event.currentTarget.dataset.id);
                });
                var tagArray = JSON.parse($(`#tagList [data-documentid="${element.dataset.documentid}"]`).val());
                tagArray.tags.push(parseInt(tagId));
                $(`#tagList [data-documentid="${element.dataset.documentid}"]`).val(JSON.stringify(tagArray));
            }
        }



    </script>

    @include('document.basicDocumentJSLogic')


    @include('layouts.overlay')
@endsection