{% extends 'admin\\baseadmin.html.twig' %}
{% block content%}
	<!--START PAGE CONTENT -->
	{% if is_granted('ROLE_ADMIN') %}
	<section class="page-content container-fluid">
		<div class="row">
			<div class="col-lg-12 col-xl-12">
				<div class="card">
					<div class="card-header">
						{{'quickaccess'|trans({},'workspace')}}
						<i class="icon dripicons-search"></i>
					</div>
					<div class="card-body" style="font-size:11px">
						<div class="form-group row">
							<div class="col-md-11 m-b-15">
								<input autocomplete="off" class="form-control" id="search" name="search" minlength="3" placeholder="{{'searchallcontent'|trans({},'workspace')}}">
							</div>
						</div>
						<div id="resultado_busca" class="p-15"></div>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-lg-12 col-xl-12">
				<div class="card">
					<div class="card-header">
						<div class="sub-title" style="font-size:1rem">
							{{'favorites'|trans({},'workspace')}}
							<i class="icon dripicons-heart"></i>
						</div>
						<ul class="actions top-right">
							<li>
								<i class="icon dripicons-gear" style="cursor:pointer" id="enable_drag"></i>
							</li>
						</ul>
					</div>
					<div class="card-body favorites">
						<div class="row p-15" id="container">
							{% for page in foundPages %}
								<div class="col-lg-2  col-md-2 col-xl-2 draggable " style="border-left:3px solid #fff;margin-bottom:5px" data-id="{{page.id}}">
									<div class="row handle">
										<i class="icon dripicons-move" style="font-size:14px;margin:6px"></i>
										<a href="{{page.url_remove_favorite}}" style="text-align:right">
											<i class="icon dripicons-trash" style="font-size:14px;right:7px;top:6px;position:absolute"></i>
										</a>
									</div>
									<div class="row box-color" style="background-color:#77C9C8;color:#fff;padding:10px;height:120px;">
										<div class="col-md-3"  style="color:#FFF">
											
											<div style=" border-radius: 30px; background: #FFF;height:45px;width:45px;margin-top:10px;margin-left:-20px;">
												<i class="icon dripicons-blog" style="margin-top:14px;margin-left:15px;font-size:15px"></i>
											</div>
											
										</div>
										<div class="col-md-9">
												<div class="sub-title" style="font-weight:bolder;font-size:13px;color:#FFF;height:38px;overflow:hidden">												
														{{page.name}}												
												</div>
												<hr style="margin:0 0 6px 0"></hr>
											
												<div class="row" style="margin-top:0;padding-left:5px;margin-bottom:3px">
													{% for language in page.languages|split(';') %}
														{% if language %}
														<div class="language plus">
															<a href='{{ url("admin_pages_edit",{"content_type" : page.contentType,"language_code" : language,  "page_id": page.id}) }}'>{{language}}</a>
														</div>        
														{% endif %}                             
													{% endfor %}
													<div class="language plus">
														<a href='{{ url("admin_pages_edit",{"content_type" : page.contentType,"language_code" : 0, "page_id": page.id}) }}'>+</a>
													</div>
												
												</div>
											
											<span style="font-size:10px;color:#FFF">											
												{{page.publish_date|date('d/m/Y')}}
											</span>
									

										</div>

								</div>
								<div class="row"></div>
							</div>


						{% endfor %}
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12 col-xl-12">
					<div class="card">
						<div class="card-header">
							<div class="sub-title" style="font-size:1rem">
								{{'lasteditedpages'|trans({},'workspace')}}
								<i class="icon dripicons-blog"></i>
							</div>
						</div>

						<div class="card-body last_updated">

							<div class="row p-15">
								{% for page in foundLastUpdated %}
									<div class="col-lg-4 col-md-6 col-xl-2 " style="border-left:3px solid #fff;margin-bottom:5px" data-id="{{page.id}}">
										<div class="row box-color" style="background-color:#77C9C8;color:#fff;padding:10px;height:120px;">
											<div class="col-12 d-flex flex-column justify-content-between">
													<div class="sub-title" style="font-weight:bolder;font-size:13px;">												
															{{page.name}}												
													</div>
													<hr style="margin:0"></hr>
												
													<div class="row" style="margin-left:-5px;">
														{% for language in page.languages|split(';') %}
															{% if language %}
															<div class="language plus">
																<a href='{{ url("admin_pages_edit",{"content_type" : page.contentType,"language_code" : language, "page_id": page.id}) }}'>{{language}}</a>
															</div>        
															{% endif %}                             
														{% endfor %}
														<div class="language plus">
															<a href='{{ url("admin_pages_edit",{"content_type" : page.contentType,"language_code" : 0, "page_id": page.id}) }}'>+</a>
														</div>
													
													</div>
												
												<span style="font-size:10px;color:#FFF">											
													{{page.publish_date|date('d/m/Y')}}
												</span>									

											</div>

									</div>
									<div class="row"></div>
								</div>


								<!-- endbox -->
							{% endfor %}
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-lg-12 col-xl-12">
						<div class="card">
							<div class="card-header">
								<div class="sub-title" style="font-size:1rem">
									{{'notifications'|trans({},'workspace')}}
									<i class="icon dripicons-bell"></i>
									<ul class="actions top-right">
										<li>
											<select class="form-control select-notification">
												<option value="notification_today">{{'today'|trans({},'workspace')}}</option>
												<option value="notification_week">{{'nextweek'|trans({},'workspace')}}</option>
												<option value="notification_month">{{'nextmonth'|trans({},'workspace')}}</option>
											</select>
										</li>
									</ul>
								</div>

							</div>
							<div class="card-body notificacoes">
								{% for page in foundNotification %}

									<div class="notification-generic box_{{page.notification}}">

										<div class="row box-cinza" style="height:60px;background:#f0f6ff;padding:15px;-webkit-border-radius: 5px 5px 5px 5px;margin-bottom:10px;border-radius: 5px 5px 5px 5px;font-size:13px;margin-left:0px;margin-right:0px;">
											<div class="col-md-6">
												<i class="icon dripicons-blog"></i>
												<span style="font-weight:bolder;color:#000">
													{{page.title}}
												</span>
												<br>
												{{'lastupdate'|trans({},'workspace')}}
												{{page.updated_date|date('d/m/Y H:i:s')}}
											</div>

											<div class="col-md-3" style="padding:14px">
												{% for language in page.languages|split(';') %}
													{% if language %}
														<div class="language plus">
															<a href='{{ url("admin_pages_edit",{"content_type" : page.contentType,"language_code" : language, "page_id": page.id}) }}'>{{language}}</a>
														</div>        
													{% endif %}                             
												{% endfor %}
												<div class="language plus">
													<a href='{{ url("admin_pages_edit",{"content_type" : page.contentType,"language_code" : 0,  "page_id": page.id}) }}'>+</a>
												</div>
											</div> 
											<div class="col-md-3">
												<div class="row">
													<div class="col-md-2">
														<i class="icon dripicons-time-reverse {{page.notification}}"></i>
													</div>
													<div class="col-md-10">{{'expiredate'|trans({},'workspace')}}
														{{page.expire_date|date('d/m/Y')}}<br>
														{{'pagetype'|trans({},'workspace')}}
														{{page.type}}
													</div>
												</div>

											</div>
										</div>
									</div>
								{% endfor %}

							</div>
						</div>
					</div>
				</section>
	{% endif %}
{% endblock %}
{% block javascripts %}
				{{parent()}}
	{% if is_granted('ROLE_ADMIN') %}
				<script src="https://rawgit.com/bevacqua/dragula/master/dist/dragula.js"></script>
				{#  Jqueri UI #}
				<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
				{# jquery.collection.js #}
				<script type="text/javascript" src="{{ asset('js/jquery.collection.js') }}"></script>
				<script>
					$(document).ready(function () {
						var pages = [];

						$('.box_notification_week').hide();
						$('.box_notification_month').hide();

						$("#enable_drag").on("click", function (e) {
							$('.handle').show();
						});

						$('.box-color').on("mouseover", function (e) {
							$(this).attr('style', "color:#fff;padding:10px;height:120px;background-color:#778DC9")
						});
						$('.box-color').on("mouseout", function (e) {
							$(this).attr('style', "color:#fff;padding:10px;height:120px;background-color:#77C9C8")
						});
						// background-color:#77C9C8;color:#fff;padding:10px;height:120px;

						dragula([container], {
							moves: function (el, container, handle) {
								return handle.classList.contains('handle');
							}
						}).on('drop', function (el) {
							$('#container').children('div').each(function (i) {								
								pages.push($(this).attr('data-id'));
							});
							
							$.ajax({
								url: '/{{ app.request.getLocale() }}/admin/pages/order',
								type: "POST",
								data: {
									'pages': pages
									},
								success: function (html) {}
							});
						});

						$(".select-notification").on("change", function (e) {
							$('.notification-generic').hide();
							if ($(this).val() == 'notification_today') {
								$('.box_notification_today').show();
							} else {
								if ($(this).val() == 'notification_week') {
									$('.box_notification_today').show();
									$('.box_notification_week').show();
								} else {
									$('.notification-generic').show();
								}
							}
							$(".box_".class_notification).show();
						});


						$("#search").on("keyup", function (e) {
							e.preventDefault();
							var t = $(this);
							clearTimeout(t.data('timer'));
							t.data('timer', setTimeout(function () {
								$.ajax({
									url: '/{{ app.request.getLocale() }}/admin/pages/search',
									type: "POST",
									data: {
										'search': t.val()
										},
									success: function (html) {
										$('#resultado_busca').html(html);
									}
								});
							}, 500));
						});
					});
				</script>
				<style>
					a .box-cinza {
						color: #617182 !important
					}

					a .box-cinza:hover,
					a .box-cinza:visited {
						color: #999 !important
					}

					.handle {
						background: #f5f5f5;
						display: none;
					}

					.notification_today {
						color: #ce5150;
						font-size: 28px;
					}

					.notification_week {
						color: #d4c015;
						font-size: 28px;
					}

					.notification_month {
						color: #5accca;
						font-size: 28px;
					}
					.favorites,
					.last_updated {
						font-size: 11px
					}

					.select-notification {
						height: 30px !important;
						font-size: 11px;
					}

					 .language{
						height: 22px;
						width: 22px;
						text-align:center;
						float:left;
						margin-right:3px;
						padding-top:3px;    
						cursor:pointer;
						}

					.language:hover{
					background-color :#5accca;
					-webkit-border-radius: 100px 100px 100px 100px;
					border-radius: 100px 100px 100px 100px;				
					text-align:center;
					float:left;
					margin-right:3px;    
					color:#fff !important;    
					}

					.language a{
					color: #999;    
					}

				
				

					.language a:hover{
					color: #fff;    
					}
				
					.language_actions i{
						color:#000;
						font-size:18px        
					}   
					
					.more_language{
						-webkit-box-shadow: 3px 5px 3px 0px rgba(214,214,214,0.85);
						-moz-box-shadow: 3px 5px 3px 0px rgba(214,214,214,0.85);
						box-shadow: 3px 5px 3px 0px rgba(214,214,214,0.85);
						float:right;
						background:#81cdcc;
						position:relative;
						height:35px;
						width:35px;
						margin-right:-35px;
						top:-31px;
						border-left:none;
					}


					.plus{
						-webkit-border-radius: 100px 100px 100px 100px;
						border-radius: 100px 100px 100px 100px;
						font-size:11px;
						height: 22px;
						width: 22px;
						cursor:pointer;
						background:#e5eefd;
						float:left;
						text-align:center;
						padding-top:3px;
						color:#77c2c7;
						margin-left:5px;
					}
				</style>
	{% endif %}
{% endblock %}