@extends('layouts.master')
@section('content')
    <main class="contentContainer">

        <h1>Dokumentenübersicht</h1>

        <div class="row">
            <div class="col-12">
                <div class="row">
                    <div class="col-12 col-md-6 pb-5">
                        <div class="overview-box" data-type="input">
                            <div class="box-header">Dateneingänge</div>
                            <div class="box-content">
                                {{--Wird dynamisch gefüllt--}}
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 pb-5">
                        <div class="overview-box" data-type="output">
                            <div class="box-header">Datenausgänge</div>
                            <div class="box-content">
                                {{--Wird dynamisch gefüllt--}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>

        /*
        jQuery(document).on("keyup","input.filterboxcontent", function(){
           var searchvalue = jQuery(this).val();
           var files = jQuery(this).parents(".box-content").find(".file-item");
           jQuery.each(files, function( index, fileobj ) {
               var searchfor = jQuery(fileobj).data("searchfor");
               if(searchfor.indexOf(searchvalue)>=0 || searchvalue=="")
               {
                   jQuery(fileobj).removeClass("searchhide");
               }
               else{
                   jQuery(fileobj).addClass("searchhide");
               }
           });

        });
        */

        var searchtimeoutOutput = null;
        var searchtimeoutInput = null;
        jQuery(document).on("keyup","input.filterboxcontent", function(){

            var boxType = jQuery(this).parents(".overview-box").data("type");
            // Neue Filteranfrage. Page muss wieder auf 1 gesetzt werden
            var box = jQuery(".overview-box[data-type=output]");
            jQuery(box).find(".pagination-controls select[name=pagenumber]").val(1);

            if(boxType == "output"){
                clearTimeout(searchtimeoutOutput);
                searchtimeoutOutput = setTimeout(doSearchOutput, 600);
            }
            else if(boxType == "input"){
                clearTimeout(searchtimeoutInput);
                searchtimeoutInput = setTimeout(doSearchInput, 600);
            }
        });
        jQuery(document).on("change",".subfilter select, .pagination-controls select", function(){
            var boxType = jQuery(this).parents(".overview-box").data("type");

            if(jQuery(this).is(".subfilter select")){
                // Neue Filteranfrage. Page muss wieder auf 1 gesetzt werden
                var box = jQuery(".overview-box[data-type=output]");
                jQuery(box).find(".pagination-controls select[name=pagenumber]").val(1);
            }

            if(boxType == "output"){
                clearTimeout(searchtimeoutOutput);
                doSearchOutput();
            }
            else if(boxType == "input"){
                clearTimeout(searchtimeoutInput);
                doSearchInput();
            }
        });

        jQuery(document).on("click",".pagination-controls .page-link.active", function(){
            var boxType = jQuery(this).parents(".overview-box").data("type");
            var box = jQuery(".overview-box[data-type=output]");
            var currentPage = jQuery(box).find(".pagination-controls select[name=pagenumber]").val();

           if(jQuery(this).is(".page-prev")){
               var nextPage = (1*currentPage)-1;
               jQuery(box).find(".pagination-controls select[name=pagenumber]").val(nextPage).change();
           }
           else if(jQuery(this).is(".page-next")){
               var nextPage = (1*currentPage)+1;
               jQuery(box).find(".pagination-controls select[name=pagenumber]").val(nextPage).change();
           }

        });

        function doSearchOutput(){
            showLoadingSpinner();

            var url = "/getOutputFiles";
            var data = {};
            var box = jQuery(".overview-box[data-type=output]");
            data["search"] = jQuery(box).find("input.filterboxcontent").val();
            data["company"] = jQuery(box).find("select[name=companies]").val();
            data["personId"] = jQuery(box).find("select[name=persons]").val();
            data["projectId"] = jQuery(box).find("select[name=projects]").val();
            data["articleId"] = jQuery(box).find("select[name=articles]").val();
            data["verifiedStatus"] = jQuery(box).find("select[name=verified]").val();
            data["fileType"] = jQuery(box).find("select[name=filetype]").val();

            if(jQuery(box).find(".pagination-controls select[name=pagenumber]").length){
                data["pagenumber"] = jQuery(box).find(".pagination-controls select[name=pagenumber]").val();
            }
            else{
                data["pagenumber"] = 1;
            }


            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: 'post',
                url: url,
                data: data,
                dataType: 'json',
                success: function (data) {
                    hideLoadingSpinner();
                    console.log(data);
                    processList("output", data)

                },
                error: function (data) {
                    showModalBox("Es ist ein Fehler aufgetreten.", "");
                    showOverlayAlert(data.message);
                }
            });


        }
        function doSearchInput(){
            showLoadingSpinner();

            var url = "/getInputFiles";
            var data = {};
            var box = jQuery(".overview-box[data-type=input]");
            data["search"] = jQuery(box).find("input.filterboxcontent").val();
            data["company"] = jQuery(box).find("select[name=companies]").val();
            data["personId"] = jQuery(box).find("select[name=persons]").val();
            data["projectId"] = jQuery(box).find("select[name=projects]").val();
            data["articleId"] = jQuery(box).find("select[name=articles]").val();
            data["verifiedStatus"] = jQuery(box).find("select[name=verified]").val();
            data["fileType"] = jQuery(box).find("select[name=filetype]").val();

            if(jQuery(box).find(".pagination-controls select[name=pagenumber]").length){
                data["pagenumber"] = jQuery(box).find(".pagination-controls select[name=pagenumber]").val();
            }
            else{
                data["pagenumber"] = 1;
            }


            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: 'post',
                url: url,
                data: data,
                dataType: 'json',
                success: function (data) {
                    hideLoadingSpinner();
                    console.log(data);
                    processList("input", data)

                },
                error: function (data) {
                    showModalBox("Es ist ein Fehler aufgetreten.", "");
                    showOverlayAlert(data.message);
                }
            });
        }

        /* Filter Ein- und Ausklappen */
        jQuery(document).on("click","button.togglefilter", function(){
            jQuery(this).parents(".overview-box").find(".subfilter").slideToggle();
        });

        jQuery( document ).ready(function() {
            var initialOutputList = JSON.parse('{!! str_replace('\\', '\\\\', $fileListOutput) !!}');
            processList("output", initialOutputList);
            generateFilters("output", initialOutputList);


            var initialInputList = JSON.parse('{!! str_replace('\\', '\\\\', $fileListInput) !!}');
            processList("input", initialInputList);
            generateFilters("input", initialInputList);

            /*
            console.log(initialOutputList);
            for (var i = 0; i < initialOutputList.data.length; i++) {
                console.log(initialOutputList.data[i].filename);
            }
             */
        });

        function setLoadingSpinnersInList(type)
        {
            var box = jQuery(".overview-box[data-type="+type+"] .box-content");
            // Box Clearen
            jQuery(box).empty();
            var htmlLoadingSpinner =`<div class="placeholder"><i class="fal fa-circle-notch fa-spin"></i></div>`;
            var html = ``;
            for(i=0;i<5;i++){
                html+=htmlLoadingSpinner;
            }
            jQuery(box).append(html);
        }

        function generateFilters(type, list){
            var box = jQuery(".overview-box[data-type="+type+"] .box-content");

            // Such und Filterfunktion
            if(list.data.length > 0) {

                // Company Filter
                var companyFilter =
                    `<select class="form-control js-example-basic-single" name="companies">;
                        <option value="all">Unternehmen filtern</option>`;
                for (var i = 0; i < list.companies.length; i++) {
                    companyFilter+=`<option value="${list.companies[i]}">${list.companies[i]}</option>`;
                }
                companyFilter+=`</select>`;
                // Personen Filter
                var personFilter =
                    `<select class="form-control js-example-basic-single" name="persons">;
                        <option value="all">Personen filtern</option>`;
                var grpWechsel = "";
                for (var i = 0; i < list.persons.length; i++) {
                    // Gruppenwechsel
                    if(list.persons[i][2] != grpWechsel){
                        if(grpWechsel != ""){
                            personFilter+=`</optgroup>`;
                        }
                        grpWechsel = list.persons[i][2];
                        personFilter+=`<optgroup label="${grpWechsel}">`;
                    }
                    personFilter+=`<option value="${list.persons[i][0]}">${list.persons[i][1]}</option>`;

                    if(i+1 ==  list.persons.length){
                        personFilter+=`</optgroup>`;
                    }
                }
                personFilter+=`</select>`;
                // Projekte Filter
                var projectFilter =
                    `<select class="form-control js-example-basic-single" name="projects">;
                        <option value="all">Projekte filtern</option>`;
                for (var i = 0; i < list.projects.length; i++) {
                    projectFilter+=`<option value="${list.projects[i][0]}">${list.projects[i][1]}</option>`;
                }
                projectFilter+=`</select>`;
                // Artikel Filter
                var articleFilter =
                    `<select class="form-control js-example-basic-single" name="articles">;
                        <option value="all">Artikel filtern</option>`;
                for (var i = 0; i < list.articles.length; i++) {
                    articleFilter+=`<option value="${list.articles[i][0]}">${list.articles[i][1]}</option>`;
                }
                articleFilter+=`</select>`;
                // Datenausgänge (kein dynamischer Filter)
                // Datentypen Filter
                var datatypeFilter =
                    `<select class="form-control" name="filetype">;
                        <option value="all">Datentypen filtern</option>`;
                for (var i = 0; i < list.filetypes.length; i++) {
                    datatypeFilter+=`<option value="${list.filetypes[i]}">*.${list.filetypes[i]}</option>`;
                }
                datatypeFilter+=`</select>`;

                var searchHtml =
                    `<div class="row mt-2">
                    <div class="col-10">
                        <input class="form-control filterboxcontent" type="text" value="" placeholder="Nach Dateinamen suchen..."/>
                    </div>
                    <div class="col-2">
                        <button class="btn w-100 togglefilter"><i class="fal fa-filter"></i></button>
                    </div>
                </div>

                <div class="subfilter">
                    <div class="row mt-2">
                        <div class="col-6">
                            ${companyFilter}
                        </div>
                        <div class="col-6">
                            ${personFilter}
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-6">
                            ${projectFilter}
                        </div>
                        <div class="col-6">
                            ${articleFilter}
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-6">
                            <select class="form-control" name="verified">
                                <option value="all">Alle Datenausgänge</option>
                                <option value="yes">Nur bestätigte Dateien anzeigen</option>
                                <option value="no">Nur offene Dateien anzeigen</option>
                            </select>
                        </div>
                        <div class="col-6">
                            ${datatypeFilter}
                        </div>
                    </div>
                </div>`;

                jQuery(box).prepend(searchHtml);
            }
        }

        function processList(type, list)
        {
            var box = jQuery(".overview-box[data-type="+type+"] .box-content");

            // Box Clearen
            jQuery(box).find(".file-item, .pagination-footer").remove();

            var htmlNoEntries = `<div class="file-item p-3">Keine Dateien vorhanden</div>`;
            if(list.data.length == 0)
            {
                jQuery(box).append(htmlNoEntries);
            }

            for (var iFile = 0; iFile < list.data.length; iFile++) {

                var displayFileName = list.data[iFile].filename;
                displayFileName = displayFileName.length > 45 ? displayFileName.substr(0,42)+"..." : displayFileName;

                var fileCheckIcon = `<i class="fas fa-check-circle"></i>`;
                if(list.data[iFile].downloaded_at != null && list.data[iFile].downloaded_at != ""){
                    fileCheckIcon = `<i class="fas fa-check-circle checked"></i>`;
                }

                var createdAt = list.data[iFile].created_at;
                var adressInfo = list.data[iFile].adressinfo;
                var allocationInfo = list.data[iFile].allocationinfo;
                var forwardId = list.data[iFile].forward.id;

                var transfer_type_icon = `fal fa-upload`;
                if(list.data[iFile].transfer_type == "input"){
                    transfer_type_icon = `fal fa-download`;
                }

                var html =
                `<div class="file-item">
                    <div class="file-item-icon">
                        <i class="${transfer_type_icon}"></i>
                    </div>
                    <div class="file-item-check">
                        ${fileCheckIcon}
                    </div>
                    <div class="file-item-description">
                        <div class="file-item-description-left">
                            <a href="/receice/${forwardId}">
                                <div class="file-item-description-name">
                                    ${displayFileName}
                                </div>
                                <div class="file-item-description-targeting">
                                    ${adressInfo}
                                </div>
                            </a>
                        </div>
                        <div class="file-item-description-right text-right">
                            <div class="file-item-description-date">
                                ${createdAt}
                            </div>
                            <div class="file-item-description-ref">
                                ${allocationInfo}
                            </div>
                        </div>
                    </div>
                </div>`;

                jQuery(box).append(html);
            }
            // Pagination Footer
            if(list.data.length > 0)
            {
                var pagecount = list.meta.last_page;
                var prevActive = list.meta.current_page > 1 ? "active" : "";
                var nextActive = list.meta.current_page < pagecount ? "active" : "";

                var paginationHtml = `
                <div class="pagination-footer">
                    <div class="pagination-controls">
                        <span class="page-link page-prev ${prevActive}" aria-hidden="true">‹</span>
                        <select class="form-control" name="pagenumber">`;

                for(var page = 1; page <= pagecount; page++)
                {
                    var checked = page == list.meta.current_page ? `selected` : ``;
                    paginationHtml+= `<option value="${page}" ${checked}>Seite ${page}</option>`;
                }

                paginationHtml+=
                        `</select>
                        <span class="page-link page-next ${nextActive}" aria-hidden="true">›</span>
                    </div>
                    Zeige Dateien ${list.meta.from} bis ${list.meta.to} von ${list.meta.total}
                </div>`;

                /*
                var paginationHtml = `<div class="pagination-footer">`;
                paginationHtml+= list.linksHtml;
                paginationHtml+= `Zeige Dateien ${list.meta.from} bis ${list.meta.to} von ${list.meta.total}`;
                paginationHtml+= `</div>`;
                 */
                jQuery(box).append(paginationHtml);
            }
        }

        function matchStart(params, data) {
            // If there are no search terms, return all of the data
            if ($.trim(params.term) === '') {
                return data;
            }

            // Skip if there is no 'children' property
            if (typeof data.children === 'undefined') {
                return null;
            }

            // `data.children` contains the actual options that we are matching against
            var filteredChildren = [];
            $.each(data.children, function (idx, child) {
                if (child.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
                    filteredChildren.push(child);
                }
            });

            // If we matched any of the timezone group's children, then set the matched children on the group
            // and return the group object
            if (filteredChildren.length) {
                var modifiedData = $.extend({}, data, true);
                modifiedData.children = filteredChildren;

                // You can return modified objects from here
                // This includes matching the `children` how you want in nested data sets
                return modifiedData;
            }

            // Return `null` if the term should not be displayed
            return null;
        }

        jQuery(document).ready(function() {
            jQuery('.js-example-basic-single').select2({
                //matcher: matchStart
            });
        });

    </script>
    @include('layouts.overlay')
@endsection