{% extends "ChakaStatistiquesBundle:base.html.twig" %}

{% block pagetitle %}Statistiques{% endblock %}

{% block body %}
    <article class="content-block">
        <form method="post" action="{{ path ('chaka_statistiques_formulaire') }}" id="formStatistiques">

            <div class="row">
                <div class="col-lg-4">
                    <div class="panel panel-default" id="panelCampagne">
                        <div class="panel-heading">Campagne</div>
                        <div class="panel-body">
                            <select name="campagne" id="campagne" class="form-control ">
                                <option value="0">Choisir...</option>
                                {% for camp in campagnes %}
                                    <option value="{{ camp.campagnes_dnis }}">{{ camp.campagnes_nom }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="panel panel-default" id="panelCategorie">
                        <div class="panel-heading">Catégorie</div>
                        <div class="panel-body">
                            <select name="categorie" id="categorie" class="form-control">
                                <option value="0">Choisir...</option>
                                <option value="1">Statistiques des appels</option>
                                {% if is_granted("ROLE_STATISTIQUES") %}
                                <option value="2">Statistiques des opérateurs</option>
                                {% endif %}
                                {% if is_granted("ROLE_STATISTIQUES") %}
                                <option value="3">Statistiques des requêtes</option>
                                <option value="4">Mic Report</option>
                                <option value="5">Statistique des sessions</option>
                                <option value="6">Top5 catégories</option>
                                {% endif %}
                                <option value="7">Statistiques des SVI</option>
                                <option value="8">Statistiques des SMS</option>
                                {% if is_granted("ROLE_STATISTIQUES") %}
                                <option value="9">Statistiques des chats web</option>
                                {% endif %}
                                <option value="10">Statistiques des emails</option>
                                {% if is_granted("ROLE_STATISTIQUES") %}
                                <option value="11">Statistiques des fax</option>
                                <option value="12">Statistiques Outband</option>
                                {% endif %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="panel panel-default" id="panelCriteres">
                        <div class="panel-heading">Critères</div>
                        <div class="panel-body">
                            <select name="criteres" id="criteres" class="form-control">
                                <option value="0">Choisir...</option>
                                <option value="1">Statistiques journalières</option>
                                <option value="2">Statistiques mensuelles</option>
                                <option value="3">Statistiques annuelles</option>
                                <option value="4">Statistiques par période</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!--============== Statistiques journaliers ================-->

                <div class="col-lg-4 col-md-offset-4" id="statsJournalieres">
                    <div class="panel panel-default">
                        <div class="panel-heading">Jour</div>
                        <div class="panel-body">

                            <div class="form-group">
                                <div class='input-group date' id='datetimejour'>
                                    <input type="text" id="jour" name="jour" class="form-control"
                                           aria-describedby="jour"
                                           placeholder="jj/mm/aaaa"/>
                                <span class="input-group-addon">
                                    <span class="icon-calendar"></span>
                                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--============== Statistiques journaliers ================-->


                <!--============== Statistiques mensuelles ================-->
                <div class="col-lg-4 col-md-offset-4" id="statsMensuelles">
                    <div class="panel panel-default">
                        <div class="panel-heading">Mois</div>
                        <div class="panel-body">

                            <div class="form-group">
                                <div class='input-group date' id='datetimemois'>
                                    <input type="text" id="mois" name="mois" class="form-control"
                                           aria-describedby="mois"
                                           placeholder="mm/aaaa"/>
                                <span class="input-group-addon">
                                    <span class="icon-calendar"></span>
                                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--============== Statistiques mensuelles ================-->


                <!--============== Statistiques annuelles ================-->
                <div class="col-lg-4 col-md-offset-4" id="statsAnnuelles">
                    <div class="panel panel-default">
                        <div class="panel-heading">Année</div>
                        <div class="panel-body">
                            <div class='date' id='datetimean'>
                                <select name="annee" id="annee" class="form-control">
                                    <option value="0">Choisir ...</option>
                                    {% for i in range (2010 , 2030) %}
                                        <option value="{{ i }}">{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <!--============== Statistiques mensuelles ================-->

                <!--============== Statistiques par période ================-->
                <div class="col-lg-8 col-md-offset-2" id="statsPeriodiques">
                    <div class="panel panel-default">
                        <div class="panel-heading">Prériode</div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class='input-group date' id='datetimedebut'>
                                        <span class="input-group-addon">
                                            Du:
                                        </span>
                                            <input type="text" id="datedebut" name="datedebut" class="form-control"
                                                   aria-describedby="datedebut"
                                                   placeholder="jj/mm/aaaa"/>
                                        <span class="input-group-addon">
                                            <span class="icon-calendar"></span>
                                        </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class='input-group date' id='datetimefin'>
                                        <span class="input-group-addon">
                                            Au:
                                            </span>
                                            <input type="text" id="datefin" name="datefin" class="form-control"
                                                   aria-describedby="datefin"
                                                   placeholder="jj/mm/aaaa"/>
                                            <span class="input-group-addon">
                                            <span class="icon-calendar"></span>
                                        </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--============== Statistiques par période ================-->

            </div>
            <div class="row">
                <div class="col-md-4 col-md-offset-4 text-right">
                    <button type="submit" class="btn btn-primary" style="width: 100%"><i class="icon-filter"></i>
                        Afficher les résultats
                    </button>
                </div>
            </div>
        </form>
    </article>
{% endblock %}
{% block javascripts %}
    {% javascripts output='js/main2.js'
    'js/moment.js'
    'js/bootstrap-datetimepicker.min.js'
    'js/bootstrap-datetimepicker.fr.js' %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        $('#datetimejour').datetimepicker({
            pickDate: true,                 //en/disables the date picker
            pickTime: false,               //set the minute stepping
            showToday: true,                 //shows the today indicator
            language: 'fr'                  //sets language locale
        });


        $('#datetimemois').datetimepicker({
            pickDate: true,                 //en/disables the date picker
            pickTime: false,               //set the minute stepping
            showToday: true,                 //shows the today indicator
            language: 'fr',                  //sets language locale
            format: 'MM/YYYY'
        });

        $('#datetimedebut').datetimepicker({
            pickDate: true,                 //en/disables the date picker
            pickTime: false,               //set the minute stepping
            showToday: true,                 //shows the today indicator
            language: 'fr'                  //sets language locale
        });

        $('#datetimefin').datetimepicker({
            pickDate: true,                 //en/disables the date picker
            pickTime: false,               //set the minute stepping
            showToday: true,                 //shows the today indicator
            language: 'fr'                  //sets language locale
        });

        $('#statsJournalieres').hide();
        $('#statsMensuelles').hide();
        $('#statsAnnuelles').hide();
        $('#statsPeriodiques').hide();

        //Choisir les options à afficher pour critères
        $('#categorie').change(function () {
            var option = $(this).find(":selected").val();
            if (option == '3') {
                $("#criteres option[value='2']").remove();
                $("#criteres option[value='3']").remove();
                $("#criteres option[value='4']").remove();
            } else {
                $("#criteres option").each(function () {
                    $(this).remove();
                });
                $('#criteres').append($('<option>', {value: 0, text: 'Choisir...'}));
                $('#criteres').append($('<option>', {value: 1, text: 'Statistiques journalière'}));
                $('#criteres').append($('<option>', {value: 2, text: 'Statistiques mensuelles'}));
                $('#criteres').append($('<option>', {value: 3, text: 'Statistiques annuelles'}));
                $('#criteres').append($('<option>', {value: 4, text: 'Statistiques par période'}));
            }
        });

        $('#criteres').change(function () {
            var option = $(this).find(":selected").val();
            if (option == '0') {
                $('#statsJournalieres').hide('fast');
                $('#statsMensuelles').hide('fast');
                $('#statsAnnuelles').hide('fast');
                $('#statsPeriodiques').hide('fast');
            }
            else if (option == '1') {
                $('#statsJournalieres').show('fast');
                $('#statsMensuelles').hide('fast');
                $('#statsAnnuelles').hide('fast');
                $('#statsPeriodiques').hide('fast');
            }
            else if (option == '2') {
                $('#statsMensuelles').show('fast');
                $('#statsJournalieres').hide('fast');
                $('#statsAnnuelles').hide('fast');
                $('#statsPeriodiques').hide('fast');
            }
            else if (option == '3') {
                $('#statsAnnuelles').show('fast');
                $('#statsJournalieres').hide('fast');
                $('#statsMensuelles').hide('fast');
                $('#statsPeriodiques').hide('fast');
            }
            else if (option == '4') {
                $('#statsPeriodiques').show('fast');
                $('#statsJournalieres').hide('fast');
                $('#statsMensuelles').hide('fast');
                $('#statsAnnuelles').hide('fast');
            }
        });

        /*for (i = 2010; i <= 2050; i++)
         $('#annee').append('<option value="' + i + '">' + i + '</option>');*/

        //Validation du formulaire
        $("#formStatistiques").submit(function () {
            var optionCamp = $("#campagne").find(":selected").val();
            var optionCat = $("#categorie").find(":selected").val();
            var optionCrit = $("#criteres").find(":selected").val();
            if (optionCamp == '0') {
                $('#panelCampagne').addClass('has-error panel-danger');
                return false;
            } else {
                $('#panelCampagne').removeClass('has-error panel-danger');
            }
            if (optionCat == '0') {
                $('#panelCategorie').addClass('has-error panel-danger');
                return false;
            } else {
                $('#panelCategorie').removeClass('has-error panel-danger');
            }
            if (optionCrit == '0') {
                $('#panelCriteres').addClass('has-error panel-danger');
                return false;
            } else {
                $('#panelCriteres').removeClass('has-error panel-danger');
            }
        });


        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>
{% endblock %}