
<style>
    #dragOrdemColunas li {
        height: 60px;
        margin-bottom: 15px;
        list-style: none;
        margin-top: 15px;
        padding-top: 3px;
        padding-left: 12px;
        /*cursor: move;*/
    }

    /*.ui-sortable-handle:hover {
        border: 0.2em dashed #cdcdcd;
        box-shadow: none;
        border-top-left-radius: 0.5em;
        border-top-right-radius: 0.5em;
        border-bottom-left-radius: 0.5em;
        border-bottom-right-radius: 0.5em;
    }*/

    #dragOrdemColunas {
        margin-top: 38px;
        padding-left: 0;
    }

    small {
        margin: 0 0 0.5rem;
        /*padding-left:4.5rem;*/
        font-size: 1.2em;
        font-style: italic;
        color: #666;
    }

    #slc-tipo.disabled {
        background-color: #cdcdcd;
    }
</style>

<div ng-controller="ConfiguracaoColunasController">
    <h3 class="title-section">Customize as colunas como desejar:</h3>
    <div class="config-colunas">
        <div class="col-left">
            <p class="sub-title-section" ">Nome das colunas</p>
            <ul id="dragOrdemColunas">
                <li ng-if="ConfiguracaoColunas.ExibePrevisao" id="colPrevisao" data-orden="Origem" data-value="{{ConfiguracaoColunas.ExibePrevisao}}" order="{{LayoutColunas.Previsao.Index}}">

                    <fieldset class="col-checkbox">
                        <div class="checkbox">
                            <span>
                                <label>Previsões</label>
                            </span>
                        </div>
                    </fieldset>

                    <fieldset class="col-inputs">
                        <input type="text" name="txt-prev-1" id="txt-prev-1" placeholder="{{TipoTemplate === 'URBANO'? 'Chegada 01': 'Chegada'}}" ng-model="ConfiguracaoColunas.DescricaoChegadaPrevistaDois">
                    </fieldset>
                </li>

                <li id="colHorario" style="display:none;" data-orden="Horario" data-value="{{ConfiguracaoColunas.ExibeHorario}}" order="{{LayoutColunas.Horario.Index}}">
                    <fieldset class="col-checkbox">
                        <div class="checkbox">
                            <span>
                                <input type="checkbox" name="check-horario" id="check-horario" ng-model="ConfiguracaoColunas.ExibeHorario" ng-click="CheckOrdenacao(ConfiguracaoColunas.ExibeHorario, {value: 'Horario', text: 'Horário'})">
                                <label for="check-horario">Horário</label>
                            </span>
                        </div>
                    </fieldset>

                    <fieldset class="col-inputs">
                        <input type="text" name="txt-horario" id="txt-horario" placeholder="Horário" ng-model="ConfiguracaoColunas.DescricaoHorario" required>
                    </fieldset>
                </li>

                <li ng-if="ConfiguracaoColunas.ExibeLinha" id="colLinha" data-orden="DescricaoLinha" style="height: 94px" data-value="{{ConfiguracaoColunas.ExibeLinha}}" order="{{LayoutColunas.DescricaoLinha.Index}}">
                    <fieldset class="col-checkbox">
                        <div class="checkbox">
                            <span>
                                <input type="checkbox" name="check-linha" id="check-linha" ng-model="ConfiguracaoColunas.ExibeLinha" ng-click="!ConfiguracaoColunas.ExibeLinha ? ConfiguracaoColunas.ExibeIdentificadorLinha = false : ConfiguracaoColunas.ExibeIdentificadorLinha = false; CheckOrdenacao(ConfiguracaoColunas.ExibeLinha, {value: 'DescricaoLinha', text: 'Linha'});">
                                <label class="space-bottom">Linha</label>
                            </span>
                        </div>
                    </fieldset>

                    <fieldset class="col-inputs" style="margin-bottom:0px;">
                        <input type="text" name="txt-linha" id="txt-linha" placeholder="Linha" ng-model="ConfiguracaoColunas.DescricaoLinha">
                        <div class="checkbox-mini space-bottom">
                            <span>
                                <input type="checkbox" name="check-id-linha" id="check-id-linha" ng-model="ConfiguracaoColunas.ExibeIdentificadorLinha" ng-disabled="!ConfiguracaoColunas.ExibeLinha">
                                <label for="check-id-linha">Identificador da Linha</label>
                            </span>
                        </div>
                    </fieldset>
                </li>

                <li ng-if="ConfiguracaoColunas.ExibeOrigem" id="colOrigem" data-orden="Origem" data-value="{{ConfiguracaoColunas.ExibeOrigem}}" order="{{LayoutColunas.Origem.Index}}">
                    <fieldset class="col-checkbox">
                        <div class="checkbox">
                            <span>
                                <label>Origem</label>
                            </span>
                        </div>
                    </fieldset>

                    <fieldset class="col-inputs">
                        <input type="text" name="txt-origem" id="txt-origem" placeholder="Origem" ng-model="ConfiguracaoColunas.DescricaoOrigem">
                    </fieldset>
                </li>

                <li ng-if="ConfiguracaoColunas.ExibeDestino" id="colDestino" data-orden="Destino" data-value="{{ConfiguracaoColunas.ExibeDestino}}" order="{{LayoutColunas.Destino.Index}}">
                    <fieldset class="col-checkbox">
                        <div class="checkbox">
                            <span>
                                <label>Destino</label>
                            </span>
                        </div>
                    </fieldset>

                    <fieldset class="col-inputs">
                        <input type="text" name="txt-destino" id="txt-destino" placeholder="Destino" ng-model="ConfiguracaoColunas.DescricaoDestino">
                    </fieldset>
                </li>

                <li id="colDistancia" data-orden="DistanciaTerminal" style="display:none;" data-value="{{ConfiguracaoColunas.ExibeDistancia}}" order="{{LayoutColunas.DistanciaTerminal.Index}}">
                    <fieldset class="col-checkbox">
                        <div class="checkbox">
                            <span>
                                <input type="checkbox" name="check-distancia" id="check-distancia" ng-model="ConfiguracaoColunas.ExibeDistancia"
                                       ng-click="CheckOrdenacao(ConfiguracaoColunas.ExibeDistancia, {value: 'DistanciaTerminal', text: 'Distancia'})">
                                <label for="check-distancia">Distância</label>
                            </span>
                        </div>
                    </fieldset>

                    <fieldset class="col-inputs">
                        <input type="text" name="txt-distancia" id="txt-distancia" placeholder="Distância" ng-model="ConfiguracaoColunas.DescricaoDistancia">
                    </fieldset>
                </li>

                <li ng-if="ConfiguracaoColunas.ExibeProximoTerminal" id="colProximoTerminal" data-orden="DescricaoProximoTerminal" data-value="{{ConfiguracaoColunas.ExibeProximoTerminal}}" order="{{LayoutColunas.DescricaoProximoTerminal.Index}}">
                    <fieldset class="col-checkbox">
                        <div class="checkbox">
                            <span>
                                <input type="checkbox" name="check-prox-terminal" id="check-prox-terminal" ng-model="ConfiguracaoColunas.ExibeProximoTerminal"
                                       ng-click="CheckOrdenacao(ConfiguracaoColunas.ExibeProximoTerminal, {value: 'DescricaoProximoTerminal', text: 'Proximo Terminal'})">
                                <label>Sentido</label>
                            </span>
                        </div>
                    </fieldset>

                    <fieldset class="col-inputs">
                        <input type="text" name="txt-prox-terminal" id="txt-prox-terminal" placeholder="Sentido" ng-model="ConfiguracaoColunas.DescricaoProximoTerminal">
                    </fieldset>
                </li>


                <!--<li id="colPlataforma" data-orden="Plataforma" data-value="{{ConfiguracaoColunas.ExibePlataforma}}" order="{{LayoutColunas.Plataforma.Index}}">
        <fieldset class="col-checkbox">
            <div class="checkbox">
                <span>
                    <input type="checkbox" name="check-plataforma" id="check-plataforma" ng-model="ConfiguracaoColunas.ExibePlataforma"
                           ng-click="CheckOrdenacao(ConfiguracaoColunas.ExibePlataforma, {value: 'Plataforma', text: 'Plataforma'})">
                    <label for="check-plataforma">Plataforma</label>
                </span>
            </div>
        </fieldset>

        <fieldset class="col-inputs">
            <input type="text" name="txt-plataforma" id="txt-plataforma" placeholder="Plataforma" ng-model="ConfiguracaoColunas.DescricaoPlataforma">
        </fieldset>
    </li>-->


            </ul>

            <br />
            <p class="sub-title-section" style="display:none;">Ordenação Painel Final</p>

            <div style="width:100%;display:flex;justify-content:center;">
                <button ng-click="entrarModoEdicao()" class="btn-blue-big btn-effect btn-config-modo-edicao">Redimensionar Colunas</button>
            </div>

        </div>


        <div class="col-right">
            <p class="sub-title-section" style="display:none;">Chegada Prevista</p>

            <div class="check-group" style="display:none;">
                <!--<fieldset class="col-checkbox">
                    <div class="checkbox">
                        <span>
                            <input disabled checked type="checkbox" name="check-prev-1" id="check-prev-1" ng-model="ConfiguracaoColunas.ExibeChegadaPrevistaUm">
                            <label for="check-prev-1">Chegada Prevista</label>
                        </span>
                    </div>
                </fieldset>

                <fieldset class="col-inputs">
                    <input type="text" name="txt-prev-1" id="txt-prev-1" placeholder="{{TipoTemplate === 'URBANO'? 'Chegada 01': 'Chegada'}}" ng-model="ConfiguracaoColunas.DescricaoChegadaPrevistaUm">
                </fieldset>-->
                <!--<fieldset class="col-checkbox" ng-show="TipoTemplate == 'URBANO'" >
                    <div class="checkbox">
                        <span>
                            <input type="checkbox" name="check-prev-2" id="check-prev-2" ng-model="ConfiguracaoColunas.ExibeChegadaPrevistaDois">
                            <label for="check-prev-2">Chegada Prevista</label>
                        </span>
                    </div>
                </fieldset>

                <fieldset class="col-inputs" ng-show="TipoTemplate == 'URBANO'">
                    <input type="text" name="txt-prev-2" id="txt-prev-2" placeholder="Chegada 02" ng-model="ConfiguracaoColunas.DescricaoChegadaPrevistaDois">
                </fieldset>-->
                <!--<fieldset class="col-checkbox" ng-show="TipoTemplate == 'URBANO'">
                    <div class="checkbox">
                        <span>
                            <input type="checkbox" name="check-prev-3" id="check-prev-3" ng-model="ConfiguracaoColunas.ExibeChegadaPrevistaTres">
                            <label for="check-prev-3">Chegada Prevista</label>
                        </span>
                    </div>
                </fieldset>

                <fieldset class="col-inputs" ng-show="TipoTemplate == 'URBANO'">
                    <input type="text" name="txt-prev-3" id="txt-prev-3" placeholder="Chegada 03" ng-model="ConfiguracaoColunas.DescricaoChegadaPrevistaTres">
                </fieldset>-->
            </div>

            <p class="sub-title-section">Configuração de Exibição</p>

            <div class="check-group" style="padding-top:0; background:#fff;">
                <fieldset class="col-checkbox">
                    <div class="checkbox">
                        <span>
                            <input type="checkbox" disabled checked name="check-tipo" id="check-tipo">
                            <label for="check-tipo">Tipo</label>
                        </span>
                    </div>
                </fieldset>

                <fieldset class="col-inputs" style="margin-bottom:0;">
                    <span class="select disabled">
                        <select id="slc-tipo" class="disabled" name="slc-tipo" disabled ng-model="ConfiguracaoColunas.DescricaoTipo">
                            <option selected value="Horário">Horário</option>
                        </select>
                    </span>
                </fieldset>

                <fieldset class="col-checkbox">
                    <div class="checkbox">
                        <span>
                            <input type="checkbox" name="check-texto-terminal" id="check-texto-terminal" ng-model="ConfiguracaoColunas.ExibeTextoDentroTerminal">
                            <label for="check-texto-terminal">Texto dentro do Terminal</label>
                        </span>
                    </div>
                </fieldset>

                <fieldset class="col-inputs" style="margin-bottom:0;">
                    <input type="text" name="txt-prev-3" id="txt-prev-3" placeholder="{{ConfiguracaoColunas.ExibeTextoDentroTerminal ? 'Saindo' : ''}}" ng-model="ConfiguracaoColunas.DescricaoTextoDentroTerminal">
                </fieldset>

                <fieldset class="col-checkbox">
                    <div class="checkbox" style="margin-bottom: 1.5em;">
                        <span>
                            <input type="checkbox" name="check-ico-veiculo" id="check-id-veiculo-1" ng-model="ConfiguracaoColunas.ExibirIcone">
                            <label for="check-id-veiculo-1">Ícone do Veículo</label>
                        </span>
                    </div>

                    <div class="checkbox" style="margin-bottom: 1.5em;">
                        <span>
                            <input type="checkbox" name="check-id-veiculo" id="check-id-veiculo-2" ng-model="ConfiguracaoColunas.ExibeIdentificadorVeiculo">
                            <label for="check-id-veiculo-2">Identificador do Veículo</label>
                        </span>
                    </div>
                    <div class="checkbox">
                        <span>
                            <input type="checkbox" name="check-plataforma" id="check-plataforma" ng-model="ConfiguracaoColunas.ExibePlataforma"
                                   ng-click="CheckOrdenacao(ConfiguracaoColunas.ExibePlataforma, {value: 'Plataforma', text: 'Plataforma'})">
                            <label for="check-plataforma">Plataforma</label>
                        </span>
                    </div>
                </fieldset>

                <div id="colOrdenacao">
                    <fieldset class="col-checkbox">
                        <div class="checkbox">
                            <span>
                                <label>Ordenação</label>
                            </span>
                        </div>
                    </fieldset>

                    <fieldset class="col-inputs">
                        <select id="slc-ordena" name="slc-ordena" ng-model="OrdenacaoSelecionada.value" ng-options="l.value as l.text for l in ListaOrdenacao">
                            <option value="">Selecione...</option>
                        </select>
                    </fieldset>
                </div>
            </div>


        </div>
    </div>
</div>
<!--<script>
    $("#dragOrdemColunas").sortable();
    $("#dragOrdemColunas").disableSelection();
</script>-->
