<div class="content cadastro">
  <h1>Comunicado de Viagem</h1>
  <md-content layout-padding>
    <div>
      <form name="formViagem" ng-submit="gravarViagem()">
        <!-- NOME -->
        <div layout-gt-sm="row">
          <md-input-container class="md-block" flex-gt-sm>
            <label>Solicitante</label>
            <input name="nome" required md-no-asterisk ng-model="viagem.nome" md-maxlength="50">
            <div ng-messages="formViagem.nome.$error">
              <div ng-message="required">Campo obrigatório.</div>
              <div ng-message="md-maxlength">Este campo pode conter no máximo 50 caracteres.</div>
            </div>
          </md-input-container>
        </div>
        <!-- EMAIL -->
        <div layout-gt-sm="row">
          <md-input-container class="md-block" md-flex="40">
            <label>E-mail</label>
            <input required type="email" name="email" ng-model="viagem.email" minlength="10" maxlength="100"
              ng-pattern="/^.+@.+\..+$/" />
            <div ng-messages="formViagem.email.$error" role="alert">
              <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
                Seu e-mail precisa ter entre 10 e 100 caracteres e seguir o padrão de email.
              </div>
            </div>
          </md-input-container>
          <div flex="5" hide-xs hide-sm>
            <!-- Spacer -->
          </div>
          <md-input-container class="md-block" flex-gt-xs md-flex="15">
            <label>Telefone 1</label>
            <input name="telefone1" ng-model="viagem.telefone1" ui-br-phone-number required />
            <div class="hint" ng-show="showHints">(##) #####-####</div>
            <div ng-messages="formViagem.telefone1.$error">
              <div ng-message="required">Campo obrigatório.</div>
            </div>
          </md-input-container>
          <div flex="5" hide-xs hide-sm>
            <!-- Spacer -->
          </div>
          <md-input-container class="md-block" flex-gt-xs md-flex="15">
            <label>Telefone 2</label>
            <input name="telefone2" ng-model="viagem.telefone2" ui-br-phone-number />
            <div class="hint" ng-show="showHints">(##) #####-####</div>
          </md-input-container>
        </div>
        <div layout-gt-sm="row">
          <div flex layout="row">
            <md-input-container>
              <!-- class="md-block" flex-gt-sm-->
              <label>Saída</label>
              <md-datepicker ng-model="viagem.dataSaida" name="dtInicio" md-min-date="dataAtual" required>
              </md-datepicker>
              <div ng-messages="formViagem.dtInicio.$error">
                <div ng-message="required">Campo obrigatório.</div>
              </div>
            </md-input-container>
            <div>
              <mdp-time-picker ng-model="viagem.dataSaida" required></mdp-time-picker>
            </div>
          </div>
          <div flex="5" hide-xs hide-sm>
            <!-- Spacer -->
          </div>
          <div flex layout="row">
            <md-input-container />
            <label>Retorno</label>
            <md-datepicker ng-model="viagem.dataRetorno" name="dtFim" md-min-date="viagem.dataSaida" required>
            </md-datepicker>
            <div ng-messages="formViagem.dtFim.$error">
              <div ng-message="required">Campo obrigatório.</div>
            </div>
            </md-input-container>
            <div>
              <mdp-time-picker ng-model="viagem.dataRetorno"></mdp-time-picker>
            </div>
          </div>
        </div>
        <!-- CHAVES DA RESIDENCIA -->
        <div flex layout-gt-sm='row' layout-padding layout-align="start center" ng-if="chaveResidencia">
          Somente central de monitoramento ficará com as chaves da residência? -{{chaveResidencia}}
          <md-radio-group ng-model="viagem.chaves" layout="row">
            <md-radio-button value="S" class="md-primary"> SIM </md-radio-button>
            <md-radio-button value="N" class="md-primary"> NÃO </md-radio-button>
          </md-radio-group>
        </div>
        <md-card ng-if="viagem.chaves=='N'">
          <md-card-title>
            <md-card-title-text>
              <span class="md-headline">Dados da chave</span>
              <span class="md-subhead">Informe os dados das pessoas que ficarão com chave.</span>
            </md-card-title-text>
          </md-card-title>
          <!-- CARD CONTENT CHAVES -->
          <md-card-content>
            <div layout-gt-sm="row">
              <md-input-container class="md-block no-margin" flex-gt-sm>
                <label>Nome 1</label>
                <input name="nomeChave1" required md-no-asterisk ng-model="viagem.arrChaves[0].nome" md-maxlength="50">
                <div ng-messages="formViagem.nomeChave1.$error">
                  <div ng-message="required">Campo obrigatório.</div>
                  <div ng-message="md-maxlength">Este campo pode conter no máximo 50 caracteres.</div>
                </div>
              </md-input-container>
              <div flex="5" hide-xs hide-sm>
                <!-- Spacer -->
              </div>
              <md-input-container class="md-block no-margin" flex-gt-sm>
                <label>Endereço 1</label>
                <input name="enderecoChave1" required md-no-asterisk ng-model="viagem.arrChaves[0].endereco"
                  md-maxlength="150">
                <div ng-messages="formViagem.enderecoChave1.$error">
                  <div ng-message="required">Campo obrigatório.</div>
                  <div ng-message="md-maxlength">Este campo pode conter no máximo 150 caracteres.</div>
                </div>
              </md-input-container>
            </div>
            <div layout-gt-sm="row">
              <md-input-container class="md-block no-margin" flex-gt-sm>
                <label>Nome 2</label>
                <input name="nomeChave2" md-no-asterisk ng-model="viagem.arrChaves[1].nome" md-maxlength="50">
                <div ng-messages="formViagem.nomeChave2.$error">
                  <div ng-message="md-maxlength">Este campo pode conter no máximo 50 caracteres.</div>
                </div>
              </md-input-container>
              <div flex="5" hide-xs hide-sm>
                <!-- Spacer -->
              </div>
              <md-input-container class="md-block no-margin" flex-gt-sm>
                <label>Endereço 2</label>
                <input name="enderecoChave2" md-no-asterisk ng-model="viagem.arrChaves[1].endereco" md-maxlength="150"
                  ng-required="viagem.arrChaves[1].nome!=''">
                <div ng-messages="formViagem.enderecoChave2.$error">
                  <div ng-message="required">Campo obrigatório.</div>
                  <div ng-message="md-maxlength">Este campo pode conter no máximo 150 caracteres.</div>
                </div>
              </md-input-container>
            </div>
          </md-card-content>
        </md-card>

        <!-- AUTORIZAÇÃO -->
        <div flex layout-gt-sm=='row' layout-padding layout-align="start center">
          Alguém está autorizado a entrar em sua residência?
          <md-radio-group ng-model="viagem.autorizacao" layout="row">
            <md-radio-button value="S" class="md-primary"> SIM </md-radio-button>
            <md-radio-button value="N" class="md-primary"> NÃO </md-radio-button>
          </md-radio-group>
        </div>
        <md-card ng-if="viagem.autorizacao == 'S'">
          <md-card-title>
            <md-card-title-text>
              <span class="md-headline">Dados dos autorizados</span>
              <span class="md-subhead">Informe os dados das pessoas autorizadas.</span>
            </md-card-title-text>
          </md-card-title>
          <!-- CARD CONTENT AUTORIZADOS -->
          <md-card-content>
            <div layout-gt-sm="row">
              <md-input-container class="md-block no-margin" flex-gt-sm>
                <label>Nome 1</label>
                <input name="nomeAutorizado1" md-no-asterisk required ng-model="viagem.arrAutorizados[0].nome" required
                  md-maxlength="50">
                <div ng-messages="formViagem.nomeAutorizado1.$error">
                  <div ng-message="required">Campo obrigatório.</div>
                  <div ng-message="md-maxlength">Este campo pode conter no máximo 50 caracteres.</div>
                </div>
              </md-input-container>
              <div flex="5" hide-xs hide-sm>
                <!-- Spacer -->
              </div>
              <md-input-container class="md-block no-margin" flex-gt-xs>
                <label>Telefone 1</label>
                <input name="telefoneAutoridade1" ng-model="viagem.arrAutorizados[0].telefone1" required
                  ui-br-phone-number />
                <div class="hint" ng-show="showHints">(##) #####-####</div>
              </md-input-container>
              <div flex="5" hide-xs hide-sm>
                <!-- Spacer -->
              </div>
              <md-input-container class="md-block no-margin" flex-gt-xs>
                <label>Telefone 2</label>
                <input name="telefone2Autoridade1" ng-model="viagem.arrAutorizados[0].telefone2" ui-br-phone-number />
                <div class="hint" ng-show="showHints">(##) #####-####</div>
              </md-input-container>
            </div>
            <div>
              <md-input-container class="md-block no-margin">
                <label>Observacoes 1</label>
                <textarea ng-model="viagem.arrAutorizados[0].obs" name="obsViagem1" md-maxlength="250"
                  rows="2"></textarea>
              </md-input-container>
            </div>
            <div layout-gt-sm="row">
              <md-input-container class="md-block no-margin" flex-gt-sm>
                <label>Nome 2</label>
                <input name="nomeAutorizado1" md-no-asterisk ng-model="viagem.arrAutorizados[1].nome" md-maxlength="50">
                <div ng-messages="formViagem.nomeAutorizado1.$error">
                  <div ng-message="md-maxlength">Este campo pode conter no máximo 50 caracteres.</div>
                </div>
              </md-input-container>
              <div flex="5" hide-xs hide-sm>
                <!-- Spacer -->
              </div>
              <md-input-container class="md-block no-margin" flex-gt-xs>
                <label>Telefone 1</label>
                <input name="telefoneAutoridade1" ng-model="viagem.arrAutorizados[1].telefone1" ui-br-phone-number
                  ng-required="viagem.arrAutorizados[1].nome != ''" />
                <div class="hint" ng-show="showHints">(##) #####-####</div>
              </md-input-container>
              <div flex="5" hide-xs hide-sm>
                <!-- Spacer -->
              </div>
              <md-input-container class="md-block no-margin" flex-gt-xs>
                <label>Telefone 2</label>
                <input name="telefone2Autoridade1" ng-model="viagem.arrAutorizados[1].telefone2" ui-br-phone-number />
                <div class="hint" ng-show="showHints">(##) #####-####</div>
              </md-input-container>
            </div>
            <div>
              <md-input-container class="md-block no-margin">
                <label>Observacoes 2</label>
                <textarea ng-model="viagem.arrAutorizados[1].obs" name="obsViagem1" md-maxlength="250"
                  rows="2"></textarea>
              </md-input-container>
            </div>
          </md-card-content>
        </md-card>

        <div flex layout-gt-sm='row' layout-padding layout-align="start center">
          Ficará veículo na residência sob cuidados da empresa?
          <md-radio-group ng-model="viagem.veiculoCuidado" layout="row">
            <md-radio-button value="S" class="md-primary"> SIM </md-radio-button>
            <md-radio-button value="N" class="md-primary"> NÃO </md-radio-button>
          </md-radio-group>
        </div>

        <div ng-if="viagem.veiculoCuidado == 'S'">


          <md-card layout-padding ng-repeat="veic in veiculos">

            <div layout-gt-sm="row">
              <md-input-container class="md-block no-margin" flex-gt-sm>
                <label>Placa</label>
                <input name="veiculoPlaca" ng-required="viagem.veiculoCuidado == 'S'" ng-model="veic.placa"
                  md-maxlength="10">

                <div ng-messages="formViagem.placaVeiculo.$error">
                  <div ng-message="md-maxlength">Este campo pode conter no máximo 10 caracteres.</div>
                </div>
              </md-input-container>
            </div>

            <div flex layout-gt-sm='row' layout-padding layout-align="start center">
              Ficará algum responsável com a chave do veículo?
              <md-radio-group ng-model="veic.responsavelVeiculo" layout="row">
                <md-radio-button value="S" class="md-primary"> SIM </md-radio-button>
                <md-radio-button value="N" class="md-primary"> NÃO </md-radio-button>
              </md-radio-group>
            </div>
            <!--  -->
            <md-card ng-if="veic.responsavelVeiculo == 'S'">
              <md-card-title>
                <md-card-title-text>
                  <span class="md-headline">Dados do Autorizado</span>
                  <span class="md-subhead">Informe os dados da pessoa autorizada.</span>
                </md-card-title-text>
              </md-card-title>
              <!-- CARD CONTENT AUTORIZADO -->
              <md-card-content>

                <div layout-gt-sm="row">

                  <md-input-container class="md-block no-margin" flex-gt-sm>
                    <label>Nome</label>
                    <input name="veiculoNomeAutorizado" md-no-asterisk ng-required="veic.responsavelVeiculo == 'S'"
                      ng-model="veic.autorizado.nome" required md-maxlength="50">
                    <div ng-messages="formViagem.veiculoNomeAutorizado.$error">
                      <div ng-message="required">Campo obrigatório.</div>
                      <div ng-message="md-maxlength">Este campo pode conter no máximo 50 caracteres.</div>
                    </div>
                  </md-input-container>
                  <div flex="5" hide-xs hide-sm>
                    <!-- Spacer -->
                  </div>

                  <md-input-container class="md-block no-margin" flex-gt-xs>
                    <label>Telefone 1</label>
                    <input name="veiculoTelefoneAutorizado" ng-model="veic.autorizado.telefone1"
                      ng-required="veic.responsavelVeiculo == 'S'" ui-br-phone-number />
                    <div class="hint" ng-show="showHints">(##) #####-####</div>
                  </md-input-container>
                  <div flex="5" hide-xs hide-sm>
                    <!-- Spacer -->
                  </div>

                  <md-input-container class="md-block no-margin" flex-gt-xs>
                    <label>Telefone 2</label>
                    <input name="telefone2Autoridade1" ng-model="veic.autorizado.telefone2" ui-br-phone-number />
                    <div class="hint" ng-show="showHints">(##) #####-####</div>
                  </md-input-container>
                </div>
                <div>
                  <md-input-container class="md-block no-margin">
                    <label>Observacoes</label>
                    <textarea ng-model="veic.autorizado.obs" name="obs" md-maxlength="250" rows="2"></textarea>
                  </md-input-container>
                </div>
              </md-card-content>
            </md-card>
            <!--  -->

            <div flex layout-gt-sm='row' layout-padding layout-align="start center">
              Alguém esta autorizado a utilizar o seu veículo?
              <md-radio-group ng-model="veic.utilizadorVeiculo" layout="row">
                <md-radio-button value="S" class="md-primary"> SIM </md-radio-button>
                <md-radio-button value="N" class="md-primary"> NÃO </md-radio-button>
              </md-radio-group>
            </div>

            <md-card ng-if="veic.utilizadorVeiculo == 'S'">
              <md-card-title>
                <md-card-title-text>
                  <span class="md-headline">Dados do utilizador</span>
                  <span class="md-subhead">Informe os dados da pessoa autorizada.</span>
                </md-card-title-text>
              </md-card-title>
              <!-- CARD CONTENT AUTORIZADOS -->
              <md-card-content>
                <md-button ng-click="copiarInformacoes(veic)">Copiar Informações do Formulário Acima.</md-button>

                <div layout-gt-sm="row">

                  <md-input-container class="md-block no-margin" flex-gt-sm>
                    <label>Nome</label>
                    <input name="veiculoNomeUtilizador" md-no-asterisk ng-required="veic.utilizadorVeiculo == 'S'"
                      ng-model="veic.utilizador.nome" required md-maxlength="50">
                    <div ng-messages="formViagem.veiculoNomeAutorizado.$error">
                      <div ng-message="required">Campo obrigatório.</div>
                      <div ng-message="md-maxlength">Este campo pode conter no máximo 50 caracteres.</div>
                    </div>
                  </md-input-container>
                  <div flex="5" hide-xs hide-sm>
                    <!-- Spacer -->
                  </div>

                  <md-input-container class="md-block no-margin" flex-gt-xs>
                    <label>Telefone 1</label>
                    <input name="veiculoTelefoneUtilizado" ng-model="veic.utilizador.telefone1"
                      ng-required="veic.utilizadorVeiculo == 'S'" ui-br-phone-number />
                    <div class="hint" ng-show="showHints">(##) #####-####</div>
                  </md-input-container>
                  <div flex="5" hide-xs hide-sm>
                    <!-- Spacer -->
                  </div>
                  <md-input-container class="md-block no-margin" flex-gt-xs>
                    <label>Telefone 2</label>
                    <input name="telefone2Utilizador" ng-model="veic.utilizador.telefone2" ui-br-phone-number />
                    <div class="hint" ng-show="showHints">(##) #####-####</div>
                  </md-input-container>
                </div>
                <div>
                  <md-input-container class="md-block no-margin">
                    <label>Observacoes</label>
                    <textarea ng-model="veic.utilizador.obs" name="obs" md-maxlength="250" rows="2"></textarea>
                  </md-input-container>
                </div>
              </md-card-content>
            </md-card>

          </md-card>

          <div>
            <md-button class="md-primary md-raised" ng-click="addVeiculo()">
              Adicionar
            </md-button>
          </div>
        </div>


        <md-input-container class="md-block">
          <label>Recomendações</label>
          <textarea ng-model="viagem.recomendacao" name="recomendacao" required md-maxlength="250" rows="5"></textarea>
          <div ng-messages="formViagem.recomendacao.$error">
            <div ng-message="required">Campo obrigatório.</div>
            <div ng-message="md-maxlength">Este campo pode conter no máximo 250 caracteres.</div>
          </div>
        </md-input-container>
        <div>
          <md-button type="submit" class="md-primary md-raised" ng-disabled="btnIsDisabled">
            {{ btnIsDisabled ? "Processando..." : "Confirmar"}}</md-button>
        </div>
      </form>
    </div>
  </md-content>
</div>