= javascript_include_tag 'bomcobox'
= javascript_include_tag 'totalizando'
= stylesheet_link_tag "inputs_select2"
= javascript_include_tag "funcoes_lodash"
= javascript_include_tag "select2_com_input"
= javascript_include_tag 'gestao_de_estoque/transferencia/transferencia'

= form_for(@transferencia, url: gestao_de_estoque_atualiza_itens_da_transferencias_path, html: { class: "form-vertical" }, role: "form" ) do |f|
	fieldset
		legend
			strong
				= @transferencia.new_record?  ? 'Cadastrar' : 'Editar'
				'  Itens da Transferência

			- if @transferencia.errors[:base].any?
				.row.br-bottom
					.col-sm-12
						.alert.alert-danger role="alert"
							strong
								| Erro!
							=< @transferencia.errors[:base].join(", ")

  div style="margin-top: 10px;"
		table.table.table-bordered.table-hover.table-responsive
      thead
        tr
          th width="80%" Item
          th.text-center#saldo width="10%" Saldo Disponível
          th.text-center width="10%" Qtde
          th width="30%"

      tbody#itens_do_recebimento_de_materiais
        = f.fields_for :itens_da_transferencia, @transferencia.itens_da_transferencia do |item_da_transferencia|
          = render 'item_da_transferencia_fields', f: item_da_transferencia

      tfoot
        tr
          td.text-right colspan="5"
            = link_to_add_association '<span class="glyphicon glyphicon-plus-sign"></span> Adicionar'.html_safe, f, :itens_da_transferencia,
            :"data-association-insertion-node" => "tbody#itens_do_recebimento_de_materiais", :"data-association-insertion-method" => "append",
            class: 'btn btn-primary btn-sm', id: 'btn-add-itens-do-recebimento-de-materiais'

		.form-group
			h6
				' (*) Campos Obrigatórios

	.form-actions
		.row
			.col-sm-12
				= f.submit "Salvar", class: "btn btn-primary"
				= link_to "Cancelar", gestao_de_estoque_transferencia_path, class: "btn btn-default"

- content_for :js do
	javascript:
		$(function(){
		const unidade_orcamentaria = "#{@transferencia.unidade_orcamentaria_id}"
		const almoxarifado = "#{@transferencia.almoxarifado_id}"
		var itens_medidas = "#{@estoques.map do |item| item.unidade_de_medida_id end}"
		itens_medidas = itens_medidas.split(',')
		itens_medidas[0] = itens_medidas[0].replace('[', '')
		itens_medidas[itens_medidas.length - 1] = itens_medidas[itens_medidas.length - 1].replace(']' , '')
		itens_medidas = itens_medidas.map(Number)


		$(document).on('change', '.item', function(event) {
			const item_selecionado = $(this).prop('selectedIndex')
			const item_id = this.value
			const linha = this.closest("tr")

			if(item_id != ""){
				$.getJSON(ROOT_PATH + "gestao_de_estoque/estoques.json?q%5Bid_eq%5D=" + item_id, function(dados) {
					const medida = itens_medidas[item_selecionado - 1]

					function retornaEstoque(estoque){
						return estoque.unidade_orcamentaria_id == unidade_orcamentaria && estoque.almoxarifado_id == almoxarifado && estoque.unidade_de_medida_id == medida
					}
					const estoque = dados.find(retornaEstoque)
					console.log(estoque)
					$(".saldo" , linha).val(estoque.quantidade_total_saldo)
				})
			}else{
				$(".saldo" , linha).text("")
			}
		})

			$('form').on('cocoon:after-insert', function(e, insertedItem) {
				$('select.s2', insertedItem).select2();
				$('select.s2').on('select2:select', function (evt) {
					$(this).focus()
				})
			})
		});