{% extends "public/rapport.html" %}
{% load staticfiles %}

{% block content %}
{% comment %}
<!--
 <div class="content container">
	      <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 href="#bloc1">Aper&ccedil;u<span class="sr-only">(current)</span></a>
                        </li>
                          <li>
                            <a href="#bloc1">Aper&ccedil;u<span class="sr-only">(current)</span></a>
                        </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" style="margin-left:0">
                        <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>

                            <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><!--Fin lesblocs-->
</div><!--Fin row-->

</div>
{% endcomment %}

<div class="content container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="/rapport/pluviometrie/overview/">Vue d'ensemble <span class="sr-only">(current)</span></a></li>
                <li><a href="/rapport/pluviometrie/overview/moyenne/">Moyenne Ponderée</a></li>
                <li><a href="#">Alertes et Zones à risques</a></li>
                <li><a href="#">Export</a></li>
            </ul>
        </div>
        <div id="lesblocs" style="margin-left:0;" class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

            <div id="Filter">
                <select id="SelDept" class="selectpicker" data-style="btn-info" multiple
                        title="Selectionnez au moins un Departement" data-width="300px">
                    <option data-hidden="true">Selectionnez au moins un Département</option>
                    {% if dep_lst %}
                    {% for dept in dep_lst %}
                    <option departement selected="selected" value="{{ dept.pk }}">{{ dept.nom }}</option>
                    {% endfor %}
                    {% endif %}
                </select>
                &nbsp;<img class="btn btn-default" src='{% static "public/img/reload.png" %}' title="Recharger" onclick="loadStations(); loadDataChart();"><br>
                <span class="selectAll"><input type="checkbox" checked="checked"
                                               onchange="if( $(this).is(':checked') ) { nbrSel = 'selectAll' } else { nbrSel = 'deselectAll' } $('.selectpicker').selectpicker(nbrSel);"> Tout Selectionnez </span>
            </div>

            <ul class="nav nav-tabs" id="myTab">
                <li role="carte_interactive" class="active">
                    <a href="#carte_interactive" aria-controls="carte_interactive" role="tab" data-toggle="tab">Carte Interactive</a>
                </li>
                <li role="graphiques" onclick="setTimeout('refreshChart()', 500)">
                    <a href="#graphiques" aria-controls="graphiques" role="tab" data-toggle="tab">Graphiques</a>
                </li>
                <li role="tableau">
                    <a href="#tableau" aria-controls="tableau" role="tab" data-toggle="tab">Tableau</a>
                </li>
            </ul>

            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active" id="carte_interactive">
                    <h2 class="sub-header">Statuts des différents stations</h2>

                    {% include "hydromet/includes/map_overview.html" %}

                    <div class="table-responsive">
                        <!-- <canvas id="canvas" height="450" width="750"></canvas>-->
                    </div>
                </div>
                <!--Fin sectionA-->
                <!--Limit-->
                <div role="tabpanel" class="tab-pane fade" id="graphiques">
                    <h2 class="sub-header">Moyenne des Précipitations pour

                        <select onchange="loadDataChart();" id="SelMonth" class="selectpicker" data-style="btn-default" title="le mois en cours" data-width="300px">
                            {% for month in month_lst %}
                            <option selected="selected" value="{{ month.key }}">{{ month.val }}</option>
                            {% endfor %}
                        </select>

                    </h2>
                    {% include "hydromet/includes/chart_overview.html" %}
                </div>
                <!--Fin sectionB-->
                <!--Limit-->
                <div role="tabpanel" class="tab-pane fade" id="tableau">
                    <h2 class="sub-header">Carte des enregistrements pluviom&eacute;triques</h2>
                    {% include "hydromet/includes/table_overview.html" %}


                </div>

            </div>

        </div>
    </div>
</div>
{% endblock content %}
{% block docready %}$('.selectpicker').selectpicker();{% endblock docready %}