{block name=body}
	<div data-presentation="slide">
		<div data-presentation="slide-start">
			<section class="section_question">
				<div class="ct">
					<div class="ct_l"></div>
					<div class="ct_c">
						<div class="question font_150 text-center">Wpisz imię i nazwisko</div>
					</div>
					<div class="ct_r"></div>
				</div>
			</section>
			<section class="section_answers">
				<div class="space space_30 clear"></div>
				<div class="ct">
					<div class="ct_l"></div>
					<div class="ct_c">
						<div class="df_w">
							<div class="df">
								<div class="space space_15"></div>
								<div class="df_ct">
									<div class="input-group"><input type="text" name="userName" class="form-control fn_data_max_length" data-max-length="40" placeholder="Wpisz imię i nazwisko..."><span class="input-group-addon input-group-addon-max-length">40</span></div>
								</div>
								<div class="space space_15"></div> 
							</div>
						</div>
						<div class="space space_25"></div>
						<button type="button" class="btn btn-primary full-width btn-next">
							<span>Dalej</span>
							<div class="icon"><svg><use xlink:href="{url mode="root"}theme/dobry-start/images/icons/svg/sprite.svg#shape-chevron-right"></use></svg></div>
						</button>
					</div>
					<div class="ct_r"></div>
				</div>
			</section>
		</div>
	</div>
	<div class="hide">
		<div id="template-reply-user"><div class="space space_30 clear"></div><section class="section_question"><div class="ct"><div class="ct_l"></div><div class="ct_c"><div class="question font_150 text-center">Odpowiedź została wysłana.</div><div class="space space_10 clear"></div><div class="description font_110 text-center">Oczekiwanie na zmianę slajdu przez prezentera...</div></div><div class="ct_r"></div></div></section></div>
		<div id="template-reply-user-quiz"><div class="space space_30 clear"></div><section class="section_question"><div class="ct"><div class="ct_l"></div><div class="ct_c"><div class="question font_150 text-center">Odpowiedź została wysłana.</div><div class="space space_10 clear"></div><div class="description font_110 text-center">Oczekiwanie na wyniki...</div></div><div class="ct_r"></div></div></section></div>
		<div id="template-waiting-connection"><section class="section_question"><div class="ct"><div class="ct_l"></div><div class="ct_c"><div class="question font_150 text-center">Oczekiwanie na połączenie z prezenterem.</div><div class="space space_30 clear"></div><div class="loading_w"><div class="loading_ct"><div class="loading_ct_c"><svg><use xlink:href="{url mode="root"}theme/dobry-start/images/icons/svg/sprite.svg#shape-loading"></use></svg></div></div></div></div><div class="ct_r"></div></div></section></div>
	</div>
{/block}

{block name=dialog}
	<div id="modalErrorEmptyName" class="modal fade" aria-hidden="true">
		<div class="modal-dialog modal-md">
			<div class="modal-content">
				<div class="modal-header text-center">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Zamknij</span></button>
					<h3 class="modal-title">Uzupełnij pole</h3>
				</div>
				<div class="modal-body text-center">
					<div class="row">
						<div class="col-xs-12">
							<p>Wpisz swoje imię i nazwisko aby przejść dalej</p>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<div class="text-center">
						<button type="button" class="btn btn-primary m-r-sm" data-dismiss="modal">Zamknij</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="modalErrorQuestion" class="modal fade" aria-hidden="true">
		<div class="modal-dialog modal-md">
			<div class="modal-content">
				<div class="modal-header text-center">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Zamknij</span></button>
					<h3 class="modal-title">Nie wybrano odpowiedzi</h3>
				</div>
				<div class="modal-body text-center">
					<div class="row">
						<div class="col-xs-12"><p>Nie odpowieziałeś na pytanie!<br></p></div>
					</div>
				</div>
				<div class="modal-footer">
					<div class="text-center">
						<button type="button" class="btn btn-white m-r-sm" data-dismiss="modal">Zamknij</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="modalErrorQuestionAndNext" class="modal fade" aria-hidden="true">
		<div class="modal-dialog modal-md">
			<div class="modal-content">
				<div class="modal-header text-center">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Zamknij</span></button>
					<h3 class="modal-title">Nie wybrano odpowiedzi</h3>
				</div>
				<div class="modal-body text-center">
					<div class="row">
						<div class="col-xs-12"><p>Nie odpowieziałeś na pytanie!<br>Czy chcesz je pominąć i przejść dalej?</p></div>
					</div>
				</div>
				<div class="modal-footer">
					<div class="text-center">
						<button type="button" class="btn btn-white m-r-sm" data-dismiss="modal">Nie</button>
						<button type="submit" class="btn btn-primary m-l-sm"><strong>Tak</strong></button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="modalErrorReactions" class="modal fade" aria-hidden="true">
		<div class="modal-dialog modal-md">
			<div class="modal-content">
				<div class="modal-header text-center">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Zamknij</span></button>
					<h3 class="modal-title">Oceń ten slajd</h3>
				</div>
				<div class="modal-body text-center">
					<div class="row">
						<div class="col-xs-12">
							<p>Nie kliknąłeś w żadną ikonę.<br>Czy pominąć ocenianie slajdu i przejść dalej?</p>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<div class="text-center">
						<button type="button" class="btn btn-white m-r-sm" data-dismiss="modal">Nie</button>
						<button type="submit" class="btn btn-primary m-l-sm"><strong>Tak</strong></button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="modalError100Points" class="modal fade" aria-hidden="true">
		<div class="modal-dialog modal-md">
			<div class="modal-content">
				<div class="modal-header text-center">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Zamknij</span></button>
					<h3 class="modal-title">Nie przydzielono punktów</h3>
				</div>
				<div class="modal-body text-center">
					<div class="row">
						<div class="col-xs-12">
							<p>Nie przydzieliłeś wszystkich punktów<br>Czy chcesz przejść dalej?</p>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<div class="text-center">
						<button type="button" class="btn btn-white m-r-sm" data-dismiss="modal">Nie</button>
						<button type="submit" class="btn btn-primary m-l-sm"><strong>Tak</strong></button>
					</div>
				</div>
			</div>
		</div>
	</div>
{/block}

{block name=scripts}
	<script type="text/javascript" src="{url mode="root"}public/scripts/websocket.js"></script>
	<script type="text/javascript">
		var slide = null;
		var slideTime = 0;
		var slideCurrent = null;
		var lockDoubleSend = false;

		function webSocketAction(message) {
			var dataJS = JSON.parse(message);
			
			switch(dataJS.command) {
				case "closePresentation":
					closePresentation();
					break;
				case "goToSlide":
					loadSlide(dataJS.slideId);
					break;
				case "quizStart":
					quizStart();
					break;
				case "quizResults":
					quizResults();
					break;
			}
		}

		function initPresentation() {
			$("*[data-presentation='slide']").html($("#template-waiting-connection").html());

			sendWebSocket({ command: "initUser" });
		}

		function closePresentation() {
			$("*[data-presentation='slide']").html($("#template-waiting-connection").html());

			location.href = "{url mode="root"}";
		}

		$(document).ready(function () {
			slide = $("*[data-presentation='slide']");
			var slideStart = $("*[data-presentation='slide-start']");
			
			$("#modalErrorEmptyName, #modalErrorQuestion, #modalErrorQuestionAndNext, #modalErrorReactions").modal({
				backdrop: "static",
				keyboard: false,
				show: false
			});

			$("button", slideStart).on("click", function () {
				if(lockDoubleSend) {
					return false;
				}

				lockDoubleSend = true;

				var name = $("input[name='userName']").val().trim();

				if(name.length == 0) {
					$("#modalErrorEmptyName").modal("show");

					return false;
				}

				$.post("{url mode="root"}p/{$quizId}/zapisz/0", { __action: "name", name: name }, function (response) {
					if(response.status == true) {
						{if $quizTempo == "1"}
							initWebSocket({
								mode: "member",
								identifier: "{$quizId}",
								user: "{$userId}",
								onopen: function () {
									initPresentation();
								},
								onmessage: function (message) {
									webSocketAction(message);
								}
							});
						{else}
							loadSlide(response.slide);
						{/if}
					}

					lockDoubleSend = false;
				}, "json");
			});
		});

		function loadSlide(slideId) {
			$.get("{url mode="root"}p/{$quizId}/slajd/" + slideId, { }, function (response) {
				$("*[data-presentation='slide']").html(response);

				resetTime();
				initSlide(slideId);

				slide = $("*[data-presentation='slide']");
				slideCurrent = slideId;
			});
		}

		function saveSlide(button, slideId, ignore) {
			if(lockDoubleSend) {
				return false;
			}

			lockDoubleSend = true;

			if(typeof button === "undefined") {
				button = true;
			}

			var dateTime = new Date();
			var slideEndTime = dateTime.getTime();
			var form = $("form", slide);
			var dataPost = new Array();
			var saveOnce = true;

			var replyType = null;
			var replyInput = null;

			if($("input[name^='reply']").length > 0) {
				replyInput = $("input[name^='reply']");
				replyType = replyInput.attr("type");
			} else if($("textarea[name^='reply']").length > 0) {
				replyInput = $("textarea[name^='reply']");
				replyType = "textarea";

				if($("textarea[name='reply']").data("moresave") == "1") {
					saveOnce = false;
				}
			}

			switch(replyType) {
				case "radio":
					var value = $("input[name='reply']:checked", form).val();
					if(typeof value !== "undefined" && value.length > 0) {
						dataPost[dataPost.length] = { name: "reply", value: value };
					}
					break;
				case "checkbox":
					value = new Array();

					$("input[name='reply[]']:checked", form).each(function (index) {
						dataPost[dataPost.length] = { name: "reply[" + index + "]", value: $(this).val() };
					});
					break;
				case "text":
					if(replyInput.attr("name").indexOf("[")) {
						value = new Array();

						replyInput.each(function (index) {
							var key = index, value = $(this).val();
							if($(this).data("key")) {
								key = $(this).data("key");
							}

							if(value.length > 0 && $("input[name='ignoreReply[" + key + "]']").length > 0 && $("input[name='ignoreReply[" + key + "]']").val() == "1") {
								value = "-1";
							}
								
							if(value.length > 0) {
								var prepareName = $(this).attr("name").replace("reply[" + key + "]", "");
								if(prepareName.length > 0) {
									dataPost[dataPost.length] = { name: "reply[" + key + "]" + prepareName, value: value };
								} else {
									dataPost[dataPost.length] = { name: "reply[" + key + "]", value: value };
								}
							}
						});
					} else {
						alert("Do oprogramowania!");
					}
					break;
				case "textarea":
					var value = $("textarea[name='reply']", form).val();
					if(typeof value !== "undefined" && value.length > 0) {
						dataPost[dataPost.length] = { name: "reply", value: value };
					}
					break;
				default:
					alert("Typ: " + $("input[name^='reply']").attr("type"));
					break;
			}

			if(dataPost.length == 0) {
				if(button == false) {
					$("#modalErrorQuestionAndNext").modal("show");
					$("#modalErrorQuestionAndNext button[type='submit']").off("click").on("click", function () {
						$("#modalErrorQuestionAndNext").modal("hide");

						loadSlide(slideId);
					});
				} else {
					$("#modalErrorQuestion").modal("show");
				}

				lockDoubleSend = false;
				return false;
			}

			if(ignore != true && $("*[data-slide='" + slideCurrent + "']").data("type") == "100Points") {
				if(!slide100PointsValid()) {
					$("#modalError100Points").modal("show");
					$("#modalError100Points button[type='submit']").off("click").on("click", function () {
						$("#modalError100Points").modal("hide");

						saveSlide(button, slideId, true);
					});

					lockDoubleSend = false;
					return false;
				}
			}

			var resultTime = slideEndTime - slideTime;

			dataPost[dataPost.length] = { name: "__action", value: "" };
			dataPost[dataPost.length] = { name: "time", value: resultTime };

			$.post("{url mode="root"}p/{$quizId}/zapisz/" + slideCurrent, dataPost, function (response) {
				if(response.status == true) {
					var dateTime = new Date();

					sendWebSocket({ command: "saveResult", slideId: slideCurrent });

					if(typeof quizStep !== "undefined") {
						quizStep = "reply";
					}

					if(button == false) {
						loadSlide(slideId);
					} else {
						if(saveOnce) {
							var templateAnswer = $("#template-reply-user").html();
							if($("*[data-slide='" + slideCurrent + "']").data("type") == "quiz") {
								templateAnswer = $("#template-reply-user-quiz").html();
							}

							$(".section_answers", slide).html(templateAnswer);
						} else {
							$("textarea[name='reply']").val("");
						}
					}
				}

				lockDoubleSend = false;
			});
		}

		function nextSlide(slideId) {
			if($("input[name='reactions']", slide).length > 0) {
				var selectedReaction = $("input[name='reactions']", slide).val();

				if(selectedReaction.length == 0) {
					$("#modalErrorReactions").modal("show");
					$("#modalErrorReactions button[type='submit']").off("click").on("click", function () {
						$("#modalErrorReactions").modal("hide");

						loadSlide(slideId);
					});

					return false;
				}
			}

			if($("input[name^='reply']", slide).length > 0) {
				saveSlide(false, slideId);

				return false;
			}

			loadSlide(slideId);
		}

		function initSlide(slideId) {
			$(".section_icons .icon", slide).off("click").on("click", function () {
				if(lockDoubleSend) {
					return false;
				}

				lockDoubleSend = true;

				var reactionVal = $(this).data("value");
				$("input[name='reactions']", slide).val(reactionVal);
				
				$(".section_icons .icon").removeClass("active");
            $(this).addClass("active");

				$.post("{url mode="root"}p/{$quizId}/reakcja/" + slideId, { __action: "", reaction: reactionVal }, function (response) {
					if(response.status == true) {
						sendWebSocket({ command: "saveResult", slideId: slideCurrent });
						
						var templateAnswer = $("#template-reply-user").html();
						if($("*[data-slide='" + slideCurrent + "']").data("type") == "quiz") {
							templateAnswer = $("#template-reply-user-quiz").html();
						}

						$(".section_icons", slide).html(templateAnswer);
					}

					lockDoubleSend = false;
				}, "json");
			});

			if($("*[data-presentation='slideScales']", slide).length > 0) {
				$(".df_question_skip", slide).off("click").on("click", function () {
					var button = $(this), scale = $(this).closest(".df"), input = $("input[type='hidden'][name^='ignoreReply']", scale);

					if(button.hasClass("active")) {
						button.removeClass("active");
						scale.removeClass("df_disabled");

						input.val("0");
					} else {
						button.addClass("active");
						scale.addClass("df_disabled");

						input.val("1");
					}
				});
			}

			data_max_length();
		}

		function resetTime() {
			var dateTime = new Date();
			
			slideTime = dateTime.getTime();
		}

		function valueToInt(value) {
			if(value == "") {
				value = "0";
			}

			value = parseInt(value);
			if(isNaN(value)) {
				value = 0;
			}

			return value;
		}
	</script>
{/block}