<form id="modal-importar-shape-file" name="formImportarShapeFile" ng-submit="formImportarShapeFile.$valid && vm.criarRota(vm.formImportarShapeFile, vm.fecharModalImportarShapeFile)"
    novalidate form-validation-directive>

    <div class="content-modal-importar-shape-file">
        <div id="modalNotificationOuter" class="notification-modal"></div>

        <p class="txt-default">Utilize os campos abaixo para vincular às colunas correspondentes do arquivo shapefile</p>

        <h3 class="title-info-shape-file">
            <span>Informações gerais</span>
            <hr>
        </h3>

        <fieldset class="field-nome-rota" ng-class="{'invalid': !formImportarShapeFile.nomeRota.customValidation}">
            <label class="label-default" for="nome-rota">Nome da rota</label>
            <input name="nomeRota" id="nome-rota" ng-model="vm.novaRota.Descricao" class="input-default" placeholder="Digite o nome da rota..." required />
            <span class="message">{{formImportarShapeFile.nomeRota.serverMsg || 'Informe uma nome para a rota'}}</span>
        </fieldset>

        <fieldset class="field-apelido-rota" ng-class="{'invalid': !formImportarShapeFile.apelidoRota.customValidation}">
            <label class="label-default" for="apelido-rota">Apelido da rota</label>
            <input  name="apelidoRota" id="apelido-rota" ng-model="vm.novaRota.Apelido" class="input-default" placeholder="Digite o apelido da rota..." required />
            <span class="message">{{formImportarShapeFile.apelidoRota.serverMsg || 'Informe um apelido para a rota'}}</span>
        </fieldset>

        <fieldset class="field-codigo-setor ui-widget custom-combobox" ng-class="{'invalid': !formImportarShapeFile.codigoSetor.customValidation}">
            <label class="label-default" for="codigo-setor">Setor</label>
            <input name="codigoSetor" id="codigo-setor" ng-model="vm.novaRota.CodigoSetor" class="input-autocomplete"
                auto-complete-combo-box data-list="{{vm.listaSetores}}" placeholder="Selecione um setor" label="Descricao"
                sublabel="Apelido" option="Codigo" required />
            <span class="message">{{formImportarShapeFile.codigoSetor.serverMsg || 'Informe o setor'}}</span>
        </fieldset>

        <h3 class="title-info-shape-file">
            <span>Etapa 1 - Itinerário</span>
            <hr>
        </h3>

        <fieldset class="field-sequencia" ng-class="{'invalid': !formImportarShapeFile.sequencia.customValidation}">
            <label class="label-default" for="sequencia">Sequencia</label>
            <span class="select">
                <select name="sequencia" id="sequencia" ng-model="vm.novaRota.Sequencia" ng-options="item.name as item.name for item in vm.dadosArquivo.dbf.fields"
                    required>
                    <option value="" selected>Selecione</option>
                </select>
            </span>
            <span class="message">{{formImportarShapeFile.sequencia.serverMsg || 'Selecione o campo com informações da
                sequencia da rota'}}</span>
        </fieldset>
        <fieldset class="field-sentido" ng-class="{'invalid': !formImportarShapeFile.sentido.customValidation}">
            <label class="label-default" for="sentido">Sentido</label>
            <span class="select">
                <select name="sentido" id="sentido" ng-model="vm.novaRota.Sentido" ng-options="item.name as item.name for item in vm.dadosArquivo.dbf.fields">
                    <option value="" selected>Selecione</option>
                </select>
            </span>
            <span class="message">{{formImportarShapeFile.sentido.serverMsg}}</span>
        </fieldset>

        <fieldset class="field-codigo-sentido-inverso" ng-class="{'invalid': !formImportarShapeFile.codigoSentidoInverso.customValidation}">
            <label class="label-default" for="sentido-inverso">Código sentido inverso</label>
            <span class="select">
                <select name="codigoSentidoInverso" id="sentido-inverso" ng-model="vm.novaRota.SentidoInverso"
                    ng-options="item as item for item in vm.dbfValores.get(vm.novaRota.Sentido)">
                    <option value="" selected>Selecione</option>
                </select>
            </span>
            <span class="message">{{formImportarShapeFile.codigoSentidoInverso.serverMsg}}</span>
        </fieldset>

        <h3 class="title-info-shape-file">
            <span>Etapa 2 - Classificação da rota</span>
            <hr>
        </h3>

        <fieldset class="field-tipo" ng-class="{'invalid': !formImportarShapeFile.tipo.customValidation}">
            <label class="label-default" for="tipo">Tipo</label>
            <span class="select">
                <select name="tipo" id="tipo" ng-model="vm.novaRota.Tipo" ng-options="item.name as item.name for item in vm.dadosArquivo.dbf.fields">
                    <option value="" selected>Selecione</option>
                </select>
            </span>
            <span class="message">{{formImportarShapeFile.tipo.serverMsg || 'Informe um tipo para a rota'}}</span>
        </fieldset>

        <fieldset class="field-codigo-coleta" ng-class="{'invalid': !formImportarShapeFile.codigoColeta.customValidation}">
            <label class="label-default" for="codigo-coleta">Código coleta</label>
            <span class="select">
                <select name="codigoColeta" id="codigo-coleta" ng-model="vm.novaRota.CodigoColeta" ng-options="item as item for item in vm.dbfValores.get(vm.novaRota.Tipo)"
                    ng-change="vm.onChangeRotaTipoCodigo('CodigoColeta')">
                    <option value="" selected>Selecione</option>
                </select>
            </span>
            <span class="message">{{formImportarShapeFile.codigoColeta.serverMsg || 'Informe o código de coleta para a
                rota'}}</span>
        </fieldset>

        <fieldset class="field-codigo-coleta-manual" ng-class="{'invalid': !formImportarShapeFile.codigoColetaManual.customValidation}">
            <label class="label-default" for="codigo-coleta-manual">Código coleta manual</label>
            <span class="select">
                <select name="codigoColetaManual" id="codigo-coleta-manual" ng-model="vm.novaRota.CodigoColetaManual"
                    ng-options="item as item for item in vm.dbfValores.get(vm.novaRota.Tipo)" ng-change="vm.onChangeRotaTipoCodigo('CodigoColetaManual')">
                    <option value="" selected>Selecione</option>
                </select>
            </span>
            <span class="message">{{formImportarShapeFile.codigoColetaManual.serverMsg || 'Informe o código de coleta
                manual para a rota'}}</span>
        </fieldset>

        <fieldset class="field-codigo-deslocamento" ng-class="{'invalid': !formImportarShapeFile.codigoDeslocamento.customValidation}">
            <label class="label-default" for="codigo-deslocamento">Código deslocamento</label>
            <span class="select">
                <select name="codigoDeslocamento" id="codigo-deslocamento" ng-model="vm.novaRota.CodigoDeslocamento"
                    ng-options="item as item for item in vm.dbfValores.get(vm.novaRota.Tipo)" ng-change="vm.onChangeRotaTipoCodigo('CodigoDeslocamento')">
                    <option value="" selected>Selecione</option>
                </select>
            </span>
            <span class="message">{{formImportarShapeFile.codigoDeslocamento.serverMsg || 'Informe o código de
                deslocamento para a rota'}}</span>
        </fieldset>
    </div>

    <footer class="modal-footer">
        <a href="#" class="link-cancel" ng-click="vm.fecharModalImportarShapeFile()">
            <i class="icon-cross"></i> Cancelar
        </a>

        <button class="btn-base btn-size-s btn-color-default btn-action" ng-disabled="formImportarShapeFile.custom_status === 'SENDING'">
            {{formImportarShapeFile.custom_status == 'SENDING' ? 'Importando...' : (formImportarShapeFile.custom_status
            == 'SEND_SUCCESS' ? 'Importado' : 'Importar')}}
        </button>

        <button type="button" class="btn-base btn-size-s btn-style-link btn-anterior" ng-click="vm.retornarCriacaoRota()">Anterior</button>
    </footer>
</form>
