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

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

{% block content_main %}


{% include 'OuibeatAppBundle:Backend:Event/info-events.html.twig' %}

<script src="{{ asset('assets_backend/js/jquery-2.1.1.min.js') }}"></script>

<script>
$(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>

<h2 class="title">{% trans %}Paramètres de l'affichage{% endtrans %}</h2>



{% include 'OuibeatAppBundle:Backend:Event/edit-sources-configurations.html.twig' %}
<style>
@import url('https://fonts.googleapis.com/css?family=Alegreya|Alegreya+Sans|Cormorant|Eczar|Fira+Sans|Lato|Libre+Franklin|Montserrat|Muli|Open+Sans|Oswald|Roboto|Rubik|Space+Mono|Work+Sans');
</style>
    <form role="form" method="POST" {{ form_enctype(formSettings) }}>

        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
       
        	
        	<!-- CONFIGURATION DE L'ECRAN -->
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingConf">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseConf" aria-expanded="true" aria-controls="collapseConf">{% trans %}Configuration de l'écran{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseConf" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingConf">
                    <div class="panel-body">
                    
                        <h3>{% trans %}Orientation{% endtrans %}</h3>
						<div class="row">
							<div class="col-md-12">{{ form_row(formSettings.orientation) }}</div>
						</div>
                        <h3>{% trans %}Résolution{% endtrans %}</h3>
						<div class="row">
							<div class="col-md-12">{{ form_row(formSettings.resolution) }}</div>
								<div class="col-md-12">
									<a target="blank" href="https://bestfirms.com/what-is-my-screen-resolution/" class="btn btn-default">Quelle la résolution de mon écran ?</a>
								</div>
						</div>
                        <h3>{% trans %}Contenu{% endtrans %}</h3>
						<div class="row">
							<div class="col-md-12">{{ form_row(formSettings.mainFont) }}</div>
						</div>
						<div id="styleFont">
							{% if settings.settings.mainFont is not null %}
								<div style="background:#F1FAE6;padding:5px;margin-bottom:15px;">
									<p style="font-size:10px"><i>font: {{ settings.settings.mainFont|replace({'+': ' '})  }}</i></p>
									<p style="font-family:{{ settings.settings.mainFont|replace({'+': ' '})  }}, sans-serif;font-size:16px;background:#F1FAE6;padding:5px;">Then came the night of the first falling star</p>
								</div>
							{% endif %}
						</div>
                    </div>
                </div>
            </div>
            
            <!-- CONFIGURATION DES TAGS -->
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingTag">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTag" aria-expanded="true" aria-controls="collapseTag">{% trans %}Configuration des Tags{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseTag" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTag">
                    <div class="panel-body">
                        <h3>{% trans %}Tags{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-12">
                        <div id="photobooth-filters-events-filter-block" class="collection-block" data-prototype="{{ form_widget(formSettings.tags.vars.prototype)|e }}<hr />" data-remove-selector=".form-group:first-child input">
                            {% set count = 0 %}
                            {% for eventsFilterItem in formSettings.tags %}
                                <div class="item-row form-group">
                                    {{ form_widget(eventsFilterItem) }}
                                    <hr />
                                </div>
                            {% endfor %}
                        </div>
                        {% if formSettings.tags|length == 0 %}
                            {% set count = 0 %}
                        {% else %}
                            {% set count = formSettings.tags|keys|last + 1 %}
                        {% endif %}
                        <button type="button" id="add-another-events-filter-item" data-item-count="{{ count }}" data-remove-selector=".form-group:first-child input" class="btn btn-default add-another-item">Ajouter un nouvel élément au sous-filtre</button>
                    
                            </div>
                        </div>
                    </div>
                </div>
            </div>

			<!-- CONFIGURATION DU BANDEAU -->
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingBannerTop">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseBannerTop" aria-expanded="true" aria-controls="collapseBannerTop">{% trans %}Configuration du Bandeau haut{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseBannerTop" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingBannerTop">
                    <div class="panel-body">
                        <h3>{% trans %}Bandeau haut{% endtrans %}</h3>
                        <div class="row">
                            <div class="col-md-12">
                                {{ form_row(formSettings.language) }}
                            </div>
                        </div>
                        <div class="row">
                        	<div class="col-md-12">
                        		{{ form_row(formSettings.degrees) }}
                        	</div>
                        </div>
                        <div class="row">
                        	<div class="col-md-12">
                        		<div class="form-group">
                        			<label class="control-label required">Pays</label>
                            		{% if settingsArray.country|capitalize %}
                            			<p><em>Pays sélectionné : {{ settingsArray.country }}</em></p>
                            		{% endif %}
                            		<select name="country" class="countries form-control" id="countryId">
                                    	<option value="">Sélectionner un pays</option>
                                    </select>
                                </div>
                        	</div>
                        	<div class="col-md-12">
                        		<div class="form-group">
                        			<label class="control-label required">Région</label>
                            		{% if settingsArray.geo.state %}
                            			<p><em>Région sélectionnée : {{ settingsArray.geo.state|capitalize }}</em></p>
                            		{% endif %}
                                	<select name="state" class="states form-control" id="stateId">
                                    	<option value="">Sélectionner une région</option>
                                    </select>
                                </div>
                        	</div>
                        	<div class="col-md-12">
                        		<div class="form-group">
                        			<label class="control-label required">Ville</label>
                            		{% if settingsArray.city %}
                            			<p><em>Ville sélectionnée : {{ settingsArray.city|capitalize }}</em></p>
                            		{% endif %}
                                    <select name="city" class="cities form-control" id="cityId">
                                    	<option value="">Sélectionner une ville</option>
                                    </select>
                                </div>
                        	</div>
                        </div>
                        <div class="row">
                        	<div class="col-md-12">
                        		{{ form_row(formSettings.headerBackgroundColor) }}
                        	</div>
                            <div class="col-md-12">
                            	{{ form_row(formSettings.mainLogoImageFile) }}
                                {% if event.settings.getWebMainLogoImagePath is not null %}
                                    <p><img src="{{ asset(event.settings.getWebMainLogoImagePath) }}" width="100" /></p>
                                    {{ form_row(formSettings.removeMainLogo) }}
                                {% endif %}
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            {% if settings.getSetting('accessModeration') == true or is_granted('ROLE_AGENT') %}

                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingModeration">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseModeration" aria-expanded="true" aria-controls="collapseModeration">{% trans %}Options de modération{% endtrans %}</a>
                        </h4>
                    </div>
                    <div id="collapseModeration" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingModeration">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <h3>{% trans %}Modération contenu{% endtrans %}</h3>
                                    {{ form_row(formSettings.blacklistAll) }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div id="whitelist-block" class="collection-block" data-prototype="{{ form_widget(formSettings.whitelist.vars.prototype)|e }}">
                                        <h3>{% trans %}White list{% endtrans %}</h3>
                                        {% for account in formSettings.whitelist %}
                                            <div class="item-row form-group">
                                                {{ form_widget(account) }}
                                            </div>
                                        {% endfor %}
                                    </div>

                                    {% if formSettings.whitelist|length == 0 %}
                                        {% set count = 0 %}
                                    {% else %}
                                        {% set count = formSettings.whitelist|keys|last + 1 %}
                                    {% endif %}
                                    <button type="button" id="add-another-whitelist" data-item-count="{{ count }}" class="btn btn-default add-another-item">{% trans %}Ajouter un nouveau compte{% endtrans %}</button>
                                </div>
                                <div class="col-md-6">
                                    <div id="blacklist-block" class="collection-block" data-prototype="{{ form_widget(formSettings.blacklist.vars.prototype)|e }}">
                                        <h3>{% trans %}Black list{% endtrans %}</h3>
                                        {% for account in formSettings.blacklist %}
                                            <div class="item-row form-group">
                                                {{ form_widget(account) }}
                                            </div>
                                        {% endfor %}
                                    </div>

                                    {% if formSettings.blacklist|length == 0 %}
                                        {% set count = 0 %}
                                    {% else %}
                                        {% set count = formSettings.blacklist|keys|last + 1 %}
                                    {% endif %}
                                    <button type="button" id="add-another-whitelist" data-item-count="{{ count }}" class="btn btn-default add-another-item">{% trans %}Ajouter un nouveau compte{% endtrans %}</button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <h3>{% trans %}Mise en corbeille & vidage automatique{% endtrans %}</h3>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    {{ form_row(formSettings.automaticMoveToTrash) }}
                                </div>
                                <div class="col-md-6">
                                    {{ form_row(formSettings.automaticEmptyTrash) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            {% endif %}
            
            <!-- CSS PERSONNALISE -->
            {% if settings.getSetting('accessCustomCss') == true or is_granted('ROLE_AGENT') %}
                <div class="panel panel-default">
            {% else %}
                <div class="panel panel-default" style="display: none;">
            {% endif %}
                <div class="panel-heading" role="tab" id="headingCustomCss">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseCustomCss" aria-expanded="true" aria-controls="collapseCustomCss">{% trans %}CSS personnalisé{% endtrans %}</a>
                    </h4>
                </div>
                <div id="collapseCustomCss" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingCustomCss">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                {{ form_widget(formSettings.customCss) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        {{ form_widget(formSettings._token) }}
        <input type="submit" value="{% trans %}Sauvegarder{% endtrans %}" class="btn btn-primary" />
</div>

{% if is_granted('ROLE_AGENT') %}
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseClient" aria-expanded="true" aria-controls="collapseClient">{% trans %}Gestion des options client{% endtrans %}</a></h3>
            </div>
            <div id="collapseClient" class="panel-collapse" role="tabpanel">
                <div class="panel-body">

                    <div class="form-group">
                        {{ form_widget(formSettings.accessModeration) }}
                        {{ form_label(formSettings.accessModeration) }}
                    </div>

                    <div class="form-group">
                        {{ form_widget(formSettings.accessCustomCss) }}
                        {{ form_label(formSettings.accessCustomCss) }}
                    </div>

                    <input type="submit" value="{% trans %}Sauvegarder{% endtrans %}" class="btn btn-primary" />
                </div>
            </div>
        </div>
    </div>
{% endif %}

</form>
</div>

<script>

function locationInfo() {

	this.getCities = function(stateValue) {
		$(".cities option:gt(0)").remove();
		$('.cities').find("option:eq(0)").html("En attente...");
		$.ajax({
			url: '/events/list/location?type=getCities&stateValue='+stateValue,
			type: 'POST',
			success: function(response, status) {
				$('.cities').find("option:eq(0)").html("Sélectionner une ville");
				var cities = '';
				for(var i = 0; i < response.length; i++) {
					cities += '<option value="'+response[i]['city']+'">'+response[i]['city']+'</option>';
				}
				cities += '';
				$('.cities').append(cities);
			},
			error: function(response, status, error) {

			}
		})
	}

	this.getStates = function(iso3) {
	    $(".states option:gt(0)").remove(); 
	    $(".cities option:gt(0)").remove();
	    $('.states').find("option:eq(0)").html("En attente...");
		$.ajax({
			url: '/events/list/location?type=getStates&iso3='+iso3,
			type: 'POST',
			success: function(response, status) {
				$('.states').find("option:eq(0)").html("Sélectionner une région");
				var states = '';
				for(var i = 0; i < response.length; i++) {
					states += '<option value="'+response[i]['admin_name']+'">'+response[i]['admin_name']+'</option>';
				}
				states += '';
				$('.states').append(states);
			},
			error: function(response, status, error) {

			}
		});
	}

	this.getCountries = function() {
		$.ajax({
			url: '/events/list/location?type=getCountries',
			type: 'POST',
			success: function(response, status) {
				var countries = '';
				for(var i = 0; i < response.length; i++) {
					countries += '<option value="'+response[i].iso3+'">'+response[i].country+'</option>';
				}
				countries += '';
				$(".countries").append(countries);
			},
			error: function(response, status, error) {

			}
		});
	}
}

$(function() {
	
	var loc = new locationInfo();

	loc.getCountries();

	$(".countries").on("change", function(e) {
		var countryIso3 = $(this).val();
		if(countryIso3 != '')
			loc.getStates(countryIso3)
		else
			$(".states option:gt(0)").remove();
	});

	$(".states").on("change", function(ev) {
	    var stateValue = $(this).val()
	    if(stateValue != '')
	    	loc.getCities(stateValue);
	    else
	        $(".cities option:gt(0)").remove();
	});
})

$("#settings_mainFont").change(function(){
	var $type = $(this).val();
	var style = '<div style="background:#F1FAE6;padding:5px;margin-bottom:15px;">';
	style += '<p style="font-size:10px"><i>font: '+$type.replace('+', ' ')+'</i></p>';
	style += '<p style="font-family:'+$type.replace('+', ' ')+', sans-serif;font-size:16px;">Then came the night of the first falling star.</p>';
	style += '</div>';
	
	$("#styleFont").html(style);

	
})

</script>

{% endblock %}