@extends('layouts.master')
@section('content')
    <main class="contentContainer">
        <h1>{{ __('messages.overview.document_overview') }}</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">{{ __('messages.overview.data_inputs') }}</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">{{ __('messages.overview.data_outputs') }}</div>
                            <div class="box-content">
                                {{--Wird dynamisch gefüllt--}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>

        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=" + boxType + "]");
            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);
        });

        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){
            console.log(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">{{ __('messages.overview.filter_company') }}</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">`;
                if (type == 'output') {
                    personFilter += `{{ __('messages.overview.filter_person_from') }}`;
                } else {
                    personFilter += `{{ __('messages.overview.filter_person_to') }}`;
                }
                personFilter += `</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}">`;
                    }
                    var selectedPerson = '';
                    if ('{{ \Illuminate\Support\Facades\Auth::user()->id }}' == list.persons[i][0]) {
                        selectedPerson = 'selected="selected"';
                    }

                    personFilter+=`<option value="${list.persons[i][0]}" ` + selectedPerson + `>${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">{{ __('messages.overview.filter_project') }}</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">{{ __('messages.overview.filter_article') }}</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">{{ __('messages.overview.filter_datatypes') }}</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="{{ __('messages.overview.search_for_filename') }}"/>
                    </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">{{ __('messages.overview.filter_data_outputs') }}</option>
                                <option value="yes">{{ __('messages.overview.filter_data_outputs_only_confirmed') }}</option>
                                <option value="no">{{ __('messages.overview.filter_data_outputs_only_open') }}</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">{{ __('messages.overview.no_data') }}</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 isChecked = false;
                var fileCheckIcon = `<i class="fas fa-check-circle"></i>`;
                if(list.data[iFile].recipients != null && list.data[iFile].recipients.data != null && list.data[iFile].recipients.data.length > 0) {
                    var downloadedAtTooltip = '';
                    for (var iRecipient = 0; iRecipient < list.data[iFile].recipients.data.length; iRecipient++) {
                        if (list.data[iFile].recipients.data[iRecipient].downloaded_at != null) {
                            if (list.data[iFile].recipients.data[iRecipient].mail == '1' || list.data[iFile].recipients.data[iRecipient].cc == '1' || list.data[iFile].recipients.data[iRecipient].bcc == '1') {
                                isChecked = true;
                            }

                            if ({{ $loggedUser->isproductowner ? 'true' : 'false' }} || ((type === 'output' || {{ $loggedUser->id }} === list.data[iFile].recipients.data[iRecipient].recipientUser.id) || (isChecked))) {
                                if (downloadedAtTooltip !== '') {
                                    downloadedAtTooltip += '<br />';
                                }

                                downloadedAtTooltip += list.data[iFile].recipients.data[iRecipient].recipientUser.firstname + ' ' + list.data[iFile].recipients.data[iRecipient].recipientUser.lastname + ' | ' + list.data[iFile].recipients.data[iRecipient].recipientUser.company + ' - ' + list.data[iFile].recipients.data[iRecipient].downloaded_at;
                            }
                        }
                    }

                    if (downloadedAtTooltip !== '') {
                        fileCheckIcon = `<i class="fas fa-check-circle` + (isChecked ? ` checked` : ``) + `" data-toggle="tooltip" data-placement="right" data-html="true" title="` + downloadedAtTooltip + `"></i>`;
                    }
                }

                var createdAt = list.data[iFile].created_at;
                var adressInfo = list.data[iFile].adressinfo;
                var allocationInfo = list.data[iFile].allocationinfo;
                var forwardHash = list.data[iFile].forward.hash;
                var supplierRequestId = list.data[iFile].forward.supplier_request_id;
                var supplierRequestFinalizedAt = list.data[iFile].forward.supplier_request_finalized_at;

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


                var supplierRequestIcon = ``;
                if(supplierRequestId != null)
                {
                    transfer_type_icon = `fal fa-file-invoice`;
                    if(supplierRequestFinalizedAt != null){
                        supplierRequestIcon = `<i class="fal fa-file-invoice checked"></i>`;
                    }
                    else{
                        supplierRequestIcon = `<i class="fal fa-file-invoice"></i>`;
                    }

                }


                var html =
                `<div class="file-item">
                    <div class="file-item-icon">
                        <i class="${transfer_type_icon}"></i>
                    </div>
                    <div class="file-item-check">
                        ${fileCheckIcon} ${supplierRequestIcon}
                    </div>
                    <div class="file-item-description">
                        <div class="file-item-description-left">
                            <a href="/receice/${forwardHash}">
                                <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="dropdown">
                              <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                ...
                              </a>

                              <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                <a class="dropdown-item" href="/datenbegleitschein/${forwardHash}"><i class="fal fa-download" style="width: 20px;"></i> {{ __('messages.overview.download_data_accompanying_note') }}</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="javascript:deleteQuestion('${forwardHash}');"><i class="fal fa-trash" style="width: 21px;"></i>  {{ __('messages.overview.delete_mail') }}</a>
                              </div>
                            </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}>{{ __('messages.overview.page') }} ${page}</option>`;
                }

                paginationHtml+=
                        `</select>
                        <span class="page-link page-next ${nextActive}" aria-hidden="true">›</span>
                    </div>
                    {{ __('messages.overview.show_files') }} ${list.meta.from} {{ __('messages.overview.to') }} ${list.meta.to} {{ __('messages.overview.from') }} ${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);
            }

            jQuery('[data-toggle="tooltip"]').tooltip();
        }

        function deleteQuestion(hash) {
            Swal.fire({
                position: 'center',
                // icon: "info",
                title: '{{ __('messages.overview.delete_mail') }}',
                html: '{{ __('messages.overview.delete_mail_question') }}',
                showConfirmButton: true,
                showCancelButton: true,
                confirmButtonText: "{{ __('messages.overview.yes_delete') }}",
                cancelButtonText: '{{ __('messages.overview.abort') }}',
                allowOutsideClick: false,
                showCloseButton: true
            }).then((result) => {
                if (result.value === true) {

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

                    jQuery.ajax({
                        method: 'GET',
                        url: '/forward/delete/' + hash,
                        success: function() {
                            location.reload();
                        },
                    });
                } else {
                    this.close();
                }
            });
        }

        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