@extends('layouts.admins.fornecedor')

@section('content')

<div class="content-wrapper">
	<section class="content-header v2">
		<h1>
			Amostras
			<small>Listagem</small>
		</h1>
		<ol class="breadcrumb">
			<li><a href="{{ url('admin') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li>
			<li class="active">Nova amostra</li>
		</ol>
	</section>

	<div class="content v2 list-admin">
		<div class="box form">
			<form action="">
				<div class="head-form">
					<div class="flex-head">
						<h3>Nova amostra</h3>
						<button class="main-btn-style" type="submit">Salvar</button>
					</div>
				</div>

				<div class="bloco-form-big">
					<div class="left">
						<h4>Produtos</h4>
						<p>Informações sobre os produtos que você enviará para nós.</p>
					</div>
					<div class="right" id="list-prods">
						<div class="form-metade" id="clone-produto">
							<img src="img/site/trash.svg" class="delete" alt="Deletar" title="Deletar">
							<div class="grupo-novo">
								<select name="produto[]" class="input-novo">
									<option value="" disabled selected>Selecione</option>
									<option value="Rocca Delle Macìe Rubizzo 2018">Rocca Delle Macìe Rubizzo 2018</option>
									<option value="Don Abel Merlot Reserva 2014">Don Abel Merlot Reserva 2014</option>
								</select>
								<label>Produto</label>
							</div>
							<div class="grupo-novo">
								<input type="number" name="quantidade[]" class="input-novo" required>
								<label class="required">Quantidade</label>
							</div>
						</div>
						<span class="add-prod"><img src="img/site/add-prod.svg" alt="Adicionar produto"> Adicionar outro produto</span>
					</div>
				</div>

				<div class="bloco-form-big">
					<div class="left">
						<h4>Envio</h4>
						<p>Informações do envio que você fará para nossa equipe de avaliadores.</p>
					</div>
					<div class="right">
						<div class="form-metade">
							<div class="grupo-novo">
								<input type="number" name="rastreamento" class="input-novo" required>
								<label class="required">Código de rastreamento</label>
								<small>Pode ser preenchido em outro momento.</small>
							</div>
							<div class="grupo-novo">
								<select name="transportadora" class="input-novo">
									<option value="" disabled selected>Selecione</option>
									<option value="Correios">Correios</option>
									<option value="Transporte X">Transporte X</option>
								</select>
								<label>Transportadora</label>
							</div>
						</div>

						<div class="endereco-box">
							<h3>Informações para envio</h3>
							<p>Endereço: Rua Olavo Bilac, 61 – Bairro Rio Branco – Caxias do Sul - RS<br><br>CEP: 95010-080<br><br>Remetente: Wagner Cecconello</p>
						</div>
					</div>
				</div>

				<div class="bottom-form">
					<a href="#" class="main-btn-style cancel">Cancelar</a>
					<button class="main-btn-style" type="submit">Salvar</button>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="confirm-box" excluir-box>
	<img src="img/confirm-icon.png" alt="Confirmação">
	<strong>Tem certeza que deseja excluir <i>1</i> iten(s)?</strong>
	<span>Essa ação é irreversível</span>

	<div class="btns">
		<button class="main-btn-style confirm-yes">Sim, excluir</button>
		<button class="main-btn-style confirm-no">Não</button>
	</div>
</div>
<div class="confirm-mask"></div>

<script src="./plugins/ckeditor5-build-classic/build/ckeditor.js"></script>
<script src="./plugins/ckeditor5-build-classic/build/translations/pt-br.js"></script>
<script type="text/javascript">
	/** CKEditor config */
	ClassicEditor
		.create( document.querySelector( '#editor' ),{
			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' }
				]
			},
			// 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;
		} )
		.catch( err => {
			console.error( err.stack );
		} );

		$(document).on('ready', function(){
			$(document).on('click', '.add-prod', function(){
				var $clone = $('#clone-produto').clone().removeAttr('id');
				$clone.find('input').val('');
				$clone.find('select').val('');
				$(this).before($clone);
			});
			$(document).on('click', '.delete', function(){
				$(this).closest('.form-metade').remove();
			});
		});
</script>

@endsection