{% extends 'layout.twig' %}

{% block body %}

{% if redirect %}
<script>
	$( document ).ready(function() {
		redirectJSWithPost('{{ redirect }}');
	});
</script>
{% endif %}

<div class="contenu clearfix"  id="accueil">
 	<div class="row">
     	<div class="single" id="modules_index">

			<a class="tuiles_index {% if type == 'P2P' %}active{% endif %}{% if P2PActive == 0 %} desactive_index {% endif %}" id="p2p" {% if P2PActive == 1 %} onclick="$('#typeValue').val('P2P');$('#formType').submit();" {% endif %}>
				<div class="tuile">
					<div class="divIcone pictos">
					</div>
					<div class="text">
						{{ 'P2P' | trad }}
					</div>
				</div>
                <div class="descriptif">
                	{{ 'Gérez le cycle complet des demandes d\'achat, des commandes et des factures tout en contrôlant vos dépenses avec des circuits de validation et un suivi budgétaire.' | trad }}
                </div>
			</a>

			{% set S2SActive = 0 %}
			<a class="tuiles_index {% if type == 'S2C' %}active{% endif %}{% if S2SActive == 0 %} desactive_index {% endif %}" id="s2c" {% if S2SActive == 1 %}  onclick="$('#typeValue').val('S2C');$('#formType').submit();" {% endif %}>
        		<div class="tuile">
					<div class="divIcone pictos">
					</div>
					<div class="text">
						{{ 'S2C' | trad }}
					</div>
				</div>
                <div class="descriptif">
                	{{ 'Pilotez votre stratégie achats en automatisant le processus de la gestion des appels d’offres à la contractualisation.' | trad }}
                </div>
			</a>

			<a class="tuiles_index {% if type == 'RelationFournisseurs' %}active{% endif %}{% if RFActive == 0 %} desactive_index {% endif %}" id="relation_fournisseurs" {% if RFActive == 1 %} onclick="$('#typeValue').val('RelationFournisseurs');$('#formType').submit();" {% endif %}>
            	<div class="tuile">
					<div class="divIcone pictos">
					</div>
					<div class="text">
						{{ 'Relation fournisseurs' | trad }}
					</div>
				</div>
                <div class="descriptif">
                	{{ 'Dynamisez et optimisez la relation avec vos fournisseurs.' | trad }}
				</div>
			</a>

			<a class="tuiles_index {% if type == 'PilotageAchats' %}active{% endif %}{% if PAActive == 0 %} desactive_index {% endif %}" id="pilotage_achats" {% if PAActive == 1 %} onclick="$('#typeValue').val('PilotageAchats');$('#formType').submit();" {% endif %}>
            	<div class="tuile">
					<div class="divIcone pictos">
					</div>
					<div class="text">
						{{ 'Pilotage Achats' | trad }} 
					</div>
				</div>
                <div class="descriptif">
                	{{ 'Mesurez et pilotez la performance de vos achats.' | trad }}
				</div>
			</a>

			<style>
				#modules_index {
					padding-top :0px;
					display:flex;
					justify-content: center;
				}
				.tuiles_index {
					width: 200px;
					box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
					border:0px;
					padding : 0px;
					margin: 0% 2% 1% 0%;
					height: 200px;
				}

				.tuiles_index .tuile {
					height:100%;
					position: relative;
				}

				.tuiles_index .tuile .pictos{
					background-color: #89ccc580;
					height: 66%;
					border-radius: 6px 6px 0px 0px;
				}

				.tuiles_index .tuile .text {
					height: 33%;
					color: black;
					margin-top:20px;
					text-align: center;
					font-weight: bold;
					font-size: 16px;
				}

				.descriptif{
					position: absolute;
					top : 50px;
					padding-left: 10px;
					padding-right: 10px;
					width:100%;
				}

				.tuiles_index:hover .text{
					color: white;
				}
				.tuiles_index:hover .pictos{
					display:none;
				}

				.tuiles_index.active .text {
					color: white;
				}

				.tuiles_index.desactive_index .pictos{
					background-color: var(--main-color-opac15);
				}
			</style>

            {# <a class="tuiles_index {% if type == 'P2P' %}active{% endif %}{% if P2PActive == 0 %} desactive_index {% endif %}" id="p2p" {% if P2PActive == 1 %} onclick="$('#typeValue').val('P2P');$('#formType').submit();" {% endif %}>
            	<div class="interactions">
                    <div class="pictos"></div>
                </div>
                <div class="titre">{{ 'P2P' | trad }} </div>
                <div class="descriptif">
                	{{ 'Gérez le cycle complet des demandes d\'achat, des commandes et des factures tout en contrôlant vos dépenses avec des circuits de validation et un suivi budgétaire.' | trad }}
                </div>
            </a>
        	<a class="tuiles_index {% if type == 'S2C' %}active{% endif %}{% if S2SActive == 0 %} desactive_index {% endif %}" id="s2c" {% if S2SActive == 1 %}  onclick="$('#typeValue').val('S2C');$('#formType').submit();" {% endif %}>
        		<div class="interactions">
                    <div class="pictos"></div>
                </div>
                <div class="titre">{{ 'S2C' | trad }} </div>
                <div class="descriptif">
                	{{ 'Pilotez votre stratégie achats en automatisant le processus de la gestion des appels d’offres à la contractualisation.' | trad }}
                </div>
        	</a> 
            <a class="tuiles_index {% if type == 'RelationFournisseurs' %}active{% endif %}{% if RFActive == 0 %} desactive_index {% endif %}" id="relation_fournisseurs" {% if RFActive == 1 %} onclick="$('#typeValue').val('RelationFournisseurs');$('#formType').submit();" {% endif %}>
            	<div class="interactions">
                    <div class="pictos"></div>
                </div>
                <div class="titre">{{ 'Relation fournisseurs' | trad }} </div>
                <div class="descriptif">
                	{{ 'Dynamisez et optimisez la relation avec vos fournisseurs.' | trad }}
                </div>
            </a> 
            <a class="tuiles_index {% if type == 'PilotageAchats' %}active{% endif %}{% if PAActive == 0 %} desactive_index {% endif %}" id="pilotage_achats" {% if PAActive == 1 %} onclick="$('#typeValue').val('PilotageAchats');$('#formType').submit();" {% endif %}>
            	<div class="interactions">
                    <div class="pictos"></div>
                </div>
                <div class="titre">{{ 'Pilotage Achats' | trad }} </div>
                <div class="descriptif">
                	{{ 'Mesurez et pilotez la performance de vos achats.' | trad }}
                </div>
            </a> #}
    	</div>
	</div>
	<div class="row">
    	<div class="colonne2" id="tableau_bord" style="">
    		<h2 class="border-bottom" >{{ 'Tableau de bord' | trad }} </h2>
    		<div id='tableauDeBord'></div>
    	</div>
		<div class="colonne2 last">
			<h2 class="border-bottom">{{ 'Mes Actualités' | trad }}</h2>
			<iframe name="I2" width="100%" height="400" align="left" id="I2" src="{{ actu.URL_PAGE }}" border="0" frameborder="0" scrolling="yes" >&nbsp;</iframe>
		</div>
	</div>
	<div class="row">
		<div class="colonne2">
			{% if listeAccesRapide | length > 0 %}
			<div id="acces-rapide">
				<h2 class="border-bottom">{{ 'Mes Accès rapides' | trad }}</h2>
				<div class="scroll_favoris">
					{% for AccesRapide in listeAccesRapide %}
						{% if AccesRapide.PATH_PARAMS%}
							<a href="{{ path(AccesRapide.PATH_FAV, AccesRapide.PATH_PARAMS) }}" class="glyphicon glyphicon-triangle-right">
						{% else %}
							<a href="{{ path(AccesRapide.PATH_FAV) }}" class="glyphicon glyphicon-triangle-right">
						{% endif %}
								<span style='font-family:"Segoe UI", Helvetica, Arial, sans-serif;'>{{ AccesRapide.TITRE_FAV }}</span>
							</a>
					{% endfor %}
				</div>
			</div>
			{% endif %}
		</div>

		<div class="colonne2 last">
			{% include '@index/_favoris.twig' %}
		</div>
	</div>
</div>
	
<form method="POST" id="formType">
	<input type="hidden" name="type" id="typeValue" value="" />
</form>
</div>
<script>
	$(function() {
		$.ajax({
		  	dataType : 'html',
    		url: '{{path('Index.Index.ajaxTableauDeBord')}}',
    		type: "POST",
    		success: function(result){
    			$('#tableauDeBord').html(result);
				$(window).scrollTop(0); 
    		}
    	});
	});

	{% if NouvelleConnexion == 1 %}
		{# var socket = io.connect('http://figari:1337',{query: 'room={{ getSession('Session_Login')}}'});
		var now = new Date();
		
		socket.emit('connexionUser',  
				{ 
					nom : jQuery('.nom').html(),
					initiale : jQuery('.client > .initiale').html(),
					nomSociete : jQuery('.nomSocieteHeader').html(),
					texte : now.getHours()+':'+ now.getMinutes()+ ', ' +jQuery('.nom').html() + ' vient de se connecter avec la société <strong>'  + jQuery('#nomSocieteHeader').html()+'</strong>',
				
				
				}
			); #}
			{{ deleteSession('NouvelleConnexion') }}
	{% endif %}
</script>
{% endblock %}