.widget
  button.btn.btn-default.btn-sm data-toggle="modal" data-target="#impactoMedidaModal"
    i.icone-lista
    span Novo Impacto/Medida
.widget
  header
    h5
      | Lista de 
      span.fw-semi-bold Meio Ambiente
  .widget-body
    - if @etp.impactos_ambientais_do_etp.blank?
      h6 Nenhum registro encontrado.
    - else
      .table-responsive
        table.table.table-hover
          thead
            tr
              th Impacto Ambiental
              th Medida Mitigadora
              th width="150"
          tbody
            - @etp.impactos_ambientais_do_etp.each_with_index do |impacto, index|
              - medida = @etp.medidas_mitigatoras_do_etp[index]
              tr id="impactoMedidaRow_#{index}"
                td = impacto.impacto
                td = @etp.medidas_mitigatoras_do_etp[index].try(:medida)
                td
                - if impacto.present? && medida.present?
                  td
                    = link_to 'Editar', edit_impacto_medida_licitacao_etp_path(@etp, impacto_id: impacto.id, medida_id: medida.id), class: 'btn btn-primary btn-sm btn-edit', data: { url: edit_impacto_medida_licitacao_etp_path(@etp, impacto_id: impacto.id, medida_id: medida.id) }
                    = link_to 'Excluir', licitacao_etp_destroy_impacto_medida_path(@etp, impacto_id: @impacto.id, medida_id: @medida.id), method: :delete, class: 'btn btn-primary btn-sm btn-danger btn-delete', data: { confirm: 'Tem certeza?' }
.modal.fade id="impactoMedidaModal" tabindex="-1" role="dialog" aria-labelledby="impactoMedidaModalLabel" data-keyboard="false" data-backdrop="false"
  .modal-dialog
    .modal-content
      .modal-header
        h5.modal-title#impactoMedidaModalLabel Cadastrar Impacto e Medida
        button.close type="button" data-dismiss="modal" aria-label="Close"
          span aria-hidden="true" ×
      .modal-body
        = form_with(url: impactos_medidas_licitacao_etp_path(@etp), method: :post, local: false, html: { id: "impactoMedidaForm" }) do |f|
          .form-group
            = f.label :impacto, "Impactos Ambientais"
            = f.text_area :impacto, class: "form-control", rows: 3, required: true
          .form-group
            = f.label :medida, "Medidas Mitigadoras"
            = f.text_area :medida, class: "form-control", rows: 3, required: true
          button.btn.btn-secondary type="button" data-dismiss="modal" Fechar
          = f.submit "Salvar", class: "btn btn-primary btn_salvar"
.modal.fade id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" data-keyboard="false" data-backdrop="false"
  .modal-dialog
    .modal-content
      .modal-header
        h5.modal-title#editModalLabel Editar Impacto e Medida
        button.close type="button" data-dismiss="modal" aria-label="Close"
          span aria-hidden="true" ×
      .modal-body
        = render 'edit_impacto_modal'
javascript:
  $(document).ready(function() {
    $('.btn_salvar').on('click', function(e) {
      var impacto = $('#impactoMedidaForm textarea[name="impacto"]').val().trim();
      var medida = $('#impactoMedidaForm textarea[name="medida"]').val().trim();
      var hasError = false;
      
      $('#impactoMedidaForm .form-group').removeClass('has-error');
      $('#impactoMedidaForm .error-message').remove();
      
      if (impacto === '') {
        hasError = true;
        var impactoError = '<span class="error-message text-danger">Este campo é obrigatório.</span>';
        $('#impactoMedidaForm textarea[name="impacto"]').parent().addClass('has-error').append(impactoError);
      }
      
      if (medida === '') {
        hasError = true;
        var medidaError = '<span class="error-message text-danger">Este campo é obrigatório.</span>';
        $('#impactoMedidaForm textarea[name="medida"]').parent().addClass('has-error').append(medidaError);
      }
    
      if (hasError) {
        e.preventDefault();
        return false;
      }
      $('#impactoMedidaModal').modal('hide');
      $('#editModal').modal('hide');
    });
    $('.btn-edit').on('click', function(e) {
      e.preventDefault();
      var url = $(this).data('url');
      $.get(url, function(data) {
        $('#editModal .modal-body').html(data);
        $('#editModal').modal('show');
      });
    });
  });