{% extends app.request.query.get("embed") == '1'
  ? "base.html.twig"
  : "bases/base." ~ subdomain ~ ".html.twig" %}

{% block title %}{{ parent() }}{% endblock %}

{% block head %}
{{ parent() }}
{# <meta name="description" content=""> #}
{% endblock %}

{% block javascript %}
{{parent()}}
{% if isAdmin %}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" async defer
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDKTHSxkDdoCM_fzYqEi8SAcuRxHHu6foI&libraries=places&callback=initAutocomplete"></script>
{% endif %}
<script>
	var d = new Date();
	var month = d.getMonth() + 1; // date('n') used on backend
	var year = d.getFullYear();
	var fullyLoaded = false;
	var currentlyLoading = false;
	$(function () {
		$('.clickable-popover').popover({
			html: true,
			trigger: 'click'
		});
		$('[data-toggle="popover"]:not(.clickable-popover)').popover({
			html: true,
			placement: 'top',
			trigger: 'hover'
		});
	});

	var currentFilters = { 'type': 'All', 'location': 'All', 'sponsor': 'All', 'announcement': null };
	$('#post-type').on('click', function (e) {
		e.preventDefault();
		$(this).children().removeClass('active');
		var clickedOption = $(e.target);
		clickedOption.addClass('active');
		var postTypeId = clickedOption.data('value');
		currentFilters.type = postTypeId;
		filterPosts();
	});
	$('#post-location').on('change', function (e) {
		var locationId = (this.value === 'All') ? this.value : parseInt(this.value);
		currentFilters.location = locationId;
		filterPosts();
	});
	$('#post-sponsor').on('change', function (e) {
		var sponsorId = (this.value === 'All') ? this.value : parseInt(this.value);
		currentFilters.sponsor = sponsorId;
		filterPosts();
	});
	$('#nav-filter').on('click', function (e) {
		e.preventDefault();
		$(this).children().removeClass('active');
		var clickedOption = $(e.target);
		clickedOption.addClass('active');
		var toFilter = clickedOption.data('value');
		if (toFilter === 'events') {
			currentFilters.announcement = false;
			currentFilters.type = 'All';
		} else if (toFilter === 'announcements') {
			currentFilters.announcement = true;
			currentFilters.type = 'All';
		} else if (toFilter === 'volunteer') {
			currentFilters.announcement = null;
			currentFilters.type = 1;
		} else {
			currentFilters.announcement = null;
			currentFilters.type = 'All';
		}
		filterPosts();
	});
	function filterPosts() {
		$('.iterable-event').each(function () {
			if (
				(currentFilters.type === 'All' || $(this).data('type') === currentFilters.type) &&
				(currentFilters.location === 'All' || $(this).data('location') === currentFilters.location) &&
				(currentFilters.sponsor === 'All' || $(this).data('sponsors').indexOf(currentFilters.sponsor) !== -1) &&
				(currentFilters.announcement === null || $(this).data('announcement') === currentFilters.announcement)
			) {
				$(this).css('display', '');
			} else {
				$(this).css('display', 'none');
			}
		});
	}

	$('#sort-date').on('click', function (e) {
		e.preventDefault();
		if ($(this).html() === 'Date ↓') {
			$(this).html('Date &uarr;');
			$('.iterable-event').sort(function (a, b) {
				return $(a).data('date') > $(b).data('date') ? 1 : -1;
			}).appendTo('#all-cards');
		} else {
			$(this).html('Date &darr;');
			$('.iterable-event').sort(function (a, b) {
				return $(a).data('date') > $(b).data('date') ? -1 : 1;
			}).appendTo('#all-cards');
		}
	});

	$('#search').on('input', function (e) {
		var query = $(this).val().toLowerCase();
		$('.iterable-event').each(function () {
			if ($(this).data('name').toLowerCase().indexOf(query) !== -1) {
				$(this).css('display', '');
			} else {
				$(this).css('display', 'none');
			}
		});
	});

	function lazyLoadPosts() {
		currentlyLoading = true;
		month = month + 1;
		if (month === 13) {
			month = 1;
			year = year + 1;
		}
		$.ajax({
			url: '{{path("cards")}}',
			data: {
				month: month,
				year: year
			},
			success: function (markup) {
				if (markup === '') {
					fullyLoaded = true;
					$('#loader').html('<p>You have reached the end of the feed.</p>');
					$(window).scroll(function () {
						return false;
					});
				}
				$('#all-cards').append(markup);
				currentlyLoading = false;
			},
		});
	}

	function checkVisible(elm) { // https://stackoverflow.com/a/5354536/2624391
		var rect = elm.getBoundingClientRect();
		var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
		return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
	}

	$(window).scroll(function () {
		if (!fullyLoaded && !currentlyLoading && checkVisible(document.getElementById('loader'))) {
			lazyLoadPosts();
		}
	});

	// {% if isAdmin %}

	$('#editModal').on('show.bs.modal', function (event) {
		var button = $(event.relatedTarget); // Button that triggered the modal
		$('#subscribe').parent().remove();
		$.each(button.data(), function (i, v) {
			if (i === 'toggle' || i === 'target' || i === 'has_end') {
				return true;
			}
			if (i === 'start') {
				var date = new Date(v * 1000);
				$('#date').val(date.toLocaleDateString("en-US"));
				$('#time').val(date.toLocaleTimeString("en-US"));
				return true;
			}
			if (i === 'end') {
				var date = new Date(v * 1000);
				$('#date2').val(date.toLocaleDateString("en-US"));
				if (button.data('has_end')) {
					$('#time2').val(date.toLocaleTimeString("en-US"));
				}
				return true;
			}
			if (i === 'image') {
				if (v != '') {
					$('#filename').text('Has image ' + v + '; upload a new image to replace');
				}
				return true;
			}
			if (i === 'announcement') {
				if (v) {
					$('#is_announcement').prop('checked', true);
					$('#not_announcement').prop('checked', false);
				} else {
					$('#is_announcement').prop('checked', false);
					$('#not_announcement').prop('checked', true);
				}
				return true;
			}
			if (i === 'sponsors') {
				for (var index = 0; index < v.length; index++) {
					if ($('#sponsor' + (index + 1)).length === 0) {
						$('#more-sponsors').append('<input type="text" value="' + v[index] + '" class="form-control mt-2" id="sponsor' + (index + 1) + '" name="sponsors[]" maxlength="255"><div id="invalid-feedback-sponsor' + (index + 1) + '" class="invalid-feedback"></div>');
					} else {
						$('#sponsor' + (index + 1)).val(v[index]);
					}
				}
				return true;
			}
			if (i === 'screens') {
				$('input[name="screen_ids[]"]').each(function () {
					$(this).prop('checked', false);
				});
				for (var index = 0; index < v.length; index++) {
					$('#loc' + v[index]).prop('checked', true);
				}
				return true;
			}
			if (i === 'repeat_on') {
				$('input[name="repeat_on[]"]').each(function () {
					$(this).prop('checked', false);
				});
				if (v != null) {
					for (var index = 0; index < v.length; index++) {
						$('#repeat_' + v[index]).prop('checked', true);
					}
				}
				return true;
			}
			if ($('#' + i).length === 0) {
				console.log(i, v);
			} else {
				$('#' + i).val(v);
			}
		});
	});

  // {% include 'js/form.js' %}
  // {% endif %}
</script>
{% endblock %}

{% block styles %}
{{parent()}}
{% if isAdmin %}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
{% endif %}
{% endblock %}

{% block body %}
{% if isAdmin %}
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<form method="POST" enctype="multipart/form-data" id="post-form">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="editModalLabel">Edit event</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					{% include 'post_form/form.html.twig' %}
					<div class="form-group">
						<label for="tz">Timezone</label>
						<input type="text" class="form-control" id="tz" name="tz" placeholder="Timezone" value="">
					</div>
					<input type="hidden" name="id" id="id">
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary">Save changes</button>
				</div>
			</div>
		</form>
	</div>
</div>
{% endif %}
<div class="container">
	<div class="row">
		<div class="col-md-4 order-sm-12">
			<h6>Have an event, announcement, or volunteer opportunity?</h6>
			<p><a href="{{path('new-post')}}" class="btn btn-lg btn-primary btn-block">Post to the calendar</a></p>
			<h6>Subscribe to our newsletter</h6>
			<form class="form-inline" id="newsletter-form" action="/calendar/includes/newsletter_sub.php" method="POST">
				<label class="sr-only" for="newsletter-email">Email</label>
				<input type="text" class="form-control mb-2 mr-sm-2" id="newsletter-email" name="newsletter-email"
					id="newsletter-email" placeholder="Your email">
				<button type="submit" class="btn btn-primary mb-2" name="newsletter-submit">Subscribe</button>
			</form>
			{{ render(controller('App\\Controller\\LandingController::miniCalendar')) }}
			<p><a class="btn btn-sm btn-primary" href="{{path('full-calendar')}}">View full calendar</a></p>
			<p style="margin-bottom: 20px"><span class="bg-dark"
					style="height: 20px;width: 20px;display: inline-block;position: relative;top: 2px">&nbsp;</span> Today <span
					style="position: relative;left: 20px"><span class="bg-primary"
						style="height: 20px;width: 20px;display: inline-block;position: relative;top: 2px">&nbsp;</span> Event
					scheduled</span></p>
			<div style="clear: both;height: 15px"></div>
			<h5>Event types</h5>
			<div class="list-group" style="margin-bottom: 15px" id="post-type">
				<a href='#' data-value='All' class='list-group-item list-group-item-action active'>All</a>
				{% for type in postTypes %}
				<a href='#' data-value='{{type.id}}' class='list-group-item list-group-item-action'>{{type.name}}</a>
				{% endfor %}
			</div>
			<h5>Event locations</h5>
			<form>
				<select class="form-control" id="post-location">
					<option value='All'>All</option>
					{% for location in locations %}
					<option value='{{location.id}}'>{{location.name}}</option>
					{% endfor %}
				</select>
			</form>
			<div style="clear: both;height: 15px"></div>
			<h5>Event sponsors</h5>
			<form>
				<select class="form-control" id="post-sponsor">
					<option value='All'>All</option>
					{% for sponsor in sponsors %}
					<option value='{{sponsor.id}}'>{{sponsor.name}}</option>
					{% endfor %}
				</select>
			</form>
			<div style="clear: both;height: 15px"></div>
			{% if user != null %}
			<p class="mb-0">You are signed in as {{user.email}}. <a href="{{path('logout')}}">Sign out</a>.</p>
			<p><a href="{{path('account')}}">Visit your account</a>.</p>
			{% else %}
			<p><a href="{{path('login')}}">Sign in</a> or create an account as a <a href="{{path('register')}}">user</a> or <a
					href="{{path('admin-register')}}">admin</a>.</p>
			{% endif %}
		</div>
		<div class="col-md-8 col-sm-12">
			<div id="carousel-indicators" class="carousel slide" data-ride="carousel" style="height: 320px;">
				<ol class="carousel-indicators">
					<li data-target="#carousel-indicators" data-slide-to="0" class="active"></li>
					{% set counter = 0 %}
					{% for post in posts %}
					{% if post.approved == true and counter < 5 %}
					<li data-target="#carousel-indicators" data-slide-to="{{counter}}"></li>
					{% set counter = counter + 1 %}
					{% endif %}
					{% endfor %}
				</ol>
				<div class="carousel-inner" role="listbox" style="height: 100%">
					{% set counter = 0 %}
					{% for post in posts %}
					{% if post.approved == true and counter < 5 %}
					<div class="carousel-item {% if counter == 0 %}active{% endif %}" style="height: 100%">
						<div class="row" style="width: 80%;margin: 0 auto;padding-top: 20px">
							<div class="col-sm-6 hidden-sm-down">
								<a href="/calendar/post/{{post.id}}">
									{% if post.image == null %}
									<img class="d-block img-fluid" src="{{path('index')}}/images/{{post.postType.image}}">
									{% else %}
									<img class="d-block img-fluid" style="overflow:hidden;max-height: 250px" src="{{post.image}}">
									{% endif %}
								</a>
							</div>
							<div class="col-md-6 col-sm-12">
								<a href="#" style='text-decoration: none;color: inherit;'>
									<h2 style="margin-bottom:0px;">{{post.name}}</h2>
									<h6 class="mb-0 mt-2">{{ post.start | date('F jS, g:i a') }}</h6>
									<p style="overflow: hidden;height: 170px;margin-top: 5px;">{{post.description}}</p>
								</a>
							</div>
						</div>
					</div>
					{% set counter = counter + 1 %}
					{% endif %}
					{% endfor %}
				</div>
				<a class="carousel-control-prev" href="#carousel-indicators" role="button" data-slide="prev">
					<span class="carousel-control-prev-icon" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="carousel-control-next" href="#carousel-indicators" role="button" data-slide="next">
					<span class="carousel-control-next-icon" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
			<div class="card-footer bg-primary text-light">
				Upcoming events
			</div>
			<nav class="navbar navbar-light bg-light" style="margin-bottom: 10px;margin-top: 40px">
				<form class="form-inline" style="width: 100%">
					<span class="navbar-text" style="width: 100%">
						<div class="btn-group" role="group" aria-label="Event or announcement" id="nav-filter">
							<button type="button" data-value="all" class="btn btn-sm btn-secondary active">All</button>
							<button type="button" data-value="events" class="btn btn-sm btn-secondary">Events</button>
							<button type="button" data-value="announcements" class="btn btn-sm btn-secondary">Announcements</button>
							<button type="button" data-value="volunteer" class="btn btn-sm btn-secondary">Volunteer
								opportunities</button>
						</div>
						<input class="form-control mr-sm-2 form-control-sm" type="text" id="search" placeholder="Type to search"
							style="float: right;margin-left: 10px">
						<a href="#" id="sort-date" class="btn btn-sm btn-primary" style="float: right;color: #fff">Date</a>
					</span>
				</form>
			</nav>
			<div id="all-cards">
				{% if posts[0].start|date('U') > "now"|date('U')|date_modify("+1 day") %}
				<h4>Today</h4>
				{% endif %}
				{% set future = false %}
				{% for post in posts %}
				{% if future == false and post.start|date('U') < "now"|date('U')|date_modify("+2 days") %}
				<h4>Future</h4>
				{% set future = true %}
				{% endif %}
				{% set sponsorIds = [] %}
				{% set sponsorNames = [] %}
				{% for sponsor in post.sponsors %}
				{% set sponsorIds = sponsorIds|merge([sponsor.id]) %}
				{% set sponsorNames = sponsorNames|merge([sponsor.name]) %}
				{% endfor %}
				{% if post.approved == true or isAdmin %}
				<div
					class="card {% if post.approved is same as (null) and isAdmin %}border-primary{% endif %}{% if post.approved is same as (false) and isAdmin %}border-danger{% endif %} iterable-event mb-2"
					id="{{post.id}}" data-sponsors="{{sponsorIds|json_encode}}" data-type="{{post.postType.id}}"
					data-announcement="{{post.isAnnouncement|json_encode}}" data-date="{{post.start|date('U')}}"
					data-location="{{post.location.name}}" data-name="{{post.name}}">
					<div class="card-body">
						<div class="row">
							<div class="col-sm-12 col-md-3">
								{% if post.image == null %}
								<img src="{{path('index')}}/images/{{post.postType.image}}" class="thumbnail img-fluid">
								{% else %}
								<img class="thumbnail img-fluid" src="{{post.image}}">
								{% endif %}
							</div>
							<div class="col-sm-12 col-md-9">
								<h4 class="card-title">
									{{post.name}}
									{% if post.postType.id == 1 %}
									<br><span class='badge badge-primary' style='font-size:0.9rem;position:relative;bottom:5px'>Volunteer
										Opportunity</span>
									{% endif %}
									{% if post.isAnnouncement %}
									<span class='badge badge-primary'
										style='font-size:0.9rem;position:relative;bottom:5px'>Announcement</span>
									{% endif %}
								</h4>
								<h6 class="card-subtitle mb-2 text-muted">
									{{post.start | date('F jS, g:i a')}} &middot; {{post.location.name}} &middot;
									{{sponsorNames|join(', ')}}
								</h6>
								<p class="card-text">{{post.description}}</p>
								<div class="card-text">
									<a href='#' class='btn btn-secondary interested-btn' data-eventid='{{post.id}}'>I&apos;m
										interested</a>
									<a href="{{path('post', {id: post.id})}}" class="btn btn-primary">View post</a>
									{% if isAdmin %}
									{% set screens = [] %}
									{% for screen in post.screens %}
									{% set screens = screens|merge([screen.id]) %}
									{% endfor %}
									<button type="button" data-toggle="modal" data-target="#editModal" class="btn btn-info"
										data-id="{{post.id}}" data-event_type="{{post.postType.id}}" data-title="{{post.name}}"
										data-start="{{post.start|date('U')}}" data-end="{{post.end|date('U')}}"
										data-description="{{post.description}}" data-extended_description_md="{{post.extendedDescription}}"
										data-announcement="{{post.isAnnouncement|json_encode}}" data-image="{{post.image}}"
										data-has_end="{{post.hasEnd|json_encode}}" data-email="{{post.email}}"
										data-contact_email="{{post.contactEmail}}" data-phone="{{post.phone}}"
										data-website="{{post.website}}" data-sponsors="{{sponsorNames|json_encode}}"
										data-location="{{post.location.name}}" data-street_addr="{{post.location.address}}"
										data-screens="{{screens|json_encode}}" data-tz="{{post.start.getTimezone.name}}"
										data-repeat_end="{% if post.repeatEnd != null %}{{post.repeatEnd|date('m/d/Y H:i:s')}}{% endif %}"
										data-repeat_on="{{post.repeatOn|json_encode}}" data-room_num="{{post.roomNum}}">Edit
										post</button>
									{% endif %}
									{% if isAdmin %}
									<form action="{{path('approve-post')}}" method="POST" class="d-inline">
										<input type="hidden" name="id" value="{{post.id}}">
										<input type="submit" class="btn btn-success" value="Approve"
											{% if post.approved is same as (true) %}disabled{% endif %}>
									</form>
									{% if post.approved is same as (false) %}
									<form action="{{path('delete-post', {id: post.id})}}" method="POST" class="d-inline">
										<input type="submit" class="btn btn-danger" value="Delete">
									</form>
									{% else %}
									<button type="button" class="btn btn-danger clickable-popover" data-toggle="popover"
										title="Rejection reason" data-content="
										Please specify a rejection reason:
										<form action='{{path('reject-post')}}' method='POST' class='d-inline'>
											<input type='hidden' name='id' value='{{post.id}}'>
											<textarea class='form-control' name='reason' rows='3'></textarea>
											<input type='submit' class='btn btn-danger mt-1' value='Reject post'>
										</form>">Reject</button>
									{% endif %}
									{% endif %}
									{% if post.likes > 3 or isAdmin %}<br><small>{{post.likes}} people are interested in this
										post</small>{% endif %}
								</div>
							</div>
						</div>
					</div>
				</div>
				{% endif %}
				{% endfor %}
			</div>
			<div class="d-flex align-items-center" id='loader'>
				<strong>Loading...</strong>
				<div class="spinner-border text-primary ml-auto" role="status" aria-hidden="true"></div>
			</div>
		</div>
	</div>
</div>
{% endblock %}