{% extends 'base.html.twig' %}

{% block title %}Rapport{% endblock %}



{% block content %}

<!-- az-header -->
<div class="az-content">
    <div class="container">
        <div class="az-content-body d-flex flex-column">


            <div class="az-content-breadcrumb">
                <span>Rapport</span>
                <span>Détail</span>
            </div>
            <h2 class="az-content-title">Rapport</h2>
            <div class="az-content-label mg-b-5"></div>
            
            <div class="wd-500 mg-b-20">      
                <select class="form-control">
                    {% for investigation in listeInvestigations %}
                        <option value="{{ investigation.id }}"> {{ investigation.name }}</option>
                    {% endfor %}
                </select>
            </div>         

            <div class="card card-dashboard-one">
                <div class="card-header">
                    <div>
                        <label class="mg-b-0">Total des views</label>
                        <h2>13,956</h2>
                    </div>
                    <div>
                        <label class="mg-b-0">Total des reponses</label>
                        <h2>33.50%</h2>
                    </div>
                    <div class="btn-group">
                        <button class="btn active">Excel</button>
                        <button class="btn">PDF</button>
                        <button class="btn">CSV</button>
                    </div>
                </div>
                <!-- card-header -->
                <div class="card-body">
                    <!-- card-body-top -->
                    <div class="flot-chart-wrapper">
                        <div id="flotChart" class="flot-chart"></div>
                    </div>
                    <!-- flot-chart-wrapper -->
                </div>
                <!-- card-body -->
            </div>
            <!-- card -->


                                <div class="card card-dashboard-five">
                                    <div class="card-header">
                                        <h6 class="card-title">Question 1</h6>
                                        <span class="card-text">Tells you where your visitors originated from, such as search engines, social networks or website referrals.</span>
                                    </div>
                                    <!-- card-header -->
                                    <div class="card-body row row-sm">
                                        <div class="col-md-6">
                                            <div class="az-traffic-detail-item">
                                                <div>
                                                    <span>Organic Search</span>
                                                    <span>1,320 <span>(25%)</span></span>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar bg-purple wd-25p" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                                <!-- progress -->
                                            </div>
                                            <div class="az-traffic-detail-item">
                                                <div>
                                                    <span>Email</span>
                                                    <span>987 <span>(20%)</span></span>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary wd-20p" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                                <!-- progress -->
                                            </div>
                                            <div class="az-traffic-detail-item">
                                                <div>
                                                    <span>Referral</span>
                                                    <span>2,010 <span>(30%)</span></span>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar bg-info wd-30p" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                                <!-- progress -->
                                            </div>
                                            <div class="az-traffic-detail-item">
                                                <div>
                                                    <span>Other</span>
                                                    <span>400 <span>(10%)</span></span>
                                                </div>
                                                <div class="progress">
                                                    <div class="progress-bar bg-gray-500 wd-10p" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                                <!-- progress -->
                                            </div>
                                        </div>
                                    </div>
                                    <!-- card-body -->
                                </div>


        </div>
    </div>
</div>
{% block javascripts %}
    <script src="{{ asset('assets/js/chart.flot.sampledata.js') }}"></script>
        <script src="{{ asset('assets/js/dashboard.sampledata.js') }}"></script>
        <script src="{{ asset('assets/lib/chart.js/Chart.bundle.min.js') }}"></script>
    <script type="text/javascript">
            $(function(){
              'use strict'
            
            var plot = $.plot('#flotChart', [{
                data: flotSampleData3,
                color: '#007bff',
                lines: {
                  fillColor: { colors: [{ opacity: 0 }, { opacity: 0.2 }]}
                }
              },{
                data: flotSampleData4,
                color: '#560bd0',
                lines: {
                  fillColor: { colors: [{ opacity: 0 }, { opacity: 0.2 }]}
                }
              }], {
            	series: {
            		shadowSize: 0,
                  lines: {
                    show: true,
                    lineWidth: 2,
                    fill: true
                  }
            	},
                grid: {
                  borderWidth: 0,
                  labelMargin: 8
                },
            	yaxis: {
                  show: true,
            		min: 0,
            		max: 100,
                  ticks: [[0,''],[20,'20K'],[40,'40K'],[60,'60K'],[80,'80K']],
                  tickColor: '#eee'
            	},
            	xaxis: {
                  show: true,
                  color: '#fff',
                  ticks: [[25,'OCT 21'],[75,'OCT 22'],[100,'OCT 23'],[125,'OCT 24']],
                }
              });
            
              
            
              
            
            
              
            
            });
        </script>
        {% endblock %}
{% endblock %}