@extends('layouts.app') 

@section('content')

<div id="newsletter" class="container-fluid container-site pt-3">  

	<div class="row mb-4">
		<div class="col d-flex align-items-end">
			<div><img src="/img/logo_light.png" height="30" class="mr-2 d-block" /></div> <span class="d-block newsletter-header">Newsletter</span>
		</div>
	</div>
	

	<div class="row">
		<div class="col-12 col-md-6">
			<div class="newsletter-box pb-3 pt-5 px-4">
				<form action="{{ route('newsletter.store') }}" method="post" id="newsletter-form">
					<h3>Suscríbase al boletín de Liber</h3>
					<p>Reciba nuestra newsletter semanal o trimestral con contenidos complementarios para profundizar en los temas que compartimos con la revista. Podrá encontrar libros, películas, música o documentales que enriquecerán la experiencia de la lectura.</p>
					<div class="d-flex">
						<input type="text" name="name" placeholder="Nombre" required class="form-control form-name bg-transparent mr-1 w-50"/>
						<input type="text" name="lastname" placeholder="Apellido" required class="form-control form-lastname bg-transparent ml-1 w-50"/>
					</div>
					<div class="mt-2">
						<input type="email" name="email" placeholder="Correo electrónico" required class="form-control form-email bg-transparent"/>
					</div>
					<div class="my-4">
						<h4>Elija lo que más le interese</h4>
					</div>
					<div class="d-flex flex-wrap newsletter-topics">
						@foreach($topics as $i=>$t)
						<div class="d-inline-block w-50 {{ $i == 0 ? '' : 'topic-item' }}">
							<label for="topic-{{ $i }}" class="mb-0"><input id="topic-{{ $i }}" type="checkbox" name="topic[]" value="{{ $t }}" {{ $i == 0 ? 'checked' : '' }} class="mr-1 form-topic"/> {{ $t }}</label>
						</div>
						@endforeach
					</div>
					<div class="newsletter-checkbox my-3 form-legals border-1">
						<label for="legals" class="legals"><input id="legals" name="legals" type="checkbox" required class="mr-1"/> Al suscribirme acepto los <a href="{{ route('terms') }}" target="_blank">"Términos y Condiciones"</a> y el <a href="{{ route('privacy') }}" target="_blank">"Aviso de Privacidad"</a>.</label>
					</div>
					<div class="newsletter-checkbox">
						<button class="btn btn-yellow w-100" type="button" id="newsletter-submit">Suscribirme</button>
					</div>
				</form>
				<div class="text-center pb-4" style="display: none;" id="newsletter-thanks">
					<h3>Hemos recibido tus datos</h3>
				</div>
			</div>
		</div>
		<div class="col-12 col-md-6">
			<img src="/img/liber-newsletter.jpg" class="img-fluid" />
		</div>
	</div>

	<script>
		var d = 'Recibir todas las recomendaciones';
		
		$('#topic-0').change(function($i) {
			if ($(this).is(':checked')) {
				$('.topic-item input').prop('checked', true);
				$('.topic-item input').attr('disabled', true);
				$('.topic-item').addClass('text-muted');
			} else {
				$('.topic-item').removeClass('text-muted');
				$('.topic-item input').attr('disabled', false);
			}
		});
		
		$('#newsletter-submit').click(function($e){
			
			let t;
			if ($('#topic-0').is(':checked')) {
				t = $("input.form-topic:checkbox:disabled").map(function(){
					return $(this).val();
				}).get();
			} else {
				t = $("input.form-topic:checkbox:checked").map(function(){
					return $(this).val();
				}).get();
			}			

			let p = { name : $('input[name=name]').val(), lastname : $('input[name=lastname]').val(), email : $('input[name=email]').val(), topics : t, 'legals' : $('input[name=legals]').is(':checked') ? 1 : '' }
			$.ajax({ url:'{{ route('newsletter.store') }}', method: 'POST', data:JSON.stringify(p), contentType: 'application/json; charset=utf-8' }).done(function($e) {
				$('#newsletter-form').hide();
				$('#newsletter-thanks').show();
			}).fail(function($e) {
				for(var p in $e.responseJSON.errors) {
					 $('.form-' + p).addClass('form-danger');
				}
  			});
		});
		
		$('#topic-0').trigger('change');
		
	</script>
	
</div>

<!-- Contact Start here -->
<!--
include('layouts.partials.banner_subscribe')
-->
<!-- Contact End  -->

<!-- ****************** -->

@endsection