{# templates/agent/consultation/formulaire.html.twig #}

{% block stylesheets %}
	<link href="{{ asset('assets/css/consultation.css') }}" rel="stylesheet"/>
{% endblock %}

{% extends 'agent/agent_base.html.twig' %}

{% block title %}Mes formulaires remplis{% endblock %}
	 
{% block content %}
    <div class="container-fluid">
        <h3 class="mb-5">Visualisation des données par formulaire</h3>

        {# Affichage des messages flash #}
        {% for message in app.flashes('success') %}
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ message }}
                <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
        {% for message in app.flashes('error') %}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ message }}
                <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
        {% for message in app.flashes('warning') %}
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                {{ message }}
                <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}

       
		<div class="row">
			{# vollet gauche #}
			<div class="col-md-3">
				{# --composante-- #}
				<div class="card shadow mb-4">
					<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
						<h5 class="text-body mb-0">Filtrer selon les composants</h5>
					</div>
					<div class="card-body">
						<label for=""> Choix composant </label> 
						<select class="form-control" name="formulaire_id" id="formulaire_id" onchange="chargeIndicateur2();" data-live-search="true">
							{% for formulaire in formulairesVisibles %}
								<option value="{{ formulaire.id }}" data-tokens="{{ formulaire.titre }}">
									{{ formulaire.titre }}
								</option>
							{% endfor %}
						</select>
						
						
					</div>
				</div>
				
				{# --periode-- #}
				<div class="card shadow mb-4">
					<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
						<h5 class="text-body mb-0">Période</h5>
					</div>
					<div class="card-body">
						<div id="periodeBox"></div>
					</div>
				</div>
				
				{# --indicateurs-- #}
				<div class="card shadow mb-4">
					<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
						<h5 class="text-body mb-0">Indicateurs </h5>
					</div>
					<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
						<div class='input-group'>
							<input type="text" name="indicateursearch" id="indicateursearch" class='form-control'placeholder=" Rechercher indicateurs" style="height: 30px;border-radius:0 " />
							<span class='input-group-addon' style="padding: 0;margin: 0"><a class="btn btn-default" onclick="chargeIndicateur()" style="height: 30px;border-radius:0;cursor: pointer; ">OK</a></span>
						</div>
					</div>
					<div class="card-body" style='max-height: 500px; overflow-y: scroll; overflow-x: scroll; max-width: 350px;font-size: 12px'	id='conteneur_indicateurs'>
						<div id="zoneIndicateurCompteur"></div>
						<ul id="tree1">
							<div id="zoneIndicateur"></div>
						</ul>
					</div>
				</div>
			</div>
			
			{# vollet droite #}
			<div class="col-md-9">
				{# --localite -- #}
				<div class="card shadow mb-4">
					<div class="card-body">
						<div id="localiteBox"></div>
					</div>
				</div>
			
				{# --Tableau-- #}
				<div class="card shadow mb-4">
					<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
						<h5 class="text-body mb-0">Tableau </h5>
					</div>
					<div class="card-body">
						<div id="tabBox" class='table-responsive exportable' style='overflow-x:scroll'></div>
					</div>
					<div class="card-footer">
						<div class="row" style="margin: 0;">
							<div class="col-sm-6"></div>
							<div class="col-sm-6 text-right">
								<input type="hidden" id='page_composant' value="marche_agri">
								<a class='btn btn-warning' role='button' value='' disabled='true' id='run_data' onclick=""> T&eacute;l&eacute;charger les donn&eacute;es</a>
							</div>
						</div>
					</div>
				</div>
				
				{# --Graphique -- #}
				<div class="card shadow mb-4">
					<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
						<h5 class="text-body mb-0">Graphique  </h5>
					</div>
					<div class="card-body">
						<div id="grapheBox"></div>
					</div>
					<div class="card-footer">
						<div class="table-responsive row">
							<div class="row" style="margin: 0 20px">
								<div class="col-sm-12">
									<div class="btn-group">
										 <a href="javascript:void(0)" class='btn btn-default' onclick="setVarValue('charteType', 'line'); "> <i class="fa fa-line-chart" aria-hidden="true"></i> Line</a>
										 <a href="javascript:void(0)" class='btn btn-default' onclick="setVarValue('charteType', 'column');"> <i class="fa fa-bar-chart"></i> Colonne</a>
										 <a href="javascript:void(0)" class='btn btn-default' onclick="setVarValue('charteType', 'bar');"> <i class="fa fa-signal"></i> Barre </a>
										 <!--
										 <a href="javascript:void(0)" class='btn btn-default' onclick="setVarValue('charteType', 'col_emp'); "> <i class="fa fa-signal"></i> Col. Empill�e</a>
										 <a href="javascript:void(0)" class='btn btn-default' onclick="setVarValue('charteType', 'bar_emp');"> <i class="fa fa-signal"></i> Bar Empil�e</a>
										 -->               
										 <a href="javascript:void(0)" class='btn btn-default' onclick="setVarValue('charteType', 'pie');"> <i class="fa fa-chart-pie"></i> Camembert </a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				{# --Informations -- #}
				<div class="card shadow mb-4">
					<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
						<h5 class="text-body mb-0">Informations complémentaires sur les indicateurs  </h5>
					</div>
					<div class="card-body" id="infoBox">
						<div class="col-sm-9" id='log_info'></div>
						<div class="col-sm-3" id=''></div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
{% endblock %}


{% block javascripts %}
	<script src="{{ asset('assets/js/consult-indicateur.js ')}}"></script>
	<script src="{{ asset('assets/js/jquery.min.js')}}"></script>
	<script src="{{ asset('assets/js/jquery-ui.min.js')}}"></script>
	
	<script>
		$(document).ready(function(){
			chargeIndicateur();
		});
		
		$.fn.extend({
    treed: function (o) {
      
      var openedClass = 'glyphicon-minus-sign';
      var closedClass = 'glyphicon-plus-sign';
      
      if (typeof o != 'undefined'){
        if (typeof o.openedClass != 'undefined'){
        openedClass = o.openedClass;
        }
        if (typeof o.closedClass != 'undefined'){
        closedClass = o.closedClass;
        }
      };
      
        //initialize each of the top levels
        var tree = $(this);
        tree.addClass("tree");
        tree.find('li').has("ul").each(function () {
            var branch = $(this); //li with children ul
            branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
            branch.addClass('branch');
            branch.on('click', function (e) {
                if (this == e.target) {
                    var icon = $(this).children('i:first');
                    icon.toggleClass(openedClass + " " + closedClass);
                    $(this).children().children().toggle();
                }
            })
            branch.children().children().toggle();
        });
        //fire event from the dynamically added icon
      tree.find('.branch .indicator').each(function(){
        $(this).on('click', function () {
            $(this).closest('li').click();
        });
      });
        //fire event to open branch if the li contains an anchor instead of text
        tree.find('.branch>a').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
        //fire event to open branch if the li contains a button instead of text
        tree.find('.branch>button').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
    }
});

//Initialization of treeviews


	</script>
{% endblock %}