@extends('template.default')
@section('text-field')
@stop
@section('content')

    <div class="row">

        <div class="col offset-s1 s5 card z-depth-2">
            <div class="row">
                <div class="col s12">
                    <div class="row">
                        <div class="col s12">
                            <h5 class="font-weight-900 grey-text">Menu Atual</h5>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col s12">

                            <div class="dd" id="nestable3">
                                <ol class="dd-list">

                                    @foreach($menus->data as $menu)

                                        <li class="dd-item dd3-item" data-nome="{{ $menu->nome }}"
                                            data-id="{{ $menu->id }}" data-rota="{{ $menu->rota }}"
                                            data-icon="{{ $menu->icon }}">
                                            <div class="dd-handle dd3-handle">Drag</div>
                                            <div
                                                    onclick="editarMenu('{{ $menu->id }}', '{{ $menu->nome }}',
                                                            '{{ $menu->rota }}',
                                                            'null', 'null',
                                                            '{{ $menu->icon }}')"
                                                    class="dd3-content">{{ $menu->nome }}</div>

                                            @if(isset($menu->filhos))

                                                <ol class="dd-list">

                                                    @foreach($menu->filhos as $filho)

                                                        <li class="dd-item dd3-item" data-nome="{{ $filho->nome }}"
                                                            data-id="{{ $filho->id }}" data-rota="{{ $filho->rota }}"
                                                            data-icon="{{ $filho->icon }}">
                                                            <div class="dd-handle dd3-handle">Drag</div>
                                                            <div
                                                                    onclick="editarMenu('{{ $filho->id }}',
                                                                            '{{ $filho->nome }}', '{{ $filho->rota }}',
                                                                            '{{ $menu->id }}', '{{ $menu->nome }}',
                                                                            '{{ $filho->icon }}')"
                                                                    class="dd3-content">{{ $filho->nome }}</div>
                                                        </li>

                                                    @endforeach

                                                </ol>

                                            @endif

                                        </li>

                                    @endforeach

                                </ol>
                            </div>

                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col offset-s8 s4">
                            <a onclick="enviarForm()" class="waves-effect waves-light col s12 btn">Salvar</a>
                        </div>
                    </div>
                    <br>

                </div>
            </div>
        </div>


        {{--Editar menu--}}


        <div class="col offset-s1 s4 card z-depth-2">
            <div class="row">
                <div class="col s12">
                    <div class="row">
                        <div class="col s12">
                            <h5 class="font-weight-900 grey-text">Criar / Editar</h5>
                        </div>
                    </div>

                    <form method="post" id="formNewItenMenu">
                        {{ csrf_field() }}

                        <input hidden name="id" id="menu-id">

                        <div class="row">
                            <div class="col s12">

                                <div class="row">
                                    <div class="input-field col s12">
                                        <input id="nome" name="nome" type="text" class="validate">
                                        <label for="nome">Nome</label>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="input-field col s12">
                                        <input id="rota" name="rota" type="text" class="validate">
                                        <label for="rota">Rota</label>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="input-field col s12">
                                        <input onclick="abrirModalMenuPai()" id="pai_nome" type="text" class="validate">
                                        <label for="pai_nome">Pai</label>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="input-field col s12">
                                        <input name="icon" id="icon" type="text" class="validate">
                                        <label for="icon">Icon</label>
                                    </div>
                                </div>


                            </div>
                        </div>
                        <br>
                        <div class="row">

                            <div class="col s4">
                                <a onclick="enviarFormDeletar()"
                                   class="waves-effect red waves-light col s12 btn">Excluir</a>
                            </div>

                            <div class="col s4">
                                <a onclick="enviarFormEditarItem()"
                                   class="waves-effect waves-light col s12 btn">Editar</a>
                            </div>

                            <div class="col s4">
                                <a onclick="enviarFormNewitenMenu()"
                                   class="waves-effect green waves-light col s12 btn">Criar</a>
                            </div>

                        </div>
                        <br>
                    </form>
                </div>
            </div>
        </div>


        <div id="modalPai" class="modal">
            <div class="modal-content">
                <h4 class="font-weight-900 grey-text">Menus Pais</h4>
                <p class="font-weight-500 grey-text">Escolha um menu para ser o pai</p>

                <div class="row">

                    <div class="col s12">
                        <p>
                            <input onclick="enviarNomeParaInputPai('Nenhum')"
                                   class="with-gap" name="pai_id" value="null" type="radio" id="menu_pai_-1"/>
                            <label for="menu_pai_-1">Nenhum</label>
                        </p>
                    </div>

                    @foreach($menus->data as $menu)

                        <div class="col s4">

                            <p>
                                <input value="{{ $menu->id }}" onclick="enviarNomeParaInputPai('{{ $menu->nome }}')"
                                       class="with-gap" name="pai_id" type="radio" id="menu_pai_{{ $menu->id }}"/>
                                <label for="menu_pai_{{ $menu->id }}">{{ $menu->nome }}</label>
                            </p>

                        </div>

                    @endforeach
                </div>

            </div>
        </div>

        </form>

    </div>

@endsection
@section('specific-scripts')
    <script type="text/javascript"
            src="{{ \Tooleks\LaravelAssetVersion\Facades\Asset::get('/vendors/jquery.nestable/jquery.nestable.js') }}"></script>
    <script>

        $(document).ready(function () {
            $('.dd').nestable({});
        });

        function abrirModalMenuPai() {

            $('#modalPai').modal('open');

        }

        function enviarNomeParaInputPai(nome) {

            $('#pai_nome').val(nome);
            $('#modalPai').modal('close');
            Materialize.updateTextFields();

        }

        function enviarFormEditarItem() {

            $('#formNewItenMenu').attr('action', '/editar/iten/menu');
            $('#formNewItenMenu').submit();

        }

        function enviarFormNewitenMenu() {

            $('#formNewItenMenu').attr('action', '/new/iten/menu');
            $('#menu-id').val('');

            $('#formNewItenMenu').submit();

        }

        function enviarFormDeletar() {

            $('#formNewItenMenu').attr('action', '/deletar/iten/menu');

            $('#formNewItenMenu').submit();

        }

        function editarMenu(menuId, nome, rota, paiId, paiNome, icon) {

            $('#menu-id').val(menuId);
            $('#nome').val(nome);
            $('#rota').val(rota);
            $('#icon').val(icon);
            $('#pai_nome').val(paiNome);
            console.log('#menu_pai_' + paiId);
            $('#menu_pai_' + paiId).attr('checked', 'checked');

            Materialize.updateTextFields();

        }

        function enviarForm() {

            data = $('.dd').nestable('serialize');

            console.log(data);

            $.ajax({
                type: 'POST',
                dataType: 'html',
                url: '/menu/create',
                data: {'_token': '{{ csrf_token() }}', data: data},
                beforeSend: function () {


                },
                success: function (data) {

                    Materialize.toast('Menu alterado com sucesso', 3000);
                    location.reload();

                },
                error: function (xhr) {

                }
            });

        }

    </script>

@stop