@extends('templates.adweb-admin')

@section('styles')
	<style media="screen">
		.whatsapp-1{
			background: #076056;
			color: #ffffff;
			padding-top: 50px;
			padding-bottom: 50px;
		}
		.whatsapp-1 .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;
		}
		.whatsapp-1 .social-icons{
			margin-top: 10px;
			margin-bottom: 20px;
		}
		.whatsapp-1 .social-icons i{
			font-size: 25px;
			margin-right: 15px;
			color: #333333;
		}
		.whatsapp-1 .btn.link{
			background: #ffffff;
			border: 2px solid #000000;
			color: #000000;
		}
		.whatsapp-1 .btn.link:hover,
		.whatsapp-1 .btn.link:active,
		.whatsapp-1 .btn.link:checked,
		.whatsapp-1 .btn.link.active{
			background: #333333;
			border: 2px solid #000000;
			color: #ffffff;
		}
		.botao{
			position: relative;
			padding-top: 40px;
		}
		.botao .remove_botao{
			position: absolute;
			right: 10px;
			top: 10px;
		}
		.produto{
			background: #fff;
			color: #333;
			padding: 10px;
			border-radius: 10px;
			margin-bottom: 10px;
		}
		.imagem-produto{
			width: 80px;
			height: 80px;
			border-radius: 50%;
			margin-right: 15px;
			float: left;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			background-color: #ccc;
		}
	</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 whatsapp-1">
			<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" data-bs-toggle="modal" data-bs-target="#produtosModal">
				@if($pagina->produtos->count() > 0)
					<div class="row">
						@foreach ($pagina->produtos as $key => $produto)
							<div class="col-12 mb-4">
								<div class="produto">
									<div class="row">
										<div class="col-12">
											<div class="imagem-produto" style="background-image: url('{{$produto->imagem}}')">
											</div>
											<h4>{{$produto->nome}}</h4>
											<p>
												{!!$produto->descricao!!}
											</p>
										</div>
									</div>
									<div class="d-grid gap-2 mt-4 text-center">
										<a class="btn btn-success btn-block" href="javascript:void(0)"><i class="fa fa-whatsapp"></i> Converse comigo</a>
									</div>
								</div>
							</div>
						@endforeach
					</div>
				@endif
				<div class="text-center">
					<i class="fa fa-plus"></i> Adicionar Contatos
				</div>
			</section>
		</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="produtosModal" tabindex="-1" aria-labelledby="produtosModalLabel" aria-hidden="true">
	  	<div class="modal-dialog modal-dialog-centered">
		    <div class="modal-content">
		      	<div class="modal-header">
		        	<h5 class="modal-title" id="produtosModalLabel">Meus Contatos</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 um whatsapp para cada contato
					</p>
		        	<form class="" action="{{route('adweb.update',$pagina->id)}}" method="post" enctype="multipart/form-data">
						{{ csrf_field() }}
						<input type="hidden" name="_method" value="PUT">
						<input type="hidden" name="form_produto" value="1">
						<input type="hidden" name="whatsapp" value="1">
						<div class="produtos">
							@if($pagina->produtos->count() == 0)
								<div class="box mb-4 produto">
									<button type="button" name="button" class="btn btn-danger remove_produto">
										<i class="fa fa-trash"></i>
									</button>
									<div class="form-group mb-4">
										<label for="">Imagem</label>
										<input class="form-control" type="file" name="produtos[0][imagem]">
									</div>
									<div class="form-group mb-4">
										<label for="">Nome do contato</label>
										<input type="text" required class="form-control" name="produtos[0][nome]" value="">
									</div>
									<div class="form-group mb-4">
										<label for="">Descrição</label>
										<textarea class="form-control" name="produtos[0][descricao]"></textarea>
									</div>
									<div class="form-group">
										<label for="">Whatsapp</label>
										<input type="text" required class="form-control phone" placeholder="(00) 00000-0000" name="produtos[0][link]" value="">
									</div>
								</div>
							@endif
														@foreach ($pagina->produtos as $key => $produto)
								<div class="box mb-4 produto">
									<button type="button" name="button" class="btn btn-danger remove_produto">
										<i class="fa fa-trash"></i>
									</button>
									@if($produto->imagem)
										<img src="{{$produto->imagem}}" class="img-fluid" alt="">
										<input type="hidden" name="produtos[{{$i}}][imagem_antiga]" value="{{$produto->imagem}}">
									@endif
									<div class="form-group mb-4">
										<label for="">Trocar Imagem</label>
										<input class="form-control" type="file" name="produtos[{{$i}}][imagem]">
									</div>
									<div class="form-group mb-4">
										<label for="">Nome do contato</label>
										<input type="text" required class="form-control" name="produtos[{{$i}}][nome]" value="{{$produto->nome}}">
									</div>
									<div class="form-group mb-4">
										<label for="">Descrição</label>
										<textarea class="form-control" name="produtos[{{$i}}][descricao]">{{$produto->descricao}}</textarea>
									</div>
									<div class="form-group mb-4">
										<label for="">Whatsapp</label>
										<input type="text" required class="form-control phone" name="produtos[{{$i}}][link]" value="{{str_replace('https://wa.me/55','',$produto->link)}}" placeholder="(00) 00000-0000">
									</div>
								</div>
															@endforeach
						</div>
						<div class="box mb-4 text-center" id="add_link">
							<i class="fa fa-plus"></i> Adicionar Contatos
						</div>
						<div class="d-grid gap-2">
							<button type="submit" name="button" class="btn btn-success">Salvar</button>
						</div>
		        	</form>

					<div id="form_produto_layout" style="display: none;">
						<div class="box mb-4 produto">
							<button type="button" name="button" class="btn btn-danger remove_produto">
								<i class="fa fa-trash"></i>
							</button>
							<div class="form-group mb-4">
								<label for="">Imagem</label>
								<input class="form-control" type="file" name="imagem">
							</div>
							<div class="form-group mb-4">
								<label for="">Nome do contato</label>
								<input type="text" required class="form-control" name="nome" value="">
							</div>
							<div class="form-group mb-4">
								<label for="">Descrição</label>
								<textarea class="form-control" name="descricao"></textarea>
							</div>
							<div class="form-group mb-4">
								<label for="">Whatsapp</label>
								<input type="text" required class="form-control phone" name="link" value="" placeholder="(00) 00000-0000">
							</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_produto_layout").html());
         		var quantidade = $(".produto").length;

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

				$('.produtos').append(html);
				html.find('.remove_produto').click(remove_produto);
				mascaras();
			 });
			 $(".remove_produto").click(remove_produto);
		});
		function remove_produto(){
			$(this).parents('.produto').remove();
		}
	</script>
@endsection