{% extends "public/base.html" %}
{% load staticfiles %}
{% block title %}Rapport{% endblock %}

            <style type="text/css">
                .vcenter {
                    margin-top: 7px;
                    margin-bottom: 7px;
                }
                /* enable absolute positioning */
                .inner-addon {
                    position: relative;
                }

                /* style icon */
                .inner-addon .glyphicon {
                  position: absolute;
                  padding: 10px;
                  pointer-events: none;
                }

                /* align icon */
                .left-addon .glyphicon  { left:  0px;}
                .right-addon .glyphicon { right: 0px;}

                /* add padding  */
                .left-addon input  { padding-left:  30px; }
                .right-addon input { padding-right: 30px; }
                #Map {
                min-height: 450px;
                }

                .awesome-marker i {
                    font-size: 12px !important;
                    margin-top: 8px;
                }
            </style>


    <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <center>
              <img class="navbar-brand" src="{% static "public/img/logoMenu.png" %}">
               <a class="navbar-brand" href="http://www.cnsa509.org/" target="_blank"> CNSA</a>
              </center>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="/">Accueil</a></li>
                    <li><a href="/rapport/pluviometrie/">Pluviom&eacute;trie</a></li>
                    <li><a href="#">March&eacute;</a></li>
                </ul>
                <!-- Button HTML (to Trigger Modal) -->
                <a href="/admin/" class="vcenter btn nav-form btn-success navbar-right">ADMIN</a>
                <!-- <button type="submit" class="vcenter btn nav-form btn-success show-modal navbar-right">Sign in </button>-->
            </div>
          </div>
    </nav>

    <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><!--Fin container-fluid-->