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

{% block pagetitle %}Appels enregistrés{% endblock %}

{% block body %}
    <article class="content-block">
        <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_id }}">{{ 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="agent" id="agent" class="form-control">
                            <option value="0">Choisir...</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-lg-4" id="journalieres">
                <div class="panel panel-default">
                    <div class="panel-heading">Jour</div>
                    <div class="panel-body">
                        <input type="text" id="jour" name="jour" class="form-control"
                               aria-describedby="jour"
                               placeholder="jj/mm/aaaa"/>
                    </div>
                </div>
            </div>


        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="tableappel"></div>
            </div>


        </div>

    </article>
{% endblock %}
{% block javascripts %}
    {% javascripts output='js/main2.js'
    'js/moment.js'
    'js/datatables.min.js'
    'js/bootstrap-datetimepicker.min.js'
    'js/bootstrap-datetimepicker.fr.js' %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        $('#jour').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
            dateFormat: 'dd/mm/yyyy'
        }).on('change', function (ev) {
            if ($("#campagne").val() === "0" || $("#agent").val() === "0")
                return false;

            var date = $(this).val();
            getAppel($("#campagne").val(), $("#agent").val(), date);
        });
        function getAppel(idC, idA, date) {
            var url = "{{ path('chaka_ecoute_appel_getAppel') }}";
            $.post(url, {idC: idC, idA: idA, date: date}, function (data) {
                $("#tableappel").html(data);
                $("#tables").DataTable();
            });
        }
        $('#agent').change(function () {
            var date = $("#jour").val();
            if (date!="")
                getAppel($("#campagne").val(), $("#agent").val(), date);
        });

        $('#campagne').change(function () {
            $("#tableappel").html('');
            var url = "{{ path('chaka_ecoute_appel_getAgent') }}";
            var id = $(this).val();
            $.post(url, {id: id}, function (data) {
                var json = JSON.parse(data);
                $("#agent").html('<option value="0">Choisir...</option>');
                $.each(json, function (key, user) {
                    $("#agent").append("<option value=" + user["matricule"] + ">" + user["matricule"] + "/" +
                            user["prenom"] + " " + user["nom"] + "</option>");
                });
            });
        });


    </script>
{% endblock %}