<!--  This file is part of the project Pinsis-Portal.
 Copyright (C),2018, by C3SL(Centro de Computação Científica e
 Software Live)

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.

 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.
 -->


 <section class="register-page" lang="pt">
	<div class="row">

		<div class="d-none d-sm-block col-md-1"></div>
		<div class="mx-auto col-12 col-md-6 blank-square">

                <!-- Formulario  -->
                <form #form="ngForm" (ngSubmit)="onSubmit(form.value)">

                    <h2>Dados da máquina</h2>

                    <!-- Número de série e Sala -->
                    <div class="row">

                        <div class="text-input">
                            Número de série:
                            <div><input type="text" name="serial_number" [(ngModel)]="machineData.serial_number"></div>
                          </div>

                          <div class="text-input">
                            Sala:
                            <div><input type="text" name="room" [(ngModel)]="machineData.room"></div>
                          </div>

                    </div>

                    <!-- Data da última manutenção e próxima manutenção -->
                    <div class="row">
                      <div class="text-input">
                        Data da última manutenção:
                        <div>
													<input type="text" name="date_last_maintenance_day" size="2" [(ngModel)]="machineData.date_last_maintenance.day">
													/
													<input type="text" name="date_last_maintenance_month" size="2" [(ngModel)]="machineData.date_last_maintenance.month">
													/
													<input type="text" name="date_last_maintenance_year" size="4" [(ngModel)]="machineData.date_last_maintenance.year">
												</div>
                      </div>
                      <div class="text-input">
                        Data da próxima manutenção:
                        <div>
													<input type="text" name="date_next_maintenance_day" size="2" [(ngModel)]="machineData.date_next_maintenance.day">
													/
													<input type="text" name="date_next_maintenance_month" size="2" [(ngModel)]="machineData.date_next_maintenance.month">
													/
													<input type="text" name="date_next_maintenance_year" size="4" [(ngModel)]="machineData.date_next_maintenance.year">
												</div>
                      </div>

                    </div>

                    <!-- Estado da máquina -->
                   <div class="row">
                      <div class="text-input">
                          Estado da máquina:
                          <div><input type="text" name="Status" [(ngModel)]="machineData.Status"></div>
                      </div>
                    </div>


                   <h2>Endereço</h2>

                   <!-- Rua e Número -->
                   <div class="row">
                      <div class="text-input">
                          Rua:
                          <div><input type="text" name="address" [(ngModel)]="machineData.address"></div>
                      </div>
                      <div class="text-input">
                          Número:
                          <div><input type="text" name="address_number" [(ngModel)]="machineData.address_number"></div>
                      </div>
                    </div>


                    <!-- Bairro e cidade -->
                   <div class="row">
                      <div class="text-input">
                          Bairro:
                          <div><input type="text" name="district" [(ngModel)]="machineData.district"></div>
                      </div>
                      <div class="text-input">
                          Cidade:
                          <div><input type="text" name="city" [(ngModel)]="machineData.city"></div>
                      </div>
                   </div>

                   <!-- Estado -->
                   <div class="row">
                      <div class="text-input">
                          Estado:
                          <div><input type="text" name="state" [(ngModel)]="machineData.state"></div>
                      </div>
                    </div>


                    <!-- Botão de QR code -->
                    <div class="row">
                      <label class="options">
                        <div (click)="scanQRCode()">Escanear QR code</div>
                      </label>

                      <!-- Botão upload imagem -->
                      <label class="options">
                          Adicionar Imagem <input type="file" name="image" (change)="onFileSelect($event)" style="display: none;">
                      </label>

											<label class="options">
                        <div (click)="getLocation()">Geolocalização</div>
                      </label>

                      <!--
                      <div class="input-group custom-file">
                        <input type="file" name="image" class="options" (change)="onFileSelect($event)">
                      </div>
                    </div>-->

                    <!-- Botão submit  -->
                      <button type="submit" class="submit-button">Confirmar</button>
    							</div>
                </form>


        <div class="d-none d-sm-block col-md-1"></div>
    </div>
  </div>
</section>