<form id="modal-importar-historico-setor" name="formImportarHistoricoSetor"
      ng-submit="formImportarHistoricoSetor.$valid && vm.importarHistoricoSetor(true)"
      novalidate form-validation-directive>

    <div ng-hide="vm.historicoImportado" class="content-importar-historico-setor">
        <div id="modalNotificationOuter" class="notification-modal"></div>

        <h3 class="title-selecionar-veiculo">
            <span>Selecionar Veículo</span>
            <hr>
        </h3>

        <fieldset class="field-busca-data">
            <label for="pesquisa-data" class="label-default">Pesquisar por data</label>
            <input type="text" class="input-icon-sufix" id="pesquisa-data" ng-model="vm.pesquisaData" date-picker
                   ui-date-mask placeholder="Pesquisar"
                   ng-change="vm.carregarVeiculosSetorPorData(vm.pesquisaData)">
        </fieldset>

        <div class="validation-table"
             ng-class="{'invalid': !formImportarHistoricoSetor.codigoVeiculo.customValidation}">
            <input type="hidden" name="codigoVeiculo" id="codigo-veiculo" class="input-default"
                   ng-model="vm.historicoSetor.codigoVeiculo"
                   required>

            <div class="scroll-table-default">
                <table class="table-importar-historico-setor" toggle-table-row>
                    <thead>
                    <tr>
                        <th></th>
                        <th>Identificador</th>
                        <th>Placa</th>
                        <th>Descrição</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="item in vm.listaVeiculos track by $index" grid-repeat-done>
                        <td>
                                <span class="radio">
                                    <span>
                                        <input type="radio" name="radioCodigoVeiculo" id="codigoVeiculo-{{$index}}"
                                               ng-value="item.Codigo" ng-model="vm.historicoSetor.codigoVeiculo"
                                               ng-change="vm.setarDataLimiteImportacaoSetor(item)" required>
                                        <label for="codigoVeiculo-{{$index}}"></label>
                                    </span>
                                </span>
                        </td>
                        <td>
                            <label for="codigoVeiculo-{{$index}}">{{item.Identificador}}</label>
                        </td>
                        <td>
                            <label for="codigoVeiculo-{{$index}}">{{item.Placa}}</label>
                        </td>
                        <td>
                            <label for="codigoVeiculo-{{$index}}">{{item.Descricao}}</label>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <span class="message message-validation-table">{{formImportarHistoricoSetor.codigoVeiculo.serverMsg || 'Selecione um veículo antes de prosseguir'}}</span>
        </div>

        <h3 ng-show="vm.historicoSetor.codigoVeiculo" class="title-selecionar-veiculo">
            <span>Selecionar período</span>
            <hr>
        </h3>

        <fieldset ng-show="vm.historicoSetor.codigoVeiculo" class="field-selecao-data-hora field-selecao-inicio"
                  ng-class="{'invalid': !formImportarHistoricoSetor.dataInicioHistoricoSetor.customValidation || !formImportarHistoricoSetor.horaInicioHistoricoSetor.customValidation }">
            <label for="data-inicio-historico-setor" class="label-default">Data Inicial:</label>

            <span class="input-group">
                <input type="text" class="input-icon-prefix" id="data-inicio-historico-setor"
                       name="dataInicioHistoricoSetor" ng-model="vm.historicoSetor.dataHoraInicio"
                       date-picker ui-date-mask data-interval="day-start" required>
                <i class="icon-clock"></i>

                <input type="text" class="input-icon-prefix" id="hora-inicio-historico-setor"
                       name="horaInicioHistoricoSetor" ng-model="vm.historicoSetor.horaInicio"
                       clock-picker ui-time-mask="short" data-interval="time-start" required>
            </span>

            <span class="message">{{formImportarHistoricoSetor.dataInicioHistoricoSetor.serverMsg || 'Informe uma data válida'}}</span>
        </fieldset>

        <fieldset ng-show="vm.historicoSetor.codigoVeiculo" class="field-selecao-data-hora field-selecao-fim"
                  ng-class="{'invalid': !formImportarHistoricoSetor.dataFimHistoricoSetor.customValidation || !formImportarHistoricoSetor.horaFimHistoricoSetor.customValidation }">
            <label for="data-fim-historico-setor" class="label-default">Data Final:</label>

            <span class="input-group">
                <input type="text" class="input-icon-prefix" id="data-fim-historico-setor" name="dataFimHistoricoSetor"
                       ng-model="vm.historicoSetor.dataHoraFim"
                       date-picker ui-date-mask data-interval="day-end" required>

                <i class="icon-clock"></i>
                <input type="text" class="input-icon-prefix" id="hora-fim-historico-setor" name="horaFimHistoricoSetor"
                       ng-model="vm.historicoSetor.horaFim"
                       clock-picker ui-time-mask="short" data-interval="time-end" required>
            </span>
            <span class="message">{{formImportarHistoricoSetor.dataFimHistoricoSetor.serverMsg || 'Informe uma data válida'}}</span>
        </fieldset>
    </div>

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

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

    <div ng-show="vm.historicoImportado" class="content-importar-historico-setor-repetido">
        <p class="txt-default">O histórico já está importado, deseja importa-lo novamente?</p>
    </div>

    <footer ng-show="vm.historicoImportado" class="modal-footer">
        <a href="#" class="link-cancel" ng-click="vm.historicoImportado = false">
            <i class="icon-cross"></i> Cancelar
        </a>

        <button type="button" class="btn-base btn-size-s btn-color-default btn-action"
                ng-click="vm.importarHistoricoSetor(false)"
                ng-disabled="formImportarHistoricoSetor.custom_status != null">
            {{formImportarHistoricoSetor.custom_status == 'SENDING' ? 'Importando...' :
            (formImportarHistoricoSetor.custom_status ==
            'SEND_SUCCESS' ? 'Importado' : 'Importar novamente')}}
        </button>
    </footer>
</form>


