<div class="main-content">

    <div class="modal-window-overlay" toggle-modal control="novaconfigCtrl.toggleModal" ng-include src="'angular/Controle/app/scripts/layouts/modal-window/modal-window-sair-configuracoes.html'"></div>

    <notification-messages></notification-messages>
    <div class="header">
        <h1>Nova Configuração</h1>
        <span class="hr"></span>
        <span class="campos-obrigatorios">(*) Campos Obrigatórios</span>
    </div>
    <form class="form-configuracao" name="formConfiguracao" novalidate>
        <div class="selecionar">
            <label for="operacao">Operação *</label>
            <div class="select">
                <select name="op" id="select-operacao"
                        ng-model="selectOperacao" ng-options="operacao.Codigo as operacao.Descricao for operacao in novaconfigCtrl.operacoes" ng-change="CarregarMacros()" required>
                    <option value="">Selecione</option>
                </select>
            </div>
            <span class="msg-erro-form" ng-show="formConfiguracao.op.$invalid && formConfiguracao.op.$touched || formConfiguracao.$submitted && formConfiguracao.op.$invalid">Selecione uma operação.</span>
        </div>
        <!--<div class="selecionar">
            <label for="macro">Macro *</label>
            <div class="select">
                <select name="macro" id="select-macro" ng-model="selectMacro" ng-options="macro.Codigo as macro.Descricao for macro in novaconfigCtrl.macros" required>
                    <option value="">Selecione</option>
                </select>
            </div>
            <span class="msg-erro-form" ng-show="formConfiguracao.macro.$invalid && formConfiguracao.macro.$touched || formConfiguracao.$submitted && formConfiguracao.macro.$invalid">Selecione uma macro.</span>
        </div>-->
        <div class="accordion">
            <h1 class="accordion-tab open" accordion>MACRO</h1>
            <div class="accordion-content">
                <div class="selecionar-macro">
                    <label for="macro">Macro</label>
                    <div class="select">
                        <select name="macro" id="select-macro"
                                ng-model="selectMacro" ng-options="macro.Codigo as macro.Descricao for macro in novaconfigCtrl.macros" ng-change="CarregarListaMacros()">
                            <option value="">Selecione</option>
                        </select>
                    </div>
                    <span class="msg-erro-form" ng-show="formConfiguracao.macro.$invalid && formConfiguracao.macro.$touched || formConfiguracao.$submitted && formConfiguracao.macro.$invalid">Selecione uma macro.</span>
                </div>

                <ul class="macros">
                    <li class="titles">
                        <div class="campos-configuracoes-macro">
                            <span class="grid-aplicacoes">CAMPOS ESPECIAIS</span>
                            <span class="grid-aplicacoes">TABELAS DINÂMICAS</span>
                            <span class="grid-aplicacoes">&nbsp;</span>
                        </div>
                    </li>
                    <li ng-repeat="m in novaconfigCtrl.listaMacros track by $index">
                        <div class="campos-configuracoes-macro">
                            <div class="grid-aplicacoes">
                                <div class="select">
                                    <select name="ap" ng-model="m.MacroSelecionada" ng-options="campo.Codigo as campo.Descricao for campo in m.CamposMacro">
                                        <option value="">Selecione</option>
                                    </select>
                                </div>
                            </div>
                            <div class="grid-aplicacoes">
                                <div class="select">
                                    <select name="ap" ng-model="m.TabelaSelecionada" ng-options="tabela.Codigo as tabela.Descricao for tabela in m.TabelasVerticais">
                                        <option value="">Selecione</option>
                                    </select>
                                </div>
                            </div>
                            <div class="grid-aplicacoes icones">
                                <span><i class="icon-minus-circle" ng-click="novaconfigCtrl.removeMacro($index)" ng-if="novaconfigCtrl.listaMacros.length > 1"></i></span>
                                <span><i class="icon-plus-circle" ng-click="novaconfigCtrl.addMacro()" ng-if="m.TabelaSelecionada != 0 && m.MacroSelecionada != 0"></i></span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="accordion">
            <h1 class="accordion-tab open" accordion>APLICAÇÕES</h1>
            <div class="accordion-content">
                <ul class="aplicacoes">
                    <li class="titles">
                        <div class="campos-configuracoes">
                            <span class="grid-aplicacoes-nome">Aplicações</span>
                            <span class="grid-aplicacoes">Aplicação Descanso</span>
                            <span class="grid-aplicacoes">Tempo para exibir descanso</span>
                        </div>
                    </li>
                    <li ng-repeat="config in novaconfigCtrl.configAplicacoes" ng-class="{unselected:!config.Checked}">
                        <div class="campos-configuracoes">
                            <div class="grid-aplicacoes-nome">
                                <fieldset class="checkbox">
                                    <span>
                                        <input type="checkbox" id="aplicacao-{{config.CodigoAplicacao}}" ng-model="config.Checked">
                                        <label for="aplicacao-{{config.CodigoAplicacao}}" class="checkbox-aplicacao"></label>
                                    </span>
                                </fieldset>
                                <span class="nome-aplicacao">{{config.DescricaoAplicacao}}</span>
                            </div>
                            <span class="grid-aplicacoes">
                                <div class="select" ng-show="config.Checked && config.CodigoAplicacao != CodigoANTT">
                                    <select name="ap" ng-model="config.CodigoAppDescanso" ng-options="app.CodigoGrupo as app.Descricao for app in novaconfigCtrl.aplicacoes|filter: {Descricao: '!' + config.DescricaoAplicacao}">
                                        <option value="">Selecione</option>
                                    </select>
                                </div>
                            </span>
                            <div class="grid-aplicacoes">
                                <div class="clockpicker-span">
                                    <input type="text" ng-model="config.TempoDescansoFormatado" name="tempo{{config.CodigoAplicacao}}" placeholder="mm:ss" pattern="[0-9][0-9]:[0-5][0-9]" minute-input ng-if="config.CodigoAppDescanso"
                                           ng-show="config.Checked && config.CodigoAplicacao != CodigoANTT">
                                    <span class="msg-erro-form" ng-show="formConfiguracao.tempo{{config.CodigoAplicacao}}.$invalid && formConfiguracao.tempo{{config.CodigoAplicacao}}.$touched">Digite um tempo válido.</span>
                                </div>
                            </div>
                        </div>
                        <ul class="subclasse" ng-repeat="vincConf in config.Configuracao">
                            <li ng-if="vincConf.Tipo == 1">
                                <div class="grid-aplicacoes">
                                    <fieldset class="checkbox">
                                        <span>
                                            <input type="checkbox" ng-model="vincConf.ValorBool" id="aplicacao-{{config.Codigo}}-{{vincConf.CodigoGrupo}}" ng-disabled="!config.Checked">
                                            <label for="aplicacao-{{config.Codigo}}-{{vincConf.CodigoGrupo}}" class="checkbox-aplicacao"></label>
                                        </span>
                                    </fieldset>
                                    <span class="nome-aplicacao">{{vincConf.Descricao}}</span>
                                </div>
                            </li>
                            <li ng-if="vincConf.Tipo == 2">
                                <div class="grid-aplicacoes-nome">
                                    <span class="nome-aplicacao">{{vincConf.Descricao}}</span>
                                </div>
                                <div class="input-subclasse">
                                    <input type="text" ng-model="vincConf.Valor" ng-disabled="!config.Checked">
                                </div>
                            </li>

                            <li ng-if="vincConf.Tipo == 3">
                                <div class="grid-aplicacoes-nome">
                                    <span class="nome-aplicacao">{{vincConf.Descricao}}</span>
                                </div>
                                <div class="input-subclasse">
                                    <div class="clockpicker-span">
                                        <input type="text" ng-model="vincConf.Valor" placeholder="mm:ss" pattern="[0-9][0-9]:[0-5][0-9]" name="tempo" ng-disabled="!config.Checked" minute-input>
                                        <span class="msg-erro-form" ng-show="formConfiguracao.tempo.$invalid && formConfiguracao.tempo.$touched">Digite um tempo válido.</span>
                                    </div>
                                </div>
                            </li>
                            <li ng-if="vincConf.Tipo == 4">
                                <div class="grid-aplicacoes-nome">
                                    <span class="nome-aplicacao">{{vincConf.Descricao}}</span>
                                </div>
                                <div class="input-subclasse radio">
                                    <span ng-repeat="opt in vincConf.OpcoesConfiguracoes">
                                        <input type="radio" id="inconformidades-{{opt.CodigoGrupo}}" ng-model="vincConf.Valor" ng-value="opt.IdentificadorMobile" name="inconformidades" ng-disabled="!config.Checked">
                                        <label for="inconformidades-{{opt.CodigoGrupo}}"><span></span>{{opt.Descricao}}</label>
                                    </span>
                                </div>
                            </li>
                            <li ng-if="vincConf.Tipo == 5">
                                <div class="grid-aplicacoes-nome">
                                    <span class="nome-aplicacao">{{vincConf.Descricao}}</span>
                                </div>
                                <div class="select">
                                    <select name="app" id="select-option" ng-model="vincConf.Valor" ng-options="(item.CodigoGrupo).toString() as item.Descricao for item in vincConf.OpcoesConfiguracoes" required>
                                        <option value="">Selecione</option>
                                    </select>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="selecionar">
            <label for="operacao">Aplicação Inicial *</label>
            <div class="select">
                <select name="app" id="select-aplicacao"
                        ng-model="selectAplicacao" ng-options="apl.CodigoGrupo as apl.Descricao for apl in novaconfigCtrl.aplicacoes|filter: {CodigoGrupo: '!' + CodigoANTT}" required>
                    <option value="">Selecione</option>
                </select>
            </div>
            <span class="msg-erro-form" ng-show="formConfiguracao.app.$invalid && formConfiguracao.app.$touched || formConfiguracao.$submitted && formConfiguracao.app.$invalid">Selecione uma aplicação.</span>
        </div>

        <div class="botoes">
            <span class="btn-cancelar" ng-click="novaconfigCtrl.toggleModal.sairSemSalvarConfiguracao('/Configuracoes')"><a href="#"><i class="icon-cross"></i>Cancelar</a></span>
            <input type="submit" class="btn-blue-small" value="Salvar" ng-click="SalvarConfiguracao()">
        </div>
    </form>

    <footer class="main-footer" ng-include src="'angular/Controle/app/scripts/layouts/main-footer/main-footer.layout.html'"></footer>
</div>
