@extends('../layouts.app')

<link rel="stylesheet" href="{{ asset('argon') }}/vendor/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="{{ asset('argon') }}/vendor/wizard/wizard.css">
@section('title', 'Cadastrar Produto')
@section('content')

@include('../layouts.headers.cards_prod')

@can('adicionar-produtos')
<div class="container-fluid mt--6">
	<div class="row">
		<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 Produtos</h3>
						</div>
						<div class="col-4 text-right">
							<a href="#" class="btn btn-sm btn-primary">{{ __('Voltar') }}</a>
						</div>
					</div>
				</div>
				<div class="card-body p-0">
					<div class="row m-0">
						<div class="card w-100">
							<div class="card-body form-group">
								<label for="select_produtos"><small>Duplicar Produto</small></label>
								<select class="w-100 select_clientes" id='select_produtos'>
									<option disabled="on" selected="on">Pesquise o nome de um produto</option>
									@foreach($duplicatas as $duplicata)
									<option value="{{$duplicata->id}}">{{$duplicata->nome_produto}}</option>
									@endforeach
								</select>
							</div>
						</div>
					</div>
					<form method="post" action="{{route('produtos.salvar')}}" id="signup-form" class="signup-form" enctype="multipart/form-data">
						{{csrf_field()}}
						<h3>
							Descrição
						</h3>
						<fieldset>
							<div class="row">
								<div class="col-md-4">
									<div class="card">
										<div class="card-body">
											<h5 class="card-title text-center mb-2">Imagem do Produto</h5>
											<input type="file" class="inputfile" name="imagem_produto" id="imagem_produto" onchange="readURL(this);" data-multiple-caption="{count} files selected" multiple />
											<label for="imagem_produto">
												<figure>
													<img src="../img/icones/your-picture.png" alt="" class="your_picture_image">
												</figure>
												<span class="file-button">selecionar imagem</span>
											</label>
										</div>
									</div>
								</div>
								<div class="col-md-8">
									<div class="card">
										<div class="card-body row">
											<div class="col-md-6">
												<div class="form-group">
													<input type="text" id="nome_produto" name="nome_produto" placeholder="Nome do produto">
												</div>
												<div class="form-group">
													<select id="unidade_produto" name="unidade_produto">
														<option disabled selected>Unidade do Produto</option>
														<option value="KT">Kit</option>
														<option value="CX">Caixa</option>
														<option value="CJ">Conjunto</option>
														<option value="PC">Peça</option>
														<option value="EB">Embalagem</option>
														<option value="MT">Metro</option>
														<option value="RL">Rolo</option>
														<option value="UN">Unidade</option>
													</select>
													<span class="select-icon"><i class="fas fa-sort-down"></i></span>
												</div>
												<div class="form-group mb-0">
													<select id="marca_produto" name="marca_produto">
														<option disabled selected>Marca do produto</option>
														@foreach($marca_produto as $marcaProduto)
														<option value="{{$marcaProduto->id_marca_produto}}">
															{{$marcaProduto->nome_marca_produto}}
														</option>
														@endforeach
													</select>
													<span class="select-icon"><i class="fas fa-sort-down"></i></span>
												</div>
											</div>
											<div class="col-md-6">
												<div class="form-group">
													<input type="text" id="nome_comercial_produto" name="nome_comercial_produto" placeholder="Nome comercial do produto">
												</div>
												<div class="form-group">
													<input type="text" name="codigo_barra_produto" placeholder="Codigo de barra produto">
												</div>
												<div class="form-group">
													<input type="text" name="referencia_produto" placeholder="Codigo de referência">
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</fieldset>

						<h3>
							Categoria
						</h3>
						<fieldset>
							<div class="card-deck">
								<div class="card">
									<div class="card-body">
										<h5 class="card-title">Categoria</h5>
										<div class="form-group">
											<select name="nome_familia_produto">
												<option disabled selected>Familia</option>
												@foreach($familia_produto as $familiaProduto)
												<option value="{{$familiaProduto->id_familia_produto}}">
													{{$familiaProduto->nome_familia_produto}}
												</option>
												@endforeach
											</select>
											<span class="select-icon"><i class="fas fa-sort-down"></i></span>
										</div>
										<div class="form-group">
											<select name="id_grupo_produtos_fk">
												<option disabled selected>Grupo</option>
												@foreach($grupo_produto as $grupoProduto)
												<option value="{{$grupoProduto->id_grupo_produtos}}">
													{{$grupoProduto->nome_grupo_produtos}}
												</option>
												@endforeach
											</select>
											<span class="select-icon"><i class="fas fa-sort-down"></i></span>
										</div>
										<div class="form-group mb-0">
											<select name="id_subgrupo_produtos_fk" required>
												<option disabled>Subgrupo</option>
												@foreach($subgrupo_produto as $subgrupoProduto)
												<option value="{{$subgrupoProduto->id_subgrupo_produtos}}">
													{{$subgrupoProduto->nome_subgrupo_produtos}}
												</option>
												@endforeach
											</select>
											<span class="select-icon"><i class="fas fa-sort-down"></i></span>
										</div>
									</div>
								</div>
								<div class="card">
									<div class="card-body">
										<h5 class="card-title">Preço</h5>
										<div class="form-group">
											<input type="number" step="0.01" min=0.00 id="preco_produto_custo" name="preco_produto_custo" placeholder="Preço de custo" />
										</div>
										<div class="row">
											<div class="form-group col-md-6">
												<select id="preco_atacado_margem" name="preco_atacado_margem">
													<option disabled selected>Margem</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>
												<span class="select-icon"><i class="fas fa-sort-down"></i></span>
											</div>
											<div class="form-group col-md-6">
												<input type="number" step="0.01" min=0.00 name="preco_produto_atacado" placeholder="Preço de atacado" />
											</div>
										</div>
										<div class="row">

											<div class="form-group col-md-6">
												<select id="preco_varejo_margem" name="preco_varejo_margem">
													<option disabled selected>Margem</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>
												<span class="select-icon"><i class="fas fa-sort-down"></i></span>
											</div>
											<div class="form-group col-md-6">
												<input type="number" step="0.01" min=0.00 name="preco_produto_varejo" placeholder="Preço de varejo" />
											</div>
										</div>
										<div class="row d-none">
											<div class="form-group col-md-6">
												<input type="number" step="0.01" min=0.00 name="preco_produto_oferta" placeholder="Preço de oferta" value="0.00" />
											</div>
											<div class="form-group col-md-6">
												<select id="preco_oferta_margem" name="preco_oferta_margem">
													<option disabled selected>Margem</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>
												<span class="select-icon"><i class="fas fa-sort-down"></i></span>
											</div>
										</div>
									</div>
								</div>
								<div class="card">
									<div class="card-body">
										<h5 class="card-title">Quantidade</h5>
										<div class="form-group">
											<input type="number" name="quantidade_produtos" placeholder="Quantidade atual" min="0" />
										</div>
										<div class="form-group">
											<input type="number" name="quantidade_maxima_produtos" placeholder="Quantidade máxima" min="0" />
										</div>
										<div class="form-group mb-0">
											<input type="number" name="quantidade_minima_produtos" placeholder="Quantidade mínima" min="0" />
										</div>
									</div>
								</div>
							</div>
						</fieldset>

						<h3>
							Dados Técnicos
						</h3>
						<fieldset>
							<div class="row">
								<div class="col-md-4">
									<div class="card">
										<div class="card-body">
											<h5 class="card-title text-center">Imagem da descrição</h5>
											<input type="file" class="inputfile" name="imagem_descricao" id="imagem_descricao" onchange="readURL2(this);" data-multiple-caption="{count} files selected" multiple />
											<label for="imagem_descricao">
												<figure>
													<img src="../img/icones/your-picture.png" alt="" class="your_picture_image2">
												</figure>
												<span class="file-button">selecionar imagem</span>
											</label>
										</div>
									</div>
								</div>
								<div class="col-md-4">
									<div class="card">
										<div class="card-body">
											<div class="form-group">
												<input type="file" id="custom-file-input" class="custom-file-input" name="manual_descricao" lang="pt-br">
												<label id="custom-file-label" class="custom-file-label" for="customFileLang">Selecione o manual</label>
											</div>
											<div class="form-group">
												<textarea placeholder="Descrição do Produto" id="descricao_produto" name="descricao_produto" class="form-control form-control-alternative w-100"></textarea>
												<input type="hidden" name="ativo_produto" value="1" checked="on">
											</div>
											<div class="row">
												<div class="form-group col-md-6">
													<input type="number" step=".02" name="peso_bruto_produto" placeholder="Peso Bruto">
												</div>
												<div class="form-group col-md-6">
													<input type="number" step=".02" name="peso_liquido_produto" placeholder="Peso Liquido">
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-md-4">
									<div class="card">
										<div class="card-body">
											<div class="form-group">
												<div class="input-group mb-3">
													<input type="text" id="ingrediente" class="form-control" placeholder="Defina os itens inclusos" aria-label="Defina os itens inclusos" aria-describedby="button-addon2">
													<div class="input-group-append">
														<button class="btn btn-success" type="button" id="button-addon2" onclick="adicionar()"><i class="ni ni-fat-add"></i></button>
													</div>
												</div>
												<br>
												<textarea class="form-control form-control-alternative" id="lista" name="itens_descricao" rows="4" html="true"></textarea>
											</div>
										</div>
									</div>
								</div>
						</fieldset>

						<h3>
							Fiscal
						</h3>
						<fieldset>
							<div class="row m-0">
								<div class="card col-12">
									<div class="card-body row">

										<div class="form-group col-md-4">
											<label>NCM</label>
											<input type="text" name="ncm" maxlength="10" placeholder="Digite o ncm" />
										</div>

										<div class="form-group col-md-4">
											<label>CSOSN</label>
											<input type="text" maxlength="4" placeholder="Digite o csosn" name="csosn" />
										</div>

										<div class="form-group col-md-4">
											<label>CFOP</label>
											<select name="cfop">
												<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>
						</fieldset>

						<h3>
							Relacionados
						</h3>
						<fieldset>
							<div class="row">
								<div class="col-md-3">
									<div class="card">
										<div class="card-body">
											<label>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 ...">
												@foreach($produtos as $produto)
												<option value="{{$produto->id}}">{{$produto->nome_produto}}</option>
												@endforeach
											</select>
										</div>
									</div>
								</div>

								<div class="col-md-3">
									<div class="card">
										<div class="card-body">
											<label>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 ...">
												@foreach($produtos as $produto)
												<option value="{{$produto->id}}">{{$produto->nome_produto}}</option>
												@endforeach
											</select>
										</div>
									</div>
								</div>

								<div class="col-md-3">
									<div class="card">
										<div class="card-body">
											<label>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 ...">
												@foreach($produtos as $produto)
												<option value="{{$produto->id}}">{{$produto->nome_produto}}</option>
												@endforeach
											</select>
										</div>
									</div>
								</div>

								<div class="col-md-3">
									<div class="card">
										<div class="card-body">
											<label>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 ...">
												@foreach($produtos as $produto)
												<option value="{{$produto->id}}">{{$produto->nome_produto}}</option>
												@endforeach
											</select>
										</div>
									</div>
								</div>
							</div>
						</fieldset>

					</form>
				</div>
			</div>
		</div>
	</div>
</div>
@endcan
@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="{{ asset('argon') }}/vendor/wizard/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="{{ asset('argon') }}/vendor/wizard/jquery-validation/dist/additional-methods.min.js"></script>
<script src="{{ asset('argon') }}/vendor/wizard/jquery-steps/jquery.steps.min.js"></script>
<script src="{{ asset('argon') }}/vendor/wizard/wizard.js"></script>
<script type="text/javascript" src="{{ asset('js/produtos_cadastrar.js') }}"></script>

<!-- Lista de itens -->
<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>

<!-- File input complemento -->
<script>
	$("#custom-file-input").change(function() {
		var arquivo = $("#custom-file-input").val();
		$("#custom-file-label").html(arquivo);
	});
</script>

<!-- Select2 dos produtos relacionados -->
<script>
	var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
	$(document).ready(function() {
		$('.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>

<!-- Replace do botão de submit -->
<script>
	$("a[href='#finish']").click(function() {
		$("#signup-form").submit();
	});
</script>

<!--Margem de Lucro com base no preço de custo-->
<script>
	$(document).ready(function() {

		$('#preco_atacado_margem').change(function() {
			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"]').val(preco.toFixed(2));
		})

		$('#preco_varejo_margem').change(function() {
			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"]').val(preco.toFixed(2));
		})
	})
</script>

<!-- Select para duplicar produtos -->
<script>
	$(document).ready(function() {
		$('#select_produtos').select2();

		$('#select_produtos').on('change', function() {

			let id_produto = $(this).val();
			let url = "{{route('produtos.duplicar','_codigo_')}}".replace('_codigo_', id_produto);

			$.ajax({
				url: url,
				method: 'get',
				data: {
					id_produto: id_produto
				},
				success: function(retorno) {
					// $('[name = "imagem_produto"]').val(retorno.imagem_produto);
					$('[name = "nome_produto"]').val(retorno.nome_produto);
					$('[name = "nome_comercial_produto"]').val(retorno.nome_comercial_produto);

					$('[name = "unidade_produto"]').val(retorno.unidade_produto);
					$('[name = "marca_produto"]').val(retorno.id_marca_produto);
					$('[name = "nome_familia_produto"]').val(retorno.id_familia_produto);
					$('[name = "id_grupo_produtos_fk"]').val(retorno.id_grupo_produtos_fk);
					$('[name = "id_subgrupo_produtos_fk"]').val(retorno.id_subgrupo_produtos_fk);

					$('[name = "preco_produto_custo"]').val(retorno.preco_produto_custo);
					$('[name = "quantidade_produtos"]').val(0);
					$('[name = "quantidade_maxima_produtos"]').val(0);
					$('[name = "quantidade_minima_produtos"]').val(0);
					$('[name = "ncm"]').val(retorno.ncm);
					$('[name = "csosn"]').val(retorno.csosn);
					$('[name = "cfop"]').val(retorno.cfop);

				},
				error: function() {

				}
			});
		});
	});
</script>

<!--AutoComplete-->
<script>
	$(document).ready(function() {

		var options = {

			url: "{{route('produtos.autocomplete')}}",
			getValue: "name",

			list: {
				match: {
					enabled: true
				}
			},

			theme: "square"
		};

		$('#nome_produto').easyAutocomplete(options);
	});
</script>

@endpush