@extends('templates.adweb-admin')

@section('styles')
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.1.0/introjs.min.css" integrity="sha512-631ugrjzlQYCOP9P8BOLEMFspr5ooQwY3rgt8SMUa+QqtVMbY/tniEUOcABHDGjK50VExB4CNc61g5oopGqCEw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<style media="screen">
		.box{
			min-height: 250px;
		}
		.action-button{
		    position: relative;
		    width: 50px;
		    height: 50px;
		    border-radius: 50%;
		    font-size: 16px;
		    z-index: 2;
		    text-align: center;
		    margin-top: -30px;
		}
		.edit-button{
		    background: #fff;
		    float: right;
		    box-shadow: 0 0 3px 1px #ebedef;
		}
		.item{
			position: relative;
		}
		.ordem .input-group-text{
			height: 38px;
		}
	</style>
@endsection

@section('navigation')
<div class="row">
	<div class="col-2 align-items-center d-flex justify-content-center">
		<a href="{{route('adweb.index')}}"><i style="font-size: 20px;" class="fa fa-home"></i></a>
  	</div>
  	<div class="col-8">
	  	<a class="copyUrl" href="javascript:void(0)" id="dominio">
		  {{Auth::user()->solicitacao->configuracao->site_app_url}}
	  	</a><br/>
	  	Este é o link para o seu site
  	</div>
	<div class="col-2 align-items-center d-flex justify-content-center">
		<a href="javascript:void(0)" title="Clique aqui para copiar o link do seu site" class="btn btn-primary copyUrl"><i class="fa fa-copy"></i></a>
	</div>
</div>
@endsection

@section('conteudo')
	<div class="container-fluid">
		<div class="row mb-5">
			<div class="col-6">
				<p class="mt-4 mb-4 text-secondary">Minhas Páginas</p>
			</div>
			<div class="col-6 text-end">
				<a href="{{route('adweb.config.edit')}}" class="config-button"><i class="fa fa-cog"></i></a>
			</div>
		</div>
		<div class="row">
			<a href="{{route('adweb.temas')}}" class="col-6">
				<div class="box d-flex flex-column align-items-center justify-content-center mb-5" id="add_pagina">
					<p class="text-center">
						<i class="fa fa-plus"></i>
					</p>
					<p class="text-center">
						<b>Adicionar Página</b>
					</p>
				</div>
			</a>
			<div class="col-6 item mb-5" id="pagina_tutorial">
				<div id="ordem_0" data-ordem="0" class="ordenacao">
					<a href="#" data-id="0" id="pagina0">
						<div class="main box d-flex flex-column align-items-center justify-content-center link-1">
							<div class="form-control mb-4" type="text" name="" value="" style="width: 100%; height: 40px;"></div>
							<div class="form-control mb-4" type="text" name="" value="" style="width: 100%; height: 40px;"></div>
							<div class="form-control mb-4" type="text" name="" value="" style="width: 100%; height: 40px;"></div>
						</div>
						<button type="button" class="btn btn-light action-button edit-button" name="button"><i class="fa fa-edit"></i></button>
					</a>
				</div>
				<button type="button" class="btn btn-danger action-button remove-button">
					<i class="fa fa-trash"></i>
				</button>
				<div class="ordem text-center mt-4">
					<div class="input-group mb-3">
						<div class="input-group-prepend">
							<span class="input-group-text"><i class="fa fa-minus"></i></span>
						</div>
						<input type="number" disabled class="form-control input-ordem text-center" placeholder="0" value="">
						<div class="input-group-append">
							<span class="input-group-text"><i class="fa fa-plus"></i></span>
						</div>
					</div>
				</div>
			</div>
			@foreach ($paginas as $key => $pagina)
				<div class="col-6 item mb-5">
					<div id="ordem_{{$key+1}}" data-ordem="{{$pagina->ordem}}" class="ordenacao">
						<a href="{{route('adweb.edit',$pagina->id)}}" data-id="{{$pagina->id}}" id="pagina{{$pagina->id}}">
							@include('adweb.'.$pagina->tema.'.preview')
							<button type="button" class="btn btn-light action-button edit-button" name="button"><i class="fa fa-edit"></i></button>
						</a>
					</div>
					<button type="button" class="btn btn-danger action-button remove-button" data-bs-toggle="modal" data-bs-target="#removeModal{{$pagina->id}}">
						<i class="fa fa-trash"></i>
					</button>
					<div class="ordem text-center mt-4" data-ordem="{{$pagina->ordem}}">
						<div class="input-group mb-3">
							<div class="input-group-prepend">
								<span class="input-group-text" onclick="add_ordem(this,'ordem_{{$key}}')"><i class="fa fa-minus"></i></span>
							</div>
							<input type="number" disabled class="form-control input-ordem text-center" placeholder="0" value="{{$key+1}}">
							<div class="input-group-append">
								<span class="input-group-text" onclick="add_ordem(this,'ordem_{{$key+2}}')"><i class="fa fa-plus"></i></span>
							</div>
						</div>
					</div>
				</div>
				<!-- Modal -->
				<div class="modal fade" id="removeModal{{$pagina->id}}" tabindex="-1" aria-labelledby="removeModal{{$pagina->id}}Label" aria-hidden="true">
				  	<div class="modal-dialog">
				    	<div class="modal-content">
				      		<div class="modal-header">
				        		<h5 class="modal-title" id="removeModal{{$pagina->id}}Label">Atenção!</h5>
				        		<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				      		</div>
				      		<div class="modal-body">
				        		<p>
									<b>Tem certeza que deseja excluir essa página?</b>
								</p>
								<p>
									Ao excluir uma página todas as informações relacionadas a ela também será removida.
								</p>
				      		</div>
				      		<div class="modal-footer">
                                <form class="confirmacao" action="{{route('adweb.destroy',$pagina->id)}}" method="POST">
									{{ csrf_field() }}
                                    <input name="_method" type="hidden" value="DELETE">
				        			<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
				        			<button type="submit" class="btn btn-danger">Excluir</button>
								</form>
				      		</div>
				    	</div>
				  	</div>
				</div>
			@endforeach
		</div>
	</div>
@endsection

@section('scripts')
	<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.1.0/intro.min.js" integrity="sha512-vpRYyG0wwpTzFdMa1fWEV6GLWfJiiKG1W7dCPuIuvm2kbZMUA8jnokV84rdUft8AF6ih83/ItbmP/fDzNjVxsA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script type="text/javascript">
		function add_ordem(el,id){
			var proximaOrdem = $("#"+id);
			var ordemAtual = $(el).parents('.item').find('.ordenacao').first();
			var pagina = ordemAtual.children('a').attr('data-id');
			if(proximaOrdem.length > 0){
				var html1 = proximaOrdem.html();
				var html2 = $(el).parents('.item').find('.ordenacao').html();

				proximaOrdem.parents('.item').hide();
				ordemAtual.parents('.item').hide();

				proximaOrdem.html(html2);
				ordemAtual.html(html1);

				proximaOrdem.parents('.item').fadeIn();
				ordemAtual.parents('.item').fadeIn();

				var ordem = proximaOrdem.attr('data-ordem');
				$.post('{{url('/')}}/api/pagina/ordenar/'+pagina,{'ordem' : ordem},function(retorno){
				});
			}
		}

		if(!window.localStorage.getItem('tutorial')){
			introJs().setOptions({
				nextLabel: '>',
				prevLabel: '<',
				doneLabel: 'Finalizar',
				skipLabel: 'Sair',
		  		steps: [
			  		{
			    		title: 'Bem vindo ao Adweb Sites',
			    		intro: 'Nesse pequeno tutorial você irá aprender como criar um site simples porém funcional para o seu negócio!'
			  		},
			  		{
			    		element: document.querySelector('#dominio'),
						title: 'Como configurar meu subdomínio!',
			    		intro: 'Essa será a url do seu site, clicando aqui você pode copiá-la para visualizar seu site em algum navegador web.'
			  		},
			  		{
			    		title: 'Criando uma nova página!',
			    		element: document.querySelector('#add_pagina'),
			    		intro: 'Clicando aqui você poderá criar uma nova página, você deverá escolher um template e o layout da página, depois basta alterar a página com as informações do seu negócio.',
						position: 'bottom'
			  		},
			  		{
			    		title: 'Editando uma página!',
			    		element: document.querySelector('.edit-button'),
			    		intro: 'Clicando aqui você poderá criar editar as informações da sua página.'
			  		},
			  		{
			    		title: 'Excluindo uma página!',
			    		element: document.querySelector('.remove-button'),
			    		intro: 'Aqui você poderá excluir definitivamente uma página. Cuidado, ao excluir uma página todo o conteúdo dessa página també será excluído.'
			  		},
			  		{
			    		title: 'Ordenando suas páginas!',
			    		element: document.querySelector('.ordem'),
			    		intro: 'Clique no "+" ou no "-" para aumentar ou diminuir a ordem da sua página.'
			  		},
			  		{
			    		title: 'Pronto!',
			    		intro: 'Agora você já sabe como trabalhar com o Adweb Sites. Aproveite!'
			  		}
				]
			}).onbeforeexit(function () {
			  $("#pagina_tutorial").remove();
			  window.localStorage.setItem('tutorial',true);
			}).start();
		}
		else{
		  $("#pagina_tutorial").remove();
		}
	</script>
@endsection