<div class="form-add-box">
	<div class="top-add-form">
		<span>{{ $title_form }}</span>
		<img src="img/close-form-add.png" alt="Close">
	</div>

	<div class="cont">
		<form action="#" id="form-oferta-ajax">
			<div class="cont-form-box">
				<ul class="tabs-novo-list">
					<li data-tab="1" class="active">Informações</li>
					<li data-tab="2">Produtos</li>
					<li data-tab="3" class="hidden">Lorem 3</li>
				</ul>

				<div class="tabs-novo active" data-tab="1">
					<div class="bloco-form-big">
						<div class="right">

							<input type="hidden" name="oferta_id" id="oferta_id" value="<?php echo (isset($oferta) ? $oferta->id : "")?>">
							<!--<h5>Imagem</h5>
							<div class="form-galeria">
								<label for="file-img-upload" class="galeria-item add">
									<input type="file" id="file-img-upload" class="file-img-upload">
									<img src="img/camera-form.png" class="img-camera" alt="Add imagem">
									<span>ADD IMAGEM</span>
								</label>
							</div>-->

							<div class="form-metade">
								<div class="grupo-novo">
									<input type="text" class="input-novo {!! set_digitado($objectOferta, 'titulo') !!}" name="titulo" value="<?php echo (isset($oferta) ? $oferta->titulo : "")?>">
									<label class="required">Título</label>
								</div>
								<div class="grupo-novo">
									<select class="input-novo {!! set_digitado($objectOferta, 'tema_id') !!}" name="tema_id">
										<option value="" selected disabled>Selecione</option>
										@foreach($temas as $item)
										<option <?php echo (isset($oferta) && ($oferta->tema_id == $item->id) ) ? 'selected' : ''; ?> value="{{ $item->id }}">{{ $item->nome }}</option>
										@endforeach
									</select>
									<label class="required">Tema</label>
								</div>
							</div>

							<div class="form-metade">
								<div class="grupo-novo">
									<input type="text" class="input-novo {!! set_digitado($objectOferta, 'sub_titulo') !!}" name="sub_titulo" value="<?php echo (isset($oferta) ? $oferta->sub_titulo : "")?>">
									<label class="required">Sub Título</label>
								</div>
								<div class="grupo-novo">
									<input type="date" class="input-novo {!! set_digitado($objectOferta, 'data') !!}" name="data" value="<?php echo (isset($oferta) ? $oferta->data : "")?>">
									<label>Data</label>
								</div>
							</div>

							<div class="form-metade">
								<div class="grupo-novo grupo-novo-sm">
									<input type="number" class="input-novo {!! set_digitado($objectOferta, 'quantidade_maxima_por_cliente') !!}" name="quantidade_maxima_por_cliente" value="<?php echo (isset($oferta) ? $oferta->quantidade_maxima_por_cliente : "")?>">
									<label class="required">Quantidade Máxima por Cliente</label>
								</div>
								<div class="grupo-novo">
									<input type="number" class="input-novo {!! set_digitado($objectOferta, 'estoque') !!}" name="estoque" value="<?php echo (isset($oferta) ? $oferta->estoque : "")?>">
									<label class="required">Disponibilidade</label>
								</div>
							</div>

							<div class="form-metade">
								<div class="grupo-novo">
									<select class="input-novo {!! set_digitado($objectOferta, 'tipo') !!}" name="tipo">
										<option value="" selected disabled>Selecione</option>
										@foreach($tipos as $item)
										<option <?php echo (isset($oferta) && ($oferta->tipo == $item->chave) ) ? 'selected' : ''; ?> value="{{ $item->chave }}">{{ $item->valor }}</option>
										@endforeach
									</select>
									<label class="required">Tipo</label>
								</div>
								<div class="grupo-novo">
									<select class="input-novo {!! set_digitado($objectOferta, 'pre_venda') !!}" name="pre_venda">
										<option <?php echo (isset($oferta) && ($oferta->pre_venda == 0) ) ? 'selected' : ''; ?> value="0">Não</option>
										<option <?php echo (isset($oferta) && ($oferta->pre_venda == 1) ) ? 'selected' : ''; ?> value="1">Sim</option>
									</select>
									<label class="required">Pré-venda</label>
								</div>
							</div>

							<div class="form-metade">
								<div class="grupo-novo">
									<input type="number" class="input-novo {!! set_digitado($objectOferta, 'poucas_unidades') !!}" name="poucas_unidades" value="<?php echo (isset($oferta) ? $oferta->poucas_unidades : "")?>">
									<label class="required">Poucas Unidades</label>
								</div>
								<div class="grupo-novo">
									<input type="number" class="input-novo {!! set_digitado($objectOferta, 'valor_desconto') !!}" name="valor_desconto" value="<?php echo (isset($oferta) ? $oferta->valor_desconto : "")?>">
									<label>Valor Desconto (Ofertas Casadas)</label>
								</div>
							</div>

							<div class="form-metade">
								<div class="checkbox-form-oferta">
									<div class="checkbox-label-oferta">
										<label for="ocultar_desconto">Ocultar desconto</label>
									</div>
									<div class="checkbox-input-oferta">
										<input id="ocultar_desconto" type="checkbox" name="ocultar_desconto" 
										{{ isset($oferta) && $oferta->ocultar_desconto ? 'checked' : '' }}>
									</div>
								</div>
							</div>

						</div>
					</div>
					<div class="bloco-form-big">
						<div class="right">
							<textarea name="texto" id="editor_texto">
								<?php echo (isset($oferta) ? $oferta->texto : "Digite aqui o texto da oferta")?>
							</textarea>
						</div>
					</div>
					<div class="bloco-form-big">
						<div class="right">
							<textarea name="resumo_texto" id="editor_resumo_texto">
								<?php echo (isset($oferta) ? $oferta->resumo_texto : "Digite aqui o resumo da oferta")?>
							</textarea>
						</div>
					</div>
					<div class="bloco-form-big">
						<div class="right">
							
							<div class="form-metade">
								<div class="grupo-novo">
									<select class="input-novo {!! set_digitado($objectOferta, 'instituicao_id') !!}" name="instituicao_id">
										<option value="" selected disabled>Selecione</option>
										@foreach($instituicoes as $item)
										<option <?php echo (isset($oferta) && ($oferta->instituicao_id == $item->id) ) ? 'selected' : ''; ?> value="{{ $item->id }}">{{ $item->nome }}</option>
										@endforeach
									</select>
									<label>Instituição (Oferta Solidária)</label>
								</div>
								<div class="grupo-novo">
									@if($tipoOferta == 'equipe' || (isset($oferta) && $oferta->tipo == 'EQ'))
										<select class="input-novo {!! set_digitado($objectOferta, 'responsavel_id') !!}" name="responsavel_id">
											<option value="" selected disabled>Selecione</option>
											@foreach($colaboradores as $item)
												<option <?php echo (isset($oferta) && ($oferta->responsavel_id == $item->usuario_id) ) ? 'selected' : ''; ?> value="{{ $item->usuario_id }}">{{ $item->nome }}</option>
											@endforeach
										</select>
										<label>Colaborador</label>
									@else
										<select class="input-novo {!! set_digitado($objectOferta, 'responsavel_id') !!}" name="responsavel_id">
											<option value="" selected disabled>Selecione</option>
											@foreach($responsaveis as $item)
											<option <?php echo (isset($oferta) && ($oferta->responsavel_id == $item->id) ) ? 'selected' : ''; ?> value="{{ $item->id }}">{{ $item->first_name }}</option>
											@endforeach
										</select>
										<label>Responsável:</label>
									@endif
								</div>
							</div>

							<div class="form-metade">
								<div class="grupo-novo">
									<input type="text" class="input-novo {!! set_digitado($objectOferta, 'url_video') !!}" name="url_video" value="<?php echo (isset($oferta) ? $oferta->url_video : "")?>">
									<label>URL Vídeo Oferta</label>
								</div>
								<div class="grupo-novo grupo-novo-sm">
									<select class="input-novo {!! set_digitado($objectOferta, 'agrupamento_produtos') !!}" name="agrupamento_produtos">
										<option <?php echo (isset($oferta) && ($oferta->agrupamento_produtos == 0) ) ? 'selected' : ''; ?> value="0">Não</option>
										<option <?php echo (isset($oferta) && ($oferta->agrupamento_produtos == 1) ) ? 'selected' : ''; ?> value="1">Sim</option>
									</select>
									<label>Agrupar Produtos na Oferta (VinumWear)</label>
								</div>
							</div>

							<div class="form-metade">
								<div class="grupo-novo">
									<select class="input-novo {!! set_digitado($objectOferta, 'resolucao_imagem') !!}" name="resolucao_imagem">
										<option <?php echo (isset($oferta) && ($oferta->resolucao_imagem == 'resolucao-1') ) ? 'selected' : ''; ?> value="resolucao-1">132 x 480</option>
										<option <?php echo (isset($oferta) && ($oferta->resolucao_imagem == 'resolucao-2') ) ? 'selected' : ''; ?> value="resolucao-2">154 x 480</option>
										<option <?php echo (isset($oferta) && ($oferta->resolucao_imagem == 'resolucao-3') ) ? 'selected' : ''; ?> value="resolucao-3">240 x 480</option>
										<option <?php echo (isset($oferta) && ($oferta->resolucao_imagem == 'resolucao-4') ) ? 'selected' : ''; ?> value="resolucao-4">320 x 480</option>
										<option <?php echo (isset($oferta) && ($oferta->resolucao_imagem == 'resolucao-5') ) ? 'selected' : ''; ?> value="resolucao-5">480 x 480</option>
										<option <?php echo (isset($oferta) && ($oferta->resolucao_imagem == 'resolucao-6') ) ? 'selected' : ''; ?> value="resolucao-6">660 x 480</option>
									</select>
									<label>Resolução da Imagem</label>
								</div>
								<div class="grupo-novo">
									<div class="bloco">
										<div class="cont">
											<div class="img-anex">
												@if(isset($oferta) && !empty($oferta->thumbnail_principal))
												<style type="text/css">
													.img-anex .anex-min{
														display: block;
													}
												</style>
												@else
												<div class="conten">
													<img src="img/camera.png" alt="Anexe aqui a imagem da oferta">
													<span>Anexe aqui a imagem da oferta</span>
												</div>
												@endif
												<img src="<?php echo (isset($oferta) && !empty($oferta->thumbnail_principal) ? $oferta->thumbnail_principal : "//placehold.it/920x500")?>" class="anex-min">
											</div>
											<form id="upload-form" class="hidden" enctype="multipart/form-data">
												<input type="file" class="upload-img hidden" value="">
												<input type="hidden" id="thumbnail" name="thumbnail" value="<?php echo isset($oferta) ? $oferta->thumbnail_principal : ''?>">
											</form>
										</div>
									</div>
								</div>
							</div>

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

				<div class="tabs-novo" data-tab="2">
					<div class="bloco-form-big">
						<div class="right">
							<div class="row">
								<div class="col-md-6">
									<label for="qtd_produto">Produto</label>
									<select id="id_produto" class="default-select select2-produto input-novo" name="produto" ></select>
								</div>
								<div class="col-md-2">
									<label for="qtd_produto">Quantidade</label>
									<input type="number" value="1" style="padding:10px;" class="form-control" id="qtd_produto" name="qtd_produto" />
								</div>
								<div class="col-md-4">
									<label>&nbsp;</label>
									<button class="btn btn-primary btn-block" type="button" id="add-produto-to-oferta">Adicionar</button>
								</div>
							</div>

						</div>
					</div>
					<div class="bloco-form-big">
						<div class="right">
							<div id="lista-produtos"></div>
						</div>
					</div>
					<div class="bloco-form-big">
						<div class="right">
							
							<div class="form-metade">
								<div class="grupo-novo">
									<input type="number" class="input-novo {!! set_digitado($objectOferta, 'preco_custo') !!}" name="preco_custo" id="preco_custo" value="<?php echo isset($oferta) ? $oferta->preco_custo : ''?>">
									<label class="required">Preço Custo</label>
								</div>
								<div class="grupo-novo">
									<input type="number" class="input-novo {!! set_digitado($objectOferta, 'preco_mercado') !!}" name="preco_mercado" id="preco_mercado" value="<?php echo isset($oferta) ? $oferta->preco_mercado : ''?>">
									<label class="required">Preço Mercado</label>
								</div>
							</div>

							<div class="form-metade">
								<div class="grupo-novo">
									<input type="number" class="input-novo {!! set_digitado($objectOferta, 'percentual_desconto') !!}" name="percentual_desconto" id="percentual_desconto" value="<?php echo isset($oferta) ? $oferta->percentual_desconto : ''?>">
									<label class="required">Percentual Desconto</label>
								</div>
								<div class="grupo-novo">
									<input type="number" class="input-novo {!! set_digitado($objectOferta, 'preco_oferta') !!}" name="preco_oferta" id="preco_oferta" value="<?php echo isset($oferta) ? $oferta->preco_oferta : ''?>">
									<label class="required">Preço Oferta</label>
								</div>
							</div>

							<div class="form-metade">
								<div class="grupo-novo">
									<input type="number" class="input-novo {!! set_digitado($objectOferta, 'custo_efetivo') !!}" name="custo_efetivo" id="custo_efetivo" value="<?php echo isset($oferta) ? $oferta->custo_efetivo : ''?>">
									<label class="required">Custo Efetivo</label>
								</div>
								<div class="grupo-novo">
									<label for="qtd_produto">Tags</label>
									<select style="width:100%;" class="form-control select2 select2-tags" name="tags[]" multiple="" tabindex="-1" aria-hidden="true">   
										@foreach($tags as $key => $item)
											<optgroup class="select2-result-selectable" label="{{$key}}"> 
												@foreach($tags[$key] as $tag)
													<option value="{{$tag['id']}}">{{$tag['nome']}}</option>   
												@endforeach                                                       
											</optgroup>                                 
										@endforeach                                            
									</select>	
								</div>
							</div>

						</div>
					</div>
				</div>
				
				<div class="tabs-novo" data-tab="3">
					<div class="bloco-form-big">
						<div class="right">
							<h5>Lorem ipsum 3</h5>
						</div>
					</div>
				</div>
			</div>
			<div class="bottom-form-box">
				<button class="main-btn-style" type="button" id="btn-save-oferta-ajax"><i class="fa fa-spin fa-spinner"></i>Salvar</button>
			</div>
		</form>
	</div>
</div>
<div class="form-add-mask"></div>

<script type="text/javascript">
	/** CKEditor config */
	ClassicEditor
		.create( document.querySelector( '#editor_texto' ),{
			language: 'pt-br',
			toolbar: [ 
				'heading', 
				'|', 
				'bold', 'italic', 'link', 
				'|', 
				'bulletedList', 'numberedList', 
				'imageUpload',  
			],
			heading: {
				options: [
					{ model: 'paragraph', title: 'Parágrafo', class: 'ck-heading_paragraph' },
					{ model: 'heading2', view: 'h2', title: 'Subtítulo', class: 'ck-heading_heading2' }
				]
			},
			link: {
				decorators: {
					openInNewTab: {
						mode: 'manual',
						label: 'Abrir em uma nova janela',
						defaultValue: true,         // This option will be selected by default.
						attributes: {
							target: '_blank',
						}
					}
				}
			},
			// cloudServices: {
			// 	tokenUrl: 'https://example.com/cs-token-endpoint',
			// 	uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
			// }
			// Instruções backend (upload de imagens): https://ckeditor.com/ckeditor-cloud-services/easy-image/
		} )
		.then( editor => {
			window.editor = editor;
			window.editorMain = editor;
		} )
		.catch( err => {
			console.error( err.stack );
		} );

		ClassicEditor
		.create( document.querySelector( '#editor_resumo_texto' ),{
			language: 'pt-br',
			toolbar: [ 
				'heading', 
				'|', 
				'bold', 'italic', 'link', 
				'|', 
				'bulletedList', 'numberedList', 
				'imageUpload',  
			],
			heading: {
				options: [
					{ model: 'paragraph', title: 'Parágrafo', class: 'ck-heading_paragraph' },
					{ model: 'heading2', view: 'h2', title: 'Subtítulo', class: 'ck-heading_heading2' }
				]
			},
			link: {
				decorators: {
					openInNewTab: {
						mode: 'manual',
						label: 'Abrir em uma nova janela',
						defaultValue: true,         // This option will be selected by default.
						attributes: {
							target: '_blank',
						}
					}
				}
			},
			// cloudServices: {
			// 	tokenUrl: 'https://example.com/cs-token-endpoint',
			// 	uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
			// }
			// Instruções backend (upload de imagens): https://ckeditor.com/ckeditor-cloud-services/easy-image/
		} )
		.then( editor_resumo_texto => {
			window.editor_resumo_texto = editor_resumo_texto;
		} )
		.catch( err => {
			console.error( err.stack );
		} );
</script>

@if(isset($oferta_tags) && count($oferta_tags) > 0)
	<script>
		var arrTags = <?php echo json_encode($oferta_tags); ?>;

		$(document).ready(function(){
			$('.select2-tags').val(arrTags).trigger('change');
		});
	</script>
@endif

<script type="text/javascript">

	$(document).ready(function(){

		@if(isset($oferta) && $oferta->id)
			Oferta.loadProdutosOferta({{ $oferta->id }});
		@else
			Oferta.loadProdutosOferta(0);
		@endif

		$(document).on('change', '#percentual_desconto', function(){
			Oferta.calcularPrecoOferta();
		});

		$(document).on('change', '#preco_oferta', function(){
			Oferta.calcularDesconto();
		});

		$(document).on('change', '[name^="produto-preco-venda"]', function(){
			Oferta.calcularPrecoOferta();
		});

		$(document).on('change', '[name="preco_mercado"]', function(){
			Oferta.calcularDesconto();
		});

		$('#add-produto-to-oferta').click(function(){

			var id_produto         = $(".select2-produto").val();
			var text_produto       = $(".select2-produto option:selected").text();
			var quantidade_produto = $("#qtd_produto").val();

			if(quantidade_produto){

				if (id_produto) {

					var dataSelect = $(".select2-produto").select2('data')[0];

					console.log(dataSelect);

					var produto = {
						id: 	id_produto,
						nome: 	text_produto,
						quantidade: 	quantidade_produto,
						preco_mercado:  dataSelect.preco_mercado,
						preco_custo: 	dataSelect.preco_custo,
						custo_efetivo: 	dataSelect.custo_efetivo,
						preco_venda: 	dataSelect.preco_venda,
						custo_efetivo: dataSelect.custo_efetivo
					};

					Oferta.loadProdutoOferta(produto);

				}else{
					alertUtil.alertWarning('Você deve selecionar um produto');
				}
			}else{
				alertUtil.alertWarning('Você deve digitar a quantidade');
			}
			
		});

		$(document).on('click', '.removeProduto', function(){
			var $tr = $(this).closest('tr');
			$tr.remove();
			Oferta.calcularOferta();
			Oferta.calcularDesconto();
		});

		/** Anexo de imagem */
		$(document).on('click', '.img-anex', function(){
			$('.upload-img').trigger('click');
		});

		$(document).on('change', '.upload-img', function(){

			var file = $('.upload-img')[0].files[0];
			// Attach file
			var formData = new FormData();
			formData.append('file', file);

			console.log('file');
			console.log(file);

			$.ajax({
				url: "/admin/oferta/upload-imagem",
				type: "post",
				data: formData,
				processData : false,
				contentType : false,
				success: function(data) {
					var imgUrl = data.url;
					$('.img-anex .anex-min').attr('src', imgUrl);
					$('#thumbnail').val(data.filename);
					$('.img-anex .conten').hide();
					$('.img-anex .anex-min').show();
				},
			});

		});

		$('#btn-save-oferta-ajax').click(function(){
			console.log('save-oferta-ajax');
			Oferta.saveFormOferta();
		});

		$('.select2-tags').select2();

		$(".select2-produto").select2({
			minimumInputLength: 2,
			placeholder: 'Buscar Produtos',
			ajax: {
				url: '/admin/produto/buscar',
				dataType: 'json',
				type: "POST",
				data: function (term) {
					return {
						term 	: term,
						origem  : 'oferta'
					};
				},
				processResults: function (data, params) {
					console.log(data);
		          return {
			        results: $.map(data.items, function (item) {
			        	return {
								text: item.nome+' - SKU: '+item.sku,
								slug: item.slug,
								id: item.id,
								preco_mercado: item.preco_mercado,
								preco_custo: item.preco_custo,
								custo_efetivo: item.custo_efetivo,
								preco_venda: item.preco_de_venda,
								disponibilidade : item.disponibilidade,
								custo_efetivo: item.custo_efetivo
							}
						})
			       
			      };
			    }
			}
		});

	});

</script>