@extends('templates.adweb-admin')

@section('styles')
	<style media="screen">
		.link-4{
			background: #fff;
			padding-top: 50px;
			padding-bottom: 50px;
		}
		.link-4 .logo{
			width: 150px;
			height: 150px;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			background-color: #ccc;
			margin: 0 auto;
			border-radius: 50%;
			margin-bottom: 10px;
		}
		.link-4 .social-icons{
			margin-top: 10px;
			margin-bottom: 20px;
		}
		.link-4 .social-icons i{
			font-size: 25px;
			margin-right: 15px;
			color: #333333;
		}
		.link-4 .btn.link{
			background: #ffffff;
			border: 2px solid #000000;
			color: #000000;
		}
		.link-4 .btn.link:hover,
		.link-4 .btn.link:active,
		.link-4 .btn.link:checked,
		.link-4 .btn.link.active{
			background: #333333;
			border: 2px solid #000000;
			color: #ffffff;
		}
		.link-4{
			background: #F784AD;
			color:#fff;
		}
		.botao{
			position: relative;
			padding-top: 40px;
		}
		.botao .remove_botao{
			position: absolute;
			right: 10px;
			top: 10px;
		}
		.link-4 .btn.link{
			background: #F784AD;
			border: 2px solid #fff;
			color: #fff;
		}
		.link-4 .btn.link:hover,
		.link-4 .btn.link:active,
		.link-4 .btn.link:checked,
		.link-4 .btn.link.active{
			background: #fff;
			border: 2px solid #fff;
			color: #F784AD;
		}
	</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-chevron-left"></i></a>
  	</div>
  	<div class="col-10">
	  	<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>
@endsection
@section('conteudo')
	<div class="container-fluid">
		<div class="row">
			<div class="col-6">
				<p class="mt-4 mb-4 text-secondary"><b>Editar Página</b></p>
			</div>
			<div class="col-6 text-end">
				<a href="#" class="config-button" data-bs-toggle="modal" data-bs-target="#configuracaoModal"><i class="fa fa-cog"></i></a>
			</div>
		</div>
		<p class="text-center text-secondary mt-4">
			Toque no campo desejado para editar
		</p>
		<div class="main box link-4">
			<section class="edit-section text-center mb-3" data-bs-toggle="modal" data-bs-target="#logoModal">
				<div class="logo" style="background-image: url('{{$pagina->imagem}}')"></div>
				<p><b>{{$pagina->titulo1}}</b></p>
			</section>
			<section class="edit-section text-center mb-3" data-bs-toggle="modal" data-bs-target="#socialModal">
				<div class="social-icons">
					@if($pagina->facebook)
						<i class="fab fa-facebook"></i>
					@endif
					@if($pagina->instagram)
						<i class="fab fa-instagram"></i>
					@endif
					@if($pagina->youtube)
						<i class="fab fa-youtube"></i>
					@endif
					@if($pagina->linkedin)
						<i class="fab fa-linkedin"></i>
					@endif
					@if($pagina->twitter)
						<i class="fab fa-twitter"></i>
					@endif
					@if($pagina->whatsapp)
						<i class="fab fa-whatsapp"></i>
					@endif
					@if($pagina->email)
						<i class="fa fa-envelope"></i>
					@endif
				</div>
			</section>
			<section class="edit-section text-center mb-3" data-bs-toggle="modal" data-bs-target="#descricaoModal">
				<h1 class="h3">{{$pagina->titulo2}}</h1>
				<p>
					{{$pagina->descricao}}
				</p>
			</section>
			<section class="edit-section text-center mb-3" data-bs-toggle="modal" data-bs-target="#botoesModal">
				@if($pagina->botoes->count() > 0)
					<div class="d-grid gap-2">
						@foreach ($pagina->botoes as $key => $botao)
							<a href="javascript:void(0)" class="btn btn-outline-dark link">{{$botao->texto}}</a>
						@endforeach
					</div>
				@endif
				<i class="fa fa-plus mt-4"></i> Adicionar Links
			</section>
		</div>
	</div>
	<!-- Modal LOGO -->
	<div class="modal fade" id="logoModal" tabindex="-1" aria-labelledby="logoModalLabel" aria-hidden="true">
	  	<div class="modal-dialog modal-dialog-centered">
		    <div class="modal-content">
		      	<div class="modal-header">
		        	<h5 class="modal-title" id="logoModalLabel">Nome e Imagem</h5>
		        	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		      	</div>
		      	<div class="modal-body">
					<p>
						Adicione um nome e uma imagem que representem você ou o tipo de conteúdo que seu público vai encontrar aqui.
					</p>
					<form class="box" action="{{route('adweb.update',$pagina->id)}}" method="post" enctype="multipart/form-data">
						{{ csrf_field() }}
						<input type="hidden" name="_method" value="PUT">
						<div class="form-group mb-4">
							<label for="">Trocar Imagem/Logo</label>
							<input class="form-control" type="file" name="imagem">
						</div>
						<div class="form-group mb-4">
							<label for="">Nome</label>
							<input class="form-control" type="text" name="titulo1" value="{{old('titulo1',$pagina->titulo1)}}">
						</div>
						<div class="d-grid gap-2">
							<button type="submit" name="button" class="btn btn-success">Salvar</button>
						</div>
					</form>
		      	</div>
		    </div>
	  	</div>
	</div>

	<!-- Modal REDES SOCIAIS -->
	<div class="modal fade" id="socialModal" tabindex="-1" aria-labelledby="socialModalLabel" aria-hidden="true">
	  	<div class="modal-dialog modal-dialog-centered">
		    <div class="modal-content">
		      	<div class="modal-header">
		        	<h5 class="modal-title" id="socialModalLabel">Redes sociais</h5>
		        	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		      	</div>
		      	<div class="modal-body">
					<p>
						Configure os seus links de redes sociais. Você deve preencher os links sociais com a URL completa do seu perfil. Ex.: https://instagram.com/seunome
					</p>
		        	<form class="" action="{{route('adweb.update',$pagina->id)}}" method="post">
						{{ csrf_field() }}
						<input type="hidden" name="_method" value="PUT">
						<div class="form-group mb-4">
							<label for="">Seu Facebook</label>
							<input class="form-control" type="text" name="facebook" value="{{old('facebook',$pagina->facebook)}}">
						</div>
						<div class="form-group mb-4">
							<label for="">Seu Instagram</label>
							<input class="form-control" type="text" name="instagram" value="{{old('instagram',$pagina->instagram)}}">
						</div>
						<div class="form-group mb-4">
							<label for="">Seu Youtube</label>
							<input class="form-control" type="text" name="youtube" value="{{old('youtube',$pagina->youtube)}}">
						</div>
						<div class="form-group mb-4">
							<label for="">Seu Linkedin</label>
							<input class="form-control" type="text" name="linkedin" value="{{old('linkedin',$pagina->linkedin)}}">
						</div>
						<div class="form-group mb-4">
							<label for="">Seu Twitter</label>
							<input class="form-control" type="text" name="twitter" value="{{old('twitter',$pagina->twitter)}}">
						</div>
						<div class="form-group mb-4">
							<label for="">Seu Email</label>
							<input class="form-control" type="email" name="email" value="{{old('email',$pagina->email)}}">
						</div>
						<div class="form-group mb-4">
							<label for="">Seu Whatsapp</label>
							<input class="form-control phone" type="text" name="whatsapp" value="{{old('whatsapp',$pagina->whatsapp)}}">
						</div>
						<div class="d-grid gap-2">
							<button type="submit" name="button" class="btn btn-success">Salvar</button>
						</div>
		        	</form>
		      	</div>
		    </div>
	  	</div>
	</div>

	<!-- Modal descrição -->
	<div class="modal fade" id="descricaoModal" tabindex="-1" aria-labelledby="descricaoModalLabel" aria-hidden="true">
	  	<div class="modal-dialog modal-dialog-centered">
		    <div class="modal-content">
		      	<div class="modal-header">
		        	<h5 class="modal-title" id="descricaoModalLabel">Título e descrição</h5>
		        	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		      	</div>
		      	<div class="modal-body">
		        	<form class="" action="{{route('adweb.update',$pagina->id)}}" method="post">
						{{ csrf_field() }}
						<input type="hidden" name="_method" value="PUT">
						<div class="form-group mb-4">
							<label for="">Título</label>
							<input class="form-control" type="text" name="titulo2" value="{{old('titulo2',$pagina->titulo2)}}">
						</div>
						<div class="form-group mb-4">
							<label for="">Descricao</label>
							<textarea class="form-control" name="descricao" rows="5">{!!old('descricao',$pagina->descricao)!!}</textarea>
						</div>
						<div class="d-grid gap-2">
							<button type="submit" name="button" class="btn btn-success">Salvar</button>
						</div>
		        	</form>
		      	</div>
		    </div>
	  	</div>
	</div>

	<!-- Modal botões -->
	<div class="modal fade" id="botoesModal" tabindex="-1" aria-labelledby="botoesModalLabel" aria-hidden="true">
	  	<div class="modal-dialog modal-dialog-centered">
		    <div class="modal-content">
		      	<div class="modal-header">
		        	<h5 class="modal-title" id="botoesModalLabel">Meus Links</h5>
		        	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		      	</div>
		      	<div class="modal-body">
					<p>
						Você deve dar um nome e preencher com uma URL cada link inserido.
					</p>
		        	<form class="" action="{{route('adweb.update',$pagina->id)}}" method="post">
						{{ csrf_field() }}
						<input type="hidden" name="_method" value="PUT">
						<input type="hidden" name="form_botao" value="1">
						<div class="botoes">
							@if($pagina->botoes->count() == 0)
								<div class="box mb-4 botao">
									<button type="button" name="button" class="btn btn-danger remove_botao">
										<i class="fa fa-trash"></i>
									</button>
									<div class="form-group mb-4">
										<label for="">Texto do botão</label>
										<input type="text" required class="form-control" name="botoes[0][texto]" value="">
									</div>
									<div class="form-group">
										<label for="">Link do botão</label>
										<input type="text" required class="form-control" placeholder="ex.:http://www..." name="botoes[0][link]" value="">
									</div>
								</div>
							@endif
														@foreach ($pagina->botoes as $key => $botao)
								<div class="box mb-4 botao">
									<button type="button" name="button" class="btn btn-danger remove_botao">
										<i class="fa fa-trash"></i>
									</button>
									<div class="form-group mb-4">
										<label for="">Texto do botão</label>
										<input type="text" required class="form-control" name="botoes[{{$i}}][texto]" value="{{$botao->texto}}">
									</div>
									<div class="form-group">
										<label for="">Link do botão</label>
										<input type="text" required class="form-control" placeholder="ex.:http://www..." name="botoes[{{$i}}][link]" value="{{$botao->link}}">
									</div>
								</div>
															@endforeach
						</div>
						<div class="box mb-4 text-center" id="add_link">
							<i class="fa fa-plus"></i> Adicionar Links
						</div>
						<div class="d-grid gap-2">
							<button type="submit" name="button" class="btn btn-success">Salvar</button>
						</div>
		        	</form>

					<div id="form_botao_layout" style="display: none;">
						<div class="box mb-4 botao">
							<button type="button" name="button" class="btn btn-danger remove_botao">
								<i class="fa fa-trash"></i>
							</button>
							<div class="form-group mb-4">
								<label for="">Texto do botão</label>
								<input type="text" required class="form-control" name="texto" value="">
							</div>
							<div class="form-group">
								<label for="">Link do botão</label>
								<input type="text" required class="form-control" placeholder="ex.:http://www..." name="link" value="">
							</div>
						</div>
					</div>

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

	<!-- Modal configuração -->
	<div class="modal fade" id="configuracaoModal" tabindex="-1" aria-labelledby="configuracaoModalLabel" aria-hidden="true">
	  	<div class="modal-dialog modal-dialog-centered">
		    <div class="modal-content">
		      	<div class="modal-header">
		        	<h5 class="modal-title" id="configuracaoModalLabel">Configurar página</h5>
		        	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		      	</div>
		      	<div class="modal-body">
					<p>
						Defina as configurações referentes a sua página.
					</p>
		        	<form class="" action="{{route('adweb.update',$pagina->id)}}" method="post">
						{{ csrf_field() }}
						<input type="hidden" name="_method" value="PUT">
						<input type="hidden" name="ativa" value="0">
						<div class="form-check form-switch mb-4">
						  	<input class="form-check-input" name="ativa" value="1" {{old('ativa',$pagina->ativa ? 'checked' : '')}} type="checkbox" id="flexSwitchCheckDefault">
						  	<label class="form-check-label" for="flexSwitchCheckDefault">
								Página ativa<br/>
								<small>Ao desativar sua página, ela não estará mais visível para seus visitantes.</small>
							</label>
						</div>
						<div class="d-grid gap-2">
							<button type="submit" name="button" class="btn btn-success">Salvar</button>
						</div>
		        	</form>
		      	</div>
		    </div>
	  	</div>
	</div>
@endsection

@section('scripts')
	<script type="text/javascript">
		$(document).ready(function() {
			 $("#add_link").click(function(){
				var html = $($("#form_botao_layout").html());
         		var quantidade = $(".botao").length;

 	        	html.find('input').each(function(index, el) {
 		            el.name = 'botoes['+quantidade+']['+el.name+']';
 		        });

				$('.botoes').append(html);
				html.find('.remove_botao').click(remove_botao);

			 });
			 $(".remove_botao").click(remove_botao);
		});
		function remove_botao(){
			$(this).parents('.botao').remove();
		}
	</script>
@endsection