@using MicroUniverso.Web.Security.Html
<div breadcrumb-start="Editar Usuário" region>

    <div role="tabpanel">

        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#tab-dados-basicos" aria-controls="tab-dados-basicos" role="tab" data-toggle="tab">Dados básicos</a></li>
            <!--<li role="presentation"><a href="#tab-ficha-crediario" aria-controls="tab-ficha-crediario" role="tab" data-toggle="tab">Ficha de Crediário</a></li>-->
            @if (Html.UsuarioPermitidoAcao("DEFINIR_PERMISSOES"))
            {
                <li role="presentation"><a href="#tab-permissoes" aria-controls="tab-permissoes" role="tab" data-toggle="tab">Permissões</a></li>
            }
        </ul>

    </div>


    <div class="tab-content">
        <div id="tab-dados-basicos" role="tabpanel" class="tab-pane active">

            <fieldset class="separador">
                <div class="tam-3"><label>Nome</label><input type="text" readonly="readonly" disabled data-bind="value: model.Nome" /></div>
                @if (Html.UsuarioPermitidoAcao("ALTERAR_SENHA"))
                {
                    <div class="tam-3"><label>Senha</label><input type="password" data-bind="value: model.Senha" /></div>
                }
                <div class="tam-3">
                    <label>Grupo Principal</label>
                    <input type="text" readonly="readonly" disabled data-bind="value: model.NomeGrupoPrincipal" />
                    <a href="#" class="icone-pesquisar" title="Pesquisar" data-bind="click: alterarGrupoPrincipal"></a>
                </div>
            </fieldset>

            <div class="submit">
                <button class="icone-incluir" data-bind="click: incluirGrupo">Incluir</button>
                <button class="icone-excluir" data-bind="click: excluirGrupos, enable: model.grupoSelecionado">Excluir</button>
            </div>

            <div style="height: 400px; overflow: auto;">

                <table class="t1">
                    <tr>
                        <th class="ds">Grupo</th>
                        <th class="tam-selecao"></th>
                    </tr>
                    <tbody data-bind="foreach: model.Grupos">
                        <!-- ko if: !Excluido() -->
                        <tr class="clicavel" data-bind="click: $.proxy($root.selecionarGrupo, $root),
                                                    style: { backgroundColor: selecionado() ? '#FFFFCC' : '' },">
                            <td data-bind="text: Nome"></td>
                            <td><a href="#" class="icone-excluir" title="Excluir" data-bind="click: $.proxy($root.excluirGrupo, $root)"></a></td>
                        </tr>
                        <!-- /ko -->
                    </tbody>
                </table>
            </div>
            
        </div>

        <div id="tab-permissoes" role="tabpanel" class="tab-pane">
            <div class="separador arvore" style="height: 400px; overflow: auto;">
                <ul data-bind="foreach: model.Modulos">

                    <li data-bind="css:{
                               'expandido': expandido && expandido()
                           }">
                        <a class="contrai" data-bind="click: $.proxy($root.expandir, $root)"></a>
                        <a href="#" data-bind="text: Nome, click: $.proxy($root.expandir, $root)"></a>
                        <div data-bind="style:{
                                    display: expandido && expandido() ? 'block' : 'none'
                                }">

                            <ul data-bind="foreach: Funcionalidades">

                                <li data-bind="css:{
                               'expandido': expandido && expandido()
                           }">

                                    <a class="contrai" data-bind="click: $.proxy($root.expandir, $root)"></a>
                                    <a href="#" data-bind="text: Descricao, click: $.proxy($root.expandir, $root)"></a>

                                    <div data-bind="style:{
                                    display: expandido && expandido() ? 'block' : 'none'
                                }">


                                        <table class="t3" style="width: 30%;" data-bind="foreach: AcoesCadastro">
                                            <tr>
                                                <th data-bind="text: Descricao" style="color: #333739;"></th>
                                                <td>
                                                    <select style="color: black;" name="Uf" data-bind="options: $root.model.permissoes, optionsText: 'Descricao', optionsValue: 'Valor', value: Permitido, optionsCaption: ''"></select>
                                                </td>
                                            </tr>
                                        </table>

                                    </div>

                                </li>

                            </ul>

                        </div>
                    </li>

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

    <br />

    <div class="submit">
        <button type="submit" data-bind="click: cancelar">Cancelar</button>
        @*<button type="submit" data-bind="click: salvar">Salvar</button>*@
        @Html.SegurancaButton("Salvar", new { data_bind = "click: salvar" }, "ALTERAR")
    </div>

</div>


<div id="modalGrupos" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Grupos</h4>
            </div>
            <div class="modal-body">


                <div class="arvore" style="height: 400px; overflow: auto;">
                    <ul data-bind="template: {name: 'template-grupos', foreach: model.gruposPrincipais}"></ul>
                </div>


                <div class="submit">
                    <button type="button" data-bind="click: selecionarGrupos">OK</button>
                    <button type="button" data-dismiss="modal" aria-label="Close">Cancelar</button>

                </div>

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

<script id="template-grupos" type="text/html">

    <li data-bind="css:{
                        'expandido': expandido && expandido()
                       }">
        <a class="contrai" data-bind="click: $.proxy($root.expandirGrupo, $root)"></a>
        <input type="checkbox" data-bind="checked: selecionado, click: $.proxy($root.grupoSelecionado, $root)" />
        <a href="#" data-bind="text: Nome, click: $.proxy($root.expandirGrupo, $root)"></a>

        <ul data-bind="template: {name: 'template-grupos', foreach: Grupos}, style:{
                                    display: expandido && expandido() ? 'block' : 'none'
                                }"></ul>

    </li>

</script>


<script>

    if (ControllerBase.current) {
        ControllerBase.current.setModel(@Html.Raw(Json.Encode(Model)));
    }

</script>
