@extends('../layouts.app')
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/select2/dist/css/select2.min.css">
<link href="https://cdn.quilljs.com/2.0.0-dev.2/quill.snow.css" rel="stylesheet">
@section('title', 'Editar Produto')
@section('content')
@include('../layouts.headers.cards_prod')
@include('../layouts.footers.auth')

<div class="container-fluid mt--7">
	<div class="row">
		@if (Session::has('componente-sucesso'))
		<div class="alert alert-success alert-dismissible fade show col-md-12" role="alert">
			<span class="alert-icon"><i class="ni ni-notification-70"></i></span>
			<span class="alert-text"><strong>{{ Session::get('componente-sucesso') }}</strong>
				<button type="button" class="close" data-dismiss="alert" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
		</div>
		@endif
		@if (Session::has('componente-removido'))
		<div class="alert alert-danger alert-dismissible fade show col-md-12" role="alert">
			<span class="alert-icon"><i class="ni ni-notification-70"></i></span>
			<span class="alert-text"><strong>{{ Session::get('componente-removido') }}</strong>
				<button type="button" class="close" data-dismiss="alert" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
		</div>
		@endif
		<div class="col-xl-12 order-xl-1">
			<div class="card bg-secondary shadow">
				<div class="card-header bg-white border-0">
					<div class="row align-items-center">
						<div class="col-8">
							<h3 class="mb-0">{{ __('Cadastro de Produto') }}</h3>
						</div>
						<div class="col-4 text-right">
							<a href="{{route('produtos')}}" class="btn btn-sm btn-primary">{{ __('Voltar a Lista') }}</a>
						</div>
					</div>
				</div>
				<div class="nav-wrapper">
					<ul class="nav nav-pills nav-fill flex-column flex-md-row px-3" id="tabs-icons-text" role="tablist">
						<li class="nav-item">
							<a class="nav-link active" id="tab-1" data-toggle="tab" href="#descricao-simples" role="tab" aria-controls="simples" aria-selected="true"><strong>Descrição</strong></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="tab-2" data-toggle="tab" href="#categoria" role="tab" aria-controls="tecnica" aria-selected="false"><strong>Categoria</strong></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="tab-3" data-toggle="tab" href="#preco" role="tab" aria-controls="tecnica" aria-selected="false"><strong>Preço</strong></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="tab-5" data-toggle="tab" href="#quantidade" role="tab" aria-controls="tecnica" aria-selected="false"><strong>Quantidade</strong></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="tab-5" data-toggle="tab" href="#fiscal" role="tab" aria-controls="tecnica" aria-selected="false"><strong>Fiscal</strong></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="tab-6" data-toggle="tab" href="#descricao-tecnica" role="tab" aria-controls="tecnica" aria-selected="false"><strong>Dados Técnicos</strong></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="tab-8" data-toggle="tab" href="#relacionado" role="tab" aria-controls="tecnica" aria-selected="false"><strong>Relacionados</strong></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" id="tab-9" data-toggle="tab" href="#composto" role="tab" aria-controls="tecnica" aria-selected="false"><strong>Composição</strong></a>
						</li>
					</ul>
				</div>
				<form method="post" enctype="multipart/form-data" action="{{route('produtos.atualizar',$id)}}" id="formulario_cadastrar">
					<div class="tab-content border-top-0 " id="myTabContent">
						<!-- Passando o Token -->
						{{csrf_field()}}
						<input type="hidden" name="_method" value="put">
						<div class="card-body tab-pane fade show active" id="descricao-simples" role="tabpanel">
							<h6 class="heading-small text-muted mb-4">Descrição</h6>
							<hr class="my-4">
							<div class="row">
								<div class="col-md-4 col-lg-4 col-sm-12">
									<div class="form-group">
										<label>Nome Produto</label>
										<input type="text" class="form-control nome_produto" name="nome_produto" id="nome" value="{{$d->nome_produto}}" autofocus="on">
									</div>
								</div>
								<div class="col-md-4 col-lg-4 col-sm-12">
									<div class="form-group">
										<label>Nome Comercial Produto</label>
										<input type="text" class="form-control " name="nome_comercial_produto" id="nome_comercial" value="{{$d->nome_comercial_produto}}" autofocus="on">
									</div>
								</div>
								<div class="col-md-4 col-lg-4 col-sm-12 text-center">
									<label>Status do Produto</label>
									<div class="row">
										<div class="col-6">
											<div class="custom-control custom-radio mb-3">
												<input name="ativo_produto" class="custom-control-input" id="Ativo1" type="radio" {{  isset($d->ativo_produto) && $d->ativo_produto == 1 ? 'checked' : '' }} value=1>
												<label class="custom-control-label" for="Ativo1">Ativo</label>
											</div>
										</div>
										<div class="col-6">
											<div class="custom-control custom-radio">
												<input name="ativo_produto" class="custom-control-input" id="Ativo2" type="radio" {{  isset($d->ativo_produto) && $d->ativo_produto == 0 ? 'checked' : '' }} value=0>
												<label class="custom-control-label" for="Ativo2">Inativo</label>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-6 col-lg-6 col-sm-12">
									<div class="form-group">
										<label>Unidade</label>
										<select name="unidade_produto" id="unidade_produto" class="form-control">
											<option value="{{$d->unidade_produto}}">
												Unidade Atual - {{$d->unidade_produto}}
											</option>
											<option value='KT'> Kit</option>
											<option value='PC'> Peça</option>
											<option value='CX'> Caixa</option>
											<option value='CJ'> Conjunto</option>
											<option value='EB'> Embalagem</option>
											<option value='MT'> Metro</option>
											<option value='RL'> Rolo</option>
											<option value='UN'> Unidade</option>
										</select>
									</div>
								</div>
								<div class="col-md-6 col-lg-6 col-sm-12">
									<div class="form-group">
										<label>Marca</label>
										<select id="marca_produto" class="form-control" name="marca_produto">
											<option value="{{$d->id_marca_produto}}">
												Marca Atual - {{$d->nome_marca_produto}}
											</option>
											@foreach($marca_produto as $marcaProduto)
											<option value="{{$marcaProduto->id_marca_produto}}">
												{{$marcaProduto->nome_marca_produto}}
											</option>
											@endforeach
										</select>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-6">
									<label>Imagem do Produto</label>
									<img class="w-75 h-75 d-block mx-auto" src="{{asset($d->imagem_produto)}}" id="imagem_atual">
									<br>
									<div class="custom-file custom_file_imagem">

										<input type="file" name="imagem_produto" class="custom-file-input imagem_produto" value="{{$d->imagem_produto}}" lang="en">
										<label class="custom-file-label nome_foto" for="customFileLang"></label>
									</div>
								</div>
								<!-- Input hidden contendo o valor da imagem antiga -->
								<input type="hidden" name="imagem_produto_antiga" value="{{$d->imagem_produto}}">

								<div class="col-md-6 col-lg-6">
									<div class="form-group-sm">
										<label>Descrição do Produto</label>
										<textarea class="form-control form-control-alternative text-left descricao_produto" id="descricao_produto" name="descricao_produto" rows="8">@php if(!empty($d->descricao_produto) && isset($d->descricao_produto) ){echo trim($d->descricao_produto);}@endphp</textarea>
									</div>
									<div class="form-group-sm mt-3">
										<label>Codigo de Barra</label>
										<input type="text" class="form-control " name="codigo_barra_produto" value="{{$d->codigo_barra_produto}}" autofocus="on">
									</div>
									<div class="form-group-sm mt-3">
										<label>Codigo de Referência</label>
										<input type="text" class="form-control " name="referencia_produto" value="{{$d->referencia_produto}}" autofocus="on">
									</div>
								</div>
							</div>
							<br>
						</div>
						<div class="card-body tab-pane fade " id="categoria" role="tabpanel">
							<h6 class="heading-small text-muted mb-4">Categoria</h6>
							<hr class="my-4">
							<div class="row mt-2">
								<div class="col-md-4 col-lg-4 col-sm-12">
									<div class="form-group form-nome">
										<label>Familia</label>
										<select class="form-control" name="familia_produto">
											<option selected value="{{$d->id_familia_produto_fk}}">
												Familia Atual - {{$d->nome_familia_produto}}
											</option>
											@foreach($familia_produto as $familiaProduto)
											<option value="{{$familiaProduto->id_familia_produto}}">
												{{$familiaProduto->nome_familia_produto}}
											</option>
											@endforeach
										</select>
									</div>
								</div>
								<div class="col-md-4 col-lg-4 col-sm-12">
									<div class="form-group form-grupo">
										<label>Grupo</label>
										<select class="form-control" name="grupo_produto">
											<option selected value="{{$d->id_grupo_produtos}}">
												Grupo Atual - {{$d->nome_grupo_produtos}}
											</option>
											@foreach($grupo_produto as $grupoProduto)
											<option value="{{$grupoProduto->id_grupo_produtos}}">
												{{$grupoProduto->nome_grupo_produtos}}
											</option>
											@endforeach
										</select>
									</div>
								</div>
								<div class="col-md-4 col-lg-4 col-sm-12">
									<div class="form-group form-subgrupo">
										<label>Subgrupo</label>
										<select class="form-control" name="subgrupo_produto">
											<option selected value="{{$d->id_subgrupo_produtos}}">
												Subgrupo atual - {{$d->nome_subgrupo_produtos}}
											</option>
											@foreach($subgrupo_produto as $subgrupoProduto)
											<option selected value="{{$subgrupoProduto->id_subgrupo_produtos}}">
												{{$subgrupoProduto->nome_subgrupo_produtos}}
											</option>
											@endforeach
										</select>
									</div>
								</div>
							</div>
						</div>
						<div class="card-body tab-pane fade " id="preco" role="tabpanel">
							<h6 class="heading-small text-muted mb-4">Preço</h6>
							<hr class="my-4">
							<div class="row">
								<div class="col-md-4 col-lg-4 col-sm-12">
									<div class="form-group form-preco-custo">
										<label>Preço de Custo</label>
										<input type="number" step="0.01" min=0.00 placeholder="Preço de custo" id="preco_produto_custo" name="preco_produto_custo" class="form-control form-control-alternative preco_produto_custo" value="{{$d->preco_produto_custo}}" />
									</div>
								</div>
								<div class="col-md-4 col-lg-4 col-sm-12">
									<label>Margem Atacado</label>
									<select class="form-control" id="preco_atacado_margem" name="preco_atacado_margem">
										<option selected value="{{$d->id_atacado}}" data-valor="{{$d->valor_atacado}}">
											Margem atual - {{$d->identificador_atacado}} - {{$d->valor_atacado}} %
										</option>
										@foreach($produto_margem as $item_margem)
										<option value="{{$item_margem->id}}" data-valor="{{$item_margem->valor}}">
											{{$item_margem->identificador}} - {{$item_margem->valor}} %
										</option>
										@endforeach
									</select>

								</div>
								<div class="col-md-4 col-lg-4 col-sm-12">
									<label>Margem Varejo</label>
									<select class="form-control" id="preco_varejo_margem" name="preco_varejo_margem">
										<option selected value="{{$d->id_varejo}}" data-valor="{{$d->valor_varejo}}">
											Margem atual - {{$d->identificador_varejo}} - {{$d->valor_varejo}} %
										</option>
										@foreach($produto_margem as $item_margem)
										<option value="{{$item_margem->id}}" data-valor="{{$item_margem->valor}}">
											{{$item_margem->identificador}} - {{$item_margem->valor}} %
										</option>
										@endforeach
									</select>

								</div>
							</div>
							<div class="row">
								<div class="col-md-4 col-lg-4 col-sm-12">
									<div class="form-group form-preco-oferta">
										<label>Preço Oferta</label>
										<input type="number" step="0.01" min=0.00 name="preco_produto_oferta" placeholder="Preço de oferta" class="form-control form-control-alternative preco_produto_oferta" value="{{$d->preco_produto_oferta}}" />
									</div>
								</div>
								<div class="col-md-4 col-lg-4 col-sm-12">
									<div class="form-group form-preco-atacado">
										<label>Preço Atacado</label>
										<input type="number" step="0.01" min=0.00 placeholder="Preço de atacado" name="preco_produto_atacado" class="form-control form-control-alternative preco_produto_atacado" value="{{$d->preco_produto_atacado}}" />
									</div>
								</div>
								<div class="col-md-4 col-lg-4 col-sm-12">
									<div class="form-group form-preco-varejo">
										<label>Preço Varejo</label>
										<input type="number" step="0.01" min=0.00 name="preco_produto_varejo" placeholder="Preço de varejo" class="form-control form-control-alternative preco_produto_varejo" value="{{$d->preco_produto_varejo}}" />
									</div>
								</div>

							</div>
						</div>
						<div class="card-body tab-pane fade " id="quantidade" role="tabpanel">
							<h6 class="heading-small text-muted mb-4">Quantidade</h6>
							<hr class="my-4">
							<div class="row">
								<div class="col-md-4 col-lg-4 col-sm-12">
									<div class="form-group">
										<label>Quantidade atual</label>
										<input type="number" id="quantidade_produtos" name="quantidade_produtos" min="0" class="form-control quantidade_produtos" value="{{$d->quantidade_produtos}}" />
									</div>
								</div>
								<div class="col-md-4 col-lg-4 col-sm-12">
									<div class="form-group">
										<label>Quantidade máxima</label>
										<input type="number" id="id_quantidade_maxima_produtos" name="quantidade_maxima_produtos" min="0" class="form-control quantidade_maxima_produtos" value="{{$d->quantidade_maxima_produtos}}" />
									</div>
								</div>
								<div class="col-md-4 col-lg-4 col-sm-12">
									<div class="form-group">
										<label>Quantidade mínima</label>
										<input type="number" name="quantidade_minima_produtos" placeholder="Quantidade mínima" min="0" id="id_quantidade_minima_produtos" class="form-control quantidade_minima_produtos" value="{{$d->quantidade_minima_produtos}}" />
									</div>
								</div>
							</div>
						</div>
						<div class="card-body tab-pane fade " id="fiscal" role="tabpanel">
							<h6 class="heading-small text-muted mb-4">Fiscal</h6>
							<hr class="my-4">
							<div class="row">
								<div class="col-md-4 col-lg-4 col-sm-12">
									<div class="form-group">
										<label>NCM</label>
										<input class="form-control" value="{{$d->ncm}}" type="text" name="ncm" maxlength="10" placeholder="Digite o ncm" />
									</div>
								</div>

								<div class="col-md-4 col-lg-4 col-sm-12">
									<div class="form-group">
										<label>CSOSN</label>
										<input class="form-control" type="text" maxlength="4" placeholder="Digite o csosn" name="csosn" value="{{$d->csosn}}" />
									</div>
								</div>

								<div class="col-md-4 col-lg-4 col-sm-12">
									<div class="form-group">
										<label>CFOP</label>
										<select class="form-control" name="cfop">
											<option value="{{$d->cfop}}">{{$d->cfop}}</option>
											<option value="5102">5102 - Venda de mercadoria adquirida ou recebida de terceiros (Mesmo Estado)</option>
											<option value="6102">6102 - Venda de mercadoria adquirida ou recebida de terceiros (Outros Estados)</option>
											<option value="5405">5405 - Venda de mercadoria, adquirida ou recebida de terceiros, sujeita ao regime de substituição tributária, na condição de contribuinte-substituído (Mesmo Estado)</option>
											<option value="6405">6405 - Venda de mercadoria, adquirida ou recebida de terceiros, sujeita ao regime de substituição tributária, na condição de contribuinte-substituído (Outros Estado)</option>
										</select>
									</div>
								</div>
							</div>
						</div>
						<div class="card-body tab-pane fade " id="descricao-tecnica" role="tabpanel">
							<div class="row">
								<div class="col-md-3 sm-12 lg-3 d-none">
									<h6 class="heading-small text-muted mb-4">Escolha a imagem da descrição</h6>
									<div class="custom-file">
										<input type="file" class="custom-file-input" name="imagem_descricao" lang="pt-br">
										<label class="custom-file-label" for="customFileLang">Selecione</label>
									</div>
									<br><br>
									<div class="custom-file">
										<input type="file" class="custom-file-input" name="manual_descricao" lang="pt-br">
										<label class="custom-file-label" for="customFileLang">Selecione</label>
									</div>

								</div>

							

								<div class="col-md-8 sm-12 lg-8">
									<h6 class="heading-small text-muted mb-4">Características Técnicas</h6>

									<div id="quill">{!!$d->caracteristica_produto !!}</div>

									<textarea class="form-control form-control-alternative d-none" id="lista" name="caracteristica_produto" rows="7" html="true"></textarea>
									<br>
								</div>

								<div class="col-md-4 sm-12 lg-4">
									<h6 class="heading-small text-muted mb-4">Botões da Tabela</h6>
									<label>Tabela</label><br>
									<button type="button" class="btn btn-outline-success" id="insert-table">Criar</button>
									<button type="button" class="btn btn-outline-danger" id="delete-table">Deletar</button>

									<br><br>

									<label>Linhas</label><br>
									<button type="button" class="btn btn-outline-info" id="insert-row-above">Acima</button>
									<button type="button" class="btn btn-outline-info" id="insert-row-below">Abaixo</button>
									<button type="button" class="btn btn-outline-danger" id="delete-row">Deletar</button>

									<br><br>

									<label>Colunas</label><br>
									<button type="button" class="btn btn-outline-info" id="insert-column-left">Esquerda</button>
									<button type="button" class="btn btn-outline-info" id="insert-column-right">Direita</button>
									<button type="button" class="btn btn-outline-danger" id="delete-column">Deletar</button>

								</div>

							</div>
						</div>
						<div class="card-body tab-pane fade " id="relacionado" role="tabpanel">
							<div class="row">
								<div class="col-md-3">
									<div class="card">
										<div class="card-body">
											<label>Produto Relacionado 1 => {{$d->produto_relacionado_1}}</label>
											<select class="select_produto" id="select_relacionados_1" name="produto_relacionado_1" data-toggle="select" title="Simple select" data-live-search="true" data-live-search-placeholder="Search ...">
											</select>
											<input type="hidden" name="produto_relacionado_1_antigo" value="{{$d->produto_relacionado_1}}">
										</div>
									</div>
								</div>

								<div class="col-md-3">
									<div class="card">
										<div class="card-body">
											<label>Produto Relacionado 2 => {{$d->produto_relacionado_2}}</label>
											<select class="select_produto" id="select_relacionados_2" name="produto_relacionado_2" data-toggle="select" title="Simple select" data-live-search="true" data-live-search-placeholder="Search ...">
											</select>
											<input type="hidden" name="produto_relacionado_2_antigo" value="{{$d->produto_relacionado_2}}">
										</div>
									</div>
								</div>

								<div class="col-md-3">
									<div class="card">
										<div class="card-body">
											<label>Produto Relacionado 3 => {{$d->produto_relacionado_3}}</label>
											<select class="select_produto" id="select_relacionados_3" name="produto_relacionado_3" data-toggle="select" title="Simple select" data-live-search="true" data-live-search-placeholder="Search ...">
											</select>
											<input type="hidden" name="produto_relacionado_3_antigo" value="{{$d->produto_relacionado_3}}">
										</div>
									</div>
								</div>

								<div class="col-md-3">
									<div class="card">
										<div class="card-body">
											<label>Produto Relacionado 4 => {{$d->produto_relacionado_4}}</label>
											<select class="select_produto" id="select_relacionados_4" name="produto_relacionado_4" data-toggle="select" title="Simple select" data-live-search="true" data-live-search-placeholder="Search ...">
											</select>
											<input type="hidden" name="produto_relacionado_4_antigo" value="{{$d->produto_relacionado_4}}">
										</div>
									</div>
								</div>

							</div>
						</div>
						<div class="card-body tab-pane fade " id="composto" role="tabpanel">
							<div class="row">
								<div class="col-md-4 sm-12 lg-6">
									<h6 class="heading-small text-muted mb-4">Selecione um componente</h6>
									<select class="select_produto col-md-6" id="select_componente" name="produto_componente" data-toggle="select" title="Simple select" data-live-search="true" data-live-search-placeholder="Search ..." form="form-componentes">
									</select>
									<br><br>
									<h6 class="heading-small text-muted">Quantidade</h6>
									<input type="number" class="form-control" name="quantidade_componente" id="quantidade_componente" form="form-componentes" min="1" value="1">
									<br>
									<div class="text-center">
										<button type="button" class="btn btn-info btn-submit-componente">
											Adicionar componente
										</button>
									</div>
								</div>
								<div class="col-md-8 sm-12 lg-6">
									<div class="table-responsive" data-toggle="list" data-list-values='["name", "budget", "status", "qtd", "subtotal"]'>
										<table class="table align-items-center table-flush table-sm">
											<thead class="thead-light text-center">
												<tr>
													<th scope="col" class="sort" data-sort="name">Produto</th>
													<th scope="col" class="sort" data-sort="budget">Preço</th>
													<th scope="col" class="sort" data-sort="qtd">QTD</th>
													<th scope="col" class="sort" data-sort="subtotal">Subtotal</th>
													<th scope="col"></th>
												</tr>
											</thead>
											<tbody class="list">
												@foreach ($componentes as $componente)
												<tr>
													<th scope="row">
														<div class="media align-items-center">
															<a href="#" class="avatar rounded-circle mr-3">
																<img alt="Image placeholder" src="{{asset($componente->imagem_produto)}}">
															</a>
															<div class="media-body">
																<span class="name mb-0 text-sm">{{$componente->nome_produto}}</span>
															</div>
														</div>
													</th>

													<td class="budget text-center">
														{{$componente->preco_produto_custo}}
													</td>

													<td class="qtd text-center">
														{{$componente->quantidade_produto_composto}}
													</td>

													<td class="subtotal text-center">
														{{$componente->preco_produto_custo * $componente->quantidade_produto_composto}}
													</td>

													<td class="text-right">
														<a class="btn btn-danger" href="{{route('produtos.componente_excluir',$componente->id)}}"><i class="fas fa-trash"></i></a>
													</td>

												</tr>
												@endforeach
											</tbody>
											<tfoot class="text-center">
												<tr class="text-center">
													<td colspan="2"></td>
													<td>Total</td>
													<td id="total_componente" class="text-success font-weight-bold"></td>
													<td class="text-right"><button type="button" class="btn btn-info" id="btn-atualizar-preco"><i class="fas fa-edit"></i></button></td>
												</tr>
											</tfoot>
										</table>
									</div>


								</div>
							</div>
						</div>
					</div>
					@foreach($quantidade as $quantidades)
					<input type="hidden" name="id_quantidade_produtos_fk" value="{{$quantidades->id_quantidade_produtos}}">
					@endforeach
					<input type="hidden" name="id_preco_produto_fk" value="{{$d->id_preco_produto}}">
					<br>
					<div class="text-center">
						<button type="button" class="btn btn-success my-5 btn-submit">Atualizar</button>
					</div>
				</form>
				<form id="form-componentes" action="{{route('produtos.componente', $id)}}" method="GET" class="d-none">
					@csrf
				</form>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="modal-cadastro-produtos" tabindex="-1" role="dialog" aria-labelledby="modal-cadastro-produtos" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h2 class="mx-auto text-info text-uppercase">Cadastro incompleto</h2>
			</div>
			<div class="modal-body">
				<div class="texto-alerta">
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default text-white font-weight-bold" data-dismiss="modal">Fechar</button>
			</div>
		</div>
	</div>
</div>

@endsection

@push('js')
<script src="{{ asset('argon') }}/vendor/dropzone/dist/min/dropzone.min.js"></script>
<script src="{{ asset('argon') }}/vendor/select2/dist/js/select2.min.js"></script>
<script src="https://cdn.quilljs.com/2.0.0-dev.2/quill.js"></script>

<script>
	function adicionar() {
		var ing = document.getElementById("ingrediente").value;
		var lista = document.getElementById("lista").innerHTML;
		lista = lista + "<li>" + ing + "</li>";
		document.getElementById("lista").innerHTML = lista;
	}
</script>

<script src="{{asset('js/alerta_editar.js')}}"></script>

<script>
	var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
	$(document).ready(function() {

		// $('#quill .ql-editor').html({!!$d->caracteristica_produto !!});

		var snow = new Quill('#quill', {
			theme: 'snow',
			modules: {
				// 'syntax': true,
				'table': true
			}
		});

		const table = snow.getModule('table');

		document.querySelector('#insert-table').addEventListener('click', function() {
			table.insertTable(2, 2);
		});
		document.querySelector('#insert-row-above').addEventListener('click', function() {
			table.insertRowAbove();
		});
		document.querySelector('#insert-row-below').addEventListener('click', function() {
			table.insertRowBelow();
		});
		document.querySelector('#insert-column-left').addEventListener('click', function() {
			table.insertColumnLeft();
		});
		document.querySelector('#insert-column-right').addEventListener('click', function() {
			table.insertColumnRight();
		});
		document.querySelector('#delete-row').addEventListener('click', function() {
			table.deleteRow();
		});
		document.querySelector('#delete-column').addEventListener('click', function() {
			table.deleteColumn();
		});
		document.querySelector('#delete-table').addEventListener('click', function() {
			table.deleteTable();
		});

		$('.btn-submit').on('click', function() {
			text_quill = $('#quill .ql-editor').html();
			$('#lista').val(text_quill);
			setTimeout(() => {
				$("#formulario_cadastrar").submit();
			}, 50);
		});


		$('.select_produto').select2({
			tags: true,
			placeholder: 'Selecione um produto',
			ajax: {
				url: "{{ route('os.select2_produto') }}",
				type: "get",
				dataType: 'json',
				delay: 250,
				data: function(params) {
					return {
						_token: CSRF_TOKEN,
						search: params.term // search term
					};
				},
				processResults: function(data) {
					// console.log(response);
					return {
						results: data
					};
				},
				cache: true
			}
		}).on('select2:select', function(e) {
			var data = e.params.data;
			$(this).children('[value="' + data['id'] + '"]').attr({
				'selected': 'selected'
			});
			// document.getElementById('nome_produto').setAttribute("value", data["text"]);
			// document.getElementById('id_marca').setAttribute("value", data["id_marca"]);
			// document.getElementById('id_marca').innerHTML = data["nome_marca"];
		}).val(0).trigger('change');
	});
</script>

<script>
	$(document).ready(function() {
		function getTotal(column = 1) {
			let result = 0;
			let columns = $(".subtotal");

			columns.each(i => {
				result += parseFloat($(columns[i]).html());
			});

			$('#total_componente').text(Number(result).toFixed(2));
			// $('#preco_produto_custo').val(Number(result).toFixed(2));
			// atualizar_margem_atacado();
			// atualizar_margem_varejo();

			return result;

		}

		function atualizar_margem_atacado() {
			var custo = $('#preco_produto_custo').val();
			var margem = $('#preco_atacado_margem').find(':selected').attr('data-valor');
			var preco = (custo * 1) + (custo * margem / 100);
			$('input[name="preco_produto_atacado"]').prop("value", preco.toFixed(2));
		}

		function atualizar_margem_varejo() {
			var custo = $('#preco_produto_custo').val();
			var margem = $('#preco_varejo_margem').find(':selected').attr('data-valor');
			var preco = (custo * 1) + (custo * margem / 100);
			$('input[name="preco_produto_varejo"]').prop("value", preco.toFixed(2));
		}

		$('#preco_atacado_margem').change(function() {
			atualizar_margem_atacado();
		})

		$('#preco_varejo_margem').change(function() {
			atualizar_margem_varejo();
		})

		$('#preco_produto_custo').blur(function() {
			atualizar_margem_atacado();
			atualizar_margem_varejo();
		})

		$('#select_relacionados_1').select2();
		$('#select_relacionados_2').select2();
		$('#select_relacionados_3').select2();
		$('#select_relacionados_4').select2();
		$('#select_componentes').select2();
		getTotal();

		$('#btn-atualizar-preco').click(function() {
			valor = $('#total_componente').text();
			$('#preco_produto_custo').val(Number(valor).toFixed(2));
			atualizar_margem_atacado();
			atualizar_margem_varejo();

			$('#tab-9').removeClass('active')
			$('#tab-3').addClass('active')

			$('#composto').removeClass('show active')
			$('#preco').addClass('show active')

		});

	});
</script>

<script>
	$(document).on('click', '.btn-submit-componente', function() {
		$(this).prop('disabled', 'true');
		$('#form-componentes').submit();
	});
</script>

@if (Session::has('componente-sucesso') || Session::has('componente-removido'))

<script>
	$(document).ready(function() {
		$('#tab-1').removeClass('active')
		$('#tab-9').addClass('active')

		$('#descricao-simples').removeClass('show active')
		$('#composto').addClass('show active')
	})
</script>

@endif
@endpush