@extends('layouts.admins.playground')

@section('content')

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


	<div class="content v2 list-admin">
		<div class="box top">
			<div class="head-box">
				<img src="img/icons_big/ofertas.png" alt="Ofertas">
				<h3>Teste</h3>
				<a href="#" class="main-btn-style" open-form-add><img src="img/plus_admin.png" alt="Adicionar"> Adicionar oferta</a>
			</div>

			<div class="filtros-box">
				<div class="filtro-item" data-filter="disponibilidade">
					<span class="filtro-text abre-drop-new">
						Disponibilidade: <strong>qualquer</strong>
						<img src="img/rmv-filter.png" alt="Remover filtro" class="rmv-filter">
					</span>

					<ul class="drop-new">
						<li data-value="Item-1">
							<span>Alta</span>
						</li>
						<li data-value="Item-2">
							<span>Baixa</span>
						</li>
					</ul>
				</div>

				<div class="filtro-item number-options" data-filter="preco-mercado">
					<span class="filtro-text abre-drop-new">
						Preço mercado: <strong>qualquer</strong>
						<img src="img/rmv-filter.png" alt="Remover filtro" class="rmv-filter">
					</span>

					<ul class="drop-new">
						<li data-tipo="maior">
							<i class="check active"></i>
							<div class="input-group">
								<input type="number" name="maior" class="input-item" required="">
								<label>Maior que:</label>
							</div>
						</li>
						<li data-tipo="menor">
							<i class="check"></i>
							<div class="input-group">
								<input type="number" name="menor" class="input-item" required="">
								<label>Menor que:</label>
							</div>
						</li>
						<li data-tipo="entre" class="double">
							<i class="check"></i>
							<div class="input-group">
								<input type="number" name="entre-first" class="input-item" required="">
								<label>Entre:</label>
							</div>
							<div class="input-group">
								<input type="number" name="entre-last" class="input-item" required="">
								<label>e:</label>
							</div>
						</li>
					</ul>
				</div>

				<div class="filtro-item" data-filter="preco-oferta">
					<span class="filtro-text abre-drop-new">
						Preço oferta: <strong>qualquer</strong>
						<img src="img/rmv-filter.png" alt="Remover filtro" class="rmv-filter">
					</span>

					<ul class="drop-new">
						<li data-value="Item-1">
							<span>Item 1</span>
						</li>
						<li data-value="Item-2">
							<span>Item 2</span>
						</li>
					</ul>
				</div>

				<div class="filtro-item disabled" data-filter="data">
					<span class="filtro-text abre-drop-new">
						Data: <strong>qualquer</strong>
						<img src="img/rmv-filter.png" alt="Remover filtro" class="rmv-filter">
					</span>

					<ul class="drop-new">
						<li data-value="Item-1">
							<span>Item 1</span>
						</li>
						<li data-value="Item-2">
							<span>Item 2</span>
						</li>
					</ul>
				</div>

				<div class="filtro-item disabled" data-filter="id">
					<span class="filtro-text abre-drop-new">
						ID: <strong>qualquer</strong>
						<img src="img/rmv-filter.png" alt="Remover filtro" class="rmv-filter">
					</span>

					<ul class="drop-new">
						<li data-value="Item-1">
							<span>Item 1</span>
						</li>
						<li data-value="Item-2">
							<span>Item 2</span>
						</li>
					</ul>
				</div>

				<div class="mais-filtros" data-filter="id">
					<span class="filtro-text abre-drop-new">
						Mais filtros
					</span>

					<ul class="drop-new checkbox">
						<li data-value="disponibilidade">
							<i class="check active"></i>
							<span>Disponibilidade</span>
						</li>
						<li data-value="preco-mercado">
							<i class="check active"></i>
							<span>Preço mercado</span>
						</li>
						<li data-value="preco-oferta">
							<i class="check active"></i>
							<span>Preço oferta</span>
						</li>
						<li data-value="data">
							<i class="check"></i>
							<span>Data</span>
						</li>
						<li data-value="id">
							<i class="check"></i>
							<span>ID</span>
						</li>
					</ul>
				</div>

				<div class="busca-filtros">
					<div class="input-group">
						<input type="text" name="search-filtros" class="input-item" required="">
						<label>Pesquisar</label>
						<span class="input-group-btn">
							<button type="submit" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
						</span>
					</div>
				</div>
			</div>
			<div class="hide-desktop toggle-filter">
				<span>Mostrar filtros</span>
				<i class="fa fa-caret-down"></i>
			</div>
		</div>

		<div class="box selected-box">
			<div class="text-selected">
				<span data-quant-selec>2</span> itens selecionado(s). 
				<strong class="abre-drop-new">Ação <i class="fa fa-caret-down"></i></strong>
				<ul class="drop-new">
					<li data-value="editar">
						<a href="#">Editar</a>
					</li>
					<li data-value="excluir" excluir-link>
						<span>Excluir</span>
					</li>
					<li data-value="duplicar">
						<span>Duplicar</span>
					</li>
				</ul>
			</div>
		</div>

		<div class="box table-box">
			<div class="topo-linhas">
				<div class="col size1" data-col="check">
					<span class="check"></span>
				</div>
				<div class="col size2" data-col="id">
					<span>ID</span>
					<span class="order">
						<i class="fa fa-chevron-down"></i>
					</span>
				</div>
				<div class="col size3" data-col="data">
					<span>Data</span>
					<span class="order active">
						<i class="fa fa-chevron-down"></i>
					</span>
				</div>
				<div class="col size5" data-col="titulo">
					<span>Título</span>
					<span class="order">
						<i class="fa fa-chevron-down"></i>
					</span>
				</div>
				<div class="col size6" data-col="subtitulo">
					<span>Subtítulo</span>
					<span class="order">
						<i class="fa fa-chevron-down"></i>
					</span>
				</div>
				<div class="col invert size7" data-col="preco-mercado">
					<span class="order">
						<i class="fa fa-chevron-down"></i>
					</span>
					<span>Preço mercado</span>
				</div>
				<div class="col invert size7" data-col="preco-oferta">
					<span class="order">
						<i class="fa fa-chevron-down"></i>
					</span>
					<span>Preço oferta</span>
				</div>
				<div class="col invert size4" data-col="disponibilidade">
					<span class="order">
						<i class="fa fa-chevron-down"></i>
					</span>
					<span>Disponibilidade</span>
				</div>
			</div>
			<div class="linhas">
				<?php for($i = 0; $i <= 4; $i++): ?>
					<div class="linha">
						<div class="col size1 mob check-col">
							<span class="check"></span>
						</div>
						<div class="col size2">
							<strong>10432</strong>
						</div>
						<div class="col size3">
							<span>23/10/2020</span>
						</div>
						<div class="col size5 mob">
							<a href="#">Rocca Delle Macìe</a>
						</div>
						<div class="col size6 mob">
							<span>Montepulciano D'Abruzzo 2017</span>
						</div>
						<div class="col invert size7">
							<span>R$ 90,00</span>
						</div>
						<div class="col invert size7">
							<span>R$ 149,90</span>
						</div>
						<div class="col invert size4">
							<span>3</span>
						</div>
						<div class="opcoes-linha">
							<span class="pontinhos abre-drop-new"></span>

							<ul class="drop-new" data-id="10432">
								<li>
									<a href="#">Editar</a>
								</li>
								<li excluir-link>
									<span>Excluir</span>
								</li>
								<li>
									<span>Duplicar</span>
								</li>
								<li>
									<a href="#" target="_blank">Preview</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="linha">
						<div class="col size1 mob check-col">
							<span class="check"></span>
						</div>
						<div class="col size2">
							<strong>10467</strong>
						</div>
						<div class="col size3">
							<span>17/07/2020</span>
						</div>
						<div class="col size5 mob">
							<a href="#">Don Abel</a>
						</div>
						<div class="col size6 mob">
							<span>Merlot Reserva 2014</span>
						</div>
						<div class="col invert size7">
							<span>R$ 83,00</span>
						</div>
						<div class="col invert size7">
							<span>R$ 56,90</span>
						</div>
						<div class="col invert size4">
							<span>233</span>
						</div>
						<div class="opcoes-linha">
							<span class="pontinhos abre-drop-new"></span>

							<ul class="drop-new" data-id="10467">
								<li>
									<a href="#">Editar</a>
								</li>
								<li excluir-link>
									<span>Excluir</span>
								</li>
								<li>
									<span>Duplicar</span>
								</li>
								<li>
									<a href="#" target="_blank">Preview</a>
								</li>
							</ul>
						</div>
					</div>
				<?php endfor; ?>
			</div>
			<div class="pagin-linhas" data-paginacao-maxima="7">
				<div class="left">
					<span>Ver</span>
					<select name="itens-per-page">
						<option value="10" selected default>10</option>
						<option value="20">20</option>
						<option value="30">30</option>
						<option value="40">40</option>
						<option value="50">50</option>
					</select>
					<span>por página</span>
				</div>

				<div class="centered">
					<div class="pager l-btn">
						<i class="fa fa-chevron-left"></i>
					</div>

					<span data-page="1" class="active">1</span>
					<span data-page="2">2</span>
					<span data-page="3">3</span>
					<span data-page="4">4</span>

					<div class="pager r-btn">
						<i class="fa fa-chevron-right"></i>
					</div>
				</div>

				<div class="left">
					<span>Ir para página</span>
					<select name="itens-per-page">
						<option value="1" selected default>1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
					</select>
				</div>
			</div>
			<div class="loading-linhas">
				<i class="fa fa-spin fa-spinner"></i>
			</div>
		</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>

<div class="form-add-box">
	<div class="top-add-form">
		<span>Novo lorem ipsum</span>
		<img src="img/close-form-add.png" alt="Close">
	</div>

	<div class="cont">
		<form action="#">
			<div class="cont-form-box">
				<ul class="tabs-novo-list">
					<li data-tab="1" class="active">Lorem 1</li>
					<li data-tab="2">Lorem 2</li>
					<li data-tab="3">Lorem 3</li>
				</ul>

				<div class="tabs-novo active" data-tab="1">
					<div class="bloco-form-big">
						<div class="right">
							<h5>Galeria de imagens</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">
									<label>Lorem</label>
								</div>
								<div class="grupo-novo">
									<input type="text" class="input-novo">
									<label class="required">Lorem ipsum</label>
								</div>
							</div>

							<div class="form-inteiro">
								<h5>Lorem ipsum dolor</h5>
								<div class="checkbox-list">
									<div class="checkbox-item">
										<input type="checkbox" name="check-list" id="lorem-1-check">
										<label for="lorem-1-check"><span class="simbol"></span> Lorem 1</label>
									</div>
									<div class="checkbox-item">
										<input type="checkbox" name="check-list" id="lorem-2-check">
										<label for="lorem-2-check"><span class="simbol"></span> Lorem 2</label>
									</div>
									<div class="checkbox-item">
										<input type="checkbox" name="check-list" id="lorem-3-check">
										<label for="lorem-3-check"><span class="simbol"></span> Lorem 3</label>
									</div>
									<div class="checkbox-item">
										<input type="checkbox" name="check-list" id="lorem-4-check">
										<label for="lorem-4-check"><span class="simbol"></span> Lorem 4</label>
									</div>
								</div>
							</div>

							<div class="form-metade">
								<div class="grupo-novo">
									<select class="input-novo">
										<option value="" selected disabled>Selecione</option>
										<option value="1">Opção 1</option>
										<option value="2">Opção 2</option>
										<option value="3">Opção 3</option>
									</select>
									<label>Lorem</label>
								</div>
								<div class="grupo-novo">
									<input type="text" class="input-novo">
									<label class="opcional">Lorem ipsum</label>
								</div>
							</div>

							<div class="form-metade">
								<div class="grupo-novo">
									<input type="date" class="input-novo" max="2021-01-20">
									<label>Lorem</label>
								</div>
								<div class="grupo-novo">
									<input type="text" class="input-novo">
									<label class="required">Lorem ipsum</label>
								</div>
							</div>

							<div class="form-inteiro">
								<h5>Lorem ipsum dolor 2</h5>
								<div class="radio-list">
									<div class="radio-item">
										<input type="radio" name="radio-check" id="lorem-1-radio">
										<label for="lorem-1-radio"><span class="simbol"></span> Lorem 1</label>
									</div>
									<div class="radio-item">
										<input type="radio" name="radio-check" id="lorem-2-radio">
										<label for="lorem-2-radio"><span class="simbol"></span> Lorem 2</label>
									</div>
									<div class="radio-item">
										<input type="radio" name="radio-check" id="lorem-3-radio">
										<label for="lorem-3-radio"><span class="simbol"></span> Lorem 3</label>
									</div>
									<div class="radio-item">
										<input type="radio" name="radio-check" id="lorem-4-radio">
										<label for="lorem-4-radio"><span class="simbol"></span> Lorem 4</label>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="bloco-form-big">
						<div class="right">
							<textarea name="editor1" id="editor">
								Digite aqui uma descrição
							</textarea>
						</div>
					</div>
				</div>

				<div class="tabs-novo" data-tab="2">
					<div class="bloco-form-big">
						<div class="right">
							<h5>Lorem ipsum 2</h5>
						</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="submit">Salvar lorem</button>
			</div>
		</form>
	</div>
</div>
<div class="form-add-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 );
		} );
</script>

@endsection