@extends('templates.adweb-admin')

@section('styles')
	<link rel="stylesheet" href="{{ asset('adweb/tema-1/tema-1.css') }}">
	<style media="screen">
		.produto{
			position: relative;
			padding-top: 40px;
		}
		.produto .remove_produto{
			position: absolute;
			right: 10px;
			top: 10px;
		}
		.imagem-produto{
			background-size: cover;
			background-repeat: no-repeat;
			height: 100px;
			background-position: center center;
		}
	</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 tema-1">
			<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>
				<p>
					{{$pagina->descricao}}
				</p>
			</section>
			<section class="edit-section text-center mb-3" 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-6">
								<div class="imagem-produto" style="background-image: url('{{$produto->imagem}}')">
								</div>
							</div>
						@endforeach
					</div>
				@endif
				<i class="fa fa-plus mt-4"></i> Adicionar Produtos
			</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="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 Produtos</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 uma imagem para cada produto inserido.
					</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">
						<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 produto</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="">Valor</label>
										<input type="text" class="form-control number money" placeholder="10,00" name="produtos[0][valor]" value="">
									</div>
									<div class="form-group">
										<label for="">Link</label>
										<input type="text" required class="form-control" placeholder="https://api.whatsapp.com/send?phone=559999999999" 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 produto</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">
										<label for="">Valor</label>
										<input type="text" class="form-control number money" placeholder="10,00" name="produtos[{{$i}}][valor]" value="{{number_format($produto->valor,2,',','.')}}">
									</div>
									<div class="form-group mb-4">
										<label for="">Link</label>
										<input type="text" required class="form-control" name="produtos[{{$i}}][link]" value="{{$produto->link}}" placeholder="https://api.whatsapp.com/send?phone=559999999999">
									</div>
								</div>
															@endforeach
						</div>
						<div class="box mb-4 text-center" id="add_link">
							<i class="fa fa-plus"></i> Adicionar Produtos
						</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 produto</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">
								<label for="">Valor</label>
								<input type="text" class="form-control number money" placeholder="10,00" name="valor" value="">
							</div>
							<div class="form-group mb-4">
								<label for="">Link</label>
								<input type="text" required class="form-control" name="link" value="" placeholder="https://api.whatsapp.com/send?phone=559999999999">
							</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