@extends('layouts.master')

@section('breadcrumbs')
    @component('components.breadcrumb', [
        'title' => __('Navigation').': '.$navigation->name,
        'add_new_url' => route('navigation.create'),
        'items' => [
            ['url' => '/admin/navigation', 'label' => 'Navigations'],
        ]
    ])@endcomponent
@endsection

@section('content')

    <div class="row justify-content-center mt-3">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <livewire:admin.navigation />
                </div>
            </div>
        </div>
    </div>
@endsection

@section('head')
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.css" rel="stylesheet">
@endsection

@section('scripts')
    <script type="text/javascript">
        $(document).on('click', '.close-content', function(e){
            $(this).closest('.dd-content').hide();
        });

        $(document).on('click', '.delete-item', function(e){
            if(confirm('Are You sure?')){
                $(this).closest('li').remove();
            }

        });
        $(document).on('click', '.expand', function(e){
            $(document).find('.dd-content').hide();
            $(this).closest('li').find('.dd-content').eq(0).show();
        });

        $(document).on('keyup', '.label-input', function(e){
            var value = $(this).val();
            $(this).closest('li').attr('data-name', value);
            $(this).closest('li').find('.item-name-text').eq(0).html(value);
        });

        $(document).on('keyup', '.url-input', function(e){
            var value = $(this).val();
            $(this).closest('li').attr('data-url', value);
        });

        $(document).on('keyup', '.icon-input', function(e){
            var value = $(this).val();
            $(this).closest('li').attr('data-navicon', value);
        });

        $(document).on('keyup', '.permission-input', function(e){
            var value = $(this).val();
            $(this).closest('li').attr('data-permission', value);
        });

        $(document).on('blur', '.icon-input', function(e){
            var value = $(this).val();
            if(value){
                $(this).closest('li').find('.header-icon').eq(0).html('<i class="'+value+'"></i>')
            }
        });

        var options = {
            maxDepth: 2,
            handleClass: 'handle'
        }
        $('.dd').nestable(options);

        $(document).on('click', '.save-navigation', function(e){
            var serializedArray = [];
            $(document).find('ol.parent > li').each(function(i,e){
                var name = $(e).attr('data-name');
                var id = $(e).attr('data-id');
                var url = $(e).attr('data-url');
                var navicon = $(e).attr('data-navicon');
                var permission = $(e).attr('data-permission');
                var children = [];
                if($(this).find('ol').length){
                    $(this).find('ol li').each(function(ci,ce){
                        var cname = $(ce).attr('data-name');
                        var cid = $(ce).attr('data-id');
                        var curl = $(ce).attr('data-url');
                        var cnavicon = $(ce).attr('data-navicon');
                        var cpermission = $(ce).attr('data-permission');
                        if(cid){
                            children.push({id: cid, name: cname, url: curl, navicon: cnavicon, permission: cpermission})
                        }
                    });


                }
                if(children.length > 0){
                    serializedArray.push({id: id, name: name, url: url, navicon: navicon, permission: permission, children: children})
                }
                else{
                    serializedArray.push({id: id, name: name, url: url, navicon: navicon, permission: permission})
                }

            });
            console.log(serializedArray);
            Livewire.dispatch('saveNavigation', {navigation: serializedArray})


        });
        document.addEventListener('livewire:init', () => {
            Livewire.on('saveNavigation', function () {
                toastr.success('Saved!');
            })
        });
    </script>
@endsection