{% extends "public/base.html" %}
{% block title %}Rapport{% endblock title %}
{% block slideshow %}{% endblock slideshow %}
{% block content %}
 <div class="container-fluid">
	      <div class="row">
                <div class="col-sm-3 col-md-2 sidebar">
                      <ul class="nav nav-sidebar">
                        <li class="active" id="overview">
                            <a href="#bloc1">Aper&ccedil;u<span class="sr-only">(current)</span></a>
                        </li>
                        <li>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                              Rapports <span class="caret"></span>
                            </a>
                            <ul class="nav nav-sidebar dropdown-menu">
                                <li><a href="#rap1">Comparaison par departement</a></li>
                            </ul>
                        </li>
                      </ul>
                </div>
                <div id="lesblocs">
                  <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="bloc1">
                      <br /><br /><br />
                        <div class="bs-example">
                            <ul class="nav nav-tabs" id="myTab">
                                <li class="active"><a href="#sectionA">Graphe</a></li>
                                <li><a href="#sectionB">Tableau</a></li>
                                <li onclick="setTimeout('map.invalidateSize()', 500)"><a href="#section">Carte</a></li>
                            </ul>
                            <!--Limit-->
                            <!--Limit-->

                        <div class="tab-content">
                            <div id="sectionA" class="tab-pane fade in active">
                                    <h2 class="sub-header">Graphe des donn&eacute;es pluviom&eacute;triques enregistr&eacute;es</h2>
                                    <div class="table-responsive">
                                        <canvas id="canvas" height="450" width="750"></canvas>
                                    </div>
                            </div><!--Fin sectionA-->
                            <!--Limit-->
                            <div id="sectionB" class="tab-pane fade">
                                    <h2 class="sub-header">Tableau des enregistrements pluviom&eacute;triques</h2>
                                    <form class="form-inline" style="border-color: white;">
                                        <label for="slct">Selection : </label>
                                        <select id="slct" class="form-control btn">
                                            <option value="">Ouest</option>
                                            <option value="">Nord</option>
                                            <option value="">Sud</option>
                                            <option value="">Nord-Est</option>
                                            <option value="">Nord-Ouest</option>
                                            <option value="">Sud-Est</option>
                                        </select>
                                    </form><br />
                                    <div class="table-responsive" id="tablo">
                                        <table class="table table-striped table-bordered">
                                          <thead>
                                            <tr>
                                              <th>D&eacute;partements</th>
                                              <th>Commune</th>
                                              <th>Date</th>
                                              <th>Nombre de Stations(<em>par commune</em>)</th>
                                              <th>Quantit&eacute; de pluie moyenne</th>
                                            </tr>
                                          </thead>
                                          <tbody>
                                          </tbody>
                                        </table>
                                    </div>
                            </div><!--Fin sectionB-->
                            <!--Limit-->

                            <div id="section" class="tab-pane fade">
                                    <h2 class="sub-header">Carte des enregistrements pluviom&eacute;triques</h2>
                                    <div class="table-responsive">
                                        <div id="Map"></div>

                                    </div>
                            </div>

                        </div><!--Fin tab-content-->
                        </div> <!--Fin bs-example dans bloc1-->
                </div><!--Fin bloc1-->
                <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main hidenSubMenuContent" id="rap1">
                    <div class="bs-example">
                        <h3>Comparaison des donnees pluviometrique par departement</h3>
                        <p>Frequence: Hebdomadaire</p>
                        <ul class="nav nav-tabs" id="myTab_rapport">
                            <li class="active"><a href="#opt1">Graphe</a></li>
                            <li><a href="#opt2">Tableau</a></li>
                            <li><a href="#opt3">Carte</a></li>
                            <li><a href="#opt4">Exportation</a></li>
                        </ul>
                        <div class="tab-content">
                            <div id="opt1" class="tab-pane fade in active">
                                <br /><br />
                                <select id="first-disabled2" class="selectpicker" multiple data-hide-disabled="true" data-size="5">
                                    {% if dep_lst %}
                                        {% for dept in dep_lst %}
                                            <option>{{ dept.departement }}</option>
                                        {% endfor %}
                                    {% endif %}
                                  </select><br /><br />
                                <canvas class="canvas" id="canvas2" height="450" width="750">adsfadsfasdfasdfasd</canvas>

                            </div>
                            <div id="opt2" class="tab-pane fade jumbotron">
                               <table class="table table-striped table-bordered">
                                  <thead>
                                    <tr>
                                      <th>D&eacute;partements</th>
                                      <th>Jour</th>
                                      <th>Quantit&eacute; de pluie moyenne</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                  </tbody>
                                </table>
                            </div>
                            <div id="opt3" class="tab-pane fade jumbotron">
                                <p>Rapports Non-Disponible</p>
                            </div>
                            <div id="opt4" class="tab-pane fade jumbotron">
                                <p>Module d'exportation non disponible</p>
                            </div>
                        </div>
                    </div>
                </div>
                </div><!--Fin lesblocs-->
          </div><!--Fin row-->

    </div>
{% endblock content %}