<section class="photos-page" lang="pt">
    <div class="container">
          <!-- Título -->
          <div class="titulo row ">
            <div class="d-none d-sm-block col-md-1"></div>

              <h2>Edição dos equipamentos:</h2>

              <div class="search border-right">
                <input type="text" id="search" class="search-text" placeholder="Buscar número de série" (keyup.enter)="search(machineS)" />
                <img src="../../assets/images/qr-code4.png" class="search-btn" alt="Escanear Qr Code" (click)="searchQrCode(machineS)"/>
                <img src="../../assets/images/search4.png" class="search-btn" alt="Buscar" (click)="search(machineS)"/>
              </div>

          </div>

          <div class="row">

            <div routerLink="/registro-equipamentos" class=" btn-list-el">
                <a>CADASTRAR EQUIPAMENTO</a>
            </div>
          </div>

          <div class="row">

            <span class="container search_machine">

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

                <div class=" photos-btn">
                  <img src='{{machineS.imagePath}}' alt="Avatar" class="img"/>
                </div>

                <div class="container text bnt">

                  <form>
                    <div>
                      <h4>Informações Gerais</h4>
                      Número de Série: <input  name="serial_number" type="text" class="form-style" value={{machineS.serial_number}} id="serial_number">
                      Sala: <input name="room" type="text" class="form-style" value={{machineS.room}} id="room">
                      Data da última manutenção:
                        <div>
                          <input name="date_last_maintenance_day" type="text" class="date-style" size="2" value={{machineS.date_last_maintenance.day}} id="date_last_maintenance_day">
                          /
                          <input name="date_last_maintenance_month" type="text" class="date-style" size="2" value={{machineS.date_last_maintenance.month}} id="date_last_maintenance_month">
                          /
                          <input name="date_last_maintenance_year" type="text" class="date-style" size="4" value={{machineS.date_last_maintenance.year}} id="date_last_maintenance_year">
                          <p style="color:red; font-size: small; display:none;" id="date_last_maintenance_error_msg">Data inválida</p>
                        </div>

                      Data da próxima manutenção:
                      <div>
                        <input name="date_next_maintenance_day" type="text" class="date-style" size="2" value={{machineS.date_next_maintenance.day}} id="date_next_maintenance_day">
                        /
                        <input name="date_next_maintenance_month" type="text" class="date-style" size="2" value={{machineS.date_next_maintenance.month}} id="date_next_maintenance_month">
                        /
                        <input name="date_next_maintenance_year" type="text" class="date-style" size="4" value={{machineS.date_next_maintenance.year}} id="date_next_maintenance_year">
                        <p style="color:red; font-size: small; display:none;" id="date_next_maintenance_error_msg">Data inválida</p>
                      </div>

                        Estado: <input name="Status" type="text" class="form-style" value={{machineS.Status}} id="Status">

                        <h4>Endereço</h4>
                        Rua: <input name="address" type="text" class="form-style" value={{machineS.address}} id="address">
                        Número: <input name="address_number" type="text" class="form-style" value={{machineS.address_number}} id="address_number">
                        Bairro: <input name="district" type="text" class="form-style" value={{machineS.district}} id="district">
                        Cidade: <input name="city" type="text" class="form-style" value={{machineS.city}} id="city">
                        Estado: <input name="state" type="text" class="form-style" value={{machineS.state}} id="state">

                        <label class="add-image">
                          Adicionar Imagem
                          <input type="file" name="image" style="display: none;" (change) ="onFileSelect($event, idSearch)"/>
                        </label>

                        <p style="display:none" id="image_selected_{{machineS.id}}"><b>Imagem selecionada:</b> {{machineS.image.name}}</p>

                       <div class="text-center">
													<button class="btn" style="margin-right: 40%; margin-block: 1%" (click)="removeMachine(idSearch)"> Remover máquina </button>
                       <!-- Botão "salvar alteracoes" -->
                        	<button class="btn" style="margin-block: 1%" (click)="searchUpdate(machineS, idSearch)"> Salvar alterações </button>
												</div>
                    </div>

                  </form>

                </div>
            </span>
          </div>


      <!-- Row  -->
      <div class="row justify-content-center">
            <div class="col-sm-5 col-md-5 pt-4" *ngFor="let machine of machines; let i = index">
                <div class="container photos-btn">
                  <img src="assets/images/{{machine.imagePath}}" alt="Avatar" class="img">

								 <h3> {{machine.serial_number}}</h3>
                 <button class="btn"(click)="changeButton(i)">Mais Informações</button>
                  <span class="more_text">

                        <!-- Formulario  -->
                        <form>
                          <div class="form-group">
                            <h4>Informações Gerais</h4>
                            <label for="serial_number">Número de Série: <input [(ngModel)]="machine.serial_number" name="serial_number" type="text" class="form-style" id="serial_number_{{machine.id}}"></label>
                            <label for="room"> Sala: <input [(ngModel)]="machine.room" name="room" type="text" class="form-style" id="room_{{machine.id}}"></label>
                            <label for="date_last_maintenance"> Data da última manutenção:
															<div>
																<input [(ngModel)]="machine.date_last_maintenance.day" name="date_last_maintenance_day" type="text" class="date-style" size="2" id="date_last_maintenance_day_{{machine.id}}">
																/
																<input [(ngModel)]="machine.date_last_maintenance.month" name="date_last_maintenance_month" type="text" class="date-style" size="2" id="date_last_maintenance_month_{{machine.id}}">
																/
																<input [(ngModel)]="machine.date_last_maintenance.year" name="date_last_maintenance_year" type="text" class="date-style" size="4" id="date_last_maintenance_year_{{machine.id}}">
                                <p style="color:red; font-size: small; display:none;" id="date_last_maintenance_error_msg_{{machine.id}}">Data inválida</p>
															</div>
														</label>
                            <label for="date_next_maintenance_{{machine.id}}"> Data da próxima manutenção:
															<div>
																<input [(ngModel)]="machine.date_next_maintenance.day" name="date_next_maintenance_day" type="text" class="date-style" size="2" id="date_next_maintenance_day_{{machine.id}}">
																/
																<input [(ngModel)]="machine.date_next_maintenance.month" name="date_next_maintenance_month" type="text" class="date-style" size="2" id="date_next_maintenance_month_{{machine.id}}">
																/
																<input [(ngModel)]="machine.date_next_maintenance.year" name="date_next_maintenance_year" type="text" class="date-style" size="4" id="date_next_maintenance_year_{{machine.id}}">
                                <p style="color:red; font-size: small; display:none;" id="date_next_maintenance_error_msg_{{machine.id}}">Data inválida</p>
															</div>
														</label>
                            <label for="Status">Estado: <input [(ngModel)]="machine.Status" name="Status" type="text" class="form-style" id="Status_{{machine.id}}"></label>

                            <h4>Endereço</h4>
                            <label for="address">Rua: <input [(ngModel)]="machine.address" name="address" type="text" class="form-style" id="address_{{machine.id}}"></label>
                            <label for="address_number">Número: <input [(ngModel)]="machine.address_number" name="address_number" type="text" class="form-style" id="address_number_{{machine.id}}"></label>
                            <label for="district">Bairro: <input [(ngModel)]="machine.district" name="district" type="text" class="form-style" id="district_{{machine.id}}"></label>
                            <label for="city">Cidade: <input [(ngModel)]="machine.city" name="city" type="text" class="form-style" id="city_{{machine.id}}"></label>
                            <label for="state">Estado: <input [(ngModel)]="machine.state" name="state" type="text" class="form-style" id="state_{{machine.id}}"></label>

														<label class="add-image">
															Adicionar Imagem
															<input type="file" name="image" style="display: none;" (change) ="onFileSelect($event, i)"/>
                          	</label>

                            <p style="display:none" id="image_selected_{{machine.id}}"><b>Imagem selecionada:</b> {{machine.image.name}}</p>

													</div>
                        </form>
												<!-- Botão "Remover máquina" -->
                        <div class="text-center">
													<button class="btn" (click)="removeMachine(i)"> Remover máquina </button>
                        <!-- Botão "salvar alteracoes" -->
                        	<button class="btn" (click)="update(i)"> Salvar alterações </button>
												</div>
                  </span>
                </div>
            </div>

        </div>
    </div>
  </section>