{% extends 'front/partials/master.html.twig' %}


{% block title %}Domaines de recherche{% endblock %}
{% block stylesheets %}
{{ parent() }}
<style>
#myChart {
   margin: auto;
   width: 100%;
   height: auto;
}
.titleUR {
    color: #CC6699;
    text-align: right;
}
.titleUR2 {
    color: #66CC33;
    text-align: left;
}
</style>
{% endblock %}
{% block body %}
<div class="breadcrumb-area">
    <div class="breadcrumb-top default-overlay bg-img breadcrumb-overly-3 pt-100 pb-95" style="background-image:url(front/assets/img/bg/bg_ur.jpg);">
        
    </div>
    <div class="breadcrumb-bottom">
        <div class="container">
            <ul>
                <li><a href="{{path('app_front')}}">Accueil</a> <span><i class="fa fa-angle-double-right"></i>Domaines de recherche</span></li>
            </ul>
        </div>
    </div>
</div>
<div class="event-area pt-130 pb-130">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12">
                <div class="blog-details-wrap mr-40">
                    <div class="blog-details-top">
                        <div class="container">
                            <div class="row">
                                <div class="col-lg-4 col-sm-4">
                                    <div class="single-choose-us2 mt-45 text-center">
                                        <div class="titleUR">6 </div>
                                        <div class="titleUR">Unités de recherches en Sciences de l’Ingénieur</div>
                    
                                        <div class="titleUR mt-40" style="color:#6666CC;">1 </div>
                                        <div class="titleUR" style="color:#6666CC;">Unité de recherches en Sciences Halieutiques et aquaculture</div>
                                    </div>    
                                </div>
                                <div class="col-lg-4 col-sm-4"> 
                                    <div class="single-choose-us2 mb-45 text-center">
                                        <canvas id="myChart" width="150" height="150"></canvas>
                                        <div style="color:#CC3333;">3 </div>
                                        <div style="color:#CC3333;">Unités de recherches en Sciences Vétérinaires</div>
                                    </div>   
                                </div>
                                <div class="col-lg-4 col-sm-4">
                                    <div class="single-choose-us2 mt-45 text-center">
                                        <div class="titleUR2">9 </div>
                                        <div class="titleUR2">Unités de recherches en Sciences Agronomiques et Agroalimentaires</div>
                    
                                        <div class="titleUR2 mt-40" style="color:#CC9933;">1 </div>
                                        <div class="titleUR2" style="color:#CC9933;">Unité de recherches en Sciences économiques et sociales appliquées à l’agriculture</div>
                                    </div>    
                                </div>
                            </div>
                        </div>
                    </div>
                    {% for liste in domaines %}
                    <div class="blog-author mt-80">
                        <div class="author-img">
                            <img src="{{img_folder}}/domaine/{{ liste.photo }}" alt="" class="img-fluid" style="  display: block;">
                        </div>
                        <div class="author-content">
                            <div class="author-content-top">
                                <div class="blog-designation mt-15">
                                    <h5><a href="{{ path('app_unitesRecherches_details',{id:liste.id})}}">{{ liste.name }} ({{ liste.abbreviation }})</a></h5>
                                    <i class="fa fa-user" style="color:#00a651;"></i><span>&nbsp;Coordinateur : </span><span>Pr {{ liste.coordinator }}</span>
                                    {% for unite in liste.uniteRecherches %}
                                    <div class="over-view-list">
                                        <div class="sin-over-view-list">
                                            <div class="course-list-icon">
                                                <i class="fa fa-check"></i>
                                            </div>
                                            <div class="course-list-content">
                                                <p>{{ unite.name }}</p>
                                            </div>
                                        </div>
                                    </div>
                                     {% endfor %}
                                </div>
                             
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>   
                         
{% endblock %}
{% block javascripts %}
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['D1', 'D2', 'D3', 'D4', 'D5'], 
    datasets: [{
      label: '# of Tomatoes',
      data: [25, 25, 25, 25, 25],
      backgroundColor: [ 
        'rgba(51, 153, 51, 1)',
        'rgba(255, 135, 51, 1)',
        'rgba(204, 0, 0, 1)',
        'rgba(51, 102, 204, 1)',
        'rgba(204, 102, 153, 1)'
      ],
      borderColor: 'white',
      borderWidth: 2
    }]
  },
  //showTooltips: false,
  options: {
    responsive: true,
    maintainAspectRatio: false,
    pieceLabel: {
            render: 'labels',
            arc: true,
            fontColor: '#000',
            position: 'outside'
        },
    layout: {
        padding: {
        eft: 0,
        right: 0,
        top: 30,
        bottom: 30,
            }
        },
        cutoutPercentage: 80,
       // borderRadius: 3,
    legend: {
            display: false
         },
         
         tooltips: {
            enabled: false
         }

  }
});
Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;
    ctx.restore();
    var fontSize = 1;
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";
    var text = "20 Unités de recherche",
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;
    ctx.fillText(text, textX, textY);
    ctx.save();
  }
});
</script>
{% endblock %}