{% extends "layoutBack.html.twig" %}

{% block title "Historique de pointage" %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('backEnd/assets/css/bootstrap-datepicker.css') }}" />

    <!-- Switch Buttons  -->
    <link rel="stylesheet" href="{{ asset('backEnd/assets/css/switch-buttons/switch-buttons.css') }}" />

    <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
    <link rel="stylesheet" href="{{ asset('backEnd/assets/css/plugins/file-upload/jquery.fileupload.css') }}" />
    <link rel="stylesheet" href="{{ asset('backEnd/assets/css/plugins/file-upload/jquery.fileupload-ui.css') }}" />
{% endblock %}
{% block body %}
<div class="warper container-fluid">

    <div class="panel panel-primary">
        <div class="panel-heading">Historique de pointage<span id="js-type-user"></span></div>
        <div class="panel-body">
            {%if is_granted('ROLE_ADMIN') %}
                <div class="row hide-print">
                    
                    <div class="panel">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-7">
                                    <span class="btn btn-success" id="js-extract-rapport">
                                        <i class="fa fa-2x fa-file-pdf-o"></i>
                                        <span>Extraction rapport du pointage</span>
                                    </span>
                                </div>
                            </div>
                    </div>

                </div>
                {%endif%}
                
                <div class="col-md-12">

                    <div class="col-md-2 form-group">
                        <div class="input-group">
                            <label>Date début du :</label>
                            <input type="text" class="col-sm-12 form-control datetimepicker" data-provide="datetimepicker" data-date-format="DD-MM-YYYY" id="js-beginDate" name="beginDate" placeholder="Date début du..." style="border-radius: 5px;">
                        </div>
                    </div>

                    <div class="col-md-2 form-group">
                        <div class="input-group">
                            <label>Date début au :</label>
                            <input type="text"  class="col-sm-12 form-control datetimepicker" data-provide="datetimepicker" data-date-format="DD-MM-YYYY" id="js-endDate" name="endDate" placeholder="Date début au ..." style="border-radius: 5px;">
                        </div>
                    </div>

                    <div class="col-md-3 form-group">
                        <div class="input-group">
                            <label>Utilisateur :</label>
                            <select id="js-id-user" class="form-control">
                            {% if is_granted('ROLE_ADMIN')%}
                                <option value="0">Tous</option>
                                {% if users is defined %}
                                    {% for user in users %}
                                        <option value="{{ user.id }}">{{ user.firstname }} {{ user.lastname }}</option>
                                    {% endfor %}

                                {% endif %}
                                
                            {% else %}
                                        <option value="{{ app.user.id }}">{{ app.user.firstname }} {{ app.user.lastname }}</option>

                            {% endif %}

                            </select>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <label>Nombre des pages :</label>
                        <select id="js-perpage" class="form-control">
                            <option value="10" selected>10</option>
                            <option value="20">20</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label>récupérer les congés ?</label>
                        <select id="js-recup-holidays" class="form-control">
                            <option value="1" selected>OUI</option>
                            <option value="0">NON</option>
                        </select>
                    </div>

                </div>

            </div>
            <div  id="dataContainer">
                <img class="img-responsive" src="{{ asset('backEnd/assets/images/loading/loading.gif') }}" style="margin: 0 auto;">
            </div>

        </div>
    </div>
</div>
{% endblock %}
{% block javascripts %}
    <!-- InputMask -->
    <script src="{{ asset('backEnd/assets/js/plugins/inputmask/jquery.inputmask.bundle.js') }}" type="text/javascript"></script>

    <!-- moment -->
    <script src="{{ asset('backEnd/assets/js/moment/moment.js') }}" type="text/javascript"></script>
    <script src="{{ asset('backEnd/assets/js/bootstrap-datepicker.js') }}" type="text/javascript"></script>
    <script src="{{ asset('backEnd/assets/js/bootstrap-datetimepicker.js') }}" type="text/javascript"></script>


    <script>

        function refreshList() {
            var dataContainer = $('#dataContainer');
            dataContainer.html('<img class="img-responsive" src="{{ asset('backEnd/assets/images/loading/loading.gif') }}" style="margin: 0 auto;">');

            var beginDate = $('#js-beginDate').val();
            var endDate = $('#js-endDate').val();
            var userId = $('#js-id-user').val();
            var recupHolidays = $('#js-recup-holidays').val();

           
            var npg = $('#js-perpage').val();
            npg = typeof npg !== 'undefined' ? npg : 10;
            var param = 'limit=' + npg;
            if(userId != "")
            {
                param+= "&userId="+encodeURIComponent(userId);
            }
            if(beginDate != "")
            {
                param+= "&beginDate="+encodeURIComponent(beginDate);
            }
            if(endDate != "")
            {
                param+= "&endDate="+encodeURIComponent(endDate);
            }
            if(recupHolidays != "")
            {
                param+= "&recupHolidays="+encodeURIComponent(recupHolidays);
            }

            
            $.ajax({
                url: "{{  path('admin_get_record_history_ajax')}}",
                type: "GET",
                data : param,
                dataType: "html",
                success: function (data) {
                    dataContainer.html(data);
                    $('.datetimepicker').datetimepicker({
                        format: "DD-MM-YYYY HH:mm"
                    });
                    $('#dataTablerecordHistory').DataTable(
                            settingsDataTable()
                    );
                }
            });
        }



        $(function(){

            $('.datetimepicker').datetimepicker({
                format: "DD-MM-YYYY HH:mm"
            });

            refreshList();
            $('#dataContainer').on('click', "ul.pagination a" , function(e){
                var url = $(this).attr('href');
                $.ajax({
                    type: "GET",
                    url: url
                })
                    .done(function( msg ) {
                        $('#dataContainer').html(msg);
                        $('#dataTablerecordHistory').DataTable(
                                settingsDataTable()
                        );
                    });
                e.preventDefault();
            });
            $('#js-perpage').change(function(e){
                refreshList();
            });

            $('#js-id-user').change(function(e){
                refreshList();
            });

            $('#js-beginDate').change(function(e){
                refreshList();
            });

            $('#js-endDate').change(function(e){
                refreshList();
            });

            $('#js-recup-holidays').change(function(e){
                refreshList();
            });

            $('#js-extract-rapport').on('click', function(e){

                var beginDate = $('#js-beginDate').val();
                var endDate = $('#js-endDate').val();
                var userId = $('#js-id-user').val();
                if((beginDate =="")||(endDate ==""))
                {
                    bootbox.alert("Merci de préciser la date de début et date fin pour l'extraction du rapport");
                }
                else
                {
                    var dialog = bootbox.dialog({
                        message: '<p class="text-center"><span class="messageDialog">En cours de traitement ...</span><br/><div align="center" class="blockPDFRapport" style="display:none;margin-top:25px;"><a download="" class="linkPDFRapport" href="#"  target="_blank">Télécharger le rapport PDF</a></div></p><div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> <span class="sr-only">45% Complete</span> </div> </div>',
                        closeButton: true
                    });

                        
                    $.ajax({
                        type: "POST",
                        url: Routing.generate('generateRapportPDF'),
                        data: {beginDate:beginDate,endDate:endDate,userId:userId},
                        success: function (data) {
                            if(data.code == 200 && data.success == 1)
                            {
                                $(".linkPDFRapport").attr("href",data.link);
                                $(".linkPDFRapport").attr("download",data.filename);
                                $(".blockPDFRapport").css("display","block");                            
                                toastr.success('Rapport PDFgénéré avec succès');
                                $(".progress").css("display","none");

                            }
                            else
                            {
                                toastr.warning(data.errorMessage);
                            }
                            
                        }
                    });
                }

            });

            

        });
    </script>
{% endblock %}