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

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

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

        <div class="field-busca-veiculo">
            <label for="pesquisa-veiculo" class="label-default">Pesquisar por data</label>
            <input type="search" class="input-icon-sufix" id="pesquisa-veiculo" ng-model="searchSetor"
                   placeholder="Digite o veículo desejado...">
            <i class="icon-search"></i>
        </div>

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

            <div class="scroll-table-default">
                <table class="table-importar-historico-veiculo" 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 | filter: searchSetor 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.historicoVeiculo.codigoVeiculo"
                                               ng-change="vm.setarDataLimiteImportacaoVeiculo(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">{{formImportarHistoricoVeiculo.codigoVeiculo.serverMsg || 'Selecione um veículo antes de prosseguir'}}</span>
        </div>

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

        <fieldset ng-show="vm.historicoVeiculo.codigoVeiculo" class="field-selecao-data-hora field-selecao-inicio"
                  ng-class="{'invalid': !formImportarHistoricoVeiculo.dataInicioHistoricoVeiculo.customValidation || !formImportarHistoricoVeiculo.horaInicioHistoricoVeiculo.customValidation }">
            <label for="data-inicio-historico-veiculo" class="label-default">Data Inicial:</label>

            <span class="input-group">
                <input type="text" class="input-icon-prefix" id="data-inicio-historico-veiculo"
                       name="dataInicioHistoricoVeiculo" ng-model="vm.historicoVeiculo.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-veiculo"
                       name="horaInicioHistoricoVeiculo" ng-model="vm.historicoVeiculo.horaInicio"
                       clock-picker ui-time-mask="short" data-interval="time-start" required>
            </span>

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

        <fieldset ng-show="vm.historicoVeiculo.codigoVeiculo" class="field-selecao-data-hora field-selecao-fim"
                  ng-class="{'invalid': !formImportarHistoricoVeiculo.dataFimHistoricoVeiculo.customValidation || !formImportarHistoricoVeiculo.horaFimHistoricoVeiculo.customValidation }">
            <label for="data-fim-historico-veiculo" class="label-default">Data Final:</label>

            <span class="input-group">
                <input type="text" class="input-icon-prefix" id="data-fim-historico-veiculo"
                       name="dataFimHistoricoVeiculo" ng-model="vm.historicoVeiculo.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-veiculo"
                       name="horaFimHistoricoVeiculo" ng-model="vm.historicoVeiculo.horaFim"
                       clock-picker ui-time-mask="short" data-interval="time-end" required>
            </span>
            <span class="message">{{formImportarHistoricoVeiculo.dataFimHistoricoVeiculo.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.fecharModalImportarHistoricoVeiculo()">
            <i class="icon-cross"></i> Cancelar
        </a>

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

    <div ng-show="vm.historicoImportado" class="content-importar-historico-veiculo-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.importarHistoricoVeiculo(false)"
                ng-disabled="formImportarHistoricoVeiculo.custom_status != null">
            {{formImportarHistoricoVeiculo.custom_status == 'SENDING' ? 'Importando...' :
            (formImportarHistoricoVeiculo.custom_status ==
            'SEND_SUCCESS' ? 'Importado' : 'Importar novamente')}}
        </button>
    </footer>
</form>

