{% extends "::layout.html.twig" %}

{% set page_title_prefix = 'Playlist' %}
{% set page_subtitle = 'Contenus<span class="hidden-md"> de l\'affichage</span>' %}
{% set moderateOrViewContentsPageRoute = 'event_media' %}
{% if disableEditing is defined and ( disableEditing == true ) %}
    {% set page_title_prefix = 'Contenus' %}
    {% set moderateOrViewContentsPageRoute = 'event_view_contents' %}
{% elseif isTrash is defined and ( isTrash == true ) %}
    {% set page_title_prefix = 'Corbeille' %}
    {% set page_subtitle = 'Contenus<span class="hidden-md"> de la corbeille</span>' %}
    {% set moderateOrViewContentsPageRoute = 'event_trash' %}
{% endif %}

{% block title %}{{ page_title_prefix }}  {% trans %}de l'affichage{% endtrans %} "{{ event.name }}" - {{ parent() }}{% endblock %}

{% block head_end %}
    <script type="text/javascript">
        window.ouibeatTheme = '{{ event.type }}';
    </script>
{% endblock %}

{% block content_main %}
<style>
.sidenav {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
    right: -100%;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
	border-left: 1px solid #ddd;
    box-shadow: -2px 0px 5px #ccc;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}


/* MULTISELECT */
#screens > li > span, #transitions > li > span {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333333;
    white-space: nowrap;
}

#screens > li:hover, #transitions > li:hover {
	background: #00cfcb;
	cursor: pointer;
}

#screens > li:hover > span, #transitions > li:hover > span {
	color: #fff;
}

.ms-container{
  background: transparent url('../img/switch.png') no-repeat 50% 50%;
  width: 370px;
}

.ms-container:after{
  content: ".";
  display: block;
  height: 0;
  line-height: 0;
  font-size: 0;
  clear: both;
  min-height: 0;
  visibility: hidden;
}

.ms-container .ms-selectable, .ms-container .ms-selection{
  background: #fff;
  color: #555555;
  float: left;
  width: 45%;
}
.ms-container .ms-selection{
  float: right;
}

.ms-container .ms-list{
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
  -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
  -o-transition: border linear 0.2s, box-shadow linear 0.2s;
  transition: border linear 0.2s, box-shadow linear 0.2s;
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  position: relative;
  height: 200px;
  padding: 0;
  overflow-y: auto;
}

.ms-container .ms-list.ms-focus{
  border-color: rgba(82, 168, 236, 0.8);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  outline: 0;
  outline: thin dotted \9;
}

.ms-container ul{
  margin: 0;
  list-style-type: none;
  padding: 0;
}

.ms-container .ms-optgroup-container{
  width: 100%;
}

.ms-container .ms-optgroup-label{
  margin: 0;
  padding: 5px 0px 0px 5px;
  cursor: pointer;
  color: #999;
}

.ms-container .ms-selectable li.ms-elem-selectable,
.ms-container .ms-selection li.ms-elem-selection{
  border-bottom: 1px #eee solid;
  padding: 2px 10px;
  color: #555;
  font-size: 14px;
}

.ms-container .ms-selectable li.ms-hover,
.ms-container .ms-selection li.ms-hover{
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  background-color: #08c;
}

.ms-container .ms-selectable li.disabled,
.ms-container .ms-selection li.disabled{
  background-color: #eee;
  color: #aaa;
  cursor: text;
}

#sortable {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#sortable > li:hover {
	cursor: move;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: 1px 1px 5px #ccc;
	padding: 10px;
	margin-bottom: 10px;
}

form.form-screen .panel-heading {
	padding: 15px;
}

form.form-screen {
	margin-bottom: 25px;
}

h4.panel-title a {
	font-size: 14px;
}

/* loader */
.loader {
    border: 1px solid #CCCCCC; /* Light grey */
    border-top: 5px solid #03CFCB; /* Blue */
    border-radius: 50%;
    width: 70px;
    height: 70px;
    animation: spin 2s linear infinite;
    margin: auto;
    margin-top: 10%;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.colpick {
	z-index: 9999;
}
.item-row .form-control {
	width: 100%;
}

.storyboard-list a:hover {
	color: #03CFCB;
}

.dropdown {
    margin-bottom: 20px;
}
</style>

<div id="mySidenav" class="sidenav">

    	<div class="loader" style="display:none"></div>
    
    	<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    	
    	<div id="edit-screen" style="display:none">
            {% include 'OuibeatAppBundle:Backend:Storyboard/screen.html.twig' %}
    	</div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="wrapper-title row">
            <h1 class="title col-md-12">{{ page_title_prefix }} de l'affichage <strong>{{ event.name }}</strong></h1>
            <div class="dates col-md-12">
				<p>{% trans %}Du{% endtrans %} 
				<strong>{{ event.startDate | date('d M Y') }}</strong>
				{% trans %}au{% endtrans %}
				<strong>{{ event.endDate | date('d M Y') }}</strong></p>
			</div>
            <div class="group-button col-md-12">
                <a href="{{ path('event_view', { 'publicToken' : event.publicToken }) }}" class="btn" target="_blank">{% trans %}Voir{% endtrans %}</a>

                <a href="{{ path('event_edit', { 'event' : event.id }) }}" class="btn">{% trans %}Editer{% endtrans %}</a>

                {% if is_granted('ROLE_AGENT') or ( event.settings.setting('accessModeration') == true )  %}
                    <a href="{{ path('event_moderate', { 'event' : event.id }) }}" class="btn">{% trans %}Modérer{% endtrans %}</a>
                {% else %}
                    <a href="{{ path('event_view_contents', { 'event' : event.id }) }}" class="btn">{% trans %}Contenus{% endtrans %}</a>
                {% endif %}

                {% if is_granted('ROLE_AGENT') or ( event.settings.setting('accessModeration') == true ) %}
                    <a href="{{ path('event_trash', { 'event' : event.id }) }}" class="btn">{% trans %}Corbeille{% endtrans %}</a>
                {% endif %}

                <a href="{{ path('event_stats', { 'event' : event.id }) }}" class="btn" >{% trans %}Stats{% endtrans %}</a>
                
                {% if is_granted('ROLE_AGENT') or ( event.settings.setting('accessModeration') == true ) %}
                	{% if event.type == 'retail-cast' %}
                		<a href="{{ path('event_storyboard', { 'event' : event.id }) }}" class="btn" >{% trans %}Playlist{% endtrans %}</a>
                		<a href="{{ path('event_media', { 'event' : event.id }) }}" class="btn" >{% trans %}Médiathèque{% endtrans %}</a>
				    {% endif %}
                {% endif %}
                {# if is_granted('ROLE_ADMIN') %}
                    <a href="{{ path('event_download', { 'event' : event.id }) }}" class="btn">{% trans %}Télécharger les contenus{% endtrans %}</a>
                {% endif #}
            </div>
        </div>
    </div>
</div>

<div id="main">

		<div class="wrapper-filters row">

					<div class="col-md-3">
						<div class="dropdown">
							<button class="btn btn-block dropdown-toggle" type="button" id="add-screen" data-toggle="dropdown" aria-expanded="true">
								Ajoutez une slide <span class="caret"></span>
							</button>
							<ul id="screens" class="dropdown-menu dropdown-filters" role="menu" aria-labelledby="add-screen">
								<li role="screen"><span data-screen="mosaic">Mosaïque</span></li>
								<li role="screen"><span data-screen="slides-focus">Focus</span></li>
								<li role="screen"><span data-screen="intercalary">Pub</span></li>
								<!-- 
									<li role="screen"><span data-screen="counter-sw">Compteur des Réseaux Sociaux</span></li>
								 -->
							</ul>
						</div>
					</div>


					<div class="col-md-5">
						<div class="dropdown">
							<button class="btn btn-block dropdown-toggle" type="button" id="add-transition" data-toggle="dropdown" aria-expanded="true">
								Choisissez une transition entre deux slides <span class="caret"></span>
							</button>
							<ul id="transitions" class="dropdown-menu dropdown-filters" role="menu" aria-labelledby="add-transition">
								<li role="transition"><span data-transition="fade">Fade</span></li>
								<li role="transition"><span data-transition="scroll">Scroll</span></li>
							</ul>
						</div>
					</div>

		</div>

	
	<div id="transition-effect">
		<p>Effet de transition entre deux slides : <i>{{ settings.slideTransition }}</i><p>
	</div>
	
	
	<div id="storyboard">

    		<div class="md-12">
    			<ul id="sortable">
        			{%  for story in storyboard %}

						{% if(story.visible) %}
							{% set eye = 'fa-eye' %}
							{% set uiState = '' %}	
						{% else %}
							{% set eye = 'fa-eye-slash' %}
							{% set uiState = 'sortable-eye-slash' %}	
						{% endif %}	

        				<li data-content-id="{{ story.id }}" data-position={{ story.position }} class="ui-state-default ui-state-{{ story.id }} {{ uiState }}">
        					<div style="clear:both">
            					<div>
            						{% if(story.settings is null) %}
            							<p style="text-align:center"><strong class="title" style="font-size:20px">{{ transScreen[story.screen] }}</strong> - <i>Not Configured</i></p>
            						{% elseif(story.settings.title)  %}
            							<p style="text-align:center"><strong class="title" style="font-size:20px">{{ transScreen[story.screen] }}</strong> - {{ story.settings.title }}</p>
            						{% else %}
            							<p style="text-align:center"><strong class="title" style="font-size:20px">{{ transScreen[story.screen] }}</strong> - <i>Title not defined</i></p>
            						{% endif %}
            					    
            					</div>
            					<div>
        							<span onclick="openNav({{ story.id }})" class="btn btn-default btn-sm"><i class="backicon backicon_moderation-details"></i></span>
        							<button class="screen-trash btn btn-default btn-sm" data-ajax-url="{{ path('delete_storyboard_screen', { 'event' : event.id, 'id_screen' : story.id }) }}"><i class="backicon backicon_moderation-trash"></i></button>
									<span onClick="toggleVisibleSlide({{ story.id }})"><i id="eye-{{story.id}}" class="far {{eye}} btn btn-default btn-sm"></i></span>
									<span onClick="copySlide({{ story.id }})"><i class="far fa-copy btn btn-default btn-sm"></i></span>
								</div>
        					</div>
        				</li>
        				
        			{%  endfor %}
    			</ul>
    		</div>

	</div>
</div>
	
	<script src="{{ asset('assets_backend/js/jquery-2.1.1.min.js') }}"></script>
	<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
	
  	<script>
	  	var el = document.getElementById('sortable');
		  var sortable = Sortable.create(el, {
			  animation: 150,
			  easing: "cubic-bezier(1, 0, 0, 1)",
			  direction: 'vertical',
			  onUpdate: function(evt) {

                dataPosition = [];
                
                $("#sortable").find("li").each(function(){
                    
                	$(this).attr('data-position', parseInt( $(this).index() + 1) );
                	
					var json = { 
						"id": $(this).attr('data-content-id'),
						"position": $(this).attr('data-position') 
					};
					
					dataPosition.push(json)
                }); 

			  },
			  onEnd: function(evt) {
                var idEvent = {{ event.id}};
                
 				$.ajax({
					url: '/events/storyboard/update-position/'+idEvent,
					type: 'POST',
					data: 'positions='+JSON.stringify(dataPosition),
					success: function(response, status) {
						if(response.error == 0) {
							
						}
					},
					error: function(response, status, error) {

					}
 	 			});
			  }
		  });

		$("#screens > li > span").on("click", function(){
			
			var dataScreen = $(this).data("screen");
			
			var valueScreen = $(this).text();
			
			var idEvent = {{ event.id}};
			
			var numberLi = $("#screens li").length;
			
			$.ajax({
				url: '/events/storyboard/add-screen/'+idEvent,
				type: 'POST',
				data: 'screen='+dataScreen,
				success: function(response, status) {
					if(response.error == 0){
    					var html = "";
    					
    					html += '<li data-content-id="'+response.desc.id+'" data-position="'+response.desc.position+'" class="ui-state-default ui-state-'+response.desc.id+' ui-sortable-handle">';
        					html += '<div style="clear:both">';
    							html += '<div>';
    								html += '<p style="text-align:center"><strong class="title" style="font-size:20px">'+valueScreen+'</strong> - <i>Title not defined</i></p>';
    							html += '</div>';
        					html += '</div>';
        					html += '<div>';
    							html += '<span onclick="openNav('+response.desc.id+')" class="btn btn-default btn-sm"><i class="backicon backicon_moderation-details"></i></span>';
    							html += '<button style="margin-left: 3px;" class="screen-trash btn btn-default btn-sm" data-ajax-url="/events/storyboard/delete/'+idEvent+'/'+response.desc.id+'"><i class="backicon backicon_moderation-trash"></i></button>';
								html += '<span style="margin-left: 3px;" onClick="toggleVisibleSlide('+response.desc.id+')"><i id="eye-'+response.desc.id+'" class="far fa-eye btn btn-default btn-sm"></i></span>';
								html += '<span style="margin-left: 3px;" onClick="copySlide('+response.desc.id+')"><i class="far fa-copy btn btn-default btn-sm"></i></span>';
							html += '</div>'
    					html += '</li>';
					
						$("#storyboard #sortable").append(html);
					}
				},
				error: function(response, status, error) {

				}
			});
			
		});
		
		
		$("#transitions > li > span").on("click", function(){
			
			var dataTransition = $(this).data("transition");
			
			var valueTransition = $(this).text();
			
			var idEvent = {{ event.id}};

			$.ajax({
				url: '/events/storyboard/add-transition/'+idEvent,
				type: 'POST',
				data: 'transition='+dataTransition,
				success: function(response, status) {
					if(response.error == 0){
						console.log(dataTransition);
						var html = '<p>Effet de transition entre deux slides : <i>'+dataTransition+'</i><p>';
						$("#transition-effect").html(html);
					}
				},
				error: function(response, status, error) {

				}
			});
			
		});

		$(document).on("click", '.screen-trash', function( event ){
			event.preventDefault();
			
			$( this ).blur();
			
	        if ( !confirm( "Voulez-vous réellement mettre ce contenu dans la corbeille ?" ) )
	        {
	            return;
	        }
	        
			$.ajax({
				url: $(this).data('ajax-url'),
				type: 'POST',
				success: function(response, status) {
					if(response.error == 0) {
						$('.ui-state-'+response.desc.id).remove();
					}
				},
				error: function(response, status) {

				}
			});


		})
		
		/* Set the width of the side navigation to 250px */
        function openNav(id_screen) {
	        
            document.getElementById("mySidenav").style.right = "0";
            
            var idEvent = {{ event.id}};
            $("#edit-screen").hide();
            // loading
            $(".loader").show();
            $.ajax({
				url: '/events/storyboard/screen/'+idEvent+'/'+id_screen,
				type: 'POST',
				success: function(response, status) {
					// fin loading
					$(".loader").hide();
					$("#edit-screen").show();
					$("#edit-screen").html(response);
				},
				error: function(response, status) {

				}
            });
			
        }

		/* Set slide visible ON/OFF */
		function toggleVisibleSlide(id_screen) {
			var idEvent = {{ event.id}};
			$.ajax({
				url: '/events/storyboard/visible/screen/'+idEvent+'/'+id_screen,
				type: 'POST',
				success: function(response, status) {
					if(!response.error) {
						if(response.desc.visible) {
							$("#eye-"+id_screen).attr("class", "far fa-eye btn btn-default btn-sm");
							$("ul#sortable li.ui-state-"+id_screen).removeClass("sortable-eye-slash");
						}
						else {
							$("#eye-"+id_screen).attr("class", "far fa-eye-slash btn btn-default btn-sm");
							$("ul#sortable li.ui-state-"+id_screen).addClass("sortable-eye-slash");
						}
							
					}
				},
				error: function(err, status) {
					// error 405, Method Not Allowed (status: 405)					
				}
			})
		}

		/* copy a slide */
		function copySlide(id_screen) {
			var idEvent = {{ event.id }};
			$.ajax({
				url: '/events/storyboard/copy/screen/'+idEvent+'/'+id_screen,
				type: 'POST',
				success: function(response, status) {
					console.log(response)
					if(response.error == 0){
    					var html = "";
						var title = "<i>Title not defined</i>";

						if (response.desc.settings && response.desc.settings.title) {
							title = response.desc.settings.title;
						}
    					
    					html += '<li data-content-id="'+response.desc.id+'" data-position="'+response.desc.position+'" class="ui-state-default ui-state-'+response.desc.id+' ui-sortable-handle">';
        					html += '<div style="clear:both">';
    							html += '<div>';
    								html += '<p style="text-align:center"><strong class="title" style="font-size:20px">'+response.desc.screen+'</strong> - '+ title +'</p>';
    							html += '</div>';
        					html += '</div>';
        					html += '<div>';
    							html += '<span onclick="openNav('+response.desc.id+')" class="btn btn-default btn-sm"><i class="backicon backicon_moderation-details"></i></span>';
    							html += '<button style="margin-left: 3px;" class="screen-trash btn btn-default btn-sm" data-ajax-url="/events/storyboard/delete/'+idEvent+'/'+response.desc.id+'"><i class="backicon backicon_moderation-trash"></i></button>';
								html += '<span style="margin-left: 3px;" onClick="toggleVisibleSlide('+response.desc.id+')"><i id="eye-'+response.desc.id+'" class="far fa-eye btn btn-default btn-sm"></i></span>';
								html += '<span style="margin-left: 3px;" onClick="copySlide('+response.desc.id+')"><i class="far fa-copy btn btn-default btn-sm"></i></span>';
							html += '</div>'
    					html += '</li>';
					
						$("#storyboard #sortable").append(html);
					}
				},
				error: function(err, status) {

				}
			})
		}

        /* Set the width of the side navigation to 0 */
        function closeNav() {
            document.getElementById("mySidenav").style.right = "-100%";
        }

        /* Valid form edit screen */
        $("#submit-intercalary").submit(function(e){
			e.preventDefault();
        });


        $(document.body).on('click',".colorpicker",function (e) {
            
            $(this).colpick({
                submit:0,
                color: '333333',
                colorScheme:'light',
                onChange:function(hsb,hex,rgb,el,bySetColor) {
                    if(!bySetColor) $(el).val('#'+hex);
                },
                onShow:function(){
                     $(this).colpickSetColor(this.value);
                }
            }).keyup(function(){
                $(this).colpickSetColor(this.value);
            });
        });

	</script>
{% endblock %}