@extends('layouts.back')

@section('titulo', 'Funções')

@section('page_header','Painel')

@section('breadcrumbs')
@if(isset($item->id))
@breadcrumbs(["itens" => ["Funções" => route('funcoes.index'), "Editar funcao #" . $item->id => ""]])
@else
@breadcrumbs(["itens" => ["Funções" => route('funcoes.index'), "Criar funcao" => "" ]])
@endif
@endsection

@push('header_imports')
    <link href="{{asset('plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('adm/assets/js/jsTree/themes/default/style.min.css')}}" rel="stylesheet" type="text/css"/>
@endpush

@section('content')
    <div class="row">
        <div class="col-lg-12">

            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{isset($item->id) ? 'Editar Função' : 'Nova Função'}}</h4>
                </div>

                <form action="{{isset($item->id) ? route('funcoes.update', $item->id) : route('funcoes.store')}}" method="post" class="form-horizontal form-bordered" enctype="multipart/form-data">
                    @csrf

                    {{ $item->id ? method_field('PATCH') : ''}}

                    <div class="card-body">

                        @if ($errors->any())
                            <div class="row">
                                <div class="alert alert-danger col-md-6 col-md-offset-3">
                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        @endif

                        <div class="row">
                            <div class="col-md-3">
                                <label for="funcao">Nome Função</label>
                                <input type="text" name="funcao" id="funcao" class="form-control" minlength="3" maxlength="40" value="{{ $item->id ? old('funcao', $item->name) : old('funcao') }}" placeholder="Ex.: Administrador" required>
                            </div>
                            <div class="col-md-9">
                                <label for="tipo">Selecione: </label>
                                <select name="tipo" class="form-control" style="width: 20%;" id="forma_selecao">
                                    <option value="personalizar">Personalizar</option>
                                    <option value="todos">Todos</option>
                                </select>
                            </div>
                        </div>

                        <!-- Input atualizado com opções selecionadas pelo usuário -->
                        <input type="hidden" name="opcoes_funcao" id="opcoes_funcao">

                        <!-- Árvore com opções -->
                        <div id="jstree_div" style="margin: 30px 0 0 50px;"></div>

                    </div>

                    <div class="card-footer">
                        <button class="btn btn-success waves-effect waves-light m-b-10" onclick="setOpcoesEscolhidasJsTree();">Salvar</button>
                        <a href="{{route('funcoes.index')}}" type="button" class="btn btn-secondary waves-effect waves-light m-b-10">Cancelar</a>
                    </div>

                </form>

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

@endsection

@push('footer_imports_end')
    <script src="{{asset('plugins/select2/js/select2.min.js')}}"></script>
    <script src="{{asset('adm/assets/js/jsTree/jstree.min.js')}}"></script>
@endpush

@push('js')
    <script type="text/javascript">

        //gerando TOKEN automaticamente
        $.ajaxSetup({
            headers:{
                'X-CSRF-TOKEN':"{{ csrf_token()}}"
            }
        });

        // Select2
        $(".select2").select2();

        $('#forma_selecao').change(function() {
            if ($(this).val() != 'todos')
                $('#jstree_div').jstree('uncheck_all');
            else
                $('#jstree_div').jstree("check_all");
        });

        function renderizaJsTree(dados) {

            let i = 0;

            $('#jstree_div').jstree({
                core: {
                data: dados,
                check_callback: false,
                },
                checkbox: {
                    three_state : true, // to avoid that fact that checking a node also check others
                    whole_node : false,  // to avoid checking the box just clicking the node
                    tie_selection : false // for checking without selecting and selecting without checking
                },
                plugins: ['checkbox'],
            });
        }

        function setOpcoesEscolhidasJsTree() {
            var selecionados = $('#jstree_div').jstree('get_checked');
            $('#opcoes_funcao').val(selecionados);
        }

        function setFormaSelecao(opcoesSelecionadas) {
            let dados = JSON.stringify(opcoesSelecionadas);
            if (dados.indexOf('not checked') < 0)
                $('#forma_selecao').val('todos')
            else
                $('#forma_selecao').val('personalizar');
        }

        $(function () {
            let opcoesSelecionadas = {!! $dados_jstree !!};
            renderizaJsTree(opcoesSelecionadas);
            setFormaSelecao(opcoesSelecionadas);
        });

    </script>
@endpush