@extends('redesign.layouts.metronic.dashboard')

@section('title', 'Kategorien')

@section('documentTitle', 'Kategorien')

@section('document')
    <div class="kt-portlet kt-portlet--mobile">
        <div class="kt-portlet__head kt-portlet__head--lg">
            <div class="kt-portlet__head-label">
                <span class="kt-portlet__head-icon">
                    <i class="fas fa-list"></i>
                </span>
                <h3 class="kt-portlet__head-title">
                    Kategorien
                </h3>
            </div>

            @if( $canCreate )
                <div class="kt-portlet__head-toolbar">
                    <div class="kt-portlet__head-wrapper">
                        <div class="kt-portlet__head-actions">
                            <a href="{{ route('category-create') }}" class="btn btn-brand btn-elevate btn-icon-sm">
                                <i class="fas fa-plus-circle"></i> Neue Kategorie erstellen
                            </a>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <div class="kt-portlet__body">
            @if( $tree->count() )

                <div class="row mb-4">
                    <div class="form-group col-12 inputHolder">
                        <label for="dcDealSearchInput">Kategorie suche</label>
                        <div class="input-group">
                            <input type="search" class="form-control" id="categorySearchInput" placeholder="Beginne zu suchen">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button" id="categorySearchReset">
                                    <i class="fas fa-ban"></i> Zurücksetzen
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                @include('redesign.back.metronic.operator.categories.pieces.list')

                <form action="" method="post" style="display: none" id="categoryDeleteForm">
                    {{ csrf_field() }}
                    {{ method_field('DELETE') }}
                </form>

                <div id="categorySearchResults" style="display: none">
                    <span id="categorySearchResultNothing">Nichts gefunden</span>
                    <div id="categorySearchResultsHolder" class="categoryTree list-unstyled"></div>
                </div>

            @else

                <div class="pt-5 pb-5 text-center">
                    <h2 class="mb-4">Noch keine Kategorien.</h2>
                    @if( $canCreate )
                        <a class="btn btn-primary" href="{{ route('category-create') }}">
                            <i class="fas fa-plus-circle"></i> Neue Kategorie erstellen
                        </a>
                    @endif
                </div>

            @endif
        </div>
    </div>
@endsection

@section('scripts-page')
    <script>
        $(document).ready(function () {
            var categoryBuildChain = function (node) {
                var chain = [];
                var depth = parseInt(node.data('depth')) - 1, i = 0;
                var next = node.parent().closest('.categoryNode');
                chain.unshift(next.data('name'));
                for (i; i < depth; i++) {
                    next = next.parent().closest('li');
                    chain.unshift(next.data('name'));
                }
                node.find('.categoryChain').first().text(chain.join(' / ') + ' / ');
            };

            var categoriesBuildChains = function () {
                var nodes = $('#categoryTree li[data-depth!="0"]');
                var len = nodes.length, i = 0;
                for (i; i < len; i++) {
                    categoryBuildChain($(nodes[i]));
                }
            };

            var categorySearch = function (s) {
                s = s.toLowerCase();
                if ('' === s) {
                    $('#categoryTree').show();
                    $('#categorySearchResults').hide();
                    $('#categorySearchResultsHolder').html('');
                } else {
                    $('#categoryTree').hide();
                    $('#categorySearchResults').show();
                    var nodes = $('#categoryTree li[data-search*="' + s + '"]');
                    if (0 === nodes.length) {
                        $('#categorySearchResultNothing').show();
                        $('#categorySearchResultsHolder').html('');
                    } else {
                        nodes = nodes.clone(true, true);
                        nodes.find('ul, .categoryToggler, .categoryMoveUp, .categoryMoveDown').remove();
                        nodes.find('.categoryChain').show();
                        $('#categorySearchResultNothing').hide();
                        $('#categorySearchResultsHolder').html(nodes);
                    }
                }
            };

            $('.categoryToggler').on('click', function (e) {
                e.preventDefault();
                e.stopPropagation();

                var state = $(this).data('state');
                if ('collapsed' === state) {
                    $(this).closest('li').find('ul').first().show();
                    $(this).data('state', 'expanded');
                    $(this).html('<i class="fas fa-minus"></i>');
                } else {
                    $(this).closest('li').find('ul').first().hide();
                    $(this).data('state', 'collapsed');
                    $(this).html('<i class="fas fa-plus"></i>');
                }
            });

            $('#categorySearchInput').on('change keyup', function () {
                categorySearch($(this).val());
            });

            $('#categorySearchReset').on('click', function (e) {
                e.preventDefault();
                e.stopPropagation();

                $('#categorySearchInput').val('');
                categorySearch('');
            });

            $('.categoryDelete').on('click', function (e) {
                e.preventDefault();
                e.stopPropagation();

                swal.fire({
                    title: 'Bist Du sicher?',
                    text: 'Aktion ist nicht kündbar',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ja',
                    cancelButtonText: 'Nein',
                    focusConfirm: false,
                    focusCancel: true,
                    heightAuto: false,
                }).then((result) => {
                    if (result.value) {
                        $('#categoryDeleteForm')
                            .attr('action', $(this).attr('href'))
                            .submit();
                    }
                });
            });

            categoriesBuildChains();
        });
    </script>
@endsection